-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
323 lines (311 loc) · 11.7 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
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>KonstHardy</title>
<link
rel="apple-touch-icon"
sizes="180x180"
href="img/favicon/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="img/favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="img/favicon/favicon-16x16.png"
/>
<link rel="manifest" href="img/favicon/site.webmanifest" />
<link
rel="mask-icon"
href="img/favicon/safari-pinned-tab.svg"
color="#5bbad5"
/>
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#fff" />
<link rel="stylesheet" href="fonts/fontawesome/css/all.min.css" />
<link rel="stylesheet" type="text/css" href="build/css/styles.min.css" />
<script src="src/jquery-3.6.0.min.js"></script>
<script src="build/js/scripts.min.js"></script>
</head>
<body>
<header class="header">
<div class="header__body fixed-container">
<nav class="menu header__menu">
<ul class="menu__list">
<li class="menu__item">
<a href="#services" class="menu__link">Услуги</a>
</li>
<li class="menu__item">
<a href="#examples" class="menu__link">Портфолио</a>
</li>
<li class="menu__item">
<a href="#price" class="menu__link">Стоимость</a>
</li>
</ul>
</nav>
<button
aria-label="Меню"
class="btn-menu header__btn-menu"
type="button"
>
<span class="btn-menu__line"></span>
</button>
<a class="header__phone" href="tel:+74999955577">+7 499 995-55-77</a>
<button class="btn-callback btn-callback--icon" type="button">
Обратный звонок
</button>
</div>
</header>
<main class="main">
<section class="my-info">
<div class="elements">
<span class="elements__item elements__item--1"
>{ }</span
>
<span class="elements__item elements__item--2">#</span>
<span class="elements__item elements__item--3"></></span>
<span class="elements__item elements__item--4"><div></span>
<span class="elements__item elements__item--5"></></span>
<span class="elements__item elements__item--6"><div></span>
</div>
<div class="my-info__wrapper">
<h1 class="title title--1">Дмитрий Алексеев</h1>
<span class="my-info__description"
>Frontend-разработчик и веб-верстальщик</span
>
<a class="btn my-info__btn" href="#services">
<span>Узнать больше</span>
</a>
</div>
<div class="photo-wrapper">
<img class="photo-wrapper__image" src="img/photo.png" alt="photo" />
</div>
</section>
<section class="services" id="services">
<div class="fixed-container">
<h2 class="title title--2">Что я делаю</h2>
<ul class="services__list">
<li class="services__item services__item--landing">
Вёрстка лендинг–страниц и сайтов любой сложности
</li>
<li class="services__item services__item--device">
Адаптивная вёрстка под все браузеры и устройства
</li>
<li class="services__item services__item--frontend">
Frontend – разработка и программирование
</li>
<li class="services__item services__item--fix">
Исправление и доработка существующей вёрстки
</li>
</ul>
<a class="btn services__btn" href="#price">
<span>Узнать стоимость</span>
</a>
</div>
</section>
<section class="examples" id="examples">
<div class="fixed-container examples__body">
<h2 class="title title--2 examples__title">Примеры моих работ</h2>
<!-- Slider main container -->
<div class="slider">
<div class="slider__list">
<div class="slider__item">
<img
class="slider__picture"
src="img/slide1.jpg"
alt="Vera Antonova website"
/>
<p class="slider__title">Сайт психолога Веры Антоновой</p>
</div>
<div class="slider__item">
<img
class="slider__picture"
src="img/slide2.jpg"
alt="children's clothing store website"
/>
<p class="slider__title">Сайт магазина детской одежды</p>
</div>
<div class="slider__item">
<img
class="slider__picture"
src="img/slide3.jpg"
alt="fishing shop website"
/>
<p class="slider__title">Сайт магазина «Рыболов»</p>
</div>
</div>
<!-- pagination -->
<div class="slider__pagination pagintator"></div>
</div>
<!-- navigation buttons -->
<button
class="slider__arrow slider__arrow--left"
type="button"
></button>
<button
class="slider__arrow slider__arrow--right"
type="button"
></button>
<button class="btn examples__btn order--project" type="button">
<span> Заказать проект</span>
</button>
</div>
</section>
<section class="promotion" id="price">
<div class="fixed-container promotion__body">
<div class="elements-gradient">
<span class="elements-gradient__item elements-gradient__item--1"
>{ }</span
>
<span class="elements-gradient__item elements-gradient__item--2"
></></span
>
<span class="elements-gradient__item elements-gradient__item--3"
><div></span
>
<span class="elements-gradient__item elements-gradient__item--4"
>#</span
>
<span class="elements-gradient__item elements-gradient__item--5"
>{ }</span
>
</div>
<div class="promotion__wrapper">
<h3 class="promotion__price">
Адаптивная вёрстка под все устройства и браузеры от 1000
рублей всего за 4 часа.*
</h3>
<p class="promotion__text">
Срок и стоимость могут отличаться от заявленных и рассчитываются
индивидуально, в зависимости от сложности задач.
</p>
</div>
</div>
</section>
</main>
<footer class="footer">
<div class="fixed-container footer__wrapper footer__body">
<nav class="footer-menu">
<ul class="footer-menu__list">
<li class="footer-menu__item">
<a href="#services" class="footer-menu__link menu__link"
>Услуги</a
>
</li>
<li class="footer-menu__item">
<a href="#examples" class="footer-menu__link menu__link"
>Портфолио</a
>
</li>
<li class="footer-menu__item">
<a href="#price" class="footer-menu__link menu__link"
>Стоимость</a
>
</li>
</ul>
</nav>
<div class="footer__contacts">
<a href="tel:+74999955555" class="footer__contacts-link">
<i class="fas fa-phone-alt"></i>+7 499 995-77-55
</a>
<a href="mailto:dmitry@alekseev.com" class="footer__contacts-link">
<i class="fas fa-envelope"></i>dmitry@alekseev.com
</a>
</div>
<div class="footer__right-column">
<button class="btn-callback footer__btn-callback" type="button">
Заказать звонок
</button>
<ul class="social-networks footer__social-networks">
<li class="social-networks__icon">
<a
class="social-networks__link social-networks__link--vk"
href="http://vk.com"
></a>
</li>
<li class="social-networks__icon">
<a
class="social-networks__link social-networks__link--fb"
href="http://facebook.com"
></a>
</li>
<li class="social-networks__icon">
<a
class="social-networks__link social-networks__link--tw"
href="http://twitter.com"
></a>
</li>
<li class="social-networks__icon">
<a
class="social-networks__link social-networks__link--inst"
href="http://instagram.com"
></a>
</li>
</ul>
</div>
</div>
<p class="footer__copyright">© Дмитрий Алексеев, 2016 – 2018</p>
</footer>
<!-- form -->
<div class="form form__popup">
<form class="form-callback form__callback" action="#" method="post">
<button aria-label="Закрыть" class="form__btn-close" type="button">
<span class="form__btn-line"></span>
<span class="form__btn-line"></span>
</button>
<h2 class="form__title">Ваши данные</h2>
<label class="form-label form__label"
>Ваше имя:
<input
class="form-input form__input"
type="text"
name="name"
placeholder="Дмитрий"
/>
</label>
<label class="form-label form__label"
>Номер телефона:
<input
class="form-input form__input"
type="tel"
name="phone"
placeholder="+7 ___ ___-__-__"
/>
</label>
<label class="form-label form__label email"
>Электронная почта:
<input
class="form-input form__input"
type="email"
name="mail"
placeholder="dmitry@alekseev.com"
/>
</label>
<label class="form-label form__label deadline"
>Сроки:
<input
class="form__input form-input"
type="text"
name="deadline"
placeholder="Нужно успеть до завтра!!"
/>
</label>
<button class="form__btn-submit" type="submit">Оставить заявку</button>
<label class="form__checkbox">
<input class="form__checkbox-input" type="checkbox" />
<span class="form__text"
>Нажатием на кнопку, вы даете свое согласие на обработку
персональных данных</span
>
</label>
</form>
</div>
</body>
</html>