-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (117 loc) · 4.74 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebDev Journey</title>
<meta name="description" content="">
<!-- <link rel="stylesheet" href="assests/style.css"> -->
<!-- <link rel="stylesheet" href="assests/testAI.css"> -->
<link rel="stylesheet" href="assests/style.css">
</head>
<body>
<!-- Navbar and Logo-->
<section class="container">
<!-- <section class="logo">Kirill Lazutin </section> -->
<nav class="navbar">
<ul>
<li><a href="#aboutme">About me</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#certs">Certificates</a></li>
<li><a href="#resume">Resume</a></li>
<li><a href="#contactme">Contact me</a></li>
</ul>
</nav>
</section>
<!-- About me section -->
<section id="aboutme" class="about_me">
<article class="about">
<h1>Hello I'm Kirill Lazutin</h1>
<p>As a passionate student studying at the University of New Brunswick, my journey into the exciting world of Full
Stack
Web Development has been nothing short of inspiring. From the early days of learning the fundamentals of HTML
and
CSS to
creating my very first projects, I have embraced the challenges and celebrated the milestones that have shaped
my
career
path.
HTML and CSS are the backbone of every web application, and they are my first steps into the realm of web
development. I
vividly remember the thrill of crafting my first HTML page, structuring content with semantic elements, and
adding
styles with CSS to bring it to life. The ability to design visually appealing layouts and create user-friendly
interfaces sparked my passion for front-end development.
</p>
</article>
<figure class="img">
<img src="assests/images/me.png" height="410px" width="410px" alt="my photo">
</figure>
</section>
<!-- Projects Section styling cards -->
<section id="projects" class="work">
<section class="work-img">
<div class="card-1">
<h2>Prework Study Guide Project</h2>
<a href="https://kirill777-web.github.io/prework-study-guide/"><img src="assests/images/PreworkStudyGuide.png"
width="250" height="250" alt="Prework Study Guide Project"></a>
</div>
<div class="card-2">
<h2>Code Refactor HTML/CSS</h2>
<a href="https://kirill777-web.github.io/Horiseon/"><img src="assests/images/HoriseonProject.png" width="250"
height="250" alt="Code Refactor HTML/CSS"></a>
</div>
<div class="card-3">
<h2>CSS Snippet Cheatsheet</h2>
<a href="https://kirill777-web.github.io/CSS_Cheatsheet/"><img src="assests/images/CSScodeSnippet.png"
width="250" height="250" alt="CSS Snippet Cheatsheet"></a>
</div>
<div class="card-4">
<h2>Pricing Tags</h2>
<a href="https://kirill777-web.github.io/pricing-tags/"><img src="assests/images/pricingtags.png" width="250"
height="250" alt=""></a>
</div>
</section>
</section>
<!-- Section Certificates -->
<section class="certs" id="certs">
<div class="slider-container">
<button id="prevBtn" class="arrow-btn">❮</button>
<div class="certificates-slider">
<div class="certificate"> <img id="img" src="assests/images/AWS Certified Cloud Practitioner certificate.jpg"
alt="AWS certificate">
</div>
<div class="certificate"><img id="img" src="assests/images/googleITsupport.jpg" alt="Google certificate"></div>
<div class="certificate"></div>
<div class="certificate"></div>
</div>
<button id="nextBtn" class="arrow-btn">❯</button>
<div class="indicators">
<!-- ... add as many lines as you have certificates -->
<div class="dot active"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</div>
</section>
<!-- Resume section -->
<section id="resume" class="resume">
<h2>Coming soon...</i></h2>
<a href="#aboutme" class="back-to-top">↑ To top</a>
</section>
<!-- Foter section and contact info inside the footer -->
<footer id="contactme" class="footer">
<h3>© 2023 Kirill Lazutin</h3>
<ul>
<li><a href="#">LinkedIn</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Gmail</a></li>
<li><a href="https://www.credly.com/users/kirill-lazutin">Credly</a></li>
</ul>
</footer>
<script src="assests/app.js"></script>
</body>
</html>