-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
380 lines (354 loc) · 17.7 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
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GIT VS</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<header class="header">
<div class="header__nav">
<a href="#" class="header__logo"></a>
<div class="header__body-burger">
<nav class="burger__nav">
<ul class="header__items">
<li class="header__item"><a href="#home">Home</a></li>
<li class="header__item"><a href="#blog">Blog</a></li>
<li class="header__item"><a href="#features">Features</a></li>
<li class="header__item"><a href="#pricing">Pricing</a></li>
<li class="header__item"><a href="#documentation">Documentation</a></li>
</ul>
</nav>
</div>
</div>
<div class="header__body-social">
<nav class="social__nav">
<ul class="social__items">
<li><a href="#!"><img class="social__items-img" src="./img/header/icons/f.svg" alt="f"></a></li>
<li><a href="#!"><img class="social__items-img" src="./img/header/icons/plane.svg" alt="plane"></a></li>
<li><a href="#!"><img class="social__items-img" src="./img/header/icons/twitter.svg"
class="header__blue-img" alt="twitter"></a>
</li>
<li><a href="#!"><img class="social__items-img" src="./img/header/icons/M.svg" alt="M"></a></li>
</ul>
</nav>
<a href="#!" class="header__btn btn-blue">Get started</a>
<div class="burger">
<span></span>
</div>
</div>
</header>
<section class="home" id="home">
<div class="home__bg">
<div class="home__main">
<div class="home__subtitle subtitle">PLAN YOUR LIFE</div>
<h1 class="home__title">Increase your <strong>productivity</strong></h1>
<div class="home__text">Brute laoreet efficiendi id his, ea illum nonumes luptatum pro. Usu atqui laudem
an,
insolens gubergren similique est cu. Et vel modus congue vituperata.</div>
<a href="#exampleModal" class="home__play"><img src="./img/prod/Polygon.png" alt="Polygon"></a>
</div>
</div>
<div class="home__footer">
<a href="#"><img class="home__footer-img" src="./img/prod/logo/1.png" alt="image"></a>
<a href="#"><img class="home__footer-img" src="./img/prod/logo/2.png" alt="image"></a>
<a href="#"><img class="home__footer-img" src="./img/prod/logo/3.png" alt="image"></a>
<a href="#"><img class="home__footer-img" src="./img/prod/logo/4.png" alt="image"></a>
<a href="#"><img class="home__footer-img" src="./img/prod/logo/5.png" alt="image"></a>
</div>
</section>
<section class="plan">
<div class="container">
<div class="plan__main">
<div class="plan__img">
<img src="./img/plan/illustration.png" alt="illustration">
</div>
<div class="plan__body body-plan">
<div class="body-plan__subtitle subtitle">DESKTOP AND MOBILE APP</div>
<h2 class="body-plan__title"><strong>Plan</strong> and <strong>manage</strong></h2>
<div class="body-plan__text">Brute laoreet efficiendi id his, ea illum nonumes luptatum pro. Usu atqui
laudem an, insolens gubergren similique est cu. Et vel modus congue vituperata. Solum patrioque no
sea.
Mea ex malis mollis oporteat. Eum an expetenda consequat.
</div>
<div class="body-plan__buttons">
<a href="#!" class="body-plan__btn body-plan__btn_blue">View video <img
src="./img/plan/arrow_right.svg" class="plan-arrow_color" alt="arrow_right"></a>
<a href="#!" class="body-plan__btn body-plan__btn_grey">See features</a>
</div>
</div>
</div>
</div>
</section>
<section class="about">
<div class="container">
<div class="about__body">
<div class="about__subtitle subtitle">ABOUT US</div>
<h3 class="about__title">Read about our app</h3>
<div class="about__items">
<div class="about__item item-about">
<div class="item-about__img"><img src="./img/about/icon/1.svg" alt="home"></div>
<div class="item-about__title">Overview</div>
<div class="item-about__text">Brute laoreet efficiendi id his, ea illum nonumes luptatum pro.</div>
</div>
<div class="about__item item-about">
<div class="item-about__img"><img src="./img/about/icon/2.svg" alt="file"></div>
<div class="item-about__title">Files</div>
<div class="item-about__text">No vim nulla vitae intellegat. Ei enim error ius, solet atomorum
conceptam
ex has.</div>
</div>
<div class="about__item item-about">
<div class="item-about__img"><img src="./img/about/icon/3.svg" alt="comment"></div>
<div class="item-about__title">Meeting chats</div>
<div class="item-about__text">Vim ne tacimates neglegentur. Erat diceret omittam at est.</div>
</div>
<div class="about__item item-about">
<div class="item-about__img"><img src="./img/about/icon/4.svg" alt="send"></div>
<div class="item-about__title">Save events</div>
<div class="item-about__text">Nisl idque mel ea, nominati voluptatum.
</div>
</div>
</div>
<div class="about__buttons">
<a href="#!" class="main__btn about__btn about__btn-red">Read more</a>
<div class="about__or">or</div>
<a href="#!" class="main__btn about__btn btn-blue">Get started</a>
</div>
</div>
</div>
<div class="info">
<div class="info__body info__body_left">
<div class="body-left__wrapper">
<div class="info__img"><img src="./img/info-percent/1.png" alt=""></div>
<div class="info__statistic">89%</div>
<div class="info__text text_left">Customers who have increased their productivity</div>
</div>
</div>
<div class="info__body info__body_right">
<div class="body-right__wrapper">
<div class="info__img"><img src="./img/info-percent/2.png" alt=""></div>
<div class="info__statistic">3123</div>
<div class="info__text">Users who have used our application</div>
</div>
</div>
</div>
</section>
<section class="start" id="blog">
<div class="container">
<div class="start__subtitle subtitle">OUR RESOURCES</div>
<h3 class="start__title">Start reading our blog</h3>
<div class="start__slider slider-start">
<div class="slider-start__body">
<div class="slider-start__images">
<div class="main__img"><img src="./img/start/Rectangle 3.png" alt="main-img"></div>
<div class="right-block__img">
<div class="img_1"><img src="./img/start/Rectangle 3.2.png" alt="img"></div>
<div class="img_1"><img src="./img/start/Rectangle 3.1.png" alt="img"></div>
</div>
</div>
<div class="slider-start__info">
<h2 class="slider-start__title">How to start planning</h2>
<div class="slider-start__text">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu
vidit tractatos, vero tractatos ius an, in mel diceret persecuti. Natum petentium principes mei ea.
Tota everti periculis vis ei, quas tibique pro at, eos ut decore ...
</div>
<div class="slider-start__buttons">
<a href="#!" class="main__btn btn-blue slider-start__btn">Read now</a>
<a href="#!" class="slider-start__link">Add to your bookmarks</a>
</div>
</div>
</div>
</div>
<img class="slider__elipse" src="./img/slider/Ellipse-grey.svg" alt="Ellipse">
</div>
</section>
<section class="custom">
<div class="container">
<div class="custom__body">
<div class="custom__info">
<div class="custom__subtitle subtitle">TESTIMONIALS</div>
<h3 class="custom__title">Customers's quotes</h3>
<div class="custom__text">Brute laoreet efficiendi id his, ea illum nonumes luptatum pro. Usu atqui
laudem
an.</div>
</div>
<div class="custom__blog blog-custom">
<div class="blog-custom__card">Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit
tractatos, vero tractatos ius an, in mel diceret persecuti.
<img src="./img/custom/photo.png" alt="photo" class="custom__photo">
</div>
<div class="blog-custom__elipses"><img src="./img/custom/elipses.svg" alt=""></div>
</div>
<div class="blog-custom__card blog-custom__hidden">Quidam vocibus eum ne, erat consectetuer voluptatibus ut
nam. Eu usu vidit
tractatos, vero tractatos ius an, in mel diceret persecuti.
</div>
</div>
</div>
</section>
<section class="frequen" id="features">
<div class="container">
<div class="frequen__subtitle subtitle">Customer help</div>
<h3 class="frequen__title">Frequently asked questions</h3>
<ul class="frequen__list">
<li class="frequen__li">
<div class="frequen__li_title">Reque insolens in vel?</div>
<div class="frequen-active">
<div class="frequen__li_title-active">Reque insolens in vel?</div>
<div class="frequen__li_info">
<div class="frequen__li_text">
Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit
tractatos, vero tractatos ius an, in mel diceret persecuti.
</div>
<a href="#!" class="frequen__li_btn">Go to documentation</a>
</div>
</div>
</li>
<li class="frequen__li">
<div class="frequen__li_title">Vis rebum error graecis ea, id sit postea accusamus?
</div>
<div class="frequen-active">
<div class="frequen__li_title-active">Vis rebum error graecis ea, id sit postea
accusamus?</div>
<div class="frequen__li_info">
<div class="frequen__li_text">
Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit
tractatos, vero tractatos ius an, in mel diceret persecuti.
</div>
<a href="#!" class="frequen__li_btn">Go to documentation</a>
</div>
</div>
</li>
<li class="frequen__li">
<div class="frequen__li_title">Lorem repudiandae ne nec?</div>
<div class="frequen-active">
<div class="frequen__li_title-active">Lorem repudiandae ne nec?</div>
<div class="frequen__li_info">
<div class="frequen__li_text">
Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit
tractatos, vero tractatos ius an, in mel diceret persecuti.
</div>
<a href="#!" class="frequen__li_btn">Go to documentation</a>
</div>
</div>
</li>
<li class="frequen__li">
<div class="frequen__li_title">Ad dicit numquam vel. Et eos iudico feugait percipitur?
</div>
<div class="frequen-active">
<div class="frequen__li_title-active">Ad dicit numquam vel. Et eos iudico feugait
percipitur?</div>
<div class="frequen__li_info">
<div class="frequen__li_text">
Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit
tractatos, vero tractatos ius an, in mel diceret persecuti.
</div>
<a href="#!" class="frequen__li_btn">Go to documentation</a>
</div>
</div>
</li>
<li class="frequen__li">
<div class="frequen__li_title">Sea no dico percipitur. Fierent constituam definitiones
id eum?</div>
<div class="frequen-active">
<div class="frequen__li_title-active">Sea no dico percipitur. Fierent constituam
definitiones id eum?</div>
<div class="frequen__li_info">
<div class="frequen__li_text">
Quidam vocibus eum ne, erat consectetuer voluptatibus ut nam. Eu usu vidit
tractatos, vero tractatos ius an, in mel diceret persecuti.
</div>
<a href="#!" class="frequen__li_btn">Go to documentation</a>
</div>
</div>
</li>
</ul>
</div>
</section>
<section class="started" id="pricing">
<div class="started__blue blue-started">
<div class="container">
<div class="blue-started__body">
<div class="blue-started__subtitle subtitle">PLAN YOUR LIFE</div>
<h2 class="blue-started__title">Get <strong>started</strong> now</h2>
<div class="blue-started__text">Brute laoreet efficiendi id his, ea illum nonumes luptatum pro. Usu atqui
laudem an, insolens gubergren similique est cu. Et vel modus congue vituperata.</div>
<div class="blue-started__buttons">
<a href="#!" class="blue-started__btn blue-started__white">View pricing</a>
<a href="#!" class="blue-started__btn blue-started__blue">Read documentation</a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="started__white white-started" id="documentation">
<div class="white-started__body">
<div class="white-started__title">Sign up for newsletter</div>
<div class="white-started__text">Cu qui soleat partiendo urbanitas. Eum aperiri indoctum eu, homero
alterum.</div>
</div>
<form action="GET" class="white-started__form">
<input type="email" name="email" placeholder="Email address">
<button type="submit" class="white-form__btn">Save me</button>
</form>
</div>
</div>
</section>
<footer class="footer">
<div class="footer__body">
<div class="footer__nav">
<a href="#" class="footer__logo"></a>
<nav>
<ul class="footer__items">
<li class="footer__item"><a href="#home">Home</a></li>
<li class="footer__item"><a href="#blog">Blog</a></li>
<li class="footer__item"><a href="#features">Features</a></li>
<li class="footer__item"><a href="#pricing">Pricing</a></li>
<li class="footer__item"><a href="#documentation">Documentation</a></li>
</ul>
</nav>
</div>
<div class="footer__body-social">
<nav class="footer__nav">
<ul class="footer__items footer__items-social">
<li><a href="#!"><img class="social__items-img" src="./img/header/icons/f.svg" alt="f"></a></li>
<li><a href="#!"><img class="social__items-img" src="./img/header/icons/plane.svg" alt="plane"></a>
</li>
<li><a href="#!"><img class="social__items-img" src="./img/header/icons/twitter.svg"
alt="twitter"></a>
</li>
<li><a href="#!"><img class="social__items-img" src="./img/header/icons/M.svg" alt="M"></a></li>
</ul>
</nav>
<a href="#!" class="footer__btn btn-blue">Get started</a>
</div>
</div>
<div class="footer__copyright">Copyright © 2018 by Random site</div>
</footer>
<div class="modal" id="exampleModal">
<a href="#" class="modal__area"></a>
<div class="modal-body">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Відпочинь
і послухай музику</h3>
<a href="#" class="btn-close"><img src="./img/close.png" alt="close"></a>
</div>
<div class="modal-img">
<div class='embed-container'><iframe src='https://www.youtube.com/embed//BZpGKrxGeZ0' frameborder='0'
allowfullscreen></iframe></div>
</div>
</div>
</div>
</div>
<script>
document.querySelector('.burger').addEventListener('click', function () {
this.classList.toggle('active');
document.querySelector('.burger__nav').classList.toggle('open');
});
</script>
</body>
</html>