-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
229 lines (214 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
<!DOCTYPE html>
<html lang="ru" class="html">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="distribution" content="global">
<meta name="description"
content="Сайт рассказывает о разнообразии маршрутов для велотренировок, различных типах велосипедов, полезных сервисах и приложениях для построения тренировочного плана.">
<meta name="keywords" content="велотренировки, велосипеды, спорт, здоровый образ жизни">
<meta name="author" content="Софья Пешехонова, Борис Зашляпин">
<title>Велотренировки</title>
<link rel="apple-touch-icon" sizes="180x180" href="./images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png">
<link rel="mask-icon" href="./images/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="./vendor/splidejs/dist/css/splide.min.css">
<link rel="stylesheet" href="./pages/index.css">
</head>
<body class="page">
<header class="header">
<nav class="header__menu">
<ul class="header__items">
<li class="header__item"><a href="#roadway" class="header__link link">Покрытия и градиенты</a></li>
<li class="header__item"><a href="#bike" class="header__link link">Велосипеды</a></li>
<li class="header__item"><a href="#training" class="header__link link">Тренировки</a></li>
<div class="header__switcher-color-theme switcher-color-theme">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14 0C14.3713 0 14.7274 0.147499 14.99 0.41005C15.2525 0.672601 15.4 1.0287 15.4 1.4V2.8C15.4 3.1713 15.2525 3.5274 14.99 3.78995C14.7274 4.0525 14.3713 4.2 14 4.2C13.6287 4.2 13.2726 4.0525 13.0101 3.78995C12.7475 3.5274 12.6 3.1713 12.6 2.8V1.4C12.6 1.21615 12.6362 1.0341 12.7066 0.864243C12.7769 0.694387 12.88 0.540052 13.0101 0.41005C13.1401 0.280048 13.2944 0.176925 13.4642 0.106569C13.6341 0.036212 13.8161 0 14 0ZM4.1 4.1C4.23 3.96998 4.38435 3.86685 4.55421 3.79648C4.72408 3.72612 4.90614 3.6899 5.09 3.6899C5.27386 3.6899 5.45592 3.72612 5.62579 3.79648C5.79565 3.86685 5.95 3.96998 6.08 4.1L7.07 5.09C7.20001 5.22001 7.30314 5.37435 7.3735 5.54422C7.44386 5.71408 7.48007 5.89614 7.48007 6.08C7.48007 6.26386 7.44386 6.44592 7.3735 6.61578C7.30314 6.78565 7.20001 6.93999 7.07 7.07C6.93999 7.20001 6.78565 7.30314 6.61578 7.3735C6.44592 7.44386 6.26386 7.48007 6.08 7.48007C5.89614 7.48007 5.71408 7.44386 5.54422 7.3735C5.37435 7.30314 5.22001 7.20001 5.09 7.07L4.1 6.08C3.96998 5.95 3.86685 5.79565 3.79648 5.62579C3.72612 5.45592 3.6899 5.27386 3.6899 5.09C3.6899 4.90614 3.72612 4.72408 3.79648 4.55421C3.86685 4.38435 3.96998 4.23 4.1 4.1ZM23.9 4.1C24.03 4.23 24.1332 4.38435 24.2035 4.55421C24.2739 4.72408 24.3101 4.90614 24.3101 5.09C24.3101 5.27386 24.2739 5.45592 24.2035 5.62579C24.1332 5.79565 24.03 5.95 23.9 6.08L22.91 7.07C22.6474 7.33256 22.2913 7.48007 21.92 7.48007C21.5487 7.48007 21.1926 7.33256 20.93 7.07C20.6674 6.80744 20.5199 6.45132 20.5199 6.08C20.5199 5.70868 20.6674 5.35256 20.93 5.09L21.92 4.1C22.05 3.96998 22.2043 3.86685 22.3742 3.79648C22.5441 3.72612 22.7261 3.6899 22.91 3.6899C23.0939 3.6899 23.2759 3.72612 23.4458 3.79648C23.6157 3.86685 23.77 3.96998 23.9 4.1ZM7 14C7 12.1435 7.7375 10.363 9.05025 9.05025C10.363 7.7375 12.1435 7 14 7C15.8565 7 17.637 7.7375 18.9497 9.05025C20.2625 10.363 21 12.1435 21 14C21 15.8565 20.2625 17.637 18.9497 18.9497C17.637 20.2625 15.8565 21 14 21C12.1435 21 10.363 20.2625 9.05025 18.9497C7.7375 17.637 7 15.8565 7 14ZM0 14C0 13.6287 0.147499 13.2726 0.41005 13.0101C0.672601 12.7475 1.0287 12.6 1.4 12.6H2.8C2.98385 12.6 3.1659 12.6362 3.33576 12.7066C3.50561 12.7769 3.65995 12.88 3.78995 13.0101C3.91995 13.1401 4.02308 13.2944 4.09343 13.4642C4.16379 13.6341 4.2 13.8161 4.2 14C4.2 14.1839 4.16379 14.3659 4.09343 14.5358C4.02308 14.7056 3.91995 14.8599 3.78995 14.99C3.65995 15.12 3.50561 15.2231 3.33576 15.2934C3.1659 15.3638 2.98385 15.4 2.8 15.4H1.4C1.0287 15.4 0.672601 15.2525 0.41005 14.99C0.147499 14.7274 0 14.3713 0 14ZM23.8 14C23.8 13.6287 23.9475 13.2726 24.2101 13.0101C24.4726 12.7475 24.8287 12.6 25.2 12.6H26.6C26.7839 12.6 26.9659 12.6362 27.1358 12.7066C27.3056 12.7769 27.4599 12.88 27.5899 13.0101C27.72 13.1401 27.8231 13.2944 27.8934 13.4642C27.9638 13.6341 28 13.8161 28 14C28 14.1839 27.9638 14.3659 27.8934 14.5358C27.8231 14.7056 27.72 14.8599 27.5899 14.99C27.4599 15.12 27.3056 15.2231 27.1358 15.2934C26.9659 15.3638 26.7839 15.4 26.6 15.4H25.2C24.8287 15.4 24.4726 15.2525 24.2101 14.99C23.9475 14.7274 23.8 14.3713 23.8 14ZM20.93 20.93C21.06 20.8 21.2143 20.6968 21.3842 20.6265C21.5541 20.5561 21.7361 20.5199 21.92 20.5199C22.1039 20.5199 22.2859 20.5561 22.4558 20.6265C22.6257 20.6968 22.78 20.8 22.91 20.93L23.9 21.92C24.03 22.05 24.1331 22.2044 24.2035 22.3742C24.2739 22.5441 24.3101 22.7261 24.3101 22.91C24.3101 23.0939 24.2739 23.2759 24.2035 23.4458C24.1331 23.6156 24.03 23.77 23.9 23.9C23.77 24.03 23.6156 24.1331 23.4458 24.2035C23.2759 24.2739 23.0939 24.3101 22.91 24.3101C22.7261 24.3101 22.5441 24.2739 22.3742 24.2035C22.2044 24.1331 22.05 24.03 21.92 23.9L20.93 22.91C20.8 22.78 20.6968 22.6257 20.6265 22.4558C20.5561 22.2859 20.5199 22.1039 20.5199 21.92C20.5199 21.7361 20.5561 21.5541 20.6265 21.3842C20.6968 21.2143 20.8 21.06 20.93 20.93ZM5.09 20.93C5.35256 20.6674 5.70868 20.5199 6.08 20.5199C6.45132 20.5199 6.80744 20.6674 7.07 20.93C7.33256 21.1926 7.48007 21.5487 7.48007 21.92C7.48007 22.2913 7.33256 22.6474 7.07 22.91L6.08 23.9C5.94999 24.03 5.79565 24.1331 5.62578 24.2035C5.45592 24.2739 5.27386 24.3101 5.09 24.3101C4.90614 24.3101 4.72408 24.2739 4.55422 24.2035C4.38435 24.1331 4.23001 24.03 4.1 23.9C3.96999 23.77 3.86686 23.6156 3.7965 23.4458C3.72614 23.2759 3.68993 23.0939 3.68993 22.91C3.68993 22.7261 3.72614 22.5441 3.7965 22.3742C3.86686 22.2044 3.96999 22.05 4.1 21.92L5.09 20.93ZM14 23.8C14.3713 23.8 14.7274 23.9475 14.99 24.2101C15.2525 24.4726 15.4 24.8287 15.4 25.2V26.6C15.4 26.9713 15.2525 27.3274 14.99 27.5899C14.7274 27.8525 14.3713 28 14 28C13.6287 28 13.2726 27.8525 13.0101 27.5899C12.7475 27.3274 12.6 26.9713 12.6 26.6V25.2C12.6 24.8287 12.7475 24.4726 13.0101 24.2101C13.2726 23.9475 13.6287 23.8 14 23.8Z"
class="switcher-color-theme__icon" />
</svg>
<div class="switcher-color-theme__btn-container">
<button type="button" aria-label="Светлая/темная тема сайта"
class="switcher-color-theme__btn"></button>
</div>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"
class="switcher-color-theme__icon">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.353 0.938854C7.49145 1.07752 7.58611 1.2538 7.62522 1.44581C7.66433 1.63781 7.64618 1.83708 7.573 2.01885C6.98754 3.4739 6.8427 5.06895 7.15649 6.60565C7.47028 8.14236 8.22885 9.55293 9.33789 10.662C10.4469 11.771 11.8575 12.5296 13.3942 12.8434C14.9309 13.1572 16.526 13.0123 17.981 12.4269C18.1628 12.3538 18.362 12.3358 18.5539 12.375C18.7459 12.4142 18.9221 12.5089 19.0606 12.6474C19.1992 12.7859 19.2941 12.962 19.3334 13.1539C19.3728 13.3458 19.3549 13.545 19.282 13.7269C18.5375 15.5794 17.2557 17.1667 15.6016 18.2847C13.9474 19.4026 11.9965 19.9999 10 19.9999C4.477 19.9999 0 15.5229 0 9.99985C0 5.79285 2.598 2.19485 6.273 0.717854C6.45477 0.644679 6.65404 0.626519 6.84605 0.665632C7.03805 0.704744 7.21434 0.799404 7.353 0.937854V0.938854Z" />
</svg>
</div>
</ul>
</nav>
<button class="header__burger">
<span class="header__burger-line"></span>
<span class="header__burger-line"></span>
<span class="header__burger-line"></span>
</button>
</header>
<main class="content">
<section class="intro">
<h1 class="section-title intro__title">Шоссе, ТТ и Грэвел</h1>
<p class="section-paragraph intro__paragraph">
Триатлонные старты, горные серпантины или грейвел заезды
по живописным маршрутам – нужно только определиться с выбором велосипеда и отправиться в путь.
</p>
<button class="intro__button"><span class="intro__button-text">Подробнее</span></button>
<div class="intro__description">
<p class="intro__description-name" lang="en">Cannondale Systemsix</p>
<div class="intro__description-line"></div>
</div>
<div class="intro__pictures">
<a href="https://www.sigmasports.com/item/Cannondale/SystemSix-HiMOD-Ultegra-Di2-Disc-Road-Bike-2021/R82J"
class="intro__bicycle" target="_blank">
<img class="intro__bicycle-picture" src="./images/intro_Cannondale-Systemsix.png" alt="Велосипед">
</a>
<img class="intro__road" src="./images/Intro-MountainRoad.jpg" alt="Велотропа в горах">
</div>
</section>
<section class="ride" aria-label="Секция с цитатой велогонщика Эдди Меркса и фотографией">
<img class="ride__picture" src="./images/long-trip.jpg" alt="Дорога по холмистой местности">
<article class="ride__text" aria-label="Цитата">
<blockquote class="ride__title">«Катайся много или мало, долго или коротко, как хочешь - но катайся»
</blockquote>
<div class="ride__author">
<p class="ride__author-name">Эдди Меркс</p>
<p class="ride__author-vocation">Велогонщик</p>
</div>
</article>
</section>
<section class="splide roads" id="roadway" aria-label="Cлайдер с описанием велотренировок на различных местностях"
role="group">
<h2 class="section-title roads__title">Шоссе</h2>
<p class="section-paragraph roads__paragraph">
На шоссейном велосипеде можно ездить по асфальту на разных градиентах: будь то горы или равнины.
Гонки проходят в командном пелотоне, но тренироваться можно и самостоятельно.
</p>
<div class="splide__track roads__container">
<ul class="splide__list roads__slider"></ul>
</div>
<div>
<div class="splide__arrows">
<button class="splide__arrow splide__arrow--prev roads__slider-arrow roads__slider-arrow-prev"></button>
<button class="splide__arrow splide__arrow--next roads__slider-arrow roads__slider-arrow-next"></button>
</div>
</div>
</section>
<section class="bicycles" id="bike">
<h2 class="section-title bicycles__title">Велосипеды</h2>
<ul class="bicycles__links"></ul>
<form class="bicycles__gallery-dropdown">
<svg viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg" class="bicycles__gallery-dropdown-arrow">
<path d="M1 1L6 5.5L11 0.999999" stroke-width="1.2" />
</svg>
<select id="dropdown">
<option value="highway">Шоссе</option>
<option value="gravel">Грэвел</option>
<option value="timeTrial">ТТ</option>
</select>
</form>
<div class="splide bicycles__gallery bicycles__gallery_is-active" aria-label="Слайдер с карточками велосипедов"
role="group" id="highwayGallery">
<div class="splide__track">
<div class="splide__list"></div>
</div>
<ul class="splide__pagination bicycles__gallery-pagination"></ul>
</div>
<div class="splide bicycles__gallery" aria-label="Слайдер с карточками велосипедов" role="group"
id="gravelGallery">
<div class="splide__track">
<div class="splide__list"></div>
</div>
<ul class="splide__pagination bicycles__gallery-pagination"></ul>
</div>
<div class="splide bicycles__gallery" aria-label="Слайдер с карточками велосипедов" role="group"
id="timeTrialGallery">
<div class="splide__track">
<div class="splide__list"></div>
</div>
<ul class="splide__pagination bicycles__gallery-pagination"></ul>
</div>
</section>
<section class="workout" id="training">
<h2 class="section-title workout__title">Тренировки</h2>
<p class="section-paragraph">
Чтобы найти маршрут для тренировки можно воспользоваться сервисом Komoot,
а записать эти тренировки поможет приложение Strava, а также это приложение позволит построить
тренировочный план.
</p>
<ul class="workout__apps">
<li class="workout__app"><a href="https://www.strava.com" target="_blank" class="workout__links link"
lang="en">Strava</a></li>
<li class="workout__app"><a href="https://www.komoot.com" target="_blank" class="workout__links link"
lang="en">Komoot</a></li>
</ul>
<img class="workout__image" src="./images/workout.jpg" alt="Дорога в лесу">
</section>
</main>
<footer class="footer">
<h2 class="footer__title">Подпишитесь на рассылку —</h2>
<form class="form">
<fieldset class="form__contact-info">
<input type="email" class="form__contact-email" placeholder="Ваш e-mail" minlength="3" required>
</fieldset>
<button type="submit" class="form__submit-btn">ok</button>
<span class="form__submit-msg">Круто!</span>
</form>
<div class="footer__copyright-and-switcher">
<p class="footer__copyright" lang="en">© Road Club 2021</p>
<div class="switcher-color-theme">
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M14 0C14.3713 0 14.7274 0.147499 14.99 0.41005C15.2525 0.672601 15.4 1.0287 15.4 1.4V2.8C15.4 3.1713 15.2525 3.5274 14.99 3.78995C14.7274 4.0525 14.3713 4.2 14 4.2C13.6287 4.2 13.2726 4.0525 13.0101 3.78995C12.7475 3.5274 12.6 3.1713 12.6 2.8V1.4C12.6 1.21615 12.6362 1.0341 12.7066 0.864243C12.7769 0.694387 12.88 0.540052 13.0101 0.41005C13.1401 0.280048 13.2944 0.176925 13.4642 0.106569C13.6341 0.036212 13.8161 0 14 0ZM4.1 4.1C4.23 3.96998 4.38435 3.86685 4.55421 3.79648C4.72408 3.72612 4.90614 3.6899 5.09 3.6899C5.27386 3.6899 5.45592 3.72612 5.62579 3.79648C5.79565 3.86685 5.95 3.96998 6.08 4.1L7.07 5.09C7.20001 5.22001 7.30314 5.37435 7.3735 5.54422C7.44386 5.71408 7.48007 5.89614 7.48007 6.08C7.48007 6.26386 7.44386 6.44592 7.3735 6.61578C7.30314 6.78565 7.20001 6.93999 7.07 7.07C6.93999 7.20001 6.78565 7.30314 6.61578 7.3735C6.44592 7.44386 6.26386 7.48007 6.08 7.48007C5.89614 7.48007 5.71408 7.44386 5.54422 7.3735C5.37435 7.30314 5.22001 7.20001 5.09 7.07L4.1 6.08C3.96998 5.95 3.86685 5.79565 3.79648 5.62579C3.72612 5.45592 3.6899 5.27386 3.6899 5.09C3.6899 4.90614 3.72612 4.72408 3.79648 4.55421C3.86685 4.38435 3.96998 4.23 4.1 4.1ZM23.9 4.1C24.03 4.23 24.1332 4.38435 24.2035 4.55421C24.2739 4.72408 24.3101 4.90614 24.3101 5.09C24.3101 5.27386 24.2739 5.45592 24.2035 5.62579C24.1332 5.79565 24.03 5.95 23.9 6.08L22.91 7.07C22.6474 7.33256 22.2913 7.48007 21.92 7.48007C21.5487 7.48007 21.1926 7.33256 20.93 7.07C20.6674 6.80744 20.5199 6.45132 20.5199 6.08C20.5199 5.70868 20.6674 5.35256 20.93 5.09L21.92 4.1C22.05 3.96998 22.2043 3.86685 22.3742 3.79648C22.5441 3.72612 22.7261 3.6899 22.91 3.6899C23.0939 3.6899 23.2759 3.72612 23.4458 3.79648C23.6157 3.86685 23.77 3.96998 23.9 4.1ZM7 14C7 12.1435 7.7375 10.363 9.05025 9.05025C10.363 7.7375 12.1435 7 14 7C15.8565 7 17.637 7.7375 18.9497 9.05025C20.2625 10.363 21 12.1435 21 14C21 15.8565 20.2625 17.637 18.9497 18.9497C17.637 20.2625 15.8565 21 14 21C12.1435 21 10.363 20.2625 9.05025 18.9497C7.7375 17.637 7 15.8565 7 14ZM0 14C0 13.6287 0.147499 13.2726 0.41005 13.0101C0.672601 12.7475 1.0287 12.6 1.4 12.6H2.8C2.98385 12.6 3.1659 12.6362 3.33576 12.7066C3.50561 12.7769 3.65995 12.88 3.78995 13.0101C3.91995 13.1401 4.02308 13.2944 4.09343 13.4642C4.16379 13.6341 4.2 13.8161 4.2 14C4.2 14.1839 4.16379 14.3659 4.09343 14.5358C4.02308 14.7056 3.91995 14.8599 3.78995 14.99C3.65995 15.12 3.50561 15.2231 3.33576 15.2934C3.1659 15.3638 2.98385 15.4 2.8 15.4H1.4C1.0287 15.4 0.672601 15.2525 0.41005 14.99C0.147499 14.7274 0 14.3713 0 14ZM23.8 14C23.8 13.6287 23.9475 13.2726 24.2101 13.0101C24.4726 12.7475 24.8287 12.6 25.2 12.6H26.6C26.7839 12.6 26.9659 12.6362 27.1358 12.7066C27.3056 12.7769 27.4599 12.88 27.5899 13.0101C27.72 13.1401 27.8231 13.2944 27.8934 13.4642C27.9638 13.6341 28 13.8161 28 14C28 14.1839 27.9638 14.3659 27.8934 14.5358C27.8231 14.7056 27.72 14.8599 27.5899 14.99C27.4599 15.12 27.3056 15.2231 27.1358 15.2934C26.9659 15.3638 26.7839 15.4 26.6 15.4H25.2C24.8287 15.4 24.4726 15.2525 24.2101 14.99C23.9475 14.7274 23.8 14.3713 23.8 14ZM20.93 20.93C21.06 20.8 21.2143 20.6968 21.3842 20.6265C21.5541 20.5561 21.7361 20.5199 21.92 20.5199C22.1039 20.5199 22.2859 20.5561 22.4558 20.6265C22.6257 20.6968 22.78 20.8 22.91 20.93L23.9 21.92C24.03 22.05 24.1331 22.2044 24.2035 22.3742C24.2739 22.5441 24.3101 22.7261 24.3101 22.91C24.3101 23.0939 24.2739 23.2759 24.2035 23.4458C24.1331 23.6156 24.03 23.77 23.9 23.9C23.77 24.03 23.6156 24.1331 23.4458 24.2035C23.2759 24.2739 23.0939 24.3101 22.91 24.3101C22.7261 24.3101 22.5441 24.2739 22.3742 24.2035C22.2044 24.1331 22.05 24.03 21.92 23.9L20.93 22.91C20.8 22.78 20.6968 22.6257 20.6265 22.4558C20.5561 22.2859 20.5199 22.1039 20.5199 21.92C20.5199 21.7361 20.5561 21.5541 20.6265 21.3842C20.6968 21.2143 20.8 21.06 20.93 20.93ZM5.09 20.93C5.35256 20.6674 5.70868 20.5199 6.08 20.5199C6.45132 20.5199 6.80744 20.6674 7.07 20.93C7.33256 21.1926 7.48007 21.5487 7.48007 21.92C7.48007 22.2913 7.33256 22.6474 7.07 22.91L6.08 23.9C5.94999 24.03 5.79565 24.1331 5.62578 24.2035C5.45592 24.2739 5.27386 24.3101 5.09 24.3101C4.90614 24.3101 4.72408 24.2739 4.55422 24.2035C4.38435 24.1331 4.23001 24.03 4.1 23.9C3.96999 23.77 3.86686 23.6156 3.7965 23.4458C3.72614 23.2759 3.68993 23.0939 3.68993 22.91C3.68993 22.7261 3.72614 22.5441 3.7965 22.3742C3.86686 22.2044 3.96999 22.05 4.1 21.92L5.09 20.93ZM14 23.8C14.3713 23.8 14.7274 23.9475 14.99 24.2101C15.2525 24.4726 15.4 24.8287 15.4 25.2V26.6C15.4 26.9713 15.2525 27.3274 14.99 27.5899C14.7274 27.8525 14.3713 28 14 28C13.6287 28 13.2726 27.8525 13.0101 27.5899C12.7475 27.3274 12.6 26.9713 12.6 26.6V25.2C12.6 24.8287 12.7475 24.4726 13.0101 24.2101C13.2726 23.9475 13.6287 23.8 14 23.8Z"
class="switcher-color-theme__icon" />
</svg>
<div class="switcher-color-theme__btn-container">
<button type="button" aria-label="Светлая/темная тема сайта"
class="switcher-color-theme__btn"></button>
</div>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"
class="switcher-color-theme__icon">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M7.353 0.938854C7.49145 1.07752 7.58611 1.2538 7.62522 1.44581C7.66433 1.63781 7.64618 1.83708 7.573 2.01885C6.98754 3.4739 6.8427 5.06895 7.15649 6.60565C7.47028 8.14236 8.22885 9.55293 9.33789 10.662C10.4469 11.771 11.8575 12.5296 13.3942 12.8434C14.9309 13.1572 16.526 13.0123 17.981 12.4269C18.1628 12.3538 18.362 12.3358 18.5539 12.375C18.7459 12.4142 18.9221 12.5089 19.0606 12.6474C19.1992 12.7859 19.2941 12.962 19.3334 13.1539C19.3728 13.3458 19.3549 13.545 19.282 13.7269C18.5375 15.5794 17.2557 17.1667 15.6016 18.2847C13.9474 19.4026 11.9965 19.9999 10 19.9999C4.477 19.9999 0 15.5229 0 9.99985C0 5.79285 2.598 2.19485 6.273 0.717854C6.45477 0.644679 6.65404 0.626519 6.84605 0.665632C7.03805 0.704744 7.21434 0.799404 7.353 0.937854V0.938854Z" />
</svg>
</div>
<svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg"
class="footer__icon">
<path
d="M17.7652 5.50782C18.1889 4.36081 19.8111 4.36081 20.2348 5.50782C20.9082 7.33092 23.182 7.9402 24.6767 6.69803C25.6171 5.91652 27.0221 6.72767 26.8155 7.93283C26.4871 9.84836 28.1516 11.5129 30.0672 11.1845C31.2723 10.9779 32.0835 12.3829 31.302 13.3233C30.0598 14.818 30.6691 17.0918 32.4922 17.7652C33.6392 18.1889 33.6392 19.8111 32.4922 20.2348C30.6691 20.9082 30.0598 23.182 31.302 24.6767C32.0835 25.6171 31.2723 27.0221 30.0672 26.8155C28.1516 26.4871 26.4871 28.1516 26.8155 30.0672C27.0221 31.2723 25.6171 32.0835 24.6767 31.302C23.182 30.0598 20.9082 30.6691 20.2348 32.4922C19.8111 33.6392 18.1889 33.6392 17.7652 32.4922C17.0918 30.6691 14.818 30.0598 13.3233 31.302C12.3829 32.0835 10.9779 31.2723 11.1845 30.0672C11.5129 28.1516 9.84836 26.4871 7.93283 26.8155C6.72767 27.0221 5.91652 25.6171 6.69803 24.6767C7.9402 23.182 7.33092 20.9082 5.50782 20.2348C4.36081 19.8111 4.36081 18.1889 5.50782 17.7652C7.33092 17.0918 7.9402 14.818 6.69803 13.3233C5.91652 12.3829 6.72767 10.9779 7.93283 11.1845C9.84836 11.5129 11.5129 9.84836 11.1845 7.93283C10.9779 6.72767 12.3829 5.91652 13.3233 6.69803C14.818 7.9402 17.0918 7.33092 17.7652 5.50782Z"
stroke-width="1.5" />
</svg>
</div>
</footer>
<template class="roads__template-slide">
<li class="splide__slide roads__slide">
<img src="#" alt="" class="roads__photo">
<img src="#" alt="Иконка с изображением линии местности" class="roads__vector">
</li>
</template>
<template class="bicycles__template-links">
<li class="bicycles__line-link">
<button type="button" aria-label="Переключение карточек в галерее" class="bicycles__link" data-id="#"></button>
</li>
</template>
<template class="bicycles__card-template">
<article class="splide__slide bicycles__gallery-card">
<a href="" target="_blank" class="bicycles__gallery-link">
<img src="#" alt="" class="bicycles__gallery-image">
</a>
<h3 class="bicycles__gallery-image-caption" lang="en"></h3>
</article>
</template>
<script src="./scripts/utils/constants.js"></script>
<script src="./scripts/utils/initialCardsBicycles.js"></script>
<script src="./scripts/utils/templateInitialSlidesRoads.js"></script>
<script src="./scripts/utils/sliderSectionRoads.js"></script>
<script src="./scripts/utils/bicyclesTemplateLinks.js"></script>
<script src="./scripts/pages/index.js"></script>
<script src="./vendor/splidejs/dist/js/splide.min.js"></script>
<script src="./scripts/splide/sliders.js"></script>
</body>
</html>