Skip to content

Commit 1086ffe

Browse files
LiyemaMfengwanaLiyemaMfengwana
committed
finish exercise
1 parent d28242a commit 1086ffe

1 file changed

Lines changed: 113 additions & 25 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 113 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,115 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<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-
</head>
10-
<body>
11-
<header>
12-
<h1>Product Pick</h1>
13-
</header>
14-
<main>
15-
<form>
16-
<!-- write your html here-->
17-
<!--
18-
try writing out the requirements first as comments
19-
this will also help you fill in your PR message later-->
20-
</form>
21-
</main>
22-
<footer>
23-
<!-- change to your name-->
24-
<p>By HOMEWORK SOLUTION</p>
25-
</footer>
26-
</body>
27-
</html>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<title>My form exercise</title>
8+
<meta name="description" content="T-shirt order form where customers choose their size and colour." />
9+
<meta name="viewport" content="width=device-width, initial-scale=1" />
10+
<style>
11+
body {
12+
font-family: Arial, sans-serif;
13+
background-color: white;
14+
margin: 0;
15+
padding: 40px;
16+
17+
}
18+
19+
.form-group {
20+
margin-bottom: 20px;
21+
}
22+
23+
h1 {
24+
text-align: center;
25+
margin-bottom: 25px;
26+
}
27+
28+
.container {
29+
max-width: 500px;
30+
margin: auto;
31+
background: #ffffff;
32+
padding: 30px;
33+
border-radius: 10px;
34+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
35+
}
36+
37+
label {
38+
display: block;
39+
margin-bottom: 8px;
40+
font-weight: bold;
41+
}
42+
43+
input,
44+
select,
45+
button {
46+
width: 100%;
47+
padding: 10px;
48+
font-size: 16px;
49+
border: 1px solid #cccccc;
50+
border-radius: 5px;
51+
box-sizing: border-box;
52+
}
53+
54+
button {
55+
background-color: #000000;
56+
color: white;
57+
border: none;
58+
cursor: pointer;
59+
}
60+
61+
button:hover {
62+
opacity: 0.9;
63+
}
64+
</style>
65+
</head>
66+
67+
<body>
68+
<header>
69+
<h1>Product Pick</h1>
70+
</header>
71+
<main class="container">
72+
<form>
73+
74+
<div class="form-group">
75+
<label for="name">Name</label>
76+
<input type="text" name="name" id="name" required minlength="2" pattern=".*\S.*\S.*"
77+
placeholder="Enter your full name">
78+
</div>
79+
80+
<div class="form-group">
81+
<label for="email">Email</label>
82+
<input type="email" name="email" id="email" required placeholder="Enter your email">
83+
</div>
84+
<div class="form-group">
85+
<label for="colour">T-Shirt Colour</label>
86+
<select id="colour" name="colour" required>
87+
<option value="">Select a colour</option>
88+
<option value="black">Black</option>
89+
<option value="white">White</option>
90+
<option value="red">Red</option>
91+
</select>
92+
</div>
93+
<div class="form-group">
94+
<label for="size">T-Shirt Size</label>
95+
<select id="size" name="size" required>
96+
<option value="">Select a size</option>
97+
<option value="xs">XS</option>
98+
<option value="s">S</option>
99+
<option value="m">M</option>
100+
<option value="l">L</option>
101+
<option value="xl">XL</option>
102+
<option value="xxl">XXL</option>
103+
</select>
104+
</div>
105+
106+
<button type="submit">Place Order</button>
107+
</form>
108+
</main>
109+
<footer>
110+
<!-- change to your name-->
111+
<p>By Liyema Mfengwana</p>
112+
</footer>
113+
</body>
114+
115+
</html>

0 commit comments

Comments
 (0)