Skip to content

Commit ea53a65

Browse files
author
danisoloo
committed
Revamp index.html to enhance content and structure, including detailed sections on README files and wireframes.
1 parent 72fe02b commit ea53a65

File tree

1 file changed

+86
-38
lines changed

1 file changed

+86
-38
lines changed

‎index.html‎

Lines changed: 86 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,94 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Coursework</title>
7-
<style>
8-
:root {
9-
--paper: oklch(7 0 0);
10-
--ink: color-mix(in oklab, var(--color) 5%, black);
11-
--font: 100%/1.5 system-ui;
12-
--space: clamp(6px, 6px + 2vw, 15px);
13-
--line: 1px solid;
14-
}
15-
body {
16-
background: var(--paper);
17-
color: var(--ink);
18-
font: var(--font);
19-
max-width: 1280px;
20-
margin: 0 auto;
21-
}
22-
</style>
4+
<meta charset="utf-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<title>T-shirt Order Form</title>
7+
<meta name="description" content="Accessible T-shirt order form" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1" />
239
</head>
2410
<body>
25-
<header><h1>🧐 CYF Coursework Disposable Branch Previews</h1></header>
11+
<header>
12+
<h1>Product Pick</h1>
13+
<p>Please fill in the form below to order your t-shirt.</p>
14+
</header>
15+
2616
<main>
27-
<ol>
28-
<li>
29-
<h2><a href="/Wireframe">Project 1: Wireframe</a></h2>
30-
<p>
31-
Mentors:
32-
<a href="Wireframe/readme.md">open the assignment in a tab</a>
33-
</p>
34-
</li>
35-
<li>
36-
<h2><a href="/Form-Controls">Project 2: Form Controls</a></h2>
37-
<p>
38-
Mentors:
39-
<a href="Form-Controls/readme.md">open the assignment in a tab</a>
40-
</p>
41-
</li>
42-
</ol>
17+
<form aria-labelledby="order-form">
18+
<h2 id="order-form">T-shirt Order Form</h2>
19+
20+
<!-- REQUIREMENT 1: Customer name -->
21+
<div>
22+
<label for="name">Full Name:</label>
23+
<input
24+
type="text"
25+
id="name"
26+
name="name"
27+
minlength="2"
28+
autocomplete="name"
29+
required
30+
pattern="^(?!\s*$).+"
31+
title="Name must be at least 2 characters and not just spaces."
32+
style="min-height:48px; min-width:200px;"
33+
/>
34+
</div>
35+
36+
<!-- REQUIREMENT 2: Customer email -->
37+
<div>
38+
<label for="email">Email Address:</label>
39+
<input
40+
type="email"
41+
id="email"
42+
name="email"
43+
autocomplete="email"
44+
required
45+
style="min-height:48px; min-width:200px;"
46+
/>
47+
</div>
48+
49+
<!-- REQUIREMENT 3: Colour -->
50+
<fieldset>
51+
<legend>Choose your t-shirt colour:</legend>
52+
<div>
53+
<input type="radio" id="red" name="colour" value="red" required style="min-height:24px; min-width:24px;" />
54+
<label for="red">Red</label>
55+
</div>
56+
<div>
57+
<input type="radio" id="blue" name="colour" value="blue" style="min-height:24px; min-width:24px;" />
58+
<label for="blue">Blue</label>
59+
</div>
60+
<div>
61+
<input type="radio" id="black" name="colour" value="black" style="min-height:24px; min-width:24px;" />
62+
<label for="black">Black</label>
63+
</div>
64+
</fieldset>
65+
66+
<!-- REQUIREMENT 4: Size -->
67+
<fieldset>
68+
<legend>Choose your t-shirt size:</legend>
69+
<label for="size" class="visually-hidden">T-shirt size</label>
70+
<select id="size" name="size" required style="min-height:48px; min-width:200px;">
71+
<option value="" disabled selected>Select a size</option>
72+
<option value="XS">XS</option>
73+
<option value="S">S</option>
74+
<option value="M">M</option>
75+
<option value="L">L</option>
76+
<option value="XL">XL</option>
77+
<option value="XXL">XXL</option>
78+
</select>
79+
</fieldset>
80+
81+
<!-- Submit button -->
82+
<div>
83+
<button type="submit" aria-label="Submit your t-shirt order" style="min-height:48px; min-width:150px;">
84+
Place Order
85+
</button>
86+
</div>
87+
</form>
4388
</main>
44-
<footer><a href="HOW_TO_REVIEW.md">HOW TO REVIEW MD</a></footer>
89+
90+
<footer>
91+
<p>By Daniel Solomon</p>
92+
</footer>
4593
</body>
46-
</html>
94+
</html>

0 commit comments

Comments
 (0)