Skip to content

Commit c06be2b

Browse files
gideondefargideondefar
committed
link CSS with semantic HTM and alter few edge cases of the email pattern
1 parent 0a8d6bf commit c06be2b

3 files changed

Lines changed: 177 additions & 35 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,23 @@
1111

1212
<body>
1313
<header>
14+
<link rel="stylesheet" href="styles.css">
1415
<h1>Product Pick</h1>
1516
</header>
1617
<main>
1718
<form>
1819
<!-- Customer Name Input -->
19-
<p>
20+
<p>
2021
<label for="customerName">Name:</label>
21-
<input type="text" id="customerName" name="customerName" required minlength="2"
22-
pattern=".*\S.*\S.*" placeholder="Enter your full name">
22+
<input type="text" id="customerName" name="customerName" required minlength="2" pattern=".*\S.*\S.*"
23+
placeholder="Enter your full name">
2324
</p>
2425

2526
<!-- Customer Email Input -->
2627
<p>
2728
<label for="emailAddress">Email:</label>
2829
<input type="email" id="emailAddress" name="emailAddress" required placeholder="you@gmail.com"
29-
pattern="^[^@\s]+@[^@\s]+\.[^@\s]+$"
30+
pattern="^[a-zA-Z0-9]([a-zA-Z0-9._%+\-]*[a-zA-Z0-9])?@[a-zA-Z0-9]([a-zA-Z0-9\-]*[a-zA-Z0-9])?(\.[a-zA-Z0-9]([a-zA-Z0-9\-]*[a-zA-Z0-9])?)+$"
3031
title="Please enter a valid email address (e.g., user@gmail.com). Domain parts (like 'gmail') must start and end with a letter or number, can contain hyphens, and must be separated by dots. Ends with a top-level domain (e.g., .com).">
3132
</p>
3233

@@ -39,13 +40,13 @@ <h1>Product Pick</h1>
3940
Red
4041
</label>
4142
</p>
42-
<p>
43+
<p>
4344
<label>
4445
<input type="radio" name="shirt-colour" value="blue" required>
4546
Blue
4647
</label>
4748
</p>
48-
<p>
49+
<p>
4950
<label>
5051
<input type="radio" name="shirt-colour" value="green" required>
5152
Green

‎Form-Controls/styles.css‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
/* ====== Form Layout ====== */
2+
body {
3+
font-family: system-ui, sans-serif;
4+
font-size: 16px;
5+
line-height: 1.5;
6+
background: #f5f5f4;
7+
color: #1a1a18;
8+
margin: 0;
9+
padding: 0;
10+
}
11+
12+
header {
13+
text-align: center;
14+
padding: 2rem 1rem 0;
15+
}
16+
17+
header h1 {
18+
font-size: 22px;
19+
font-weight: 500;
20+
margin: 0;
21+
}
22+
23+
main {
24+
max-width: 480px;
25+
margin: 2rem auto;
26+
background: #ffffff;
27+
border: 1px solid #e0dfd8;
28+
border-radius: 12px;
29+
padding: 2rem;
30+
}
31+
32+
/* ====== Labels ====== */
33+
label {
34+
display: block;
35+
font-size: 14px;
36+
color: #5f5e5a;
37+
margin-bottom: 4px;
38+
}
39+
40+
/* ====== Text & Email Inputs ====== */
41+
input[type="text"],
42+
input[type="email"] {
43+
width: 100%;
44+
box-sizing: border-box;
45+
padding: 8px 12px;
46+
font-size: 15px;
47+
border: 1px solid #b4b2a9;
48+
border-radius: 8px;
49+
background: #f5f5f4;
50+
color: #1a1a18;
51+
}
52+
53+
input[type="text"]:focus,
54+
input[type="email"]:focus {
55+
outline: none;
56+
box-shadow: 0 0 0 2px #85b7eb;
57+
border-color: #378add;
58+
}
59+
60+
/* ====== Select Dropdown ====== */
61+
select {
62+
width: 100%;
63+
box-sizing: border-box;
64+
padding: 8px 12px;
65+
font-size: 15px;
66+
border: 1px solid #b4b2a9;
67+
border-radius: 8px;
68+
background: #f5f5f4;
69+
color: #1a1a18;
70+
}
71+
72+
select:focus {
73+
outline: none;
74+
box-shadow: 0 0 0 2px #85b7eb;
75+
border-color: #378add;
76+
}
77+
78+
/* ====== Fieldset & Legend ====== */
79+
fieldset {
80+
border: 1px solid #e0dfd8;
81+
border-radius: 8px;
82+
padding: 1rem 1.25rem;
83+
margin: 0 0 1rem;
84+
}
85+
86+
legend {
87+
font-size: 14px;
88+
color: #5f5e5a;
89+
padding: 0 6px;
90+
}
91+
92+
/* ====== Radio Buttons ====== */
93+
fieldset label {
94+
display: flex;
95+
align-items: center;
96+
gap: 10px;
97+
font-size: 15px;
98+
color: #1a1a18;
99+
cursor: pointer;
100+
}
101+
102+
input[type="radio"] {
103+
accent-color: #378add;
104+
width: 16px;
105+
height: 16px;
106+
flex-shrink: 0;
107+
}
108+
109+
/* ====== Paragraph spacing ====== */
110+
form p {
111+
margin: 0 0 1rem;
112+
}
113+
114+
/* ====== Submit Button ====== */
115+
button[type="submit"] {
116+
width: 100%;
117+
padding: 10px;
118+
font-size: 15px;
119+
font-weight: 500;
120+
background: #378add;
121+
color: #ffffff;
122+
border: none;
123+
border-radius: 8px;
124+
cursor: pointer;
125+
margin-top: 0.5rem;
126+
}
127+
128+
button[type="submit"]:hover {
129+
background: #185fa5;
130+
}
131+
132+
/* ====== Footer ====== */
133+
footer {
134+
text-align: center;
135+
font-size: 13px;
136+
color: #5f5e5a;
137+
padding: 1rem;
138+
}

‎Wireframe/index.html‎

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,36 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Wireframe</title>
7-
<link rel="stylesheet" href="style.css" />
8-
</head>
9-
<body>
10-
<header>
11-
<h1>Wireframe</h1>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Wireframe</title>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
11+
<body>
12+
<header>
13+
<h1>Wireframe</h1>
14+
<p>
15+
This is the default, provided code and no changes have been made yet.
16+
</p>
17+
</header>
18+
<main>
19+
<article>
20+
<img src="placeholder.svg" alt="" />
21+
<h2>Title</h2>
1222
<p>
13-
This is the default, provided code and no changes have been made yet.
23+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
24+
voluptates. Quisquam, voluptates.
1425
</p>
15-
</header>
16-
<main>
17-
<article>
18-
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
20-
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
23-
</p>
24-
<a href="">Read more</a>
25-
</article>
26-
</main>
27-
<footer>
28-
<p>
29-
This is the default, provided code and no changes have been made yet.
30-
</p>
31-
</footer>
32-
</body>
33-
</html>
26+
<a href="">Read more</a>
27+
</article>
28+
</main>
29+
<footer>
30+
<p>
31+
This is the default, provided code and no changes have been made yet.
32+
</p>
33+
</footer>
34+
</body>
35+
36+
</html>

0 commit comments

Comments
 (0)