Skip to content

Commit ef44f77

Browse files
TemceoTemceo
committed
update html and add style.css
1 parent a18892f commit ef44f77

2 files changed

Lines changed: 105 additions & 30 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 39 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,43 +6,52 @@
66
<title>My form exercise</title>
77
<meta name="description" content="" >
88
<meta name="viewport" content="width=device-width, initial-scale=1" >
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
12+
<link rel="stylesheet" href="style.css">
913
</head>
1014
<body>
1115
<header>
1216
<h1>Product Pick</h1>
1317
</header>
1418
<main>
15-
<form>
16-
<!-- Add input for name - required and validate -->
17-
<label>
18-
Name
19-
<input type="text" name="name" required>
20-
</label>
21-
<label>
19+
<form>
20+
<div class="form-group">
21+
<!-- Add input for name - required and validate -->
22+
<label for="name">Name</label>
23+
<input type="text" id="name" placeholder="Joe Bloggs" required>
24+
</div>
25+
<div class="form-group">
2226
<!-- Add input for email - required and validate -->
23-
Email
24-
<input type="email" name="email" required>
25-
</label>
26-
<!-- Drop down list of 3 colours (green, blue, red) - required -->
27-
<label for="colour">Choose a colour:</label>
28-
<select name="colour" id="colour" required>
29-
<option value="" disabled selected>Select a colour</option>
30-
<option value="red">Red</option>
31-
<option value="green">Green</option>
32-
<option value="blue">Blue</option>
33-
</select>
34-
<!-- Drop down list of 6 sizes (XS, S, M, L, XL, XXL) - required -->
35-
<label for="size">Choose a size:</label>
36-
<select name="size" id="size" required>
37-
<option value="" disabled selected>Select a size</option>
38-
<option value="xs">XS</option>
39-
<option value="s">S</option>
40-
<option value="m">M</option>
41-
<option value="l">L</option>
42-
<option value="xl">XL</option>
43-
<option value="xxl">XXL</option>
44-
</select>
45-
<button type="submit">Submit</button>
27+
<label for="email">Email</label>
28+
<input type="email" id="email" required>
29+
</div>
30+
<div class="form-group">
31+
<!-- Drop down list of 3 colours (green, blue, red) - required -->
32+
<label for="colour">Choose a colour:</label>
33+
<select name="colour" id="colour" required>
34+
<option value="" disabled selected>Select a colour</option>
35+
<option value="red">Red</option>
36+
<option value="green">Green</option>
37+
<option value="blue">Blue</option>
38+
</select>
39+
</div>
40+
41+
<div class="form-group">
42+
<!-- Drop down list of 6 sizes (XS, S, M, L, XL, XXL) - required -->
43+
<label for="size">Choose a size:</label>
44+
<select name="size" id="size" required>
45+
<option value="" disabled selected>Select a size</option>
46+
<option value="xs">XS</option>
47+
<option value="s">S</option>
48+
<option value="m">M</option>
49+
<option value="l">L</option>
50+
<option value="xl">XL</option>
51+
<option value="xxl">XXL</option>
52+
</select>
53+
</div>
54+
<button type="submit" id="submit-btn">Submit</button>
4655
</form>
4756
</main>
4857
<footer>

‎Form-Controls/style.css‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
* {
2+
box-sizing: border-box;
3+
margin: 0;
4+
}
5+
6+
input,
7+
button,
8+
select,
9+
textarea {
10+
font: inherit;
11+
}
12+
13+
input {
14+
width: 100%;
15+
/* height: 3rem; */
16+
}
17+
18+
form button {
19+
margin-top: 1rem;
20+
grid-column: 1 / -1;
21+
justify-self: center;
22+
width: 100%;
23+
@media(width > 550px) {
24+
width: 50%;
25+
}
26+
}
27+
28+
form {
29+
display: grid;
30+
gap: 1rem;
31+
border: 2px solid green;
32+
padding: 2rem;
33+
border-radius: 10px;
34+
35+
@media (width > 720px) {
36+
grid-template-columns: 1fr 1fr;
37+
38+
#submit-btn, header, footer {
39+
align-items: center;
40+
}
41+
42+
}
43+
}
44+
45+
.form-group {
46+
display: grid;
47+
gap: 0.5em;
48+
}
49+
50+
body {
51+
font-family: "Poppins", sans-serif;
52+
/* font-weight: 00; */
53+
font-style: normal;
54+
}
55+
56+
main, header, footer {
57+
margin: auto;
58+
width: 90%;
59+
max-width: 750px;
60+
}
61+
62+
header h1, footer p {
63+
text-align: center;
64+
margin: 1.5rem;
65+
}
66+

0 commit comments

Comments
 (0)