-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
253 lines (243 loc) · 9.45 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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BlueLake</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="site-container">
<header class="header">
<div class="container header__container flex">
<ul class="header__social social">
<li class="social__item">
<a href="#" class="social__link social__link--vk" aria-label=" Go to VK">
</a>
</li>
<li class="social__item">
<a href="#" class="social__link social__link--inst" aria-label=" Go to Inst">
</a>
</li>
</ul>
<a href="#" class="header__logo logo">Голубое Озеро</a>
<button class="header__burger burger btn-reset" aria-label="Open menu">
<span class="burger__line">
</span>
<span class="burger__line--middle">
</span>
<span class="burger__line--end">
</span>
</button>
</div>
</header>
<main class="main">
<section class="first">
<div class="container first__container">
<h1 class="first__title">
Голубое Озеро <br> <b>«жемчужина Казани»</b>
</h1>
<p class="first__descr">
Уникальное место с кристально чистой водой и потрясающей природой всего в 10 километрах от центра города! Голубые озёра – это природный заповедник, который по праву называют «жемчужиной Казани» за невероятную красоту и целебные свойства. Ежегодно это место привлекает тысячи любителей дайвинга и просто людей, которые хотят насладиться прекрасными пейзажами.
</p>
<button class="first__btn btn-reset btn">
ПОДРОБНЕЕ
</button>
<div class="first__bottom">
<form action="/" class="first__form search-form">
<input type="search" class="search-form__field" placeholder="Search stories">
<button type="submit" class="search-form__button btn-reset" aria-lable="Search stories"></button>
</form>
<div class="first__slider main-slider" >
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="main-slider__media">
<img src="img\slider1.jpg" alt="Голубое Озеро">
</div>
<p class="main-slider__text">wonderful moutain</p>
</div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="become">
<div class="container">
<h2 class="section-title become__title">
Become A Travel Pro In One Easy Lesson
</h2>
<ul class="become__list">
<li class="become__item">
<img src="img/become1.jpg" alt="" class="become__image">
<div class="become__text">
Vacation Home<br> Rental Success
</div>
</li>
<li class="become__item">
<img src="img/become2.jpg" alt="" class="become__img">
<div class="become__text">
Vacation Home<br> Rental Success
</div>
</li>
<li class="become__item">
<img src="img/become3.jpg" alt="" class="become__img">
<div class="become__text">
Vacation Home<br> Rental Success
</div>
</li>
<li class="become__item">
<img src="img/become4.jpg" alt="" class="become__img">
<div class="become__text">
Vacation Home<br> Rental Success
</div>
</li>
</ul>
</div>
</section>
<section class="featured">
<div class="container featured__container">
<article class="featured__article blog--article">
<a href="#" class="blog-article__category">featured</a>
<h3 class="blog-article__title">How To Fly A Private Jet On Your Next Trip</h3>
<p class="blog-article__desc">
The state of Utah in the United States is home to lots of beautiful National Parks, & Bryce Canyon National Park ranks as three of the most magnificent & awe inspiring.
</p>
<a href="#" class="blog-article__link btn">READ ARTICLE</a>
</article>
</div>
<div class="featured__stories">
<h2 class="featured__title">Featured Stories</h2>
<ul class="featured__list">
<li class="featured__list--item">
<article class="featured__list--article">
<div class="featured__list--image">
<img src="img/avatar1.jpg" alt="">
</div>
<div class="featured__list--text">
<h3 class="featured__list--title">
<a href="#">Do A Sporting Stag Do In Birmingham</a>
</h3>
<time class="featured__list--time" datetime="2019--12--13 00:00">13 Dec 2019</time>
</div>
</article>
</li>
<li class="featured__list--item">
<article class="featured__list--article">
<div class="featured__list--image">
<img src="img/avatar2.jpg" alt="">
</div>
<div class="featured__list--text">
<h3 class="featured__list--title">
<a href="#">From Wetlands To Canals And Dams Amsterdam Is Alive</a>
</h3>
<time class="featured__list--time" datetime="2019--12--13 00:00">13 Dec 2019</time>
</div>
</article>
</li>
<li class="featured__list--item">
<article class="featured__list--article">
<div class="featured__list--image">
<img src="img/avatar3.jpg" alt="">
</div>
<div class="featured__list--text">
<h3 class="featured__list--title">
<a href="#">Stu Unger Rise And Fall Of A Poker Genius</a>
</h3>
<time class="featured__list--time" datetime="2019--12--13 00:00">13 Dec 2019</time>
</div>
</article>
</li>
<li class="featured__list--item">
<article class="featured__list--article">
<div class="featured__list--image">
<img src="img/avatar4.jpg" alt="">
</div>
<div class="featured__list--text">
<h3 class="featured__list--title">
<a href="#">New Ideas For A Low Cost Vacation On Water</a>
</h3>
<time class="featured__list--time" datetime="2019--12--13 00:00">13 Dec 2019</time>
</div>
</article>
</li>
</ul>
</div>
</section>
<section class="featured-videos">
<div class="container featured-videos__container">
<h2 class="featured-videos__title section-title section-title__center">Featured Videos</h2>
<p class="featured-videos__desc">The state of Utah in the United States is home to lots of beautiful National Parks, & Bryce Canyon National Park ranks as three of the most magnificent & awe inspiring.</p>
</div>
<div class="slider-container">
<div class="swiper-wrapper">
<div class="swiper-slide slide-1">
<button class="btn-reset slide-play">
</button>
</button>
<h3 class="slide-title">A Guide To Rocky Mountain Vacations</h3>
</div>
<div class="swiper-slide slide-2">
<h3 class="slide-title">A Guide To Rocky Mountain Vacations</h3>
</div>
<div class="swiper-slide slide-3">
<h3 class="slide-title">A Guide To Rocky Mountain Vacations</h3>
</div>
<div class="swiper-slide slide-4">
<h3 class="slide-title">A Guide To Rocky Mountain Vacations</h3>
</div>
</div>
</div>
</section>
<section class="newsletter">
<div class="container">
<div class="newsletter-content">
<div class="newsletter__text">
<h2 class="newsletter__title section-title">
Sign Up Our Newsletter
</h2>
<p class="newsletter__desc">
The state of Utah in the United States is home to lots of beautiful National Parks, & Bryce
Canyon National Park ranks as three of the most magnificent.
</p>
</div>
<form class="newsletter__form subscribe-form" action="index.html" method="post">
<input class="subscribe-form__field" type="text" name="name" placeholder="Name">
<input class="subscribe-form__field" type="email" name="email" placeholder="Email">
<input class="subscribe-form__field" type="phone" name="phone" placeholder="Phone Number">
<button class="btn btn-reset subscribe-form__btn">
SIGN UP NOW
</button>
</form>
</div>
</div>
</section>
<section class="insp">
<div class="container">
<h2 class="section-title section-title__center">
Inspirations
</h2>
<p class="insp-desc">
The state of Utah in the United States is home to lots of beautiful National Parks, & Bryce <br>
Canyon National Park ranks as three of the most magnificent & awe inspiring.
</p>
<ul class="grid insp__list">
<li class="insp__item insp__item--big">1</li>
<li class="insp__item">2</li>
<li class="insp__item insp__item--bigheigth">3</li>
<li class="insp__item insp__item--bigheigth">4</li>
<li class="insp__item insp__item--bigheigth">5</li>
<li class="insp__item">6</li>
<li class="insp__item insp__item--big">7</li>
</ul>
</div>
</section>
</main>
</div>
<script src="libs/swiper.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>