-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
498 lines (492 loc) · 26.6 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/akasha_watermark.png" type="image/x-icon">
<meta name="author" content="Klaudia Biłan">
<meta name="description"
content="Moje portfolio na frontend developera - Klaudia Biłan. Znajdziesz tutaj moje projekty z zakresu frontendu, takie jak strony internetowe, aplikacje webowe, sklepy internetowe i wiele innych.">
<title>Portfolio | Klaudia Biłan</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.2.0/mdb.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.2.0/mdb.min.js"></script>
<script src="https://cdn.lordicon.com/ritcuqlt.js"></script>
<script defer src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="container-fluid bg-image" id="home">
<nav class="navbar navbar-expand-lg fixed-top navbar-scroll">
<div class="container-fluid">
<button class="navbar-toggler ps-0" type="button" data-mdb-toggle="collapse" data-mdb-target="#navbarExample01"
aria-controls="navbarExample01" aria-expanded="false" aria-label="Toggle navigation">
<span class="d-flex justify-content-start align-items-center">
<i class="fas fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarExample01">
<ul class="navbar-nav mb-2 p-3">
<li class="nav-item">
<a class="nav-link active" aria-current="page" aria-label="Home page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-label="About me page" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-label="Page with projects" href="#projects">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-label="Contact page" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="intro" class="bg-image" style=" background-image: url('img/header_background.jpg'); height: 100vh;">
<div class="social position-absolute">
<a href="https://github.com/xAkashax" class="p-1" aria-label="Link to github"><img src="img/icon/github.png"
alt="github icon" title="github" class="m-1"></a>
<a href="https://www.linkedin.com/in/klaudia-bilan/" class="p-1" aria-label="Link to linkedin"><img
src="img/icon/linkedin.png" alt="linkedin icon" title="linkedin" class="m-1"></a>
</div>
<div class="container d-flex ms-auto align-items-center text-center justify-content-center h-100">
<div class="d-flex row mb-lg-12">
<h1 class="mb-3 header-title">Hi, I'm Klaudia</h1>
<h2 class="subtitle">Frontend Developer</h2>
<div>
<a class="btn button-main btn-outline-light btn-lg m-2" href="#contact" role="button">Get in touch</a>
</div>
</div>
</div>
</div>
</header>
<main class="container-fluid p-0 main">
<button type="button" class="btn btn-floating btn-lg btn-back-to-top" id="btn-back-to-top">
<i class="fas fa-arrow-up"></i>
</button>
<section class="container-fluid p-5 about" id="about">
<div class="row">
<div class="col-md-6 gx-5 mb-4">
<h3 class="mb-4 section-title">About me</h3>
<p class="text">
My name is Klaudia and I'm a self-taught Front-End Web Developer and Car Photographer. I have a strong
passion for both web design and photography, and I love being able to combine my skills and creativity in
these two fields.
I love designing and building websites using HTML, CSS, and JavaScript. I enjoy designing and building
websites that are not only visually appealing, but also user-friendly and accessible.
</p>
<p class="text">
I'm always looking for new opportunities to explore and expand my skills as both a Car Photographer and
Web Developer. Thanks for taking the time to get to know me a little better!
</p>
<div class="socials-about mt-5">
<a href="https://www.instagram.com/xakvsha/" class="p-1" aria-label="Link to instagram"><img
src="img/icon/instagram.png" alt="instagram icon" title="instagram" class="my-1"></a>
<a href="https://www.facebook.com/xakvsha" class="p-1" aria-label="Link to facebook"><img
src="img/icon/facebook.png" alt="facebook icon" title="facebook" class="m-1"></a>
</div>
</div>
<div class="col-md-6 gx-5 mb-4">
<div class="d-flex lord-icon-wrap" data-mdb-ripple-color=" light">
<lord-icon src="https://cdn.lordicon.com/vixtkkbk.json" trigger="loop" delay="3200"
colors="primary:#486284,secondary:#e4e4e4">
</lord-icon>
<lord-icon src="https://cdn.lordicon.com/fgkmrslx.json" trigger="loop" delay="3300"
colors="primary:#486284,secondary:#b4b4b4" class=" align-self-center">
</lord-icon>
<lord-icon src="https://cdn.lordicon.com/qhgmphtg.json" trigger="loop" delay="3100"
colors="primary:#486284,secondary:#b4b4b4">
</lord-icon>
</div>
</div>
</div>
<div class="bg-wood">
</div>
</section>
<section class="container-fluid p-5 tools" id="tools">
<div class="row">
<div class="col-md-6 gx-5 mb-4">
<h3 class="mb-4 section-title">Tools and technologies</h3>
<p class="text tools-text">
I mostly use HTML and CSS for designing and building websites, with a focus on Responsive Web Design (RWD).
I also have a basic knowledge of JavaScript, and am currently learning more about it!
I'm familiar with several front-end frameworks like Bootstrap, Sass, and a little bit of Tailwind.
For coding and version control, I use Visual Studio Code and GitHub.
When it comes to design work, I rely on Figma. For photo and graphic editing needs, I use Adobe Photoshop
and Lightroom.
</p>
<p class="text tools-text">
I'm excited to continue my learning journey, and my next goal is to dive into React!
</p>
</div>
<div class="col-md-6 gx-5 mb-4">
<div class="row justify-content-between align-items-center m-0">
<div class="col-4">
<img src="img/icon/HTML5.png" alt="html5 icon" class="img-fluid">
</div>
<div class="col-4">
<img src="img/icon/CSS3.png" alt="css3 icon" class="img-fluid">
</div>
<div class="col-4">
<img src="img/icon/Javascript.png" alt="javascript icon" class="img-fluid">
</div>
</div>
<div class="row justify-content-between align-items-center m-0 mt-5">
<div class="col-4">
<img src="img/icon/Adobe Lightroom.png" alt="adobe lightroom icon" class="img-fluid">
</div>
<div class="col-4">
<img src="img/icon/Adobe Photoshop.png" alt="adobe photoshop icon" class="img-fluid">
</div>
<div class="col-4">
<img src="img/icon/Visual Studio Code.png" alt="visual studio code icon" class="img-fluid">
</div>
</div>
<div class="row justify-content-between align-items-center m-0 mt-5">
<div class="col-4">
<img src="img/icon/Sass.png" alt="sass icon" class="img-fluid">
</div>
<div class="col-4">
<img src="img/icon/TailwindCSS.png" alt="tailwindcss icon" class="img-fluid">
</div>
<div class="col-4">
<img src="img/icon/Bootstrap.png" alt="bootstrap icon" class="img-fluid">
</div>
</div>
<div class="row justify-content-between align-items-center m-0 mt-5">
<div class="col-4">
<img src="img/icon/Figma.png" alt="figma icon" class=" img-fluid">
</div>
<div class="col-4">
<img src="img/icon/Githubb.png" alt="github icon" class="img-fluid">
</div>
<div class="col-4">
<img src="img/icon/Wordpress.png" alt="wordpress icon" class="img-fluid">
</div>
</div>
</div>
</section>
<section class="container-fluid p-5 tools pb-12 gallery">
<h3 class="mb-4 section-title gallery-title">These are some of my favorite shots that I've taken - I hope you
enjoy them!
</h3>
<div class="row">
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
<img src="img/gallery-2.jpg" class="w-100 shadow-5-strong rounded mb-4 img-fluid" alt="Photo of car" />
<img src="img/gallery-3.jpg" class="w-100 shadow-5-strong rounded mb-4 img-fluid" alt="Photo of car" />
<img src="img/gallery-5.jpg" class="w-100 shadow-5-strong rounded mb-4 img-fluid" alt="Photo of car" />
</div>
<div class="col-lg-4 mb-4 mb-lg-0">
<img src="img/gallery-4.jpg" class="w-100 shadow-5-strong rounded mb-4 img-fluid" alt="Photo of car" />
<img src="img/gallery-6.jpg" class="w-100 shadow-5-strong rounded mb-4 img-fluid" alt="Photo of car" />
<img src="img/gallery-10.jpg" class="w-100 shadow-5-strong rounded mb-4 img-fluid" alt="Photo of car" />
</div>
<div class="col-lg-4 mb-4 mb-lg-0">
<img src="img/gallery-7.jpg" class="w-100 shadow-5-strong rounded mb-4 img-fluid" alt="Photo of car" />
<img src="img/gallery-8.jpg" class="w-100 shadow-5-strong rounded mb-4 img-fluid" alt="Photo of car" />
<img src="img/gallery-9.jpg" class="w-100 shadow-5-strong rounded mb-4 img-fluid" alt="Photo of car" />
</div>
</div>
<div class="bg-wood black-wood">
</div>
</section>
<section class="container-fluid p-3 projects" id="projects">
<div class="row justify-content-center">
<div class="col-md-2 mb-9 w-100">
<h3 class="mb-4 section-title main-title">Commercial projects</h3>
</div>
<div class="row mb-5">
<div class="col col-md-6">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="img/wamilweld.png" class="img-fluid img-project"
alt="screenshot from the wamilweld.com website" />
<a href="https://wamilweld.com/" target="_blank" aria-label="Link to www.wamiweld.com website">
<div class="mask" style="background-color: rgba(72, 98, 132, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h4 class="card-title">Wamilweld.com</h4>
<p class="card-text">
My first commercial project!<br />
I created a simple one page website in Wordpress for a client. The whole process of creating the
website was a new challenge for me. Before I started designing the website, I talked to the client to
understand what they wanted. Then, I created a sketch of the website, which I adapted to their
preferences. Once we agreed on the details, I started building the website. This project gave me
valuable experience in website design and helped
me learn how to create websites from scratch.</p>
<p class="card-text"><strong>Built with:</strong>
<ul>
<li> CMS Wordpress</li>
<li> RWD</li>
</ul>
</p>
<div class="text-center"> <a href="https://wamilweld.com/" class="btn button-main btn-outline-light"
target="_blank" aria-label="Link to www.wamiweld.com website">Website</a>
<a href="https://www.figma.com/file/16EwNURpjNeVVHliBljlwa/Wamil-Weld?t=1FvrgVrPEDbfP3du-1"
class="btn button-main btn-outline-light" target="_blank"
aria-label="Link to figma with wamilweld.com design project">Figma</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="d-flex align-items-center bd-highlight mb-6 project-title-wrap">
<div class="me-auto p-2 bd-highlight">
<h4 class="section-title">My other projects</h4>
</div>
<div class="p-2 bd-highlight">
<h4 class="section-title title-more">More little things</h4>
</div>
<div class="p-2 bd-highlight">
<lord-icon src="https://cdn.lordicon.com/qvzrpodt.json" trigger="loop" delay="3200"
colors="primary:#e4e4e4,secondary:#486284" style="width:3em;height:3em" class="arrows">
</lord-icon>
</div>
<div class="p-2 bd-highlight">
<a class="btn btn-block button-main btn-outline-light btn-lg m-2" href="https://github.com/xAkashax"
role="button">Github</a>
<a class="btn btn-block button-main btn-outline-light btn-lg m-2"
href="https://www.frontendmentor.io/profile/xAkashax" role="button">Frontend Mentor</a>
</div>
</div>
<div class="row mb-5">
<div class="col col-md-6 py-3">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="img/portfolio.png" class="img-fluid img-project"
alt="screenshot from the portfolio website" />
<a href="#!" target="_blank" aria-label="Link to portfolio website">
<div class="mask" style="background-color: rgba(72, 98, 132, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h4 class="card-title">Portfolio</h4>
<p class="card-text">Here you are! The project is a simple website that serves as my portfolio. The site
includes a short description about me, my projects and contact details.</p>
<p class="card-text"><strong>Built with:</strong>
<ul>
<li> HTML5</li>
<li> CSS3</li>
<li> Flexbox and Grid</li>
<li> Bootstrap 5</li>
<li> Lordicon</li>
<li> JS</li>
<li> Photoshop</li>
</ul>
</p>
<div class="text-center">
<a href="https://www.figma.com/file/zMVeMblqKPIdhK5Z97sI9N/Portfolio?node-id=0%3A1&t=WtSUol4t7cLZJWQI-1"
class="btn button-main btn-outline-light mb-2" target="_blank"
aria-label="Link to figma with design website">Figma</a> <a
href="https://github.com/xAkashax/portfolio" class="btn button-main btn-outline-light mb-2"
target="_blank" aria-label="Link to github">Github</a>
</div>
</div>
</div>
</div>
<div class="col col-md-6 py-3">
<div class="card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="img/petcare.png" class="img-fluid img-project" alt="screenshot from the Pet Care website" />
<a href="https://xakashax.github.io/pet-care-website/" target="_blank"
aria-label="Link to pet care website">
<div class="mask" style="background-color: rgb(72, 98, 132, 0.15);;"></div>
</a>
</div>
<div class="card-body">
<h4 class="card-title">Pet Care Website</h4>
<p class="card-text">This is a Pet Care Website which I just made after learning some JavaScript from
Jonas Schmedtmann's course. At first, I just wanted to practice the course material. Finally, I made
my own version of the site and added a few things. In course, the site wasn't responsive, that's why I
starded from Desktop view (Usually I use the “mobile first” principle).</p>
<p class="card-text"><strong>Built with:</strong>
<ul>
<li> Semantic HTML5 markup</li>
<li> CSS3</li>
<li> Pseudo-elements</li>
<li> Flexbox and Grid</li>
<li> Desktop-first workflow</li>
<li> JS</li>
<li> Photoshop</li>
</ul>
</p>
<div class="text-center">
<a href="https://xakashax.github.io/pet-care-website/" class="btn button-main btn-outline-light"
target="_blank" aria-label="Link tpet care website">Website</a>
<a href="https://github.com/xAkashax/pet-care-website" class="btn button-main btn-outline-light"
target="_blank" aria-label="Link to github">Github</a>
</div>
</div>
</div>
</div>
</div>
<div class="row mb-5">
<div class="col col-md-6 py-3">
<div class=" card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="img/photowebsite.png" class="img-fluid img-project" alt="screenshot from the photo website" />
<a href="https://xakashax.github.io/photo-website/" target="_blank" aria-label="Link to photo website">
<div class="mask" style="background-color:rgba(72, 98, 132, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h4 class="card-title">Akasha Photography - Car photography portfolio</h4>
<p class="card-text">Because car photography is one of my hobbies, I made this small website with my
photo portfolio 📸. Mainly for displaying images downloaded from the folder on imgur.</p>
<p class="card-text"><strong>Built with:</strong>
<ul>
<li> HTML5</li>
<li> CSS3</li>
<li> Pseudo-elements</li>
<li> Flexbox and Grid</li>
<li> Mobile First</li>
<li> JS</li>
<li> Imgur API</li>
</ul>
</p>
<div class="text-center">
<a href="https://xakashax.github.io/photo-website/" class="btn button-main btn-outline-light mb-2"
target="_blank" aria-label="Link to photo website">Website</a>
<a href="https://www.figma.com/file/cP4j7GgCny74yNMHBqdGug/Photo-website?node-id=0%3A1&t=zZSo3HiV5BPkgMsV-1"
class="btn button-main mb-2" target="_blank"
aria-label="Link to figma with design photo website">Figma</a>
<a href="https://github.com/xAkashax/photo-website" class="btn button-main btn-outline-light mb-2"
target="_blank" aria-label="Link to github">Github</a>
</div>
</div>
</div>
</div>
<div class="col col-md-6 py-3">
<div class=" card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="img/moonkingdom.png" class="img-fluid img-project"
alt="screenshot from the Moon Kingdom website" />
<a href="https://xakashax.github.io/parallax-scrolling-website/" target="_blank"
aria-label="Link to moon kingdom website">
<div class="mask" style="background-color: rgba(72, 98, 132, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h4 class="card-title">Moon Kingdom - Responsive Parallax Scrolling Webiste inspired by Sailor Moon</h4>
<p class="card-text">Initially, it was supposed to be just an exercise to create a Parallax Scrollin
Website. Only for desktop preview. Finally, I made an entire landing page out of it. Also for tablet
and mobile view. Using desktop-first. Webiste inspired by Sailor Moon.</p>
<p class="card-text"><strong>Built with:</strong>
<ul>
<li> HTML5</li>
<li> CSS3</li>
<li> Pseudo-elements</li>
<li> Flexbox</li>
<li> Desktop First</li>
<li> A little JS</li>
<li> Photoshop</li>
</ul>
</p>
<div class="text-center"> <a href="https://xakashax.github.io/parallax-scrolling-website/"
class="btn button-main" target="_blank" aria-label="Link to moon kingdom website">Website</a>
<a href="https://github.com/xAkashax/parallax-scrolling-website"
class="btn button-main btn-outline-light" target="_blank" aria-label="Link to github">Github</a>
</div>
</div>
</div>
</div>
</div>
<div class="row mb-10">
<div class="col col-md-6 py-3">
<div class=" card">
<div class="bg-image hover-overlay ripple" data-mdb-ripple-color="light">
<img src="img/barbershop.png" class="img-fluid img-project"
alt="screenshot from the the barber shop duck website" />
<a href="https://xakashax.github.io/barber-shop-duck" target="_blank"
aria-label="Link to barbershop website">
<div class="mask" style="background-color: rgba(72, 98, 132, 0.15);"></div>
</a>
</div>
<div class="card-body">
<h4 class="card-title">The Barber Shop Duck - Landing Page</h4>
<My class="card-text">My first bigger project - A basic responsive landing page of a barber shop made
with HTML, CSS and a little JS</p>
<p class="card-text"><strong>Built with:</strong>
<ul>
<li> HTML5</li>
<li> CSS3</li>
<li> Pseudo-elements</li>
<li> Flexbox</li>
<li> Mobile First</li>
<li> JS</li>
</ul>
</p>
<div class="text-center">
<a href="https://xakashax.github.io/barber-shop-duck" class="btn button-main btn-outline-light"
target="_blank" aria-label="Link to barbershop website">Website</a>
<a href="https://github.com/xAkashax/barber-shop-duck" class="btn button-main btn-outline-light"
target="_blank" aria-label="Link to github">Github</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class=" container-fluid p-3 about contact" id="contact">
<div class="row">
<div class="col-sm-12">
<h3 class="mb-4 section-title">Contact</h3>
<p class="text text-center">
Experience is not my strong point, but I make up for it with great ambition and enthusiasm.
I am looking for opportunities to develop and gain valuable experience in the industry.
Or maybe you need a determined person in your team? Contact me to discuss collaboration opportunities and
create something great together.
</p>
</div>
</div>
<div class="row">
<div class="col-md-6 text-md-start">
<h3 class="section-title contact-title">Get in Touch</h3>
<ul class="list-unstyled text p-4">
<li class="d-flex align-items-center mb-2 py-2"><img src="img/icon/mail.png" alt="email icon"
class="me-3"></i><a href="mailto:bilan.klaudia@gmail.com"
aria-label="Link to mail">bilan.klaudia@gmail.com</a></li>
<li class="d-flex align-items-center mb-2"><img src="img/icon/pin-round.png" alt="pin icon"
class="me-3"></i>
Wrocław,
Poland</li>
</ul>
</div>
<div class="col-md-6 d-flex justify-content-center align-items-center contact-list">
<ul class="list-inline social-icons">
<li class="list-inline-item"><a href="https://www.linkedin.com/in/klaudia-bilan/" class="p-1"
aria-label="Link to linkedin"><img src="img/icon/linkedin.png" alt="linkedin icon" title="linkedin"
class="my-1"></a></i></a></li>
<li class="list-inline-item"><a href="https://github.com/xAkashax" class="p-1"
aria-label="Link to github"><img src="img/icon/github.png" alt="github icon" title="github"
class="m-1"><i class="bi bi-twitter"></i></a></li>
<li class="list-inline-item"><a href="https://www.instagram.com/xakvsha/" class="p-1"
aria-label="Link to instagram"><img src="img/icon/instagram45.png" alt="instagram icon"
title="instagram" class="m-1"><i class="bi bi-instagram"></i></a></li>
<li class="list-inline-item"><a href="https://www.facebook.com/xakvsha" class="p-1"
aria-label="Link to facebook"><img src="img/icon/facebook45.png" alt="facebook icon" title="facebook"
class="m-1"><i class="bi bi-linkedin"></i></a></li>
</ul>
</div>
</div>
</section>
</main>
<footer class="text-center text-lg-start">
<div class="text-center copyright p-3">
Copyright © <span class="actual-year"></span> Klaudia Biłan</a> | Created by <a
href="https://github.com/xAkashax">xAkashax</a>
</div>
</footer>
</body>
</html>