Skip to content
This repository was archived by the owner on Apr 18, 2025. It is now read-only.

Commit e35036b

Browse files
kayali436kayali436
committed
added form
1 parent fe2c2f5 commit e35036b

2 files changed

Lines changed: 119 additions & 17 deletions

File tree

‎Form-Controls/index.html‎

Lines changed: 60 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,72 @@
1818
<h1>Active Mens T-shirt</h1>
1919
</header>
2020

21+
<p>ORDER NOW</p>
2122

2223
<main>
2324
<form>
24-
25+
<div>
26+
<label for="first-name"><span class="required"></span> First Name</label>
27+
<input type="text" id="first-name" name="first-name" placeholder="First Name" required minlength="2"/>
28+
</div>
29+
30+
<div>
31+
<label for="last-name"><span class="required"></span> Last Name</label>
32+
<input type="text" id="last-name" name="last-name" placeholder="Last Name" required minlength="2"/>
33+
</div>
34+
35+
<div>
36+
<label for="email"><span class="required"></span> Email Address</label>
37+
<input type="email" name="email" id="email" placeholder="Email"/>
38+
</div>
39+
40+
<div>
41+
<label for="color">Color</label>
42+
43+
<select name="color" id="color">
44+
<option value="cream">Red</option>
45+
<option value="black">Black</option>
46+
<option value="blue">Blue</option>
47+
<option value="cream">White</option>
48+
<option value="black">Yellow</option>
49+
<option value="blue">Brown</option>
50+
</select>
51+
</div>
52+
53+
<div>
54+
<label for="size">Size</label>
55+
56+
<select for="size" id="size">
57+
<option value="xsmall">x-Small</option>
58+
<option value="small">Small</option>
59+
<option value="medium">Medium</option>
60+
<option value="large">Large</option>
61+
<option value="x-large">X-Large</option>
62+
</select>
63+
</div>
64+
65+
<div>
66+
<label for="quantity"> Quantity</label>
67+
<input type="number" id="quantity" name="quantity" min="1" max="4" value="1" required/>
68+
</div>
69+
70+
<div>
71+
<label for="date"><span class="required"></span> Delivery date</label>
72+
<input type="date" name="date" id="date" required min="23-08-2023"/>
73+
</div>
74+
75+
<div>
76+
<input type="submit" id="submit" name="submit"/>
77+
</div>
2578
</form>
26-
</main>
2779

28-
29-
<!-- <img
80+
<img
3081
src="images/md-salman.jpg"
31-
class="clothing-image"
32-
alt="t-shirt design"
33-
/> -->
82+
class="t-shirt"
83+
alt="t-shirt designs"
84+
/>
85+
</main>
86+
3487

3588

3689
<!-- FOOTER SECTION -->

‎Form-Controls/styles.css‎

Lines changed: 59 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,35 +9,84 @@
99
body {
1010
background-image: url(images/keagan-henman-unsplash.jpg);
1111
background-size: cover;
12-
background-position: 0rem 62rem;
12+
1313
}
1414

15-
16-
1715
/* HEADER SECTION */
1816

1917
h1 {
2018
display: flex;
2119
align-items: center;
2220
flex-direction: column;
2321
margin: 5rem;
24-
color: rgb(247, 244, 244);
25-
font-size: 3em;
22+
color: rgb(179, 243, 161);
23+
font-size: 4em;
2624
text-shadow: 10px 15px 5px #17151e;
2725
}
2826

27+
p {
28+
display: flex;
29+
flex-direction: column;
30+
color: rgb(179, 243, 161);
31+
font-size: 2em;
32+
margin: 1em 7em 2em;
33+
}
34+
2935
/* FORM SECTION */
3036

37+
main {
38+
display: grid;
39+
grid-template-columns: repeat(2, 50%);
40+
align-items: center;
41+
width: 86%;
42+
margin: 0 auto;
43+
}
44+
45+
46+
form {
47+
display: grid;
48+
grid-template-columns: repeat(2, 40%);
49+
column-gap: 2rem;
50+
row-gap: 1.4rem;
51+
}
52+
53+
label {
54+
font-size: 1.4rem;
55+
padding-left: 0.4rem;
56+
}
57+
58+
input, select {
59+
width: 100%;
60+
height: 2rem;
61+
margin-top: 0.4rem;
62+
border-radius: 50px;
63+
padding: 0.4rem 0 0.4rem 0.6rem;
64+
border: 2px solid #93f899;
65+
color: rgb(55, 55, 55);
66+
}
67+
68+
.t-shirt {
69+
width: 400px;
70+
height: 400px;
71+
border: 2px solid rgb(143 159 136);
72+
border-radius: 10px;
73+
}
74+
75+
#submit {
76+
font-size: 1rem;
77+
color: #242624;
78+
background-color: rgb(107, 236, 245);
79+
margin: 2em;
80+
}
81+
82+
3183
/* FOOTER SECTION */
3284

3385
h2 {
3486
display: flex;
3587
align-items: center;
3688
flex-direction: column;
3789
font-size: 1em;
90+
margin: 5em;
91+
color: #93f899;
3892
}
39-
40-
41-
42-
43-

0 commit comments

Comments
 (0)