-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
402 lines (378 loc) · 20.4 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
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
<!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>CloudBudget</title>
<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=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="top-screen">
<div class="container">
<header class="header">
<div class="logo">
<a href="#">
<img src="images/logo.svg" alt="Company Logo">
</a>
</div>
<nav class="nav">
<ul class="menu">
<li class="menu-item">
<a class="menu-link active" href="#">Overview</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">Features</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">Technology</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">Contact</a>
</li>
<li class="menu-item">
<a class="menu-link" href="#">Sign Up</a>
</li>
</ul>
</nav>
<div class="user-block">
<a class="btn user-block-login-link" href="#">Login</a>
</div>
</header>
<div class="hero">
<h1 class="hero-title">CloudBudget</h1>
<p class="hero-descr">
Cloud budget management for everyone. Only €69.95 a Month After a 7 Day Trial of
Up to €4.99
</p>
<a class="btn hero-btn" href="#">Sign Up</a>
</div>
</div>
</div>
<main>
<section class="video">
<div class="container">
<div class="section-inner">
<div class="section-column">
<h2 class="section-title">
Easy to Use Cloud Budget Management Software
</h2>
<p class="video-descr">
Our software is made so you can access and manage your budget and expenses online at any time from any
device. It provides detailed income and expense reports with graphs so you can easilly see your spending
patterns and budget at a glance. Read below to find out more.
</p>
<a href="#" class="video-link">Learn More</a>
</div>
<div class="video-column">
<video class="video-player" width="445" height="311" controls="controls" poster="images/poster.jpg">
<source src="video/video.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="video/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="video/video.webm" type='video/webm; codecs="vp8, vorbis"'>
Тег video не поддерживается вашим браузером.
</video>
</div>
</div>
</div>
</section>
<section class="features">
<div class="container">
<h2 class="section-title features-title">Features</h2>
<ul class="features-list">
<li class="features-item">
<div class="features-item-inner">
<h3 class="features-item-title">Supports All Currencies and Cards Supports All Currencies and Cards</h3>
<p class="features-descr">
We support all popular currencies and is fully customizable to add
We support all popular currencies and is fully customizable to add
We support all popular currencies and is fully customizable to add
We support all popular currencies and is fully customizable to add
We support all popular currencies and is fully customizable to add
We support all popular currencies and is fully customizable to add
</p>
<a href="#" class="features-link">Read More</a>
</div>
</li>
<li class="features-item">
<div class="features-item-inner">
<h3 class="features-item-title">Supports All Currencies and Cards Supports All Currencies and Cards</h3>
<p class="features-descr">
We support all popular currencies and is fully customizable to add
</p>
<a href="#" class="features-link">Read More</a>
</div>
</li>
<li class="features-item">
<div class="features-item-inner">
<h3 class="features-item-title">Manage your expenses on the go</h3>
<p class="features-descr">
You can access your account from anywhere in the world on any device Lorem ipsum dolor sit amet
consectetur adipisicing elit.
</p>
<a href="#" class="features-link">Read More</a>
</div>
</li>
<li class="features-item">
<div class="features-item-inner">
<h3 class="features-item-title">Manage your expenses on the go</h3>
<p class="features-descr">
You can access your account from anywhere in the world on any device
You can access your account from anywhere in the world on any device
You can access your account from anywhere in the world on any device
You can access your account from anywhere in the world on any device
You can access your account from anywhere in the world on any device
</p>
<a href="#" class="features-link">Read More</a>
</div>
</li>
<li class="features-item">
<div class="features-item-inner">
<h3 class="features-item-title">Cloud Budget Management Software</h3>
<p class="features-descr">
Our software is made so you can access and manage your budget
</p>
<a href="#" class="features-link">Read More</a>
</div>
</li>
<li class="features-item">
<div class="features-item-inner">
<h3 class="features-item-title">Cloud Budget Management Software</h3>
<p class="features-descr">
Our software is made so you can access and manage your budget
</p>
<a href="#" class="features-link">Read More</a>
</div>
</li>
</ul>
</div>
</section>
<section class="technology">
<div class="container">
<h2 class="section-title technology-title">Technology</h2>
<ol class="technology-list">
<li class="technology-item">
<h3 class="technology-item-title">Cloud Storage</h3>
<p class="technology-descr">
Access your account from anywhere in the world on any device
</p>
</li>
<li class="technology-item">
<h3 class="technology-item-title technology-item-title-secure">Secure</h3>
<p class="technology-descr">
All your information is stored on secure cloud servers
</p>
</li>
<li class="technology-item">
<h3 class="technology-item-title technology-item-title-pdf">PDF Download</h3>
<p class="technology-descr">
Download any of your reports in PDF format
</p>
</li>
<li class="technology-item">
<h3 class="technology-item-title technology-item-title-csv">CSV Download</h3>
<p class="technology-descr">
All your information is stored on secure cloud servers
</p>
</li>
</ol>
</div>
</section>
<section class="download">
<div class="container">
<div class="section-inner">
<div class="section-column">
<h2 class="section-title download-title">Stay focused on saving money</h2>
<p class="download-descr">
It is important to stay focused on saving money in any way you can. We help you monitor your spending
habits so you can easily spot and cut any unnecessary expenses. Simply join today to get started!
</p>
<ul class="download-list">
<li class="download-item">
<a class="download-link" href="#">
<span class="sr-only">Скачать в плеймаркете</span>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3 3.71803V28.2805C3.00016 28.3338 3.01606 28.3859 3.04569 28.4302C3.07532 28.4745 3.11737 28.509 3.16656 28.5295C3.21575 28.55 3.2699 28.5555 3.32222 28.5454C3.37453 28.5352 3.42268 28.5098 3.46062 28.4724L16.25 15.9999L3.46062 3.52616C3.42268 3.48874 3.37453 3.46336 3.32222 3.45321C3.2699 3.44305 3.21575 3.44856 3.16656 3.46905C3.11737 3.48954 3.07532 3.5241 3.04569 3.56839C3.01606 3.61269 3.00016 3.66474 3 3.71803Z"
fill="white" />
<path
d="M21.6125 10.8749L5.57627 2.03994L5.56627 2.03432C5.29002 1.88432 5.02752 2.25807 5.25377 2.47557L17.8244 14.4956L21.6125 10.8749Z"
fill="white" />
<path
d="M5.25499 29.5244C5.02749 29.7419 5.28999 30.1157 5.56749 29.9657L5.57749 29.96L21.6125 21.125L17.8244 17.5032L5.25499 29.5244Z"
fill="white" />
<path
d="M28.0863 14.4374L23.6081 11.9712L19.3975 15.9999L23.6081 20.0268L28.0863 17.5624C29.3044 16.8893 29.3044 15.1106 28.0863 14.4374Z"
fill="white" />
</svg>
</a>
</li>
<li class="download-item">
<a class="download-link" href="#">
<span class="sr-only">Скачать в Appstore</span>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M16 2C8.26625 2 2 8.26625 2 16C2 23.7337 8.26625 30 16 30C23.7337 30 30 23.7337 30 16C30 8.26625 23.7337 2 16 2ZM10.6875 22.1181C10.6016 22.2647 10.4786 22.386 10.3309 22.4699C10.1833 22.5538 10.0161 22.5974 9.84625 22.5963C9.67314 22.5978 9.50303 22.551 9.355 22.4613C9.24478 22.3974 9.14826 22.3124 9.07098 22.2111C8.9937 22.1098 8.93718 21.9943 8.90466 21.8711C8.87214 21.748 8.86426 21.6196 8.88148 21.4934C8.8987 21.3672 8.94068 21.2456 9.005 21.1356L9.96062 19.5469C10.0089 19.4649 10.0778 19.3969 10.1605 19.3498C10.2431 19.3026 10.3367 19.2779 10.4319 19.2781H10.5731C11.2662 19.2781 11.7513 19.695 11.8925 20.0987L10.6875 22.1181ZM18.7781 18.9931L12.52 19H8.36063C8.22976 19.0006 8.10015 18.9745 7.97965 18.9235C7.85915 18.8724 7.75027 18.7974 7.65963 18.7031C7.56898 18.6087 7.49845 18.4968 7.45232 18.3744C7.40618 18.2519 7.38541 18.1214 7.39125 17.9906C7.41125 17.4656 7.86937 17.0681 8.39125 17.0681H11.4062L14.9806 10.9838L13.8231 9.01188C13.5625 8.5625 13.6781 7.97 14.125 7.6875C14.2352 7.61625 14.3586 7.56801 14.4879 7.54569C14.6172 7.52337 14.7497 7.52742 14.8773 7.5576C15.005 7.58779 15.1253 7.64348 15.2309 7.72133C15.3365 7.79918 15.4253 7.89759 15.4919 8.01062L16.1106 9.0675H16.1175L16.7369 8.01062C16.8036 7.89817 16.8922 7.8003 16.9975 7.72284C17.1028 7.64538 17.2227 7.58991 17.3499 7.55976C17.4771 7.52961 17.609 7.52538 17.7379 7.54732C17.8668 7.56927 17.9899 7.61694 18.1 7.6875C18.5444 7.97 18.6588 8.5625 18.3962 9.01375L17.2388 10.9856L16.1138 12.9038L13.6706 17.07V17.0769H17.2712C17.7225 17.0769 18.2881 17.3194 18.5169 17.7094L18.5369 17.75C18.7388 18.0931 18.8531 18.3288 18.8531 18.6719C18.8498 18.7833 18.825 18.893 18.78 18.995L18.7781 18.9931ZM23.6375 19H21.9431V19.0069L23.1819 21.1138C23.3151 21.3356 23.3559 21.601 23.2955 21.8526C23.235 22.1043 23.0782 22.3222 22.8587 22.4594C22.7066 22.5521 22.5319 22.6012 22.3538 22.6012C22.1844 22.6012 22.0179 22.5573 21.8705 22.4738C21.723 22.3904 21.5997 22.2702 21.5125 22.125L19.6819 19.0088L18.5444 17.0713L17.0769 14.5625C16.8643 14.2043 16.7488 13.7969 16.7417 13.3804C16.7345 12.9639 16.8361 12.5528 17.0362 12.1875C17.3262 11.6756 17.5481 11.5413 17.5481 11.5413L20.8125 17.0625H23.6194C24.1444 17.0625 24.595 17.4663 24.6194 17.9844C24.6244 18.1161 24.6028 18.2475 24.5558 18.3707C24.5088 18.4938 24.4374 18.6062 24.3458 18.7011C24.2543 18.7959 24.1445 18.8713 24.0231 18.9227C23.9017 18.974 23.7712 19.0003 23.6394 19H23.6375Z"
fill="white" />
</svg>
</a>
</li>
<li class="download-item">
<a class="download-link" href="#">
<span class="sr-only">Скачать в Appstore</span>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M0 3.449L9.75 2.1V11.551H0V3.449ZM10.949 1.949L24 0V11.4H10.949V1.949ZM0 12.6H9.75V22.051L0 20.699V12.6ZM10.949 12.6H24V24L11.1 22.199"
fill="white" />
</svg>
</a>
</li>
</ul>
</div>
<div class="section-column">
<div class="download-slider">
<img src="images/Slider.jpg" alt="Slider">
</div>
</div>
</div>
</div>
</section>
<section class="contact">
<div class="container">
<div class="section-inner contact-inner">
<div class="section-column">
<h2 class="seciton-title contact-title">Contact</h2>
<p class="contact-txt">
Questions or concerns? Just fill out the form below and our support team will get back to you within 24
hours
</p>
</div>
<div class="section-column contact-form-wrapper">
<form class="contact-form">
<input class="contact-text-input" type="text" name="firstname" placeholder="First Name">
<input class="contact-text-input" type="text" name="lastname" placeholder="Last Name">
<input class="contact-text-input contact-phone" type="tel" name="phone" placeholder="Phone Number">
<input class="contact-text-input contact-question" name="question" placeholder="Your question">
<button class="btn contact-btn">Submit Now</button>
</form>
</div>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="container">
<div class="footer-inner">
<div class="footer-addres">
<h3>Address</h3>
<p>
Pipang Ltd, Griva Digeni <br>
81-83 Jacovides Tower, 1st Floor <br>
1090 Picosia USA
</p>
</div>
<div class="footer-services">
<h3 class="footer-col-title">Services</h3>
<ul>
<li>
<a href="#">Overview</a>
</li>
<li>
<a href="#">Features</a>
</li>
</ul>
<ul>
<li>
<a href="#">Terms & Conditions</a>
</li>
<li>
<a href="#">Privacy</a>
</li>
</ul>
</div>
<div class="footer-contacts">
<h3 class="footer-contacts-title">Get in Touch</h3>
<ul>
<li>
<a href="mailto:info@cloudbudget.com">info@cloudbudget.com</a>
</li>
<li>
<a href="tel:+18447217120">+1 844-721-7120</a>
</li>
</ul>
<ul class="footer-socials">
<li>
<a href="#">
<span class="sr-only">Facebook</span>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M10.5 1.16675H8.75C7.97645 1.16675 7.23458 1.47404 6.6876 2.02102C6.14062 2.568 5.83333 3.30987 5.83333 4.08342V5.83342H4.08333V8.16675H5.83333V12.8334H8.16666V8.16675H9.91666L10.5 5.83342H8.16666V4.08342C8.16666 3.92871 8.22812 3.78033 8.33752 3.67094C8.44692 3.56154 8.59529 3.50008 8.75 3.50008H10.5V1.16675Z"
fill="#101010" />
</svg>
</a>
</li>
<li>
<a href="#">
<span class="sr-only">Facebook</span>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M9.33334 4.66675C10.2616 4.66675 11.1518 5.0355 11.8082 5.69187C12.4646 6.34825 12.8333 7.23849 12.8333 8.16675V12.2501H10.5V8.16675C10.5 7.85733 10.3771 7.56058 10.1583 7.34179C9.9395 7.123 9.64276 7.00008 9.33334 7.00008C9.02392 7.00008 8.72717 7.123 8.50838 7.34179C8.28959 7.56058 8.16667 7.85733 8.16667 8.16675V12.2501H5.83334V8.16675C5.83334 7.23849 6.20208 6.34825 6.85846 5.69187C7.51484 5.0355 8.40508 4.66675 9.33334 4.66675Z"
fill="#101010" />
<path d="M1.16667 5.25H3.5V12.25H1.16667V5.25Z" fill="#101010" />
<path
d="M2.33333 3.50008C2.97767 3.50008 3.5 2.97775 3.5 2.33341C3.5 1.68908 2.97767 1.16675 2.33333 1.16675C1.689 1.16675 1.16667 1.68908 1.16667 2.33341C1.16667 2.97775 1.689 3.50008 2.33333 3.50008Z"
fill="#101010" />
</svg>
</a>
</li>
<li>
<a href="#">
<span class="sr-only">Facebook</span>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M9.33334 4.66675C10.2616 4.66675 11.1518 5.0355 11.8082 5.69187C12.4646 6.34825 12.8333 7.23849 12.8333 8.16675V12.2501H10.5V8.16675C10.5 7.85733 10.3771 7.56058 10.1583 7.34179C9.9395 7.123 9.64276 7.00008 9.33334 7.00008C9.02392 7.00008 8.72717 7.123 8.50838 7.34179C8.28959 7.56058 8.16667 7.85733 8.16667 8.16675V12.2501H5.83334V8.16675C5.83334 7.23849 6.20208 6.34825 6.85846 5.69187C7.51484 5.0355 8.40508 4.66675 9.33334 4.66675Z"
fill="#101010" />
<path d="M1.16667 5.25H3.5V12.25H1.16667V5.25Z" fill="#101010" />
<path
d="M2.33333 3.50008C2.97767 3.50008 3.5 2.97775 3.5 2.33341C3.5 1.68908 2.97767 1.16675 2.33333 1.16675C1.689 1.16675 1.16667 1.68908 1.16667 2.33341C1.16667 2.97775 1.689 3.50008 2.33333 3.50008Z"
fill="#101010" />
</svg>
</a>
</li>
<li>
<a href="#">
<span class="sr-only">Facebook</span>
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M13.4167 1.75001C12.8581 2.14403 12.2396 2.4454 11.585 2.64251C11.2337 2.23855 10.7668 1.95224 10.2474 1.8223C9.7281 1.69235 9.18137 1.72504 8.68122 1.91594C8.18106 2.10684 7.75159 2.44674 7.45091 2.88967C7.15022 3.33261 6.99283 3.8572 7 4.39251V4.97584C5.97487 5.00242 4.95908 4.77506 4.04309 4.31402C3.1271 3.85297 2.33935 3.17254 1.75 2.33334C1.75 2.33334 -0.583331 7.58334 4.66667 9.91667C3.46531 10.7322 2.03418 11.141 0.583336 11.0833C5.83333 14 12.25 11.0833 12.25 4.37501C12.2495 4.21252 12.2338 4.05044 12.2033 3.89084C12.7987 3.30371 13.2188 2.56242 13.4167 1.75001Z"
fill="#101010" />
</svg>
</a>
</li>
</ul>
</div>
<div class="footer-support">
<h3 class="footer-col-title">We Support</h3>
<ul class="footer-support-logos">
<li>
<img src="./images/visa.png" alt="">
</li>
<li>
<img src="./images/master-card.png" alt="">
</li>
<li>
<img src="./images/master-card.png" alt="">
</li>
</ul>
</div>
<div class="footer-copy">
<p>Copyright 2018 CloudBudget</p>
</div>
</div>
</div>
</footer>
</body>
</html>