-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
203 lines (187 loc) · 9.94 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
<!DOCTYPE html>
<html class="page" lang="ru">
<head>
<meta charset="utf-8">
<title>Дизайн-студiя Нёрдс</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap">
<link href="css/normalize.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body class="page-body">
<div class="site-wrapper">
<header class="main-header">
<nav class="main-navigation">
<a class="main-header-logo">
<img src="img/nerds-logo.svg" width="160" height="65" alt="Логотип Нёрдс">
</a>
<div class="main-navigation-wrapper">
<div class="container">
<ul class="site-navigation">
<li><a href="index.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>
<div class="user-navigation">
<a class="cart-icon" href="blank.html"> <img class="logo-cart-icon" src="img/cart-icon.svg" width="15"
height="15" alt="Кошик">Кошик</a>
</div>
</div>
</div>
</nav>
</header>
<div class="site-wrapper site-wrapper-1">
<h1 class="visually-hidden">Дизайн-студiя "Нёрдс"</h1>
<section class="slider">
<ul class="slider-list">
<li class="slide-1 slide-current">
<h3 class="slide-title">Довго, дорого, скрупульозно.</h3>
<p class="slide-text">Математично вивірений дизайн<br>
для вашого сайту або мобільного додатка.</p>
<a class="slide-button" href="#"></a>
<button class="button button-info" href="blank.html">Дізнатися більше</button>
</li>
<li class="slide-2">
<h3 class="slide-title">Любимо математику як ніхто інший</h3>
<p class="slide-text">Ніякого креативу, тільки математичні формули<br>
для розрахунку ідеальних пропорцій</p>
<a class="slide-button" href="#"></a>
<a class="button button-info" href="blank.html">Дізнатися більше</a>
</li>
<li class="slide-3">
<h3 class="slide-title">Тільки ніч, тільки хардкор.</h3>
<p class="slide-text">Працювати вдень, як усі? Ми проти цього.<br>
Ближче до півночі робота тільки починається.</p>
<a class="slide-button" href="#"></a>
<a class="button button-info" href="blank.html">Дізнатися більше</a>
</li>
</ul>
<div class="slider-controls">
<button class="current" type="button" aria-label="Перший слайд"></button>
<button type="button" aria-label="Другий слайд"></button>
<button type="button" aria-label="Третій слайд"></button>
</div>
</section>
</div>
</div>
<section class="service">
<h2 class="visually-hidden">Формати розробки</h2>
<ul class="service-list">
<li class="service-item">
<img src="img/illustration-1.png" width="300" height="146" alt="Веб-сайти">
<h3 class="service-header">Веб-сайти</h3>
<p class="service-text">Світ ніколи не буде колишнім після того, як побачить ваш сайт!</p>
<button class="button button-red-1 btn" href="blank.html">Замовити</button>
</li>
<li class="service-item">
<img src="img/illustration-2.png" width="300" height="146" alt="Додатки">
<h3 class="service-header">Додатки</h3>
<p class="service-text">Підкоріть топ-10 додатків у AppStore та Google Play</p>
<button class="button button-green btn" href="blank.html">Замовити</button>
</li>
<li class="service-item">
<img src="img/illustration-3.png" width="300" height="146" alt="Презентації">
<h3 class="service-header">Презентації</h3>
<p class="service-text">Ви навіть не підозрюєте, наскільки ви дивовижні!</p>
<button class="button button-yellow btn" href="blank.html">Замовити</button>
</li>
</ul>
</section>
<div class="content-about">
<section class="about">
<h2 class="visually-hidden">Студія</h2>
<p class="about-header">Ми — маленька, але горда<br> дизайн-студія з Києва.</p>
<p class="about-text">Визнаємо принципи мінімалізму та чистоти. Ставимо математичний розрахунок вище креативу.
Працюємо не покладаючи рук, як роботи.</p>
<section class="orders">
<p class="about-orders">Виконуємо замовлення на розробку:</p>
<ul class="about-orders-list">
<li class="orders-item">Веб-сайтів будь-якої складності</li>
<li class="orders-item">Мобільних додатків для iOS та Android</li>
<li class="orders-item">Слайдшоу та відео для корпоративних презентацій</li>
</ul>
</section>
</section>
<div class="results">
<img class="nerds-img" src="img/nerds-illustration1.png" width="360" height="208" alt="Ілюстрація Нёрдс">
<p class="results-caption">З 2004 року любимо точність у всьому:</p>
<table class="results-list">
<tr class="results-values-item">
<td class="results-values">100<span class="values-percent">%</span></td>
<td class="results-values">100<span class="values-percent">%</span></td>
<td class="results-values">50<span class="values-percent">%</span></td>
</tr>
<tr class="results-text-item">
<th class="results-text">Рівень самовіддачі</th>
<th class="results-text">Дотримання термінів</th>
<th class="results-text">Мінімальна передоплата</th>
</tr>
</table>
</div>
</div>
<div class="partners-list">
<h2 class="visually-hidden">Клієнти</h2>
<a class="partners-link-1" href=""><img class="partners-img" src="img/logo-html.png" width="200" height="68"
alt="Логотип htmlacademy"></a>
<a class="partners-link-2" href=""><img class="partners-img" src="img/logo-borodinski.png" width="209" height="90"
alt="Логотип Borodinski"></a>
<a class="partners-link-3" href=""><img class="partners-img" src="img/logo-pink.png" width="185" height="52"
alt="Логотип Pink"></a>
<a class="partners-link-4" href=""><img class="partners-img" src="img/logo-mishka.png" width="173" height="84"
alt="Логотип Mishka"></a>
</div>
<footer class="page-footer main-footer">
<div class="container-contacts">
<div class="wrapper">
<div class="footer-contacts">
<h2 class="visually-hidden">Контактна інформація</h2>
<p class="footer-contacts-name">NЁRDS DESIGN STUDIO</p>
<p class="footer-contacts-adress">Київ<br>
вул. Велика Васильківська, 2</P>
<p class="footer-contacts-number"><a href="tel:+380501234567">тел. +38 (050) 123-45-67</a></p>
<a class="button button-red-2" href="blank.html">Напишіть нам</a>
</div>
<img class="map-marker" src="img/map-marker.svg" width="231" height="190" alt="Маркер локації">
</div>
</div>
<section class="footer-social">
<ul class="social-list">
<li class="social-item">
<a class="social-button" href="blank.html">
<img class="soc-fb" src="img/fb-icon.svg" width="21" height="21" alt="Посилання на сторінку Фейсбук">
</a>
</li>
<li class="social-item">
<a class="social-button" href="blank.html">
<img class="soc-inst" src="img/insta-icon.svg" width="21" height="21" alt="Посилання на сторінку Інстаграм">
</a>
</li>
</ul>
<div class="footer-text">
<p class="footer-text-header">Давайте дружити, це вигідно!</p>
<span class="footer-discount">Знижка 10% для друзів із соціальних мереж.</span>
</div>
</section>
</footer>
<section class="modal modal-message">
<h2>Напишіть нам</h2>
<form class="contact-form" method="POST">
<p class="contact-item">
<label class="contact-label" for="name">Ваше ім'я:</label>
<input class="label-text" id="name" type="text" name="name" placeholder="Ім'я прізвище">
</p>
<p class="contact-item">
<label class="contact-label" for="email">Ваш email:</label>
<input class="label-text" id="email" type="email" name="email" placeholder="[email protected]">
</p>
<p class="contact-item-message">
<label class="contact-label" for="message">Текст листа:</label>
<textarea class="label-message" id="message" name="message" placeholder="В вільній формі"></textarea>
</p>
<button class="button button-red-4" type="submit">Надіслати</button>
</form>
<button class="modal-close" type="button" aria-label="Закрити"></button>
</section>
<script src="./js/modal.js"></script>
</body>
</html>