Skip to content

Commit 6f5d72c

Browse files
author
russom
committed
Style seprated from html and contained in its own file.
1 parent 40c3185 commit 6f5d72c

2 files changed

Lines changed: 49 additions & 47 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 11 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,33 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<title>My form exercise</title>
77
<meta name="description" content="" />
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
9-
<style>
10-
body {
11-
font-family: Arial, sans-serif;
12-
margin: 0;
13-
padding: 0;
14-
}
15-
header {
16-
color: black;
17-
padding: 1rem;
18-
text-align: center;
19-
margin-bottom: 20px;
20-
}
21-
main {
22-
padding: 1rem;
23-
}
24-
form {
25-
max-width: 400px;
26-
margin: 0 auto;
27-
}
28-
div {
29-
margin-bottom: 1rem;
30-
}
31-
label {
32-
display: block;
33-
margin-bottom: 0.5rem;
34-
}
35-
input,
36-
select {
37-
width: 100%;
38-
padding: 0.5rem;
39-
box-sizing: border-box;
40-
}
41-
button {
42-
padding: 0.5rem 1rem;
43-
background-color: #333;
44-
color: white;
45-
border: none;
46-
cursor: pointer;
47-
}
48-
49-
</style>
509
</head>
5110
<body>
5211
<header>
5312
<h1>Product Pick</h1>
5413
</header>
5514
<main>
5615
<form>
57-
5816
<div>
59-
6017
<label for="name"> Name:</label>
61-
<input type="text" id="name" name="name" required pattern="\S{2,}" title="Please enter at least two non-space characters.">
18+
<input
19+
type="text"
20+
id="name"
21+
name="name"
22+
required
23+
pattern="\S{2,}"
24+
title="Please enter at least two non-space characters."
25+
/>
6226
</div>
6327

6428
<div>
6529
<label for="email"> Email:</label>
66-
<input type="email" id="email" name="email" required>
30+
<input type="email" id="email" name="email" required />
6731
</div>
6832
<div>
6933
<label for="color"> Colour:</label>
@@ -91,7 +55,7 @@ <h1>Product Pick</h1>
9155
</div>
9256
<!--
9357
this will also help you fill in your PR message later-->
94-
<!--
58+
<!--
9559
What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.
9660
What is the customer's email? I must make sure the email is valid. Email addresses follow a consistent pattern.
9761
What colour should this T-shirt be? I must provide 3 options. How will I ensure they do not choose other colours?

‎Form-Controls/style.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
margin: 0;
4+
padding: 0;
5+
}
6+
header {
7+
color: black;
8+
padding: 1rem;
9+
text-align: center;
10+
margin-bottom: 20px;
11+
}
12+
main {
13+
padding: 1rem;
14+
}
15+
form {
16+
max-width: 400px;
17+
margin: 0 auto;
18+
}
19+
div {
20+
margin-bottom: 1rem;
21+
}
22+
label {
23+
display: block;
24+
margin-bottom: 0.5rem;
25+
}
26+
input,
27+
select {
28+
width: 100%;
29+
padding: 0.5rem;
30+
box-sizing: border-box;
31+
}
32+
button {
33+
padding: 0.5rem 1rem;
34+
background-color: #333;
35+
color: white;
36+
border: none;
37+
cursor: pointer;
38+
}

0 commit comments

Comments
 (0)