Skip to content

Commit cf2c233

Browse files
GiontrGiontr
committed
Fixing styling for accessibility
1 parent a7b8a25 commit cf2c233

2 files changed

Lines changed: 68 additions & 6 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 57 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,76 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<title>My form exercise</title>
6+
<title>T-shirt sales</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>
12-
<h1>Product Pick</h1>
13+
<h1>Welcome to T-shirt Sales</h1>
1314
</header>
1415
<main>
1516
<form>
1617
<!-- 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-->
18+
<h1>Verify your order </h1>
19+
<!--Full Name -->
20+
<div>
21+
<label for="name">Full Name:</label>
22+
<input type="text" id="name" name="name" required>
23+
</div>
24+
25+
<!--Email -->
26+
<div>
27+
<label for="email">Email:</label>
28+
<input type="email" id="email" name="email" required>
29+
</div>
30+
31+
<!--T-shirt color -->
32+
<div>
33+
<label for="color">T-shirt color:</label>
34+
<select id="color" name="color" required>
35+
<option value="" disabled selected>Select a color</option>
36+
<option value="red">Red</option>
37+
<option value="blue">Blue</option>
38+
<option value="green">Green</option>
39+
</select>
40+
</div>
41+
42+
<!--T-shirt size -->
43+
<div id="sizeBox">
44+
<label for="size">T-shirt size:</label>
45+
46+
<div>
47+
<label for="very-small">XS</label>
48+
<input type="radio" name="size" value="very-small" required>
49+
</div>
50+
<div>
51+
<label for="small">S</label>
52+
<input type="radio" name="size" value="small" required>
53+
</div>
54+
<div>
55+
<label for="medium">M</label>
56+
<input type="radio" name="size" value="medium" required>
57+
</div>
58+
<div>
59+
<label for="large">L</label>
60+
<input type="radio" name="size" value="large" required>
61+
</div>
62+
<div>
63+
<label for="very-large">XL</label>
64+
<input type="radio" name="size" value="very-large" required>
65+
</div>
66+
<!--Submit button -->
67+
<div>
68+
<button type="submit">Submit</button>
69+
</div>
70+
</div>
2071
</form>
2172
</main>
2273
<footer>
2374
<!-- change to your name-->
24-
<p>By HOMEWORK SOLUTION</p>
75+
<p>By Giorgi Natriashvili</p>
2576
</footer>
2677
</body>
2778
</html>

‎Form-Controls/style.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
input[type="radio"] {
2+
margin: 0 5px;
3+
width: 18px;
4+
height: 18px;
5+
}
6+
#sizeBox {
7+
display: flex;
8+
flex-direction: column;
9+
margin-bottom: 20px;
10+
border: 1px solid #a7a7a7;
11+
}

0 commit comments

Comments
 (0)