Skip to content

Commit e05cec1

Browse files
AbdennourHachemiAbdennourHachemi
committed
adding CSS file and updating the index.html file
1 parent 30d9e25 commit e05cec1

2 files changed

Lines changed: 145 additions & 2 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 88 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<title>My form exercise</title>
77
<meta name="description" content="" />
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
<link rel="stylesheet" href="styles.css">
910
</head>
1011
<body>
1112
<header>
@@ -19,7 +20,92 @@ <h1>Product Pick</h1>
1920
<label for="lname">Please Enter your Last name:</label><br>
2021
<input type="txt" id="lname" name="lname"> <br>
2122
<label for="email">Please Enter your Email:</label><br>
22-
<input type="txt" id="email" name="email"> <br>
23+
<input type="email" id="email" name="email" /><br>
24+
<label for="color">Please pick a color:</label> <br>
25+
26+
27+
<div class="colorSelection">
28+
29+
<div class="colorOption">
30+
<label for="blueOption">Blue</label>
31+
<div class="square" id="blueOption">
32+
<input type="radio" name="color" value="blue">
33+
</div>
34+
</div>
35+
36+
<div class="colorOption">
37+
<label for="greenOption">Green</label>
38+
<div class="square" id="greenOption">
39+
<input type="radio" name="color" value="green">
40+
</div>
41+
</div>
42+
43+
<div class="colorOption">
44+
<label for="redOption">Red</label>
45+
<div class="square" id="redOption">
46+
<input type="radio" name="color" value="red">
47+
</div>
48+
</div>
49+
50+
</div>
51+
<div>
52+
<label for="color">Please select the t-shirt size:</label> <br>
53+
<div class="colorSelection">
54+
55+
<div class="sizeOption">
56+
<label for="sizOption">XS</label>
57+
<div >
58+
<input type="radio" value="xs">
59+
</div>
60+
</div>
61+
62+
<div class="sizeOption">
63+
<label for="sizOption">S</label>
64+
<div >
65+
<input type="radio" value="s">
66+
</div>
67+
</div>
68+
<div class="sizeOption">
69+
<label for="sizOption">M</label>
70+
<div >
71+
<input type="radio" value="m">
72+
</div>
73+
</div>
74+
<div class="sizeOption">
75+
<label for="sizOption">L</label>
76+
<div >
77+
<input type="radio" value="l">
78+
</div>
79+
</div>
80+
<div class="sizeOption">
81+
<label for="sizOption">XL</label>
82+
<div >
83+
<input type="radio" value="xl">
84+
</div>
85+
</div>
86+
<div class="sizeOption">
87+
<label for="sizOption">XXL</label>
88+
<div >
89+
<input type="radio" value="xxl">
90+
</div>
91+
</div>
92+
93+
94+
</div>
95+
96+
97+
<!-- <div class="colorSelection">
98+
<div><label for="Blue">Blue</label>
99+
<div class="square" id="blueOption"><input type="radio" value="blue" ></dev>
100+
<div><label for="green">Green</label> </div>
101+
<div class="square" id="greenOption"><input type="radio" name="aligned" value="white"> </div>
102+
</div>
103+
<div><label fo="red">Red</label>
104+
<div class="square" id="redOption"><input type="radio" name="aligned" value="right"></div>
105+
</div>
106+
107+
108+
</div> -->
23109
<!--
24110
25111
1. What is the customer's name? I must collect this data and ensure it contains at least two non-space characters.
@@ -32,7 +118,7 @@ <h1>Product Pick</h1>
32118
</main>
33119
<footer>
34120
<!-- change to your name-->
35-
<p>By HOMEWORK SOLUTION</p>
121+
<!-- <p>By Abdennour Hachemi</p> -->
36122
</footer>
37123
</body>
38124
</html>

‎Form-Controls/styles.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/* .square {
2+
height: 25px;
3+
width: 25px;
4+
5+
6+
7+
}
8+
9+
10+
#blueOption{
11+
background-color: #180fcb;
12+
}
13+
#greenOption{
14+
background-color: green;
15+
}
16+
#redOption{
17+
background-color: red;
18+
}
19+
.colorSelection{
20+
border: solid 1px
21+
22+
}
23+
.colorSelection {
24+
display: flex;
25+
flex-direction: row;
26+
justify-content: center;
27+
gap :20px;
28+
29+
} */
30+
.colorSelection {
31+
display: flex;
32+
justify-content:baseline;
33+
gap: 20px;
34+
}
35+
36+
.colorOption {
37+
display: flex;
38+
flex-direction: column;
39+
align-items:center;
40+
}
41+
42+
.square {
43+
height: 25px;
44+
width: 25px;
45+
}
46+
47+
#blueOption {
48+
background-color: #180fcb;
49+
}
50+
51+
#greenOption {
52+
background-color: green;
53+
}
54+
55+
#redOption {
56+
background-color: red;
57+
}

0 commit comments

Comments
 (0)