-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathtoys.html
349 lines (341 loc) · 22.8 KB
/
toys.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
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
<!doctype html>
<html lang="ru">
<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">
<title>Toys</title>
<link rel="stylesheet" href="css/normalize.css" class="css" />
<link rel="stylesheet" href="css/common.min.css" class="css" />
<link rel="stylesheet" href="css/toys.min.css" class="css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,700;1,400;1,700&family=Montserrat:wght@300;600;700&family=Open+Sans:wght@400;700&display=swap"
rel="stylesheet" />
</head>
<body>
<header class="header container">
<a href="#">
<img src="img/index/logo.png" alt="logo" class="logo header__logo">
</a>
<nav class="header__nav">
<ul class="header__list undoted">
<li class="header__link">
<a href="#">Новости</a>
</li>
<li class="header__link">
<a href="#">Каталог</a>
</li>
<li class="header__link">
<a href="#">О нас</a>
</li>
</ul>
</nav>
<a href="#"><img src="img/index/loop.jpg" alt="search" class="header__loop"></a>
<a class="header-link" href="#">Свяжитесь с нами</a>
</header>
<main>
<section class="breadcrumb__heading container">
<h1 class="toy__heading " tabindex="0">Детские игрушки</h1>
<nav class="breadcrumb">
<ul class="breadcrumb__list undoted">
<li class="breadcrumb__item">
<a href="index.html" class="breadcrumb__link">Главная</a>
</li>
<li class="breadcrumb__item">
<a href="products.html" class="breadcrumb__link">Каталог</a>
</li>
<li class="breadcrumb__item">
<a href="#" class="breadcrumb__link breadcrumb__link_active">Игрушки</a>
</li>
</ul>
</nav>
</section>
<aside class="filter choice ">
<div class="container">
<form action="#" class="filter__form">
<fieldset>
<div class="label-wrapper label-wrapper-range" tabindex="0">
<label for="range-input">Цена</label>
<input type="range" id="range-input" min="0" max="500">
</div>
<div class="range__period">
<span class="range__num" tabindex="0">0</span>
<span class="range__num" tabindex="0">500</span>
</div>
</fieldset>
<fieldset class="field-range">
<legend>Цвет</legend>
<ul class="undoted checkbox-list">
<li>
<input type="checkbox" id="check-black" class="checkbox-input" checked />
<label for="check-black" class="checkbox-label" tabindex="0">Черный</label>
</li>
<li>
<input type="checkbox" id="check-blue" class="checkbox-input" />
<label for="check-blue" class="checkbox-label" tabindex="0">Синий</label>
</li>
<li>
<input type="checkbox" id="check-green" class="checkbox-input" />
<label for="check-green" class="checkbox-label" tabindex="0">Зеленый</label>
</li>
<li>
<input type="checkbox" id="check-white" class="checkbox-input" />
<label for="check-white" class="checkbox-label" tabindex="0">Белый</label>
</li>
</ul>
</fieldset>
<fieldset class="field-range">
<legend>Доставка</legend>
<ul class="undoted radio-list">
<li>
<input type="radio" id="radio-free" class="radio-input" name="shipping" />
<label for="radio-free" class="radio-label" tabindex="0">Бесплатная доставка</label>
</li>
<li>
<input type="radio" id="radio-fast" class="radio-input" name="shipping" checked />
<label for="radio-fast" class="radio-label" tabindex="0">Быстрая доставка</label>
</li>
</ul>
</fieldset>
<fieldset class="radio-limit">
<legend>Колличество</legend>
<ul class="undoted radio-list radio-list-limit">
<li tabindex="0">
<input type="radio" id="radio-five" class="radio-input" name="amount">
<label for="radio-five" class="radio-label"></label>
<span class="radio-text">0-5</span>
</li>
<li tabindex="0">
<input type="radio" id="radio-twenty" class="radio-input" name="amount">
<label for="radio-twenty" class="radio-label"></label>
<span class="radio-text radio-text_twenty">10-20</span>
</li>
<li tabindex="0">
<input type="radio" id="radio-fifty" class="radio-input" name="amount">
<label for="radio-fifty" class="radio-label"></label>
<span class="radio-text radio-text_fifty">20-50</span>
</li>
</ul>
</fieldset>
<button type="submit" class="button button_filter" tabindex="0">выбрать</button>
</form>
</div>
</aside>
<section class="products container">
<h3 class="hidden">Product</h3>
<ul class="products__list undoted">
<li class="products__item">
<a class="toy__link" href="#">
<img src="img/toys/trade1.png" alt="shark">
</a>
<a href="#" class="item__text">Кресло груша SHARKY BEAN</a>
<a href="#" class="item__price">$60.00 USD</a>
</li>
<li class="products__item">
<a class="toy__link" href="#">
<img src="img/toys/trade2.png" alt="frame">
</a>
<a href="#" class="item__text">Декоративные рамки BRASS DECO</a>
<a href="#" class="item__price">$66.00 USD</a>
</li>
<li class="products__item">
<a class="toy__link" href="#">
<img src="img/toys/trade3.png" alt="apron">
</a>
<a href="#" class="item__text">Фартук CIBO FULL</a>
<a href="#" class="item__price">$60.00 USD</a>
</li>
<li class="products__item">
<a class="toy__link" href="#">
<img src="img/toys/trade4.png" alt="bubblegum">
</a>
<a href="#" class="item__text">КАвтомат с жвачкой GATCHA GATCHA</a>
<a href="#" class="item__price">$56.00 USD</a>
</li>
<li class="products__item">
<a class="toy__link" href="#">
<img src="img/toys/trade5.png" alt="shark">
</a>
<a href="#" class="item__text">Свеча CHRISTMAS ADVENT SCENTED</a>
<a href="#" class="item__price">$29.00 USD</a>
</li>
<li class="products__item">
<a class="toy__link" href="#">
<img src="img/toys/trade6.png" alt="tea spoons">
</a>
<a href="#" class="item__text">набор чайных ложек</a>
<a href="#" class="item__price">$56.00 USD</a>
</li>
</ul>
<ul class="products__scroll undoted">
<li>
<button type="button" class="arrow__scroll arrow__scroll_left" aria-label="arrow_left">
<svg width="18" height="30" viewBox="0 0 18 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 2L3 15L16 28" stroke="#1E0606" stroke-opacity="0.12" stroke-width="4" />
</svg>
</button>
</li>
<li>
<div class="product__num">
<a href="#" class="button__scroll button__scroll_active">1</a>
<a href="#" class="button__scroll">2</a>
<a href="#" class="button__scroll">3</a>
<a href="#" class="button__scroll">4</a>
</div>
</li>
<li>
<button type="button" class="arrow__scroll arrow__scroll_rigth" aria-label="arrow_rigth">
<svg width="18" height="30" viewBox="0 0 18 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 2L15 15L2 28" stroke="#1E0606" stroke-opacity="0.12" stroke-width="4" />
</svg>
</button>
</li>
</ul>
</section>
</main>
<footer>
<div class="footer container">
<div class="footer__nav">
<div class="footer__menu">
<h4>Меню</h4>
<ul class="footer__list undoted">
<li>
<a href="#">О нас</a>
</li>
<li>
<a href="#">Новости</a>
</li>
<li>
<a href="#">Услуги</a>
</li>
<li>
<a href="#">Новинки</a>
</li>
<li>
<a href="#">2018 Праздничный каталог</a>
</li>
<li>
<a href="#">Дизайнерская одежда</a>
</li>
</ul>
</div>
<div class="footer__info">
<h4>Информация покупателя</h4>
<ul class="footer__list undoted">
<li>
<a href="#">Контакты</a>
</li>
<li>
<a href="#">Скидки</a>
</li>
<li>
<a href="#">Покупка и возврат</a>
</li>
<li>
<a href="#">Условия и положения</a>
</li>
<li>
<a href="#">Политика конфиденциальности</a>
</li>
<li>
<a href="#">Поиск</a>
</li>
</ul>
</div>
<div class="footer__contacts">
<h4>Контакты</h4>
<div>
<form action="#" class="footer__form">
<fieldset class="footer__fieldset">
<div>
<label for="input-footer"></label>
<input type="email" placeholder="Email" class="footer__input" id="input-footer" />
</div>
</fieldset>
<button class="button button__footer" aria-label="aplay">
<svg width="21" height="18" viewBox="0 0 21 18" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M0.00999999 18L21 9L0.00999999 0L0 7L15 9L0 11L0.00999999 18Z"
fill="white" />
</svg>
</button>
</form>
</div>
<ul class="footer__list footer__linklist undoted">
<li>
<a href="#">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 15C0 6.71573 6.71573 0 15 0C23.2843 0 30 6.71573 30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 23.2843 0 15Z"
fill="#666666"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5527 10.3672H16.2967C16.0307 10.3672 15.7337 10.7172 15.7337 11.1852V12.8142H18.5527V15.1352H15.7337V22.1052H13.0707V15.1352H10.6577V12.8142H13.0707V11.4472C13.0707 9.48823 14.4317 7.89423 16.2967 7.89423H18.5527V10.3672Z"
fill="white" />
</svg>
</a>
</li>
<li>
<a href="#">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0 15C0 6.71573 6.71573 0 15 0C23.2843 0 30 6.71573 30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 23.2843 0 15Z"
fill="#666666" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M21.1006 12.2891C21.1056 12.4161 21.1096 12.5431 21.1096 12.6721C21.1096 16.5761 18.1366 21.0781 12.7026 21.0781C11.0346 21.0781 9.48058 20.5881 8.17358 19.7501C8.40658 19.7771 8.64158 19.7911 8.87958 19.7911C10.2636 19.7911 11.5376 19.3181 12.5486 18.5251C11.2556 18.5021 10.1656 17.6481 9.78758 16.4751C9.96858 16.5101 10.1546 16.5271 10.3446 16.5271C10.6136 16.5271 10.8746 16.4921 11.1226 16.4241C9.77158 16.1521 8.75158 14.9591 8.75158 13.5271V13.4901C9.15058 13.7111 9.60758 13.8441 10.0916 13.8591C9.29858 13.3301 8.77758 12.4261 8.77758 11.4001C8.77758 10.8591 8.92258 10.3521 9.17658 9.91612C10.6326 11.7031 12.8106 12.8791 15.2656 13.0021C15.2156 12.7851 15.1906 12.5601 15.1906 12.3281C15.1906 10.6971 16.5126 9.37512 18.1446 9.37512C18.9936 9.37512 19.7616 9.73212 20.2996 10.3071C20.9736 10.1761 21.6056 9.93012 22.1766 9.59012C21.9556 10.2811 21.4886 10.8591 20.8766 11.2251C21.4746 11.1541 22.0446 10.9961 22.5756 10.7601C22.1776 11.3521 21.6776 11.8731 21.1006 12.2891Z"
fill="white" />
</svg>
</a>
</li>
<li>
<a href="#">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0 15C0 6.71573 6.71573 0 15 0C23.2843 0 30 6.71573 30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 23.2843 0 15Z"
fill="#666666" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M15.0005 7C10.5825 7 7 10.5816 7 15.0005C7 18.2754 8.97001 21.0902 11.7896 22.3273C11.767 21.7694 11.7858 21.0977 11.9279 20.49C12.0821 19.8408 12.9571 16.1313 12.9571 16.1313C12.9571 16.1313 12.7021 15.6205 12.7021 14.865C12.7021 13.6796 13.3898 12.7943 14.245 12.7943C14.9722 12.7943 15.3241 13.3409 15.3241 13.9957C15.3241 14.7267 14.8575 15.8208 14.6176 16.8341C14.4172 17.6836 15.0428 18.3751 15.8801 18.3751C17.3957 18.3751 18.4165 16.4286 18.4165 14.1218C18.4165 12.3691 17.2358 11.0567 15.088 11.0567C12.6617 11.0567 11.1498 12.8658 11.1498 14.8866C11.1498 15.5847 11.3549 16.0758 11.6767 16.4559C11.8253 16.6318 11.8451 16.7014 11.7914 16.9027C11.7538 17.0486 11.6654 17.4042 11.6287 17.5444C11.5751 17.7466 11.4114 17.82 11.2288 17.7448C10.1102 17.2885 9.58999 16.0645 9.58999 14.6881C9.58999 12.4161 11.5064 9.68972 15.3072 9.68972C18.3619 9.68972 20.3724 11.9015 20.3724 14.2732C20.3724 17.4117 18.6282 19.7562 16.0551 19.7562C15.1924 19.7562 14.3795 19.2895 14.1011 18.7599C14.1011 18.7599 13.6363 20.6029 13.5385 20.9585C13.3691 21.5747 13.037 22.1919 12.7332 22.6717C13.4529 22.8843 14.213 23 15.0005 23C19.4184 23 23 19.4184 23 15.0005C23 10.5816 19.4184 7 15.0005 7Z"
fill="white" />
</svg>
</a>
</li>
<li>
<a href="https://www.instagram.com/" target="_self">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0 15C0 6.71573 6.71573 0 15 0C23.2843 0 30 6.71573 30 15C30 23.2843 23.2843 30 15 30C6.71573 30 0 23.2843 0 15Z"
fill="#666666" />
<path fill-rule="evenodd" clip-rule="evenodd"
d="M15 7C12.8273 7 12.5549 7.0092 11.7016 7.04813C10.8501 7.08697 10.2686 7.22223 9.7597 7.42C9.23363 7.62443 8.7875 7.89797 8.3427 8.3427C7.89797 8.7875 7.62443 9.23363 7.42 9.7597C7.22223 10.2686 7.08697 10.8501 7.04813 11.7016C7.0092 12.5549 7 12.8273 7 15C7 17.1727 7.0092 17.4451 7.04813 18.2984C7.08697 19.1499 7.22223 19.7314 7.42 20.2403C7.62443 20.7664 7.89797 21.2125 8.3427 21.6573C8.7875 22.102 9.23363 22.3756 9.7597 22.58C10.2686 22.7778 10.8501 22.913 11.7016 22.9519C12.5549 22.9908 12.8273 23 15 23C17.1727 23 17.4451 22.9908 18.2984 22.9519C19.1499 22.913 19.7314 22.7778 20.2403 22.58C20.7664 22.3756 21.2125 22.102 21.6573 21.6573C22.102 21.2125 22.3756 20.7664 22.58 20.2403C22.7778 19.7314 22.913 19.1499 22.9519 18.2984C22.9908 17.4451 23 17.1727 23 15C23 12.8273 22.9908 12.5549 22.9519 11.7016C22.913 10.8501 22.7778 10.2686 22.58 9.7597C22.3756 9.23363 22.102 8.7875 21.6573 8.3427C21.2125 7.89797 20.7664 7.62443 20.2403 7.42C19.7314 7.22223 19.1499 7.08697 18.2984 7.04813C17.4451 7.0092 17.1727 7 15 7ZM15 8.44143C17.1361 8.44143 17.3891 8.4496 18.2327 8.4881C19.0127 8.52367 19.4363 8.65397 19.7182 8.76353C20.0916 8.90867 20.3581 9.08203 20.638 9.362C20.918 9.6419 21.0913 9.9084 21.2365 10.2818C21.346 10.5637 21.4763 10.9873 21.5119 11.7673C21.5504 12.6109 21.5586 12.8639 21.5586 15C21.5586 17.1361 21.5504 17.3891 21.5119 18.2327C21.4763 19.0127 21.346 19.4363 21.2365 19.7182C21.0913 20.0916 20.918 20.3581 20.638 20.638C20.3581 20.918 20.0916 21.0913 19.7182 21.2365C19.4363 21.346 19.0127 21.4763 18.2327 21.5119C17.3892 21.5504 17.1363 21.5586 15 21.5586C12.8637 21.5586 12.6108 21.5504 11.7673 21.5119C10.9873 21.4763 10.5637 21.346 10.2818 21.2365C9.9084 21.0913 9.64193 20.918 9.36197 20.638C9.08207 20.3581 8.90867 20.0916 8.76353 19.7182C8.65397 19.4363 8.52367 19.0127 8.4881 18.2327C8.4496 17.3891 8.44143 17.1361 8.44143 15C8.44143 12.8639 8.4496 12.6109 8.4881 11.7673C8.52367 10.9873 8.65397 10.5637 8.76353 10.2818C8.90867 9.9084 9.08203 9.6419 9.36197 9.362C9.64193 9.08203 9.9084 8.90867 10.2818 8.76353C10.5637 8.65397 10.9873 8.52367 11.7673 8.4881C12.6109 8.4496 12.8639 8.44143 15 8.44143ZM10.8919 15C10.8919 12.7311 12.7311 10.8919 15 10.8919C17.2689 10.8919 19.1081 12.7311 19.1081 15C19.1081 17.2689 17.2689 19.1081 15 19.1081C12.7311 19.1081 10.8919 17.2689 10.8919 15ZM15 17.6667C13.5272 17.6667 12.3333 16.4728 12.3333 15C12.3333 13.5272 13.5272 12.3333 15 12.3333C16.4728 12.3333 17.6667 13.5272 17.6667 15C17.6667 16.4728 16.4728 17.6667 15 17.6667ZM19.2704 11.6896C19.8006 11.6896 20.2304 11.2598 20.2304 10.7296C20.2304 10.1994 19.8006 9.76957 19.2704 9.76957C18.7402 9.76957 18.3104 10.1994 18.3104 10.7296C18.3104 11.2598 18.7402 11.6896 19.2704 11.6896Z"
fill="white" />
</svg>
</a>
</li>
</ul>
</div>
</div>
<div class="footer__endinfo">
<div class="footer__raiting">
<p>Рейтинг компании</p>
<div class="rating_block">
<input name="rating" value="5" id="rating_5" type="radio" />
<label for="rating_5" class="label_rating"></label>
<input name="rating" value="4" id="rating_4" type="radio" />
<label for="rating_4" class="label_rating"></label>
<input name="rating" value="3" id="rating_3" type="radio" />
<label for="rating_3" class="label_rating"></label>
<input name="rating" value="2" id="rating_2" type="radio" />
<label for="rating_2" class="label_rating"></label>
<input name="rating" value="1" id="rating_1" type="radio" />
<label for="rating_1" class="label_rating"></label>
</div>
</div>
<a href="#">Copyright © 2018 Dlk • Design Life Kids</a>
<a href="#">Дизайн — Direct Line Development</a>
</div>
</div>
</footer>
</body>
</html>