Skip to content

Commit be99174

Browse files
B3-BisratB3-Bisrat
committed
add Tshirt-form and style css
1 parent ff7b9d0 commit be99174

2 files changed

Lines changed: 85 additions & 1 deletion

File tree

‎Form-Controls/index.html‎

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,58 @@
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="stylesheet" href="style.css" />
910
</head>
1011
<body>
1112
<header>
1213
<h1>Product Pick</h1>
1314
</header>
1415
<main>
1516
<form>
17+
<div>
18+
<label for="name">Name:</label>
19+
<input type="text" id="name" name="name" required minlength="2">
20+
</div>
21+
<div>
22+
<label for="email">Email:</label>
23+
<input type="email" id="email" name="email" required>
24+
</div>
25+
<div>
26+
<label for="color"></label>Choose a color:</label>
27+
<select name="color" id="color">
28+
<option value="white">White</option>
29+
<option value="black">Black</option>
30+
<option value="blue">Burgundy</option>
31+
</select>
32+
</div>
33+
<div>
34+
<p>Choose a size:</p>
35+
<label>
36+
<INPUT type="radio" id="xs" name="size" value="XS" required>
37+
XS
38+
</label>
39+
<LABel>
40+
<INPUT type="radio" id="s" name="size" value="S">
41+
S
42+
</LABel>
43+
<label>
44+
<INPUT type="radio" id="m" name="size" value="M">
45+
M
46+
</label>
47+
<label>
48+
<INPUT type="radio" id="l" name="size" value="L">
49+
L
50+
</label>
51+
<label>
52+
<INPUT type="radio" id="xl" name="size" value="XL">
53+
XL
54+
</label>
55+
<label>
56+
<INPUT type="radio" id="xxl" name="size" value="XXL">
57+
XXL
58+
</label>
59+
</div>
60+
<button type="submit">Order T-shirt</button>
1661
<!-- write your html here-->
1762
<!--
1863
try writing out the requirements first as comments
@@ -21,7 +66,7 @@ <h1>Product Pick</h1>
2166
</main>
2267
<footer>
2368
<!-- change to your name-->
24-
<p>By HOMEWORK SOLUTION</p>
69+
<p>BISRAT TESFAY</p>
2570
</footer>
2671
</body>
2772
</html>

‎Form-Controls/style.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background-color: #dfd0d0;
4+
margin: 0;
5+
padding: 40px;
6+
}
7+
h1 {
8+
text-align: center;
9+
color: #180404;
10+
margin-bottom: 30px;
11+
}
12+
form {
13+
background-color: #fff;
14+
padding: 20px;
15+
border-radius: 10px;
16+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
17+
max-width: 600px;
18+
margin: auto;
19+
}
20+
div {
21+
margin-bottom: 20px;
22+
}
23+
label {
24+
display: block;
25+
margin-bottom: 5px;
26+
font-weight: bold;
27+
}
28+
input,
29+
select,
30+
button {
31+
background-color: #f9f9f9;
32+
color: #180404;
33+
border: 1px solid #ccc;
34+
border-radius: 4px;
35+
box-sizing: border-box;
36+
}
37+
button :hover {
38+
background-color: #180404;
39+
}

0 commit comments

Comments
 (0)