-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
220 lines (210 loc) · 8.76 KB
/
index.html
File metadata and controls
220 lines (210 loc) · 8.76 KB
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
<!DOCTYPE html>
<html>
<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" />
<meta name="google-site-verification" content="pBIfq5c0yNMmGWmvufqVZoMnrKtTnMWbS2yUH1W4wmU" />
<title>Kelbaz</title>
<link rel="stylesheet" href="./src/css/index.css" />
<script defer src="./src/js/index.js" type="module"></script>
<script src="./src/js/translate.js" type="module"></script>
</head>
<body>
<nav>
<a href="#">
<svg
class="logo"
viewBox="0 0 82 66"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M16.4 16.5V0H82L49.2 33L16.4 66V49.5C25.4573 49.5 32.8 42.1131 32.8 33C32.8 23.8869 25.4573 16.5 16.4 16.5ZM16.4 16.5C7.34266 16.5 0 23.8869 0 33C0 42.1131 7.34266 49.5 16.4 49.5V16.5ZM49.2 33L82 66H49.2V33Z"
fill="#0F1020"
/>
</svg>
</a>
<ul class="links">
<a href="#about">
<li>{{About}}</li>
</a>
<a href="#projects">
<li>{{Projects}}</li>
</a>
<a href="design">
<li>Design</li>
</a>
</ul>
</nav>
<section id="hero">
<div class="bg">
<div class="parody-line">
<img class="parody-img" src="./assets/img/parody_1.png" />
<img class="parody-img" src="./assets/img/parody_1.png" />
<img class="parody-img" src="./assets/img/parody_1.png" />
<img class="parody-img" src="./assets/img/parody_1.png" />
<img class="parody-img" src="./assets/img/parody_1.png" />
</div>
<div class="parody-line">
<img class="parody-img" src="./assets/img/parody_2.png" />
<img class="parody-img" src="./assets/img/parody_2.png" />
<img class="parody-img" src="./assets/img/parody_2.png" />
<img class="parody-img" src="./assets/img/parody_2.png" />
<img class="parody-img" src="./assets/img/parody_2.png" />
</div>
<div class="parody-line">
<img class="parody-img" src="./assets/img/parody_3.png" />
<img class="parody-img" src="./assets/img/parody_3.png" />
<img class="parody-img" src="./assets/img/parody_3.png" />
<img class="parody-img" src="./assets/img/parody_3.png" />
<img class="parody-img" src="./assets/img/parody_3.png" />
</div>
</div>
<div class="centered">
<svg
class="loko-title"
width="608"
height="221"
viewBox="0 0 608 221"
fill="#0099ff"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 55.25H27.625V138.125C34.9494 138.125 41.9771 135.211 47.1567 130.032C49.9624 127.226 52.1071 123.881 53.483 120.212C54.643 117.136 55.25 113.845 55.25 110.5V27.625H82.875V110.5C82.875 119.618 80.6359 128.467 76.4678 136.344C73.905 141.146 70.6272 145.625 66.6885 149.563L64.1661 151.938L66.6885 154.312C77.0479 164.671 82.875 178.699 82.875 193.375V221H55.25V193.375C55.25 186.037 52.3364 179.023 47.1567 173.843C44.1892 170.876 40.6147 168.664 36.7164 167.315C33.8163 166.29 30.7544 165.75 27.625 165.75V193.375H0V55.25Z"
/>
<path
d="M110.5 0V165.75H193.375V138.125H138.125V110.5H165.75V82.875H138.125V27.625H248.625V0H110.5Z"
/>
<path d="M248.625 55.25H221V221H359.125V193.375H248.625V55.25Z" />
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M276.25 0H331.5C346.153 0 360.206 5.82097 370.568 16.1823C380.929 26.5437 386.75 40.5968 386.75 55.25C386.75 69.158 381.506 82.5254 372.113 92.7086C372.974 93.4391 373.809 94.2072 374.613 95.0118C382.384 102.783 386.75 113.323 386.75 124.313C386.75 135.302 382.384 145.842 374.613 153.613C366.842 161.384 356.302 165.75 345.312 165.75H276.25V0ZM351.034 74.7838C356.215 69.6032 359.125 62.5766 359.125 55.25C359.125 47.9234 356.215 40.8969 351.034 35.7162C345.853 30.5355 338.827 27.625 331.5 27.625H303.875V82.875H331.5C338.82 82.87 345.858 79.96 351.034 74.7838ZM345.313 138.125H303.875V110.5H345.312C348.976 110.5 352.489 111.955 355.079 114.546C357.67 117.136 359.125 120.649 359.125 124.312C359.125 127.976 357.67 131.489 355.079 134.079C352.489 136.67 348.976 138.125 345.313 138.125Z"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M469.625 221H497.25V55.25H469.625L469.625 82.875H442L442 27.625H414.375L414.375 165.75C414.375 173.006 415.804 180.19 418.581 186.893C421.357 193.596 425.427 199.687 430.557 204.818C435.688 209.948 441.779 214.018 448.482 216.794C455.185 219.571 462.369 221 469.625 221ZM469.625 110.5L469.625 193.375C465.997 193.375 462.405 192.66 459.053 191.272C455.702 189.884 452.656 187.849 450.091 185.284C447.526 182.719 445.491 179.673 444.103 176.322C442.715 172.97 442 169.378 442 165.75V110.5H469.625Z"
/>
<path
d="M469.625 0H607.75V110.5C607.75 117.756 606.321 124.94 603.544 131.643C600.768 138.347 596.698 144.437 591.568 149.568C586.437 154.698 580.346 158.768 573.643 161.544C566.94 164.321 559.756 165.75 552.5 165.75L607.75 165.75V193.375L524.875 193.375V165.75C524.875 150.493 537.243 138.125 552.5 138.125C556.128 138.125 559.72 137.41 563.072 136.022C566.423 134.634 569.469 132.599 572.034 130.034C574.599 127.469 576.634 124.423 578.022 121.072C579.41 117.72 580.125 114.128 580.125 110.5V27.625L469.625 27.625V0Z"
/>
</svg>
<a href="#main">
<div class="scroll-pointer" style="--i: 1"></div>
<div class="scroll-pointer" style="--i: 2"></div>
<div class="scroll-pointer" style="--i: 3"></div>
</a>
</div>
</section>
<main id="main">
<div
id="about"
class="about-view"
style="--zone: ai"
src="#"
alt="Some image"
></div>
<div class="about-text" style="--zone: at">
<h1>{{ About Title }}</h1>
<br />
<p>{{ About Intro }}</p>
<br />
<ul style="padding-left: 25px">
<li>HTML - 🌐</li>
<li>CSS - 🎨</li>
<li>JS / NODE.JS - 🟨</li>
<li>PYTHON - 🐍</li>
<li>RUST - 🦀</li>
</ul>
<br />
<p>{{ About Desc }}</p>
<br />
<blockquote
class="bruh-quote"
after-text="” - {{ Quote author }}"
></blockquote>
</div>
<div class="projects-text" style="--zone: pt">
<h1>{{ Projects Title }}</h1>
<br />
<p>{{ Projects Intro }}</p>
<br />
<a href="https://onofficiel.github.io/border"
><button>Border</button></a
>
- {{ Border desc}} <br />
<a href="https://onofficiel.github.io/w96"
><button>Windows 96 Repo</button></a
>
- {{ w96 desc}} <br />
<a href="https://kodbaz.github.io/MineSweeper"
><button>MineSweeper</button></a
>
- {{ MineSweeper desc}} <br />
<a href="https://github.com/Kodbaz/K_AI"
><button>Kelbaz's Artificial Intelligence</button></a
>
- {{ K_AI desc }}<br />
<a href="https://kodbaz.github.io/modules/Editor"
><button>Editor</button></a
>
- {{ Editor desc }}
</div>
<div
id="projects"
class="projects-view"
style="--zone: pi"
src="#"
alt="Some image"
></div>
</main>
<footer id="footer">
<span
style="
font-family: 'JetBrains Mono';
display: flex;
justify-content: center;
align-items: center;
"
>
© <img src="/assets/img/loko_graph.png" width="100" />
</span>
<div>
<ul>
<b>{{ Links }}</b>
<li><a href="#main">{{ Top }}</a></li>
<li><a href="#about">{{ About }}</a></li>
<li><a href="#projects">{{ Projects }}</a></li>
<li><a href="design">Design</a></li>
</ul>
<ul>
<b>{{ Social networks }}</b>
<li>
<a href="https://instagr.am/kelbaz_">Instagram</a>
</li>
<li>
<a href="https://twitter.com/kelbaz_">Twitter</a>
</li>
<li>
<a href="https://github.com/kelbazz">Github</a>
</li>
<li>
<a href="mailto:its.kelbaz@gmail.com">Mail</a>
</li>
</ul>
</div>
<button
onclick="
navigator.clipboard.writeText('https:\/\/kodbaz.github.io');
document.querySelector('#footer button').innerText = '{{ propaganda copy text }}';
"
>
{{ Propaganda Text }}
</button>
</footer>
</body>
</html>