Hugging Face's logo

Spaces:
timoon811
/
block10tm
Running

App Files Community
timoon811 commited on
Commit
a4e299d
·
verified ·
1 Parent(s): ad50173

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +410 -19
  3. prompts.txt +4 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Block10tm
3
- emoji: 🔥
4
- colorFrom: gray
5
  colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: block10tm
3
+ emoji: 🐳
4
+ colorFrom: green
5
  colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,410 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Guarantee + Nearest Flow Block</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');
11
+
12
+ body {
13
+ font-family: 'Inter', sans-serif;
14
+ background-color: #0a0a0a;
15
+ color: #E1E1E1;
16
+ overflow-x: hidden;
17
+ }
18
+
19
+ .neon-yellow {
20
+ color: #f6fc79;
21
+ text-shadow: 0 0 8px rgba(246, 252, 121, 0.7);
22
+ }
23
+
24
+ .neon-yellow-bg {
25
+ background-color: #f6fc79;
26
+ box-shadow: 0 0 15px rgba(246, 252, 121, 0.7);
27
+ }
28
+
29
+ .neon-yellow-border {
30
+ border-color: #f6fc79;
31
+ box-shadow: 0 0 10px rgba(246, 252, 121, 0.5);
32
+ }
33
+
34
+ .glow-text {
35
+ text-shadow: 0 0 10px rgba(246, 252, 121, 0.9);
36
+ }
37
+
38
+ .glow-box {
39
+ box-shadow: 0 0 15px rgba(246, 252, 121, 0.7);
40
+ }
41
+
42
+ .glow-box:hover {
43
+ box-shadow: 0 0 25px rgba(246, 252, 121, 0.9);
44
+ }
45
+
46
+ .border-glow {
47
+ border-color: #f6fc79;
48
+ box-shadow: 0 0 10px rgba(246, 252, 121, 0.5);
49
+ }
50
+
51
+ .border-glow:hover {
52
+ box-shadow: 0 0 20px rgba(246, 252, 121, 0.8);
53
+ }
54
+
55
+ .dashboard-container {
56
+ perspective: 1000px;
57
+ transform-style: preserve-3d;
58
+ }
59
+
60
+ .dashboard {
61
+ transform: rotateY(-15deg) rotateX(5deg);
62
+ transition: all 0.5s ease;
63
+ }
64
+
65
+ .dashboard:hover {
66
+ transform: rotateY(-10deg) rotateX(3deg);
67
+ }
68
+
69
+ .traffic-flow {
70
+ position: relative;
71
+ height: 100%;
72
+ overflow: hidden;
73
+ }
74
+
75
+ .flow-item {
76
+ position: absolute;
77
+ transition: all 0.5s ease;
78
+ }
79
+
80
+ .pulse {
81
+ animation: pulse 2s infinite;
82
+ }
83
+
84
+ @keyframes pulse {
85
+ 0% { transform: scale(1); opacity: 1; }
86
+ 50% { transform: scale(1.05); opacity: 0.8; }
87
+ 100% { transform: scale(1); opacity: 1; }
88
+ }
89
+
90
+ .particles {
91
+ position: absolute;
92
+ top: 0;
93
+ left: 0;
94
+ width: 100%;
95
+ height: 100%;
96
+ pointer-events: none;
97
+ }
98
+
99
+ .particle {
100
+ position: absolute;
101
+ background-color: rgba(246, 252, 121, 0.8);
102
+ border-radius: 50%;
103
+ pointer-events: none;
104
+ }
105
+
106
+ .tooltip {
107
+ visibility: hidden;
108
+ opacity: 0;
109
+ transition: all 0.3s ease;
110
+ }
111
+
112
+ .flow-item:hover .tooltip {
113
+ visibility: visible;
114
+ opacity: 1;
115
+ }
116
+
117
+ .nav-link {
118
+ position: relative;
119
+ transition: all 0.3s ease;
120
+ }
121
+
122
+ .nav-link:hover {
123
+ text-shadow: 0 0 10px rgba(246, 252, 121, 0.9);
124
+ color: #f6fc79 !important;
125
+ }
126
+
127
+ .process-arrow {
128
+ position: absolute;
129
+ color: #f6fc79;
130
+ font-size: 24px;
131
+ top: 50%;
132
+ transform: translateY(-50%);
133
+ z-index: 1;
134
+ }
135
+
136
+ @media (max-width: 768px) {
137
+ .dashboard {
138
+ transform: none;
139
+ }
140
+ }
141
+ .arrow-animation {
142
+ animation: arrowPulse 1.5s infinite;
143
+ }
144
+ @keyframes arrowPulse {
145
+ 0% { opacity: 0.5; transform: translateY(-50%) translateX(0); }
146
+ 50% { opacity: 1; transform: translateY(-50%) translateX(5px); }
147
+ 100% { opacity: 0.5; transform: translateY(-50%) translateX(0); }
148
+ }
149
+
150
+ /* Custom styles for the guarantee-flow block */
151
+ .guarantee-flow-container {
152
+ opacity: 0;
153
+ transform: translateY(20px);
154
+ animation: fadeInUp 0.8s ease forwards;
155
+ }
156
+
157
+ @keyframes fadeInUp {
158
+ to {
159
+ opacity: 1;
160
+ transform: translateY(0);
161
+ }
162
+ }
163
+
164
+ .guarantee-section {
165
+ background-color: #121212;
166
+ animation: slideInLeft 0.6s ease-out forwards;
167
+ }
168
+
169
+ .flow-section {
170
+ background-color: #1a1a1a;
171
+ animation: slideInRight 0.6s ease-out forwards;
172
+ }
173
+
174
+ @keyframes slideInLeft {
175
+ from {
176
+ transform: translateX(-20px);
177
+ opacity: 0;
178
+ }
179
+ to {
180
+ transform: translateX(0);
181
+ opacity: 1;
182
+ }
183
+ }
184
+
185
+ @keyframes slideInRight {
186
+ from {
187
+ transform: translateX(20px);
188
+ opacity: 0;
189
+ }
190
+ to {
191
+ transform: translateX(0);
192
+ opacity: 1;
193
+ }
194
+ }
195
+
196
+ .shield-icon {
197
+ animation: shieldGlow 3s infinite alternate;
198
+ }
199
+
200
+ @keyframes shieldGlow {
201
+ 0% {
202
+ filter: drop-shadow(0 0 8px rgba(246, 252, 121, 0.7));
203
+ transform: scale(1);
204
+ }
205
+ 100% {
206
+ filter: drop-shadow(0 0 20px rgba(246, 252, 121, 1));
207
+ transform: scale(1.05);
208
+ }
209
+ }
210
+
211
+ .places-count {
212
+ animation: countPulse 2s infinite;
213
+ }
214
+
215
+ @keyframes countPulse {
216
+ 0% {
217
+ color: #f6fc79;
218
+ text-shadow: 0 0 8px rgba(246, 252, 121, 0.7);
219
+ }
220
+ 50% {
221
+ color: #fff;
222
+ text-shadow: 0 0 15px rgba(246, 252, 121, 1);
223
+ }
224
+ 100% {
225
+ color: #f6fc79;
226
+ text-shadow: 0 0 8px rgba(246, 252, 121, 0.7);
227
+ }
228
+ }
229
+
230
+ .book-button {
231
+ animation: bounce 1s ease;
232
+ transition: all 0.3s ease;
233
+ }
234
+
235
+ @keyframes bounce {
236
+ 0%, 20%, 50%, 80%, 100% {
237
+ transform: translateY(0);
238
+ }
239
+ 40% {
240
+ transform: translateY(-10px);
241
+ }
242
+ 60% {
243
+ transform: translateY(-5px);
244
+ }
245
+ }
246
+
247
+ .book-button:hover {
248
+ transform: translateY(-2px);
249
+ box-shadow: 0 0 25px rgba(246, 252, 121, 0.9);
250
+ }
251
+
252
+ .progress-bar {
253
+ height: 6px;
254
+ background-color: #333;
255
+ border-radius: 3px;
256
+ overflow: hidden;
257
+ }
258
+
259
+ .progress-fill {
260
+ height: 100%;
261
+ background-color: #f6fc79;
262
+ border-radius: 3px;
263
+ transition: width 0.5s ease;
264
+ box-shadow: 0 0 8px rgba(246, 252, 121, 0.7);
265
+ }
266
+
267
+ .shield-bg {
268
+ position: absolute;
269
+ right: 20px;
270
+ bottom: 20px;
271
+ opacity: 0.1;
272
+ width: 120px;
273
+ height: 120px;
274
+ z-index: 0;
275
+ filter: drop-shadow(0 0 5px rgba(246, 252, 121, 0.5));
276
+ }
277
+
278
+ .calendar-bg {
279
+ position: absolute;
280
+ right: 20px;
281
+ bottom: 20px;
282
+ opacity: 0.1;
283
+ width: 120px;
284
+ height: 120px;
285
+ z-index: 0;
286
+ filter: drop-shadow(0 0 5px rgba(246, 252, 121, 0.5));
287
+ }
288
+
289
+ .icon-container {
290
+ width: 48px;
291
+ height: 48px;
292
+ display: flex;
293
+ align-items: center;
294
+ justify-content: center;
295
+ margin-right: 12px;
296
+ }
297
+
298
+ .highlight-text {
299
+ color: #f6fc79;
300
+ text-shadow: 0 0 8px rgba(246, 252, 121, 0.7);
301
+ font-weight: 600;
302
+ }
303
+
304
+ .guarantee-percent {
305
+ background-color: #f6fc79;
306
+ color: #0a0a0a;
307
+ font-weight: 800;
308
+ box-shadow: 0 0 10px rgba(246, 252, 121, 0.7);
309
+ }
310
+ </style>
311
+ </head>
312
+ <body class="min-h-screen flex items-center justify-center p-4">
313
+ <div class="container mx-auto max-w-6xl">
314
+ <!-- Guarantee + Flow Block -->
315
+ <div class="guarantee-flow-container mb-20">
316
+ <div class="flex flex-col lg:flex-row rounded-xl overflow-hidden border border-gray-800 border-glow">
317
+ <!-- Guarantee Section -->
318
+ <div class="guarantee-section w-full lg:w-1/2 p-8 relative overflow-hidden">
319
+ <div class="relative z-10">
320
+ <div class="flex items-center mb-4">
321
+ <div class="icon-container">
322
+ <svg class="shield-icon w-full h-full" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
323
+ <path d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z" stroke="#f6fc79" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
324
+ <path d="M12 8V12V8ZM12 12H15H12ZM12 12H9H12Z" stroke="#f6fc79" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
325
+ </svg>
326
+ </div>
327
+ <h2 class="text-2xl font-bold neon-yellow glow-text">Гарантия</h2>
328
+ </div>
329
+ <p class="text-lg mb-6">
330
+ Мы уверены в качестве нашего курса. Если вы не получите результат после прохождения всех модулей и выполнения заданий, мы <span class="highlight-text">вернём вам деньги</span>.
331
+ </p>
332
+ <div class="flex items-center">
333
+ <div class="guarantee-percent px-4 py-2 rounded-full mr-4">
334
+ 100%
335
+ </div>
336
+ <span class="text-sm opacity-80">Гарантия возврата средств</span>
337
+ </div>
338
+ </div>
339
+ <svg class="shield-bg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
340
+ <path d="M12 22C12 22 20 18 20 12V5L12 2L4 5V12C4 18 12 22 12 22Z" stroke="#f6fc79" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
341
+ </svg>
342
+ </div>
343
+
344
+ <!-- Flow Section -->
345
+ <div class="flow-section w-full lg:w-1/2 p-8 relative overflow-hidden">
346
+ <div class="relative z-10">
347
+ <div class="flex items-center mb-4">
348
+ <div class="icon-container">
349
+ <svg class="w-full h-full neon-yellow" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
350
+ <path d="M19 4H5C3.89543 4 3 4.89543 3 6V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V6C21 4.89543 20.1046 4 19 4Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
351
+ <path d="M16 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
352
+ <path d="M8 2V6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
353
+ <path d="M3 10H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
354
+ <path d="M8 14H8.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
355
+ <path d="M12 14H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
356
+ <path d="M16 14H16.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
357
+ <path d="M8 18H8.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
358
+ <path d="M12 18H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
359
+ <path d="M16 18H16.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
360
+ </svg>
361
+ </div>
362
+ <h2 class="text-2xl font-bold neon-yellow glow-text">Ближайший поток</h2>
363
+ </div>
364
+
365
+ <div class="mb-6">
366
+ <div class="flex items-center mb-2">
367
+ <span class="text-gray-400 mr-2">Старт курса:</span>
368
+ <span class="font-bold neon-yellow">5 мая</span>
369
+ </div>
370
+ <div class="flex items-center">
371
+ <span class="text-gray-400 mr-2">Осталось мест:</span>
372
+ <span class="places-count font-bold">7 из 50</span>
373
+ </div>
374
+ </div>
375
+
376
+ <div class="mb-4">
377
+ <div class="flex justify-between text-sm mb-1">
378
+ <span>Заполненность потока:</span>
379
+ <span class="neon-yellow">86%</span>
380
+ </div>
381
+ <div class="progress-bar">
382
+ <div class="progress-fill" style="width: 86%"></div>
383
+ </div>
384
+ </div>
385
+
386
+ <button class="book-button w-full md:w-auto neon-yellow-bg hover:neon-yellow-bg text-black font-bold py-3 px-8 rounded-full transition-all duration-300 glow-box">
387
+ <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
388
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
389
+ </svg>
390
+ Забронировать место
391
+ </button>
392
+ </div>
393
+ <svg class="calendar-bg" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
394
+ <path d="M19 4H5C3.89543 4 3 4.89543 3 6V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V6C21 4.89543 20.1046 4 19 4Z" stroke="#f6fc79" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
395
+ <path d="M16 2V6" stroke="#f6fc79" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
396
+ <path d="M8 2V6" stroke="#f6fc79" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
397
+ <path d="M3 10H21" stroke="#f6fc79" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
398
+ </svg>
399
+ </div>
400
+ </div>
401
+ </div>
402
+ </div>
403
+
404
+ <script>
405
+ // Simple counter animation for places left
406
+ document.addEventListener('DOMContentLoaded', function() {
407
+ // Animate the places counter
408
+ const placesElement = document.querySelector('.places-count');
409
+
410
+ </html>
prompts.txt ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap'); body { font-family: 'Inter', sans-serif; background-color: #0a0a0a; color: #E1E1E1; overflow-x: hidden; } .glow-text { text-shadow: 0 0 10px rgba(246, 252, 121, 0.7); } .glow-box { box-shadow: 0 0 15px rgba(246, 252, 121, 0.5); } .glow-box:hover { box-shadow: 0 0 25px rgba(246, 252, 121, 0.8); } .border-glow { border-color: #f6fc79; box-shadow: 0 0 10px rgba(246, 252, 121, 0.3); } .border-glow:hover { box-shadow: 0 0 20px rgba(246, 252, 121, 0.5); } .dashboard-container { perspective: 1000px; transform-style: preserve-3d; } .dashboard { transform: rotateY(-15deg) rotateX(5deg); transition: all 0.5s ease; } .dashboard:hover { transform: rotateY(-10deg) rotateX(3deg); } .traffic-flow { position: relative; height: 100%; overflow: hidden; } .flow-item { position: absolute; transition: all 0.5s ease; } .pulse { animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .particle { position: absolute; background-color: rgba(246, 252, 121, 0.6); border-radius: 50%; pointer-events: none; } .tooltip { visibility: hidden; opacity: 0; transition: all 0.3s ease; } .flow-item:hover .tooltip { visibility: visible; opacity: 1; } .nav-link { position: relative; transition: all 0.3s ease; } .nav-link:hover { text-shadow: 0 0 10px rgba(246, 252, 121, 0.7); color: #f6fc79 !important; } .process-arrow { position: absolute; color: #f6fc79; font-size: 24px; top: 50%; transform: translateY(-50%); z-index: 1; } @media (max-width: 768px) { .dashboard { transform: none; } } .arrow-animation { animation: arrowPulse 1.5s infinite; } @keyframes arrowPulse { 0% { opacity: 0.5; transform: translateY(-50%) translateX(0); } 50% { opacity: 1; transform: translateY(-50%) translateX(5px); } 100% { opacity: 0.5; transform: translateY(-50%) translateX(0); } } </style> На основе вот этого стиля выше - сделай вот этот блок: 📦 Техническое задание: Блок 10 — «🛡️ Гарантия + 📅 Ближайший поток» ⸻ 🧱 1. Структура и расположение • Позиция: перед финальной формой/CTA • Формат: единый блок из двух колонок или двух секций (гарантия + поток) • Композиция: • Слева: гарантия • Справа: информация о ближайшем потоке + кнопка бронирования • На мобилке — вертикальный формат: гарантия сверху, поток — ниже ⸻ 🛡️ 2. Секция: Гарантия 📋 Содержимое: • Заголовок: 🛡️ Гарантия • Подзаголовок: Мы уверены в качестве нашего курса. Если вы не получите результат после прохождения всех модулей и выполнения заданий, мы вернём вам деньги. • Стиль подачи: деловой, с элементом надёжности и прозрачности • Иконка 🛡️ — может иметь эффект “пульсации” или “блеска” 🎨 Оформление: • Фон: #121212 • Цвет текста: #E1E1E1, ключевые фразы — #f6fc79 • Анимация при появлении: fade-in + slide-left • Обводка или иконка “100% гарантии” можно визуально выделить ⸻ 📅 3. Се��ция: Ближайший поток 📋 Содержимое: • Заголовок: 📅 Ближайший поток • Дата старта: Старт курса: 5 мая • Статус мест: Осталось мест: 7 из 50 • Цвет «7 из 50» — #f6fc79, можно с пульсирующим эффектом или счётчиком (опционально) 🔘 Кнопка: • Текст: 🔹 Забронировать место • Цвет: #f6fc79, текст — чёрный • Скругления: 2xl, glow при наведении • Анимация: bounce при загрузке, hover — вспышка 🎨 Оформление: • Фон: #1a1a1a или общий фон блока • Шрифт: Bold, Caps для ключевых дат • Визуальный акцент на ограниченность мест и дедлайн ⸻ 📱 4. Адаптивность: • <1024px: секции становятся вертикальными (одна под другой) • <768px: кнопка занимает всю ширину • Приоритет акцента — сначала гарантия, потом поток ⸻ ✨ 5. Визуальная целостность: • Следует общей палитре: #0a0a0a, #121212, #f6fc79, #E1E1E1 • Можно добавить слабую SVG-фоновую анимацию в блок гарантии (щит, сертификат) • В блоке “потока” — неоновые метки/счётчики или графическое отображение прогресса заполнения (7/50)
2
+ Замени смайлики - на нормальные элементы - красивые!
3
+ Почему у тебя не единый желтый цвет! Долежн быть желтый на кнопках и тексте - такой же как на иконках - с неоном! Исправь!
4
+ Ты не правильно сделал заполненость потока - осталось 7 из 50 - это осталось 14% - то есть заполненность 86%