Skip to content

Commit 2f0ee3b

Browse files
yonasdesbelegebreyonasdesbelegebre
committed
color performance optimization
1 parent c70d30f commit 2f0ee3b

3 files changed

Lines changed: 33 additions & 32 deletions

File tree

‎Form-Controls/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,6 @@ They ensure your code is reliable, maintainable, and presents a polished, credib
6262

6363
## Resources
6464
- [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms)
65-
- [Lighthouse](https://developers.google.com/web/tools/lighthouse)
65+
- [Lighthouse](https://developers.google.comcom/web/tools/lighthouse)
6666
- [Lighthouse Guide](https://programming.codeyourfuture.io/guides/testing/lighthouse)
6767
- [Format Code and Make Logical Commits in VS Code](../practical_guide.md)

‎Form-Controls/index.html‎

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<link rel="stylesheet" href="./style.css" >
4+
<link rel="stylesheet" href="style.css" >
55
<meta charset="utf-8" />
66
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
77
<title>My form exercise</title>
@@ -26,43 +26,45 @@ <h1>Product Pick</h1>
2626
<label for="customername">Customer name: </label>
2727
<input type="text" id="customername" name="customername" required
2828
pattern="^[A-Za-z]{2,}$"
29-
placeholder="Customer name"
30-
/>
31-
<br />
29+
placeholder="Customer name"/>
30+
<br/>
31+
3232
<label for="customeremail">Customer email: </label>
3333
<input type="email" id="customeremail" name="customeremail" required
3434
pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
3535
placeholder="Customer email" />
3636
<br />
37-
<label for="t-shirtColor">T-shirt color:</label>
38-
<div class="control">
3937

40-
<label class="t-color">
41-
<input type="radio" name="color" value="Black" required/>
42-
Black
43-
</label>
44-
<label class="t-color">
45-
<input type="radio" name="color" value="Red" required/>
46-
Red
47-
</label>
48-
<label class="t-color" disabled>
49-
<input type="radio" name="color" color="Blue" required/>
50-
Blue
51-
</label>
52-
</div>
38+
<label for="t-shirtColor">T-shirt color:</label>
39+
<div class="control">
40+
<label class="t-color">
41+
<input type="radio" name="color" value="Black" required/>
42+
Black
43+
</label>
44+
<label class="t-color">
45+
<input type="radio" name="color" value="Red" required/>
46+
Red
47+
</label>
48+
<label class="t-color" disabled>
49+
<input type="radio" name="color" color="Blue" required/>
50+
Blue
51+
</label>
52+
</div>
53+
5354
<label for="sizes">T-shirt size:</label>
54-
<select name="size" id="sizes" required>
55-
<option value="xs">XS</option>
56-
<option value="s">S</option>
57-
<option value="m">M</option>
58-
<option value="l">L</option>
59-
<option value="XL">XL</option>
60-
<option vallue="XXL">XXL</optio>
61-
</select>
55+
<select name="size" id="sizes" required>
56+
<option value="xs">XS</option>
57+
<option value="s">S</option>
58+
<option value="m">M</option>
59+
<option value="l">L</option>
60+
<option value="XL">XL</option>
61+
<option vallue="XXL">XXL</optio>
62+
</select>
63+
6264
<br />
6365
<button type="submit" id="submit">Submit</button>
6466
</form>
65-
</main>
67+
</main>
6668
<footer>
6769
<!-- change to your name-->
6870
<p>By Yonas Gebre</p>

‎Form-Controls/style.css‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,10 @@ header h1 {
1313
margin-bottom: 15px;
1414
}
1515

16-
/* Form Container */
1716
form {
1817
background: #ffffff;
1918
padding: 30px;
20-
border-radius: 12px;
19+
border-radius: 8px;
2120
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
2221
width: 100%;
2322
max-width: 400px;
@@ -76,5 +75,5 @@ input:focus {
7675
footer {
7776
margin-top: 20px;
7877
font-size: 0.8rem;
79-
color: #95a5a6;
78+
color:black;
8079
}

0 commit comments

Comments
 (0)