-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
183 lines (174 loc) · 8.21 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
<!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">
<title>Personal website</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css"/>
<link rel="stylesheet" href="css/styles.css" type="text/css"/>
<script src="js/script.js" defer></script>
</head>
<body>
<div class="nav-container">
<div class="container">
<header>
<a href="index.html" class="logo">
<img src="assets/logo2.svg" alt="">
</a>
<button type="button" class="navbar-toggler">
<svg class="navbar-toggler-icon" width="26" height="21" viewBox="0 0 26 21" xmlns="http://www.w3.org/2000/svg">
<g id="burger-menu">
<g id="lines-group">
<path id="bottom-line" d="M12.4583 21H0.541667C0.242666 21 0 20.328 0 19.5C0 18.672 0.242666 18 0.541667 18H12.4583C12.7573 18 13 18.672 13 19.5C13 20.328 12.7573 21 12.4583 21Z"/>
<path id="middle-line" d="M24.9167 12.1297H1.08333C0.485331 12.1297 0 11.4577 0 10.6297C0 9.80167 0.485331 9.12967 1.08333 9.12967H24.9167C25.5147 9.12967 26 9.80167 26 10.6297C26 11.4577 25.5147 12.1297 24.9167 12.1297Z"/>
<path id="top-line" d="M24.9167 3.75632H1.08333C0.485331 3.75632 0 3.08432 0 2.25632C0 1.42831 0.485331 0.756317 1.08333 0.756317H24.9167C25.5147 0.756317 26 1.42831 26 2.25632C26 3.08432 25.5147 3.75632 24.9167 3.75632Z"/>
</g>
</g>
</svg>
</button>
<div class="navigation">
<nav class="main-nav">
<ul>
<li><a href="">About me</a></li>
<li><a href="">My Projects</a></li>
</ul>
</nav>
<nav class="button-container">
<div class="button-small">
<a href="">Let's talk</a>
</div>
</nav>
</div>
</header>
</div>
</div>
<div class="hero">
<div class="container">
<div class="content-container">
<h1>Get your product to the next level </h1>
<p class="hero-p">Meet Tomas Liubertas <span>🚀
</span></p>
<svg class="scroll" width="59" height="59" viewBox="0 0 59 59" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="scroll-down-icon">
<g id="circle">
<g id="arrow2">
<path id="arrow2_2" d="M28.7607 43.0648C29.3276 43.5648 30.178 43.5648 30.745 43.0648L42.4958 32.7017C43.5324 31.7875 42.8858 30.0767 41.5036 30.0767C41.2313 30.0767 40.9684 30.176 40.7642 30.3561L30.0835 39.7755C29.8946 39.9422 29.6111 39.9422 29.4221 39.7755L18.7414 30.3561C18.5372 30.176 18.2743 30.0767 18.002 30.0767C16.6198 30.0767 15.9732 31.7875 17.0099 32.7017L28.7607 43.0648Z" fill="white" stroke="white"/>
</g>
<g id="arrow1">
<path id="arrow1_2" d="M28.7607 31.4882C29.3276 31.9882 30.178 31.9882 30.745 31.4882L42.4958 21.125C43.5324 20.2108 42.8858 18.5 41.5036 18.5C41.2313 18.5 40.9684 18.5994 40.7642 18.7795L30.0835 28.1989C29.8946 28.3655 29.6111 28.3655 29.4221 28.1989L18.7414 18.7795C18.5372 18.5994 18.2743 18.5 18.002 18.5C16.6198 18.5 15.9732 20.2108 17.0099 21.125L28.7607 31.4882Z" fill="white" stroke="white"/>
</g>
<rect x="2.5" y="2.5" width="54" height="54" rx="27" stroke="white" stroke-width="5"/>
</g>
</g>
</svg>
</div>
</div>
<div class="bg-container">
<div class="left"></div>
<svg class="right" width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="hero-illustration">
<g id="frame-1">
<path d="M250 25C250 11.1929 261.193 0 275 0H375V125H275C261.193 125 250 113.807 250 100V25Z" fill="#00DFFF"/>
</g>
<g id="frame-2">
<path d="M125 150C125 136.193 136.193 125 150 125H225C238.807 125 250 136.193 250 150V225C250 238.807 238.807 250 225 250H125V150Z" fill="white"/>
</g>
<g id="frame-3">
<rect x="250" y="125" width="125" height="125" rx="62.5" fill="#FF00FF"/>
</g>
<g id="frame-4">
<path d="M375 125H475C488.807 125 500 136.193 500 150V250H400C386.193 250 375 238.807 375 225V125Z" fill="#8000FF"/>
</g>
<g id="frame-5">
<path d="M0 250H100C113.807 250 125 261.193 125 275V375H25C11.1929 375 0 363.807 0 350V250Z" fill="#FF00FF"/>
</g>
<g id="frame-6">
<rect x="125" y="250" width="125" height="125" rx="62.5" fill="#8000FF"/>
</g>
<g id="frame-7">
<path d="M250 275C250 261.193 261.193 250 275 250H375V375H275C261.193 375 250 363.807 250 350V275Z" fill="#00DFFF"/>
</g>
<g id="frame-8">
<path d="M125 400C125 386.193 136.193 375 150 375H225C238.807 375 250 386.193 250 400V475C250 488.807 238.807 500 225 500H125V400Z" fill="white"/>
</g>
</g>
</svg>
</div>
</div>
<section class="featured">
<div class="container">
<div class="featured-container">
<div class="featured-left">
<img class="bg-img" src="assets/elipse-illustration.svg" alt="">
<div class="inner">
<p class="subtitle">About me</p>
<a href="#" class="featured-title">Some project i am proud of</a>
<p class="featured-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
</div>
<div class="featured-right">
<img class="featured-img" src="assets/featured-image.svg" alt="featured image">
</div>
</div>
</div>
</section>
<section class="skills">
<div class="container">
<div class="skills-container">
<ul>
<li class="skills-list">
<div class="icon-container">
<img src="assets/skills-icon.svg" alt="skills icon">
</div>
<p class="skills-title">Some short heading</p>
<p class="skills-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</li>
<li class="skills-list">
<div class="icon-container">
<img src="assets/solutions-icon.svg" alt="skills icon">
</div>
<p class="skills-title">Right solutions for tough problems</p>
<p class="skills-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</li>
<li class="skills-list">
<div class="icon-container">
<img src="assets/solutions-icon.svg" alt="skills icon">
</div>
<p class="skills-title">Right solutions for tough problems</p>
<p class="skills-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</li>
</ul>
</div>
</div>
</section>
<section class="contact-section">
<div class="container">
<div class="contact-container">
<span class="contact-icon">
<img src="assets/chat-ico.svg" alt="">
</span>
<div class="contact-slogan">
<p class="contact">Like what you see?</p>
<span> <a href="#">Let’s talk !</a></span>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer-container">
<div class="footer-top">
<p class="footer-logo">Tomas Liubertas</p>
<div class="social-icons-container">
<img src="assets/twitter-ico.svg" alt="twitter icon">
<img src="assets/linkedin-ico.svg" alt="linkedin icon">
</div>
</div>
<hr>
<p class="copyright">© All rights reserved.</p>
</div>
</div>
</footer>
</body>
</html>