-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
231 lines (214 loc) · 12.7 KB
/
index.html
File metadata and controls
231 lines (214 loc) · 12.7 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
221
222
223
224
225
226
227
228
229
230
231
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Русский гиперпоп 2021: герои, эстетика и мини-статы сцены.">
<title>RU HYPERPOP 2021</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&family=Montserrat:wght@400;800&family=Unbounded:wght@400;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="video-bg">
<video id="bg-video" autoplay muted loop playsinline>
<source src="assets/background.mp4" type="video/mp4">
</video>
<div class="overlay"></div>
</div>
<header>
<div class="logo">HYPERPOP-2021</div>
<nav>
<a href="#about">О жанре</a>
<a href="#artists">Герои</a>
<a href="#stats">Данные</a>
</nav>
</header>
<div class="video-caption" aria-live="polite">
<span class="video-pill">BG</span>
<span class="video-label">Sqwore — Аквариум</span>
</div>
<main>
<section class="hero">
<div class="hero-meta">
<span class="meta-chip">RU 2021</span>
<span class="meta-chip">гиперпоп</span>
<span class="meta-chip">цифровая тоска</span>
</div>
<h1 class="glitch-large" data-text="ЦИФРОВЫЕ ЧУВСТВА">ЦИФРОВЫЕ ЧУВСТВА</h1>
<p class="subtitle">Эстетика распада и перегруженного звука. <br>Россия, 2021.</p>
<a href="#artists" class="cta-btn">ПОГРУЗИТЬСЯ</a>
</section>
<section class="ticker" aria-hidden="true">
<div class="ticker-track">
<span>гиперпоп / автотюн / глитч / перегруз / хардклап / эмо</span>
<span>гиперпоп / автотюн / глитч / перегруз / хардклап / эмо</span>
</div>
</section>
<section id="about" class="content-block glass">
<h2>// НЕМНОГО О ЖАНРЕ</h2>
<p>
Русский гиперпоп 2021 года - это не просто музыка, это манифест поколения, живущего в интернете.
Искаженный бас, запитченные вокалы, эстетика аниме и визуальных новелл.
Это звук перегруженности, искренности и побега от реальности.
</p>
<div class="genre-tags">
<span>питч-вокал</span>
<span>глитч</span>
<span>distortion bass</span>
<span>эстетика аниме</span>
<span>140-180 bpm</span>
</div>
</section>
<section id="artists" class="artists-section">
<div class="section-head">
<h2>// ГЕРОИ</h2>
<p>Шесть релизов, которые фиксируют посыл и темп сезона.</p>
</div>
<div class="artists-grid">
<div class="artist-card glass">
<div class="cover-wrapper">
<img src="assets/sqwore_eve.jpg" alt="Sqwore - Eve" class="album-cover" id="img-sqwore">
<a class="play-icon" href="https://open.spotify.com/album/2NGJydCluoYwOcMIMgaHYC?si=f002ff425ba0481a" target="_blank" rel="noreferrer" aria-label="Открыть в Spotify: SQWORE — Eve">PLAY</a>
</div>
<div class="info">
<h3>SQWORE - Eve</h3>
<div class="tags">
<span>#hyperpop</span>
<span>#emohyperpop</span>
</div>
<p>Голос разбитых сердец и бесконечного скроллинга. Альбом <strong>"Eve"</strong> стал иконой эмоционального гиперпопа. Обложка отсылает к младшей сестре главного персонажа во вселенной.</p>
<div class="stats-row">
<span class="track-name">Самый популярный трек: Звезда упала</span>
<span class="streams count-up" data-count="17267626" data-prefix="🎧 ">0</span>
</div>
</div>
</div>
<div class="artist-card glass">
<div class="cover-wrapper">
<img src="assets/17_17.png" alt="17 SEVENTEEN - 2017" class="album-cover" id="img-17">
<a class="play-icon" href="https://open.spotify.com/album/3fqHBhY9PAiGj9gGuxPDRo?si=45e4128651304ac5" target="_blank" rel="noreferrer" aria-label="Открыть в Spotify: 17 SEVENTEEN — Две тысячи семнадцатый">PLAY</a>
</div>
<div class="info">
<h3>17 SEVENTEEN - Две тысячи семнадцатый</h3>
<div class="tags">
<span>#hyperpop</span>
<span>#glitchpop</span>
</div>
<p>Агрессия, стиль и скорость. Альбом <strong>"Две тысячи семнадцатый"</strong> переопределил звучание сцены.</p>
<div class="stats-row">
<span class="track-name">Самый популярный трек: Сердце</span>
<span class="streams count-up" data-count="5732527" data-prefix="🎧 ">0</span>
</div>
</div>
</div>
<div class="artist-card glass">
<div class="cover-wrapper">
<img src="assets/rizza.jpg" alt="RIZZA - Плачь" class="album-cover">
<a class="play-icon" href="https://open.spotify.com/track/3yCKABoZU3FVFuyVBc5VlM?si=b8e14ac623f7493b" target="_blank" rel="noreferrer" aria-label="Открыть в Spotify: RIZZA — Плачь">PLAY</a>
</div>
<div class="info">
<h3>RIZZA - Плачь</h3>
<div class="tags">
<span>#emopop</span>
<span>#hyperpop</span>
</div>
<p>Рваный вокал и липкий рефрен. Сингл <strong>"Плачь"</strong> стал саундтреком к ночному скроллингу.</p>
<div class="stats-row">
<span class="track-name">Количество прослушиваний: </span>
<span class="streams count-up" data-count="34353779" data-prefix="🎧 ">0</span>
</div>
</div>
</div>
<div class="artist-card glass">
<div class="cover-wrapper">
<img src="assets/quiizzzmeow.jpg" alt="QUIIZZZMEOW - Aomine Daiki" class="album-cover">
<a class="play-icon" href="https://open.spotify.com/track/37yN0KkJCQ1d9vlxEjbBlX?si=e26360a7e85746c4" target="_blank" rel="noreferrer" aria-label="Открыть в Spotify: QUIIZZZMEOW — Aomine Daiki">PLAY</a>
</div>
<div class="info">
<h3>QUIIZZZMEOW - Aomine Daiki</h3>
<div class="tags">
<span>#animecore</span>
<span>#hyperpop</span>
</div>
<p>Нервный бит и отсылки к аниме "Баскетбол Куроко", которые разрывают ленту. <strong>"Aomine Daiki"</strong> — драйв и хаос.</p>
<div class="stats-row">
<span class="track-name">Количество прослушиваний: </span>
<span class="streams count-up" data-count="29126066" data-prefix="🎧 ">0</span>
</div>
</div>
</div>
<div class="artist-card glass">
<div class="cover-wrapper">
<img src="assets/treepside.jpg" alt="TREEPSIDE - USB (17 SEVENTEEN Remix)" class="album-cover">
<a class="play-icon" href="https://open.spotify.com/track/2feVO08HAtBx0zBqlyOGGO?si=17661a13a12f47a0" target="_blank" rel="noreferrer" aria-label="Открыть в Spotify: TREEPSIDE — USB (17 SEVENTEEN Remix)">PLAY</a>
</div>
<div class="info">
<h3>TREEPSIDE - USB (17 SEVENTEEN Remix)</h3>
<div class="tags">
<span>#remix</span>
<span>#hyperpop</span>
</div>
<p>Ремикс от treepside на трек 17 SEVENTEEN, который ускоряет пульс и качает сцену.</p>
<div class="stats-row">
<span class="track-name">Количество прослушиваний: </span>
<span class="streams count-up" data-count="6254475" data-prefix="🎧 ">0</span>
</div>
</div>
</div>
<div class="artist-card glass">
<div class="cover-wrapper">
<img src="assets/lxner.jpg" alt="LXNER feat. WENARO - Лёд" class="album-cover">
<a class="play-icon" href="https://open.spotify.com/track/7CMV5bdIXxN4SB0W6wzHDW?si=87c4fefb441d4201" target="_blank" rel="noreferrer" aria-label="Открыть в Spotify: LXNER feat. WENARO — Лёд">PLAY</a>
</div>
<div class="info">
<h3>LXNER feat. WENARO - Лёд</h3>
<div class="tags">
<span>#hyperpop</span>
<span>#electropop</span>
</div>
<p>Холодные синты и двуголосый припев, который прилипает. <strong>"Лёд"</strong> — чистый хит сцены.</p>
<div class="stats-row">
<span class="track-name">Количество прослушиваний: </span>
<span class="streams count-up" data-count="40235814" data-prefix="🎧 ">0</span>
</div>
</div>
</div>
</div>
</section>
<section id="stats" class="stats-section">
<div class="section-head">
<h2>// ДАННЫЕ</h2>
<p>Мини-срез по подборке релизов на странице.</p>
</div>
<div class="stats-grid">
<div class="stat-card glass">
<div class="stat-label">Артистов в подборке</div>
<div class="stat-value count-up" data-count="6">0</div>
</div>
<div class="stat-card glass">
<div class="stat-label">Суммарные стримы</div>
<div class="stat-value count-up" data-count="132970287">0</div>
</div>
<div class="stat-card glass">
<div class="stat-label">Среднее на релиз</div>
<div class="stat-value count-up" data-count="22161714">0</div>
</div>
</div>
<div class="sources-block glass">
<h3>// ИСТОЧНИКИ</h3>
<ul class="sources-list">
<li><a href="https://open.spotify.com/" target="_blank" rel="noreferrer">Spotify</a> - карточки релизов и стримы.</li>
</ul>
<p class="sources-note">Число прослушиваний на сайте и в приложении может отличаться.</p>
</div>
</section>
</main>
<footer>
<p>DESIGNED BY DARKWHITEZERO // 18.01.2026</p>
<p style="font-size: 0.8rem; opacity: 0.6;">Источники - в колонке «Данные».</p>
</footer>
<script src="script.js"></script>
</body>
</html>