Skip to content

Commit f9c2505

Browse files
d-odumosud-odumosu
committed
Moved changes to correct branch
1 parent 5388ad5 commit f9c2505

2 files changed

Lines changed: 134 additions & 82 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 77 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,122 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<title>My form exercise</title>
7-
<meta name="description" content="" />
8-
<meta name="viewport" content="width=device-width, initial-scale=1" />
9-
<link rel="stylesheet" href="main.css">
10-
4+
<meta charset="utf-8"/>
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
6+
<title>My form exercise</title>
7+
<meta name="description" content=""/>
8+
<meta name="viewport" content="width=device-width, initial-scale=1"/>
9+
<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">
1114
</head>
1215
<body>
1316
<header>
14-
<div class="container">
1517
<h1>Product Pick</h1>
16-
</div>
1718
</header>
18-
<main>
19-
<div class="container">
20-
<form>
21-
<!-- write your html here-->
22-
<!--
23-
try writing out the requirements first as comments
24-
this will also help you fill in your PR message later-->
2519

26-
<!-- first and lastname (ensure it contains at least two non-space characters.)-->
27-
<!-- email (make sure the email is valid. Email addresses follow a consistent pattern.)-->
28-
<!-- shirt color (I must provide 3 options. How will I ensure they do not choose other colors?)-->
29-
<!-- shirt size (must provide the following 6 options: XS, S, M, L, XL, XXL)-->
20+
<form>
21+
<!-- write your HTML here-->
22+
<!--
23+
try writing out the requirements first as comments
24+
this will also help you fill in your PR message later-->
25+
26+
<!-- first and lastname (ensure it contains at least two non-space characters.)-->
27+
<!-- email (make sure the email is valid. Email addresses follow a consistent pattern.)-->
28+
<!-- shirt color (I must provide 3 options. How will I ensure they do not choose other colors?)-->
29+
<!-- shirt size (must provide the following 6 options: XS, S, M, L, XL, XXL)-->
3030

3131

32-
<div class="form-group">
33-
<label for="firstname">First Name</label>
32+
<div class="form-group">
33+
<label for="firstname">First Name </label>
3434
<input
3535
type="text"
3636
id="firstname"
3737
name="firstname"
3838
required
39-
pattern=""
40-
title=""
41-
>
42-
</div>
39+
pattern="^[A-Za-z\s'-]{2,}$"
40+
title="first name must be more than 2 characters">
41+
</div>
4342

44-
<div class="form-group">
43+
<div class="form-group">
4544
<label for="lastname">Last Name</label>
4645
<input
4746
type="text"
4847
id="lastname"
4948
name="lastname"
5049
required
51-
pattern=""
52-
title="">
53-
</div>
50+
pattern="^[A-Za-z\s'-]{2,}$"
51+
title="last name must be more than 2 characters">
52+
</div>
5453

55-
<div class="form-group">
54+
<div class="form-group">
5655
<label for="email">Email</label>
5756
<input
5857
type="email"
5958
id="email"
6059
name="email"
61-
required
62-
pattern=""
63-
title="">
64-
</div>
60+
required>
6561

66-
<div class="form-group">
62+
</div>
63+
64+
<div class="form-group">
6765
<fieldset>
68-
<legend>Choose a shirt color:</legend>
69-
<div class="form-group-fieldset">
70-
<input
71-
type="radio"
72-
id="choice1"
73-
name="shirt"
74-
value="blue"
75-
>
76-
<label for="choice1">Blue</label>
77-
</div>
66+
<legend>Choose a shirt color:</legend>
67+
<div class="form-group-fieldset">
68+
<input
69+
type="radio"
70+
id="choice1"
71+
name="shirt"
72+
value="blue"
73+
required>
74+
<label for="choice1">Blue</label>
75+
</div>
7876

79-
<div class="form-group-fieldset">
80-
<input
81-
type="radio"
82-
id="choice2"
83-
name="shirt"
84-
value="green"
85-
>
86-
<label for="choice2">Green</label>
87-
</div>
77+
<div class="form-group-fieldset">
78+
<input
79+
type="radio"
80+
id="choice2"
81+
name="shirt"
82+
value="green"
83+
>
84+
<label for="choice2">Green</label>
85+
</div>
8886

89-
<div class="form-group-fieldset">
90-
<input
91-
type="radio"
92-
id="choice3"
93-
name="shirt"
94-
value="yellow"
95-
>
96-
<label for="choice3">Yellow</label>
97-
</div>
87+
<div class="form-group-fieldset">
88+
<input
89+
type="radio"
90+
id="choice3"
91+
name="shirt"
92+
value="yellow"
93+
>
94+
<label for="choice3">Yellow</label>
95+
</div>
9896
</fieldset>
99-
</div>
97+
</div>
10098

101-
<div class="form-group">
99+
<div class="form-group">
102100
<label for="sizing">Choose a size:</label>
103-
<select id="sizing" name="size">
104-
<option value="">--Please choose an option--</option>
105-
<option value="ex-small">XS</option>
106-
<option value="small">S</option>
107-
<option value="medium">M</option>
108-
<option value="large">L</option>
109-
<option value="ex-large">XL</option>
110-
<option value="ex-ex-large">XXL</option>
101+
<select id="sizing" name="size" required>
102+
<option value="">--Please choose an option--</option>
103+
<option value="ex-small">XS</option>
104+
<option value="small">S</option>
105+
<option value="medium">M</option>
106+
<option value="large">L</option>
107+
<option value="ex-large">XL</option>
108+
<option value="ex-ex-large">XXL</option>
111109

112110
</select>
113-
</div>
114-
<button>Submit</button>
115-
</form>
116-
</div>
117-
</main>
111+
</div>
112+
<button type="submit">Submit</button>
113+
</form>
118114

119115
<footer>
120-
<!-- change to your name-->
121-
<div class="container">
116+
<!-- change to your name-->
122117
<p>By DAMILOLA ODUMOSU</p>
123-
</div>
124118
</footer>
125119
</body>
126120
</html>
127121

122+

‎Form-Controls/main.css‎

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

0 commit comments

Comments
 (0)