-
Notifications
You must be signed in to change notification settings - Fork 0
/
catalog-monopodes.html
289 lines (279 loc) · 13.6 KB
/
catalog-monopodes.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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Девайс - страница каталога</title>
<link href="css/normalize.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>
<body>
<!--ХЕДЕР-->
<header class="page-header container">
<!--Желтая подложка хедера-->
<div class="header-wrapper">
<!--Логотип - ссылка на главную-->
<a class="on-header-logo hover-fading" href="index.html">
<img src="img/device-logo.svg" alt="DEVICE" width="162" height="35">
</a>
<!--Блок ссылок-->
<div class="upper-string">
<!--Форма поиска по сайту-->
<form class="actions-search" action="/echo" method="post">
<input type="search" placeholder="Поиск по сайту" name="search" id="sitesearch">
<button class="submit-string-button" type="submit">Найти</button>
</form>
<!--Ссылки для входа в авторизованный режим, сравнения выбранных товаров и просмотра корзины-->
<div class="user-block">
<a class="actions-not-logged hover-fading" href="#">Валентин Петухов</a>
<a class="logout hover-brighting" href="#">Выйти</a>
</div>
<a class="actions-compare hover-fading" href="#">Сравнить</a>
<a class="actions-cart hover-fading" href="#">Корзина</a>
</div>
<!--Основное навигационное меню-->
<nav>
<ul class="mainmenu gxb s18 t200 uc">
<li><a class="mainmenu-first hover-fading" href="#">Каталог товаров</a>
<!--Вложенное меню, выпадающее при наведении на пункт "Каталог товаров"-->
<div class="submenu-wrapper osl s15 t10 nt">
<ul class="submenu osl s15 t10 nt">
<li><a class="submenu-link hover-fading" href="#">Виртуальная реальность</a></li>
<li><a class="submenu-link hover-fading" href="catalog-monopodes.html">Моноподы для селфи</a></li>
<li><a class="submenu-link hover-fading" href="#">Экшн-камеры</a></li>
</ul>
<ul class="submenu">
<li><a class="submenu-link hover-fading" href="#">Фитнес-браслеты</a></li>
<li><a class="submenu-link hover-fading" href="#">Умные часы</a></li>
</ul>
<ul class="submenu">
<li><a class="submenu-link hover-fading" href="#">Квадрокоптеры</a></li>
</ul>
</div>
</li>
<li><a class="hover-fading" href="#">Доставка</a></li>
<li><a class="hover-fading" href="#">Гарантия</a></li>
<li><a class="hover-fading" href="#">Контакты</a></li>
</ul>
</nav>
<!--Конец основного навигационного меню -->
</div>
</header>
<!--ОСНОВНОЙ БЛОК-->
<main>
<div class="container">
<div class="add-header-bgr"></div>
<div class="catalog-upper-block">
<h1 class="gxb s47">Моноподы для селфи</h1>
<ul class="breadcrumbs osl s14">
<li><a href="index.html">Главная</a></li>
<li><a href="#">Каталог товаров</a></li>
<li><span class="breadcrumbs-active">Моноподы для селфи</span></li>
</ul>
</div>
</div>
<div class="filters-sort-header-wrapper">
<div class="container">
<p class="filters-header gxb s16 t200 uc">Фильтр:</p>
<p class="sort-header gxb s16 t200 uc">Сортировка:</p>
<div class="sort-property">
<a class="hover-brighting2 active" href="#">По цене</a>
<a class="hover-brighting2" href="#">По типу</a>
<a class="hover-brighting2" href="#">По популярности</a>
</div>
<div class="sort-directions">
<a class="up hover-brighting2" href="#"></a>
<a class="down hover-brighting2 active" href="#"></a>
</div>
</div>
</div>
<div class="main-wrapper">
<div class="filters-sort container">
<!--Блок фильтров-->
<aside class="filters">
<form class="filters-form" action="https://echo.htmlacademy.ru" method="get">
<!--Фильтр стоимости - ползунок-->
<fieldset class="filter-price">
<legend class="gxb s18">Стоимость</legend>
<div class="filter-price">
<div class="filter-range-wrapper">
<div class="filter-range">
<div class="filter-range-bar"></div>
<div class="filter-range-handle min"></div>
<div class="filter-range-handle max"></div>
</div>
</div>
<div class="filter-interval">
<label>от <input type="text" name="min-interval" value="0"></label>
<label>до <input type="text" name="max-interval" value="5000"></label>
</div>
</div>
</fieldset>
<!--Фильтр цвета-->
<fieldset class="filter-color">
<legend class="gxb s18">Цвет</legend>
<ul>
<li>
<input type="checkbox" name="black" id="black" checked>
<!-- <svg><polyline points="1,4 5,8 12,1"/></svg> -->
<label for="black">Чёрный</label>
</li>
<li>
<input type="checkbox" name="white" id="white">
<!-- <svg><polyline points="1,4 5,8 12,1"/></svg> -->
<label for="white">Белый</label>
</li>
<li>
<input type="checkbox" name="blue" id="blue" checked>
<!-- <svg><polyline points="1,4 5,8 12,1"/></svg> -->
<label for="blue">Синий</label>
</li>
<li>
<input type="checkbox" name="red" id="red" checked>
<!-- <svg><polyline points="1,4 5,8 12,1"/></svg> -->
<label for="red">Красный</label>
</li>
<li>
<input type="checkbox" name="pink" id="pink">
<!-- <svg><polyline points="1,4 5,8 12,1"/></svg> -->
<label for="pink">Розовый</label>
</li>
</ul>
</fieldset>
<!--Фильтр наличия Bluetooth-->
<fieldset class="filter-bluetooth">
<legend class="gxb s18">Bluetooth</legend>
<ul>
<li>
<input type="radio" name="bluetooth" id="present" value="1">
<label for="present">Есть</label>
</li>
<li>
<input type="radio" name="bluetooth" id="not-present" value="2" checked>
<label for="not-present">Нет</label>
</li>
</ul>
</fieldset>
<button class="btn show-selected" type="submit">Показать</button>
</form>
</aside>
<!--Блок выбранных товаров-->
<div class="selected-items">
<div class="item-cards">
<div class="item-card">
<div class="image-bgr">
<img class="item-picture" src="img/item-1.jpg" alt="Любительская селфи-палка" width="360" height="380">
</div>
<div class="new-mark gxb s14 t50"><p>NEW</p></div>
<div class="item-text">
<span class="item-name gxb s18">Любительская селфи-палка</span>
<span class="item-price gl s16">500 руб.</span>
</div>
<div class="item-card-overlay">
<a class="btn add-to-cart" href="#">В корзину</a>
<a class="add-to-comparelist osl s13 hover-brighting3" href="#">Добавить к сравнению</a>
</div>
</div>
<div class="item-card">
<div class="image-bgr">
<img src="img/item-2.jpg" alt="Профессиональная селфи-палка" width="360" height="380">
</div>
<div class="new-mark gxb s14 t50"><p>NEW</p></div>
<div class="item-text">
<span class="item-name gxb s18">Профессиональная селфи‑палка</span>
<span class="item-price gl s16">1 500 руб.</span>
</div>
<div class="item-card-overlay">
<a class="btn add-to-cart" href="#">В корзину</a>
<a class="add-to-comparelist osl s13 hover-brighting3" href="#">Добавить к сравнению</a>
</div>
</div>
<div class="item-card">
<div class="image-bgr">
<img src="img/item-3.jpg" alt="Непотопляемая селфи-палка" width="360" height="380">
</div>
<div class="new-mark gxb s14 t50"><p>NEW</p></div>
<div class="item-text">
<span class="item-name gxb s18">Непотопляемая селфи-палка</span>
<span class="item-price gl s16">2 500 руб.</span>
</div>
<div class="item-card-overlay">
<a class="btn add-to-cart" href="#">В корзину</a>
<a class="add-to-comparelist osl s13 hover-brighting3" href="#">Добавить к сравнению</a>
</div>
</div>
<div class="item-card">
<div class="image-bgr">
<img src="img/item-4.jpg" alt="Селфи-палка «Следуй за мной»" width="360" height="380">
</div>
<div class="new-mark gxb s14 t50 show-new-mark"><p>NEW</p></div>
<div class="item-text">
<span class="item-name gxb s18">Селфи-палка «Следуй за мной»</span>
<span class="item-price gl s16">4 900 руб.</span>
</div>
<div class="item-card-overlay">
<a class="btn add-to-cart" href="#">В корзину</a>
<a class="add-to-comparelist osl s13 hover-brighting3" href="#">Добавить к сравнению</a>
</div>
</div>
</div>
<div class="page-nav gxb s16 t200 uc">
<div class="backward rewind">
<a href="#">Назад</a>
</div>
<div class="choose-page">
<a class="nav-btn active">1</a>
<a class="nav-btn hover-brighting2" href="#">2</a>
<a class="nav-btn hover-brighting2" href="#">3</a>
</div>
<div class="forward rewind">
<a href="#">Вперед</a>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer catalog">
<div class="container">
<div class="footer-wrapper">
<div class="left-footer">
<a class="device-logo">
<img src="img/device-logo-yellow.svg" alt="DEVICE" width="162" height="35">
</a>
<p>г. Москва, ул. Строителей, 15</p>
</div>
<div class="center-footer">
<ul class="footer-menu gxb s18 t200 uc">
<li><a class="hover-fading" href="#">Доставка</a></li>
<li><a class="hover-fading" href="#">Гарантия</a></li>
<li><a class="hover-fading" href="#">Контакты</a></li>
</ul>
<div class="footer-social">
<ul>
<li>
<a class="facebook" href="https://facebook.com/device">Фейсбук</a>
</li>
<li>
<a class="instagram" href="https://instagram.com/device">Инстаграм</a>
</li>
<li>
<a class="tweeter" href="https://tweeter.com/device">Твитер</a>
</li>
</ul>
</div>
</div>
<div class="right-footer">
<div class="footer-actions">
<a class="footer-not-logged hover-brighting" href="#">Выйти</a>
<a class="footer-compare hover-brighting" href="#">Сравнить</a>
<a class="footer-cart hover-brighting" href="#">Корзина</a>
</div>
<a class="phone" href="tel:+74954959595">Тел.: +7 (495) 495-95-95</a>
<a class="htmlacademy hover-fading" href="https://htmlacademy.ru/intensive/htmlcss"></a>
</div>
</div>
</div>
</footer>
<!-- <script src="js/script-catalog.js"></script> -->
</body>
</html>