|
2 | 2 | <html lang="en"> |
3 | 3 | <head> |
4 | 4 | <meta charset="UTF-8"> |
5 | | - <title>Coming Soon - Event Launch</title> |
| 5 | + <title>Summer Slams DSA25</title> |
6 | 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
7 | 7 |
|
8 | 8 | <!-- Google Font --> |
9 | 9 | <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap" rel="stylesheet"> |
10 | 10 |
|
11 | 11 | <style> |
12 | | - /* Base Reset */ |
13 | 12 | * { |
14 | 13 | margin: 0; |
15 | 14 | padding: 0; |
|
26 | 25 | justify-content: center; |
27 | 26 | align-items: center; |
28 | 27 | overflow: hidden; |
| 28 | + text-align: center; |
29 | 29 | } |
30 | 30 |
|
31 | 31 | /* Logo */ |
32 | 32 | .logo { |
33 | 33 | width: 160px; |
34 | 34 | height: 160px; |
35 | | - object-fit: contain; |
| 35 | + object-fit: cover; |
36 | 36 | border-radius: 50%; |
37 | | - box-shadow: 0 0 20px rgba(255, 255, 255, 0.1); |
| 37 | + box-shadow: 0 0 25px rgba(255, 255, 255, 0.2); |
38 | 38 | margin-bottom: 30px; |
39 | | - animation: zoomIn 2s ease-out; |
| 39 | + animation: zoomIn 1.8s ease-out; |
40 | 40 | } |
41 | 41 |
|
42 | 42 | /* Headline */ |
43 | 43 | h1 { |
44 | | - font-size: 3rem; |
| 44 | + font-size: 3.2rem; |
45 | 45 | font-weight: 800; |
46 | 46 | color: #38bdf8; |
47 | | - text-shadow: 0 0 15px rgba(56, 189, 248, 0.7); |
48 | | - margin-bottom: 10px; |
| 47 | + text-shadow: 0 0 12px rgba(56, 189, 248, 0.6); |
| 48 | + margin-bottom: 12px; |
49 | 49 | animation: fadeIn 2s ease-out; |
50 | 50 | } |
51 | 51 |
|
52 | 52 | /* Subtitle */ |
53 | 53 | p { |
54 | | - font-size: 1.1rem; |
| 54 | + font-size: 1.2rem; |
55 | 55 | color: #cbd5e1; |
56 | | - margin-bottom: 50px; |
57 | | - animation: fadeIn 2s ease-out; |
| 56 | + margin-bottom: 60px; |
| 57 | + animation: fadeIn 2.2s ease-out; |
58 | 58 | } |
59 | 59 |
|
60 | | - /* Footer */ |
61 | 60 | footer { |
62 | 61 | position: absolute; |
63 | 62 | bottom: 20px; |
64 | 63 | font-size: 0.9rem; |
65 | 64 | color: #94a3b8; |
66 | 65 | } |
67 | 66 |
|
68 | | - /* Animations */ |
69 | 67 | @keyframes zoomIn { |
70 | | - 0% { |
71 | | - transform: scale(0.6); |
72 | | - opacity: 0; |
73 | | - } |
74 | | - 100% { |
75 | | - transform: scale(1); |
76 | | - opacity: 1; |
77 | | - } |
| 68 | + 0% { transform: scale(0.6); opacity: 0; } |
| 69 | + 100% { transform: scale(1); opacity: 1; } |
78 | 70 | } |
79 | 71 |
|
80 | 72 | @keyframes fadeIn { |
81 | | - 0% { |
82 | | - opacity: 0; |
83 | | - transform: translateY(20px); |
84 | | - } |
85 | | - 100% { |
86 | | - opacity: 1; |
87 | | - transform: translateY(0); |
88 | | - } |
| 73 | + 0% { opacity: 0; transform: translateY(20px); } |
| 74 | + 100% { opacity: 1; transform: translateY(0); } |
89 | 75 | } |
90 | 76 |
|
91 | | - /* Particle Background */ |
| 77 | + /* Particles */ |
92 | 78 | .particles { |
93 | 79 | position: absolute; |
94 | 80 | top: 0; left: 0; |
95 | 81 | width: 100%; |
96 | 82 | height: 100%; |
97 | 83 | z-index: -1; |
98 | | - overflow: hidden; |
| 84 | + pointer-events: none; |
99 | 85 | } |
100 | 86 |
|
101 | 87 | .particle { |
102 | 88 | position: absolute; |
103 | | - background: rgba(255, 255, 255, 0.1); |
| 89 | + background: rgba(255, 255, 255, 0.05); |
104 | 90 | border-radius: 50%; |
105 | 91 | animation: float 10s infinite ease-in-out; |
106 | 92 | } |
107 | 93 |
|
108 | 94 | @keyframes float { |
109 | | - 0% { |
110 | | - transform: translateY(0) scale(1); |
111 | | - opacity: 0.4; |
112 | | - } |
113 | | - 50% { |
114 | | - transform: translateY(-50vh) scale(1.3); |
115 | | - opacity: 0.8; |
116 | | - } |
117 | | - 100% { |
118 | | - transform: translateY(0) scale(1); |
119 | | - opacity: 0.4; |
120 | | - } |
| 95 | + 0% { transform: translateY(0) scale(1); opacity: 0.3; } |
| 96 | + 50% { transform: translateY(-50vh) scale(1.2); opacity: 0.7; } |
| 97 | + 100% { transform: translateY(0) scale(1); opacity: 0.3; } |
121 | 98 | } |
122 | 99 | </style> |
123 | 100 | </head> |
124 | 101 |
|
125 | 102 | <body> |
126 | | - <!-- Particle Background --> |
127 | 103 | <div class="particles" id="particles-container"></div> |
128 | 104 |
|
129 | | - <!-- Logo --> |
130 | 105 | <img src="Vibrant-Summer-Slams-DSA25-Logo.png" alt="Event Logo" class="logo"> |
131 | 106 |
|
132 | | - <!-- Coming Soon --> |
133 | 107 | <h1>Coming Soon</h1> |
134 | 108 | <p>Stay tuned — Something exciting is on the way!</p> |
135 | 109 |
|
136 | | - <!-- Footer --> |
137 | | - <footer>© 2025 Your Event Name. All rights reserved.</footer> |
| 110 | + <footer>© 2025 Summer Slams DSA25. All rights reserved.</footer> |
138 | 111 |
|
139 | 112 | <script> |
140 | | - // Generate floating particles dynamically |
141 | 113 | const particleContainer = document.getElementById("particles-container"); |
142 | 114 |
|
143 | | - for (let i = 0; i < 25; i++) { |
| 115 | + for (let i = 0; i < 30; i++) { |
144 | 116 | const p = document.createElement("div"); |
145 | 117 | p.classList.add("particle"); |
146 | | - const size = Math.random() * 10 + 4; |
| 118 | + const size = Math.random() * 12 + 5; |
147 | 119 | p.style.width = `${size}px`; |
148 | 120 | p.style.height = `${size}px`; |
149 | 121 | p.style.left = `${Math.random() * 100}%`; |
150 | 122 | p.style.top = `${Math.random() * 100}%`; |
151 | | - p.style.animationDuration = `${5 + Math.random() * 10}s`; |
| 123 | + p.style.animationDuration = `${5 + Math.random() * 8}s`; |
152 | 124 | particleContainer.appendChild(p); |
153 | 125 | } |
154 | 126 | </script> |
|
0 commit comments