-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
249 lines (248 loc) · 12.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My personal Website</title>
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
<header>
<div class="container__top">
<div class="container__top--left"></div>
<div class="container__top--right">
<h1>newbie's place</h1>
<nav>
<ul>
<li><a href="#contact">Contact</a></li>
<li><a href="#social">Social</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#links">Links</a></li>
<li><a href="#music">Music</a></li>
</ul>
<h3>Intro</h3>
<p>One day I will retire and sit on this bench at the ocean 🌊</p>
<h3>Hobbies</h3>
<ul class="list-hobbies">
<li>playing basketball</li>
<li>cycling</li>
<li>swimming</li>
<li>design / draw</li>
</ul>
</nav>
</div>
</div>
</header>
<main>
<!-- contact -->
<section id="contact" class="container container__contact ga_relative">
<!-- topleft -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="12"
height="12"
viewBox="0 0 24 24"
class="ga_svg ga_svg--topleft"
>
<path
fill="currentColor"
d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8z"
/>
</svg>
<!-- topright -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="12"
height="12"
viewBox="0 0 24 24"
class="ga_svg ga_svg--topright"
>
<path
fill="currentColor"
d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8z"
/>
</svg>
<!-- bottomleft -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="12"
height="12"
viewBox="0 0 24 24"
class="ga_svg ga_svg--bottomleft"
>
<path
fill="currentColor"
d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8z"
/>
</svg>
<!-- bottomright -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="12"
height="12"
viewBox="0 0 24 24"
class="ga_svg ga_svg--bottomright"
>
<path
fill="currentColor"
d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8z"
/>
</svg>
<div class="contact-item">
<h4>Name</h4>
<p>Gregor</p>
</div>
<div class="contact-item">
<h4>Email</h4>
<p>[email protected]</p>
</div>
<div class="contact-item">
<h4>Phone</h4>
<p>+49 1234 567</p>
</div>
</section>
<section id="social" class="container container__social">
<div class="social-item">
<a href="https://dribbble.com/gregorsart">
<svg
class="svg-social"
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 256 256"
>
<path
fill="transparent"
d="M128 8.5c66 0 119.4 53.4 119.4 119.3S194 247.2 128 247.2S8.6 193.8 8.6 127.9S62 8.5 128 8.5Z"
/>
<path
fill="aliceblue"
d="M128 255.7c-70.6 0-128-57.3-128-127.8C0 57.3 57.4 0 128 0s128 57.3 128 127.8s-57.4 127.9-128 127.9Zm107.9-110.4c-3.7-1.2-33.8-10.1-68.1-4.7c14.3 39.2 20.1 71.2 21.2 77.8c24.6-16.5 42.1-42.7 46.9-73.1Zm-65.2 83.2c-1.6-9.6-8-43-23.3-82.8c-.2.1-.5.2-.7.2c-61.7 21.5-83.8 64.2-85.8 68.2c18.5 14.4 41.8 23 67.1 23c15.1.1 29.6-3 42.7-8.6ZM46.8 201c2.5-4.2 32.5-53.8 88.9-72.1c1.4-.5 2.9-.9 4.3-1.3c-2.7-6.2-5.7-12.4-8.9-18.5c-54.6 16.3-107.6 15.6-112.4 15.5c0 1.1-.1 2.2-.1 3.3c.1 28.1 10.7 53.7 28.2 73.1ZM21 105.6c4.9.1 49.9.3 101.1-13.3C104 60.1 84.4 33.1 81.6 29.2C50.9 43.6 28.1 71.8 21 105.6Zm81.4-83.8c3 4 22.9 31 40.8 63.9c38.9-14.6 55.3-36.6 57.3-39.4c-19.3-17.1-44.7-27.5-72.5-27.5c-8.8 0-17.4 1.1-25.6 3Zm110.2 37.1c-2.3 3.1-20.6 26.6-61 43.1c2.5 5.2 5 10.5 7.3 15.8c.8 1.9 1.6 3.8 2.4 5.6c36.4-4.6 72.5 2.8 76.1 3.5c-.3-25.7-9.5-49.4-24.8-68Z"
/>
</svg>
<p>Dribbble</p>
</a>
</div>
<div class="social-item">
<a href="https://github.com/gregorsart">
<svg
class="svg-social"
xmlns="http://www.w3.org/2000/svg"
width="32.77"
height="32"
viewBox="0 0 256 250"
>
<path
fill="aliceblue"
d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46c6.397 1.185 8.746-2.777 8.746-6.158c0-3.052-.12-13.135-.174-23.83c-35.61 7.742-43.124-15.103-43.124-15.103c-5.823-14.795-14.213-18.73-14.213-18.73c-11.613-7.944.876-7.78.876-7.78c12.853.902 19.621 13.19 19.621 13.19c11.417 19.568 29.945 13.911 37.249 10.64c1.149-8.272 4.466-13.92 8.127-17.116c-28.431-3.236-58.318-14.212-58.318-63.258c0-13.975 5-25.394 13.188-34.358c-1.329-3.224-5.71-16.242 1.24-33.874c0 0 10.749-3.44 35.21 13.121c10.21-2.836 21.16-4.258 32.038-4.307c10.878.049 21.837 1.47 32.066 4.307c24.431-16.56 35.165-13.12 35.165-13.12c6.967 17.63 2.584 30.65 1.255 33.873c8.207 8.964 13.173 20.383 13.173 34.358c0 49.163-29.944 59.988-58.447 63.157c4.591 3.972 8.682 11.762 8.682 23.704c0 17.126-.148 30.91-.148 35.126c0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002C256 57.307 198.691 0 128.001 0Zm-80.06 182.34c-.282.636-1.283.827-2.194.39c-.929-.417-1.45-1.284-1.15-1.922c.276-.655 1.279-.838 2.205-.399c.93.418 1.46 1.293 1.139 1.931Zm6.296 5.618c-.61.566-1.804.303-2.614-.591c-.837-.892-.994-2.086-.375-2.66c.63-.566 1.787-.301 2.626.591c.838.903 1 2.088.363 2.66Zm4.32 7.188c-.785.545-2.067.034-2.86-1.104c-.784-1.138-.784-2.503.017-3.05c.795-.547 2.058-.055 2.861 1.075c.782 1.157.782 2.522-.019 3.08Zm7.304 8.325c-.701.774-2.196.566-3.29-.49c-1.119-1.032-1.43-2.496-.726-3.27c.71-.776 2.213-.558 3.315.49c1.11 1.03 1.45 2.505.701 3.27Zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033c-1.448-.439-2.395-1.613-2.103-2.626c.301-1.01 1.747-1.484 3.207-1.028c1.446.436 2.396 1.602 2.095 2.622Zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95c-1.53.034-2.769-.82-2.786-1.86c0-1.065 1.202-1.932 2.733-1.958c1.522-.03 2.768.818 2.768 1.868Zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37c-1.485.271-2.861-.365-3.05-1.386c-.184-1.056.893-2.114 2.376-2.387c1.514-.263 2.868.356 3.061 1.403Z"
/>
</svg>
<p>Github</p>
</a>
</div>
<div class="social-item">
<a href="https://www.instagram.com/gregorsart">
<svg
class="svg-social"
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 256 256"
>
<path
fill="aliceblue"
d="M128 23.064c34.177 0 38.225.13 51.722.745c12.48.57 19.258 2.655 23.769 4.408c5.974 2.322 10.238 5.096 14.717 9.575c4.48 4.479 7.253 8.743 9.575 14.717c1.753 4.511 3.838 11.289 4.408 23.768c.615 13.498.745 17.546.745 51.723c0 34.178-.13 38.226-.745 51.723c-.57 12.48-2.655 19.257-4.408 23.768c-2.322 5.974-5.096 10.239-9.575 14.718c-4.479 4.479-8.743 7.253-14.717 9.574c-4.511 1.753-11.289 3.839-23.769 4.408c-13.495.616-17.543.746-51.722.746c-34.18 0-38.228-.13-51.723-.746c-12.48-.57-19.257-2.655-23.768-4.408c-5.974-2.321-10.239-5.095-14.718-9.574c-4.479-4.48-7.253-8.744-9.574-14.718c-1.753-4.51-3.839-11.288-4.408-23.768c-.616-13.497-.746-17.545-.746-51.723c0-34.177.13-38.225.746-51.722c.57-12.48 2.655-19.258 4.408-23.769c2.321-5.974 5.095-10.238 9.574-14.717c4.48-4.48 8.744-7.253 14.718-9.575c4.51-1.753 11.288-3.838 23.768-4.408c13.497-.615 17.545-.745 51.723-.745M128 0C93.237 0 88.878.147 75.226.77c-13.625.622-22.93 2.786-31.071 5.95c-8.418 3.271-15.556 7.648-22.672 14.764C14.367 28.6 9.991 35.738 6.72 44.155C3.555 52.297 1.392 61.602.77 75.226C.147 88.878 0 93.237 0 128c0 34.763.147 39.122.77 52.774c.622 13.625 2.785 22.93 5.95 31.071c3.27 8.417 7.647 15.556 14.763 22.672c7.116 7.116 14.254 11.492 22.672 14.763c8.142 3.165 17.446 5.328 31.07 5.95c13.653.623 18.012.77 52.775.77s39.122-.147 52.774-.77c13.624-.622 22.929-2.785 31.07-5.95c8.418-3.27 15.556-7.647 22.672-14.763c7.116-7.116 11.493-14.254 14.764-22.672c3.164-8.142 5.328-17.446 5.95-31.07c.623-13.653.77-18.012.77-52.775s-.147-39.122-.77-52.774c-.622-13.624-2.786-22.929-5.95-31.07c-3.271-8.418-7.648-15.556-14.764-22.672C227.4 14.368 220.262 9.99 211.845 6.72c-8.142-3.164-17.447-5.328-31.071-5.95C167.122.147 162.763 0 128 0Zm0 62.27c-36.302 0-65.73 29.43-65.73 65.73c0 36.302 29.428 65.73 65.73 65.73c36.301 0 65.73-29.428 65.73-65.73c0-36.301-29.429-65.73-65.73-65.73Zm0 108.397c-23.564 0-42.667-19.103-42.667-42.667S104.436 85.333 128 85.333s42.667 19.103 42.667 42.667s-19.103 42.667-42.667 42.667Zm83.686-110.994c0 8.484-6.876 15.36-15.36 15.36c-8.483 0-15.36-6.876-15.36-15.36c0-8.483 6.877-15.36 15.36-15.36c8.484 0 15.36 6.877 15.36 15.36Z"
/>
</svg>
<p>Instagram</p>
</a>
</div>
</section>
<!-- Gallery -->
<section id="gallery" class="container container__gallery">
<h2>Some cool pictures</h2>
<div class="gallery-wrapper">
<figure class="gallery-item">
<figcaption>Peaceful Beach</figcaption>
<img src="imgs/ga-gallery-a.jpg" alt="sunset with two surfers" />
</figure>
<figure class="gallery-item">
<figcaption>Munich Calling</figcaption>
<img src="imgs/ga-gallery-b.jpg" alt="sunset with two surfers" />
</figure>
<figure class="gallery-item">
<figcaption>Forest & Nature</figcaption>
<img src="imgs/ga-gallery-c.jpg" alt="sunset with two surfers" />
</figure>
</div>
</section>
<!-- Links -->
<section id="links" class="container container__links">
<h2>Useful Links</h2>
<ul class="list-links">
<li>
<a href="https://unsplash.com/">Unsplash free images</a>
</li>
<li>
<a href="https://developer.mozilla.org/">Mozilla Documentation</a>
</li>
<li>
<a href="https://javascript.info/">Javascript Tutorial</a>
</li>
<li>
<a href="https://www.youtube.com/@TheCodingTrain/"
>My favourite Youtuber</a
>
</li>
<li>
<a href="https://getkirby.com/">Content Management System</a>
</li>
<li>
<a href="https://react.dev/">React, a javascript library</a>
</li>
<li>
<a href="https://www.shopify.com/">Shop System from Canada</a>
</li>
<li>
<a href="https://www.smashingmagazine.com/">Developer News</a>
</li>
</ul>
</section>
<!-- music -->
<section id="music" class="container container__music">
<h2>Favourite Music</h2>
<ul class="list-music">
<li>Skrillex</li>
<li>J. Cole</li>
<li>Fleetwod Mac</li>
<li>Raf Camora</li>
<li>Dennis Lloyd</li>
<li>Kanye West</li>
<li>Halsey</li>
<li>Cro</li>
<li>Mabel</li>
<li>Ski Aggu</li>
<li>TashSultana</li>
<li>Leonard Cohen</li>
<li>Headhunterz</li>
<li>Ella Eyre</li>
<li>Rae Stremmurd</li>
<li>Miguel</li>
<li>Sia</li>
<li>Miley Cyrus</li>
<li>Jorja Smith</li>
<li>Tove Lo</li>
<li>Kendrick Lamar</li>
</ul>
</section>
</main>
<footer>
<div class="footer__left">
<p>This website was brought to you by newbie © 2023</p>
</div>
<div class="footer__right">
<a href="#">Imprint</a><a href="#">Privacy Policy</a>
</div>
</footer>
</body>
</html>