-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
201 lines (190 loc) · 6.63 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DroneZone</title>
<link rel="stylesheet" href="css/app.css" />
<!-- <link rel="stylesheet" href="http://basehold.it/30"> -->
</head>
<body>
<header class="primary-header">
<div class="primary-header__row">
<div class="primary-header__logo">
<a href="#" class="logo logo--light">Drone<span>Zone</span></a>
</div>
<div class="primary-header__nav-toggle">
<a class="nav-toggle">
<span></span>
</a>
</div>
<nav class="primary-nav mobile-nav">
<ul class="nav-list">
<li class="nav-list__item">
<a href="#">Home</a>
</li>
<li class="nav-list__item">
<a href="#">About</a>
</li>
<li class="nav-list__item">
<a href="#">Prizing</a>
</li>
<li class="nav-list__item">
<a href="#">Our drones</a>
</li>
<li class="nav-list__item">
<a href="#">Our realizations</a>
</li>
<li class="nav-list__item">
<a href="#" class="button button--ghost button--small">Contact</a>
</li>
</ul>
</nav>
</div>
</header>
<section class="hero">
<div class="hero__content">
<h1 class="hero__title">Film your events with us!</h1>
<p class="hero__intro">Pellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</p>
<div class="hero__cta button-group">
<a href="#" class="button button--light">
Ask for price
</a>
<a href="#" class="button button--ghost">
<img src="imgs/play-icon.svg" /> Watch video
</a>
</div>
</div>
<div class="hero__scroll scroll">
<div class="scroll__icon"></div>
<span class="scroll__text">scroll down</span>
</div>
</section>
<section class="features">
<div class="grid__wrapper">
<div class="features__items grid__row">
<div class="features__col grid__col">
<div class="features__item">
<img src="imgs/feature-icons/from-air.gif" alt="From Air Icon" />
<div class="features__title">
<h2 class="text-gradient">From air</h2>
</div>
<p>llentesque eget nunc sit amet urna ullamcorper fermentum et eu leo.</p>
</div>
</div>
<div class="features__col grid__col">
<div class="features__item">
<img src="imgs/feature-icons/best-drones.gif" alt="Best Drones Icon" />
<div class="features__title">
<h2 class="text-gradient">Best drones</h2>
</div>
<p>llentesque eget nunc sit amet urna ullamcorper fermentum et eu leo.</p>
</div>
</div>
<div class="features__col grid__col">
<div class="features__item">
<img src="imgs/feature-icons/speed.gif" alt="Speed Icon" />
<div class="features__title">
<h2 class="text-gradient">Speed</h2>
</div>
<p>llentesque eget nunc sit amet urna ullamcorper fermentum et eu leo.</p>
</div>
</div>
<div class="features__col grid__col">
<div class="features__item">
<img src="imgs/feature-icons/long-range.gif" alt="Long Range Icon" />
<div class="features__title">
<h2 class="text-gradient">Long range</h2>
</div>
<p>llentesque eget nunc sit amet urna ullamcorper fermentum et eu leo.</p>
</div>
</div>
</div>
<div class="features__cta">
<a href="#" class="button button--dark">Ask for price</a>
</div>
</div>
</section>
<section class="info">
<div class="grid__wrapper">
<div class="info__intro">
<div class="info__title">
<h1 class="text-gradient">Nature from the air</h1>
</div>
<p>Mauris consequat libero metus, nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan. Integer sit amet lacus egestas, semper est quis, viverra ex.</p>
</div>
<div class="info__points points">
<ol>
<li>
<p>Pellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</p>
</li>
<li>
<p>Mauris consequat libero metus, nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan.</p>
</li>
<li>
<p>Integer sit amet lacus egestas, semper est quis, viverra ex. Mauris consequat libero metus, nec ultricies sem efficitur quis.</p>
</li>
<li>
<p>Pellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.</p>
</li>
<li>
<p>Mauris consequat libero metus, nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan.</p>
</li>
</ol>
</div>
</div>
</section>
<section class="vid-info">
<div class="vid-info__video">
<img class="vid-info__placeholder" src="imgs/video/video-placeholder-1.jpg" />
</div>
<div class="grid__wrapper">
<div class="vid-info__info">
<div class="vid-info__title">
<h1 class="text-gradient">Nature from the air</h1>
</div>
<p>Pellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan.</p>
<div class="vid-info__cta">
<a href="#" class="button button--dark">Ask for price</a>
</div>
</div>
</div>
</section>
<section class="vid-info vid-info--alt">
<div class="vid-info__video">
<img class="vid-info__placeholder" src="imgs/video/video-placeholder-2.jpg" />
</div>
<div class="grid__wrapper">
<div class="vid-info__info">
<div class="vid-info__title">
<h1 class="text-gradient">City from the air</h1>
</div>
<p>Mauris consequat libero metus, nec ultricies sem efficitur quis. Integer bibendum eget metus ac accumsan. Integer sit amet lacus egestas, semper est quis, viverra ex. Pellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo.</p>
<div class="vid-info__cta">
<a href="#" class="button button--dark">Ask for price</a>
</div>
</div>
</div>
</section>
<section class="newsletter">
<div class="grid__wrapper">
<h1>Sign up for our newsletter</h1>
<div class="newsletter__input input-inline">
<input type="text" placeholder="Email address" />
<input type="submit" class="button button--light" value="Send" />
</div>
</div>
</section>
<section class="map">
<img src="imgs/map.jpg">
</section>
<footer class="primary-footer">
<div class="grid__wrapper">
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>PSD from <a href="https://symu.co/freebies/templates-4/drone-zone-website-template">symu.co</a></p>
</div>
</footer>
<!-- scripts -->
<script src="js/main.js"></script>
</body>
</html>