-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
306 lines (275 loc) · 20.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;1,100;1,300;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Shop - Main Page</title>
</head>
<body>
<header class="header-row">
<div class="header-wrapper container">
<div class="header-info-left">
<a href="#" class="header-logo"><img src="img/logo.png" alt="logo"></a>
<a href="#" class="header-search"><img src="img/search.svg" alt="search"></a>
</div>
<div class="header-info-rigth">
<!--<a href="#" class="header-info-right-img"><img src="img/burger.svg" alt=""></a>-->
<label for="burgerMenu" class="header-info-right-img burger">
</label>
<a href="#" class="header-info-right-img user"><img src="img/user.svg" alt=""></a>
<a href="#" class="header-info-right-img cart"><img src="img/cart.svg" alt=""><span>5</span></a>
</div>
</div>
<input id="burgerMenu" type="checkbox" name="burger_menu">
<div class="header__menu">
<nav class="header__menu-wrapper">
<label for="burgerMenu" class="close">
<img src="img/close.svg" alt="close">
</label>
<h2>MENU</h2>
<ul class="header__menu-main">
<li class="header__menu-cat">
<h3>MAN</h3>
<ul>
<li class="header__menu-item"><a href="#">Accessories</a></li>
<li class="header__menu-item"><a href="#">Bags</a></li>
<li class="header__menu-item"><a href="#">Denim</a></li>
<li class="header__menu-item"><a href="#">T-Shirts</a></li>
</ul>
</li>
<li class="header__menu-cat">
<h3>WOMAN</h3>
<ul>
<li class="header__menu-item"><a href="#">Accessories</a></li>
<li class="header__menu-item"><a href="#">Bags</a></li>
<li class="header__menu-item"><a href="#">Denim</a></li>
<li class="header__menu-item"><a href="#">T-Shirts</a></li>
<li class="header__menu-item"><a href="#">Shirts</a></li>
</ul>
</li>
<li class="header__menu-cat">
<h3>KIDS</h3>
<ul>
<li class="header__menu-item"><a href="#">Accessories</a></li>
<li class="header__menu-item"><a href="#">Bags</a></li>
<li class="header__menu-item"><a href="#">Denim</a></li>
<li class="header__menu-item"><a href="#">T-Shirts</a></li>
<li class="header__menu-item"><a href="#">Shirts</a></li>
<li class="header__menu-item"><a href="#">Bags</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<main>
<section class="promo-row">
<div class="promo-wrapper container">
<div class="promo-title">
<h1 class="promo-title-h1">
THE BRAND
<span class="promo-subtitle-h1">
OF LUXERIOUS <span class="promo-subtitle-h1-pink">FASHION</span>
</span>
</h1>
</div>
</div>
</section>
<section class="categories-wall-row">
<div class="categories-wall-wrapper container">
<div class="categories-wall-item" style="background-image: url(img/cat-wall-1.png);">
<div class="categories-wall-item-shadow">
<p class="categories-wall-item-subtitle">30% OFF</p>
<h2 class="categories-wall-item-title">FOR WOMEN</h2>
</div>
</div>
<div class="categories-wall-item" style="background-image: url(img/cat-wall-2.png);">
<div class="categories-wall-item-shadow">
<p class="categories-wall-item-subtitle">HOT DEAL</p>
<h2 class="categories-wall-item-title">FOR MEN</h2>
</div>
</div>
<div class="categories-wall-item" style="background-image: url(img/cat-wall-3.png);">
<div class="categories-wall-item-shadow">
<p class="categories-wall-item-subtitle">NEW ARRIVALS </p>
<h2 class="categories-wall-item-title">FOR KIDS</h2>
</div>
</div>
<div class="categories-wall-item" style="background-image: url(img/cat-wall-4.png);">
<div class="categories-wall-item-shadow">
<p class="categories-wall-item-subtitle">LUXIROUS & TRENDY</p>
<h2 class="categories-wall-item-title">ACCESORIES</h2>
</div>
</div>
</div>
</section>
<section class="fetured-items-row ">
<div class="container">
<header class="fetured-items-title-wrapper">
<h3 class="fetured-items-title">Fetured Items</h3>
<p class="fetured-items-subtitle">Shop for items based on what we featured in this week</p>
</header>
<div class="fetured-items-card-wrapper">
<article class="fetured-items-card-item">
<div class="fetured-items-card-img-wrapper">
<div class="fetured-items-card-img-layer">
<button title="Add to Cart" class="fetured-items-card-btn">Add to Cart</button>
</div>
<img src="img/card-item-1.png" alt="ELLERY X M'O CAPSULE" class="fetured-items-card-img">
</div>
<div class="fetured-items-card-title-wrapper">
<h4 class="fetured-items-card-title">ELLERY X M'O CAPSULE</h4>
<p class="fetured-items-card-description">Known for her sculptural takes on traditional
tailoring, Australian arbiter of cool Kym Ellery teams up with Moda Operandi.</p>
<p class="fetured-items-card-price">$52.00</p>
</div>
</article>
<article class="fetured-items-card-item">
<div class="fetured-items-card-img-wrapper">
<div class="fetured-items-card-img-layer">
<button title="Add to Cart" class="fetured-items-card-btn">Add to Cart</button>
</div>
<img src="img/card-item-2.png" alt="ELLERY X M'O CAPSULE" class="fetured-items-card-img">
</div>
<div class="fetured-items-card-title-wrapper"> <h4 class="fetured-items-card-title">ELLERY X M'O CAPSULE</h4>
<p class="fetured-items-card-description">Known for her sculptural takes on traditional
tailoring, Australian arbiter of cool Kym Ellery teams up with Moda Operandi.</p>
<p class="fetured-items-card-price">$52.00</p></div>
</article>
<article class="fetured-items-card-item">
<div class="fetured-items-card-img-wrapper">
<div class="fetured-items-card-img-layer">
<button title="Add to Cart" class="fetured-items-card-btn">Add to Cart</button>
</div>
<img src="img/card-item-3.png" alt="ELLERY X M'O CAPSULE" class="fetured-items-card-img">
</div>
<div class="fetured-items-card-title-wrapper"><h4 class="fetured-items-card-title">ELLERY X M'O CAPSULE</h4>
<p class="fetured-items-card-description">Known for her sculptural takes on traditional
tailoring, Australian arbiter of cool Kym Ellery teams up with Moda Operandi.</p>
<p class="fetured-items-card-price">$52.00</p></div>
</article>
<article class="fetured-items-card-item">
<div class="fetured-items-card-img-wrapper">
<div class="fetured-items-card-img-layer">
<button title="Add to Cart" class="fetured-items-card-btn">Add to Cart</button>
</div>
<img src="img/card-item-4.png" alt="ELLERY X M'O CAPSULE" class="fetured-items-card-img">
</div>
<div class="fetured-items-card-title-wrapper">
<h4 class="fetured-items-card-title">ELLERY X M'O CAPSULE</h4>
<p class="fetured-items-card-description">Known for her sculptural takes on traditional
tailoring, Australian arbiter of cool Kym Ellery teams up with Moda Operandi.</p>
<p class="fetured-items-card-price">$52.00</p>
</div>
</article>
<article class="fetured-items-card-item">
<div class="fetured-items-card-img-wrapper">
<div class="fetured-items-card-img-layer">
<button title="Add to Cart" class="fetured-items-card-btn">Add to Cart</button>
</div>
<img src="img/card-item-5.png" alt="ELLERY X M'O CAPSULE" class="fetured-items-card-img">
</div>
<div class="fetured-items-card-title-wrapper">
<h4 class="fetured-items-card-title">ELLERY X M'O CAPSULE</h4>
<p class="fetured-items-card-description">Known for her sculptural takes on traditional
tailoring, Australian arbiter of cool Kym Ellery teams up with Moda Operandi.</p>
<p class="fetured-items-card-price">$52.00</p>
</div>
</article>
<article class="fetured-items-card-item">
<div class="fetured-items-card-img-wrapper">
<div class="fetured-items-card-img-layer">
<button title="Add to Cart" class="fetured-items-card-btn">Add to Cart</button>
</div>
<img src="img/card-item-6.png" alt="ELLERY X M'O CAPSULE" class="fetured-items-card-img">
</div>
<div class="fetured-items-card-title-wrapper">
<h4 class="fetured-items-card-title">ELLERY X M'O CAPSULE</h4>
<p class="fetured-items-card-description">Known for her sculptural takes on traditional
tailoring, Australian arbiter of cool Kym Ellery teams up with Moda Operandi.</p>
<p class="fetured-items-card-price">$52.00</p>
</div>
</article>
</div>
<footer class="fetured-items-footer">
<a href="#" class="fetured-items-footer-btn">Browse All Product</a>
</footer>
</div>
</section>
<section class="benefits-row">
<div class="benefits-wrapper container">
<div class="benefits-item">
<h3 class="benefits-title">Free Delivery</h3>
<p class="benefits-desc">Worldwide delivery on all. Authorit tively morph next-generation innov tion with extensive models.</p>
</div>
<div class="benefits-item">
<h3 class="benefits-title">Sales & discounts</h3>
<p class="benefits-desc">Worldwide delivery on all. Authorit tively morph next-generation innov tion with extensive models.</p>
</div>
<div class="benefits-item">
<h3 class="benefits-title">Quality assurance</h3>
<p class="benefits-desc">Worldwide delivery on all. Authorit tively morph next-generation innov tion with extensive models.</p>
</div>
</div>
</section>
<section class="subscribe-row">
<div class="subscribe-opacity">
<div class="subscribe-wrapper container">
<div class="subscribe-left">
<figure class="subscribe-woman">
<img class="subscribe-woman-photo" src="img/photo-woman.png"
alt="Photo">
<figcaption class="subscribe-woman-text">“Vestibulum quis porttitor dui! Quisque viverra nunc mi, <i>a pulvinar purus condimentum“</i></figcaption>
</figure>
</div>
<div class="subscribe-right">
<h2 class="subcribe-title">SUBSCRIBE
<span class="subscribe-desc">FOR OUR NEWLETTER AND PROMOTION</span>
</h2>
<form class="subcribe-form" action="#">
<input class="subcribe-form-email" required placeholder="Enter Your Email" type="email">
<input class="subcribe-form-submit" type="submit" value="Subscribe">
</form>
</div>
</div>
</div>
</section>
</main>
<footer class="footer-row">
<div class="footer-wrapper container">
<div class="footer-left">
<p class="footer-copyright">© 2021 Brand All Rights Reserved.</p>
</div>
<div class="footer-right">
<ul class="footer-socials">
<li class="footer-socials-item"><a href="#" class="footer-socials-item-link" title="facebook">
<svg class="footer-socials-item-img" width="9" height="15" viewBox="0 0 9 15" xmlns="http://www.w3.org/2000/svg">
<path d="M8.08836 8.28L8.50686 5.61602H5.89022V3.88729C5.89022 3.15847 6.25574 2.44806 7.42765 2.44806H8.61722V0.179975C8.61722 0.179975 7.53772 0 6.50561 0C4.35073 0 2.9422 1.27593 2.9422 3.5857V5.61602H0.546875V8.28H2.9422V14.72H5.89022V8.28H8.08836Z"/>
</svg>
</a></li>
<li class="footer-socials-item"><a href="#" class="footer-socials-item-link" title="instagram">
<svg class="footer-socials-item-img" width="16" height="15" viewBox="0 0 16 15" xmlns="http://www.w3.org/2000/svg">
<path d="M8.13897 3.68159C6.02383 3.68159 4.31774 5.38491 4.31774 7.49663C4.31774 9.60835 6.02383 11.3117 8.13897 11.3117C10.2541 11.3117 11.9602 9.60835 11.9602 7.49663C11.9602 5.38491 10.2541 3.68159 8.13897 3.68159ZM8.13897 9.9769C6.77211 9.9769 5.65467 8.8646 5.65467 7.49663C5.65467 6.12866 6.76878 5.01636 8.13897 5.01636C9.50915 5.01636 10.6233 6.12866 10.6233 7.49663C10.6233 8.8646 9.50583 9.9769 8.13897 9.9769ZM13.0078 3.52554C13.0078 4.02026 12.6087 4.41538 12.1165 4.41538C11.621 4.41538 11.2252 4.01694 11.2252 3.52554C11.2252 3.03413 11.6243 2.63569 12.1165 2.63569C12.6087 2.63569 13.0078 3.03413 13.0078 3.52554ZM15.5386 4.42866C15.4821 3.23667 15.2094 2.18081 14.3347 1.31089C13.4634 0.440967 12.4058 0.168701 11.2119 0.108936C9.9814 0.039209 6.29321 0.039209 5.0627 0.108936C3.8721 0.165381 2.81453 0.437646 1.93987 1.30757C1.06522 2.17749 0.795836 3.23335 0.735973 4.42534C0.666134 5.65386 0.666134 9.33608 0.735973 10.5646C0.79251 11.7566 1.06522 12.8124 1.93987 13.6824C2.81453 14.5523 3.86878 14.8246 5.0627 14.8843C6.29321 14.9541 9.9814 14.9541 11.2119 14.8843C12.4058 14.8279 13.4634 14.5556 14.3347 13.6824C15.2061 12.8124 15.4788 11.7566 15.5386 10.5646C15.6085 9.33608 15.6085 5.65718 15.5386 4.42866ZM13.949 11.8828C13.6895 12.5335 13.1874 13.0349 12.5322 13.2972C11.5511 13.6857 9.22314 13.596 8.13897 13.596C7.05479 13.596 4.72348 13.6824 3.74573 13.2972C3.09389 13.0382 2.59171 12.5369 2.32898 11.8828C1.93987 10.9033 2.02967 8.57905 2.02967 7.49663C2.02967 6.41421 1.9432 4.08667 2.32898 3.1105C2.58838 2.45972 3.09056 1.95835 3.74573 1.69604C4.7268 1.30757 7.05479 1.39722 8.13897 1.39722C9.22314 1.39722 11.5545 1.31089 12.5322 1.69604C13.184 1.95503 13.6862 2.4564 13.949 3.1105C14.3381 4.08999 14.2483 6.41421 14.2483 7.49663C14.2483 8.57905 14.3381 10.9066 13.949 11.8828Z"/>
</svg>
</a></li>
<li class="footer-socials-item"><a href="#" class="footer-socials-item-link" title="pinterest">
<svg class="footer-socials-item-img" width="13" height="16" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg">
<path d="M6.74032 0.203125C3.55564 0.203125 0.408203 2.34063 0.408203 5.8C0.408203 8 1.63738 9.25 2.38233 9.25C2.68963 9.25 2.86655 8.3875 2.86655 8.14375C2.86655 7.85313 2.13091 7.23438 2.13091 6.025C2.13091 3.5125 4.03055 1.73125 6.4889 1.73125C8.60271 1.73125 10.1671 2.94062 10.1671 5.1625C10.1671 6.82187 9.50597 9.93437 7.36422 9.93437C6.59133 9.93437 5.93018 9.37187 5.93018 8.56563C5.93018 7.38438 6.74963 6.24062 6.74963 5.02187C6.74963 2.95312 3.835 3.32812 3.835 5.82812C3.835 6.35313 3.90018 6.93437 4.13298 7.4125C3.70463 9.26875 2.82931 12.0344 2.82931 13.9469C2.82931 14.5375 2.91311 15.1188 2.96899 15.7094C3.07452 15.8281 3.02175 15.8156 3.18316 15.7563C4.74757 13.6 4.69169 13.1781 5.3994 10.3562C5.78119 11.0875 6.76826 11.4812 7.55046 11.4812C10.8469 11.4812 12.3275 8.24688 12.3275 5.33125C12.3275 2.22813 9.66427 0.203125 6.74032 0.203125Z"/>
</svg>
</a></li>
<li class="footer-socials-item">
<a href="#" class="footer-socials-item-link" title="twitter">
<svg class="footer-socials-item-img" width="17" height="14" viewBox="0 0 17 14" xmlns="http://www.w3.org/2000/svg">
<path d="M14.417 3.74052C14.427 3.88264 14.427 4.0248 14.427 4.16692C14.427 8.50192 11.1498 13.4969 5.15986 13.4969C3.31448 13.4969 1.60022 12.9588 0.158203 12.0248C0.420396 12.0552 0.67247 12.0654 0.944752 12.0654C2.46741 12.0654 3.8691 11.5476 4.98843 10.6644C3.5565 10.6339 2.3565 9.68977 1.94305 8.39027C2.14475 8.4207 2.34642 8.44102 2.5582 8.44102C2.85063 8.44102 3.14308 8.40039 3.41533 8.32936C1.92291 8.02477 0.803551 6.70498 0.803551 5.11108V5.07048C1.23715 5.31414 1.74139 5.46642 2.2758 5.4867C1.39849 4.89786 0.823727 3.8928 0.823727 2.75573C0.823727 2.14661 0.985041 1.58823 1.26741 1.10092C2.87077 3.09077 5.28086 4.39023 7.98334 4.53239C7.93293 4.28873 7.90266 4.03495 7.90266 3.78114C7.90266 1.97402 9.35477 0.501953 11.1598 0.501953C12.0976 0.501953 12.9446 0.897891 13.5396 1.53748C14.2757 1.39536 14.9816 1.12123 15.6068 0.745609C15.3648 1.50705 14.8505 2.14664 14.1749 2.5527C14.8304 2.48167 15.4657 2.29889 16.0505 2.04511C15.6069 2.69483 15.0522 3.27348 14.417 3.74052Z"/>
</svg>
</a>
</li>
</ul>
</div>
</div>
</footer>
</body>
</html>