-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
223 lines (220 loc) · 12.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
<!DOCTYPE html>
<html class="page" lang="ru">
<head>
<meta charset="utf-8">
<title>Интернет магазин Nёrd's</title>
<link rel="icon" href="favikon.ico">
<link rel="icon" href="img/favicons/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="img/favicons/180x180.png">
<link rel="manifest" href="manifest.webmanifest">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.min.css">
</head>
<body class="page_body">
<!-- -----------------------Main header -->
<header class="main_header">
<nav class="main_navigatin container">
<a class="main_header_logo">
<img src="img/logo.svg" width="160" height="65" alt="Логотип магазина Nёrd's">
</a>
<ul class="site_navigation clear_list">
<li><a href="blank.html">Студия</a></li>
<li><a href="blank.html">Клиенты</a></li>
<li><a href="catalog.html">Магазин</a></li>
<li><a href="blank.html">Контакты</a></li>
</ul>
<a class="navigation_basket" href="#">Корзина</a>
</nav>
</header>
<main class="main_content">
<h1 class="visually-hidden">Интернет магазин Nёrds</h1>
<!-- -----------------------Slider -->
<section class="slider">
<ul class="container clear_list">
<li class="slider_item slide_img-1 slide slide_current">
<p class="slide_slogan">Долго, дорого, <br>
скрупулезно.</p>
<p class="slide_text">Математически выверенный дизайн<br>
для вашего сайта или мобильного приложения.</p>
<a href="blank.html" class="button slider_button button_red">Узнать больше</a>
</li>
<li class="slider_item slide_img-2 slide ">
<p class="slide_slogan">Любим математику <br>
как никто другой</p>
<p class="slide_text">Никакого креатива, только математические формулы<br>
для расчета идеальных пропорций</p>
<a href="blank.html" class="button slider_button button_red">Узнать больше</a>
</li>
<li class="slider_item slide_img-3 slide">
<p class="slide_slogan">Только ночь, <br>
только хардкор</p>
<p class="slide_text">Работать днем, как все? Мы против этого.<br>
Ближе к полуночи работа только начинается.
</p>
<a href="blank.html" class="button slider_button button_red">Узнать больше</a>
</li>
</ul>
<div class="slider_controls">
<button type="button" class="current" aria-label="Первый слайд"></button>
<button type="button" aria-label="Второй слайд"></button>
<button type="button" aria-label="Третий слайд"></button>
</div>
</section>
<!-- -----------------------Services -->
<section class="services container">
<h2 class="visually-hidden">Услуги</h2>
<ul class="services_list clear_list">
<li class="services_item">
<h3 class="services_subtitle services_img_web-sites">Веб-сайты</h3>
<p class="services_text">Мир никогда не будет прежним <br>
после того как увидит ваш сайт!</p>
<a class="button button_red button_services" href="#">Заказать</a>
</li>
<li class="services_item">
<h3 class="services_subtitle services_img_apps">Приложения</h3>
<p class="services_text">Покорите топ-10 приложений<br>
в AppStore и Google Play</p>
<a class="button button_green button_services" href="#">Заказать</a>
</li>
<li class="services_item">
<h3 class="services_subtitle services_img_presentations">Презентации</h3>
<p class="services_text">Вы даже не подозреваете, <br>
насколько вы изумительны!</p>
<a class="button button_yellow button_services" href="#">Заказать</a>
</li>
</ul>
</section>
<!-- -----------------------About -->
<section class="container">
<h2 class="visually-hidden">О компании</h2>
<div class="about">
<div class="about_item">
<p class="about_slogan">Мы — маленькая, но гордая<br>
дизайн-студия из Киева.</p>
<p class="about_text">
Исповедуем принципы минимализма и чистоты. Ставим математический расчет <br>
превыше креатива. Работаем не покладая рук, как роботы.
</p>
<p class="orders_list_title">Выполняем заказы на разработку:</p>
<ul class="orders_list clear_list">
<li>Веб-сайтов любой сложности</li>
<li>Мобильных приложений для iOS и Android</li>
<li>Слайдшоу и видео для корпоративных презентаций</li>
</ul>
</div>
<div class="about_item">
<p class="achievements_title">с 2004 года Любим точность во всем:</p>
<dl class="achievements_list clear_list">
<dt class="achievements_level">146<sup>%</sup></dt>
<dd class="achievements_desc">Уровень<br>самоотдачи</dd>
<dt class="achievements_level">100<sup>%</sup></dt>
<dd class="achievements_desc">Соблюдение <br>сроков</dd>
<dt class="achievements_level">50<sup>%</sup></dt>
<dd class="achievements_desc">Минимальная<br>предоплата</dd>
</dl>
</div>
</div>
</section>
<!-- -----------------------Clients -->
<section class="clients container">
<h2 class="visually-hidden">Клиенты</h2>
<ul class="clients_list clear_list">
<li class="clients_item">
<a href="https://htmlacademy.ru/intensive/htmlcss"><img src="img/clients/logo_htmlacademy.svg" width="199"
height="57" alt="Логотип HTMl Academy"></a>
</li>
<li class="clients_item">
<a href="#"><img src="img/clients/logo_borodinski.png" width="209" height="90"
alt="Логотип барбершопа Borodinski"></a>
</li>
<li class="clients_item">
<a href="#"><img src="img/clients/logo_pink.png" width="185" height="52" alt="Логотип магазина Pink"></a>
</li>
<li class="clients_item">
<a href="#"><img src="img/clients/logo_mishka.png" width="173" height="84" alt="Логотип магазина Mishka"></a>
</li>
</ul>
</section>
<!-- -----------------------Contacts -->
<section class="contacts">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2135.6129435920657!2d30.513542001323675!3d50.46556960027547!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x40d4cf3f28a04a67%3A0x29b9c7b70e87995d!2sKINO42!5e0!3m2!1sru!2sua!4v1653571493755!5m2!1sru!2sua"
width="1200" height="416" allowfullscreen="" loading="lazy"
title="Офис компании по адресу ул. Константиновская 11Б, Киев"></iframe>
<div class="container">
<div class="contacts_information">
<h2 class="visually-hidden">Контакты</h2>
<p class="contacts_subtitle">Nёrds Design Studio</p>
<p class="contacts_adress">ул. Константиновская,<br>
11Б, Киев, 04071
</p>
<p><a class="contacts_phone" href="tel:+380634427204">+38 063 442 7204</a>
</p>
<a class="button button_red contacts_button" href="#"> Напишите нам</a>
</div>
</div>
</section>
</main>
<!-- -----------------Footer -->
<footer class="main_footer container">
<ul class="social_list clear_list">
<li>
<a class="social_link" href="#">
<span class="visually-hidden">Vkontakte</span>
<svg aria-hidden="true" width="27" height="15" viewBox="0 0 27 15">
<path
d="M16.138 11.51C17.094 11.201 18.318 13.55 19.621 14.449C20.599 15.13 21.348 14.983 21.348 14.983L24.821 14.933C24.821 14.933 26.636 14.821 25.778 13.379C25.707 13.259 25.275 12.31 23.193 10.357C21.016 8.31404 21.311 8.64504 23.932 5.11304C25.529 2.96004 26.168 1.64504 25.968 1.08504C25.776 0.546037 24.603 0.686037 24.603 0.686037L20.69 0.713037C20.309 0.714037 19.986 0.832037 19.839 1.22804C19.836 1.23204 19.218 2.89404 18.394 4.30704C16.653 7.29604 15.958 7.45504 15.67 7.26804C15.009 6.83504 15.176 5.53104 15.176 4.60404C15.176 1.70704 15.608 0.499037 14.33 0.187037C13.903 0.0830374 13.591 0.0150374 12.502 0.00503741C11.11 -0.0159626 9.92797 0.00503743 9.25797 0.334037C8.81297 0.557037 8.47197 1.04604 8.67897 1.07404C8.93897 1.10904 9.52197 1.23404 9.83397 1.66004C10.235 2.21204 10.223 3.44904 10.223 3.44904C10.223 3.44904 10.452 6.86004 9.68297 7.28304C9.15497 7.57304 8.43297 6.98104 6.87997 4.26704C6.08697 2.87904 5.48797 1.34504 5.48797 1.34504C5.48797 1.34504 5.37197 1.06004 5.16197 0.904037C4.91197 0.719037 4.56197 0.660037 4.56197 0.660037L0.84797 0.684037C0.84797 0.684037 0.28997 0.700037 0.0849697 0.946037C-0.0970303 1.16404 0.0699697 1.61404 0.0699697 1.61404C0.0699697 1.61404 2.97897 8.49504 6.27297 11.961C9.29297 15.143 12.725 14.932 12.725 14.932H14.28C14.28 14.932 14.749 14.878 14.989 14.62C15.213 14.38 15.203 13.929 15.203 13.929C15.203 13.929 15.172 11.82 16.138 11.51Z"
fill="white" />
</svg>
</a>
</li>
<li>
<a class="social_link" href="#">
<span class="visually-hidden">Facebook</span>
<svg aria-hidden="true" width="12" height="22" viewBox="0 0 12 22">
<path d="M12 4V0H8C5.79086 0 4 1.79086 4 4V8H0V12H4V22H8V12H12V8H8V4H12Z" fill="white" />
</svg>
</a>
</li>
<li>
<a class="social_link" href="#">
<span class="visually-hidden">Instagram</span>
<svg aria-hidden="true" width="21" height="21" viewBox="0 0 21 21">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3 0H18C19.65 0 21 1.35 21 3V18C21 19.65 19.65 21 18 21H3C1.35 21 0 19.65 0 18V3C0 1.35 1.35 0 3 0ZM14 10.5C14 8.57 12.43 7 10.5 7C8.57 7 7 8.57 7 10.5C7 12.43 8.57 14 10.5 14C12.43 14 14 12.43 14 10.5ZM3 18V9H4.181C4.0626 9.49127 4.00186 9.99467 4 10.5C4 14.0899 6.91015 17 10.5 17C14.0899 17 17 14.0899 17 10.5C16.9986 9.99464 16.9379 9.49118 16.819 9H18V18H3ZM14 7H18V3H14V7Z"
fill="white" />
</svg>
</a>
</li>
</ul>
<div class="footer_wraper">
<p class="footer_slogan">Давайте дружить, это выгодно!</p>
<p class="footer_text">Скидка 10% для друзей из социальных сетей.</p>
</div>
</footer>
<!-- -----------------Modal window -->
<section class="modal_feedback">
<h2 class="feedback_title">Напишите нам</h2>
<form class="feedback_form" action="https://echo.htmlacademy.ru" method="post">
<div class="feedback_contacts_wraper">
<p class="feedback_contacts">
<label for="name">Ваше имя:</label>
<input id="name" type="text" name="name" placeholder="Имя Фамилия">
</p>
<p class="feedback_contacts">
<label for="email">Ваш email:</label>
<input id="email" type="email" placeholder="[email protected]" name="email">
</p>
</div>
<p class="feedback_text">
<label for="text">Текст письма:</label>
<textarea id="text" name="text" placeholder='В свободной форме.' cols="30"></textarea>
</p>
<input class="button button_red modal_button" type="submit" value="Отправить">
</form>
<button class="modal_close" type="button" aria-label="Закрыть"></button>
</section>
<script src="js/modal-feedback.min.js"></script>
<script src="js/slider.min.js"></script>
</body>
</html>