Skip to content

Commit 7a1a2e7

Browse files
TemceoTemceo
committed
update html and css files
1 parent 4a51a0f commit 7a1a2e7

2 files changed

Lines changed: 78 additions & 98 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 32 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,39 @@
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>My form exercise</title>
7-
<meta name="description" content="" >
8-
<meta name="viewport" content="width=device-width, initial-scale=1" >
9-
<link rel="preconnect" href="https://fonts.googleapis.com">
10-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11-
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
12-
<link rel="stylesheet" href="style.css">
13-
</head>
14-
<body>
15-
<header>
16-
<h1>Product Pick</h1>
17-
</header>
18-
<main>
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="preconnect" href="https://fonts.googleapis.com">
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
8+
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
9+
<link rel="stylesheet" href="style.css">
10+
<title>Document</title>
11+
</head>
12+
<body>
13+
<header>
14+
<h1>Product Pick</h1>
15+
</header>
16+
<main>
1917
<form>
2018
<div class="form-group">
21-
<!-- Add input for name - required and validate -->
19+
<!-- input for name - required and validate -->
2220
<label for="name">Name</label>
23-
<input type="text" id="name" placeholder="Joe Bloggs" required>
21+
<input type="text"
22+
id="name"
23+
placeholder="Joe Bloggs"
24+
required pattern="^(?=(?:.*\S){2,}).*$"
25+
title="Please enter at least 2 non-space characters">
2426
</div>
2527
<div class="form-group">
26-
<!-- Add input for email - required and validate -->
28+
<!-- input for email - required and validate -->
2729
<label for="email">Email</label>
28-
<input type="email" id="email" placeholder="joe@me.com" required>
30+
<input type="email" id="email" placeholder="joe@me.com" required="">
2931
</div>
3032
<div class="form-group">
3133
<!-- Drop down list of 3 colours (green, blue, red) - required -->
3234
<label for="colour">Choose colour</label>
33-
<select name="colour" id="colour" required>
34-
<option value="" disabled selected>Select a colour</option>
35+
<select name="colour" id="colour" required="">
36+
<option value="" disabled="" selected="">Select a colour</option>
3537
<option value="red">Red</option>
3638
<option value="green">Green</option>
3739
<option value="blue">Blue</option>
@@ -41,8 +43,8 @@ <h1>Product Pick</h1>
4143
<div class="form-group">
4244
<!-- Drop down list of 6 sizes (XS, S, M, L, XL, XXL) - required -->
4345
<label for="size">Choose size</label>
44-
<select name="size" id="size" required>
45-
<option value="" disabled selected>Select a size</option>
46+
<select name="size" id="size" required="">
47+
<option value="" disabled="" selected="">Select a size</option>
4648
<option value="xs">XS</option>
4749
<option value="s">S</option>
4850
<option value="m">M</option>
@@ -55,8 +57,12 @@ <h1>Product Pick</h1>
5557
</form>
5658
</main>
5759
<footer>
58-
<!-- change to your name-->
5960
<p>By Martin Mwaka</p>
6061
</footer>
61-
</body>
62+
</body>
6263
</html>
64+
65+
66+
67+
68+

‎Form-Controls/style.css‎

Lines changed: 46 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,70 @@
11
* {
2-
box-sizing: border-box;
3-
margin: 0;
2+
box-sizing: border-box;
3+
margin: 0;
44
}
55

66
:root {
7-
/* font colours */
8-
--clr-font-base: #DCE1DE;
9-
/* background colours */
10-
--clr-bg-base: #216869;
11-
--clr-bg-accent1: #3B8C88; /* 20% lighter */
12-
--clr-bg-accent2: #55AFAF; /* 40% lighter */
13-
--clr-bg-accent3: #70D2D2; /* 60% lighter */
14-
--clr-bg-dark1: #1A5354; /* 40% darker */
7+
--clr-font-base: #DCE1DE;
8+
--clr-bg-base: #216869;
9+
--clr-bg-accent1: #3B8C88;
10+
--clr-bg-accent2: #55AFAF;
11+
--clr-bg-accent3: #70D2D2;
12+
--clr-bg-dark1: #1A5354;
1513
}
1614

17-
input,
18-
button,
19-
select {
20-
font: inherit;
21-
}
22-
23-
label {
24-
text-transform: uppercase;
25-
color: var(--clr-font-base);
26-
font-weight: 500;
27-
}
28-
29-
input, select {
30-
width: 100%;
31-
height: 2rem;
32-
background-color: var(--clr-bg-accent2);
15+
body {
16+
font-family: "Poppins", sans-serif;
17+
font-style: normal;
18+
background-color: #570000;
19+
color: #fff;
3320
}
3421

35-
form button {
36-
text-transform: uppercase;
37-
background-color: var(--clr-bg-dark1);
38-
color: var(--clr-font-base);
39-
font-weight: 500;
40-
margin-top: 1rem;
41-
height: 2.5rem;
42-
border: none;
43-
border-radius: 5px;
44-
grid-column: 1 / -1;
45-
justify-self: center;
46-
width: 100%;
47-
48-
@media(width > 550px) {
49-
width: 50%;
50-
}
22+
main, header, footer {
23+
margin: auto;
24+
width: 90%;
25+
max-width: 750px;
5126
}
5227

53-
form button:hover {
54-
background-color: var(--clr-bg-accent1);
28+
form {
29+
display: grid;
30+
min-width: 350px;
31+
gap: 1rem;
32+
background-color: #280000;
33+
padding: 2rem;
34+
border-radius: 10px;
5535
}
5636

5737
form {
58-
display: grid;
59-
min-width: 350px;
60-
gap: 1rem;
61-
background-color: var(--clr-bg-base);
62-
padding: 2rem;
63-
border-radius: 10px;
64-
65-
@media (width > 720px) {
66-
grid-template-columns: 1fr 1fr;
67-
68-
#submit-btn, header, footer {
69-
align-items: center;
38+
@media (width > 720px) {
39+
grid-template-columns: 1fr 1fr;
7040
}
71-
72-
}
7341
}
7442

75-
.form-group {
76-
display: grid;
77-
gap: 0.5em;
43+
form button {
44+
text-transform: uppercase;
45+
background-color: #570000;
46+
color: var(--clr-font-base);
47+
font-weight: 500;
48+
margin-top: 1rem;
49+
height: 2.5rem;
50+
border: none;
51+
border-radius: 5px;
52+
grid-column: 1 / -1;
53+
justify-self: center;
54+
width: 100%;
7855
}
7956

80-
body {
81-
font-family: "Poppins", sans-serif;
82-
font-style: normal;
83-
background-color: var(--clr-bg-accent3);
57+
input, button, select {
58+
font: inherit;
8459
}
8560

86-
main, header, footer {
87-
margin: auto;
88-
width: 90%;
89-
max-width: 750px;
61+
input, select {
62+
width: 100%;
63+
height: 2rem;
64+
/* background-color: #570000; */
9065
}
9166

9267
header h1, footer p {
93-
text-align: center;
94-
margin: 1.5rem;
68+
text-align: center;
69+
margin: 1.5rem;
9570
}
96-

0 commit comments

Comments
 (0)