-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfeed.html
105 lines (103 loc) · 6.75 KB
/
feed.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>guidoslotboom.github.io</title>
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/theme.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/javascript/theme-toggle.js"></script>
</head>
<body>
<header class="page__header">
<div class="header__wrapper grid-cols">
<div class="col-full">
<a href="index.html" class="logo">
<div class="logo__shape">
<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M61.6906 28C63.1197 30.4752 63.1197 33.5248 61.6906 36L50.3094 55.7128C48.8803 58.188 46.2393 59.7128 43.3812 59.7128L20.6188 59.7128C17.7607 59.7128 15.1197 58.188 13.6906 55.7128L2.3094 36C0.880337 33.5248 0.880337 30.4752 2.3094 28L13.6906 8.28719C15.1197 5.81198 17.7607 4.28719 20.6188 4.28719L43.3812 4.28719C46.2393 4.28719 48.8803 5.81198 50.3094 8.28719L61.6906 28Z" class="hexagon"/>
<path d="M19.5103 39.5955L20.4695 41.2608L22.4678 44.7313C22.8358 45.3593 23.3625 45.8794 23.995 46.2395C24.6276 46.5996 25.3437 46.787 26.0715 46.7829H37.9017C38.6311 46.7831 39.3476 46.5911 39.979 46.2263C40.6105 45.8614 41.1347 45.3366 41.4988 44.7046L44.4563 39.5822L47.4405 34.4864C47.8078 33.8554 48.0009 33.1382 48.0001 32.4081H39.2606" class="stroke"/>
<path d="M44.4632 25.2207L43.444 23.4089L41.5256 20.0783C41.1615 19.4463 40.6374 18.9215 40.0059 18.5566C39.3744 18.1918 38.6579 17.9998 37.9286 18H26.0717C25.3424 17.9998 24.6259 18.1918 23.9944 18.5566C23.3629 18.9215 22.8387 19.4463 22.4747 20.0783L19.5171 25.2074L16.5595 30.3298C16.1932 30.9612 16.0002 31.6782 16 32.4081H24.7128" class="stroke"/>
<path d="M31.9869 33.0742C32.3548 33.0742 32.653 32.776 32.653 32.4081C32.653 32.0402 32.3548 31.742 31.9869 31.742C31.619 31.742 31.3208 32.0402 31.3208 32.4081C31.3208 32.776 31.619 33.0742 31.9869 33.0742Z" class="stroke"/>
<path d="M31.987 33.7404C32.7228 33.7404 33.3193 33.1439 33.3193 32.4081C33.3193 31.6723 32.7228 31.0759 31.987 31.0759C31.2512 31.0759 30.6548 31.6723 30.6548 32.4081C30.6548 33.1439 31.2512 33.7404 31.987 33.7404Z" class="dot"/>
</svg>
</div>
<div class="logo__text">
<span>Guido<br> Slotboom<strong>.</strong></span>
<span>UI Designer & Front-end Developer</span>
</div>
</a>
<button id="theme-toggle" class="button" title="Toggle between theme" aria-label="auto">
<span>
<svg class="theme-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="24" height="24" fill=""/>
<mask class="moon" id="moon-mask">
<rect x="0" y="0" width="100%" height="100%" fill="white"></rect>
<circle class="eclipse" cx="22" cy="11" r="5" fill="black"></circle>
</mask>
<circle class="sun-and-moon" cx="12" cy="12" r="5" mask="url(#moon-mask)"></circle>
<g class="sunbeams">
<path d="M12 2V4"/>
<path d="M12 20V22"/>
<path d="M22 12H20"/>
<path d="M4 12H2"/>
<path d="M19.071 4.92893L17.6568 6.34314"/>
<path d="M6.34314 17.6569L4.92893 19.0711"/>
<path d="M19.0711 19.0711L17.6569 17.6569"/>
<path d="M6.34311 6.34314L4.92889 4.92893"/>
</g>
</svg>
</span>
</button>
</div>
</div>
</header>
<main class="page__content">
<div class="content__wrapper grid-cols">
<div class="col">
<div class="feed">
<div class="feed__list-posts">
<article class="feed__post">
<header class="post__header">
<img class="post__avatar" src="assets/images/avatar.jpg" alt="Avatar">
<div class="post__info">
<span class="post__author">Guido</span>
<span class="post__publication">1 min</span>
</div>
<ul class="post__categories">
<li>Blog</li>
<li>CSS</li>
</ul>
</header>
<p>Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim quis dui dictum tristique a eu elit. Vestibulum viverra nisi urna, vel posuere lacus varius quis. Donec gravida commodo mattis.</p>
</article>
<article class="feed__post">
<header class="post__header">
<img class="post__avatar" src="assets/images/avatar.jpg" alt="Avatar">
<div class="post__info">
<span class="post__author">Guido</span>
<span class="post__publication">5 min</span>
</div>
<ul class="post__categories">
<li>Blog</li>
<li>CSS</li>
</ul>
</header>
<p>Paragraph text lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu enim quis dui dictum tristique a eu elit. Vestibulum viverra nisi urna, vel posuere lacus varius quis. Donec gravida commodo mattis.</p>
</article>
</div>
</div>
</div>
</div>
</main>
<footer class="page__footer">
<div class="footer__wrapper grid-cols text-center">
<div class="col-lg text-sm">
<p>Digital Creative located in Amersfoort, The Nederlands.</p>
<p>© 2022 Guido Slotboom. All rights reserved.</p>
</div>
</div>
</footer>
</body>
</html>