```
---
### Step 2: `public/css/style.css` (рдбрд┐рдЬрд╝рд╛рдЗрди рдХрд╛ рдЬрд╛рджреВ)
рдпрд╣ CSS рдкреНрд░реАрд▓реЛрдбрд░ рдХреЛ "Animation" рджреЗрдЧрд╛ рдФрд░ рд╣реЗрдбрд░ рдХреЛ "рдХрд╛рдВрдЪ" рдЬреИрд╕рд╛ (Glassmorphism) рдмрдирд╛рдПрдЧрд╛ред
**рдкреБрд░рд╛рдирд╛ рдХреЛрдб рд╣рдЯрд╛рдУ рдФрд░ рдпрд╣ рдбрд╛рд▓реЛ:**
```css
/* --- 1. FONTS & RESET --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Poppins', sans-serif;
background: #f3f4f6;
color: #333;
overflow-x: hidden; /* Side scroll rokne ke liye */
}
/* --- 2. EXCLUSIVE PRELOADER CSS --- */
#preloader {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background: #0f172a; /* Royal Black/Blue */
z-index: 9999; /* Sabse upar */
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.8s ease;
}
.loader-content { text-align: center; color: white; }
.crown {
font-size: 4rem;
animation: float 2s infinite ease-in-out;
margin-bottom: 10px;
}
.loader-content h2 {
font-family: 'Orbitron', sans-serif; /* Futuristic Font */
letter-spacing: 2px;
font-size: 1.5rem;
background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728); /* Gold Gradient */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 20px;
}
.loading-bar {
width: 0;
height: 4px;
background: #d4af37; /* Gold */
animation: loadBar 2s ease-in-out forwards;
border-radius: 2px;
margin: 0 auto;
}
/* --- 3. PREMIUM GLASS HEADER CSS --- */
.glass-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 5%;
position: sticky;
top: 0;
z-index: 1000;
/* The Glass Effect */
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}
.logo-container { display: flex; align-items: center; gap: 10px; }
.logo-img { height: 40px; }
.logo-text {
text-decoration: none;
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
font-family: 'Poppins', sans-serif;
}
.highlight { color: #2563eb; /* Royal Blue */ }
.nav-menu ul {
list-style: none;
display: flex;
gap: 30px;
}
.nav-link {
text-decoration: none;
color: #333;
font-weight: 600;
font-size: 1rem;
position: relative;
transition: 0.3s;
}
/* Link ke niche line chalegi */
.nav-link::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -5px;
left: 0;
background-color: #2563eb;
transition: width 0.3s;
}
.nav-link:hover::after { width: 100%; }
.nav-link:hover { color: #2563eb; }
.menu-toggle { display: none; font-size: 1.5rem; cursor: pointer; }
/* --- 4. ANIMATIONS --- */
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes loadBar {
0% { width: 0; }
50% { width: 50%; }
100% { width: 200px; }
}
/* Mobile Responsive */
@media (max-width: 768px) {
.nav-menu { display: none; } /* Mobile ke liye simple rakha hai abhi */
.menu-toggle { display: block; }
.glass-header { padding: 15px 20px; }
}
.container, .main-container {
padding: 100px 20px 50px; /* Header ke niche na chupe */
min-height: 80vh;
text-align: center;
}
Welcome to Sahil's World
Class Topper | Badminton Player | Navodayan
Namaste! I am Sahil Yadav. Ye meri official website hai.
Yahan sirf exclusive logon ki entry hai.
Mere Baare Me Jano
