-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
311 lines (304 loc) · 23.1 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
307
308
309
310
311
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Rizor Hovertrax 4.0</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;700&family=Rubik+Mono+One&display=swap" rel="stylesheet"/>
<link href="css/main.css" rel="stylesheet"/>
<meta name="theme-color" content="#3a30f8"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<link rel="apple-touch-icon" sizes="180x180" href="img/favicons/apple-touch-icon.png"/>
<link rel="icon" type="image/png" sizes="32x32" href="img/favicons/favicon-32x32.png"/>
<link rel="icon" type="image/png" sizes="16x16" href="img/favicons/favicon-16x16.png"/>
<link rel="manifest" href="img/favicons/site.webmanifest"/>
<link rel="mask-icon" href="img/favicons/safari-pinned-tab.svg" color="#000000"/>
<meta name="apple-mobile-web-app-title" content="Rizor"/>
<meta name="application-name" content="Rizor"/>
<meta name="msapplication-TileColor" content="#ffffff"/>
<meta name="theme-color" content="#ffffff"/>
</head>
<body><svg xmlns="http://www.w3.org/2000/svg" style="display: none">
<defs>
<symbol id="logo__gear" viewBox="0 0 41 41">
<path fill-rule="evenodd" d="M27.413 3.218L24.651.582l.628 4.149c-1.436-1.135-3.33-2.36-5.455-3.043L16.495.618l2.036 3.354c-1.535-.322-3.581-.559-6.225-.497l-4.117.095 3.638 2.437a21.507 21.507 0 00-5.843 1.954L2.578 9.686l4.083.783c-1.655 1.075-3.559 2.585-4.654 4.388L.377 17.54l3.429-.83c-1 1.606-2.047 3.706-2.403 5.886l-.56 3.444 2.904-2.416c-.122.886-.21 1.863-.21 2.873 0 1.21.123 2.461.458 3.631l.93 3.255L6.54 30.1c.499 1.723 1.344 3.726 2.791 5.466l2.134 2.565.198-3.848c1.048 1.184 2.51 2.608 4.57 4.17l3.249 2.46-1.38-4.413c1.546.778 3.636 1.578 6.256 2.014l3.91.652-3.08-3.178c1.66.04 3.744-.12 6.055-.772l3.433-.97-3.517-1.595a19.406 19.406 0 005.251-3.326l2.68-2.394-3.778.123c1.178-1.27 2.478-3.003 3.376-5.167l1.407-3.392-3.395 1.832c.493-1.546.928-3.53 1.008-5.859l.134-3.923-2.564 3.197c-.125-1.904-.524-4.184-1.592-6.064l-1.549-2.73-.888 3.192a20.976 20.976 0 00-3.836-4.92zM12.598 20.45c0-4.145 3.372-7.517 7.516-7.517 4.145 0 7.517 3.372 7.517 7.517 0 4.145-3.372 7.517-7.517 7.517-4.144 0-7.516-3.372-7.516-7.517z" clip-rule="evenodd"/>
</symbol>
<symbol id="logo__text" viewBox="0 0 114 30">
<path d="M33.48 8.58c3.48 0 3.48-1.81 3.48-4.05 0-2.24-1.09-4.06-3.48-4.06-2.89 0-3.49 1.82-3.49 4.06 0 2.24.98 4.05 3.49 4.05zM37.1 24.14c-.07-1.17-.14-2.57-.14-4.24 0-6.1 0-8.98-3.54-9.63-3.57 0-3.57 2.37-3.54 8.16v1.47c0 1.5-.03 2.78-.05 3.86-.12 5.1-.14 5.77 3.59 5.77 3.95 0 3.89-1.23 3.67-5.4z"/>
<path fill-rule="evenodd" d="M7.76 3.38S3.9 3.17 1.82 5.45c-1.94 2.12-1.8 5.7-1.8 5.7s-.04 11.7 0 15.29c.05 3.36 2.74 3.09 2.74 3.09s1.15.03 3.62-.08c2.6-.13 2.51-2.17 2.51-2.17v-5.16s-.02-1.18 1.9-1.21c1.66-.03 2.16.75 2.16.75l5.85 6.46s1 1.54 4.53 1.5c3.51-.04 4.12-.08 4.12-.08s2.67-.08.6-2.26c-2.08-2.19-5.2-5.62-5.2-5.62s-2.33-2.2.76-3.94c3.57-2.02 4.15-4.12 4.15-4.12S29.3 8.54 25.7 5.9c-3.5-2.54-6.57-2.53-7.64-2.53H7.76zm6.9 12.31c-3.18 1.49-6.47 1.18-7.36-.68-.88-1.87.97-4.58 4.15-6.07 3.18-1.49 6.47-1.18 7.35.68.89 1.87-.97 4.59-4.15 6.07z" clip-rule="evenodd"/>
<path d="M53.19 25.9h5.87s3-.2 3.03 1.74c.02 1.94-2.89 1.91-2.89 1.91l-18.78.02c-.3 0-3.83-.86-.38-4.3 1.36-1.35 10.41-10.46 10.41-10.46s.95-.75.48-1.37c-.31-.42-1.42-.35-1.42-.35h-4.4s-2.22.06-2.17-1.75c.04-2.01 2.26-1.9 2.26-1.9h15.98s1.7-.1 2.1.8c.35.77.02 1.36-.2 1.77l-.05.08c-.22.4-1.35 1.62-1.35 1.62l-9.1 9.58s-1.17 1.13-1.07 1.8c.1.81 1.68.8 1.68.8z"/>
<path fill-rule="evenodd" d="M74.87 9.03c-8.04-.1-14.31 3.93-14.37 10.37-.07 6.5 6.33 10.37 14.37 10.37s14.68-3.31 14.56-10.37c-.1-5.73-4.22-10.25-14.56-10.37zm8.28 6.88c1.19 2.56-1.37 6.26-5.73 8.26-4.35 2-8.84 1.54-10.03-1.01-1.2-2.56 1.37-6.25 5.72-8.25s8.85-1.55 10.04 1z" clip-rule="evenodd"/>
<path d="M99.77 17.41v7.81s.34 4.12-2.9 4.16c-3.35.03-3.39.03-3.76.02h-.08c-.52-.02-2.91-.08-2.88-4.18 0-1.68.02-2.98.04-4.1.02-2.16.04-3.72.02-6.27-.03-3.17 1.98-3.77 2.8-4.01a33.27 33.27 0 018.64-1.42 55.8 55.8 0 0110.05.69s2.16.21 2.1 2c-.07 1.77-1.76 1.68-2.55 1.6-.11 0-.33-.03-.62-.08-1.87-.28-6.97-1.03-8.97.29-2.02 1.32-1.9 3.5-1.9 3.5z"/>
</symbol>
<symbol id="icon-down" viewBox="0 0 9 96">
<path fill-rule="evenodd" d="M3.86 86.5V.9h1v85.6h3.39l-3.89 9-3.89-9h3.39z" clip-rule="evenodd"/>
</symbol>
<symbol id="icon-play" viewBox="0 0 66 72">
<path d="M60.48 27.23a10 10 0 010 17.32L15.95 70.26a10 10 0 01-15-8.66V10.18a10 10 0 0115-8.66l44.53 25.71z"/>
</symbol>
</defs>
</svg>
<header class="page-header">
<nav class="main-nav container"><a class="logo main-nav__logo" href="#intro">Логотип Rizor, наверх
<!-- 2 separate svg for easy animation-->
<svg class="logo__img" role="img" focusable="false" width="40" height="40">
<use xlink:href="#logo__gear"></use>
</svg>
<svg class="logo__text" role="img" focusable="false" width="114" height="29">
<use xlink:href="#logo__text"></use>
</svg></a>
<button class="main-nav__toggle">
<svg class="hamburger" viewBox="0 0 100 100" width="20" height="20">
<rect class="hamburger__top" x="0" y="0" width="100%" height="20%" rx="5%"></rect>
<rect class="hamburger__middle" x="0" y="40%" width="100%" height="20%" rx="5%"></rect>
<rect class="hamburger__bottom" x="0" y="80%" width="100%" height="20%" rx="5%"></rect>
</svg>
</button>
<ul class="main-nav__list">
<li class="main-nav__item"><a class="main-nav__link" href="#features">Преимущества</a></li>
<li class="main-nav__item"><a class="main-nav__link" href="#specs">Характеристики</a></li>
<li class="main-nav__item"><a class="main-nav__link" href="#for-whom">Для кого</a></li>
</ul>
</nav>
</header>
<main class="page-main">
<section class="intro" id="intro">
<figure class="intro__wrapper container">
<svg class="intro__decorative decorative" role="img" focusable="false" width="0" height="0">
<use xlink:href="#logo__gear"></use>
</svg>
<div class="video intro__media" data-id="678suPK9iIc"><a class="video__link" href="https://youtu.be/678suPK9iIc"><img class="intro__preview video__preview" src="img/photo1.jpg" alt="Представляем Rizor Hovertrax 4.0" height="200"/></a>
<button class="intro__play video__play"><span class="video__play-text">Смотреть <br> видео</span>
<svg class="video__play-icon" role="img" focusable="false" width="66" height="72">
<use xlink:href="#icon-play"></use>
</svg>
</button>
</div>
<figcaption class="intro__text">
<h1 class="intro__title pointer-anchor headline">Rizor<br>
<svg class="intro__pointer pointer" width="20" height="72" role="img" focusable="false" fill="none">
<polyline class="pointer__line" points="0,71 17,71 17,3" stroke-width="1"></polyline>
<circle class="pointer__point" cx="17" cy="3" r="1.5"></circle>
</svg>Hovertrax<br><b class="product__ver">4.0</b>
</h1>
<p class="intro__subtitle subheadline">Маневренность, легкость, экологичность</p><a class="intro__scroll-down" href="#features">Листать вниз
<svg class="intro__scroll-down-arrow" role="img" focusable="false" width="12" height="96">
<use xlink:href="#icon-down"></use>
</svg></a>
</figcaption>
</figure>
</section>
<section class="features" id="features">
<figure class="features__wrapper container">
<p class="features__decorative decorative headline"><span class="product__ver">4.0</span><br>Rizor</p>
<div class="video features__media" data-id="678suPK9iIc"><a class="video__link" href="https://youtu.be/678suPK9iIc"><img class="features__preview video__preview" src="img/photo2.jpg" alt="Представляем Rizor Hovertrax 4.0" height="200"/></a>
<button class="video__play video__play--simple"><span class="visually-hidden">Смотреть видео</span>
<svg class="video__play-icon video__play-icon--simple" role="img" focusable="false" width="40" height="44">
<use xlink:href="#icon-play"></use>
</svg>
</button>
</div>
<figcaption class="features__text">
<h2 class="features__headline section-name">Преимущества</h2>
<ul class="features__specs">
<li class="features__specs-item features__specs-item--design">
<article class="product-info product-info--design">
<h3 class="product-info__title">Дизайн</h3>
<p class="product-info__subtitle">Внешний вид скутера дышит идеями футуризма:</p>
<ul class="product-info__list">
<li class="product-info__spec">плавные линии</li>
<li class="product-info__spec">подсветка светодиодными индикаторами</li>
<li class="product-info__spec">рельефные бамперы, оснащенные защитными панелями</li>
</ul>
</article>
</li>
<li class="features__specs-item features__specs-item--color">
<article class="product-info product-info--color slider">
<form class="color-choose">
<h3 class="product-info__title pointer-anchor">Цвет
<svg class="features__pointer pointer" width="18" height="290" role="img" focusable="false" fill="none">
<polyline class="pointer__line" points="18,1 2,1 2,288" stroke-width="1"></polyline>
<circle class="pointer__point" cx="2" cy="288" r="1.5"></circle>
</svg>
</h3>
<p class="product-info__subtitle">Модель представлена сразу <br> в нескольких цветах.</p>
<ul class="color-choose__list slider__toggles">
<li class="color">
<input class="color__val visually-hidden slider__toggle" id="color--lime" type="radio" name="color" value="lime" checked="checked"/>
<label class="color__label color__label--lime pointer-anchor" for="color--lime">лаймовый
<svg class="color__icon" fill="#e2e837" width="22" height="22">
<circle cx="11" cy="11" r="10"></circle>
</svg>
<svg class="color__pointer pointer" width="5" height="48" role="img" focusable="false" fill="none">
<polyline class="pointer__line" points="3,1 3,46" stroke-width="1"></polyline>
<circle class="pointer__point" cx="3" cy="46" r="1.5"></circle>
</svg>
</label>
</li>
<li class="color">
<input class="color__val visually-hidden slider__toggle" id="color--cyan" type="radio" name="color" value="cyan"/>
<label class="color__label color__label--lime pointer-anchor" for="color--cyan">циановый
<svg class="color__icon" fill="#00b6f1" width="22" height="22">
<circle cx="11" cy="11" r="10"></circle>
</svg>
<svg class="color__pointer pointer" width="5" height="48" role="img" focusable="false" fill="none">
<polyline class="pointer__line" points="3,1 3,46" stroke-width="1"></polyline>
<circle class="pointer__point" cx="3" cy="46" r="1.5"></circle>
</svg>
</label>
</li>
<li class="color">
<input class="color__val visually-hidden slider__toggle" id="color--red" type="radio" name="color" value="red"/>
<label class="color__label color__label--lime pointer-anchor" for="color--red">красный
<svg class="color__icon" fill="#e23232" width="22" height="22">
<circle cx="11" cy="11" r="10"></circle>
</svg>
<svg class="color__pointer pointer" width="5" height="48" role="img" focusable="false" fill="none">
<polyline class="pointer__line" points="3,1 3,46" stroke-width="1"></polyline>
<circle class="pointer__point" cx="3" cy="46" r="1.5"></circle>
</svg>
</label>
</li>
<li class="color">
<input class="color__val visually-hidden slider__toggle" id="color--white" type="radio" name="color" value="white"/>
<label class="color__label color__label--lime pointer-anchor" for="color--white">белый
<svg class="color__icon" fill="#f0efef" width="22" height="22">
<circle cx="11" cy="11" r="10"></circle>
</svg>
<svg class="color__pointer pointer" width="5" height="48" role="img" focusable="false" fill="none">
<polyline class="pointer__line" points="3,1 3,46" stroke-width="1"></polyline>
<circle class="pointer__point" cx="3" cy="46" r="1.5"></circle>
</svg>
</label>
</li>
<li class="color">
<input class="color__val visually-hidden slider__toggle" id="color--black" type="radio" name="color" value="black"/>
<label class="color__label color__label--lime pointer-anchor" for="color--black">черный
<svg class="color__icon" fill="#0c0c0c" width="22" height="22">
<circle cx="11" cy="11" r="10"></circle>
</svg>
<svg class="color__pointer pointer" width="5" height="48" role="img" focusable="false" fill="none">
<polyline class="pointer__line" points="3,1 3,46" stroke-width="1"></polyline>
<circle class="pointer__point" cx="3" cy="46" r="1.5"></circle>
</svg>
</label>
</li>
</ul>
</form>
<div class="product-info__background"></div>
<ul class="slider__list product-info__previews">
<li class="slide preview">
<picture>
<source type="image/webp" srcset="img/preview/lime@3.webp 3x, img/preview/lime@2.webp 2x,
img/preview/lime.webp 1x"/><img class="preview__image" src="img/preview/lime.png" srcset="img/preview/lime@3.png 3x, img/preview/lime@2.png 2x" alt="лаймовый" width="325" height="167"/>
</picture>
</li>
<li class="slide preview">
<picture>
<source type="image/webp" srcset="img/preview/cyan@3.webp 3x, img/preview/cyan@2.webp 2x,
img/preview/cyan.webp 1x"/><img class="preview__image" src="img/preview/cyan.png" srcset="img/preview/cyan@3.png 3x, img/preview/cyan@2.png 2x" alt="циановый" width="325" height="167"/>
</picture>
</li>
<li class="slide preview">
<picture>
<source type="image/webp" srcset="img/preview/red@3.webp 3x, img/preview/red@2.webp 2x,
img/preview/red.webp 1x"/><img class="preview__image" src="img/preview/red.png" srcset="img/preview/red@3.png 3x, img/preview/red@2.png 2x" alt="красный" width="325" height="167"/>
</picture>
</li>
<li class="slide preview">
<picture>
<source type="image/webp" srcset="img/preview/white@3.webp 3x, img/preview/white@2.webp 2x,
img/preview/white.webp 1x"/><img class="preview__image" src="img/preview/white.png" srcset="img/preview/white@3.png 3x, img/preview/white@2.png 2x" alt="белый" width="325" height="167"/>
</picture>
</li>
<li class="slide preview">
<picture>
<source type="image/webp" srcset="img/preview/black@3.webp 3x, img/preview/black@2.webp 2x,
img/preview/black.webp 1x"/><img class="preview__image" src="img/preview/black.png" srcset="img/preview/black@3.png 3x, img/preview/black@2.png 2x" alt="черный" width="325" height="167"/>
</picture>
</li>
</ul>
</article>
</li>
</ul>
</figcaption>
</figure>
</section>
<section class="specs" id="specs">
<figure class="specs__wrapper container">
<svg class="specs__decorative decorative" role="img" focusable="false" width="0" height="0">
<use xlink:href="#logo__gear"></use>
</svg>
<div class="video specs__media" data-id="Ryaj7_Vm16E"><a class="video__link" href="https://youtu.be/Ryaj7_Vm16E"><img class="specs__preview video__preview" src="img/specs.jpg" alt="Представляем Rizor Hovertrax 4.0" height="200"/></a>
<button class="specs__play video__play"><span class="video__play-text">Смотреть <br> видео</span>
<svg class="video__play-icon" role="img" focusable="false" width="66" height="72">
<use xlink:href="#icon-play"></use>
</svg>
</button>
</div>
<figcaption class="specs__text">
<h2 class="specs__headline section-name visually-hidden">Характеристики</h2>
<article class="product-info product-info--modes">
<h3 class="product-info__title pointer-anchor">Режимы
<svg class="specs__pointer pointer" width="158" height="474" role="img" focusable="false" fill="none">
<polyline class="pointer__line" points="0,1 156,1 156,472" stroke-width="1"></polyline>
<circle class="pointer__point" cx="156" cy="472" r="1.5"></circle>
</svg>
</h3>
<p class="product-info__subtitle product-info__subtitle--modes">Помимо «умной» подсветки, <b class="strong">Hovertrax 4.0 <br></b>снабжён двумя скоростными режимами.</p>
<ul class="product-info__list product-info__list--modes">
<li class="product-info__spec product-info__spec--modes">Один для продвинутых пользователей</li>
<li class="product-info__spec product-info__spec--modes">Второй для новичков</li>
</ul>
<table class="table product-info__table">
<thead class="table__head">
<tr>
<th class="table__headline">Максимальная <br> скорость</th>
<th class="table__headline">Скоростных <br> режима</th>
</tr>
</thead>
<tbody class="table__body">
<tr>
<td class="table__value">13<i class="table__units">км/ч</i></td>
<td class="table__value">2</td>
</tr>
</tbody>
</table>
</article>
</figcaption>
</figure>
</section>
<section class="for-whom" id="for-whom">
<div class="for-whom__wrapper">
<figure class="for-whom__content container">
<svg class="for-whom__decorative decorative" role="img" focusable="false" width="0" height="0">
<use xlink:href="#logo__gear"></use>
</svg>
<div class="for-whom__media">
<p class="for-whom__media-decorative decorative headline"><span class="product__ver">4.0</span><br>Rizor</p><img class="for-whom__image" src="img/photo3.jpg" alt="Целевая аудитория" width="590" height="376"/>
</div>
<figcaption class="for-whom__text">
<h2 class="for-whom__title section-name">Для кого</h2>
<p class="for-whom__message">При максимально выдерживаемой нагрузке в <b class="strong">100 кг </b>отлично подойдёт, <br> как для подрастающего поколения, <br> так и для более взрослых «наездников».</p>
<p>Это единственный гироскутер со специальным детским режимом <br> езды.</p><a class="for-whom__button button button--invert" href="/catalogue">Перейти в каталог</a>
</figcaption>
</figure>
</div>
</section>
</main>
<aside class="side-nav">
<ul class="side-nav__list">
<li class="side-nav__item"><a class="side-nav__link" href="#intro"></a></li>
<li class="side-nav__item"><a class="side-nav__link" href="#features">Преимущества</a></li>
<li class="side-nav__item"><a class="side-nav__link" href="#specs">Характеристики</a></li>
<li class="side-nav__item"><a class="side-nav__link" href="#for-whom">Для кого</a></li>
</ul>
</aside>
<footer class="page-footer">
<p class="page-footer__copyright" lang="en">© All rights reserved, 2017</p>
</footer>
<script src="js/navigation.js"></script>
<script src="js/video.js"></script>
<script src="js/slider.js"></script>
</body>
</html>