Skip to content

Commit 639a844

Browse files
LiyemaMfengwanaLiyemaMfengwana
committed
I separated the logic and styling by putting CSS in a separate stylesheet file instead of keeping everything in one HTML file.
1 parent c92c358 commit 639a844

2 files changed

Lines changed: 91 additions & 90 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 38 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,42 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
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="T-shirt order form where customers choose their size and colour." />
8-
<meta name="viewport" content="width=device-width, initial-scale=1" />
9-
<style>
10-
body {
11-
font-family: Arial, sans-serif;
12-
background-color: white;
13-
margin: 0;
14-
padding: 40px;
15-
16-
}
173

18-
.form-group {
19-
margin-bottom: 20px;
20-
}
21-
22-
h1 {
23-
text-align: center;
24-
margin-bottom: 25px;
25-
}
26-
27-
.container {
28-
max-width: 500px;
29-
margin: auto;
30-
background: #ffffff;
31-
padding: 30px;
32-
border-radius: 10px;
33-
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
34-
}
35-
36-
label {
37-
display: block;
38-
margin-bottom: 8px;
39-
font-weight: bold;
40-
}
41-
42-
input,
43-
select,
44-
button {
45-
width: 100%;
46-
padding: 10px;
47-
font-size: 16px;
48-
border: 1px solid #cccccc;
49-
border-radius: 5px;
50-
box-sizing: border-box;
51-
}
52-
53-
button {
54-
background-color: #000000;
55-
color: white;
56-
border: none;
57-
cursor: pointer;
58-
}
59-
60-
button:hover {
61-
opacity: 0.9;
62-
}
63-
64-
65-
</style>
66-
</head>
67-
<body>
68-
<header>
69-
<h1>Product Pick</h1>
70-
</header>
71-
<main class="container">
72-
<form>
73-
74-
<div class="form-group">
75-
<label for="name">Name</label>
76-
<input type="text" name="name" id="name" required minlength="2" pattern=".*\S.*\S.*" placeholder="Enter your full name">
77-
</div>
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<title>T-Shirt Order Form</title>
8+
<meta name="description" content="T-shirt order form where customers choose their size and colour." />
9+
<meta name="viewport" content="width=device-width, initial-scale=1" />
10+
<link rel="stylesheet" href="/Form-Controls/style.css">
11+
</head>
12+
13+
<body>
14+
<header>
15+
<h1>Product Pick</h1>
16+
</header>
17+
<main class="container">
18+
<form>
19+
20+
<div class="form-group">
21+
<label for="name">Name</label>
22+
<input type="text" name="name" id="name" required minlength="2" pattern=".*\S.*\S.*"
23+
placeholder="Enter your full name">
24+
</div>
7825

79-
<div class="form-group">
80-
<label for="email">Email</label>
81-
<input type="email" name="email" id="email" required placeholder="Enter your email">
82-
</div>
83-
<div class="form-group">
84-
<label for="colour">T-Shirt Colour</label>
85-
<select id="colour" name="colour" required>
26+
<div class="form-group">
27+
<label for="email">Email</label>
28+
<input type="email" name="email" id="email" required placeholder="Enter your email">
29+
</div>
30+
<div class="form-group">
31+
<label for="colour">T-Shirt Colour</label>
32+
<select id="colour" name="colour" required>
8633
<option value="">Select a colour</option>
8734
<option value="black">Black</option>
8835
<option value="white">White</option>
8936
<option value="red">Red</option>
9037
</select>
91-
</div>
92-
<div class="form-group">
38+
</div>
39+
<div class="form-group">
9340
<label for="size">T-Shirt Size</label>
9441
<select id="size" name="size" required>
9542
<option value="">Select a size</option>
@@ -103,10 +50,11 @@ <h1>Product Pick</h1>
10350
</div>
10451

10552
<button type="submit">Place Order</button>
106-
</form>
107-
</main>
108-
<footer>
109-
<p>By Liyema Mfengwana</p>
110-
</footer>
111-
</body>
112-
</html>
53+
</form>
54+
</main>
55+
<footer>
56+
<p>By Liyema Mfengwana</p>
57+
</footer>
58+
</body>
59+
60+
</html>

‎Form-Controls/style.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background-color: white;
4+
margin: 0;
5+
padding: 40px;
6+
7+
}
8+
9+
.form-group {
10+
margin-bottom: 20px;
11+
}
12+
13+
h1 {
14+
text-align: center;
15+
margin-bottom: 25px;
16+
}
17+
18+
.container {
19+
max-width: 500px;
20+
margin: auto;
21+
background: #ffffff;
22+
padding: 30px;
23+
border-radius: 10px;
24+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
25+
}
26+
27+
label {
28+
display: block;
29+
margin-bottom: 8px;
30+
font-weight: bold;
31+
}
32+
33+
input,
34+
select,
35+
button {
36+
width: 100%;
37+
padding: 10px;
38+
font-size: 16px;
39+
border: 1px solid #cccccc;
40+
border-radius: 5px;
41+
box-sizing: border-box;
42+
}
43+
44+
button {
45+
background-color: #000000;
46+
color: white;
47+
border: none;
48+
cursor: pointer;
49+
}
50+
51+
button:hover {
52+
opacity: 0.9;
53+
}

0 commit comments

Comments
 (0)