-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.htm
More file actions
209 lines (206 loc) · 15.3 KB
/
Copy pathindex.htm
File metadata and controls
209 lines (206 loc) · 15.3 KB
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
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" type="image/svg+xml" href="img/logo/logo.svg">
<link rel="stylesheet" href="css/main.css">
<title>Home</title>
<script src="js/burgerbutton.js"></script>
<script src="js/dropdown.js"></script>
<script src="js/header.js"></script>
</head>
<body class="page-body page-body_section-margin_192 page-body_footer-margin_192">
<div class="popup-menu popup-menu_disabled">
<div class="popup-menu__grey-overlay"></div>
<div class="popup-menu__content">
<button class="popup-menu__close-button"><img class="popup-menu__close-icon" src="img/icons/close.svg"></button>
<nav class="popup-menu__navigation">
<div class="links-list links-list_drop-down links-list_drop-down_collapsed popup-menu__navigation-section">
<div class="links-list__header-container">
<h5 class="links-list__header">About US</h5><img class="links-list__drop-down-arrow" src="img/icons/drop-down-list-arrow.svg"></div>
<ul class="links-list__links-list">
<li class="links-list__element-list"><a class="links-list__link" href="index.htm#hero">About</a></li>
<li class="links-list__element-list"><a class="links-list__link" href="index.htm#what-we-do">What We Do</a></li>
<li class="links-list__element-list"><a class="links-list__link" href="index.htm#project">Project</a></li>
<li class="links-list__element-list"><a class="links-list__link" href="index.htm#clients">How It Work With Us</a></li>
</ul>
</div>
<div class="links-list links-list_drop-down links-list_drop-down_collapsed popup-menu__navigation-section">
<div class="links-list__header-container">
<h5 class="links-list__header">Blog</h5><img class="links-list__drop-down-arrow" src="img/icons/drop-down-list-arrow.svg"></div>
<ul class="links-list__links-list">
<li class="links-list__element-list"><a class="links-list__link" href="blog.html#article-search">Search</a></li>
<li class="links-list__element-list"><a class="links-list__link" href="blog.html#popular-articles">Popular Articles</a></li>
<li class="links-list__element-list"><a class="links-list__link" href="blog.html#all-articles">All Articles</a></li>
</ul>
</div>
<div class="links-list links-list_drop-down links-list_drop-down_collapsed popup-menu__navigation-section">
<div class="links-list__header-container">
<h5 class="links-list__header">Follow US</h5><img class="links-list__drop-down-arrow" src="img/icons/drop-down-list-arrow.svg"></div>
<ul class="links-list__links-list">
<li class="links-list__element-list"><a class="links-list__link" href="https://www.instagram.com/">Instagram</a></li>
<li class="links-list__element-list"><a class="links-list__link" href="https://ru-ru.facebook.com/">Facebook</a></li>
<li class="links-list__element-list"><a class="links-list__link" href="https://ru.linkedin.com">LinkedIn</a></li>
<li class="links-list__element-list"><a class="links-list__link" href="https://www.youtube.com/">Youtube</a></li>
</ul>
</div>
<div class="links-list links-list_drop-down links-list_drop-down_collapsed popup-menu__navigation-section">
<li class="links-list__element-list"><a class="links-list__link" href="contactus.html">Contact US</a></li>
</div>
</nav>
</div>
</div>
<header class="header page-body__header">
<a href="#" class="clickable-picture clickable-picture_size_48 header__navigation"><img class="clickable-picture__picture" src="img/logo/logo.svg"> </a>
<button class="clickable-picture header__burger-button clickable-picture_size_48 header__navigation"><img class="clickable-picture__picture" src="img/icons/burger_menu_control.svg"></button>
</header>
<main class="page-body__main" id="hero">
<section class="page-body__section">
<div class="hero">
<div class="hero__wrapper"><img class="hero__illustration" src="img/illustration.svg" alt="Иллюстрация">
<div class="title-with-button hero__text">
<h1 class="title-with-button__title">New Automation Tool for Your Home</h1>
<div class="title-with-button__summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Faucibus tristique vulputate ultrices ut mauris tellus at. Posuere sollicitudin odio tellus elit.</div>
<button class="button title-with-button__button"><span class="button__text">See Our Project</span></button>
</div>
</div>
</div>
</section>
<section class="page-body__section page-body__section_width-limit" id="what-we-do">
<div class="what-can-help">
<h2 class="what-can-help__header">What we do to help our client grow in digital era,</h2>
<div class="what-can-help__cards">
<div class="card-with-picture what-can-help__card">
<div class="card-with-picture__image-wrapper"><img class="card-with-picture__image" src="img/capabilities/2.svg"></div>
<h3 class="card-with-picture__header">Make Your business To Be Better Famous In Internet</h3>
<div class="card-with-picture__summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div><a class="link-with-icon card-with-picture__link" href="#"><span class="link-with-icon__text">Learn more</span> <img class="link-with-icon__icon" src="img/icons/arrow.svg"></a></div>
<div class="card-with-picture what-can-help__card">
<div class="card-with-picture__image-wrapper"><img class="card-with-picture__image" src="img/capabilities/1.svg"></div>
<h3 class="card-with-picture__header">Bring Technology To Your Comfrotable Home</h3>
<div class="card-with-picture__summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div><a class="link-with-icon card-with-picture__link" href="#"><span class="link-with-icon__text">Learn more</span> <img class="link-with-icon__icon" src="img/icons/arrow.svg"></a></div>
<div class="card-with-picture what-can-help__card">
<div class="card-with-picture__image-wrapper"><img class="card-with-picture__image" src="img/capabilities/3.svg"></div>
<h3 class="card-with-picture__header">Build Your Digital Product That Suitable For Your Need</h3>
<div class="card-with-picture__summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div><a class="link-with-icon card-with-picture__link" href="#"><span class="link-with-icon__text">Learn more</span> <img class="link-with-icon__icon" src="img/icons/arrow.svg"></a></div>
</div>
</div>
</section>
<section class="page-body__section page-body__section_width-limit" id="project">
<div class="projects">
<div class="title-with-summary projects__header">
<h2 class="title-with-summary__title">Our Finished Project</h2>
<div class="title-with-summary__summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</div>
<div class="projects__cards">
<a class="card-background-image card-background-image_text-right_up650 projects__card" href="#">
<div class="card-background-image__content">
<h3 class="card-background-image__header">Smart Home Installation</h3>
<div class="card-background-image__summary">In Muarakana Housing Estate</div>
</div>
<div class="card-background-image__background" aria-hidden="true"><img class="card-background-image__background-image" src="img/project/1.png">
<div class="card-background-image__background-gradient"></div><img class="card-background-image__background-image-overlay" src="img/project/1.1.svg"></div>
</a>
<a class="card-background-image card-background-image_text-right_up650_down870 projects__card" href="#">
<div class="card-background-image__content">
<h3 class="card-background-image__header">Sparklite App</h3>
<div class="card-background-image__summary">Marketplace</div>
</div>
<div class="card-background-image__background" aria-hidden="true"><img class="card-background-image__background-image" src="img/project/2.png">
<div class="card-background-image__background-gradient"></div>
</div>
</a>
<a class="card-background-image card-background-image_text-right_up650_down870 projects__card" href="#">
<div class="card-background-image__content">
<h3 class="card-background-image__header">Car-Rapetition App</h3>
<div class="card-background-image__summary">Board</div>
</div>
<div class="card-background-image__background" aria-hidden="true"><img class="card-background-image__background-image" src="img/project/3.png">
<div class="card-background-image__background-gradient"></div>
</div>
</a>
</div>
</div>
</section>
</main>
<footer class="footer-big page-body__footer">
<section class="footer-big__section footer-big__section_our-clients" id="clients">
<div class="our-clients footer-big__our-clients">
<div class="title-with-summary our-clients__title">
<h2 class="title-with-summary__title">Our Beloved Client</h2>
<div class="title-with-summary__summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</div>
<div class="grid-view-with-separator grid-view-with-separator_list-background-dark our-clients__logos">
<div class="grid-view-with-separator__item">
<a class="grid-view-with-separator__link" href="https://www.digitalocean.com/"><img class="grid-view-with-separator__item-content grid-view-with-separator__item-content_type_image" src="img/clients/digitalocean.png" class="mainfooter__client-logo-img"></a>
</div>
<div class="grid-view-with-separator__item">
<a class="grid-view-with-separator__link" href="https://github.com/"><img class="grid-view-with-separator__item-content grid-view-with-separator__item-content_type_image" src="img/clients/github.png" class="mainfooter__client-logo-img"></a>
</div>
<div class="grid-view-with-separator__item">
<a class="grid-view-with-separator__link" href="https://www.google.ru/"><img class="grid-view-with-separator__item-content grid-view-with-separator__item-content_type_image" src="img/clients/google.png" class="mainfooter__client-logo-img"></a>
</div>
<div class="grid-view-with-separator__item">
<a class="grid-view-with-separator__link" href="https://vk.com/"><img class="grid-view-with-separator__item-content grid-view-with-separator__item-content_type_image" src="img/clients/vk.png" class="mainfooter__client-logo-img"></a>
</div>
<div class="grid-view-with-separator__item">
<a class="grid-view-with-separator__link" href="https://www.microsoft.com/"><img class="grid-view-with-separator__item-content grid-view-with-separator__item-content_type_image" src="img/clients/microsoft.png" class="mainfooter__client-logo-img"></a>
</div>
<div class="grid-view-with-separator__item">
<a class="grid-view-with-separator__link" href="https://www.mozilla.org/"><img class="grid-view-with-separator__item-content grid-view-with-separator__item-content_type_image" src="img/clients/mozilla.png" class="mainfooter__client-logo-img"></a>
</div>
<div class="grid-view-with-separator__item">
<a class="grid-view-with-separator__link" href="https://www.spotify.com/"><img class="grid-view-with-separator__item-content grid-view-with-separator__item-content_type_image" src="img/clients/spotify.png" class="mainfooter__client-logo-img"></a>
</div>
<div class="grid-view-with-separator__item"><a class="grid-view-with-separator__link" href="#"><span class="grid-view-with-separator__item-content grid-view-with-separator__item-content_type_text">More Client</span></a></div>
</div>
</div>
</section>
<div class="footer footer-big__footer">
<section class="footer__section">
<div class="title-with-button title-with-button_column footer__work-with-our-team">
<h3 class="title-with-button__title">Intersted to work with our team?</h3>
<div class="title-with-button__summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
<button class="button title-with-button__button"><span class="button__text">Let`s Talk</span></button>
</div>
</section>
<hr class="separator separator_color_white footer__separator">
<section class="footer__section">
<div class="company-information footer__company-information">
<div class="company-information__short-information">
<div class="full-logo company-information__logo"><img class="full-logo__logo" src="img/logo/logo-light.svg"> <span class="full-logo__company-name">Afrianska</span></div>
<ul class="list-various-marker company-information__contacts">
<li class="list-various-marker__element"><span class="list-various-marker__marker">A. </span><span class="list-various-marker__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></li>
<li class="list-various-marker__element"><span class="list-various-marker__marker">T. </span><span class="list-various-marker__text">+62-812-7313-4321</span></li>
<li class="list-various-marker__element"><span class="list-various-marker__marker">E. </span><span class="list-various-marker__text">hello.afrian@gmail.com</span></li>
</ul>
</div>
<div class="links-list links-list_margin-header company-information__about-us">
<div class="links-list__header-container">
<h5 class="links-list__header">About US</h5></div>
<ul class="links-list__links-list">
<li class="links-list__element-list"><a class="links-list__link" href="index.htm#hero">About</a></li>
<li class="links-list__element-list"><a class="links-list__link" href="index.htm#what-we-do">What We Do</a></li>
<li class="links-list__element-list"><a class="links-list__link" href="index.htm#project">Project</a></li>
<li class="links-list__element-list"><a class="links-list__link" href="index.htm#clients">How It Work With Us</a></li>
</ul>
</div>
<div class="links-list links-list_margin-header company-information__follow-us">
<div class="links-list__header-container">
<h5 class="links-list__header">Follow US</h5></div>
<ul class="links-list__links-list">
<li class="links-list__element-list"><a class="links-list__link" href="https://www.instagram.com/">Instagram</a></li>
<li class="links-list__element-list"><a class="links-list__link" href="https://ru-ru.facebook.com/">Facebook</a></li>
<li class="links-list__element-list"><a class="links-list__link" href="https://ru.linkedin.com">LinkedIn</a></li>
<li class="links-list__element-list"><a class="links-list__link" href="https://www.youtube.com/">Youtube</a></li>
</ul>
</div>
</div>
</section>
<section class="footer__section">
<div class="copyright footer__copyright"><span class="copyright__text">2019 © Afrianska. All rights reserved.</span></div>
</section>
</div>
</footer>
</body>
</html>