-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
235 lines (232 loc) · 9.92 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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Yoga</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700&subset=cyrillic-ext" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap-grid.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="container">
<nav>
<ul>
<li><a href="#about">О нас</a></li>
<li><a href="#photo">Фото</a></li>
<li><a href="#price">Стоимость</a></li>
<li><a href="#contacts">Контакты</a></li>
</ul>
</nav>
</div>
</header>
<div class="main">
<div class="container">
<div class="row">
<div class="col-12">
<div class="main-block">
<div class="main-block-link">
Travel.org
</div>
<div class="main-block-title">
йога-туры в индию
</div>
<div class="main-block-descr">
океан / йога / путешествия / аюрведа
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content">
<div class="container" id="about">
<div class="info" >
<div class="info-header">
<div class="info-header-tab">Лечение</div>
<div class="info-header-tab">Отдых</div>
<div class="info-header-tab">Природа</div>
<div class="info-header-tab">Йога</div>
</div>
<div class="info-tabcontent fade">
<div class="description">
<div class="description-title">Здоровый позвоночник</div>
<div class="description-text">Йога, массажи и плавание в море - помогут уставшей спине! Индийские йоги считали, что здоровье человека можно определить по тому, насколько здоров и гибок у него позвоночник.<br> Интересно, что бы древние йоги сказали, глядя на современного человека, который уже со школьного возраста мучается болями в спине, работает подолгу в неудобных сидячих позах и не умеет расслабляться, имеет искривление, которое в итоге приведет к болезням других органов? Йоги сказали бы – займись собой и срочно!
</div>
<div class="description-btn">
Узнать подробнее
</div>
</div>
<div class="photo">
<img src="img/massage.jpg" alt="Massage">
</div>
</div>
<div class="info-tabcontent fade">
<div class="description">
<div class="description-title">Антистресс</div>
<div class="description-text">Аюрведа и йога утверждают, что главным источником здоровья нашего организма является здоровый ум. Программа «Антистресс» сначала убирает последствия стресса на физическом уровне, потом помогает избавиться от негативных и навязчивых мыслей, затем повышает общий уровень энергии.<br> Вы наконец вспомните ощущение "свободной головы", ощутите прилив физических сил и вспомните, что такое счастье.</div>
<div class="description-btn">
Узнать подробнее
</div>
</div>
<div class="photo">
<img src="img/sunset.jpg" alt="sunset">
</div>
</div>
<div class="info-tabcontent fade">
<div class="description">
<div class="description-title">Восстановление</div>
<div class="description-text">Стрессы, жизнь в условиях города, плохая экология, загрязненные продукты и вода, напряженный ритм жизни - все это день ото дня отбирает у нас молодость и хорошее здоровье.<br> Одним кремом для лица не решить проблему омоложения организма, когда тебе за 40. Согласны?</div>
<div class="description-btn">
Узнать подробнее
</div>
</div>
<div class="photo">
<img src="img/sunrise.jpg" alt="sunrise">
</div>
</div>
<div class="info-tabcontent fade">
<div class="description">
<div class="description-title">Йога и аюрведа</div>
<div class="description-text">Несколько лет назад мы разработали специальные программы по йоге и аюрведе - и мы поняли, что они отлично работают - на опыте 530 наших туристов! В каждой из этих программ есть одна цель, на достижение которой будут направлены и асаны, и дыхательные практики, и медитации, и аюрведические процедуры, будут читаться лекции по этой теме. <br>Йога и аюрведа - два сильных война, которые сообща будут бороться с проблемами и болезнями.</div>
<div class="description-btn">
Узнать подробнее
</div>
</div>
<div class="photo">
<img src="img/yoga.jpg" alt="yoga">
</div>
</div>
</div>
<div class="timer">
<div class="timer-title">Успей забронировать место со скидкой</div>
<div class="timer-action">
До конца акции осталось
</div>
<div class="timer-numbers" id="timer">
<span class="hours">18</span>
<span>:</span>
<span class="minutes">20</span>
<span>:</span>
<span class="seconds">11</span>
</div>
</div>
<button class="more"> Узнать больше</button>
<div class="slider" id="photo">
<div class="slider-title">Фото с наших поездок
</div>
<div class="wrap">
<div class="slider-item fade">
<img src="img/slider_1.jpg" alt="slider">
</div>
<div class="slider-item fade">
<img src="img/slider_2.jpg" alt="slider">
</div>
<div class="slider-item fade">
<img src="img/slider_3.jpg" alt="slider">
</div>
<div class="slider-item fade">
<img src="img/slider_4.jpg" alt="slider">
</div>
<div class="prev"><div class="arrow-left"></div></div>
<div class="next"><div class="arrow-right"></div></div>
</div>
<div class="slider-dots">
<div class="dot dot-active"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
<div class="counter" id="price">
<div class="counter-title">Рассчитайте стоимость вашего отдыха
</div>
<div class="counter-block">
<div class="counter-block-option">Количество людей</div>
<input type="number" min="1" step="1" class="counter-block-input">
</div>
<div class="counter-block">
<div class="counter-block-option">На сколько дней</div>
<input type="number" min="1" step="1" class="counter-block-input">
</div>
<div class="counter-block">
<div class="counter-block-option">Выберете базу</div>
<select name="place" id="select">
<option id="mumbai" value="1">Индия, Мумбай</option>
<option id="kerala" value="1.5">Индия, Керала</option>
<option id="varanasi" value="1.8">Индия, Варанаси</option>
</select>
</div>
<div class="counter-total">
Общая сумма<br>
<span id="total">20456</span>
</div>
</div>
<div class="contact" id="contacts">
<div class="contact-img">
<img src="img/letter.png" alt="letter">
</div>
<div class="contact-form">
<div class="contact-form-title">
Мы с вами свяжемся
</div>
<form action="#" id="form">
<input required type="email" placeholder="Ваша почта" name="email">
<input required type="tel" placeholder="Ваш телефон" name="phone">
<button type="submit">Отправить</button>
</form>
</div>
</div>
</div>
<footer>
<div class="container">
<div class="social">
<div class="social-block">
<a href="#">
<img src="logo/twitter-logo-silhouette.svg" alt="">
</a>
</div>
<div class="social-block">
<a href="#">
<img src="logo/facebook-logo.svg" alt="">
</a>
</div>
<div class="social-block">
<a href="#">
<img src="logo/instagram-social-network-logo-of-photo-camera.svg" alt="">
</a>
</div>
<div class="social-block">
<a href="#">
<img src="logo/pinterest-logo.svg" alt="">
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="overlay fade">
<div class="popup">
<div class="popup-close">×
</div>
<div class="popup-title">
Форма обратной связи</div>
<div class="popup-form">
<form action="#" class="main-form">
<div class="popup-form-header">
Узнайте больше о своём отдыхе
</div>
<label class="popup-form__label" for="phone">
Введите ваш номер телефона:
</label>
<input class="popup-form__input" name="phone" type="tel" required placeholder="+7(978) 973 33 45">
<button class="button popup-form__btn">
Оставить заявку!
</button>
</form>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>