-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
152 lines (149 loc) · 5.46 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Piotr Jarznicki - Junior Front-End Developer</title>
<link
href="https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link
rel="stylesheet"
href="https://unpkg.com/swiper/swiper-bundle.min.css"
/>
<link rel="stylesheet" type="text/css" href="/css/main.css" />
</head>
<body>
<header class="header">
<div class="lines-container"></div>
<section class="logo-menu">
<p class="logo-menu__text">Piotr Jarznicki</p>
<nav class="main-nav-desktop">
<ul class="main-nav-desktop__item">
<li class="main-nav-desktop__list">
<a href="/index.html" class="main-nav-desktop__link">Home</a>
</li>
<li class="main-nav-desktop__list">
<a href="/about-me.html" class="main-nav-desktop__link"
>About me</a
>
</li>
<li class="main-nav-desktop__list">
<a href="/skills.html" class="main-nav-desktop__link">Skills</a>
</li>
<li class="main-nav-desktop__list">
<a href="/projects.html" class="main-nav-desktop__link"
>Projects</a
>
</li>
<li class="main-nav-desktop__list">
<a href="/contact-me.html" class="main-nav-desktop__link"
>Contact me</a
>
</li>
</ul>
</nav>
<div class="container-logo">
<img
src="assets/hamburger-icon.png"
alt="Three bars used as a menu icon"
class="logo-menu__hamburger-icon"
/>
</div>
</section>
<section class="header__navigation">
<nav class="main-nav">
<ul class="main-nav__list">
<li class="main-nav__item">
<a class="main-nav__link" href="/index.html"
><img class="main-nav__image" src="/assets/home.svg" alt=""
/></a>
</li>
<li class="main-nav__item">
<a href="/about-me.html" class="main-nav__link"
><img class="main-nav__image" src="/assets/man.svg" alt=""
/></a>
</li>
<li class="main-nav__item">
<a href="/skills.html" class="main-nav__link"
><img class="main-nav__image" src="/assets/pencil.svg" alt=""
/></a>
</li>
<li class="main-nav__item">
<a href="/projects.html" class="main-nav__link"
><img class="main-nav__image" src="/assets/projects.svg" alt=""
/></a>
</li>
<li class="main-nav__item">
<a href="/contact-me.html" class="main-nav__link"
><img class="main-nav__image" src="/assets/mail.svg" alt=""
/></a>
</li>
</ul>
</nav>
</section>
<section class="hero header__hero transition-fade" id="swup">
<div class="hero__text">
<h2 class="hero__heading">Hi!</h2>
<h1 class="hero__title">I am Piotr!</h1>
<h3 class="hero__minor-heading">Junior Front-End Developer</h3>
<p class="hero__subtitle">
Passionate about web and how things work.
</p>
<a href="/projects.html">
<button class="hero__button">See my projects</button></a
>
</div>
<img
src="assets/Robot.png"
alt="Illustration of a robot which is currently being repaired"
class="hero__illustration"
/>
</section>
<div class="another-container">
<section class="social-media header__social-media">
<nav class="nav social-media__nav">
<ul class="nav__list">
<li class="nav__item">
<a href="https://github.com/piotr-jarznicki" class="nav__link"
><img
src="assets/github-logo.svg"
class="nav__image"
alt="github black icon"
/></a>
</li>
<li class="nav__item">
<a
href="https://www.linkedin.com/in/piotr-jarznicki/"
class="nav__link"
><img
src="assets/linkedin.svg"
class="nav__image"
alt="linkedin black icon"
/></a>
</li>
<li class="nav__item">
<a
href="https://www.facebook.com/piotr.jarznicki"
class="nav__link"
><img
src="assets/facebook.svg"
class="nav__image"
alt="facebook black icon"
/></a>
</li>
</ul>
</nav>
</section>
</div>
<div class="transition-wipe overlay"></div>
</header>
<script src="https://unpkg.com/swup@latest/dist/swup.min.js"></script>
<script src="js/app.js"></script>
<script>
const swup = new Swup();
</script>
</body>
</html>