Skip to content

Commit 0508add

Browse files
HarshYadav152HarshYadav152
authored
Add initial HTML structure and styles for landing page
0 parents  commit 0508add

1 file changed

Lines changed: 358 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 358 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,358 @@
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>The Rumbling Code</title>
7+
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700;900&display=swap" rel="stylesheet">
8+
<style>
9+
* {
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
font-family: 'Poppins', sans-serif;
14+
}
15+
16+
body {
17+
height: 100vh;
18+
width: 100vw;
19+
overflow: hidden;
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
color: #fff;
24+
background-color: black;
25+
position: relative;
26+
}
27+
28+
.bg-container {
29+
position: absolute;
30+
inset: 0;
31+
overflow: hidden;
32+
z-index: 0;
33+
}
34+
35+
.bg-image {
36+
position: absolute;
37+
inset: 0;
38+
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
39+
url('https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80') no-repeat center center;
40+
background-size: cover;
41+
transform: scale(1.1);
42+
opacity: 0;
43+
animation: fadeInBg 1s ease-in-out 0.5s forwards,
44+
growBg 8s ease-in-out 1s forwards;
45+
}
46+
47+
.overlay {
48+
position: absolute;
49+
inset: 0;
50+
background: rgba(0, 0, 0, 0.7);
51+
z-index: 1;
52+
opacity: 0;
53+
animation: fadeIn 2s ease-in-out 1s forwards;
54+
}
55+
56+
@keyframes fadeIn {
57+
from { opacity: 0; }
58+
to { opacity: 1; }
59+
}
60+
61+
@keyframes fadeInBg {
62+
from { opacity: 0; }
63+
to { opacity: 1; }
64+
}
65+
66+
@keyframes growBg {
67+
0% { transform: scale(1.1); }
68+
100% { transform: scale(1.3); }
69+
}
70+
71+
.content {
72+
position: relative;
73+
z-index: 2;
74+
opacity: 0;
75+
transform: scale(0.8);
76+
animation: appearText 0.6s ease-out 4s forwards,
77+
rumble 0.5s ease-in-out 4.3s;
78+
text-align: center;
79+
max-width: 90%;
80+
}
81+
82+
@keyframes appearText {
83+
from {
84+
opacity: 0;
85+
transform: scale(0.8);
86+
}
87+
to {
88+
opacity: 1;
89+
transform: scale(1);
90+
}
91+
}
92+
93+
h1 {
94+
font-size: 5rem;
95+
letter-spacing: 6px;
96+
text-transform: uppercase;
97+
color: #ff2b2b;
98+
animation: glitch 1s infinite 4.5s;
99+
margin-bottom: 1rem;
100+
text-shadow: 0 0 10px rgba(255, 43, 43, 0.5);
101+
}
102+
103+
@keyframes glitch {
104+
0% { text-shadow: 2px 2px #ff0000, -2px -2px #00fff9; }
105+
20% { text-shadow: -2px 0 #ff0000, 2px -2px #00fff9; }
106+
40% { text-shadow: 2px 2px #ff0000, -2px 2px #00fff9; }
107+
60% { text-shadow: -2px -2px #ff0000, 2px 0 #00fff9; }
108+
80% { text-shadow: 2px -2px #ff0000, -2px 2px #00fff9; }
109+
100% { text-shadow: 2px 2px #ff0000, -2px -2px #00fff9; }
110+
}
111+
112+
@keyframes rumble {
113+
0%, 100% { transform: translate(0, 0); }
114+
20% { transform: translate(-5px, -5px); }
115+
40% { transform: translate(5px, 5px); }
116+
60% { transform: translate(-3px, -3px); }
117+
80% { transform: translate(3px, 3px); }
118+
}
119+
120+
/* Subtle fog overlay for dynamic motion */
121+
.fog {
122+
position: absolute;
123+
inset: 0;
124+
background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 70%);
125+
z-index: 1;
126+
opacity: 0;
127+
animation: fadeIn 2s ease-in-out 3s forwards, fogMove 15s infinite linear 3s;
128+
}
129+
130+
@keyframes fogMove {
131+
0% { transform: translateX(0); }
132+
50% { transform: translateX(30px); }
133+
100% { transform: translateX(0); }
134+
}
135+
136+
.subtitle {
137+
font-size: 1.5rem;
138+
margin-bottom: 3rem;
139+
opacity: 0;
140+
animation: fadeIn 1s ease-in-out 4.5s forwards;
141+
color: #ccc;
142+
}
143+
144+
.code-particles {
145+
position: absolute;
146+
top: 0;
147+
left: 0;
148+
width: 100%;
149+
height: 100%;
150+
z-index: 1;
151+
pointer-events: none;
152+
}
153+
154+
.code-particle {
155+
position: absolute;
156+
color: rgba(0, 255, 249, 0.7);
157+
font-family: monospace;
158+
font-size: 14px;
159+
opacity: 0;
160+
animation: fall linear infinite;
161+
}
162+
163+
.name-particle {
164+
position: absolute;
165+
color: rgba(255, 43, 43, 0.8);
166+
font-family: 'Poppins', sans-serif;
167+
font-weight: bold;
168+
font-size: 16px;
169+
opacity: 0;
170+
animation: fall linear infinite;
171+
text-shadow: 0 0 5px rgba(255, 43, 43, 0.5);
172+
}
173+
174+
@keyframes fall {
175+
0% {
176+
transform: translateY(-100px);
177+
opacity: 0;
178+
}
179+
10% {
180+
opacity: 1;
181+
}
182+
90% {
183+
opacity: 1;
184+
}
185+
100% {
186+
transform: translateY(100vh);
187+
opacity: 0;
188+
}
189+
}
190+
191+
.floating-elements {
192+
position: absolute;
193+
top: 0;
194+
left: 0;
195+
width: 100%;
196+
height: 100%;
197+
z-index: 1;
198+
pointer-events: none;
199+
}
200+
201+
.floating-element {
202+
position: absolute;
203+
width: 30px;
204+
height: 30px;
205+
border-radius: 50%;
206+
background: rgba(255, 43, 43, 0.2);
207+
animation: float 15s infinite ease-in-out;
208+
}
209+
210+
@keyframes float {
211+
0%, 100% {
212+
transform: translate(0, 0) rotate(0deg);
213+
}
214+
25% {
215+
transform: translate(20px, 40px) rotate(90deg);
216+
}
217+
50% {
218+
transform: translate(-30px, 60px) rotate(180deg);
219+
}
220+
75% {
221+
transform: translate(10px, 20px) rotate(270deg);
222+
}
223+
}
224+
225+
.floating-element:nth-child(2) {
226+
width: 20px;
227+
height: 20px;
228+
background: rgba(0, 255, 249, 0.2);
229+
animation-delay: -5s;
230+
}
231+
232+
.floating-element:nth-child(3) {
233+
width: 40px;
234+
height: 40px;
235+
background: rgba(255, 255, 255, 0.1);
236+
animation-delay: -10s;
237+
}
238+
239+
.pulse {
240+
position: absolute;
241+
width: 100%;
242+
height: 100%;
243+
border-radius: 50%;
244+
background: rgba(255, 43, 43, 0.1);
245+
animation: pulse 3s infinite ease-in-out;
246+
z-index: -1;
247+
}
248+
249+
@keyframes pulse {
250+
0% {
251+
transform: scale(0.8);
252+
opacity: 0.7;
253+
}
254+
50% {
255+
transform: scale(1.2);
256+
opacity: 0.3;
257+
}
258+
100% {
259+
transform: scale(0.8);
260+
opacity: 0.7;
261+
}
262+
}
263+
264+
@media (max-width: 768px) {
265+
h1 {
266+
font-size: 3rem;
267+
letter-spacing: 3px;
268+
}
269+
.subtitle {
270+
font-size: 1.2rem;
271+
}
272+
}
273+
</style>
274+
</head>
275+
<body>
276+
<div class="bg-container">
277+
<div class="bg-image"></div>
278+
</div>
279+
<div class="overlay"></div>
280+
<div class="fog"></div>
281+
<div class="code-particles" id="codeParticles"></div>
282+
<div class="floating-elements">
283+
<div class="floating-element"></div>
284+
<div class="floating-element"></div>
285+
<div class="floating-element"></div>
286+
</div>
287+
288+
<div class="content">
289+
<h1>The Rumbling Code</h1>
290+
<p class="subtitle">Where algorithms awaken and digital worlds tremble</p>
291+
<div class="pulse"></div>
292+
</div>
293+
294+
<script>
295+
// Team member names
296+
const teamMembers = [
297+
"Harsh Yadav",
298+
"Vinay Kumar",
299+
"Bhoomika Gautam",
300+
"Mohd Asif",
301+
"Chandrbhan Kumar",
302+
"Bhaskar Singh"
303+
];
304+
305+
// Create falling code particles and team member names
306+
function createCodeParticles() {
307+
const container = document.getElementById('codeParticles');
308+
const characters = '01{}[]();<>/\\=+-*%$#@!~`';
309+
310+
// Create regular code particles
311+
for (let i = 0; i < 40; i++) {
312+
const particle = document.createElement('div');
313+
particle.classList.add('code-particle');
314+
particle.textContent = characters.charAt(Math.floor(Math.random() * characters.length));
315+
316+
// Random properties
317+
const left = Math.random() * 100;
318+
const duration = 5 + Math.random() * 10;
319+
const delay = Math.random() * 15;
320+
321+
particle.style.left = `${left}%`;
322+
particle.style.animationDuration = `${duration}s`;
323+
particle.style.animationDelay = `${delay}s`;
324+
325+
container.appendChild(particle);
326+
}
327+
328+
// Create team member name particles
329+
for (let i = 0; i < 20; i++) {
330+
const nameParticle = document.createElement('div');
331+
nameParticle.classList.add('name-particle');
332+
nameParticle.textContent = teamMembers[Math.floor(Math.random() * teamMembers.length)];
333+
334+
// Random properties with slightly different ranges
335+
const left = Math.random() * 100;
336+
const duration = 8 + Math.random() * 12; // Names fall slower
337+
const delay = Math.random() * 20;
338+
339+
nameParticle.style.left = `${left}%`;
340+
nameParticle.style.animationDuration = `${duration}s`;
341+
nameParticle.style.animationDelay = `${delay}s`;
342+
343+
// Add occasional glow effect
344+
if (Math.random() > 0.7) {
345+
nameParticle.style.textShadow = '0 0 10px rgba(255, 43, 43, 0.8)';
346+
}
347+
348+
container.appendChild(nameParticle);
349+
}
350+
}
351+
352+
// Initialize effects
353+
window.onload = function() {
354+
createCodeParticles();
355+
};
356+
</script>
357+
</body>
358+
</html>

0 commit comments

Comments
 (0)