Skip to content

Commit 4ec919d

Browse files
BrianY315BrianY315
committed
Add T-shirt order form and external stylesheet
1 parent ccf9091 commit 4ec919d

2 files changed

Lines changed: 202 additions & 9 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 63 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,79 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<title>My form exercise</title>
7-
<meta name="description" content="" />
6+
<title>T-shirt Order Form</title>
7+
<meta name="description" content="Choose your T-shirt colour and size." />
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<link rel="stylesheet" href="styles.css" />
910
</head>
1011
<body>
1112
<header>
1213
<h1>Product Pick</h1>
1314
</header>
15+
1416
<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-->
17+
<form aria-label="T-shirt order form">
18+
<div class="form-group">
19+
<label for="name">Name</label>
20+
<input
21+
id="name"
22+
name="name"
23+
type="text"
24+
pattern=".*\S.*\S.*"
25+
title="Please enter at least two non-space characters."
26+
required
27+
/>
28+
</div>
29+
30+
<div class="form-group">
31+
<label for="email">Email</label>
32+
<input
33+
id="email"
34+
name="email"
35+
type="email"
36+
required
37+
/>
38+
</div>
39+
40+
<fieldset class="form-group">
41+
<legend>Choose a colour</legend>
42+
<div class="radio-group">
43+
<label class="option" for="colour-red">
44+
<input id="colour-red" name="colour" type="radio" value="red" required />
45+
<span>Red</span>
46+
</label>
47+
48+
<label class="option" for="colour-blue">
49+
<input id="colour-blue" name="colour" type="radio" value="blue" />
50+
<span>Blue</span>
51+
</label>
52+
53+
<label class="option" for="colour-black">
54+
<input id="colour-black" name="colour" type="radio" value="black" />
55+
<span>Black</span>
56+
</label>
57+
</div>
58+
</fieldset>
59+
60+
<div class="form-group">
61+
<label for="size">Choose a size</label>
62+
<select id="size" name="size" required>
63+
<option value="" selected disabled>Select a size</option>
64+
<option value="XS">XS</option>
65+
<option value="S">S</option>
66+
<option value="M">M</option>
67+
<option value="L">L</option>
68+
<option value="XL">XL</option>
69+
<option value="XXL">XXL</option>
70+
</select>
71+
</div>
72+
73+
<button type="submit">Order now</button>
2074
</form>
2175
</main>
76+
2277
<footer>
23-
<!-- change to your name-->
24-
<p>By HOMEWORK SOLUTION</p>
78+
<p>By Brian</p>
2579
</footer>
2680
</body>
2781
</html>

‎Form-Controls/styles.css‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
:root {
6+
--bg: #f5f7fb;
7+
--surface: #ffffff;
8+
--border: #d9deea;
9+
--text: #1a2433;
10+
--muted: #475569;
11+
--accent: #2d6cdf;
12+
--accent-soft: #eaf1ff;
13+
--shadow: rgba(15, 23, 42, 0.08);
14+
}
15+
16+
body {
17+
margin: 0;
18+
min-height: 100vh;
19+
font-family: Arial, Helvetica, sans-serif;
20+
background: linear-gradient(180deg, var(--bg), #edf3ff);
21+
color: var(--text);
22+
}
23+
24+
header {
25+
padding: 2rem 1rem 0;
26+
}
27+
28+
h1 {
29+
text-align: center;
30+
margin: 0;
31+
font-size: clamp(2rem, 3vw, 3rem);
32+
}
33+
34+
main {
35+
display: flex;
36+
justify-content: center;
37+
padding: 2rem 1rem 3rem;
38+
}
39+
40+
form {
41+
width: min(100%, 620px);
42+
background: var(--surface);
43+
border: 1px solid var(--border);
44+
border-radius: 16px;
45+
box-shadow: 0 12px 30px var(--shadow);
46+
padding: 2rem;
47+
}
48+
49+
.form-group {
50+
display: flex;
51+
flex-direction: column;
52+
gap: 0.5rem;
53+
margin-bottom: 1.5rem;
54+
}
55+
56+
label {
57+
font-weight: 700;
58+
color: var(--text);
59+
}
60+
61+
input,
62+
select,
63+
button {
64+
font: inherit;
65+
}
66+
67+
input[type='text'],
68+
input[type='email'],
69+
select {
70+
width: 100%;
71+
padding: 0.8rem 0.9rem;
72+
border: 1px solid var(--border);
73+
border-radius: 10px;
74+
background: #fff;
75+
color: var(--text);
76+
transition: border-color 0.2s ease, box-shadow 0.2s ease;
77+
}
78+
79+
input[type='text']:focus,
80+
input[type='email']:focus,
81+
select:focus {
82+
outline: none;
83+
border-color: var(--accent);
84+
box-shadow: 0 0 0 3px var(--accent-soft);
85+
}
86+
87+
.radio-group {
88+
display: grid;
89+
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
90+
gap: 0.75rem;
91+
}
92+
93+
.option {
94+
display: flex;
95+
align-items: center;
96+
gap: 0.5rem;
97+
padding: 0.75rem 0.9rem;
98+
border: 1px solid var(--border);
99+
border-radius: 10px;
100+
background: #fafbff;
101+
}
102+
103+
.option input {
104+
margin: 0;
105+
}
106+
107+
button {
108+
width: 100%;
109+
padding: 0.9rem 1.25rem;
110+
border: none;
111+
border-radius: 10px;
112+
background: var(--accent);
113+
color: #fff;
114+
font-weight: 700;
115+
cursor: pointer;
116+
transition: background 0.2s ease, transform 0.2s ease;
117+
}
118+
119+
button:hover {
120+
background: #1d57bc;
121+
transform: translateY(-1px);
122+
}
123+
124+
button:focus-visible {
125+
outline: 3px solid #a4c2ff;
126+
outline-offset: 2px;
127+
}
128+
129+
footer {
130+
text-align: center;
131+
padding: 1rem;
132+
color: var(--muted);
133+
}
134+
135+
@media (max-width: 480px) {
136+
form {
137+
padding: 1.25rem;
138+
}
139+
}

0 commit comments

Comments
 (0)