-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
210 lines (197 loc) · 11.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloudBudget</title>
<link rel="stylesheet" href="./styles/normalize.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<div class="page">
<div class="overlay">
<header class="header">
<a href="#" class="logo"><img src="images/Vector.svg" class="logo__pic" alt="logo">CLOUDBUDGET</a>
<nav class="menu">
<ul class="menu__links">
<li class="menu__item"><a href="#" class="menu__anchor">Overview</a></li>
<li class="menu__item"><a href="#" class="menu__anchor">Features</a></li>
<li class="menu__item"><a href="#" class="menu__anchor">Technology</a></li>
<li class="menu__item"><a href="#" class="menu__anchor">Contact</a></li>
<li class="menu__item"><a href="#" class="menu__anchor">Sign up</a></li>
</ul>
</nav>
<div class="select-lang">
<img src="images/emojione-flag-for-flag-united-states.png" class="select-lang__flag-pic" alt="en">
<select class="select-lang__select">
<option class="select-lang__name-item">EN</option>
<option class="select-lang__name-item">RU</option>
</select>
<div class="select-lang__down-outline"></div>
<button class="button button_login">Login</button>
</div>
</header>
<section class="description">
<h1 class="description__title">CloudBudget</h1>
<p class="description__subtitle">Cloud budget management for everyone. Only €69.95 a Month After a 7 Day Trial of <br> Up to €4.99</p>
<button class="button button_sign-up">Sign up</button>
<div class="description__linear"></div>
</section>
</div>
<section class="video">
<div class="two-columns">
<div class="two-columns__main-text">
<h2 class="two-columns__title">Easy to Use Cloud Budget Management Software</h2>
<p class="two-columns__subtitle">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="two-columns__link">Learn more</a>
</div>
<div class="two-columns__main-video">
<video class="two-columns__video-pic"></video>
<div class="two-columns__video-button"></div>
</div>
</div>
</section>
<section class="features">
<h2 class="features__title">Features</h2>
<ul class="cards">
<li class="card">
<div class="card__image card__image_theme_currency"></div>
<div class="card__text-box">
<div class="card__text">
<h3 class="card__text-title">Supports All Currencies and Cards</h3>
<p class="card__text-subtitle">We support all popular currencies and is fully customizable to add</p>
<a href="#" class="card__link">Read more</a>
</div>
</div>
</li>
<li class="card">
<div class="card__image card__image_theme_on-the-go"></div>
<div class="card__text-box">
<div class="card__text">
<h3 class="card__text-title">Manage your expenses on the go</h3>
<p class="card__text-subtitle">You can access your account from anywhere in the world on any device</p>
<a href="#" class="card__link">Read more</a>
</div>
</div>
</li>
<li class="card">
<div class="card__image card__image_theme_software"></div>
<div class="card__text-box">
<div class="card__text">
<h3 class="card__text-title">Cloud Budget Management Software</h3>
<p class="card__text-subtitle">Our software is made so you can access and manage your budget</p>
<a href="#" class="card__link">Read more</a>
</div>
</div>
</li>
</ul>
</section>
<section class="technology">
<h2 class="technology__title">Technology</h2>
<ul class="technology__cards">
<li class="technology__card">
<div class="technology__number">01</div>
<div class="technology__icon technology__icon_theme_cloud"></div>
<h3 class="technology__text-title">Cloud Storage</h3>
<p class="technology__text-subtitle">Access your account from anywhere in the world on any device</p>
</li>
<li class="technology__card">
<div class="technology__number">02</div>
<div class="technology__icon technology__icon_theme_secure"></div>
<h3 class="technology__text-title">Secure</h3>
<p class="technology__text-subtitle">All your information is stored on secure cloud servers</p>
</li>
<li class="technology__card">
<div class="technology__number">03</div>
<div class="technology__icon technology__icon_theme_pdf"></div>
<h3 class="technology__text-title">PDF Download</h3>
<p class="technology__text-subtitle">Download any of your reports in PDF format</p>
</li>
<li class="technology__card">
<div class="technology__number">04</div>
<div class="technology__icon technology__icon_theme_csv"></div>
<h3 class="technology__text-title">CSV Download</h3>
<p class="technology__text-subtitle">All your information is stored on secure cloud servers</p>
</li>
</ul>
</section>
<section class="download">
<div class="two-columns">
<div class="two-columns__main-text_theme_download">
<h2 class="two-columns__title two-columns__title_theme_red">Stay focused on saving money</h2>
<p class="two-columns__subtitle two-columns__subtitle_theme_red">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-links">
<li class="download-links__item"><a href="#" class="download-links__anchor"><img src="./images/ion-logo-google-playstore.svg" class="download-links__icon" alt="google playstore"></a></li>
<li class="download-links__item"><a href="#" class="download-links__anchor"><img src="./images/ion-logo-apple-appstore.svg" class="download-links__icon" alt="apple appstore"></a></li>
<li class="download-links__item"><a href="#" class="download-links__anchor"><img src="./images/simple-icons_windows.svg" class="download-links__icon download-links__icon_windows" alt="windows"></a></li>
</ul>
</div>
<div class="two-columns__slider">
<div class="two-columns__slider_image_top"></div>
<div class="two-columns__slider_image_left"></div>
<div class="two-columns__slider_image_right"></div>
</div>
</div>
</section>
<section class="contact">
<div class="two-columns two-columns_theme_contact">
<div class="two-columns__main-text two-columns__main-text_theme_contact">
<h2 class="two-columns__title">Contact</h2>
<p class="two-columns__subtitle">Questions or concerns? Just fill out the form below and our support team will get back to you within 24 hours</p>
</div>
<form class="form-container">
<input type="text" class="form-container__item form-container__item_el_name" placeholder="First Name">
<input type="text" class="form-container__item form-container__item_el_name" placeholder="Last Name">
<input type="text" class="form-container__item form-container__item_el_phone" placeholder="Phone Number">
<select class="form-container__item form-container__item_el_selection">
<option class="form-container__item form-container__item_el_option">Select Service</option>
<option class="form-container__item form-container__item_el_option">Select Service</option>
</select>
<button class="button button_submit">Submit Now</button>
</form>
</div>
</section>
<footer class="footer">
<div class="footer__columns">
<div class="footer__column footer__column_content_copyright">
<h3 class="footer__column-heading">Address</h3>
<p class="footer__column-subheading footer__column-subheading_address">Pipang Ltd, Griva Digeni, <br>81-83 Jacovides Tower, 1st Floor <br>1090 Picosia USA</p>
<p class="footer__column-subheading footer__column-subheading_author">Copyright 2018 CloudBudget</p>
</div>
<div class="footer__column footer__column_content_info">
<h3 class="footer__column-heading">Services</h3>
<nav class="footer__navigation">
<ul class="footer__column-links">
<li class="footer__column-subheading footer__column-subheading_link"><a href="#" class="footer__column-anchor">Overview</a>
</li>
<li class="footer__column-subheading footer__column-subheading_link"><a href="#" class="footer__column-anchor">Features</a>
</li>
<li class="footer__column-subheading footer__column-subheading_link"><a href="#" class="footer__column-anchor">Technology</a>
</li>
<li class="footer__column-subheading footer__column-subheading_link"><a href="#" class="footer__column-anchor">Terms & Conditions</a>
</li>
<li class="footer__column-subheading footer__column-subheading_link"><a href="#" class="footer__column-anchor">Privecy</a>
</li>
</ul>
</nav>
</div>
<div class="footer__column footer__column_content_social">
<h3 class="footer__column-heading">Get in Touch</h3>
<a href="mailto:[email protected]" class="footer__column-subheading footer__column-subheading_email">[email protected]</a>
<p class="footer__column-subheading footer__column-subheading_phone">+1 844-721-7120</p>
<ul class="footer__column-icons">
<li class="footer__column-icons-item"><a href="#" class="footer__column-anchor"><img src="./images/feather-facebook.svg" class="footer__social-icon" alt="facebook"></a></li>
<li class="footer__column-icons-item"><a href="#" class="footer__column-anchor"><img src="./images/feather-linkedin.svg" class="footer__social-icon" alt="linkedin"></a></li>
<li class="footer__column-icons-item"><a href="#" class="footer__column-anchor"><img src="./images/feather-twitter.svg" class="footer__social-icon" alt="twitter"></a></li>
</ul>
</div>
<div class="footer__column footer__column_content_support">
<h3 class="footer__column-heading">We Support</h3>
<img src="./images/secure.png" class="footer__column-support" alt="secure">
</div>
</div>
</footer>
</div>
</body>
</html>