Skip to content

Commit 1e9900f

Browse files
EbtesammmEbtesammm
committed
store page
1 parent 2c7b4c6 commit 1e9900f

File tree

3 files changed

+225
-12
lines changed

3 files changed

+225
-12
lines changed

‎css/style.css‎

Lines changed: 74 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,9 +176,82 @@ color: rgba(0, 0, 0, 0.541);
176176

177177

178178
}
179+
/*
180+
181+
.store-container{
182+
display: flex;
183+
justify-content: space-between;
184+
185+
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+
}
179253

180254

181-
182255
@media (max-width:568px){
183256

184257
.section-two-bar,ul{

‎level-2/store.html‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎store.html‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,157 @@
2424
</nav>
2525
</div>
2626
</header>
27+
<hr>
2728

29+
<!-- <div class="store-container">
30+
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>
54+
</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+
106+
107+
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">
131+
</div>
132+
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>
166+
167+
168+
<footer> <h4>Join us</h4>
169+
<br><br>
170+
<div class="media">
171+
<img src="img/twitter-icon.svg">
172+
<img src="img/facebook-icon.svg">
173+
<img src="img/instagram-icon.svg">
174+
</div>
175+
<br><br>
176+
<h4>&copy karma mobility</h4>
177+
178+
</footer>
28179
</body>
29180
</html>

0 commit comments

Comments
 (0)