generated from mosiichuk/frontend-base
/
index.html
104 lines (90 loc) · 3.66 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>${require('../config/site.config.js').site_name}</title>
<meta name="description" content="${require('../config/site.config.js').site_description}"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Rubik:wght@400;500&display=swap"
rel="stylesheet">
</head>
<body>
<header class="header" id="header">
<div class="container">
<div class="row">
<div class="col">
<nav class="d-flex align-items-center justify-content-between justify-content-md-start">
<a href="/" class="logo">
<img src="./img/logo.svg" alt="Logo">
</a>
<div id="menuToggle" class="menu-toggle d-md-none">
<input type="checkbox"/>
<div></div>
<div></div>
<div></div>
</div>
<div class="menu">
<div class="menu-list">
<a href="#" class="menu-item">About</a>
<a href="#" class="menu-item">Gallery</a>
<a href="#" class="menu-item">Pricing</a>
<a href="#" class="menu-item">FAQ</a>
<a href="#" class="menu-item">Benefits</a>
</div>
<div class="d-flex flex-column flex-md-row">
<a href="#" class="button button-ghost mb-4 mb-md-0 me-md-4">Sign in</a>
<a href="#" class="button button-cta">Sign up</a>
</div>
</div>
</nav>
</div>
</div>
</div>
</header>
<section class="hero" id="hero">
<div id="particle-slider" class="hero-img">
<div class="slides">
<div class="slide"
data-src="./img/hero.svg">
</div>
</div>
<canvas class="draw"></canvas>
</div>
<div class="container">
<div class="row">
<div class="col-12 col-xl-5 text-center text-xl-start">
<div class="content">
<h1 class="title">
Many reasons to get up and start to get back in the business
</h1>
<p class="description">
The harder you work for something, the greater you’ll feel when you achieve
it.
</p>
<div class="actions">
<a href="#" class="button button-ghost me-4">Sign in</a>
<a href="#" class="button button-cta">Sign up</a>
</div>
<div class="video-banner text-start">
<a href="#" class="preview">
<img src="./img/play-icon.svg" alt="Play icon">
</a>
<div>
<p class="description">
The harder you work for something, the greater you’ll feel when you
achieve it.
</p>
<a href="#" class="preview-button">
Watch preview
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="./js/particle.js"></script>
</body>
</html>