-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
286 lines (276 loc) · 23.4 KB
/
Copy pathindex.html
File metadata and controls
286 lines (276 loc) · 23.4 KB
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
<!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 rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap">
<title>lesson-7</title>
</head>
<body>
<header class="header">
<div class="container">
<div class="header__wrp">
<div class="header__wrp-logo-form">
<a href="./index.html" class="header__logo"><img src="./img/logo.svg" alt="logo"></a>
<div class="header__search_wrp">
<img class="header__loupe" src="./img/loupe.svg" alt="search">
<form class="header__search">
<label class="header__search-label visually-hidden" for="search">поиск</label>
<input class="header__search-input" type="search" placeholder="Search" id="search"></input>
</form></div>
</div>
<div class="header__nav-group">
<a href="#" class="header__burger">
<svg class="header__burger-svg" width="32" height="23" viewBox="0 0 32 23" xmlns="http://www.w3.org/2000/svg"><path d="M0 23V20.31H32V23H0ZM0 12.76V10.07H32V12.76H0ZM0 2.69V0H32V2.69H0Z"/>
</svg>
</a>
<a href="#" class="header__person">
<svg class="header__person-svg" width="29" height="29" viewBox="0 0 29 29" xmlns="http://www.w3.org/2000/svg">
<path d="M14.5 19.937C19 19.937 22.656 15.464 22.656 9.968C22.656 4.472 19 0 14.5 0C13.3631 0.0217413 12.2463 0.303398 11.2351 0.823397C10.2239 1.34339 9.34507 2.08794 8.66602 3C7.12663 4.99573 6.30819 7.45381 6.34399 9.974C6.34399 15.465 10 19.937 14.5 19.937ZM14.5 1.813C18 1.813 20.844 5.472 20.844 9.969C20.844 14.466 17.998 18.125 14.5 18.125C11.002 18.125 8.15603 14.465 8.15503 9.969C8.15403 5.473 11 1.813 14.5 1.813ZM20.844 18.125C20.6036 18.125 20.373 18.2205 20.203 18.3905C20.033 18.5605 19.9375 18.7911 19.9375 19.0315C19.9375 19.2719 20.033 19.5025 20.203 19.6725C20.373 19.8425 20.6036 19.938 20.844 19.938C22.526 19.9399 24.1386 20.6088 25.3279 21.7982C26.5172 22.9875 27.1861 24.6 27.188 26.282C27.1875 26.5221 27.0918 26.7523 26.922 26.9221C26.7522 27.0918 26.5221 27.1875 26.282 27.188H2.71997C2.47985 27.1875 2.24975 27.0918 2.07996 26.9221C1.91016 26.7523 1.81449 26.5221 1.81396 26.282C1.81608 24.6001 2.48517 22.9877 3.67444 21.7985C4.86371 20.6092 6.47608 19.9401 8.15796 19.938C8.39825 19.938 8.62868 19.8425 8.79858 19.6726C8.96849 19.5027 9.06396 19.2723 9.06396 19.032C9.06396 18.7917 8.96849 18.5613 8.79858 18.3914C8.62868 18.2215 8.39825 18.126 8.15796 18.126C5.99541 18.1279 3.92201 18.9875 2.39258 20.5164C0.863144 22.0453 0.00264777 24.1185 0 26.281C0.000794067 27.0019 0.287502 27.693 0.797241 28.2027C1.30698 28.7125 1.99811 28.9992 2.71899 29H26.282C27.0027 28.9989 27.6936 28.7121 28.2031 28.2024C28.7126 27.6927 28.9992 27.0017 29 26.281C28.9974 24.1187 28.1372 22.0457 26.6083 20.5168C25.0793 18.9878 23.0063 18.1276 20.844 18.125Z"/>
</svg>
</a>
<a href="./cart.html" class="header__backet">
<svg class="header__backet-svg" width="32" height="29" viewBox="0 0 32 29" xmlns="http://www.w3.org/2000/svg">
<path d="M26.2009 29C25.5532 28.9738 24.9415 28.6948 24.4972 28.2227C24.0529 27.7506 23.8114 27.1232 23.8245 26.475C23.8376 25.8269 24.1043 25.2097 24.5673 24.7559C25.0303 24.3022 25.6527 24.048 26.301 24.048C26.9493 24.048 27.5717 24.3022 28.0347 24.7559C28.4977 25.2097 28.7644 25.8269 28.7775 26.475C28.7906 27.1232 28.549 27.7506 28.1047 28.2227C27.6604 28.6948 27.0488 28.9738 26.401 29H26.2009ZM6.75293 26.32C6.75293 25.79 6.91011 25.2718 7.20459 24.8311C7.49907 24.3904 7.91764 24.0469 8.40735 23.844C8.89705 23.6412 9.43594 23.5881 9.95581 23.6915C10.4757 23.7949 10.9532 24.0502 11.328 24.425C11.7028 24.7998 11.9581 25.2773 12.0615 25.7972C12.1649 26.317 12.1118 26.8559 11.9089 27.3456C11.7061 27.8353 11.3626 28.2539 10.9219 28.5483C10.4812 28.8428 9.96304 29 9.43298 29C9.08087 29.0003 8.73212 28.9311 8.40674 28.7966C8.08135 28.662 7.78569 28.4646 7.53662 28.2158C7.28755 27.9669 7.09001 27.6713 6.9552 27.3461C6.82039 27.0208 6.75098 26.6721 6.75098 26.32H6.75293ZM10.553 20.686C10.2935 20.6868 10.0409 20.6024 9.83411 20.4457C9.62727 20.2891 9.47758 20.0689 9.40796 19.819L4.57495 2.36401H1.18201C0.868521 2.36401 0.567859 2.23947 0.346191 2.01781C0.124523 1.79614 0 1.49549 0 1.18201C0 0.868519 0.124523 0.567873 0.346191 0.346205C0.567859 0.124537 0.868521 5.81268e-06 1.18201 5.81268e-06H5.46301C5.7225 -0.00080736 5.97504 0.0837201 6.18176 0.240568C6.38848 0.397416 6.53784 0.617884 6.60693 0.868006L11.4399 18.323H24.6179L29.001 8.27501H14.401C14.2428 8.27961 14.0854 8.25242 13.9379 8.19507C13.7904 8.13771 13.6559 8.05134 13.5424 7.94108C13.4288 7.83082 13.3386 7.69891 13.277 7.55315C13.2154 7.40739 13.1836 7.25075 13.1836 7.0925C13.1836 6.93426 13.2154 6.77762 13.277 6.63186C13.3386 6.4861 13.4288 6.35419 13.5424 6.24393C13.6559 6.13367 13.7904 6.0473 13.9379 5.98994C14.0854 5.93259 14.2428 5.90541 14.401 5.91001H30.814C31.0097 5.90996 31.2022 5.95866 31.3744 6.05172C31.5465 6.14478 31.6928 6.27926 31.7999 6.44301C31.9078 6.60729 31.9734 6.79569 31.9908 6.99145C32.0083 7.18721 31.9771 7.38424 31.9 7.565L26.495 19.977C26.4026 20.1876 26.251 20.3668 26.0585 20.4927C25.866 20.6186 25.641 20.6858 25.411 20.686H10.553Z"/>
</svg><span class="header__backet-counter">5</span>
</a>
</div>
</div>
<nav class="header__menu">
<h2 class="header__menu-title">menu</h2>
<ul class="header__menu-list">
<li class="header__menu-item menu-sub-item">
<h3 class="menu-sub-item__title">man</h3>
<ul class="menu-sub-item__list">
<li><a class="menu-sub-item__item-link" href="#">accesories</a></li>
<li><a class="menu-sub-item__item-link" href="#">bags</a></li>
<li><a class="menu-sub-item__item-link" href="#">denim</a></li>
<li><a class="menu-sub-item__item-link" href="#">t-shirts</a></li>
</ul>
</li>
<li class="header__menu-item menu-sub-item">
<h3 class="menu-sub-item__title">woman</h3>
<ul class="menu-sub-item__list">
<li class="menu-sub-item__item-link"><a href="#">accesories</a></li>
<li class="menu-sub-item__item-link"><a href="#">bags</a></li>
<li class="menu-sub-item__item-link"><a href="#">denim</a></li>
<li class="menu-sub-item__item-link"><a href="#">t-shirts</a></li>
</ul>
</li>
<li class="header__menu-item menu-sub-item">
<h3 class="menu-sub-item__title">kids</h3>
<ul class="menu-sub-item__list">
<li class="menu-sub-item__item-link"><a href="#">accesories</a></li>
<li class="menu-sub-item__item-link"><a href="#">jackets & coats</a></li>
<li class="menu-sub-item__item-link"><a href="#">polos</a></li>
<li class="menu-sub-item__item-link"><a href="#">t-shirts</a></li>
<li class="menu-sub-item__item-link"><a href="#">shirts</a></li>
<li class="menu-sub-item__item-link"><a href="#">bags</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
<main>
<section class="brand">
<img class="brand__img" src="./img/man.jpg" alt="man" width="50%">
<div class="brand__title-wrp">
<h1 class="brand__title">the brand <span class="brand__subtitle">of luxerious <span class="brand__subtitle-pink"> fashion</span></span></h1>
</div>
</section>
<section class="sales container">
<h2 class="sales__title visually-hidden">sales</h2>
<ul class="sales__list">
<li class="sales__item sales__item--woman">
<p class="sales__item-text">30% off </p>
<h3 class="sales__item-title">for women</h3>
</li>
<li class="sales__item sales__item--man">
<p class="sales__item-text">hot deal </p>
<h3 class="sales__item-title">for men</h3>
</li>
<li class="sales__item sales__item--kids">
<p class="sales__item-text">new arrivals </p>
<h3 class="sales__item-title">for kids</h3>
</li>
<li class="sales__item sales__item--shoes">
<p class="sales__item-text">luxirous & trendy</p>
<h3 class="sales__item-title">accesories</h3>
</li>
</ul>
</section>
<section class="products container">
<h2 class="products__title">Fetured Items</h2>
<p class="products__text">Shop for items based on what we featured in this week</p>
<ul class="products__list">
<li class="products__item">
<div class="products__item-wrapper">
<img class="products__item-img" src="./img/card_man.jpg" alt="card with man">
<div class="products__item-overlay"></div>
<button class="products__item-button"><img class="products__item-button-icon" src="./img/basket.svg"><span>Add To Cart</span></button>
</div>
<h3 class="products__item-title">ellery x m'o capsule</h3>
<p class="products__item-text">
known for her sculptural takes on traditional tailoring, australian arbiter of cool kym ellery
teams
up with moda operandi.
</p>
<p class="products__item-cost">$52.00</p>
</li>
<li class="products__item">
<div class="products__item-wrapper">
<img class="products__item-img" src="./img/card_woman.jpg" alt="card with woman">
<div class="products__item-overlay"></div>
<button class="products__item-button"><img class="products__item-button-icon" src="./img/basket.svg"><span>Add To Cart</span></button>
</div>
<h3 class="products__item-title">ellery x m'o capsule</h3>
<p class="products__item-text">
known for her sculptural takes on traditional tailoring, australian arbiter of cool kym ellery
teams
up with moda operandi.
</p>
<p class="products__item-cost">$52.00</p>
</li>
<li class="products__item">
<div class="products__item-wrapper">
<img class="products__item-img" src="./img/card_child.jpg" alt="card with child">
<div class="products__item-overlay"></div>
<button class="products__item-button"><img class="products__item-button-icon" src="./img/basket.svg"><span>Add To Cart</span></button>
</div>
<h3 class="products__item-title">ellery x m'o capsule</h3>
<p class="products__item-text">
known for her sculptural takes on traditional tailoring, australian arbiter of cool kym ellery
teams
up with moda operandi.
</p>
<p class="products__item-cost">$52.00</p>
</li>
<li class="products__item">
<div class="products__item-wrapper">
<img class="products__item-img" src="./img/card_man2.jpg" alt="card with man">
<div class="products__item-overlay"></div>
<button class="products__item-button"><img class="products__item-button-icon" src="./img/basket.svg"><span>Add To Cart</span></button>
</div>
<h3 class="products__item-title">ellery x m'o capsule</h3>
<p class="products__item-text">
known for her sculptural takes on traditional tailoring, australian arbiter of cool kym ellery
teams
up with moda operandi.
</p>
<p class="products__item-cost">$52.00</p>
</li>
<li class="products__item">
<div class="products__item-wrapper">
<img class="products__item-img" src="./img/card_woman2.jpg" alt="card with woman">
<div class="products__item-overlay"></div>
<button class="products__item-button"><img class="products__item-button-icon" src="./img/basket.svg"><span>Add To Cart</span></button>
</div>
<h3 class="products__item-title">ellery x m'o capsule</h3>
<p class="products__item-text">
known for her sculptural takes on traditional tailoring, australian arbiter of cool kym ellery
teams
up with moda operandi.
</p>
<p class="products__item-cost">$52.00</p>
</li>
<li class="products__item">
<div class="products__item-wrapper">
<img class="products__item-img" src="./img/card_woman3.jpg" alt="card with woman">
<div class="products__item-overlay"></div>
<button class="products__item-button"><img class="products__item-button-icon" src="./img/basket.svg"><span>Add To Cart</span></button>
</div>
<h3 class="products__item-title">ellery x m'o capsule</h3>
<p class="products__item-text">
known for her sculptural takes on traditional tailoring, australian arbiter of cool kym ellery
teams
up with moda operandi.
</p>
<p class="products__item-cost">$52.00</p>
</li>
</ul>
<div class="products__button_wrap">
<form target="_blank" action="./catalog.html">
<button class="products__button">Browse All Product</button>
</form>
</div>
</section>
<section class="advantages">
<div class="containet">
<ul class="advantages__list">
<li class="advantages__item">
<img class="advantages__item-img" src="./img/car.svg" alt="delivery logo">
<h3 class="advantages__item-title">Free Delivery</h3>
<p class="advantages__item-text">worldwide delivery on all. authorit tively morph next-generation innov tion with extensive
models.
</p>
</li>
<li class="advantages__item">
<img class="advantages__item-img" src="./img/percent.svg" alt="percent logo">
<h3 class="advantages__item-title">Sales & discounts</h3>
<p class="advantages__item-text">worldwide delivery on all. authorit tively morph next-generation innov tion with extensive
models.
</p>
</li>
<li class="advantages__item">
<img class="advantages__item-img" src="./img/crown.svg" alt="crown logo">
<h3 class="advantages__item-title">Quality assurance</h3>
<p class="advantages__item-text">worldwide delivery on all. authorit tively morph next-generation innov tion with extensive
models.
</p>
</li>
</ul>
</div>
</section>
</main>
<footer>
<section class="subscription">
<ul class="subscription__list container">
<li class="subscription__discription">
<img class="subscription__item-img" src="./img/face.png" alt="woman face">
<p class="subscription__item-text">“Vestibulum quis porttitor dui! Quisque viverra nunc mi, a pulvinar purus condimentum“</p>
</li>
<li class="subscription__subscribe">
<h2 class="subscription__item-title">subscribe<span class="subscription__item-subtitle"> for our newletter and promotion</span></h2>
<form class="subscription__item-form">
<input class="subscription__item-input" inputtype="email" placeholder="Enter Your Email">
<button class="subscription__item-button">Subscribe</button>
</form>
</li>
</ul>
</section>
<section class="socials">
<div class="socials__panel container">
<p class="socials__copyrigth">© 2021 brand all rights reserved.</p>
<ul class="socials__links">
<li class="socials__links-item">
<a class="socials__links-facebook" href="#"><svg class="socials__links-icon" 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="socials__links-item">
<a class="socials__links-instagramm" href="#"><svg class="socials__links-icon" 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="socials__links-item">
<a class="socials__links-pinterest" href="#"><svg class="socials__links-icon" 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="socials__links-item">
<a class="socials__links-twitter" href="#"><svg class="socials__links-icon" 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>
</section>
</footer>
</body>
</html>