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

Commit 5056a7e

Browse files
AferePreciousOnomeAferePreciousOnome
committed
finished product
1 parent 8b063e4 commit 5056a7e

File tree

3 files changed

+255
-64
lines changed

3 files changed

+255
-64
lines changed

‎Form-Controls/image/Оверсайз.jpeg

98.3 KB
Loading

‎Form-Controls/index.html

Lines changed: 70 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -13,81 +13,88 @@
1313
<h1>Product Pick</h1>
1414
</header>
1515
<main>
16+
<h2>Please Fill In The Information.</h2>
17+
<div class="container">
1618
<form>
17-
<div class="form-container">
18-
<div class="firstname">
19-
<label for="firstname">First Name</label>
20-
<input type="text" name="firstname" id="firstname" required />
21-
</div>
22-
<div class="lastname">
23-
<label for="lastname">Last Name</label>
24-
<input type="text" name="lastname" id="lastname" required />
25-
</div>
26-
<div class="email">
27-
<label for="email">Email Address</label>
28-
<input type="email" name="email" id="email" required />
29-
</div>
30-
<div class="colour-tshirt">
31-
<h3>Choose T-shirt Colour</h3>
32-
<div>
33-
<label for="black">Black</label>
34-
<input type="radio" name="color-of-Tshirt" id="black" />
35-
</div>
36-
<div>
37-
<label for="Pink">Pink</label>
38-
<input type="radio" name="color-of-Tshirt" id="pink" />
19+
<section class="form-section">
20+
<div class="firstname">
21+
<label for="firstname">First Name</label>
22+
<input type="text" name="firstname" id="firstname" required />
3923
</div>
40-
<div>
41-
<label for="white">White</label>
42-
<input type="radio" name="color-of-Tshirt" id="white" />
24+
<div class="lastname">
25+
<label for="lastname">Last Name</label>
26+
<input type="text" name="lastname" id="lastname" required />
4327
</div>
44-
</div>
45-
<div class="size-tshirt">
46-
<h3>Size of T-shirt</h3>
47-
<div>
48-
<label for="xs">XS</label>
49-
<input type="radio" name="size" id="xs" />
50-
</div>
51-
<div>
52-
<label for="s">S</label>
53-
<input type="radio" name="size" id="s" />
28+
<div class="email">
29+
<label for="email">Email Address</label>
30+
<input type="email" name="email" id="email" required />
5431
</div>
55-
<div>
56-
<label for="m">M</label>
57-
<input type="radio" name="size" id="m" />
32+
<div class="colour-tshirt">
33+
<h3>Choose T-shirt Colour</h3>
34+
<div>
35+
<label for="black">Black</label>
36+
<input type="radio" name="color-of-Tshirt" id="black" />
37+
</div>
38+
<div>
39+
<label for="Pink">Pink</label>
40+
<input type="radio" name="color-of-Tshirt" id="pink" />
41+
</div>
42+
<div>
43+
<label for="white">White</label>
44+
<input type="radio" name="color-of-Tshirt" id="white" />
45+
</div>
5846
</div>
59-
<div>
60-
<label for="l">L</label>
61-
<input type="radio" name="size" id="l" />
47+
<div class="size-tshirt">
48+
<h3>Size of T-shirt</h3>
49+
<div>
50+
<label for="xs">XS</label>
51+
<input type="radio" name="size" id="xs" />
52+
</div>
53+
<div>
54+
<label for="s">S</label>
55+
<input type="radio" name="size" id="s" />
56+
</div>
57+
<div>
58+
<label for="m">M</label>
59+
<input type="radio" name="size" id="m" />
60+
</div>
61+
<div>
62+
<label for="l">L</label>
63+
<input type="radio" name="size" id="l" />
64+
</div>
65+
<div>
66+
<label for="xl">XL</label>
67+
<input type="radio" name="size" id="xl" />
68+
</div>
69+
<div>
70+
<label for="xxl">XXL</label>
71+
<input type="radio" name="size" id="xxl" />
72+
</div>
6273
</div>
63-
<div>
64-
<label for="xl">XL</label>
65-
<input type="radio" name="size" id="xl" />
74+
<div class="delivery-date">
75+
<h3>Select a Delivery Date</h3>
76+
<label for="date">Date</label>
77+
<input
78+
type="date"
79+
name="date"
80+
id="date"
81+
min="2024-09-26"
82+
max="2024-10-25"
83+
required
84+
/>
6685
</div>
67-
<div>
68-
<label for="xxl">XXL</label>
69-
<input type="radio" name="size" id="xxl" />
70-
</div>
71-
</div>
72-
<div class="delivery-date">
73-
<h3>Select a Delivery Date</h3>
74-
<label for="date">Date</label>
75-
<input
76-
type="date"
77-
name="date"
78-
id="date"
79-
min="2024-09-26"
80-
max="2024-10-25"
81-
required
82-
/>
86+
<div>
87+
<button class="button" type="submit">Submit</button>
8388
</div>
84-
<button class="button" type="submit">Submit</button>
85-
</div>
89+
8690
</form>
91+
</section>
92+
<div class="image-section"></div>
93+
</div>
8794
</main>
8895
<footer>
8996
<!-- change to your name-->
90-
<h2>By Afere Precious</h2>
97+
<p>By Afere Precious<p>
9198
</footer>
9299
</body>
93100
</html>

‎Form-Controls/styles.css

Lines changed: 185 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,193 @@
1+
/* Reset and global styles */
12
* {
23
padding: 0;
34
margin: 0;
45
box-sizing: border-box;
56
}
7+
68
body {
79
font-family: garamond, serif;
8-
margin: 10px 20px;
10+
margin: 0;
11+
padding: 0;
12+
color: #1b1212;
13+
background-color: #f5c9d6;
14+
}
15+
16+
h1 {
17+
margin-top: 0.4rem;
18+
text-align: center;
19+
margin-bottom: 1rem;
20+
font-size: 2.5rem;
21+
font-weight: 500;
22+
}
23+
h2 {
24+
margin-top: 0.7rem;
25+
margin-bottom: 0.8rem;
26+
margin-left: 3rem;
27+
font-weight: 500;
28+
font-size: 2rem;
29+
}
30+
31+
.container {
32+
display: grid;
33+
grid-template-columns: 1fr 1fr;
34+
margin-left: 3rem;
35+
gap: 2rem;
36+
padding-left: 2rem;
37+
padding-bottom: 2rem;
38+
align-items: start;
39+
}
40+
41+
.form-section {
42+
display: flex;
43+
flex-direction: column;
44+
border: 1px solid transparent;
45+
height: 100vh;
46+
font-size: 1.1rem;
47+
}
48+
49+
.form-section form {
50+
display: grid;
51+
grid-template-columns: 1fr;
52+
row-gap: 1.5rem;
53+
}
54+
55+
form h3 {
56+
margin-bottom: 0.5rem;
57+
}
58+
.colour-tshirt h3 {
59+
margin-top: 1rem;
60+
font-size: 1.5rem;
61+
font-weight: 400;
62+
}
63+
.colour-tshirt input {
64+
accent-color: #b76e79;
65+
}
66+
67+
.size-tshirt h3 {
68+
margin-top: 1rem;
69+
font-size: 1.5rem;
70+
font-weight: 400;
71+
}
72+
.size-tshirt input {
73+
accent-color: grey;
74+
}
75+
.delivery-date h3 {
76+
margin-top: 1rem;
77+
font-size: 1.5rem;
78+
font-weight: 400;
79+
}
80+
.input [type="date"] {
81+
margin-top: 2rem;
82+
}
83+
form label {
84+
margin-bottom: 0.4rem;
85+
}
86+
.firstname {
87+
width: 70%;
88+
}
89+
.lastname {
90+
width: 70%;
91+
}
92+
.email {
93+
width: 70%;
94+
}
95+
.delivery-date {
96+
width: 50%;
97+
}
98+
.button {
99+
width: 30%;
100+
margin-top: 1rem;
101+
}
102+
input[type="text"],
103+
input[type="email"],
104+
input[type="date"],
105+
button {
106+
width: 100%;
107+
padding: 0.5rem;
108+
font-size: 1rem;
109+
border-radius: 8px;
110+
}
111+
112+
button {
113+
cursor: pointer;
114+
background-color: #b76e79;
115+
color: white;
116+
border: none;
117+
}
118+
119+
.image-section {
120+
background-image: url(image/Оверсайз.jpeg);
121+
background-position: left center;
122+
background-repeat: no-repeat;
123+
background-size: cover;
124+
background-blend-mode: multiply;
125+
height: 100vh;
126+
max-width: 100%;
127+
width: 100%;
128+
z-index: -1;
129+
border-radius: 2px;
130+
transform: scale(1.11);
131+
opacity: 0.9;
132+
}
133+
134+
footer {
135+
text-align: center;
136+
margin-top: 2rem;
137+
margin-bottom: 1rem;
138+
font-weight: 400;
139+
font-size: 1.2rem;
140+
color: #808080;
141+
border-top: 1px solid #ccc;
142+
}
143+
144+
@media screen and (max-width: 768px) {
145+
.image-section {
146+
display: none;
147+
}
148+
149+
body {
150+
background-image: url(image/Оверсайз.jpeg);
151+
background-size: cover;
152+
background-position: center;
153+
background-repeat: no-repeat;
154+
height: 100vh;
155+
color: #1b1212;
156+
}
157+
label {
158+
font-size: 1.3rem;
159+
}
160+
.firstname {
161+
width: 100%;
162+
}
163+
.lastname {
164+
width: 100%;
165+
}
166+
.email {
167+
width: 100%;
168+
}
169+
.delivery-date {
170+
width: 80%;
171+
}
172+
.button {
173+
width: 38%;
174+
}
175+
h3 {
176+
font-size: 1.8rem;
177+
}
178+
footer {
179+
font-size: 1.3rem;
180+
margin: 0;
181+
padding: 0;
182+
bottom: 5rem;
183+
text-align: center;
184+
}
185+
}
186+
@media screen and (max-width: 1000px) {
187+
label {
188+
font-size: 1.3rem;
189+
}
190+
.image-section {
191+
width: 100%;
192+
}
9193
}

0 commit comments

Comments
 (0)