-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
542 lines (536 loc) · 38.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
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
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BlackOne Portfolio</title>
<!-- CSS -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/bootstrap-grid.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-notify@0.5.5/dist/simple-notify.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/media.css">
<link rel="icon" href="./img/favicon.jpg" type="image/jpg">
<!-- JS -->
<script src="https://unpkg.com/typeit@8.7.1/dist/index.umd.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/simple-notify@0.5.5/dist/simple-notify.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js" defer></script>
<script src="https://www.google.com/recaptcha/api.js" defer></script>
<script type="module" src="js/main.js"></script>
</head>
<body class="page">
<div class="cursor-ball"></div>
<div class="cursor-outline"></div>
<header class="header" id="header">
<div class="container header__container">
<div class="header__left animate__animated animate__slideInLeft">
<a href="https://github.com/blackonechik" class="logo header__logo">
<img class="img-logo" src="img/logo.svg" alt="Logo BlackOne Portfolio">
</a>
<div class="header__toggle-switch toggle-switch">
<label class="toggle-switch__label">
<input class="toggle-switch__checkbox" type="checkbox">
<span class="toggle-switch__slider js-theme-switch"></span>
</label>
</div>
</div>
<div class="header__right animate__animated animate__slideInRight">
<nav class="nav header__nav">
<ul class="nav__list list-reset">
<li class="nav__item">
<a href="#about" class="nav__link">
About
</a>
</li>
<li class="nav__item">
<a href="#skills" class="nav__link">
Skills
</a>
</li>
<li class="nav__item">
<a href="#projects" class="nav__link">
Projects
</a>
</li>
<li class="nav__item">
<a href="#clients" class="nav__link">
Clients
</a>
</li>
<li class="nav__item">
<a href="#feedback" class="nav__link">
Contact me
</a>
</li>
</ul>
</nav>
<button class="btn btn_header js-contact-btn">Contact me</button>
</div>
</div>
</header>
<main class="main container">
<div class="row gx-5">
<div class="main__left col-lg-5">
<section class="profile">
<article class="about__card card animate__animated animate__fadeInLeft">
<picture class="card__picture">
<img class="card__img" src="img/my_photo.jpg" alt="My photo">
</picture>
<div class="card__bottom">
<h2 class="card__title">< Vladislav Surnin /></h2>
<span class="card__profession">Frontend Web Developer</span>
<ul class="card__list list-reset">
<li class="card__item">
<a href="https://github.com/blackonechik" class="card__link" target="_blank">
<svg class="card__icon" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M24.0199 0C10.7375 0 0 10.8167 0 24.1983C0 34.895 6.87988 43.9495 16.4241 47.1542C17.6174 47.3951 18.0545 46.6335 18.0545 45.9929C18.0545 45.4319 18.0151 43.509 18.0151 41.5055C11.3334 42.948 9.94198 38.6209 9.94198 38.6209C8.86818 35.8164 7.27715 35.0956 7.27715 35.0956C5.09022 33.6132 7.43645 33.6132 7.43645 33.6132C9.86233 33.7735 11.1353 36.0971 11.1353 36.0971C13.2824 39.7827 16.7422 38.7413 18.1341 38.1002C18.3328 36.5377 18.9695 35.456 19.6455 34.8552C14.3163 34.2942 8.70937 32.211 8.70937 22.9161C8.70937 20.2719 9.66321 18.1086 11.1746 16.4261C10.9361 15.8253 10.1008 13.3409 11.4135 10.0157C11.4135 10.0157 13.4417 9.3746 18.0146 12.4996C19.9725 11.9699 21.9916 11.7005 24.0199 11.6982C26.048 11.6982 28.1154 11.979 30.0246 12.4996C34.5981 9.3746 36.6262 10.0157 36.6262 10.0157C37.9389 13.3409 37.1031 15.8253 36.8646 16.4261C38.4158 18.1086 39.3303 20.2719 39.3303 22.9161C39.3303 32.211 33.7234 34.2539 28.3544 34.8552C29.2296 35.6163 29.9848 37.0583 29.9848 39.3421C29.9848 42.5871 29.9454 45.1915 29.9454 45.9924C29.9454 46.6335 30.383 47.3951 31.5758 47.1547C41.12 43.9491 47.9999 34.895 47.9999 24.1983C48.0392 10.8167 37.2624 0 24.0199 0Z" />
</svg>
</a>
</li>
<li class="card__item">
<a href="https://t.me/blackonechik" class="card__link" target="_blank">
<svg class="card__icon" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_318_75)">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24C0 10.7452 10.7452 0 24 0C37.2548 0 48 10.7452 48 24ZM24.8601 17.7179C22.5257 18.6888 17.8603 20.6984 10.8638 23.7466C9.72766 24.1984 9.13251 24.6404 9.07834 25.0726C8.98677 25.803 9.90142 26.0906 11.1469 26.4822C11.3164 26.5355 11.4919 26.5907 11.6719 26.6492C12.8973 27.0475 14.5457 27.5135 15.4026 27.5321C16.1799 27.5489 17.0475 27.2284 18.0053 26.5707C24.5423 22.158 27.9168 19.9276 28.1286 19.8795C28.2781 19.8456 28.4852 19.803 28.6255 19.9277C28.7659 20.0524 28.7521 20.2886 28.7372 20.352C28.6466 20.7383 25.0562 24.0762 23.1982 25.8036C22.619 26.3421 22.2081 26.724 22.1242 26.8113C21.936 27.0067 21.7443 27.1915 21.56 27.3692C20.4215 28.4667 19.5678 29.2896 21.6072 30.6336C22.5873 31.2794 23.3715 31.8135 24.1539 32.3463C25.0084 32.9282 25.8606 33.5085 26.9632 34.2313C27.2442 34.4155 27.5125 34.6068 27.7738 34.7931C28.7681 35.5019 29.6615 36.1388 30.7652 36.0373C31.4065 35.9782 32.0689 35.3752 32.4053 33.5767C33.2004 29.3263 34.7633 20.1169 35.1244 16.3219C35.1561 15.9895 35.1163 15.5639 35.0843 15.3771C35.0523 15.1904 34.9855 14.9242 34.7427 14.7272C34.4552 14.4939 34.0113 14.4447 33.8127 14.4482C32.91 14.4641 31.5251 14.9456 24.8601 17.7179Z" />
</g>
<defs>
<clipPath id="clip0_318_75">
<rect width="48" height="48" />
</clipPath>
</defs>
</svg>
</a>
</li>
<li class="card__item">
<a href="https://vk.com/surninvladislav" class="card__link" target="_blank">
<svg class="card__icon" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.37413 3.37413C0 6.74826 0 12.1788 0 23.04V24.96C0 35.8212 0 41.2517 3.37413 44.6259C6.74826 48 12.1788 48 23.04 48H24.96C35.8212 48 41.2517 48 44.6259 44.6259C48 41.2517 48 35.8212 48 24.96V23.04C48 12.1788 48 6.74826 44.6259 3.37413C41.2517 0 35.8212 0 24.96 0H23.04C12.1788 0 6.74826 0 3.37413 3.37413ZM8.10012 14.6001C8.36012 27.0801 14.6001 34.5801 25.5401 34.5801H26.1602V27.4401C30.1802 27.8401 33.22 30.7801 34.44 34.5801H40.1201C38.5601 28.9001 34.4599 25.7601 31.8999 24.5601C34.4599 23.0801 38.0599 19.4801 38.9199 14.6001H33.7598C32.6398 18.5601 29.3202 22.1601 26.1602 22.5001V14.6001H21V28.4401C17.8 27.6401 13.7601 23.7601 13.5801 14.6001H8.10012Z" />
</svg>
</a>
</li>
<li class="card__item">
<a href="https://www.youtube.com/channel/UCT8zr0f9KFk8mE3hPTXNHaA"
class="card__link" target="_blank">
<svg class="card__icon" viewBox="0 0 48 48" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M47.5219 14.4001C47.5219 14.4001 47.0531 11.0907 45.6094 9.6376C43.7812 7.7251 41.7375 7.71572 40.8 7.60322C34.0875 7.11572 24.0094 7.11572 24.0094 7.11572H23.9906C23.9906 7.11572 13.9125 7.11572 7.2 7.60322C6.2625 7.71572 4.21875 7.7251 2.39062 9.6376C0.946875 11.0907 0.4875 14.4001 0.4875 14.4001C0.4875 14.4001 0 18.2907 0 22.172V25.8095C0 29.6907 0.478125 33.5813 0.478125 33.5813C0.478125 33.5813 0.946875 36.8907 2.38125 38.3438C4.20937 40.2563 6.60938 40.1907 7.67813 40.397C11.5219 40.7626 24 40.8751 24 40.8751C24 40.8751 34.0875 40.8563 40.8 40.3782C41.7375 40.2657 43.7812 40.2563 45.6094 38.3438C47.0531 36.8907 47.5219 33.5813 47.5219 33.5813C47.5219 33.5813 48 29.7001 48 25.8095V22.172C48 18.2907 47.5219 14.4001 47.5219 14.4001ZM19.0406 30.2251V16.7345L32.0062 23.5032L19.0406 30.2251Z" />
</svg>
</a>
</li>
</ul>
<button class="btn btn_hero js-contact-btn">Hire me</button>
</div>
</article>
</section>
</div>
<div class="main__right col-lg-7 animate__animated animate__fadeIn">
<section class="about section-offset" id="about">
<span class="pre-subtitle">About me</span>
<h1 class="subtitle">I am <span class="subtitle_colored" id="js-typeIt"></span></h1>
<p class="text text_about animate__animated animate__fadeInUp">
Hi! My name is Vlad, I am 19 years old. At the moment I'm studying for Fullstack developer on
JavaScript. I live on the Black Sea coast, I like to play guitar and listen to music. I
will be glad to cooperate with you! 😁
</p>
<div class="about__achievements achievements-list row gx-lg-3 gx-md-3 gx-1">
<div class="col-lg-6 col-md-6 col-sm-6 col-6">
<div class="achievements-list__item animate__animated animate__fadeInUp animate__delay-1s">
<span class="achievements-list__figure">>3</span>
<span class="text text_achievements-list">Years of Experience</span>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-6">
<div class="achievements-list__item animate__animated animate__fadeInUp animate__delay-2s">
<span class="achievements-list__figure">13</span>
<span class="text text_achievements-list">Projects Completed</span>
</div>
</div>
</div>
</section>
<section class="skills section-offset" id="skills">
<span class="pre-subtitle">My skills</span>
<h2 class="subtitle">My Skills <span class="subtitle_colored">Overview</span></h2>
<p class="text text_skills">A glimpse into my full-stack proficiency and technical prowess.</p>
<ul class="skills__list list-reset">
<li class="skills__item">
<a class="technology" href="https://reactjs.org/" target="_blank">
<img class="technology__icon"
src="https://profilinator.rishav.dev/skills-assets/react-original-wordmark.svg"
alt="React" /></a>
</li>
<li class="skills__item">
<a class="technology" href="https://en.wikipedia.org/wiki/HTML5" target="_blank">
<img class="technology__icon"
src="https://profilinator.rishav.dev/skills-assets/html5-original-wordmark.svg"
alt="HTML5" /></a>
</li>
<li class="skills__item">
<a class="technology" href="https://www.javascript.com/" target="_blank">
<img class="technology__icon"
src="https://profilinator.rishav.dev/skills-assets/javascript-original.svg"
alt="JavaScript" /></a>
</li>
<li class="skills__item">
<a class="technology" href="https://www.typescriptlang.org/" target="_blank">
<img class="technology__icon"
src="https://profilinator.rishav.dev/skills-assets/typescript-original.svg"
alt="TypeScript" /></a>
</li>
<li class="skills__item">
<a class="technology" href="https://www.linux.org/" target="_blank">
<img class="technology__icon"
src="https://profilinator.rishav.dev/skills-assets/linux-original.svg"
alt="Linux" /></a>
</li>
<li class="skills__item">
<a class="technology" href="https://sass-lang.com/" target="_blank">
<img class="technology__icon"
src="https://profilinator.rishav.dev/skills-assets/sass-original.svg"
alt="Sass" /></a>
</li>
<li class="skills__item">
<a class="technology" href="https://nodejs.org/" target="_blank">
<img class="technology__icon"
src="https://profilinator.rishav.dev/skills-assets/nodejs-original-wordmark.svg"
alt="Node.js" /></a>
</li>
<li class="skills__item">
<a class="technology" href="https://getbootstrap.com/docs/3.4/javascript/" target="_blank">
<img class="technology__icon"
src="https://profilinator.rishav.dev/skills-assets/bootstrap-plain.svg"
alt="Bootstrap" /></a>
</li>
<li class="skills__item">
<a class="technology" href="https://dart.dev/" target="_blank">
<img class="technology__icon"
src="https://profilinator.rishav.dev/skills-assets/dartlang-icon.svg"
alt="Dart" /></a>
</li>
<li class="skills__item">
<a class="technology" href="https://github.com/" target="_blank">
<img class="technology__icon"
src="https://profilinator.rishav.dev/skills-assets/git-scm-icon.svg"
alt="Git" /></a>
</li>
<li class="skills__item">
<a class="technology" href="https://webpack.js.org/" target="_blank">
<img class="technology__icon"
src="https://profilinator.rishav.dev/skills-assets/webpack-original.svg"
alt="Webpack" /></a>
</li>
<li class="skills__item">
<a class="technology" href="https://www.adobe.com/in/products/premiere.html"
target="_blank">
<img class="technology__icon"
src="https://profilinator.rishav.dev/skills-assets/adobepremierepro.png"
alt="Premiere Pro" /></a>
</li>
<li class="skills__item">
<a class="technology" href="http://getbem.com/" target="_blank">
<img class="technology__icon"
src="https://profilinator.rishav.dev/skills-assets/bem.svg" alt="BEM" /></a>
</li>
<li class="skills__item">
<a class="technology" href="https://www.adobe.com/in/products/photoshop.html"
target="_blank">
<img class="technology__icon"
src="https://profilinator.rishav.dev/skills-assets/photoshop-plain.svg"
alt="Photoshop" /></a>
</li>
<li class="skills__item">
<a class="technology" href="https://www.w3schools.com/css/" target="_blank">
<img class="technology__icon"
src="https://profilinator.rishav.dev/skills-assets/css3-original-wordmark.svg"
alt="CSS3" /></a>
</li>
<li class="skills__item">
<a class="technology" href="https://gulpjs.com/" target="_blank">
<img class="technology__icon"
src="https://profilinator.rishav.dev/skills-assets/gulp-plain.svg"
alt="gulp.js" /></a>
</li>
<li class="skills__item">
<a class="technology" href="https://www.chartjs.org/" target="_blank">
<img class="technology__icon"
src="https://profilinator.rishav.dev/skills-assets/logo-title.svg"
alt="Chart.js" /></a>
</li>
<li class="skills__item">
<a class="technology" href="https://www.figma.com/" target="_blank">
<img class="technology__icon"
src="https://profilinator.rishav.dev/skills-assets/figma-icon.svg"
alt="Figma" /></a>
</li>
<li class="skills__item">
<a class="technology" href="https://www.jestjs.io/" target="_blank">
<img class="technology__icon"
src="https://profilinator.rishav.dev/skills-assets/jest.svg" alt="Jest" /></a>
</li>
</ul>
</section>
<section class="projects section-offset" id="projects">
<span class="pre-subtitle">My projects</span>
<h2 class="subtitle">Projects <span class="subtitle_colored">Showcase</span></h2>
<ul class="projects__list row list-reset">
<li class="col-lg-6 col-md-6">
<article class="project-card">
<picture class="project-card__photo">
<img class="project-card__image" src="img/projects/clip2notes.gif"
alt="Screenshot of Clip2Notes">
</picture>
<h3 class="project-card__title">Clip2Notes</h3>
<p class="text text_project-card">
Clip2Note is a tool that automatically converts video files into handy text
summaries. Our innovative approach allows users to extract key information from
videos and create summaries that are easy to read and analyse.</p>
<ul class="project-card__links list-reset">
<li class="project-card__item">
<a href="https://github.com/blackonechik/Clip2Note"
class="project-card__link project-card__link_git" target="_blank">View
Code</a>
</li>
</ul>
</article>
</li>
<li class="col-lg-6 col-md-6">
<article class="project-card">
<picture class="project-card__photo">
<img class="project-card__image" src="img/projects/coin-banking.jpg"
alt="Screenshot of Coin Banking">
</picture>
<h3 class="project-card__title">Coin Banking</h3>
<p class="text text_project-card">The application is a system for managing
user accounts, fund transfers and currency exchanges. It provides functionality
for authorisation, viewing a list of accounts, viewing existing card
information, transferring funds, viewing balance history, monitoring exchange rates
and displaying ATM points on the map.</p>
<ul class="project-card__links list-reset">
<li class="project-card__item">
<a href="https://coin.blackonechik.ru/" class="project-card__link"
target="_blank">Live Preview</a>
</li>
<li class="project-card__item">
<a href="https://github.com/blackonechik/coin-banking-application"
class="project-card__link project-card__link_git" target="_blank">View
Code</a>
</li>
</ul>
</article>
</li>
<li class="col-lg-6 col-md-6">
<article class="project-card">
<picture class="project-card__photo">
<img class="project-card__image" src="img/projects/highpass.jpg"
alt="Screenshot of High Pass">
</picture>
<h3 class="project-card__title">High Pass</h3>
<p class="text text_project-card">Website of a photo studio that does photo shoots and
runs its own unit</p>
<ul class="project-card__links list-reset">
<li class="project-card__item">
<a href="https://highpass.blackonechik.ru/" class="project-card__link"
target="_blank">Live Preview</a>
</li>
</ul>
</article>
</li>
<li class="col-lg-6 col-md-6">
<article class="project-card">
<picture class="project-card__photo">
<img class="project-card__image" src="img/projects/euclid.jpg"
alt="Screenshot of Euclid website">
</picture>
<h3 class="project-card__title">Euclid</h3>
<p class="text text_project-card">The website of a construction company that
is engaged in the design of residential premises</p>
<ul class="project-card__links list-reset">
<li class="project-card__item">
<a href="https://euclid2.blackonechik.ru/" class="project-card__link"
target="_blank">Live Preview</a>
</li>
<li class="project-card__item">
<a href="https://github.com/blackonechik/euclid-site"
class="project-card__link project-card__link_git" target="_blank">View
Code</a>
</li>
</ul>
</article>
</li>
<li class="col-lg-6 col-md-6">
<article class="project-card">
<picture class="project-card__photo">
<img class="project-card__image" src="img/projects/planapi.jpg"
alt="Screenshot of Telegram bot">
</picture>
<h3 class="project-card__title">Department of Statistics Bot
</h3>
<p class="text text_project-card">A Telegram bot using the Plan Player Analytics API
provides users with statistics on connections to game servers and other valuable
information. The user sends a request to the bot, which then interacts with the API,
processes the received data and returns digestible information to the user. This bot
is a useful tool for game server administrators, players and anyone interested in
game server statistics.</p>
</article>
</li>
<li class="col-lg-6 col-md-6">
<article class="project-card">
<picture class="project-card__photo">
<img class="project-card__image" src="img/projects/skillbus.jpg"
alt="Screenshot of CRM (Skillbus) website">
</picture>
<h3 class="project-card__title">CRM (Customer contact data management system) Skillbus
</h3>
<p class="text text_project-card">This project implements a web application for
customer management. The application allows you to display a list
of clients, add, edit and delete a client, as well as view
contact data of each client.</p>
<ul class="project-card__links list-reset">
<li class="project-card__item">
<a href="https://crm-skillbus.blackonechik.ru/" class="project-card__link"
target="_blank">Live
Preview</a>
</li>
<li class="project-card__item">
<a href="https://github.com/blackonechik/crm-skillbus"
class="project-card__link" target="_blank">View Code</a>
</li>
</ul>
</article>
</li>
<li class="col-lg-6 col-md-6">
<article class="project-card">
<picture class="project-card__photo">
<img class="project-card__image" src="img/projects/skillbox.jpg"
alt="Screenshot of Skillbox website">
</picture>
<h3 class="project-card__title">Skillbox</h3>
<p class="text text_project-card">A simple website built on the Bootstrap grid.</p>
<ul class="project-card__links list-reset">
<li class="project-card__item">
<a href="https://skillbox.blackonechik.ru/" class="project-card__link"
target="_blank">Live
Preview</a>
</li>
<li class="project-card__item">
<a href="https://github.com/blackonechik/skillbox-site"
class="project-card__link" target="_blank">View Code</a>
</li>
</ul>
</article>
</li>
<li class="col-lg-6 col-md-6">
<article class="project-card">
<picture class="project-card__photo">
<img class="project-card__image" src="img/projects/blanchard.jpg"
alt="Screenshot of Blanchard website">
</picture>
<h3 class="project-card__title">Blanchard</h3>
<p class="text text_project-card">Site for Blanchard Gallery, with an exhibition
of paintings, and descriptions of upcoming events.</p>
<ul class="project-card__links list-reset">
<li class="project-card__item">
<a href="https://blanchard.blackonechik.ru/" class="project-card__link"
target="_blank">Live Preview</a>
</li>
<li class="project-card__item">
<a href="https://github.com/blackonechik/blanchard-site"
class="project-card__link" target="_blank">View Code</a>
</li>
</ul>
</article>
</li>
</ul>
</section>
<section class="clients section-offset" id="clients">
<span class="pre-subtitle">Clients</span>
<h2 class="subtitle">What Say <span class="subtitle_colored">About Me</span></h2>
<p class="text text_clients">Below are reviews of my work that have been left by my employers</p>
<div class="clients__swiper swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="client">
<div class="client__top">
<span class="client__icon-quote"></span>
<img class="client__photo" src="img/clients/max.jpg"
alt="Photo of the first client">
<div class="client__info">
<h3 class="client__name">Max Armeec</h3>
<span class="client__role">My regular client</span>
</div>
</div>
<p class="text text_swiper">Vladislav is an intelligent, versatile young
man who can be trusted with work tasks. He gets along well with his
colleagues, knows how to solve problems and never stands still in his
development as a professional developer.</p>
</div>
</div>
<div class="swiper-slide">
<div class="client">
<div class="client__top">
<span class="client__icon-quote"></span>
<img class="client__photo" src="img/clients/evgeniy.png"
alt="Photo of the second client">
<div class="client__info">
<h3 class="client__name">Evgeny Trofimov</h3>
<span class="client__role">My regular client</span>
</div>
</div>
<p class="text text_swiper">I work with Vladislav more than a year, for
all the time of our co-operation never once failed in anything, always
all in time on the dates agreed in advance! He treats his
work with maximum understanding, desire and pleasure. Vladislav often offers his
own specific ideas, which has a positive impact on productivity and
results! In general, one thing I can say, I recommend this
specialist 10/10.</p>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</section>
<section class="feedback section-offset" id="feedback">
<span class="pre-subtitle">Contact me</span>
<h2 class="subtitle">Let’s Work <span class="subtitle_colored">Together</span></h2>
<form class="feedback__form form">
<label class="form__label">
<span class="visually-hidden">Enter your name</span>
<input class="form__input" id="name" type="text" name="name" placeholder="Name" required>
</label>
<label class="form__label">
<span class="visually-hidden">Enter your email</span>
<input class="form__input" id="email" type="email" name="email" placeholder="Email"
required>
</label>
<label class="form__label">
<span class="visually-hidden">Enter your subject</span>
<input class="form__input" id="subject" type="text" name="name" placeholder="Subject"
required>
</label>
<label class="form__label">
<span class="visually-hidden">Enter your message</span>
<textarea class="form__textarea" id="message" type="" name="name" placeholder="Message"
required></textarea>
</label>
<!-- <div class="form__captcha g-recaptcha" data-sitekey="6Ld2bGYpAAAAAJFfmlb4nKs2aEgF5zSfHyQxkhXx"></div> -->
<button class="btn btn_form" id="js-feedback-btn">Submit</button>
</form>
</section>
</div>
</div>
</main>
<footer class="footer">
<div class="container footer__container">
<p class="text">all rights required</p>
</div>
</footer>
</body>
</html>