-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
297 lines (279 loc) · 14.3 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
<!DOCTYPE html>
<html class="page" lang="ru">
<head>
<meta charset="utf-8">
<title>HTML Academy: Интернет магазин «Nёrds»</title>
<link rel="icon" href="favicon.ico"> <!-- 32×32 -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicons/favicon-16x16.png">
<link rel="manifest" href="manifest.webmanifest">
<link rel="mask-icon" href="img/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/fonts.css">
<link rel="stylesheet" href="css/style.min.css">
</head>
<body class="page-body">
<header class="main-header">
<div class="container">
<nav class="main-navigation">
<a class="main-header-logo">
<img src="img/header/logo.svg" alt="Логотип дизайн-студии «Нёрдс»" width="160" height="65">
</a>
<ul class="site-navigation">
<li><a href="blank.html" class="link">Студия</a></li>
<li><a href="blank.html" class="link">Клиенты</a></li>
<li><a href="catalog.html" class="link">Магазин</a></li>
<li><a href="blank.html" class="link">Контакты</a></li>
</ul>
<ul class="user-navigation">
<li>
<a href="blank.html" class="basket ">Корзина</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="page-main">
<h1 class="visually-hidden">Интернет магазин «Nёrds»</h1>
<section class="slider">
<div class="container slider-wrap">
<h2 class="visually-hidden">Наши преимущества</h2>
<div class="slides slides-active">
<div class="slides__inner">
<div class="title slides__title">Долго, дорого, <br> скрупулезно.</div>
<div class="slides__text">
Математически выверенный дизайн <br>
для вашего сайта или мобильного приложения.
</div>
<a href="blank.html" class="btn slides__btn">
узнать больше
</a>
</div>
<div class="slides__img" style="background-image: url(img/header/slider/index-slide1.png)">
</div>
</div>
<div class="slides">
<div class="slides__inner">
<div class="title slides__title">Любим математику <br>
как никто другой</div>
<div class="slides__text">
Никакого креатива, только математические формулы <br>
для расчета идеальных пропорций
</div>
<a class="btn slides__btn">
узнать больше
</a>
</div>
<div class="slides__img" style="background-image: url(img/header/slider/index-slide2.png)">
</div>
</div>
<div class="slides">
<div class="slides__inner">
<div class="title slides__title">Только ночь, <br>
только хардкор</div>
<div class="slides__text">
Работать днем, как все? Мы против этого. <br>
Ближе к полуночи работа только начинается.
</div>
<a class="btn slides__btn">
УЗНАТЬ БОЛЬШЕ
</a>
</div>
<div class="slides__img" style="background-image: url(img/header/slider/index-slide3.png)">
</div>
</div>
<div class="slides-control ">
<button class="button-slide button-active" type="button" aria-label="первый слайд"></button>
<button class="button-slide" type="button" aria-label="Второй слайд"></button>
<button class="button-slide" type="button" aria-label="Третий слайд"></button>
</div>
</div>
</section>
<section class="services container">
<h2 class="visually-hidden">
Наши услуги
</h2>
<ul class="services__list">
<li class="services__item">
<div class="services__img">
</div>
<h3 class="services__title">Веб-сайты</h3>
<div class="services__description">Мир никогда не будет прежним <br> после того как увидит ваш сайт!</div>
<a class="services__btn btn" href="blank.html">Заказать</a>
</li>
<li class="services__item">
<div class="services__img services__img-apps"></div>
<h3 class="services__title">Приложения</h3>
<div class="services__description">Покорите топ-10 приложений <br> в AppStore и Google Play</div>
<a class="services__btn services__btn-apps btn " href="blank.html">Заказать</a>
</li>
<li class="services__item">
<div class="services__img services__img-presentation">
</div>
<h3 class="services__title">Презентации</h3>
<div class="services__description">Вы даже не подозреваете,<br> насколько вы изумительны!</div>
<a class="services__btn services__btn-presentation btn" href="blank.html">Заказать</a>
</li>
</ul>
</section>
<!-- <div class="line"> -->
<section class="about">
<h2 class="visually-hidden"> О студии «Nёrds»</h2>
<div class="container">
<div class="about__inner">
<div class="about__item">
<p class="about__title">
Мы — маленькая, но гордая <br> дизайн-студия из Краснодара.
</p>
<p class="about__description">
Исповедуем принципы минимализма и чистоты. Ставим математический расчет <br> превыше креатива. Работаем не
покладая рук, как роботы.
</p>
<div class="about__subtitle">
Выполняем заказы на разработку:
</div>
<ul class="about__list">
<li>Веб-сайтов любой сложности</li>
<li>Мобильных приложений для iOS и Android</li>
<li>Слайдшоу и видео для корпоративных
презентаций</li>
</ul>
</div>
<div class="about__item">
<div class="about__img">
</div>
<b class="about__text"></b>
<table class="about__table">
<caption>с 2004 года Любим точность во всем:</caption>
<tbody>
<tr>
<th class="about__table-num about__table-num--first"> 146<sup>%</sup> </th>
<th class="about__table-num about__table-num--middle"> 100<sup>%</sup> </th>
<th class="about__table-num about__table-num--last"> 50<sup>%</sup> </th>
</tr>
<tr>
<td class="about__table-future about__table-future--first">Уровень самоотдачи</td>
<td class="about__table-future about__table-future--middle">Соблюдение сроков</td>
<td class="about__table-future about__table-future--last">Минимальная предоплата</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<section class="partners">
<h2 class="visually-hidden">Партнёры</h2>
<ul class="partners__items container">
<li class="partners__item">
<a href="https://htmlacademy.ru/intensive/htmlcss" title="HTML и CSS. Профессиональная вёрстка сайтов">
<img src="img/partners/htmlacademy.png" alt="HTML Academy" width="199" height="68">
</a>
</li>
<li class="partners__item">
<a href="#" title="Барбершоп Borodinski">
<img src="img/partners/borodinski.png" alt="Барбершоп Бородинский" width="209" height="87">
</a>
</li>
<li class="partners__item">
<a href="#" title="Партнёр Pink">
<img src="img/partners/pink.png" alt="Pink" width="185" height="52">
</a>
</li>
<li class="partners__item">
<a href="#" title="сайт партнёра Mishka"><img src="img/partners/mishka.png" alt="Мишка" width="173"
height="84"></a>
</li>
</ul>
</section>
</main>
<section class="map">
<h2 class="visually-hidden"> Как нас найти</h2>
<div class="map__img">
<div style="position:relative;overflow:hidden;"><iframe src="https://yandex.ru/map-widget/v1/-/CCUBqErGlB"
style="position:relative;"></iframe></div>
</div>
<div class="container map__container">
<div class="map-contact">
<div class="map-contact__title">
NЁRDS DESIGN STUDIO
</div>
<p>
наб. Реки Карповки,<br> 5 лит П, Санкт-Петербург <br>
<a class="map-contact__phone" href="tel:+78005558628">+7 800 555-86-28</a>
</p>
<a class="map-contact__btn btn" href="blank.html">Напишите нам</a>
</div>
</div>
</section>
<footer class="main-footer">
<div class="container">
<section class="social">
<h3 class="visually-hidden"> Мы в социальных сетях</h3>
<ul class="social__list">
<li class="social__item">
<a href="#" title="мы во вконтакте">
<span class="visually-hidden">мы во вконтакте</span>
<svg aria-hidden="true" focusable="false" width="27" height="15" viewBox="0 0 27 15"
xmlns="http://www.w3.org/2000/svg">
<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" />
</svg>
</a>
</li>
<li class="social__item">
<a href="#">
<span class="visually-hidden">мы в
facebook</span>
<svg aria-hidden="true" focusable="false" width="12" height="22" viewBox="0 0 12 22"
xmlns="http://www.w3.org/2000/svg">
<path d="M12 4V0H8C5.79086 0 4 1.79086 4 4V8H0V12H4V22H8V12H12V8H8V4H12Z" />
</svg>
</a>
</li>
<li class="social__item">
<a href="#">
<span class="visually-hidden">мы в instagram</span>
<svg aria-hidden="true" focusable="false" width="21" height="21" viewBox="0 0 21 21"
xmlns="http://www.w3.org/2000/svg">
<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" />
</svg>
</a>
</li>
</ul>
<div class="social__actions">
<p>Давайте дружить, это выгодно!</p>
<p>Скидка 10% для друзей из социальных сетей.</p>
</div>
</section>
</div>
</footer>
<div class="overlay"></div>
<section class="modal modal__mail">
<h3>Напишите нам</h3>
<form class="mail-form" method="post" action="https://echo.htmlacademy.ru">
<div class="mail-form__box">
<p><label>Ваше имя:<br>
<input type="text" name="name" placeholder="Имя Фамилия">
</label></p>
<p><label>Ваш email:<br>
<input type="email" name="email" placeholder="email@example.com ">
</label></p>
</div>
<label>Текст письма:<br>
<textarea name="text" placeholder="В свободной форме"></textarea>
</label>
<input class="btn button" type="submit" value="Отправить">
</form>
<button class="btn-close" type="button" aria-label="Закрыть">
<span class="visually-hydden">закрыть</span>
</button>
</section>
<script src="js/slide.min.js"></script>
<script src="js/modal.min.js"></script>
</body>
</html>