Skip to content

Commit d4cfd37

Browse files
EbtesammmEbtesammm
committed
update level 1 and 2
1 parent 1e9900f commit d4cfd37

File tree

2 files changed

+148
-202
lines changed

2 files changed

+148
-202
lines changed

‎css/style.css‎

Lines changed: 96 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -176,80 +176,89 @@ color: rgba(0, 0, 0, 0.541);
176176

177177

178178
}
179-
/*
180179

181-
.store-container{
182-
display: flex;
183-
justify-content: space-between;
184180

181+
.store-container {
182+
display: flex;
183+
justify-content: space-between;
184+
align-items: stretch;
185+
padding: 20px;
186+
gap: 20px;
187+
min-height: 100vh;
188+
}
189+
190+
.form-container {
191+
width: 50%;
192+
padding: 20px;
193+
194+
}
195+
196+
h1 {
197+
font-size: 24px;
198+
margin-bottom: 20px;
199+
color: #f4623a;
200+
}
201+
202+
form {
203+
display: flex;
204+
flex-direction: column;
205+
gap: 20px;
206+
}
207+
208+
.color-selection,
209+
.terms-container {
210+
display: flex;
211+
212+
gap: 10px;
213+
}
214+
215+
input[type="text"],
216+
select,
217+
button {
218+
padding: 10px;
219+
margin-top: 5px;
220+
border-radius: 6px;
221+
border: 1px solid #ccc;
222+
width: 100%;
223+
224+
225+
}
226+
227+
.flex-container {
228+
display: flex;
229+
justify-content: space-between;
230+
}
231+
232+
.half-width {
233+
width: 48%;
234+
}
235+
236+
button {
237+
background-color: #f4623a;
238+
color: white;
239+
border: none;
240+
cursor: pointer;
241+
padding: 15px;
242+
font-size: 16px;
243+
margin-top: 20px;
244+
}
245+
246+
button:hover {
247+
background-color: #d04a28;
248+
}
249+
250+
.store-img {
251+
width: 100%;
252+
height: 100%;
253+
object-fit: cover;
254+
}
255+
256+
.aside-img-store {
257+
258+
width: 50%;
259+
justify-content: flex-end;
260+
}
185261

186-
}
187-
188-
.store-img{
189-
width:50vw;
190-
191-
}
192-
193-
.aside-img-store{
194-
display: flex;
195-
}
196-
197-
.form-section{
198-
display: grid;
199-
grid-template-columns: 300px ;
200-
201-
}
202-
203-
.grid-item {
204-
display: flex;
205-
flex-direction: column;
206-
}
207-
208-
*/
209-
210-
211-
212-
213-
.store-container {
214-
display: flex;
215-
justify-content: space-evenly
216-
align-items: flex-start;
217-
}
218-
219-
.store-img {
220-
width: 100%;
221-
max-width: 400px;
222-
object-fit: cover;
223-
}
224-
225-
.aside-img-store {
226-
display: flex;
227-
flex: 1;
228-
justify-content: flex-end;
229-
}
230-
231-
.form-section {
232-
display: grid;
233-
grid-template-columns: repeat(2, 1fr);
234-
grid-template-rows: repeat(1, 1fr);
235-
gap: 20px;
236-
flex: 1;
237-
}
238-
239-
.grid-item {
240-
display: flex;
241-
flex-direction: column;
242-
243-
}
244-
245-
button {
246-
grid-column: span 2;
247-
padding: 10px;
248-
background-color: #f5763c;
249-
color: white;
250-
border: none;
251-
cursor: pointer;
252-
}
253262

254263

255264
@media (max-width:568px){
@@ -288,4 +297,20 @@ button {
288297
display: flex;
289298
flex-direction: column;
290299
}
300+
.flex-container {
301+
display: flex;
302+
flex-direction: column;
303+
}
304+
.store-container {
305+
display: flex;
306+
gap: 20px;
307+
flex-direction: column;
308+
align-items: center;
309+
}
310+
.color-selection, .terms-container {
311+
display: flex;
312+
gap: 10px;
313+
flex-direction: column;
314+
}
315+
291316
}

‎store.html‎

Lines changed: 52 additions & 131 deletions
Original file line numberDiff line numberDiff line change
@@ -26,143 +26,64 @@
2626
</header>
2727
<hr>
2828

29-
<!-- <div class="store-container">
29+
<div class="store-container">
30+
<div class="form-container">
31+
<h1>Order your Karma wifi device today!</h1>
32+
<form action="#">
33+
<div class="flex-container">
34+
<div class="half-width">
35+
<label for="first-name">First name *</label>
36+
<input type="text" id="first-name" required>
37+
</div>
38+
<div class="half-width">
39+
<label for="last-name">Last name *</label>
40+
<input type="text" id="last-name" required>
41+
</div>
42+
</div>
43+
44+
<label for="address">Address *</label>
45+
<input type="text" id="address" required>
46+
47+
<label for="address2">Address 2</label>
48+
<input type="text" id="address2">
49+
50+
<div class="flex-container">
51+
<div class="half-width">
52+
<label for="city">City *</label>
53+
<select id="city" required>
54+
<option value="">Select your city...</option>
55+
</select>
56+
</div>
57+
<div class="half-width">
58+
<label for="postcode">Postcode *</label>
59+
<input type="text" id="postcode" required>
60+
</div>
61+
</div>
62+
<label>Select a colour</label>
63+
64+
<div class="color-selection">
65+
66+
<input type="radio" id="karma-orange" name="color" value="orange" required>
67+
<label for="karma-orange">Karma orange</label>
68+
<input type="radio" id="space-grey" name="color" value="grey">
69+
<label for="space-grey">Space Grey</label>
3070

31-
<div class="form-section">
32-
33-
<section>
34-
35-
<h2>Order your Karma wifi device today!</h2>
36-
<form>
37-
38-
<div class="grid-item">
39-
<label>First name *</label>
40-
<input type="text" required>
41-
</div>
42-
43-
<div class="grid-item">
44-
45-
<label>Last name *</label>
46-
<input type="text" required>
47-
48-
</div>
49-
50-
<div class="grid-item">
51-
52-
<label>Address *</label>
53-
<input type="text" required>
5471
</div>
55-
<div class="grid-item">
56-
<label>Address 2</label>
57-
<input type="text">
58-
59-
</div>
60-
61-
62-
<div class="grid-item">
63-
64-
65-
<label>City *</label>
66-
<select required>
67-
<option>Select your city...</option>
68-
69-
</select>
70-
71-
</div>
72-
73-
<div class="grid-item">
74-
<label>Postcode *</label>
75-
<input type="text" required>
76-
</div>
77-
78-
79-
<div class="grid-item">
80-
81-
<label>Select a colour </label>
82-
<br>
83-
<input type="radio" name="color" value="orange"> Karma orange
84-
<input type="radio" name="color" value="grey"> Space Grey
85-
</div>
86-
87-
<div class="grid-item">
88-
<p>By placing your order, you agree to Karma's Terms and Conditions. </p>
89-
<input type="checkbox" required>
90-
</div>
91-
92-
93-
<button type="submit">Place my order</button>
94-
95-
96-
</section>
97-
98-
</div>
99-
100-
<aside class="aside-img-store">
101-
<img src="level-2/store-image_by-andrew-neel-unsplash.jpg" class="store-img">
102-
</aside>
103-
104-
</div> -->
105-
72+
<div class="terms-container">
10673

74+
<label for="terms">By placing your order you agree to Karma's <a href="#">Terms and Conditions</a>. *</label>
75+
<input type="checkbox" id="terms" required>
76+
</div>
77+
10778

108-
<div class="store-container">
109-
<div class="form-section">
110-
<section>
111-
<h2>Order your Karma wifi device today!</h2>
112-
<form>
113-
<div class="grid-item">
114-
<label>First name *</label>
115-
<input type="text" required>
116-
</div>
117-
118-
<div class="grid-item">
119-
<label>Last name *</label>
120-
<input type="text" required>
121-
</div>
122-
123-
<div class="grid-item">
124-
<label>Address *</label>
125-
<input type="text" required>
126-
</div>
127-
128-
<div class="grid-item">
129-
<label>Address 2</label>
130-
<input type="text">
79+
<button type="submit">Place my order</button>
80+
</form>
13181
</div>
13282

133-
<div class="grid-item">
134-
<label>City *</label>
135-
<select required>
136-
<option>Select your city...</option>
137-
</select>
138-
</div>
139-
140-
<div class="grid-item">
141-
<label>Postcode *</label>
142-
<input type="text" required>
143-
</div>
144-
145-
<div class="grid-item">
146-
<label>Select a colour</label>
147-
<br>
148-
<input type="radio" name="color" value="orange"> Karma orange
149-
<input type="radio" name="color" value="grey"> Space Grey
150-
</div>
151-
152-
<div class="grid-item">
153-
<p>By placing your order, you agree to Karma's Terms and Conditions.</p>
154-
<input type="checkbox" required>
155-
</div>
156-
157-
<button type="submit">Place my order</button>
158-
</form>
159-
</section>
160-
</div>
161-
162-
<aside class="aside-img-store">
163-
<img src="level-2/store-image_by-andrew-neel-unsplash.jpg" class="store-img">
164-
</aside>
165-
</div>
83+
<aside class="aside-img-store">
84+
<img src="level-2/store-image_by-andrew-neel-unsplash.jpg" class="store-img" alt="Store Image">
85+
</aside>
86+
</div>
16687

16788

16889
<footer> <h4>Join us</h4>

0 commit comments

Comments
 (0)