Skip to content

Commit 22f0855

Browse files
d-odumosud-odumosu
committed
feat: CSS styling completed.
1 parent b01c11e commit 22f0855

2 files changed

Lines changed: 52 additions & 36 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,16 @@
77
<meta name="description" content=""/>
88
<meta name="viewport" content="width=device-width, initial-scale=1"/>
99
<link rel="stylesheet" href="main.css">
10+
<link rel="preconnect" href="https://fonts.googleapis.com">
11+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12+
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
13+
<link href="https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap" rel="stylesheet">
1014
</head>
1115
<body>
1216
<header>
13-
<div class="container">
1417
<h1>Product Pick</h1>
15-
</div>
1618
</header>
17-
<main>
18-
<div class="container main-container">
19+
1920
<form>
2021
<!-- write your HTML here-->
2122
<!--
@@ -36,8 +37,7 @@ <h1>Product Pick</h1>
3637
name="firstname"
3738
required
3839
pattern="^[A-Za-z\s'-]{2,}$"
39-
title="first name must be between 2 and 15 characters"
40-
>
40+
title="first name must be more than 2 characters">
4141
</div>
4242

4343
<div class="form-group">
@@ -48,7 +48,7 @@ <h1>Product Pick</h1>
4848
name="lastname"
4949
required
5050
pattern="^[A-Za-z\s'-]{2,}$"
51-
title="last name must be between 2 and 15 characters">
51+
title="last name must be more than 2 characters">
5252
</div>
5353

5454
<div class="form-group">
@@ -70,8 +70,7 @@ <h1>Product Pick</h1>
7070
id="choice1"
7171
name="shirt"
7272
value="blue"
73-
required
74-
>
73+
required>
7574
<label for="choice1">Blue</label>
7675
</div>
7776

@@ -112,14 +111,10 @@ <h1>Product Pick</h1>
112111
</div>
113112
<button type="submit">Submit</button>
114113
</form>
115-
</div>
116-
</main>
117114

118115
<footer>
119116
<!-- change to your name-->
120-
<div class="container">
121117
<p>By DAMILOLA ODUMOSU</p>
122-
</div>
123118
</footer>
124119
</body>
125120
</html>

‎Form-Controls/main.css‎

Lines changed: 44 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,55 @@
1-
*{
1+
* {
22
box-sizing: border-box;
3-
}
4-
5-
body{
63
margin:0;
7-
padding:0;
8-
font-family: "Times New Roman", Times, serif;
9-
/*line-height:;*/
10-
background:#403d39;
114
}
125
header, footer{
13-
background:#ccc5b9;
6+
text-align:center;
147
}
15-
/*footer{*/
16-
/* */
17-
/*}*/
18-
.main-container{
19-
background:#edede9;
20-
padding:40px 30px;
8+
h1{
9+
font-size: 4rem;
10+
font-weight: 900;
11+
line-height: 1;
2112
}
22-
.container{
23-
/*width:;*/
24-
margin: 0 auto;
13+
body{
14+
font-family: "Lato", sans-serif;
15+
font-size:18px;
16+
background-color:#c1121f;
17+
color:#fff;
18+
line-height: 1.6;
2519
}
26-
h1{
27-
font-size:2rem;
28-
text-align:center;
29-
margin-top: 0;
30-
padding:30px 0;
20+
21+
form{
22+
width: 50%;
23+
background: #780000;
24+
padding:45px;
25+
margin: 100px auto;
26+
border: 2px solid #9a031e;
3127
}
3228
.form-group{
3329
margin-bottom:10px;
3430
}
31+
label {
32+
text-transform: uppercase;
33+
margin-right:10px;
34+
}
35+
input {
36+
background: #fefae0;
37+
color: #880d1e;
38+
border: 2px solid #f26a8d;
39+
border-radius: 10px;
40+
padding: 0.5rem 1rem;
41+
}
42+
43+
button{
44+
cursor: pointer;
45+
background-color:#e63946;
46+
padding: 1em 1.5em;
47+
border: 0;
48+
border-radius: 16px;
49+
}
50+
p{
51+
text-transform:lowercase;
52+
font-family: "Pinyon Script", cursive;
53+
font-weight: 400;
54+
font-style: normal;
55+
}

0 commit comments

Comments
 (0)