1<!DOCTYPE html> 2<html lang="en" class="scroll-smooth"> 3<head> 4 <meta charset="UTF-8"> 5<!-- This site is hosted on Netlify. Anyone can build and deploy a site 6 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=343d7545-1eae-4c44-a3f3-4c02222263b7 7 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 <title>SoulMC | Public Minecraft Server</title> 10
10<script src="https://cdn.tailwindcss.com"></script>
10 11
11<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
11 12 <link rel="preconnect" href="https://fonts.googleapis.com"> 13 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 14 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet"> 15 <style> 16 :root { 17 --bg: #0a0612; 18 --accent: #a855f7; 19 --accent-secondary: #7c3aed; 20 --card: #140b22; 21 } 22 23 body { 24 font-family: 'Inter', sans-serif; 25 background-color: var(--bg); 26 color: white; 27 margin: 0; 28 overflow-x: hidden; 29 } 30 31 .font-serif { 32 font-family: 'Playfair Display', serif; 33 } 34 35 /* Reveal Animation Styles */ 36 .reveal { 37 opacity: 0; 38 transform: translateY(30px); 39 transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1); 40 } 41 42 .reveal.active { 43 opacity: 1; 44 transform: translateY(0); 45 } 46 47 /* Custom Floating Animations */ 48 @keyframes float-hand-left { 49 0%, 100% { transform: translateY(0) rotate(0); } 50 50% { transform: translateY(-20px) rotate(2deg); } 51 } 52 53 @keyframes float-hand-right { 54 0%, 100% { transform: translateY(0) rotate(0); } 55 50% { transform: translateY(20px) rotate(-2deg); } 56 } 57 58 .animate-float-left { 59 animation: float-hand-left 12s ease-in-out infinite; 60 } 61 62 .animate-float-right { 63 animation: float-hand-right 14s ease-in-out infinite; 64 } 65 66 /* Noise Texture Overlay */ 67 .noise-overlay { 68 position: fixed; 69 inset: 0; 70 z-index: 50; 71 pointer-events: none; 72 opacity: 0.05; 73 mix-blend-mode: overlay; 74 background-image: url("https://grainy-gradients.vercel.app/noise.svg"); 75 } 76 77 /* Parallax Container Effect */ 78 .parallax-card-up { 79 transform: translateY(var(--scroll-offset-up, 0px)); 80 } 81 82 .parallax-card-down { 83 transform: translateY(var(--scroll-offset-down, 0px)); 84 } 85 </style> 86</head> 87<body> 88 <div id="top" class="min-h-screen bg-[#0a0612] selection:bg-[#a855f7] selection:text-white"> 89 <!-- Global Noise Overlay --> 90 <div class="noise-overlay"></div> 91 92 <!-- Navigation --> 93 <nav id="main-nav" class="fixed top-0 left-0 right-0 z-50 transition-all duration-500 py-8"> 94 <div class="container mx-auto px-6 flex items-center justify-between"> 95 <a href="#top" id="nav-logo-link" class="text-2xl font-bold tracking-tighter font-serif"> 96 <span style="background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #7c3aed 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Soul MC.</span> 97 </a> 98 99 <div class="hidden md:flex items-center space-x-8"> 100 <a href="#mission" id="nav-mission-link" class="text-sm text-gray-400 hover:text-[#c084fc] transition-colors duration-300">Mission</a> 101 <a href="#features" id="nav-features-link" class="text-sm text-gray-400 hover:text-[#c084fc] transition-colors duration-300">Features We Provide</a> 102 <a href="#contact" id="nav-contact-link" class="text-sm text-gray-400 hover:text-[#c084fc] transition-colors duration-300">Contact Us</a> 103 </div> 104 105 <a href="#contact" id="nav-cta-link" class="inline-flex items-center justify-center px-8 py-3 rounded-full text-base font-medium bg-gradient-to-r from-[#a855f7] to-[#7c3aed] text-white hover:scale-105 hover:shadow-[0_0_30px_rgba(168,85,247,0.5)] transition-all duration-300"> 106 Connect Now 107 </a> 108 </div> 109 </nav> 110 111 <!-- Hero Section --> 112 <section class="relative min-h-screen flex items-center justify-center overflow-hidden pt-32 pb-20 bg-[#0a0612]">
113 <!-- Background Atmosphere --> 114 <div class="absolute inset-0 z-0 pointer-events-none select-none"> 115 <div class="absolute top-0 left-0 w-full h-full opacity-60 mix-blend-screen"> 116 <img src="https://media.discordapp.net/attachments/1521411734978433145/1521798983641464883/content.png?ex=6a46253f&is=6a44d3bf&hm=81fc517d66e3b333483d85fb5b04fccfe2e16db7d81d966a56aa521e99bf3310&=&format=webp&quality=lossless&width=472&height=315" alt="Atmosphere" class="w-full h-full object-cover object-center opacity-80"> 117 </div> 118 <div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-[#0a0612] z-10"></div> 119 <div class="absolute top-1/4 left-1/4 w-96 h-96 bg-[#a855f7]/20 rounded-full blur-3xl"></div> 120 <div class="absolute bottom-1/4 right-1/4 w-96 h-96 bg-[#7c3aed]/20 rounded-full blur-3xl"></div> 121 </div> 122 123 <!-- Floating Surrealist Elements --> 124 <div class="absolute -left-[10%] top-[-10%] md:left-[-5%] md:top-[-15%] w-[50vw] md:w-[40vw] max-w-[800px] z-10 pointer-events-none mix-blend-hard-light opacity-80 animate-float-left"> 125 <img src="https://media.discordapp.net/attachments/1521411734978433145/1521801598861578250/content.png?ex=6a4627ae&is=6a44d62e&hm=662f206e990d873f001cb8f708f0fd4c2ae65505e8fe927ecf42de3d9ae0e3e0&=&format=webp&quality=lossless&width=796&height=531" alt="Hand Reaching" class="w-full h-auto object-contain"> 126 </div> 127 128 <div class="absolute -right-[50%] bottom-[-40%] md:right-[-5%] md:bottom-[-5%] w-[45vw] md:w-[35vw] max-w-[700px] z-10 pointer-events-none mix-blend-hard-light opacity-80 animate-float-right"> 129 <img src="https://media.discordapp.net/attachments/1521411734978433145/1521802897942122699/content.png?ex=6a4628e4&is=6a44d764&hm=443368ceb19ea6a7573b0c931db5edb9880be27eb1906948399d5fe4c55d0e00&=&format=webp&quality=lossless&width=796&height=531" alt="Hand Receiving" class="w-full h-auto object-contain"> 130 </div> 131 132 <!-- Hero Content --> 133 <div class="container mx-auto px-6 relative z-20 text-center flex flex-col items-center justify-center h-full"> 134 <div id="hero-content-wrapper" class="max-w-4xl mx-auto"> 135 <div class="reveal"> 136 <h1 class="text-5xl md:text-7xl font-medium leading-[1.1] tracking-tighter mb-6 font-serif"> 137 <span style="background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #7c3aed 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Soul MC.</span> <br /> 138 <span class="italic font-light text-white/80"> Minecraft Public Server</span> 139 </h1> 140 </div> 141 142 <div class="reveal" style="transition-delay: 200ms;"> 143 <p class="text-base md:text-lg text-white/70 max-w-lg mx-auto mb-16 font-light tracking-wide leading-relaxed"> 144 A Minecraft Public Server where players can connect and play together. 145 </p> 146 </div> 147 148 <div class="reveal flex flex-col items-center gap-6" style="transition-delay: 400ms;"> 149 <div class="relative group cursor-pointer"> 150 <div class="absolute inset-0 bg-[#a855f7]/20 blur-xl rounded-full opacity-0 group-hover:opacity-50 transition-opacity duration-500"></div> 151 <div class="relative border border-[#a855f7]/30 bg-[#a855f7]/10 backdrop-blur-sm px-6 py-2 rounded-full flex items-center gap-3 text-xs md:text-sm text-[#c084fc] uppercase tracking-widest hover:bg-[#a855f7]/20 transition-colors duration-300"> 152 <span>Connect Now</span> 153 </div> 154 </div> 155 156 <div class="flex items-center gap-4 text-[10px] md:text-xs text-white/40 uppercase tracking-widest mt-8 font-mono">
157 <span id="current-time">11:11 PM</span> 158 <span class="w-px h-3 bg-white/20"></span> 159 <span>Pakistan Timezone</span> 160 </div> 161 </div> 162 </div> 163 </div> 164 </section> 165 166 <!-- Mission Section --> 167 <section id="mission" class="py-32 relative"> 168 <div class="container mx-auto px-6"> 169 <div class="max-w-4xl mx-auto text-center reveal"> 170 <h2 class="text-3xl md:text-5xl lg:text-6xl leading-tight text-white/90 mb-12 font-serif"> 171 <span style="background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #7c3aed 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Mission</span> 172 </h2> 173 <p class="text-xl md:text-2xl text-gray-500 leading-relaxed font-light"> 174 To provide a Minecraft Public Server where players can connect and play together. 175 </p> 176 </div> 177 178 <!-- Logo Grid --> 179 <div class="mt-32 grid grid-cols-2 md:grid-cols-4 gap-8 items-center justify-items-center opacity-40 hover:opacity-100 transition-all duration-500"> 180 <div class="reveal font-bold text-xl tracking-widest text-[#c084fc]">LIFESTEAL</div> 181 <div class="reveal font-bold text-xl tracking-widest" style="transition-delay: 100ms;">24/7</div> 182 <div class="reveal font-bold text-xl tracking-widest text-[#c084fc]" style="transition-delay: 200ms;">Free</div> 183 <div class="reveal font-bold text-xl tracking-widest" style="transition-delay: 300ms;">Public</div> 184 </div> 185 </div> 186 </section> 187 188 <!-- Features Section --> 189 <section id="features" class="py-40 relative overflow-hidden"> 190 <div class="container mx-auto px-6 relative z-10"> 191 <div class="reveal mb-32"> 192 <h2 class="text-5xl md:text-7xl text-center font-serif"> 193 Features <br /> 194 <span class="italic" style="background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #7c3aed 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">We Provide</span> 195 </h2> 196 </div> 197 198 <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-5xl mx-auto"> 199 <!-- Card 1 - Purple Gradient --> 200 <div class="parallax-card-down"> 201 <div class="reveal bg-gradient-to-br from-[#a855f7] to-[#7c3aed] rounded-3xl p-8 md:p-12 aspect-[4/5] flex flex-col justify-between shadow-2xl hover:shadow-[0_20px_50px_rgba(168,85,247,0.3)] transition-all duration-500 group cursor-pointer"> 202 <div class="flex justify-between items-start"> 203 <div class="w-12 h-12 rounded-full bg-black/10 flex items-center justify-center group-hover:rotate-45 transition-transform duration-500"> 204 <iconify-icon icon="lucide:star" class="text-white text-2xl"></iconify-icon> 205 </div> 206 <span class="text-white font-medium text-sm border border-white/20 px-3 py-1 rounded-full">01</span> 207 </div> 208 209 <div> 210 <h3 class="text-4xl md:text-5xl text-white mb-4 leading-none tracking-tight font-serif"> 211 24/7 <br />Support 212 </h3> 213 <p class="text-white/80 text-lg leading-snug"> 214 We are always available to help you with any questions or issues you may have. 215 </p> 216 </div> 217 218 <div class="w-full h-px bg-white/10 mt-8"></div> 219 </div> 220 </div> 221 222 <!-- Card 2 - Dark Purple --> 223 <div class="parallax-card-up md:mt-24"> 224 <div class="reveal bg-[#1f1235] border border-[#a855f7]/20 rounded-3xl p-8 md:p-12 aspect-[4/5] flex flex-col justify-between shadow-2xl group cursor-pointer hover:border-[#a855f7]/50 transition-all duration-500" style="transition-delay: 150ms;"> 225 <div class="flex justify-between items-start"> 226 <div class="w-12 h-12 rounded-full bg-[#a85
2265f7]/10 flex items-center justify-center group-hover:scale-110 transition-transform duration-500"> 227 <iconify-icon icon="lucide:arrow-right" class="text-[#a855f7] text-2xl -rotate-45"></iconify-icon> 228 </div> 229 <span class="text-[#c084fc] font-medium text-sm border border-[#a855f7]/20 px-3 py-1 rounded-full">02</span> 230 </div> 231 232 <div> 233 <h3 class="text-4xl md:text-5xl text-white mb-4 leading-none tracking-tight font-serif"> 234 Best <br />AntiCheat 235 </h3> 236 <p class="text-gray-400 text-lg leading-snug"> 237 We use the latest anti-cheat software to protect your server from cheaters. 238 </p> 239 </div> 240 241 <div class="w-full h-px bg-white/10 mt-8"></div> 242 </div> 243 </div> 244 </div> 245 </div> 246 247 <!-- Background Pattern - Purple --> 248 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[120%] h-[120%] opacity-10 pointer-events-none" 249 style="background-image: radial-gradient(circle, #a855f7 1px, transparent 1px); background-size: 40px 40px;"> 250 </div> 251 </section> 252 253 <!-- Contact Section --> 254 <section id="contact" class="py-32 relative"> 255 <div class="container mx-auto px-6"> 256 <div class="max-w-4xl mx-auto text-center reveal"> 257 <h2 class="text-3xl md:text-5xl lg:text-6xl leading-tight text-white/90 mb-12 font-serif"> 258 <span style="background: linear-gradient(135deg, #c084fc 0%, #a855f7 50%, #7c3aed 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Contact Us</span> 259 </h2> 260 <p class="text-xl md:text-2xl text-gray-500 leading-relaxed font-light mb-12"> 261 Join our Discord server or follow us on social media! 262 </p> 263 <div class="flex flex-wrap justify-center gap-6"> 264 <a href="#" class="inline-flex items-center justify-center px-8 py-4 rounded-full text-lg font-medium bg-gradient-to-r from-[#a855f7] to-[#7c3aed] text-white hover:scale-105 hover:shadow-[0_0_30px_rgba(168,85,247,0.5)] transition-all duration-300"> 265 <iconify-icon icon="mdi:discord" class="mr-2 text-2xl"></iconify-icon> 266 Discord 267 </a> 268 <a href="#" class="inline-flex items-center justify-center px-8 py-4 rounded-full text-lg font-medium border border-[#a855f7]/30 bg-[#a855f7]/10 text-[#c084fc] hover:bg-[#a855f7]/20 transition-all duration-300"> 269 <iconify-icon icon="mdi:twitter" class="mr-2 text-2xl"></iconify-icon> 270 Twitter 271 </a> 272 </div> 273 </div> 274 </div> 275 </section> 276 277 <!-- Footer --> 278 <footer class="py-20 border-t border-[#a855f7]/20 bg-[#0a0612] relative overflow-hidden"> 279 <div class="container mx-auto px-6 relative z-10"> 280 <div class="flex flex-col md:flex-row justify-between items-start md:items-end gap-12"> 281 <div class="w-full md:w-auto"> 282 <h2 class="text-[10vw] leading-[0.8] tracking-tighter text-[#a855f7]/10 font-bold select-none pointer-events-none"> 283 SOULMC 284 </h2> 285 </div> 286 287 <div class="flex flex-col gap-8 text-right"> 288 <div class="flex flex-col gap-4 text-gray-400"> 289 <a href="#" id="footer-discord-link" class="hover:text-[#c084fc] transition-colors">Discord</a> 290 <a href="#" id="footer-tw-link" class="hover:text-[#c084fc] transition-colors">Twitter</a> 291 </div> 292 <p class="text-sm text-gray-600">© 2024 SoulMC.sbs All rights reserved.</p> 293 </div> 294 </div> 295 </div> 296 </footer> 297 </div> 298 299
299<script> 300 // 1. Reveal Elements on Scroll using Intersection Observer 301 const revealObserver = new IntersectionObserver((entries) => { 302 entries.forEach(entry => { 303 if (entry.isIntersecting) { 304 entry.target.classList.add('active'); 305 } 306 }); 307 }, { 308 threshold: 0.1, 309 rootMargin: '0px 0px -50px 0px' 310 }); 311 312 document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el)); 313 314 // 2. Navbar Scroll Effect 315 const nav = document.getElementById('main-nav'); 316 window.addEventListener('scroll', () => { 317 if (window.scrollY > 50) { 318 nav.classList.add('py-4', 'bg-[#0a0612]/80', 'backdrop-blur-md', 'border-b', 'border-[#a855f7]/20'); 319 nav.classList.remove('py-8', 'bg-transparent'); 320 } else { 321 nav.classList.remove('py-4', 'bg-[#0a0612]/80', 'backdrop-blur-md', 'border-b', 'border-[#a855f7]/20'); 322 nav.classList.add('py-8', 'bg-transparent'); 323 } 324 }); 325 326 // 3. Simple Parallax Logic 327 window.addEventListener('scroll', () => { 328 const scrolled = window.scrollY; 329 // Move cards in opposite directions slightly for depth 330 document.querySelectorAll('.parallax-card-up').forEach(el => { 331 el.style.setProperty('--scroll-offset-up', `${scrolled * -0.05}px`); 332 }); 333 document.querySelectorAll('.parallax-card-down').forEach(el => { 334 el.style.setProperty('--scroll-offset-down', `${scrolled * 0.05}px`); 335 }); 336 }); 337 338 // 4. Update Time Clock 339 function updateTime() { 340 const clockEl = document.getElementById('current-time'); 341 const now = new Date(); 342 let hours = now.getHours(); 343 const minutes = now.getMinutes().toString().padStart(2, '0'); 344 const ampm = hours >= 12 ? 'PM' : 'AM'; 345 hours = hours % 12; 346 hours = hours ? hours : 12; // the hour '0' should be '12' 347 clockEl.textContent = `${hours}:${minutes} ${ampm}`; 348 } 349 setInterval(updateTime, 60000); 350 updateTime(); 351 352 // 5. Hero Content Parallax 353 const heroWrapper = document.getElementById('hero-content-wrapper'); 354 window.addEventListener('scroll', () => { 355 const scrolled = window.scrollY; 356 if (scrolled < 1000) { 357 heroWrapper.style.transform = `translateY(${scrolled * 0.4}px)`; 358 heroWrapper.style.opacity = Math.max(0, 1 - scrolled / 600); 359 } 360 }); 361 </script>
361 362</body> 363</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.