Skip to content

Commit 7eb6744

Browse files
VaibhavRawat27VaibhavRawat27
authored
Create summer-slam-dsa.html
1 parent 54a0747 commit 7eb6744

1 file changed

Lines changed: 156 additions & 0 deletions

File tree

‎summer-slam-dsa.html‎

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

0 commit comments

Comments
 (0)