-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
333 lines (325 loc) · 21.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
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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Xiaomi Himo C26</title>
<link rel="stylesheet" href="css/normalize.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=Inter:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="container">
<div class="header__inner">
<a class="logo" href="#">
<img class="logo__img" src="images/logo.jpg" alt="logo">
</a>
<nav class="menu">
<ul class="menu__list">
<li class="menu__item">
<a class="menu__link" href="#info">Описание</a>
</li>
<li class="menu__item">
<a class="menu__link" href="#characteristics">Характеристики</a>
</li>
<li class="menu__item">
<a class="menu__link" href="#price">Стоимость</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<section class="bike">
<div class="container">
<div class="bike__inner">
<div class="bike__column">
<h1 class="bike__title">Xiaomi Himo C26</h1>
<h3 class="bike__subtitle">Электрический велосипед</h3>
<p class="bike__text">
Полная свобода передвижения и надежный транспорт для путешествий на любые расстояния.
</p>
<p class="bike__text">
HIMO C26 – это новый электровелосипед от Xiaomi, который создан как для езды по городу, так и бездорожью.
Он имеет мощный двигатель и емкий аккумулятор, благодаря которым способен проезжать на одном заряде до 100 км,
что определенно выше, чем у большинства конкурентов. А большие колеса с пневматическими шинами, дисковые тормоза,
7-скоростная трансмиссия и эргономичное сидение делают каждую поездку гораздо приятнее.
</p>
<a class="bike__link" href="#price">ЗАКАЗАТЬ</a>
</div>
<div class="bike__column bike__column-slider">
<div class="bike-slider">
<img class="bike-slider__item" src="images/bike-1.jpg" alt="#">
<img class="bike-slider__item" src="images/bike-2.jpg" alt="#">
<img class="bike-slider__item" src="images/bike-3.jpg" alt="#">
<img class="bike-slider__item" src="images/bike-4.jpg" alt="#">
</div>
<ul class="bike__list">
<li class="bike__list-item">
<span class="bike__list-num">до 100 км</span>
<span class="bike__list-text">Запас хода</span>
</li>
<li class="bike__list-item">
<span class="bike__list-num">25 км/ч</span>
<span class="bike__list-text">Макс скорость</span>
</li>
<li class="bike__list-item">
<span class="bike__list-num">3 режима езды</span>
<span class="bike__list-text">механический, гибридный, электрический</span>
</li>
<li class="bike__list-item">
<span class="bike__list-num">25 кг</span>
<span class="bike__list-text">вес</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="info" id="info">
<div class="container">
<div class="info__inner">
<img class="info__img" src="images/info-img.jpg" alt="Girl on bike">
<div class="info__list">
<div class="info__item">
<h4 class="info__item-title">Комфорт и безопасность от HIMO</h4>
<p class="info__item-text">
Электровелосипед HIMO C26 позволит вам быстро и с комфортом добраться до места работы или учебы и не привязываться
к городскому транспорту. Велосипед обладает прочной конструкцией и внушительным запасом хода, чтобы стать надежным
транспортным средством в современных городских условиях. Легкая и прочная рама, 26-дюймовые колеса и 7-ступенчатая
система трансмиссии позволяют уверенно передвигаться не только по асфальтированному дорожному полотну, но и по сложной
загородной трассе.
</p>
</div>
<div class="info__item">
<h4 class="info__item-title">Прочная и легкая рама</h4>
<p class="info__item-text">
Рама HIMO C26 изготовлена из прочного и легкого алюминиевого сплава и отличается высокой надежностью, устойчивостью в
аварийных ситуациях, превосходной управляемостью и комфортным передвижением по любой дороге.
</p>
</div>
<div class="info__item">
<h4 class="info__item-title">Комбинация режимов для увеличения запаса хода</h4>
<p class="info__item-text">
Электровелосипед HIMO C26 обладает увеличенным запасом хода. Его аккумулятор емкостью 10000 мАч с интеллектуальной системой
оптимизации энергопотребления позволяет проехать до 60 км на одном заряде в режиме электропривода. При использовании на
некоторых участках пути физической силы дальность хода увеличивается до 100 км. Максимальная скорость передвижения HIMO C26
составляет 25 км/ч.
</p>
</div>
<div class="info__item">
<h4 class="info__item-title">Надежная трансмиссия</h4>
<p class="info__item-text">
7-ступенчатая система трансмиссии обеспечивает плавное и точное переключение передач, удобное управление скоростью и надежность
в работе. Переключая передачи, вы сможете с минимальными усилиями заехать на горку и безопасно скатиться вниз.
</p>
</div>
<div class="info__item">
<h4 class="info__item-title">Вся информация на ЖК-дисплее</h4>
<p class="info__item-text">Вся информация на ЖК-дисплее <br>
Большой информативный дисплей, вынесенный на рулевую стойку, отображает всю важную информацию о работе HIMO C26
в реальном времени. Вы сможете узнать актуальную скорость передвижения, уровень заряда или пройденный путь.
Дисплей защищен от воздействия внешних факторов по стандарту IPX7 и не боится дождя и пыли.
</p>
</div>
<div class="info__item">
<h4 class="info__item-title">Удобное седло</h4>
<p class="info__item-text">
Электровелосипед HIMO C26 укомплектован велосипедным седлом от известного бренда Selle Royal.
Трехмерная гелевая структура седла обеспечивает оптимальную упругость и высокий комфорт во время езды.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="characteristics" id="characteristics">
<div class="container">
<h4 class="characteristics__title">Характеристики</h4>
<div class="characteristics__inner">
<div class="characteristics__items">
<ul class="characteristics__list">
<li class="characteristics__title-item">Общие</li>
<li class="characteristics__line">
<p class="characteristics__name">Производитель</p>
<p class="characteristics__descr">Xiaomi</p>
</li>
<li class="characteristics__line">
<p class="characteristics__name">Вид</p>
<p class="characteristics__descr">взрослый, дорожный, городской, электровелосипед, алюминиевая рама</p>
</li>
<li class="characteristics__line">
<p class="characteristics__name">Колеса</p>
<p class="characteristics__descr">26, двойной алюминиевый обод</p>
</li>
<li class="characteristics__line">
<p class="characteristics__name">Электропривод</p>
<p class="characteristics__descr">мотор 250W, разгон до 25 км/ч</p>
</li>
</ul>
<ul class="characteristics__list">
<li class="characteristics__title-item">Амортизация</li>
<li class="characteristics__line">
<p class="characteristics__name">Тип амортизации</p>
<p class="characteristics__descr">амортизирующая вилка (Hard tail)</p>
</li>
<li class="characteristics__line">
<p class="characteristics__name">Вилка</p>
<p class="characteristics__descr">пружинно-эластомерная</p>
</li>
</ul>
<ul class="characteristics__list">
<li class="characteristics__title-item">Управление</li>
<li class="characteristics__line">
<p class="characteristics__name">Руль</p>
<p class="characteristics__descr">изогнутый, регулируемый подъем</p>
</li>
<li class="characteristics__line">
<p class="characteristics__name">Манетки</p>
<p class="characteristics__descr">триггерные однорычажные, Shimano</p>
</li>
</ul>
<ul class="characteristics__list">
<li class="characteristics__title-item">Характеристика трансмиссии</li>
<li class="characteristics__line">
<p class="characteristics__name">Количество скоростей</p>
<p class="characteristics__descr">7</p>
</li>
<li class="characteristics__line">
<p class="characteristics__name">Педали</p>
<p class="characteristics__descr">классические</p>
</li>
<li class="characteristics__line">
<p class="characteristics__name">Передний переключатель</p>
<p class="characteristics__descr">1 звезда</p>
</li>
<li class="characteristics__line">
<p class="characteristics__name">Задний переключатель</p>
<p class="characteristics__descr">Shimano Tourney (прогулочный)</p>
</li>
<li class="characteristics__line">
<p class="characteristics__name">Кассета</p>
<p class="characteristics__descr">7 звезд</p>
</li>
</ul>
<ul class="characteristics__list">
<li class="characteristics__title-item">Тормоза</li>
<li class="characteristics__line">
<p class="characteristics__name">Передний</p>
<p class="characteristics__descr">дисковый механический</p>
</li>
<li class="characteristics__line">
<p class="characteristics__name">Задний</p>
<p class="characteristics__descr">дисковый механический</p>
</li>
<li class="characteristics__line">
<p class="characteristics__name">Готовность к установке дисковых</p>
<p class="characteristics__descr">рама, вилка, втулка</p>
</li>
</ul>
<ul class="characteristics__list">
<li class="characteristics__title-item">Прочее</li>
<li class="characteristics__line">
<p class="characteristics__name">Оснащение</p>
<p class="characteristics__descr">электрооборудование, звонок</p>
</li>
<li class="characteristics__line">
<p class="characteristics__name">Вес</p>
<p class="characteristics__descr">25 кг</p>
</li>
</ul>
</div>
<img class="characteristics__img" src="images/characteristics-img.jpg" alt="#">
</div>
</div>
</section>
<div class="slider">
<div class="container">
<div class="slider__items">
<div class="slider__item">
<img class="slider__img" src="images/slider-img1.jpg" alt="#">
</div>
<div class="slider__item">
<img class="slider__img" src="images/slider-img2.jpg" alt="#">
</div>
<div class="slider__item">
<img class="slider__img" src="images/slider-img3.jpg" alt="#">
</div>
</div>
</div>
</div>
<section class="price" id="price">
<div class="container">
<div class="price__inner">
<form class="form" action="">
<h4 class="form__title">Заказать</h4>
<p class="form__text">
Если Вы хотите заказать велосипед, оставьте свой контакт и наш менеджер перезвонит вам
в ближайшее время
</p>
<input class="form__input-name" type="text" placeholder="имя">
<input class="form__input-phone" type="tel" placeholder="телефон">
<p class="form__input-text">выберите желаемый цвет</p>
<div class="form__label-box">
<label class="form__label">
<input class="form__input-radio" type="radio" name="radio">
<div class="form__bike">
<img class="form__bike-img" src="images/bike-grey.jpg" alt="#">
<p class="form__bike-price"><span>31999 грн.</span></p>
</div>
<div class="form__radio-style form__radio-style--grey"></div>
</label>
<label class="form__label">
<input class="form__input-radio" type="radio" name="radio" checked>
<div class="form__bike">
<img class="form__bike-img" src="images/bike-white.jpg" alt="#">
<p class="form__bike-price"><span>32999 грн.</span></p>
</div>
<div class="form__radio-style form__radio-style--white"></div>
</label>
<label class="form__label">
<input class="form__input-radio" type="radio" name="radio">
<div class="form__bike">
<img class="form__bike-img" src="images/bike-red.jpg" alt="#">
<p class="form__bike-price"><span>33999 грн.</span></p>
</div>
<div class="form__radio-style form__radio-style--red"></div>
</label>
</div>
</form>
<button class="form__btn" type="submit">ЗАКАЗАТЬ</button>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer__inner">
<a class="footer__link" href="#">Политика конфиденциальности</a>
<div class="footer__social">
<a class="footer__social-link" href="#">
<img class="footer__social-img" src="images/instagram.svg" alt="#">
</a>
<a class="footer__social-link" href="#">
<img class="footer__social-img" src="images/facebook.svg" alt="#">
</a>
</div>
<div class="footer__contacts">
<a class="footer__contacts-link" href="tel:+380506777777">
<img class="footer__contacts-img" src="images/tel.svg" alt="#">
<span>+38 050 677 7777</span></a>
<a class="footer__contacts-link" href="mailto:[email protected]">
<img class="footer__contacts-img" src="images/email.svg" alt="#">
<span>[email protected]</span></a>
</div>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>