aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--favicon.icobin17014 -> 0 bytes
-rw-r--r--favicon.svg87
-rw-r--r--index.html598
-rw-r--r--src/kerekobar.otfbin0 -> 3096 bytes
-rw-r--r--src/logo.svg93
-rw-r--r--src/student.pngbin479765 -> 0 bytes
-rw-r--r--style.css569
7 files changed, 1013 insertions, 334 deletions
diff --git a/favicon.ico b/favicon.ico
deleted file mode 100644
index 33acf09..0000000
--- a/favicon.ico
+++ /dev/null
Binary files differ
diff --git a/favicon.svg b/favicon.svg
deleted file mode 100644
index 8ad06a4..0000000
--- a/favicon.svg
+++ /dev/null
@@ -1,87 +0,0 @@
1<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2<!-- Created with Inkscape (http://www.inkscape.org/) -->
3
4<svg
5 width="512"
6 height="512"
7 viewBox="0 0 512 512"
8 version="1.1"
9 id="svg1"
10 inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
11 sodipodi:docname="favicon.svg"
12 inkscape:export-filename="favicon.png"
13 inkscape:export-xdpi="12"
14 inkscape:export-ydpi="12"
15 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
16 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
17 xmlns="http://www.w3.org/2000/svg"
18 xmlns:svg="http://www.w3.org/2000/svg">
19 <sodipodi:namedview
20 id="namedview1"
21 pagecolor="#ffffff"
22 bordercolor="#000000"
23 borderopacity="1"
24 inkscape:showpageshadow="2"
25 inkscape:pageopacity="0.0"
26 inkscape:pagecheckerboard="0"
27 inkscape:deskcolor="#d1d1d1"
28 inkscape:document-units="px"
29 inkscape:zoom="0.66332469"
30 inkscape:cx="276.63677"
31 inkscape:cy="247.2394"
32 inkscape:window-width="1440"
33 inkscape:window-height="872"
34 inkscape:window-x="0"
35 inkscape:window-y="0"
36 inkscape:window-maximized="1"
37 inkscape:current-layer="layer2" />
38 <defs
39 id="defs1">
40 <rect
41 x="163.09281"
42 y="96.553892"
43 width="171.47006"
44 height="175.17964"
45 id="rect2" />
46 </defs>
47 <g
48 inkscape:label="bg"
49 inkscape:groupmode="layer"
50 id="layer1"
51 style="display:inline"
52 sodipodi:insensitive="true">
53 <rect
54 style="display:none;fill:#cde7ed;fill-opacity:1;stroke-width:1.88489"
55 id="rect3"
56 width="512"
57 height="512"
58 x="0"
59 y="0"
60 inkscape:label="square" />
61 <circle
62 style="display:inline;fill:#cde7ed;fill-opacity:1;stroke-width:1.3177"
63 id="path4"
64 cx="256"
65 cy="256"
66 r="256"
67 inkscape:label="circle" />
68 </g>
69 <g
70 inkscape:groupmode="layer"
71 id="layer2"
72 inkscape:label="text"
73 sodipodi:insensitive="true">
74 <text
75 xml:space="preserve"
76 style="font-size:210.084px;font-family:'Noto Sans Mono';-inkscape-font-specification:'Noto Sans Mono';fill:#051f24;fill-opacity:1;stroke-width:17.5068"
77 x="65.453728"
78 y="335.83191"
79 id="text5"
80 inkscape:label="text"><tspan
81 sodipodi:role="line"
82 x="65.453728"
83 y="335.83191"
84 style="stroke-width:17.5068"
85 id="tspan2">ПСЖ</tspan></text>
86 </g>
87</svg>
diff --git a/index.html b/index.html
index 3388b4c..042396d 100644
--- a/index.html
+++ b/index.html
@@ -1,148 +1,452 @@
1<!DOCTYPE html> 1<!doctype html>
2<html lang="en"> 2<html lang="ru">
3 <head> 3 <head>
4 <meta charset="UTF-8" /> 4 <meta charset="UTF-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 7
8 <link rel="stylesheet" href="/style.css" /> 8 <link rel="stylesheet" href="/style.css" />
9 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /> 9 <link rel="shortcut icon" href="/src/logo.svg" type="image/x-icon" />
10 10
11 <title>ПСЖ</title> 11 <title>ПСЖ онлайн</title>
12 </head> 12 </head>
13 13
14 <body> 14 <body>
15 <main> 15 <header class="container header">
16 <h1>ПСЖ как стиль жизни</h1> 16 <div class="logo">
17 <img src="/src/student.png" alt="Студент" /> 17 <span>псж</span><img src="/src/logo.svg" alt="logo" /><span>онлайн</span>
18 <p> 18 </div>
19 Устали от бесконечных лекций, зубрежки и дедлайнов? Мечтаете о свободе и 19 <nav>
20 беззаботности? <b>Тогда ПСЖ – это именно то, что вам нужно!</b> 20 <a href="#features">Преимущества</a>
21 </p> 21 <a href="#reviews">Отзывы</a>
22 22 <a href="#sponsors">Спонсоры</a>
23 <h2>Почему именно ПСЖ?</h2> 23 </nav>
24 <ul> 24 </header>
25 <li> 25
26 <b>Гарантированный отдых от учебы.</b> Никаких экзаменов, курсовых и 26 <main>
27 лабораторных. Только вы, пляж и военкомат. 27 <section class="hero container">
28 </li> 28 <div class="hero-content">
29 <li> 29 <span class="badge">🔥 Хит сезона 2026</span>
30 <b>Возможность реализовать себя в других сферах.</b> Может быть, вы 30 <h1>ПСЖ как стиль жизни</h1>
31 талантливый блогер, начинающий музыкант или просто любитель 31 <p class="subtitle">
32 путешествий? ПСЖ – это ваш шанс раскрыть свои творческие способности. 32 Устали от дедлайнов и лекций? Инвестируйте в свое свободное время.
33 </li> 33 Отчисление по собственному желанию — это выбор успешных людей.
34 <li> 34 </p>
35 <b>Экономия на учебных материалах и проездах.</b> Больше денег на 35 <div class="hero-buttons">
36 развлечения и шопинг! 36 <a
37 </li> 37 href="https://my.itmo.ru/requests/new/2626"
38 <li> 38 class="btn btn-primary pulse"
39 <b>Увеличение свободного времени.</b> Наконец-то вы сможете выспаться, 39 >
40 заняться спортом или просто поваляться на диване. 40 Оформить ПСЖ
41 </li> 41 </a>
42 </ul> 42 <span class="btn btn-secondary btn-fake"> Я хочу страдать </span>
43 43 </div>
44 <h2>Топ-10 причин оформить ПСЖ прямо сейчас</h2> 44 <p class="disclaimer">
45 <ol> 45 *Нажимая кнопку, вы соглашаетесь с тем, что военком уже выехал.
46 <li> 46 </p>
47 <b>Избежать встречи с надоедливым преподавателем.</b> Давайте 47 </div>
48 посмотрим правде в глаза: иногда лучше пропустить пару лекций, чем 48 <div class="hero-image">
49 слушать бесконечные монологи о квантовой физике. 49 <div class="emoji-scene">🏖️💼👋</div>
50 </li> 50 </div>
51 <li> 51 </section>
52 <b>Научиться готовить сложные блюда.</b> Ведь что может быть лучше, 52
53 чем удивить своих друзей изысканным ужином, приготовленным своими 53 <section id="features" class="features-section">
54 руками? А если что-то пойдет не так, всегда можно сказать, что это был 54 <div class="container">
55 эксперимент. 55 <h2>Почему выбирают нас?</h2>
56 </li> 56 <div class="grid">
57 <li> 57 <div class="card">
58 <b>Стать профессиональным игроком в компьютерные игры.</b> Ведь сидеть 58 <div class="icon">🧠</div>
59 за компьютером целыми днями – это не просто развлечение, а настоящая 59 <h3>Сохранение мозга</h3>
60 работа! 60 <p>
61 </li> 61 Миллионы нейронов будут спасены от разрушения сопроматом и
62 <li> 62 философией.
63 <b>Посвятить себя изучению древнеегипетских иероглифов.</b> Или, может 63 </p>
64 быть, научиться играть на ханг-дроме? Возможности безграничны! 64 </div>
65 </li> 65 <div class="card">
66 <li> 66 <div class="icon">💸</div>
67 <b>Открыть собственный бизнес по выращиванию кактусов.</b> Ведь кто не 67 <h3>Финансовая грамотность</h3>
68 мечтает о маленькой кактусовой ферме на балконе? 68 <p>
69 </li> 69 Вместо оплаты семестра вы сможете купить 4000 пачек Доширака. Это
70 <li> 70 инвестиция в будущее (гастрит).
71 <b>Путешествовать автостопом по России.</b> Это отличная возможность 71 </p>
72 познакомиться с новыми людьми и увидеть страну своими глазами. 72 </div>
73 </li> 73 <div class="card">
74 <li> 74 <div class="icon">🪖</div>
75 <b>Написать роман о вампирах и оборотнях.</b> Ведь каждый из нас в 75 <h3>Армейский кроссфит</h3>
76 глубине души немного писатель. 76 <p>
77 </li> 77 Бесплатный фитнес-тур на год. Грязевые ванны, марш-броски и стильная
78 <li> 78 одежда!
79 <b>Стать экспертом по теории заговора.</b> Разве не интересно 79 </p>
80 разгадывать тайны мирового правительства? 80 </div>
81 </li> 81 <div class="card">
82 <li> 82 <div class="icon">🎮</div>
83 <b>Выиграть в лотерею и больше никогда не работать.</b> По статистке 83 <h3>Киберспортивная карьера</h3>
84 99.98% игроков останавливаются перед самым выигрышем. 84 <p>
85 </li> 85 Зачем защищать диплом, если можно защищать плент Б? Ваш ранг в Доте
86 <li> 86 важнее оценок в зачетке.
87 <b>Просто потому что можно.</b> Ну а почему бы и нет? Жизнь слишком 87 </p>
88 коротка, чтобы откладывать все на потом. 88 </div>
89 </li> 89 <div class="card">
90 </ol> 90 <div class="icon">🛌</div>
91 91 <h3>Здоровый сон</h3>
92 <h2>Как оформить ПСЖ?</h2> 92 <p>
93 <p> 93 Забудьте про пары к 8:10. Ваш новый график: подъем в 14:00, завтрак
94 Все очень просто! Заполните короткую анкету на сайте <a>my.itmo.ru</a> и 94 в 15:00, подвиг — завтра.
95 вдавите по кнопке отправить. Всего один клик отделяет вас от 95 </p>
96 долгожданной свободы! 96 </div>
97 </p> 97 <div class="card">
98 <b> 98 <div class="icon">🚀</div>
99 Не упустите свой шанс! Оформите ПСЖ прямо сейчас и начните новую главу в 99 <h3>Эффект Стива Джобса</h3>
100 своей жизни! 100 <p>Все миллиардеры бросали вузы. Статистика не врет.</p>
101 </b> 101 </div>
102 102 </div>
103 <a class="button" href="https://my.itmo.ru/requests/new/2626"> 103 </div>
104 ОФОРМИТЬ ПСЖ 104 </section>
105 </a> 105
106 106 <section id="reviews" class="reviews-section container">
107 <span style="font-size: small"> 107 <h2>Истории успеха</h2>
108 Мы не несем ответственность за принятое вами решение. Сайт создавался 108
109 исключительно в шуточных целях. 109 <div class="carousel-container">
110 </span> 110 <button class="nav-btn prev-btn" aria-label="Назад">&lt;</button>
111 </main> 111
112 112 <div class="carousel-wrapper">
113 <footer> 113 <div class="carousel">
114 <div> 114 <div class="review-card">
115 <h4>Ссылки</h4> 115 <div class="review-header">
116 <div> 116 <div class="avatar">👮‍♂️</div>
117 <a 117 <div>
118 href="https://codeberg.org/igorechek06/expulsiononline/src/branch/pages/LICENSE" 118 <h4>Военком Района</h4>
119 > 119 <small>HR-директор</small>
120 Лицензия 120 </div>
121 </a> 121 </div>
122 </div> 122 <p>
123 <div> 123 Мой любимый стартап! Благодаря ПСЖ мы закрыли план по призыву на
124 <a href="https://codeberg.org/igorechek06/expulsiononline/"> 124 146%!
125 Исходный код 125 </p>
126 </a> 126 </div>
127 </div> 127
128 </div> 128 <div class="review-card">
129 <div style="flex: 1"> 129 <div class="review-header">
130 <h4>Спонсоры</h4> 130 <div class="avatar">💪</div>
131 <div class="sponsors"> 131 <div>
132 <a href="https://igorek.dev">Автор igorek.dev</a> 132 <h4>Виталик</h4>
133 <a href="https://t.me/olekkorepanov">@olekkorepanov</a> 133 <small>Фитнес-тренер</small>
134 <a href="https://t.me/gigachad_shlepaZ">@gigachad_shlepaZ</a> 134 </div>
135 <a href="https://t.me/gberdyshev">@gberdyshev</a> 135 </div>
136 <a href="https://t.me/j_artem">@j_artem</a> 136 <p>
137 <a href="https://t.me/Extra_Cat_507">@Extra_Cat_507</a> 137 Раньше я напрягал мозг, и он болел. Теперь я напрягаю бицуху! В
138 <a href="https://t.me/night_skumbry">@night_skumbry</a> 138 деканате говорили, что я вылечу, а я выжал сотку от груди.
139 <a href="https://t.me/evgrart_st">@evgrart_st</a> 139 Интегралы не помогут тебе в драке, брат.
140 <a href="https://t.me/YushiNoN">@YushiNoN</a> 140 </p>
141 <a href="https://t.me/Pavtor09">@Pavtor09</a> 141 </div>
142 <a href="https://t.me/oriptal">@oriptal</a> 142
143 <a href="https://t.me/lissik101">@lissik101</a> 143 <div class="review-card">
144 </div> 144 <div class="review-header">
145 </div> 145 <div class="avatar">😴</div>
146 </footer> 146 <div>
147 </body> 147 <h4>Игорь</h4>
148 <small>Ныне свободный маг</small>
149 </div>
150 </div>
151 <p>
152 Раньше я отмечал отсутствующих, теперь я сам отсутствую везде.
153 Мама говорит, я дворник, я говорю — я дзен-буддист.
154 </p>
155 </div>
156
157 <div class="review-card">
158 <div class="review-header">
159 <div class="avatar">🎒</div>
160 <div>
161 <h4>Сергей</h4>
162 <small>Senior Delivery Manager</small>
163 </div>
164 </div>
165 <p>
166 Зачем мне диплом инженера, если за доставку пиццы платят больше,
167 чем моему преподу? Желтый рюкзак — мой пропуск в элиту.
168 </p>
169 </div>
170
171 <div class="review-card">
172 <div class="review-header">
173 <div class="avatar">📉</div>
174 <div>
175 <h4>Мамкин Трейдер</h4>
176 <small>Криптоинвестор</small>
177 </div>
178 </div>
179 <p>
180 Бросил универ, вложил деньги за обучение в NFT с обезьянами.
181 Теперь живу в коробке, но это коробка от холодильника Liebherr!
182 </p>
183 </div>
184
185 <div class="review-card">
186 <div class="review-header">
187 <div class="avatar">👩‍🏫</div>
188 <div>
189 <h4>Марья Ивановна</h4>
190 <small>Работник студофиса</small>
191 </div>
192 </div>
193 <p>
194 Меньше студентов — меньше ведомостей. Одобряю этот сервис.
195 Продолжайте в том же духе, нам меньше работы.
196 </p>
197 </div>
198 </div>
199 </div>
200
201 <button class="nav-btn next-btn" aria-label="Вперед">&gt;</button>
202 </div>
203 </section>
204
205 <section class="cta-section">
206 <div class="container">
207 <h2>Готов изменить свою жизнь?</h2>
208 <p>Всего одна кнопка отделяет тебя от полной независимости.</p>
209 <a href="https://my.itmo.ru/requests/new/2626" class="btn btn-primary big-btn">
210 Оформить ПСЖ
211 </a>
212 </div>
213 </section>
214
215 <section id="sponsors" class="sponsors-section">
216 <div class="container">
217 <p class="sponsors-title">Котики</p>
218 </div>
219
220 <div class="marquee-wrapper">
221 <div class="fade-left"></div>
222 <div class="fade-right"></div>
223
224 <div class="marquee-track">
225 <a
226 href="https://t.me/kerekobar"
227 target="_blank"
228 class="sponsor-tag tier-vip"
229 >@<span class="kerekobar">kerekobar</span></a
230 >
231 <a href="https://t.me/arslee07" target="_blank" class="sponsor-tag tier-vip"
232 >@arslee07</a
233 >
234 <a href="https://t.me/i11uha" target="_blank" class="sponsor-tag tier-vip"
235 >@i11uha</a
236 >
237 <a href="https://t.me/besvich" target="_blank" class="sponsor-tag tier-vip"
238 >@besvich</a
239 >
240 <a
241 href="https://t.me/cute_kitty29"
242 target="_blank"
243 class="sponsor-tag tier-vip"
244 >@cute_kitty29</a
245 >
246 <a
247 href="https://t.me/andrew_bakradze"
248 target="_blank"
249 class="sponsor-tag tier-vip"
250 >@andrew_bakradze</a
251 >
252
253 <a
254 href="https://t.me/igorechek06"
255 target="_blank"
256 class="sponsor-tag tier-creator"
257 >
258 👑 @igorechek06
259 </a>
260
261 <a
262 href="https://t.me/andreW_bOnd38"
263 target="_blank"
264 class="sponsor-tag tier-norm"
265 >@andreW_bOnd38</a
266 >
267 <a
268 href="https://t.me/kakoyto_alesha"
269 target="_blank"
270 class="sponsor-tag tier-norm"
271 >@kakoyto_alesha</a
272 >
273 <a
274 href="https://t.me/safarislava"
275 target="_blank"
276 class="sponsor-tag tier-norm"
277 >Слава ака @safarislava</a
278 >
279 <a href="https://t.me/GalProg" target="_blank" class="sponsor-tag tier-norm"
280 >@GalProg</a
281 >
282 <a
283 href="https://t.me/night_skumbry"
284 target="_blank"
285 class="sponsor-tag tier-norm"
286 >Platypus @night_skumbry</a
287 >
288 <a
289 href="https://t.me/lissik101"
290 target="_blank"
291 class="sponsor-tag tier-norm"
292 >@lissik101</a
293 >
294 <a href="https://t.me/volch0" target="_blank" class="sponsor-tag tier-norm"
295 >@volch0</a
296 >
297 <a href="https://t.me/queelly" target="_blank" class="sponsor-tag tier-norm"
298 >@queelly</a
299 >
300 <a href="https://t.me/j_artem" target="_blank" class="sponsor-tag tier-norm"
301 >@j_artem</a
302 >
303 <a
304 href="https://t.me/goykhmanE"
305 target="_blank"
306 class="sponsor-tag tier-norm"
307 >@goykhmanE</a
308 >
309
310 <a
311 href="https://t.me/kerekobar"
312 target="_blank"
313 class="sponsor-tag tier-vip"
314 >@<span class="kerekobar">kerekobar</span></a
315 >
316 <a href="https://t.me/arslee07" target="_blank" class="sponsor-tag tier-vip"
317 >@arslee07</a
318 >
319 <a href="https://t.me/i11uha" target="_blank" class="sponsor-tag tier-vip"
320 >@i11uha</a
321 >
322 <a href="https://t.me/besvich" target="_blank" class="sponsor-tag tier-vip"
323 >@besvich</a
324 >
325 <a
326 href="https://t.me/cute_kitty29"
327 target="_blank"
328 class="sponsor-tag tier-vip"
329 >@cute_kitty29</a
330 >
331 <a
332 href="https://t.me/andrew_bakradze"
333 target="_blank"
334 class="sponsor-tag tier-vip"
335 >@andrew_bakradze</a
336 >
337
338 <a
339 href="https://t.me/igorechek06"
340 target="_blank"
341 class="sponsor-tag tier-creator"
342 >
343 👑 @igorechek06
344 </a>
345
346 <a
347 href="https://t.me/andreW_bOnd38"
348 target="_blank"
349 class="sponsor-tag tier-norm"
350 >@andreW_bOnd38</a
351 >
352 <a
353 href="https://t.me/kakoyto_alesha"
354 target="_blank"
355 class="sponsor-tag tier-norm"
356 >@kakoyto_alesha</a
357 >
358 <a
359 href="https://t.me/safarislava"
360 target="_blank"
361 class="sponsor-tag tier-norm"
362 >Слава ака @safarislava</a
363 >
364 <a href="https://t.me/GalProg" target="_blank" class="sponsor-tag tier-norm"
365 >@GalProg</a
366 >
367 <a
368 href="https://t.me/night_skumbry"
369 target="_blank"
370 class="sponsor-tag tier-norm"
371 >Platypus @night_skumbry</a
372 >
373 <a
374 href="https://t.me/lissik101"
375 target="_blank"
376 class="sponsor-tag tier-norm"
377 >@lissik101</a
378 >
379 <a href="https://t.me/volch0" target="_blank" class="sponsor-tag tier-norm"
380 >@volch0</a
381 >
382 <a href="https://t.me/queelly" target="_blank" class="sponsor-tag tier-norm"
383 >@queelly</a
384 >
385 <a href="https://t.me/j_artem" target="_blank" class="sponsor-tag tier-norm"
386 >@j_artem</a
387 >
388 <a
389 href="https://t.me/goykhmanE"
390 target="_blank"
391 class="sponsor-tag tier-norm"
392 >@goykhmanE</a
393 >
394 </div>
395 </div>
396 </section>
397 </main>
398
399 <footer>
400 <div class="container footer-content">
401 <p>© 2026 ПСЖ Online</p>
402 <a href="https://codeberg.org/igorechek06/expulsiononline/">Исходный код</a>
403 </div>
404 </footer>
405
406 <script>
407 const slider = document.querySelector(".carousel");
408 const container = document.querySelector(".carousel-container");
409 const nextBtn = document.querySelector(".next-btn");
410 const prevBtn = document.querySelector(".prev-btn");
411
412 let autoScrollInterval;
413
414 const startAutoScroll = () => {
415 clearInterval(autoScrollInterval);
416
417 autoScrollInterval = setInterval(() => {
418 const cardWidth = slider.querySelector(".review-card").offsetWidth + 24;
419 const maxScroll = slider.scrollWidth - slider.clientWidth;
420
421 if (slider.scrollLeft >= maxScroll - 10) {
422 slider.scrollTo({ left: 0, behavior: "smooth" });
423 } else {
424 slider.scrollBy({ left: cardWidth, behavior: "smooth" });
425 }
426 }, 3000);
427 };
428
429 const stopAutoScroll = () => {
430 clearInterval(autoScrollInterval);
431 };
432
433 startAutoScroll();
434
435 container.addEventListener("mouseenter", stopAutoScroll);
436 container.addEventListener("mouseleave", startAutoScroll);
437
438 container.addEventListener("touchstart", stopAutoScroll);
439 container.addEventListener("touchend", startAutoScroll);
440
441 nextBtn.addEventListener("click", () => {
442 const cardWidth = slider.querySelector(".review-card").offsetWidth + 24;
443 slider.scrollBy({ left: cardWidth, behavior: "smooth" });
444 });
445
446 prevBtn.addEventListener("click", () => {
447 const cardWidth = slider.querySelector(".review-card").offsetWidth + 24;
448 slider.scrollBy({ left: -cardWidth, behavior: "smooth" });
449 });
450 </script>
451 </body>
148</html> 452</html>
diff --git a/src/kerekobar.otf b/src/kerekobar.otf
new file mode 100644
index 0000000..416405b
--- /dev/null
+++ b/src/kerekobar.otf
Binary files differ
diff --git a/src/logo.svg b/src/logo.svg
new file mode 100644
index 0000000..a65569b
--- /dev/null
+++ b/src/logo.svg
@@ -0,0 +1,93 @@
1<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2<svg
3 width="44.510307"
4 height="49.528"
5 viewBox="0 0 44.510307 49.528"
6 fill="none"
7 version="1.1"
8 id="svg11"
9 sodipodi:docname="logo.svg"
10 inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
11 xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
12 xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
13 xmlns="http://www.w3.org/2000/svg"
14 xmlns:svg="http://www.w3.org/2000/svg">
15 <sodipodi:namedview
16 id="namedview11"
17 pagecolor="#ffffff"
18 bordercolor="#000000"
19 borderopacity="0.25"
20 inkscape:showpageshadow="2"
21 inkscape:pageopacity="0.0"
22 inkscape:pagecheckerboard="0"
23 inkscape:deskcolor="#d1d1d1"
24 inkscape:clip-to-page="false"
25 inkscape:zoom="1.9864458"
26 inkscape:cx="-33.476876"
27 inkscape:cy="51.599697"
28 inkscape:window-width="1440"
29 inkscape:window-height="872"
30 inkscape:window-x="0"
31 inkscape:window-y="0"
32 inkscape:window-maximized="1"
33 inkscape:current-layer="svg11" />
34 <g
35 clip-path="url(#clip0_131_2211)"
36 id="g4"
37 transform="translate(-48.9332,-0.88513745)">
38 <path
39 d="M 70.8421,16.0775 52.6725,7.68359 C 52.2979,7.51086 51.8803,7.45038 51.4714,7.50962 50.1851,7.68792 49.0065,8.94964 49.004,10.4813 l -0.0708,37.6231 c 0,1.5515 1.1893,2.464 2.463,2.2869 0.4858,-0.0674 0.984,-0.2934 1.4328,-0.7014 L 68.1675,35.7349 61.5227,32.665 C 59.9774,31.9528 59.2544,30.48 59.183,29.0956 59.1119,27.7154 59.6567,26.2535 60.8127,25.202 Z"
40 fill="url(#paint0_radial_131_2211)"
41 id="path3"
42 style="fill:url(#paint0_radial_131_2211)" />
43 <path
44 d="m 90.9805,0.906965 c 1.2756,-0.177062 2.4661,0.735485 2.463,2.286945 L 93.3734,40.817 c -0.0032,1.5304 -1.1818,2.7921 -2.4674,2.9717 -0.409,0.0593 -0.8266,-0.0012 -1.2012,-0.174 L 62.3237,30.9647 C 60.7589,30.2435 60.64,27.9076 62.0965,26.5827 L 89.5477,1.6084 c 0.4494,-0.40798 0.947,-0.633954 1.4328,-0.701435 z"
45 fill="url(#paint1_radial_131_2211)"
46 id="path4"
47 style="fill:url(#paint1_radial_131_2211)" />
48 </g>
49 <defs
50 id="defs11">
51 <radialGradient
52 id="paint0_radial_131_2211"
53 cx="0"
54 cy="0"
55 r="1"
56 gradientUnits="userSpaceOnUse"
57 gradientTransform="matrix(-65.501771,8.0263603,-3.0640835,-25.005468,163.4922,18.486537)">
58 <stop
59 stop-color="#E02E2E"
60 id="stop8" />
61 <stop
62 offset="1"
63 stop-color="#EE215B"
64 id="stop9" />
65 </radialGradient>
66 <radialGradient
67 id="paint1_radial_131_2211"
68 cx="0"
69 cy="0"
70 r="1"
71 gradientUnits="userSpaceOnUse"
72 gradientTransform="matrix(44.550651,-7.7557204,4.3934053,25.236735,97.7734,34.311037)">
73 <stop
74 stop-color="#0091FF"
75 id="stop10" />
76 <stop
77 offset="1"
78 stop-color="#1846C7"
79 id="stop11" />
80 </radialGradient>
81 <clipPath
82 id="clip0_131_2211">
83 <rect
84 width="50.574699"
85 height="50.022999"
86 fill="#ffffff"
87 transform="translate(45.9914,0.6375)"
88 id="rect11"
89 x="0"
90 y="0" />
91 </clipPath>
92 </defs>
93</svg>
diff --git a/src/student.png b/src/student.png
deleted file mode 100644
index f9b6478..0000000
--- a/src/student.png
+++ /dev/null
Binary files differ
diff --git a/style.css b/style.css
index 9b72345..b909ec5 100644
--- a/style.css
+++ b/style.css
@@ -1,155 +1,524 @@
1@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900&display=swap"); 1@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");
2 2
3@media (prefers-color-scheme: light) { 3@font-face {
4 :root { 4 font-family: "kerekobar";
5 --color-primary: rgb(0 104 119); 5 src: url("/src/kerekobar.otf");
6 --color-on-primary: rgb(255 255 255); 6}
7 7
8 --color-secondary: rgb(74 98 104); 8:root {
9 --text: #333333;
10 --background: #ffffff;
11 --primary: #1743bd;
12 --secondary: #ed2257;
9 13
10 --color-surface: rgb(245 250 252); 14 --surface: #f5f7fa;
11 --color-surface-container: rgb(233 239 240); 15 --surface-hover: #eef2f6;
12 --color-on-surface: rgb(23 29 30); 16 --border: #e1e4e8;
13 } 17 --shadow: rgba(0, 0, 0, 0.08);
14} 18}
15 19
16@media (prefers-color-scheme: dark) { 20* {
17 :root { 21 box-sizing: border-box;
18 --color-primary: rgb(131 210 228); 22 margin: 0;
19 --color-on-primary: rgb(0 54 62); 23 padding: 0;
24}
20 25
21 --color-secondary: rgb(178 203 209); 26body {
27 font-family: "Open Sans", sans-serif;
28 color: var(--text);
29 background-color: var(--background);
30 line-height: 1.6;
31 overflow-x: hidden;
32}
22 33
23 --color-surface: rgb(14 20 22); 34.container {
24 --color-surface-container: rgb(27 33 34); 35 max-width: 1300px;
25 --color-on-surface: rgb(222 227 229); 36 margin: 0 auto;
26 } 37 padding: 0 1.5rem;
27} 38}
28 39
29* { 40a {
30 transition-duration: 0.5s; 41 text-decoration: none;
31 transition-property: background, color; 42 color: inherit;
32 transition-timing-function: ease-in-out; 43 transition: 0.3s;
33} 44}
34 45
35body { 46.header {
36 font-family: "Noto Sans", sans-serif; 47 display: flex;
37 background-color: var(--color-surface); 48 justify-content: space-between;
38 color: var(--color-on-surface); 49 align-items: center;
39 margin: 0 auto; 50 padding: 1.5rem 1.5rem;
40 padding: 0 0.5em; 51}
41 52
42 max-width: 50em; 53.logo {
54 display: flex;
55 gap: 0.5rem;
56 font-weight: 800;
57 font-size: 1.5rem;
43} 58}
44 59
45main { 60.logo span {
46 background-color: var(--color-surface-container); 61 margin: auto 0;
47 border-radius: 2em; 62}
48 63
49 margin: 1em 0 5em 0; 64.header nav a {
50 padding: 1.5em; 65 margin-left: 1.5rem;
66 font-weight: 600;
67 color: var(--text);
68 display: none;
51} 69}
52 70
53main > *:first-child { 71@media (min-width: 768px) {
54 margin-top: 0; 72 .header nav a {
73 display: inline-block;
74 }
55} 75}
56 76
57main > *:last-child { 77.header nav a:hover {
58 margin-bottom: 0; 78 color: var(--primary);
59} 79}
60 80
61footer { 81.btn {
62 background-color: var(--color-surface-container); 82 display: inline-block;
63 border-radius: 2em 2em 0 0; 83 padding: 0.8rem 1.5rem;
84 border-radius: 50px;
85 font-weight: 700;
86 text-align: center;
87 cursor: pointer;
88 transition:
89 transform 0.2s,
90 box-shadow 0.2s;
91}
64 92
65 display: flex; 93.btn:active {
66 flex-wrap: wrap; 94 transform: scale(0.95);
95}
67 96
68 padding: 1.5em; 97.btn-primary {
98 background-color: var(--secondary);
99 color: white;
100 box-shadow: 0 4px 15px rgba(237, 34, 87, 0.4);
69} 101}
70 102
71footer > * { 103.btn-secondary {
72 margin-bottom: 1em; 104 background-color: transparent;
73 margin-right: 1em; 105 color: var(--text);
106 border: 2px solid var(--border);
74} 107}
75 108
76footer > *:last-child { 109.btn-secondary:hover {
77 margin-right: 0; 110 border-color: var(--text);
78 margin-bottom: 0; 111 background-color: var(--surface);
79} 112}
80 113
81h1, 114.btn-fake:hover {
82h2 { 115 opacity: 0;
83 color: var(--color-primary); 116 cursor: not-allowed;
84} 117}
85 118
86h4 { 119.pulse {
87 margin: 0; 120 animation: pulse-animation 2s infinite;
88 margin-bottom: 0.5em;
89} 121}
90 122
91b { 123@keyframes pulse-animation {
92 color: var(--color-secondary); 124 0% {
125 transform: scale(1);
126 }
127 50% {
128 transform: scale(1.05);
129 }
130 100% {
131 transform: scale(1);
132 }
93} 133}
94 134
95ul, 135.hero {
96ol { 136 display: flex;
97 padding-left: 1.5em; 137 flex-direction: column-reverse;
138 align-items: center;
139 padding: 3rem 1.5rem;
140 text-align: center;
141 gap: 2rem;
98} 142}
99 143
100li { 144@media (min-width: 768px) {
101 padding-bottom: 1em; 145 .hero {
146 flex-direction: row;
147 text-align: left;
148 padding: 5rem 1.5rem;
149 }
150 .hero-buttons {
151 display: flex;
152 gap: 1rem;
153 justify-content: flex-start;
154 }
102} 155}
103 156
104li:last-child { 157.hero-content {
105 padding-bottom: 0; 158 flex: 1;
106} 159}
107 160
108a { 161.badge {
109 color: var(--color-primary); 162 display: inline-block;
163 background: #e0eaff;
164 color: var(--primary);
165 padding: 0.3rem 0.8rem;
166 border-radius: 8px;
167 font-size: 0.85rem;
168 font-weight: 700;
169 margin-bottom: 1rem;
170 text-transform: uppercase;
171}
172
173.hero h1 {
174 font-size: 2.5rem;
175 line-height: 1.2;
176 margin-bottom: 1rem;
177 color: var(--primary);
178}
179
180.hero .subtitle {
181 font-size: 1.1rem;
182 color: #666;
183 margin-bottom: 2rem;
184}
185
186.hero-buttons {
187 display: flex;
188 flex-direction: column;
189 gap: 1rem;
190 margin-bottom: 1rem;
191}
192
193.disclaimer {
194 font-size: 0.7rem;
195 color: #999;
196}
197
198.hero-image {
199 flex: 1;
200 display: flex;
201 justify-content: center;
202 align-items: center;
203}
204
205.emoji-scene {
206 font-size: 5rem;
207 background: var(--surface);
208 width: 250px;
209 height: 250px;
210 border-radius: 50%;
211 display: flex;
212 align-items: center;
213 justify-content: center;
214 animation: float 3s ease-in-out infinite;
215}
216
217@keyframes float {
218 0%,
219 100% {
220 transform: translateY(0);
221 }
222 50% {
223 transform: translateY(-15px);
224 }
225}
226
227.features-section {
228 padding: 4rem 0;
229 background-color: var(--surface);
230}
231
232.features-section h2 {
233 text-align: center;
234 margin-bottom: 2rem;
235 color: var(--primary);
236}
237
238.grid {
239 display: flex;
240 flex-wrap: wrap;
241 justify-content: center;
242 gap: 1.5rem;
110} 243}
111 244
112img { 245.card {
113 width: 100%; 246 background: var(--background);
114 max-height: 15em; 247 padding: 2rem;
115 object-fit: cover; 248 border-radius: 1rem;
116 border-radius: 1em; 249 box-shadow: 0 4px 6px var(--shadow);
250 transition: transform 0.3s;
251
252 flex: 1 1 300px;
253 max-width: 400px;
254 width: 100%;
255}
256
257.card:hover {
258 transform: translateY(-5px);
117} 259}
118 260
119@keyframes button { 261.card .icon {
120 0% { 262 font-size: 2.5rem;
121 transform: scale(1); 263 margin-bottom: 1rem;
122 } 264}
123 50% {
124 transform: scale(1.15);
125 }
126 265
127 100% { 266.card h3 {
128 transform: scale(1); 267 margin-bottom: 0.5rem;
129 } 268 color: var(--text);
130} 269}
131 270
132.button { 271.card p {
133 background-color: var(--color-primary); 272 font-size: 0.95rem;
134 color: var(--color-on-primary); 273 color: #555;
274}
275
276.reviews-section {
277 padding: 4rem 1.5rem;
278}
135 279
136 border-radius: 1em; 280.reviews-section h2 {
137 padding: 1em; 281 text-align: center;
138 margin: 1em 2.5em; 282 margin-bottom: 2rem;
139 font-size: medium; 283 color: var(--primary);
140 animation: button infinite 1s; 284}
285
286.carousel-wrapper {
287 overflow: hidden;
288}
289
290.carousel {
291 display: flex;
292 overflow-x: auto;
293 scroll-snap-type: x mandatory;
294 gap: 1.5rem;
295 padding-bottom: 1.5rem;
296 -webkit-overflow-scrolling: touch;
297 scrollbar-width: none;
298}
299
300.carousel-container {
301 position: relative;
302 display: flex;
303 align-items: center;
304}
305
306.nav-btn {
307 position: absolute;
308 top: 50%;
309 transform: translateY(-50%);
310 background: white;
311 border: 1px solid var(--border);
312 width: 40px;
313 height: 40px;
314 border-radius: 50%;
315 cursor: pointer;
316 z-index: 10;
317 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
318 color: var(--primary);
319 font-weight: bold;
320 font-size: 1.2rem;
321 display: flex;
322 align-items: center;
323 justify-content: center;
324 transition: all 0.2s;
325}
326
327.nav-btn:hover {
328 background: var(--surface);
329 color: var(--secondary);
330 transform: translateY(-50%) scale(1.1);
331}
332
333.prev-btn {
334 left: -20px;
335}
141 336
142 text-decoration: none; 337.next-btn {
143 text-align: center; 338 right: -20px;
144 display: block;
145} 339}
146 340
147.sponsors { 341@media (max-width: 768px) {
148 display: flex; 342 .nav-btn {
149 flex-wrap: wrap; 343 display: none;
344 }
150} 345}
151 346
152.sponsors > * { 347.carousel {
153 flex: 1 1 150px; 348 scrollbar-width: none;
154 text-wrap: nowrap; 349}
350
351.carousel::-webkit-scrollbar {
352 display: none;
353}
354
355.review-card {
356 flex: 0 0 85%;
357 scroll-snap-align: center;
358 background: var(--background);
359 border: 1px solid var(--border);
360 padding: 1.5rem;
361 border-radius: 1rem;
362 box-shadow: 0 4px 12px var(--shadow);
363}
364
365@media (min-width: 768px) {
366 .review-card {
367 flex: 0 0 40%;
368 }
369}
370
371.review-header {
372 display: flex;
373 align-items: center;
374 gap: 1rem;
375 margin-bottom: 1rem;
376}
377
378.review-header .avatar {
379 font-size: 2.5rem;
380 background: var(--surface);
381 width: 60px;
382 height: 60px;
383 border-radius: 50%;
384 display: flex;
385 align-items: center;
386 justify-content: center;
387}
388
389.review-header h4 {
390 margin: 0;
391 font-size: 1rem;
392}
393
394.review-header small {
395 color: var(--secondary);
396 font-weight: 600;
397}
398
399.cta-section {
400 background: var(--primary);
401 color: white;
402 text-align: center;
403 padding: 4rem 1.5rem;
404}
405
406.cta-section h2 {
407 color: white;
408 margin-bottom: 1rem;
409}
410
411.cta-section p {
412 margin-bottom: 2rem;
413 opacity: 0.9;
414}
415
416.big-btn {
417 background: white;
418 color: var(--primary);
419 font-size: 1.2rem;
420 padding: 1rem 3rem;
421 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
422}
423
424.big-btn:hover {
425 background: var(--surface);
426 transform: translateY(-3px);
427}
428
429.sponsors-section {
430 padding: 2rem 0 4rem 0;
431 background-color: var(--background);
432 overflow: hidden;
433}
434
435.sponsors-title {
436 text-align: center;
437 color: #999;
438 font-size: 0.9rem;
439 text-transform: uppercase;
440 letter-spacing: 1px;
441 margin-bottom: 1.5rem;
442 font-weight: 700;
443}
444
445.marquee-wrapper {
446 position: relative;
447 width: 100%;
448 display: flex;
449 overflow: hidden;
450 mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
451 -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
452}
453
454.marquee-track {
455 display: flex;
456 gap: 1rem;
457 width: max-content;
458 animation: scroll 30s linear infinite;
459 padding: 0.5rem 0;
460}
461
462.marquee-wrapper:hover .marquee-track {
463 animation-play-state: paused;
464}
465
466@keyframes scroll {
467 0% {
468 transform: translateX(0);
469 }
470 100% {
471 transform: translateX(-50%);
472 }
473}
474
475.sponsor-tag {
476 display: inline-flex;
477 align-items: center;
478 white-space: nowrap;
479 padding: 0.5rem 1rem;
480 border-radius: 50px;
481 font-size: 0.9rem;
482 font-weight: 600;
483 text-decoration: none;
484 transition: transform 0.2s;
485}
486
487.sponsor-tag:hover {
488 transform: scale(1.08);
489}
490
491.tier-creator {
492 background: var(--secondary);
493 color: white;
494 border: 2px solid transparent;
495}
496
497.tier-vip {
498 background-color: #fff9e6;
499 color: #d97706;
500 border: 1px solid #fcd34d;
501}
502
503.tier-norm {
504 background-color: var(--surface);
505 color: var(--text);
506 border: 1px solid var(--border);
507}
508
509.tier-norm:hover {
510 border-color: var(--primary);
511 color: var(--primary);
512}
513
514.kerekobar {
515 font-family: "kerekobar";
516}
517
518footer {
519 text-align: center;
520 padding: 2rem 1.5rem;
521 background: #222;
522 color: #777;
523 font-size: 0.85rem;
155} 524}
generated by cgit v1.2.3 (git 2.46.0) at 2026-01-11 21:19:08 +0000