-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
320 lines (292 loc) · 17.5 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FIGMA | Макеты для верстки — Верстка страницы</title>
<meta name="description" content="Макет для верстки сайта был взял с телеграм канала FIGMA | Макеты для верстки">
<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=DM+Sans:wght@400;700&family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Начало: Данный блок удалять нельзя -->
<style>
.maketforfigma{
flex: 0 0 auto;
/*background: #303b44;*/
/*background: #5CDB95;*/
background: #313a46;
font-weight: bold;
display: flex;
}
.maketforfigma img{
border-radius: 10px;
margin: 4px 0 0 4px;
}
.maketforfigma p {
/*color: #fff;*/
/*color: #05386B;*/
color: #98a6ad;
text-decoration: none;
letter-spacing: .01875rem;
font-size: .775rem;
padding: 0 10px;
line-height: 0.70rem;
}
.maketforfigma p > a {
/*color: #08ff00;*/
/*color: #EDF5E1;*/
color: #bbe4f0;
font-weight: bold;
}
.maketforfigma p > a:hover {
/*color: #ffa001*/
/*color: #379683*/
color: #ffffff
}
.main{
flex: 1 0 auto;
}
html{
height: 100%;
}
body{
display: flex;
flex-direction: column;
height: 100%;
padding: 0;
margin: 0;
}
</style>
<div class="maketforfigma">
<a href="https://t.me/s/FigmaToHTML" target="_blank">
<img src="logo.png">
</a>
<div>
<p>
Данная верстка, была реализована пользователем в рамках обучающего телеграм канал <a href="https://t.me/s/FigmaToHTML/2" target="_blank">FIGMA | Макеты для верстки</a>
</p>
<p>
При помощи бота <a href="https://t.me/HtmlCodeForMoney_bot?from_git" target="_blank">FIGMA | 💵 Верстай за деньги</a> пользователь получил оплату за верстку этого сайта и попал в рейтинги сайта
<a href="https://maketforfigma.ru" target="_blank">FIGMA — Макеты для верстки</a>
</p>
</div>
</div>
<!-- Конец -->
<div class="main" id="top">
<header class="header" style="background-image: url('images/header-bg.jpg')">
<div class="header__top">
<div class="header__container">
<nav class="menu">
<a class="logo" href="#top">QWERy</a>
<ul class="menu__list">
<li class="menu__item">
<a class="menu__link" href="#information">Information</a>
</li>
<li class="menu__item">
<a class="menu__link" href="#about">About us</a>
</li>
<li class="menu__item">
<a class="menu__link" href="#culture">Culture</a>
</li>
</ul>
<div class="d6">
<form>
<input type="text" placeholder="">
<button type="submit">
<span>Search</span>
</button>
</form>
</div>
</nav>
</div>
</div>
<div class="header__content">
<div class="header__container">
<h1 class="header__title">
<span class="text-accent text-accent--header">
explore the Nature Beauty
</span>
Discover
<span class="header__text">
Wonderful Indonesia
</span>
</h1>
<a class="header__link" href="#information">Scroll down</a>
</div>
</div>
<div class="header__right">
<div class="header__container">
<div class="header__right-box">
<div class="header__right-text">Follow us</div>
<div class="header__right-inner">
<a class="social-link header__social" href="#" target="_blank">
<svg width="14" height="28" viewBox="0 0 14 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.4322 4.85708H13.7715V0.554326C13.3679 0.495693 11.9799 0.36377 10.3635 0.36377C6.99078 0.36377 4.68036 2.60422 4.68036 6.72205V10.5118H0.958496V15.3219H4.68036V27.4251H9.24354V15.323H12.8149L13.3818 10.5129H9.24247V7.19901C9.24354 5.80873 9.598 4.85708 11.4322 4.85708Z" fill="white"/></svg></a>
<a class="social-link header__social" href="#">
<svg width="29" height="26" viewBox="0 0 29 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M28.875 3.61268C27.8186 4.10205 26.693 4.42643 25.5195 4.58393C26.7268 3.82268 27.6482 2.62643 28.0814 1.18455C26.9558 1.8933 25.713 2.39393 24.3886 2.6733C23.3198 1.47143 21.7965 0.727051 20.1348 0.727051C16.9106 0.727051 14.315 3.4908 14.315 6.87893C14.315 7.36643 14.3541 7.83518 14.45 8.28142C9.60846 8.03205 5.32444 5.58143 2.44653 1.8483C1.9441 2.76893 1.64938 3.82268 1.64938 4.95705C1.64938 7.08705 2.68799 8.97517 4.23613 10.0683C3.3005 10.0496 2.38262 9.76268 1.605 9.3108C1.605 9.32955 1.605 9.35393 1.605 9.3783C1.605 12.3671 3.62362 14.8496 6.27073 15.4214C5.7967 15.5583 5.28006 15.6239 4.74389 15.6239C4.37106 15.6239 3.99468 15.6014 3.64137 15.5189C4.39591 17.9545 6.53703 19.7452 9.08294 19.8033C7.10161 21.4402 4.58588 22.4264 1.86243 22.4264C1.38485 22.4264 0.926801 22.4039 0.46875 22.342C3.04839 24.0989 6.10562 25.102 9.40252 25.102C20.1188 25.102 25.9776 15.727 25.9776 7.6008C25.9776 7.32893 25.9687 7.06642 25.9563 6.8058C27.112 5.93955 28.0832 4.85768 28.875 3.61268Z" fill="white"/></svg></a>
<a class="social-link header__social" href="#">
<svg width="29" height="30" viewBox="0 0 29 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.40039 0H20.0527C24.9546 0 28.9297 4.19812 28.9297 9.375V20.625C28.9297 25.8019 24.9546 30 20.0527 30H9.40039C4.49854 30 0.523438 25.8019 0.523438 20.625V9.375C0.523438 4.19812 4.49854 0 9.40039 0ZM20.0526 27.1875C23.4791 27.1875 26.2665 24.2437 26.2665 20.625V9.375C26.2665 5.75625 23.4791 2.8125 20.0526 2.8125H9.40027C5.97376 2.8125 3.1864 5.75625 3.1864 9.375V20.625C3.1864 24.2437 5.97376 27.1875 9.40027 27.1875H20.0526Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7.625 15C7.625 10.8581 10.8047 7.5 14.7265 7.5C18.6483 7.5 21.828 10.8581 21.828 15C21.828 19.1419 18.6483 22.5 14.7265 22.5C10.8047 22.5 7.625 19.1419 7.625 15ZM10.2878 15C10.2878 17.5837 12.2798 19.6875 14.7263 19.6875C17.1728 19.6875 19.1648 17.5837 19.1648 15C19.1648 12.4144 17.1728 10.3125 14.7263 10.3125C12.2798 10.3125 10.2878 12.4144 10.2878 15Z" fill="white"/><ellipse cx="22.3604" cy="6.93736" rx="0.94635" ry="0.999375" fill="white"/></svg></a>
</div>
</div>
</div>
</div>
</header>
<section class="information section" id="information">
<div class="container">
<div class="information__inner">
<img class="information__img" src="images/1.jpg" alt="picture">
<div class="information__info">
<span class="text-accent">EAST nUSA TENGGARA</span>
<h2 class="title information__title">Have you enjoyed your holiday?</h2>
<p class="text">
You will be amazed if you take part in this sailing Komodo island tour package. So it is also mandatory for you, besides enjoying Komodo tourism on Komodo Island, you also have to taste the marine tourism. The beautiful waters of Komodo will make you meet many travelers from other countries.
</p>
<a class="link" href="#">read more</a>
</div>
</div>
</div>
</section>
<section class="about section" id="about">
<div class="container">
<div class="about__slider">
<div class="about__item" style="background-image: url('images/2.jpg')">
<div class="about__inner">
<span class="text-accent text-accent--slider">Bromo</span>
<h2 class="title about__title">Steady your steps, we will climb together!</h2>
<p class="text about__text">
Enjoying the vast expanse of the sea of sand, witnessing the splendor of Mount Semeru that soars into the sky, and gazing at the beauty of the sun moving out of its bed or otherwise enjoying the dim twilight from the Bromo ridge is an unforgettable experience when visiting Bromo.
</p>
<a class="link link--about" href="#">read more</a>
</div>
</div>
<div class="about__item" style="background-image: url('images/2.jpg')">
<div class="about__inner">
<span class="text-accent text-accent--slider">Bromo</span>
<h2 class="title about__title">Steady your steps, we will climb together!</h2>
<p class="text about__text">
Enjoying the vast expanse of the sea of sand, witnessing the splendor of Mount Semeru that soars into the sky, and gazing at the beauty of the sun moving out of its bed or otherwise enjoying the dim twilight from the Bromo ridge is an unforgettable experience when visiting Bromo.
</p>
<a class="link link--about" href="#">read more</a>
</div>
</div>
<div class="about__item" style="background-image: url('images/2.jpg')">
<div class="about__inner">
<span class="text-accent text-accent--slider">Bromo</span>
<h2 class="title about__title">Steady your steps, we will climb together!</h2>
<p class="text about__text">
Enjoying the vast expanse of the sea of sand, witnessing the splendor of Mount Semeru that soars into the sky, and gazing at the beauty of the sun moving out of its bed or otherwise enjoying the dim twilight from the Bromo ridge is an unforgettable experience when visiting Bromo.
</p>
<a class="link link--about" href="#">read more</a>
</div>
</div>
</div>
</div>
</section>
<section class="culture section" id="culture">
<div class="container">
<div class="culture__inner">
<div class="culture__info">
<span class="text-accent">INDONESIAN CULTURE</span>
<h2 class="title culture__title">Our culture here is very friendly to people</h2>
<p class="text">
known for his politeness, manners and gentleness. This becomes a characteristic when they mingle with other tribes and become basic traits that are passed down by their ancestors.
</p>
<a class="link" href="#">read more</a>
</div>
<img class="culture__img" src="images/3.jpg" alt="picture">
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer-top">
<a class="logo footer__logo" href="#top">QWERy</a>
<div class="footer-top__inner">
<span>Ready to explore?</span>
<button class="footer-top__btn" type="button">Get started</button>
</div>
</div>
<div class="footer-content">
<div class="footer-content__inner">
<form class="footer-form" action="#">
<h3 class="form__title title">Let's go on vacation, Make your day</h3>
<div class="form__inner">
<label class="form__field" for="name"></label>
<input class="form__input" type="text" id="name" name="name" placeholder="Email address" required>
<button class="btn" type="submit"></button>
</div>
</form>
<div class="footer-content__items">
<div class="footer-content__item">
<h4 class="footer-content__title">Services</h4>
<ul class="footer-content__list">
<li class="footer-content__link">
<a class="footer__link" href="#">Email Marketing</a></li>
<li class="footer-content__link">
<a class="footer__link" href="#">Campaigns</a></li>
<li class="footer-content__link">
<a class="footer__link" href="#">Branding</a></li>
<li class="footer-content__link">
<a class="footer__link" href="#">Offline</a>
</li>
</ul>
</div>
<div class="footer-content__item">
<h4 class="footer-content__title">About</h4>
<ul class="footer-content__list">
<li class="footer-content__link">
<a class="footer__link" href="#">Our Story</a></li>
<li class="footer-content__link">
<a class="footer__link" href="#">Benefits</a></li>
<li class="footer-content__link">
<a class="footer__link" href="#">Team</a></li>
<li class="footer-content__link">
<a class="footer__link" href="#">Careers</a>
</li>
</ul>
</div>
<div class="footer-content__item">
<h4 class="footer-content__title">Help</h4>
<ul class="footer-content__list">
<li class="footer-content__link">
<a class="footer__link" href="#">FAQs</a></li>
<li class="footer-content__link">
<a class="footer__link" href="#">Contact Us</a>
</li>
</ul>
</div>
</div>
</div>
<div class="footer-content__box">
<div class="footer-content__box-item">
<a class="footer-content__box-link" href="#">Terms & Conditions</a>
<a class="footer-content__box-link" href="#">Privacy Policy</a>
</div>
<div class="footer-content__box-item">
<a class="social-link" href="#" target="_blank">
<svg width="14" height="28" viewBox="0 0 14 28" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.4322 4.85708H13.7715V0.554326C13.3679 0.495693 11.9799 0.36377 10.3635 0.36377C6.99078 0.36377 4.68036 2.60422 4.68036 6.72205V10.5118H0.958496V15.3219H4.68036V27.4251H9.24354V15.323H12.8149L13.3818 10.5129H9.24247V7.19901C9.24354 5.80873 9.598 4.85708 11.4322 4.85708Z" fill="white"/></svg></a>
<a class="social-link" href="#">
<svg width="29" height="26" viewBox="0 0 29 26" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M28.875 3.61268C27.8186 4.10205 26.693 4.42643 25.5195 4.58393C26.7268 3.82268 27.6482 2.62643 28.0814 1.18455C26.9558 1.8933 25.713 2.39393 24.3886 2.6733C23.3198 1.47143 21.7965 0.727051 20.1348 0.727051C16.9106 0.727051 14.315 3.4908 14.315 6.87893C14.315 7.36643 14.3541 7.83518 14.45 8.28142C9.60846 8.03205 5.32444 5.58143 2.44653 1.8483C1.9441 2.76893 1.64938 3.82268 1.64938 4.95705C1.64938 7.08705 2.68799 8.97517 4.23613 10.0683C3.3005 10.0496 2.38262 9.76268 1.605 9.3108C1.605 9.32955 1.605 9.35393 1.605 9.3783C1.605 12.3671 3.62362 14.8496 6.27073 15.4214C5.7967 15.5583 5.28006 15.6239 4.74389 15.6239C4.37106 15.6239 3.99468 15.6014 3.64137 15.5189C4.39591 17.9545 6.53703 19.7452 9.08294 19.8033C7.10161 21.4402 4.58588 22.4264 1.86243 22.4264C1.38485 22.4264 0.926801 22.4039 0.46875 22.342C3.04839 24.0989 6.10562 25.102 9.40252 25.102C20.1188 25.102 25.9776 15.727 25.9776 7.6008C25.9776 7.32893 25.9687 7.06642 25.9563 6.8058C27.112 5.93955 28.0832 4.85768 28.875 3.61268Z" fill="white"/></svg>
</a>
<a class="social-link" href="#">
<svg width="29" height="30" viewBox="0 0 29 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.40039 0H20.0527C24.9546 0 28.9297 4.19812 28.9297 9.375V20.625C28.9297 25.8019 24.9546 30 20.0527 30H9.40039C4.49854 30 0.523438 25.8019 0.523438 20.625V9.375C0.523438 4.19812 4.49854 0 9.40039 0ZM20.0526 27.1875C23.4791 27.1875 26.2665 24.2437 26.2665 20.625V9.375C26.2665 5.75625 23.4791 2.8125 20.0526 2.8125H9.40027C5.97376 2.8125 3.1864 5.75625 3.1864 9.375V20.625C3.1864 24.2437 5.97376 27.1875 9.40027 27.1875H20.0526Z" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7.625 15C7.625 10.8581 10.8047 7.5 14.7265 7.5C18.6483 7.5 21.828 10.8581 21.828 15C21.828 19.1419 18.6483 22.5 14.7265 22.5C10.8047 22.5 7.625 19.1419 7.625 15ZM10.2878 15C10.2878 17.5837 12.2798 19.6875 14.7263 19.6875C17.1728 19.6875 19.1648 17.5837 19.1648 15C19.1648 12.4144 17.1728 10.3125 14.7263 10.3125C12.2798 10.3125 10.2878 12.4144 10.2878 15Z" fill="white"/><ellipse cx="22.3604" cy="6.93736" rx="0.94635" ry="0.999375" fill="white"/></svg>
</a>
</div>
</div>
</div>
<div class="footer-bottom">
<a class="footer-bottom__link" href="#">
Copyright 2021 QWERy
</a>
</div>
</div>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>