Parallax effects have become a staple in modern web design, adding depth and dynamism to otherwise static pages. These effects create an engaging user experience by making background images move slower than foreground content.
In this article, we will explore ten stunning examples of parallax effects that showcase their versatility and impact. From subtle animations to bold visual statements, these examples will inspire your next web design project.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers, elevate your projects with Subframe's drag-and-drop interface. Its intuitive, responsive canvas ensures pixel-perfect UI every time, making it a favorite among professionals.
Ready to transform your designs? Start for free today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Unlock the power of Subframe and design stunning UIs with ease. From parallax effects to pixel-perfect interfaces, Subframe's drag-and-drop editor makes it all possible.
Experience efficiency and creativity like never before. Start for free and begin creating immediately!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lumen - Ambient Smart Lighting</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; } body { background-color: #f8f8f8; color: #333; overflow-x: hidden; min-height: 100vh; } .container { width: 100%; max-width: 700px; margin: 0 auto; height: 700px; overflow-y: auto; overflow-x: hidden; position: relative; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #ddd #f8f8f8; } .container::-webkit-scrollbar { width: 5px; } .container::-webkit-scrollbar-track { background: transparent; } .container::-webkit-scrollbar-thumb { background-color: #ddd; border-radius: 10px; } .product-section { height: 100vh; min-height: 700px; width: 100%; position: relative; display: flex; align-items: center; justify-content: center; padding: 2rem; overflow: hidden; } .parallax-content { position: relative; z-index: 2; opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; } .visible .parallax-content { opacity: 1; transform: translateY(0); } .product-image { width: 100%; max-width: 360px; height: auto; margin: 0 auto; display: block; transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.15)); transform: scale(0.95); } .visible .product-image { transform: scale(1); } .product-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; letter-spacing: -0.02em; line-height: 1.1; } .product-subtitle { font-size: 1.1rem; font-weight: 400; margin-bottom: 2rem; opacity: 0.85; line-height: 1.5; } .product-details { max-width: 500px; margin: 0 auto; text-align: center; } .feature-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin: 2rem 0; } .feature-item { flex: 0 0 calc(50% - 1.5rem); background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border-radius: 12px; padding: 1.5rem; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06); text-align: left; cursor: pointer; } .feature-item:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); } .feature-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; display: flex; align-items: center; } .feature-icon { margin-right: 0.5rem; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: #fff; border-radius: 50%; } .feature-text { font-size: 0.9rem; line-height: 1.5; color: #555; } .cta-button { background-color: #333; color: white; border: none; padding: 1rem 2rem; font-size: 1rem; font-weight: 600; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; outline: none; margin-top: 1rem; position: relative; overflow: hidden; } .cta-button:hover { background-color: #222; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .cta-button::after { content: ''; position: absolute; width: 30px; height: 100%; top: 0; left: -50px; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent); transform: skewX(-30deg); animation: shine 4s infinite; } @keyframes shine { 0% { left: -50px; } 20% { left: 120%; } 100% { left: 120%; } } /* Section specific styles */ #intro { background: linear-gradient(135deg, #f8f8f8 0%, #eaeaea 100%); } #design { background: linear-gradient(135deg, #fff 0%, #f2f2f2 100%); } #features { background: linear-gradient(135deg, #f5f5f5 0%, #e9e9e9 100%); } #colors { position: relative; overflow: hidden; } .color-picker { display: flex; justify-content: center; gap: 1rem; margin: 2rem 0; } .color-option { width: 40px; height: 40px; border-radius: 50%; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; } .color-option::after { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border: 2px solid transparent; border-radius: 50%; transition: border-color 0.3s ease; } .color-option.active::after { border-color: #333; } .color-option:hover { transform: scale(1.1); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .color-sand { background-color: #D2B48C; } .color-mist { background-color: #E0E5EC; } .color-sunset { background-color: #FF7E5F; } .color-night { background-color: #2C3E50; } .product-color-image { transition: opacity 0.5s ease; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 360px; width: 100%; opacity: 0; } .product-color-image.active { opacity: 1; } .color-bg { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; transition: opacity 1s ease; z-index: 0; } .color-bg.active { opacity: 0.075; } .color-sand-bg { background: radial-gradient(circle at center, #D2B48C 0%, transparent 70%); } .color-mist-bg { background: radial-gradient(circle at center, #E0E5EC 0%, transparent 70%); } .color-sunset-bg { background: radial-gradient(circle at center, #FF7E5F 0%, transparent 70%); } .color-night-bg { background: radial-gradient(circle at center, #2C3E50 0%, transparent 70%); } #specs { background: linear-gradient(135deg, #f8f8f8 0%, #eaeaea 100%); } .specs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin: 2rem 0; } .spec-item { background: white; padding: 1.5rem; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease; } .spec-item:hover { transform: translateY(-5px); } .spec-value { font-size: 1.8rem; font-weight: 700; margin-bottom: 0.5rem; color: #333; } .spec-label { font-size: 0.9rem; color: #777; } /* Progress indicator */ .progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background-color: transparent; z-index: 10; } .progress-bar { height: 100%; background-color: #333; width: 0%; transition: width 0.2s ease-out; } /* Mobile responsiveness */ @media (max-width: 600px) { .product-title { font-size: 2rem; } .product-subtitle { font-size: 1rem; } .feature-item { flex: 0 0 100%; } .specs-grid { grid-template-columns: 1fr; } .product-section { padding: 1.5rem; } } /* Subtle gradient overlays for depth */ .gradient-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.5; z-index: 1; } .mouse-pointer { width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle at center, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 70%); position: fixed; pointer-events: none; mix-blend-mode: overlay; z-index: 9999; opacity: 0; transition: opacity 0.3s ease; transform: translate(-50%, -50%); } </style> </head> <body> <div class="progress-container"> <div class="progress-bar" id="progressBar"></div> </div> <div class="mouse-pointer" id="mousePointer"></div> <div class="container" id="scrollContainer"> <section class="product-section" id="intro"> <div class="gradient-overlay"></div> <div class="parallax-content"> <div class="product-details"> <h1 class="product-title">Lumen<span style="color: #FF7E5F;">.</span></h1> <p class="product-subtitle">The ambient smart lighting that adapts to your life, not the other way around.</p> <img src="https://images.unsplash.com/photo-1566245024852-64c51fc0c9a1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Lumen Smart Light" class="product-image"> <button class="cta-button">Discover Lumen</button> </div> </div> </section> <section class="product-section" id="design"> <div class="gradient-overlay"></div> <div class="parallax-content"> <div class="product-details"> <h2 class="product-title">Thoughtful Design</h2> <p class="product-subtitle">Created with architectural elegance, Lumen enhances any space without dominating it.</p> <div class="feature-list"> <div class="feature-item"> <h3 class="feature-title"> <span class="feature-icon" style="background-color: #FF7E5F;">▲</span> Seamless Integration </h3> <p class="feature-text">Lumen's form follows function with a design that complements modern or traditional spaces.</p> </div> <div class="feature-item"> <h3 class="feature-title"> <span class="feature-icon" style="background-color: #2C3E50;">◆</span> Premium Materials </h3> <p class="feature-text">Crafted from sustainable materials with a ceramic base and hand-blown glass diffuser.</p> </div> </div> </div> </div> </section> <section class="product-section" id="features"> <div class="gradient-overlay"></div> <div class="parallax-content"> <div class="product-details"> <h2 class="product-title">Intelligent Features</h2> <p class="product-subtitle">More than just a light—it's a responsive environment that enhances your wellbeing.</p> <div class="feature-list"> <div class="feature-item"> <h3 class="feature-title"> <span class="feature-icon" style="background-color: #D2B48C;">◉</span> Adaptive Brightness </h3> <p class="feature-text">Lumen's sensors adjust illumination based on ambient light, time of day, and activity patterns.</p> </div> <div class="feature-item"> <h3 class="feature-title"> <span class="feature-icon" style="background-color: #E0E5EC;">◎</span> Circadian Rhythm </h3> <p class="feature-text">Supports natural sleep cycles with warming hues at dusk and energizing light at dawn.</p> </div> <div class="feature-item"> <h3 class="feature-title"> <span class="feature-icon" style="background-color: #FF7E5F;">⬟</span> Gesture Control </h3> <p class="feature-text">Intuitive hand movements adjust settings without voice commands or app interaction.</p> </div> <div class="feature-item"> <h3 class="feature-title"> <span class="feature-icon" style="background-color: #2C3E50;">⬡</span> Energy Efficient </h3> <p class="feature-text">91% more efficient than traditional lighting with predictive usage patterns.</p> </div> </div> </div> </div> </section> <section class="product-section" id="colors"> <div class="gradient-overlay"></div> <div class="color-bg color-sand-bg active" id="colorSandBg"></div> <div class="color-bg color-mist-bg" id="colorMistBg"></div> <div class="color-bg color-sunset-bg" id="colorSunsetBg"></div> <div class="color-bg color-night-bg" id="colorNightBg"></div> <div class="parallax-content"> <div class="product-details"> <h2 class="product-title">Curated Colors</h2> <p class="product-subtitle">Select a finish that resonates with your space and personal aesthetic.</p> <div class="color-picker"> <div class="color-option color-sand active" data-color="sand"></div> <div class="color-option color-mist" data-color="mist"></div> <div class="color-option color-sunset" data-color="sunset"></div> <div class="color-option color-night" data-color="night"></div> </div> <!-- Product images for different colors --> <img src="https://images.unsplash.com/photo-1565814329452-e1efa11c5b89?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Sand color" class="product-color-image active" id="colorSandImg"> <img src="https://images.unsplash.com/photo-1505723469943-94b137bed43d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Mist color" class="product-color-image" id="colorMistImg"> <img src="https://images.unsplash.com/photo-1507146153580-69a1fe6d8aa1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Sunset color" class="product-color-image" id="colorSunsetImg"> <img src="https://images.unsplash.com/photo-1532453288672-3a27e9be9efd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Night color" class="product-color-image" id="colorNightImg"> </div> </div> </section> <section class="product-section" id="specs"> <div class="gradient-overlay"></div> <div class="parallax-content"> <div class="product-details"> <h2 class="product-title">Technical Specs</h2> <p class="product-subtitle">Engineered with precision to deliver outstanding performance and longevity.</p> <div class="specs-grid"> <div class="spec-item"> <div class="spec-value">50,000</div> <div class="spec-label">Hours Lifespan</div> </div> <div class="spec-item"> <div class="spec-value">1600</div> <div class="spec-label">Lumens Output</div> </div> <div class="spec-item"> <div class="spec-value">9W</div> <div class="spec-label">Power Consumption</div> </div> <div class="spec-item"> <div class="spec-value">2700-6500K</div> <div class="spec-label">Color Temperature Range</div> </div> </div> <button class="cta-button">Pre-order Now</button> </div> </div> </section> </div> <script> document.addEventListener('DOMContentLoaded', function() { const container = document.getElementById('scrollContainer'); const progressBar = document.getElementById('progressBar'); const sections = document.querySelectorAll('.product-section'); const colorOptions = document.querySelectorAll('.color-option'); const mousePointer = document.getElementById('mousePointer'); // Initialize first section as visible sections[0].classList.add('visible'); // Mouse follower effect document.addEventListener('mousemove', function(e) { mousePointer.style.opacity = '1'; mousePointer.style.left = e.clientX + 'px'; mousePointer.style.top = e.clientY + 'px'; }); document.addEventListener('mouseleave', function() { mousePointer.style.opacity = '0'; }); // Parallax reveal on scroll function checkVisibility() { const containerHeight = container.offsetHeight; const containerScrollTop = container.scrollTop; const containerScrollBottom = containerScrollTop + containerHeight; sections.forEach(section => { const sectionTop = section.offsetTop; const sectionHeight = section.offsetHeight; const sectionBottom = sectionTop + sectionHeight; // Check if section is visible in viewport if ( (sectionTop <= containerScrollBottom && sectionTop >= containerScrollTop) || (sectionBottom <= containerScrollBottom && sectionBottom >= containerScrollTop) || (sectionTop <= containerScrollTop && sectionBottom >= containerScrollBottom) ) { section.classList.add('visible'); } else { section.classList.remove('visible'); } }); // Update progress bar const scrollPercent = (containerScrollTop / (container.scrollHeight - containerHeight)) * 100; progressBar.style.width = scrollPercent + '%'; } container.addEventListener('scroll', checkVisibility); // Color selection functionality colorOptions.forEach(option => { option.addEventListener('click', function() { const color = this.getAttribute('data-color'); // Update active state on color options colorOptions.forEach(opt => opt.classList.remove('active')); this.classList.add('active'); // Update product image document.querySelectorAll('.product-color-image').forEach(img => { img.classList.remove('active'); }); document.getElementById(`color${color.charAt(0).toUpperCase() + color.slice(1)}Img`).classList.add('active'); // Update background glow document.querySelectorAll('.color-bg').forEach(bg => { bg.classList.remove('active'); }); document.getElementById(`color${color.charAt(0).toUpperCase() + color.slice(1)}Bg`).classList.add('active'); }); }); // Button hover effect const buttons = document.querySelectorAll('.cta-button'); buttons.forEach(button => { button.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-2px)'; }); button.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0)'; }); button.addEventListener('click', function(e) { e.preventDefault(); // Create ripple effect const ripple = document.createElement('span'); ripple.style.position = 'absolute'; ripple.style.width = '10px'; ripple.style.height = '10px'; ripple.style.borderRadius = '50%'; ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.7)'; ripple.style.transform = 'scale(0)'; ripple.style.animation = 'ripple 0.6s linear'; ripple.style.left = (e.clientX - this.getBoundingClientRect().left) + 'px'; ripple.style.top = (e.clientY - this.getBoundingClientRect().top) + 'px'; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); }); // Feature items hover effect const featureItems = document.querySelectorAll('.feature-item'); featureItems.forEach(item => { item.addEventListener('mouseenter', function() { this.style.backgroundColor = 'rgba(255, 255, 255, 0.95)'; }); item.addEventListener('mouseleave', function() { this.style.backgroundColor = 'rgba(255, 255, 255, 0.8)'; }); }); // Initial check for visibility checkVisibility(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>The Lost Expedition</title> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Caveat:wght@400;700&family=Raleway:wght@300;400;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --aged-paper: #f5f1e8; --ink-dark: #2a2b30; --accent-rust: #ab4b33; --accent-teal: #316a79; --accent-gold: #d6a85f; } body { font-family: 'Raleway', sans-serif; background-color: var(--aged-paper); color: var(--ink-dark); overflow-x: hidden; height: 100vh; perspective: 1px; overflow-y: auto; scroll-behavior: smooth; } .storytelling-container { height: 100vh; overflow-y: auto; overflow-x: hidden; perspective: 10px; transform-style: preserve-3d; width: 100%; max-width: 700px; margin: 0 auto; scroll-behavior: smooth; position: relative; } .progress-bar { position: fixed; top: 0; left: 0; height: 5px; background-color: var(--accent-rust); z-index: 100; width: 0%; transition: width 0.1s ease; } .navigation { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 10; } .nav-dot { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(171, 75, 51, 0.3); margin: 10px 0; cursor: pointer; transition: all 0.3s ease; } .nav-dot.active { background-color: var(--accent-rust); transform: scale(1.4); } .parallax-layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform-style: preserve-3d; } .background { transform: translateZ(-10px) scale(2); background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100%" height="100%" fill="%23f5f1e8"/><path d="M0 0h100v100H0z" fill="none" stroke="%23d6a85f" stroke-width="0.5" stroke-dasharray="4 4"/></svg>'); background-repeat: repeat; height: 100%; opacity: 0.5; } .midground { transform: translateZ(-5px) scale(1.5); height: 100%; } .foreground { transform: translateZ(0) scale(1); z-index: 1; } .page { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px; position: relative; opacity: 0; transform: translateY(50px); transition: opacity 1s ease, transform 1s ease; } .page.visible { opacity: 1; transform: translateY(0); } .title { font-family: 'Playfair Display', serif; font-size: 3rem; text-align: center; margin-bottom: 30px; color: var(--accent-rust); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); } .subtitle { font-family: 'Caveat', cursive; font-size: 1.8rem; margin-bottom: 20px; color: var(--accent-teal); } .content { max-width: 600px; text-align: center; line-height: 1.6; font-size: 1.1rem; background-color: rgba(245, 241, 232, 0.9); padding: 20px; border-radius: 5px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; } .content::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100%" height="100%" fill="%23f5f1e8" opacity="0.1"/><rect width="100%" height="100%" fill="none" stroke="%23d6a85f" stroke-width="0.5" opacity="0.3"/></svg>'); opacity: 0.2; z-index: -1; } .illustration { width: 250px; height: 250px; margin: 30px auto; position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); background-size: cover; background-position: center; transform: rotate(-2deg); transition: transform 0.5s ease; } .illustration:hover { transform: rotate(0deg) scale(1.05); } .illustration::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(171, 75, 51, 0.1), rgba(49, 106, 121, 0.2)); } .illustration-1 { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" viewBox="0 0 250 250"><rect width="250" height="250" fill="%23e0d8c9"/><circle cx="125" cy="125" r="60" fill="%23ab4b33" opacity="0.7"/><path d="M125 100 L180 170 L70 170 Z" fill="%23316a79" opacity="0.8"/><text x="125" y="140" font-family="serif" font-size="14" text-anchor="middle" fill="%23f5f1e8">THE EXPEDITION BEGINS</text></svg>'); } .illustration-2 { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" viewBox="0 0 250 250"><rect width="250" height="250" fill="%23e0d8c9"/><path d="M50 200 L125 80 L200 200 Z" fill="%23316a79" opacity="0.8"/><circle cx="125" cy="100" r="30" fill="%23d6a85f" opacity="0.9"/><path d="M100 200 C100,150 150,150 150,200" fill="none" stroke="%23ab4b33" stroke-width="8"/><text x="125" y="170" font-family="serif" font-size="14" text-anchor="middle" fill="%23f5f1e8">THE DISCOVERY</text></svg>'); } .illustration-3 { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" viewBox="0 0 250 250"><rect width="250" height="250" fill="%23e0d8c9"/><circle cx="125" cy="125" r="80" fill="%23ab4b33" opacity="0.3"/><circle cx="125" cy="125" r="60" fill="%23d6a85f" opacity="0.5"/><circle cx="125" cy="125" r="40" fill="%23316a79" opacity="0.7"/><text x="125" y="130" font-family="serif" font-size="14" text-anchor="middle" fill="%23f5f1e8">THE RETURN</text></svg>'); } .quote { font-family: 'Caveat', cursive; font-size: 1.5rem; font-style: italic; color: var(--accent-teal); text-align: center; margin: 20px 0; position: relative; padding: 0 30px; } .quote::before, .quote::after { content: '"'; font-family: 'Playfair Display', serif; font-size: 2.5rem; color: var(--accent-gold); position: absolute; opacity: 0.7; } .quote::before { left: 0; top: -15px; } .quote::after { right: 0; bottom: -15px; } .decorative-line { width: 80px; height: 3px; background-color: var(--accent-gold); margin: 20px auto; position: relative; } .decorative-line::before, .decorative-line::after { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: var(--accent-gold); top: 50%; transform: translateY(-50%); } .decorative-line::before { left: -15px; } .decorative-line::after { right: -15px; } .journal-entry { position: relative; max-width: 500px; margin: 20px auto; padding: 15px 20px; background-color: rgba(245, 241, 232, 0.95); border-radius: 3px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); transform: rotate(-1deg); transition: transform 0.3s ease; } .journal-entry:hover { transform: rotate(0deg) translateY(-5px); } .journal-entry::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100%" height="100%" fill="%23f5f1e8" opacity="0.1"/><path d="M0 20 h100 M0 40 h100 M0 60 h100 M0 80 h100" stroke="%232a2b30" stroke-width="0.3" opacity="0.2"/></svg>'); opacity: 0.2; z-index: -1; } .journal-date { font-family: 'Caveat', cursive; font-size: 1.2rem; color: var(--accent-rust); margin-bottom: 10px; } .journal-text { font-family: 'Raleway', sans-serif; font-size: 0.95rem; line-height: 1.5; } .artifact { position: relative; width: 120px; height: 120px; margin: 20px auto; transition: transform 0.5s ease; transform-style: preserve-3d; cursor: pointer; } .artifact:hover { transform: rotate(-5deg) scale(1.1); } .artifact-inner { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--accent-gold), var(--accent-rust)); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; } .artifact-inner::before { content: ''; position: absolute; width: 90%; height: 90%; border-radius: 50%; border: 2px dashed rgba(245, 241, 232, 0.7); } .artifact-inner::after { content: ''; position: absolute; width: 70%; height: 70%; border-radius: 50%; background: rgba(245, 241, 232, 0.1); box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2); } .artifact-symbol { z-index: 1; color: white; font-family: 'Playfair Display', serif; font-size: 2rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .glowing-effect { position: absolute; width: 200%; height: 200%; background: radial-gradient(circle at center, rgba(214, 168, 95, 0.8), transparent 70%); animation: glow 3s infinite alternate; opacity: 0; transition: opacity 0.5s ease; } .artifact:hover .glowing-effect { opacity: 0.3; } @keyframes glow { from { transform: scale(0.8); } to { transform: scale(1.2); } } .map-container { position: relative; width: 280px; height: 200px; margin: 30px auto; overflow: hidden; border-radius: 5px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); transform: rotate(1deg); transition: transform 0.3s ease; } .map-container:hover { transform: rotate(0deg) scale(1.05); } .map { width: 100%; height: 100%; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="280" height="200" viewBox="0 0 280 200"><rect width="280" height="200" fill="%23e0d8c9"/><path d="M40 40 C60,20 100,60 140,40 C180,20 220,60 240,40 L240 160 C220,180 180,140 140,160 C100,180 60,140 40,160 Z" fill="%23d6a85f" opacity="0.3"/><path d="M40 40 C60,20 100,60 140,40 C180,20 220,60 240,40" fill="none" stroke="%23ab4b33" stroke-width="2" stroke-dasharray="4 2"/><circle cx="70" cy="70" r="8" fill="%23ab4b33"/><circle cx="180" cy="90" r="8" fill="%23316a79"/><path d="M70 70 L100 60 L120 80 L150 70 L180 90" fill="none" stroke="%232a2b30" stroke-width="1" stroke-dasharray="3 3"/><text x="70" y="60" font-family="serif" font-size="10" text-anchor="middle" fill="%232a2b30">START</text><text x="180" y="105" font-family="serif" font-size="10" text-anchor="middle" fill="%232a2b30">X</text></svg>'); background-size: cover; transform-origin: center; transition: transform 0.5s ease; } .map-container:hover .map { transform: scale(1.2); } .custom-button { background-color: var(--accent-teal); color: white; border: none; padding: 10px 20px; font-family: 'Raleway', sans-serif; font-size: 1rem; border-radius: 5px; cursor: pointer; margin-top: 20px; transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; } .custom-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: all 0.5s ease; z-index: -1; } .custom-button:hover { background-color: var(--accent-rust); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .custom-button:hover::before { left: 100%; } .hidden-message { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; background-color: rgba(49, 106, 121, 0.1); border-radius: 5px; margin-top: 10px; width: 100%; } .hidden-message.revealed { max-height: 200px; padding: 15px; } .background-elements { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; } .bg-element { position: absolute; opacity: 0.15; transform: rotate(var(--rotation, 0deg)); } .compass { top: 10%; right: 10%; width: 100px; height: 100px; border-radius: 50%; border: 2px solid var(--accent-gold); --rotation: 15deg; } .compass::before { content: ''; position: absolute; top: 50%; left: 50%; width: 40%; height: 2px; background-color: var(--accent-rust); transform: translate(-50%, -50%) rotate(45deg); } .compass::after { content: ''; position: absolute; top: 50%; left: 50%; width: 40%; height: 2px; background-color: var(--accent-teal); transform: translate(-50%, -50%) rotate(-45deg); } .feather { bottom: 15%; left: 15%; width: 80px; height: 2px; background-color: var(--accent-rust); --rotation: -30deg; } .feather::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, var(--accent-rust)); transform: skewY(10deg); } .scroll-cta { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); text-align: center; color: var(--accent-rust); font-size: 0.9rem; opacity: 0.7; transition: opacity 0.3s ease; animation: bounce 2s infinite; } .scroll-cta:hover { opacity: 1; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-10px); } 60% { transform: translateX(-50%) translateY(-5px); } } @media (max-width: 600px) { .title { font-size: 2.2rem; } .subtitle { font-size: 1.4rem; } .content { font-size: 1rem; padding: 15px; } .illustration { width: 200px; height: 200px; } .quote { font-size: 1.2rem; padding: 0 20px; } .navigation { right: 10px; } .nav-dot { width: 10px; height: 10px; margin: 8px 0; } } </style> </head> <body> <div class="progress-bar"></div> <div class="storytelling-container"> <div class="navigation"> <div class="nav-dot active" data-index="0"></div> <div class="nav-dot" data-index="1"></div> <div class="nav-dot" data-index="2"></div> <div class="nav-dot" data-index="3"></div> </div> <div class="parallax-layer background"></div> <div class="parallax-layer midground"> <div class="background-elements"> <div class="bg-element compass"></div> <div class="bg-element feather"></div> </div> </div> <div class="parallax-layer foreground"> <section class="page visible" id="page-1"> <h1 class="title">The Lost Expedition</h1> <div class="decorative-line"></div> <h2 class="subtitle">A Journey Through Uncharted Territory</h2> <div class="illustration illustration-1"></div> <div class="content"> <p>In 1923, renowned archaeologist Dr. Eleanor Blackwood ventured into the remote Amazon basin in search of the fabled "City of Gold." Her journals, discovered decades later, tell a tale of discovery, danger, and ancient mysteries that challenge our understanding of history.</p> </div> <div class="quote">Some journeys transform not just the traveler, but our very understanding of the world.</div> <div class="scroll-cta">Scroll to continue the journey ↓</div> </section> <section class="page" id="page-2"> <h2 class="subtitle">Chapter One: Departure</h2> <div class="journal-entry"> <div class="journal-date">March 17, 1923</div> <div class="journal-text">We depart from Manaus tomorrow at dawn. My colleagues at the university called this expedition a fool's errand, but the fragments of the ancient map I discovered in Madrid cannot be ignored. The indigenous guides seem wary when I mention our destination, exchanging glances I cannot decipher. What secrets does the rainforest hold?</div> </div> <div class="map-container"> <div class="map"></div> </div> <div class="content"> <p>With a small team of five explorers and local guides, Dr. Blackwood ventured deeper into the jungle than any Western expedition had gone before. The first weeks were marked by challenging terrain, unfamiliar wildlife, and mysterious stone markers that seemed to confirm they were on the right path.</p> </div> <button class="custom-button" id="reveal-button-1">Examine Journal Fragment</button> <div class="hidden-message" id="hidden-message-1"> <p>The native markings appear consistently at each tributary. They don't match any known indigenous language but share symbols with the ancient tablet I found in Professor Hamilton's collection. These cannot be coincidences - someone wanted these markers to be found by those who knew what to look for.</p> </div> </section> <section class="page" id="page-3"> <h2 class="subtitle">Chapter Two: Discovery</h2> <div class="illustration illustration-2"></div> <div class="content"> <p>After two months in the jungle, when supplies were running low and morale even lower, Dr. Blackwood's team discovered something extraordinary – not the City of Gold they sought, but something perhaps more valuable: evidence of an advanced civilization that predated known Amazon cultures by thousands of years.</p> </div> <div class="journal-entry"> <div class="journal-date">May 28, 1923</div> <div class="journal-text">The stone structures emerged from the mist like phantoms. Not gold, as legend promised, but something far more intriguing - a complex of granite buildings with astronomical alignments that would have required mathematical knowledge far beyond what we believed possible for pre-Columbian cultures. The artifacts bear symbols that share elements with both ancient Sumerian and early Chinese writing. How is this possible?</div> </div> <div class="artifact"> <div class="artifact-inner"> <div class="artifact-symbol">⊕</div> <div class="glowing-effect"></div> </div> </div> <button class="custom-button" id="reveal-button-2">Analyze Artifact</button> <div class="hidden-message" id="hidden-message-2"> <p>The central medallion appears to be a star chart, but aligned to celestial positions from approximately 5,000 BCE. The metallic composition includes elements not typically found in South American artifacts. Most puzzling are the precise mathematical ratios incorporated into its design - the same golden ratio found in ancient Greek architecture.</p> </div> </section> <section class="page" id="page-4"> <h2 class="subtitle">Chapter Three: The Return</h2> <div class="illustration illustration-3"></div> <div class="content"> <p>Only three members of Dr. Blackwood's team returned to civilization. Their findings were met with skepticism and disbelief. Academic institutions rejected their evidence as fabrications or misinterpretations. The artifacts they brought back were scattered to private collections, and Dr. Blackwood's reputation was tarnished.</p> <p>But her detailed journals and photographs told a story that would eventually be vindicated decades later when satellite imagery revealed hundreds of similar structures hidden beneath the Amazon canopy.</p> </div> <div class="quote">History is not a static truth, but a living document we continuously rewrite as we uncover its secrets.</div> <div class="journal-entry"> <div class="journal-date">December 4, 1923</div> <div class="journal-text">They call me a fraud, but I know what we found. The university has withdrawn funding for follow-up expeditions, and my colleagues now avoid eye contact in the hallways. It matters not. The truth does not require belief to exist. I will continue my research privately. The world is not ready for what we discovered, but someday they will be.</div> </div> <button class="custom-button" id="reveal-button-3">Read Epilogue</button> <div class="hidden-message" id="hidden-message-3"> <p>In 2018, researchers using LiDAR technology discovered over 500 previously unknown geometric earthworks in the Brazilian Amazon, confirming many of Dr. Blackwood's original findings. Modern archaeological techniques have verified her team's dating of the site to approximately 3,000 BCE. Eleanor Blackwood never lived to see her work vindicated, but her journals now reside in the Smithsonian as primary documents in the study of pre-Columbian Amazon civilizations.</p> </div> </section> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const container = document.querySelector('.storytelling-container'); const pages = document.querySelectorAll('.page'); const navDots = document.querySelectorAll('.nav-dot'); const progressBar = document.querySelector('.progress-bar'); // Reveal buttons functionality document.getElementById('reveal-button-1').addEventListener('click', function() { document.getElementById('hidden-message-1').classList.toggle('revealed'); }); document.getElementById('reveal-button-2').addEventListener('click', function() { document.getElementById('hidden-message-2').classList.toggle('revealed'); }); document.getElementById('reveal-button-3').addEventListener('click', function() { document.getElementById('hidden-message-3').classList.toggle('revealed'); }); // Navigation dots functionality navDots.forEach(dot => { dot.addEventListener('click', function() { const index = this.getAttribute('data-index'); scrollToPage(index); }); }); function scrollToPage(index) { const targetPage = pages[index]; container.scrollTo({ top: targetPage.offsetTop, behavior: 'smooth' }); } // Scroll event for parallax and visibility container.addEventListener('scroll', function() { const scrollTop = container.scrollTop; const docHeight = container.scrollHeight; const winHeight = container.clientHeight; const scrollPercent = (scrollTop) / (docHeight - winHeight); const scrollPercentRounded = Math.round(scrollPercent * 100); // Update progress bar progressBar.style.width = scrollPercentRounded + '%'; // Check which page is visible pages.forEach((page, index) => { const rect = page.getBoundingClientRect(); const isVisible = ( rect.top <= winHeight * 0.5 && rect.bottom >= winHeight * 0.5 ); if (isVisible) { page.classList.add('visible'); // Update nav dots navDots.forEach((dot, dotIndex) => { if (dotIndex === index) { dot.classList.add('active'); } else { dot.classList.remove('active'); } }); } else if (rect.top > winHeight) { page.classList.remove('visible'); } }); }); // Initial check for visible elements setTimeout(function() { const scrollEvent = new Event('scroll'); container.dispatchEvent(scrollEvent); }, 100); // Remove scroll CTA after first scroll const scrollCta = document.querySelector('.scroll-cta'); container.addEventListener('scroll', function() { if (container.scrollTop > 50) { scrollCta.style.opacity = '0'; setTimeout(() => { scrollCta.style.display = 'none'; }, 500); } }, { once: true }); // Parallax effect for mouse movement container.addEventListener('mousemove', function(e) { const mouseX = e.clientX / window.innerWidth; const mouseY = e.clientY / window.innerHeight; const illustrations = document.querySelectorAll('.illustration'); illustrations.forEach(illustration => { const offsetX = (mouseX - 0.5) * 20; const offsetY = (mouseY - 0.5) * 20; illustration.style.transform = `rotate(-2deg) translate(${offsetX}px, ${offsetY}px)`; }); const artifacts = document.querySelectorAll('.artifact'); artifacts.forEach(artifact => { const offsetX = (mouseX - 0.5) * 15; const offsetY = (mouseY - 0.5) * 15; artifact.style.transform = `translate(${offsetX}px, ${offsetY}px)`; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PARALLAXIS - Creative Portfolio</title> <style> @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); :root { --primary-color: #ff3e55; --secondary-color: #0a0a0a; --text-color: #f2f2f2; --bg-color: #0a0a0a; --accent-color: #ff3e55; --transition: all 0.4s cubic-bezier(0.65, 0, 0.35, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Space Grotesk', sans-serif; } body { background-color: var(--bg-color); color: var(--text-color); overflow-x: hidden; line-height: 1.6; scrollbar-width: thin; scrollbar-color: var(--primary-color) var(--bg-color); } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg-color); } ::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 3px; } .container { width: 100%; max-width: 700px; height: 700px; margin: 0 auto; overflow-y: auto; overflow-x: hidden; perspective: 1px; scroll-behavior: smooth; position: relative; } header { padding: 2rem 1.5rem; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; background: rgba(10, 10, 10, 0.9); backdrop-filter: blur(10px); } .logo { font-size: 1.5rem; font-weight: 700; letter-spacing: -1px; color: var(--text-color); display: flex; align-items: center; } .logo span { color: var(--primary-color); } .logo-dot { display: inline-block; width: 8px; height: 8px; background-color: var(--primary-color); border-radius: 50%; margin-left: 4px; } .nav-toggle { width: 30px; height: 20px; position: relative; cursor: pointer; z-index: 102; } .nav-toggle span { display: block; width: 100%; height: 2px; background: var(--text-color); position: absolute; transition: var(--transition); } .nav-toggle span:nth-child(1) { top: 0; } .nav-toggle span:nth-child(2) { top: 9px; } .nav-toggle span:nth-child(3) { top: 18px; } .nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); } .nav-toggle.active span:nth-child(2) { opacity: 0; } .nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); } .cursor { position: fixed; width: 20px; height: 20px; border-radius: 50%; background-color: var(--primary-color); opacity: 0.5; transform: translate(-50%, -50%); pointer-events: none; z-index: 9999; mix-blend-mode: difference; transition: transform 0.2s ease; } .cursor-follower { position: fixed; width: 40px; height: 40px; border: 1px solid var(--primary-color); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 9998; transition: transform 0.4s ease, width 0.3s, height 0.3s; } .project-section { position: relative; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; } .project-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; filter: grayscale(100%); transform: translateZ(-1px) scale(2); } .project-content { width: 90%; max-width: 600px; padding: 2rem; position: relative; z-index: 1; transition: var(--transition); transform: translateZ(0); backdrop-filter: blur(5px); background: rgba(10, 10, 10, 0.5); border-left: 4px solid var(--primary-color); } .project-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 1rem; line-height: 1.2; letter-spacing: -1px; position: relative; display: inline-block; } .project-title::after { content: ""; position: absolute; bottom: -5px; left: 0; width: 60px; height: 3px; background-color: var(--primary-color); } .project-description { margin-bottom: 2rem; font-weight: 300; font-size: 1rem; max-width: 400px; } .project-number { position: absolute; top: 20px; right: 20px; font-size: 5rem; font-weight: 700; opacity: 0.1; color: var(--primary-color); } .project-meta { display: flex; gap: 1.5rem; margin-top: 2rem; } .meta-item { display: flex; flex-direction: column; } .meta-label { font-size: 0.75rem; text-transform: uppercase; opacity: 0.7; margin-bottom: 0.25rem; } .meta-value { font-weight: 500; } .project-details { max-height: 0; overflow: hidden; transition: max-height 0.6s cubic-bezier(0, 1, 0, 1); margin-top: 1rem; } .project-details.active { max-height: 500px; transition: max-height 1s ease-in-out; } .project-view-btn { display: inline-flex; align-items: center; margin-top: 1rem; background: none; border: none; color: var(--primary-color); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: var(--transition); padding: 0; } .project-view-btn svg { width: 16px; height: 16px; margin-left: 6px; transition: var(--transition); } .project-view-btn:hover { opacity: 0.8; } .project-view-btn:hover svg { transform: translateX(4px); } .project-view-btn.active svg { transform: rotate(90deg); } .media-container { margin-top: 1.5rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .media-item { aspect-ratio: 16/9; overflow: hidden; position: relative; border-radius: 2px; } .media-item img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: var(--transition); } .media-item:hover img { filter: grayscale(0%); transform: scale(1.05); } .media-item.highlighted { grid-column: span 2; } .section-title { font-size: 1.75rem; margin-bottom: 1.5rem; position: relative; padding-bottom: 0.5rem; font-weight: 600; } .section-title::after { content: ""; position: absolute; bottom: 0; left: 0; width: 50px; height: 3px; background-color: var(--primary-color); } .about-section { padding: 4rem 1.5rem; position: relative; overflow: hidden; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .about-image { width: 100%; height: 100%; min-height: 300px; background-color: #1a1a1a; position: relative; overflow: hidden; } .about-image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); mix-blend-mode: luminosity; transition: var(--transition); } .about-image:hover img { filter: grayscale(0%); } .about-image::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(255, 62, 85, 0.3), transparent); z-index: 1; opacity: 0; transition: var(--transition); } .about-image:hover::before { opacity: 1; } .about-content { display: flex; flex-direction: column; justify-content: center; } .about-title { font-size: 2rem; margin-bottom: 1rem; position: relative; padding-bottom: 0.5rem; } .about-title::after { content: ""; position: absolute; bottom: 0; left: 0; width: 50px; height: 3px; background-color: var(--primary-color); } .skill-list { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } .skill-tag { padding: 0.35rem 0.75rem; background-color: rgba(255, 62, 85, 0.1); border: 1px solid rgba(255, 62, 85, 0.3); border-radius: 4px; font-size: 0.85rem; font-weight: 500; transition: var(--transition); } .skill-tag:hover { background-color: rgba(255, 62, 85, 0.2); transform: translateY(-2px); } .contact-section { padding: 4rem 1.5rem; position: relative; } .contact-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; } .contact-form { display: flex; flex-direction: column; gap: 1rem; } .input-group { position: relative; margin-bottom: 1rem; } .form-input { width: 100%; padding: 0.75rem 1rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-color); border-radius: 4px; font-size: 1rem; transition: var(--transition); } .form-input:focus { outline: none; border-color: var(--primary-color); background: rgba(255, 255, 255, 0.08); } .form-input::placeholder { color: rgba(255, 255, 255, 0.3); } textarea.form-input { min-height: 120px; resize: vertical; } .submit-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; background-color: var(--primary-color); color: white; border: none; border-radius: 4px; font-weight: 500; cursor: pointer; transition: var(--transition); font-size: 1rem; max-width: 180px; } .submit-btn:hover { background-color: #ff1a36; transform: translateY(-2px); } .submit-btn:active { transform: translateY(0); } .footer { padding: 2rem 1.5rem; text-align: center; background-color: rgba(0, 0, 0, 0.2); margin-top: 2rem; } .social-links { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 1.5rem; } .social-link { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; transition: var(--transition); color: var(--text-color); } .social-link:hover { border-color: var(--primary-color); transform: translateY(-3px); } .social-link svg { width: 18px; height: 18px; transition: var(--transition); } .social-link:hover svg { color: var(--primary-color); } .copyright { font-size: 0.85rem; opacity: 0.7; } .back-to-top { position: fixed; bottom: 20px; right: 20px; width: 40px; height: 40px; background-color: var(--primary-color); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transition: var(--transition); z-index: 99; } .back-to-top.visible { opacity: 1; visibility: visible; } .back-to-top:hover { transform: translateY(-4px); } .geometric-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.04; } @media (max-width: 768px) { .about-grid, .contact-grid { grid-template-columns: 1fr; } .project-content { width: 95%; padding: 1.5rem; } .project-title { font-size: 2rem; } .project-number { font-size: 4rem; } .media-container { grid-template-columns: 1fr; } .media-item.highlighted { grid-column: span 1; } } @keyframes pulse { 0% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: 0.6; } } .scroll-indicator { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; color: var(--text-color); opacity: 0.6; transition: var(--transition); z-index: 2; } .scroll-indicator span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; } .scroll-indicator svg { animation: pulse 1.5s infinite; } /* Loading animation */ .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-color); display: flex; justify-content: center; align-items: center; z-index: 1000; transition: opacity 0.6s ease, visibility 0.6s ease; } .loader { width: 60px; height: 60px; position: relative; } .loader:before { content: ""; width: 100%; height: 100%; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--primary-color); animation: spin 1s linear infinite; position: absolute; } .loader:after { content: ""; width: 80%; height: 80%; border-radius: 50%; border: 3px solid transparent; border-left-color: var(--primary-color); animation: spin 0.5s linear infinite reverse; position: absolute; top: 10%; left: 10%; } @keyframes spin { to { transform: rotate(360deg); } } .loading-overlay.hidden { opacity: 0; visibility: hidden; } .navigation { position: fixed; top: 0; right: 0; width: 300px; height: 100%; background-color: var(--secondary-color); z-index: 101; padding: 100px 40px 40px; transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .navigation.open { transform: translateX(0); } .nav-list { list-style: none; } .nav-item { margin-bottom: 1.5rem; } .nav-link { font-size: 1.5rem; font-weight: 600; color: var(--text-color); text-decoration: none; display: inline-block; position: relative; transition: var(--transition); } .nav-link::after { content: ""; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: var(--transition); } .nav-link:hover { color: var(--primary-color); } .nav-link:hover::after { width: 100%; } .nav-info { margin-top: 3rem; font-size: 0.9rem; } .nav-info p { margin-bottom: 0.5rem; opacity: 0.7; } .nav-info a { color: var(--primary-color); text-decoration: none; } </style> </head> <body> <div class="cursor"></div> <div class="cursor-follower"></div> <div class="loading-overlay"> <div class="loader"></div> </div> <div class="container"> <header> <div class="logo">PARALLAXIS<span class="logo-dot"></span></div> <div class="nav-toggle"> <span></span> <span></span> <span></span> </div> </header> <div class="navigation"> <ul class="nav-list"> <li class="nav-item"><a href="#" class="nav-link">Home</a></li> <li class="nav-item"><a href="#" class="nav-link">Projects</a></li> <li class="nav-item"><a href="#" class="nav-link">About</a></li> <li class="nav-item"><a href="#" class="nav-link">Contact</a></li> </ul> <div class="nav-info"> <p>Based in Berlin, Germany</p> <p>Available for freelance work</p> <p><a href="mailto:[email protected]">[email protected]</a></p> </div> </div> <section class="project-section" id="project1"> <div class="project-bg" style="background-image: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80');"></div> <div class="project-content"> <div class="project-number">01</div> <h2 class="project-title">Neon Dreams</h2> <p class="project-description">An immersive digital experience reimagining urban spaces through interactive 3D visualizations that respond to user movement.</p> <div class="project-meta"> <div class="meta-item"> <span class="meta-label">Type</span> <span class="meta-value">Interactive Installation</span> </div> <div class="meta-item"> <span class="meta-label">Year</span> <span class="meta-value">2023</span> </div> </div> <button class="project-view-btn" data-target="details1"> View Project Details <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="9 18 15 12 9 6"></polyline> </svg> </button> <div class="project-details" id="details1"> <p>Neon Dreams explores the intersection of physical architecture and digital art. Using depth cameras and projection mapping, the installation creates reactive environments that transform based on audience movement.</p> <div class="media-container"> <div class="media-item highlighted"> <img src="https://images.unsplash.com/photo-1633008808000-ce86bbd6c6d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1035&q=80" alt="Neon Dreams Project"> </div> <div class="media-item"> <img src="https://images.unsplash.com/photo-1633107761753-dc440df5e33d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=988&q=80" alt="Neon Dreams Detail"> </div> <div class="media-item"> <img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Neon Dreams Interaction"> </div> </div> </div> </div> <div class="scroll-indicator"> <span>Scroll</span> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="6 9 12 15 18 9"></polyline> </svg> </div> </section> <section class="project-section" id="project2"> <div class="project-bg" style="background-image: url('https://images.unsplash.com/photo-1511467687858-23d96c32e4ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80');"></div> <div class="project-content"> <div class="project-number">02</div> <h2 class="project-title">Geometric Void</h2> <p class="project-description">A minimalist brand identity using negative space and precise geometric forms to create a distinctive visual language for a contemporary art gallery.</p> <div class="project-meta"> <div class="meta-item"> <span class="meta-label">Type</span> <span class="meta-value">Brand Identity</span> </div> <div class="meta-item"> <span class="meta-label">Year</span> <span class="meta-value">2022</span> </div> </div> <button class="project-view-btn" data-target="details2"> View Project Details <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="9 18 15 12 9 6"></polyline> </svg> </button> <div class="project-details" id="details2"> <p>The Geometric Void identity system embraces simplicity through calculated form and proportion. Each touchpoint in the brand ecosystem was designed to create moments of visual tension between positive and negative space.</p> <div class="media-container"> <div class="media-item"> <img src="https://images.unsplash.com/photo-1634986666676-ec8fd927c23d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=985&q=80" alt="Geometric Void Branding"> </div> <div class="media-item"> <img src="https://images.unsplash.com/photo-1586075010923-2dd4570fb338?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="Geometric Void Application"> </div> <div class="media-item highlighted"> <img src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Geometric Void Gallery"> </div> </div> </div> </div> </section> <section class="project-section" id="project3"> <div class="project-bg" style="background-image: url('https://images.unsplash.com/photo-1558591710-4b4a1ae0f04d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80');"></div> <div class="project-content"> <div class="project-number">03</div> <h2 class="project-title">Sonic Terrain</h2> <p class="project-description">An audio-reactive visualization app that translates music into dynamic topographic landscapes, allowing users to explore sound as physical space.</p> <div class="project-meta"> <div class="meta-item"> <span class="meta-label">Type</span> <span class="meta-value">UI/UX & Development</span> </div> <div class="meta-item"> <span class="meta-label">Year</span> <span class="meta-value">2023</span> </div> </div> <button class="project-view-btn" data-target="details3"> View Project Details <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="9 18 15 12 9 6"></polyline> </svg> </button> <div class="project-details" id="details3"> <p>Sonic Terrain uses WebGL and the Web Audio API to analyze frequency data and generate undulating 3D landscapes in real-time. Every visual element responds to specific audio characteristics, creating a synesthetic experience.</p> <div class="media-container"> <div class="media-item highlighted"> <img src="https://images.unsplash.com/photo-1558591710-4b4a1ae0f04d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=987&q=80" alt="Sonic Terrain App"> </div> <div class="media-item"> <img src="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1074&q=80" alt="Sonic Terrain Interface"> </div> <div class="media-item"> <img src="https://images.unsplash.com/photo-1598488035139-bdbb2231ce04?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Sonic Terrain Visual"> </div> </div> </div> </div> </section> <section class="about-section" id="about"> <div class="geometric-overlay"> <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> <pattern id="pattern-circles" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse"> <circle cx="10" cy="10" r="1.6257413380501518" fill="#fff" /> </pattern> <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-circles)" /> </svg> </div> <h2 class="section-title">About</h2> <div class="about-grid"> <div class="about-image"> <img src="https://images.unsplash.com/photo-1487058792275-0ad4aaf24ca7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Creative Studio Space"> </div> <div class="about-content"> <h3 class="about-title">Creative Studio</h3> <p>PARALLAXIS is a multidisciplinary design studio specializing in creating immersive digital experiences that blur the boundaries between physical and digital realms.</p> <p>Founded in 2020, we combine strategic thinking with experimental approaches to craft memorable, emotionally resonant work for forward-thinking brands and cultural institutions.</p> <div class="skill-list"> <span class="skill-tag">Interactive Design</span> <span class="skill-tag">3D Visualization</span> <span class="skill-tag">Brand Identity</span> <span class="skill-tag">Motion Design</span> <span class="skill-tag">Web Development</span> <span class="skill-tag">Installation Art</span> </div> </div> </div> </section> <section class="contact-section" id="contact"> <div class="geometric-overlay"> <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"> <pattern id="pattern-lines" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse"> <path d="M 0,20 l 40,0" stroke="#fff" stroke-width="0.5" fill="none" /> </pattern> <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-lines)" /> </svg> </div> <h2 class="section-title">Contact</h2> <div class="contact-grid"> <div class="contact-content">
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SYNTHESIS 2024 | Music & Tech Festival</title> <style> @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap'); :root { --primary: #00f4c8; --secondary: #401dff; --dark: #0d0e23; --light: #f7f7ff; --accent: #ff4365; --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'DM Sans', sans-serif; background-color: var(--dark); color: var(--light); line-height: 1.6; overflow-x: hidden; height: 100vh; perspective: 1px; transform-style: preserve-3d; scroll-behavior: smooth; } .container { width: 100%; max-width: 700px; height: 100vh; margin: 0 auto; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; perspective: 1px; transform-style: preserve-3d; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .container::-webkit-scrollbar { display: none; } h1, h2, h3, h4, h5 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; line-height: 1.2; } .parallax__layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .parallax__layer--back { transform: translateZ(-1px) scale(2); } .parallax__layer--base { transform: translateZ(0); } .parallax__layer--front { transform: translateZ(0.1px) scale(0.9); } .section { min-height: 100vh; padding: 2rem; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1; } /* Hero Section */ .hero { height: 100vh; background: linear-gradient(180deg, rgba(13,14,35,0.9) 0%, rgba(13,14,35,0.7) 100%); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzPgogICAgPHBhdHRlcm4gaWQ9ImdyaWQiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+CiAgICAgIDxwYXRoIGQ9Ik0gMjAgMCBMIDAgMCAwIDIwIiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoNjQsIDI5LCAyNTUsIDAuMSkiIHN0cm9rZS13aWR0aD0iMSIvPgogICAgPC9wYXR0ZXJuPgogIDwvZGVmcz4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIiAvPgo8L3N2Zz4='); opacity: 0.5; z-index: -1; } .hero__logo { margin-bottom: 1rem; font-size: 1.5rem; letter-spacing: 2px; color: var(--primary); font-weight: 700; } .hero__title { font-size: 3.5rem; margin-bottom: 1rem; line-height: 1; text-transform: uppercase; background: linear-gradient(90deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.5rem; } .hero__subtitle { font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--light); opacity: 0.9; } .hero__date { font-size: 1.2rem; font-weight: 500; color: var(--primary); margin-bottom: 2rem; padding: 0.5rem 1.5rem; border: 1px solid var(--primary); border-radius: 50px; } .cta-btn { display: inline-block; background: var(--primary); color: var(--dark); font-weight: 700; padding: 1rem 2.5rem; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; border: none; border-radius: 50px; cursor: pointer; transition: var(--transition); text-decoration: none; position: relative; overflow: hidden; z-index: 1; } .cta-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--secondary); z-index: -1; transition: var(--transition); } .cta-btn:hover { color: var(--light); } .cta-btn:hover::before { width: 100%; } .scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; cursor: pointer; opacity: 0.7; transition: var(--transition); } .scroll-indicator:hover { opacity: 1; } .scroll-indicator span { font-size: 0.8rem; margin-bottom: 0.5rem; } .scroll-indicator__icon { width: 30px; height: 50px; border: 2px solid var(--light); border-radius: 25px; position: relative; } .scroll-indicator__icon::before { content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; background: var(--light); border-radius: 50%; animation: scroll 2s infinite; } @keyframes scroll { 0% { top: 5px; opacity: 1; } 75% { top: 30px; opacity: 0; } 100% { top: 5px; opacity: 0; } } /* About Section */ .about { background: linear-gradient(180deg, var(--dark) 0%, rgba(64, 29, 255, 0.2) 100%); text-align: center; padding: 6rem 2rem; } .section-title { font-size: 2.5rem; margin-bottom: 2rem; color: var(--primary); position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 50%; height: 3px; background: var(--primary); } .about__content { max-width: 600px; margin: 0 auto; } .about__text { margin-bottom: 2rem; font-size: 1.1rem; color: var(--light); opacity: 0.9; } .about__highlight { color: var(--primary); font-weight: 700; } .about__stats { display: flex; justify-content: space-around; margin: 3rem 0; flex-wrap: wrap; } .stat { margin: 1rem; text-align: center; } .stat__number { font-size: 2.5rem; font-weight: 700; color: var(--accent); margin-bottom: 0.5rem; } .stat__label { font-size: 0.9rem; color: var(--light); opacity: 0.7; text-transform: uppercase; letter-spacing: 1px; } /* Lineup Section */ .lineup { background: linear-gradient(180deg, rgba(64, 29, 255, 0.2) 0%, var(--dark) 100%); padding: 6rem 2rem; } .lineup__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 3rem; max-width: 600px; } .artist { padding: 1.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 10px; transition: var(--transition); position: relative; overflow: hidden; transform: translateY(50px); opacity: 0; cursor: pointer; } .artist.animate { transform: translateY(0); opacity: 1; } .artist::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 0; background: var(--primary); transition: var(--transition); } .artist:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-5px); } .artist:hover::before { height: 100%; } .artist__name { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--light); } .artist__genre { font-size: 0.9rem; color: var(--primary); opacity: 0.8; } .artist__time { position: absolute; top: 1rem; right: 1rem; font-size: 0.8rem; color: var(--light); opacity: 0.7; background: rgba(255, 67, 101, 0.2); padding: 0.3rem 0.8rem; border-radius: 50px; } /* Schedule Section */ .schedule { background: var(--dark); padding: 6rem 2rem; } .timeline { position: relative; max-width: 600px; margin: 3rem auto 0; } .timeline::before { content: ''; position: absolute; top: 0; left: 20px; width: 2px; height: 100%; background: var(--primary); } .timeline-item { position: relative; margin-bottom: 3rem; padding-left: 60px; transform: translateX(-50px); opacity: 0; transition: var(--transition); } .timeline-item.animate { transform: translateX(0); opacity: 1; } .timeline-item::before { content: ''; position: absolute; top: 0; left: 11px; width: 20px; height: 20px; background: var(--accent); border-radius: 50%; border: 2px solid var(--primary); z-index: 1; } .timeline-item__time { font-size: 1.2rem; font-weight: 700; color: var(--primary); margin-bottom: 0.5rem; } .timeline-item__title { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--light); } .timeline-item__location { font-size: 0.9rem; color: var(--light); opacity: 0.7; margin-bottom: 1rem; } .timeline-item__description { font-size: 1rem; color: var(--light); opacity: 0.9; } /* Registration Section */ .registration { background: linear-gradient(180deg, var(--dark) 0%, rgba(64, 29, 255, 0.3) 100%); padding: 6rem 2rem; text-align: center; } .ticket-options { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; margin: 3rem 0; max-width: 600px; } .ticket { background: rgba(255, 255, 255, 0.05); padding: 2rem; border-radius: 10px; flex: 1 1 250px; max-width: 280px; position: relative; overflow: hidden; transition: var(--transition); transform: scale(0.95); } .ticket:hover { transform: scale(1); background: rgba(255, 255, 255, 0.1); } .ticket::before { content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 50px 50px 0; border-color: transparent var(--primary) transparent transparent; transition: var(--transition); } .ticket:hover::before { border-width: 0 70px 70px 0; } .ticket__type { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; color: var(--light); } .ticket__price { font-size: 2.5rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--primary); } .ticket__features { list-style: none; margin-bottom: 2rem; } .ticket__features li { margin-bottom: 0.5rem; font-size: 0.9rem; color: var(--light); opacity: 0.9; } .ticket__btn { background: transparent; border: 2px solid var(--primary); color: var(--primary); font-weight: 600; padding: 0.8rem 1.5rem; border-radius: 50px; cursor: pointer; transition: var(--transition); text-decoration: none; display: inline-block; } .ticket__btn:hover { background: var(--primary); color: var(--dark); } .countdown { display: flex; justify-content: center; gap: 1rem; margin: 2rem 0; } .countdown__item { text-align: center; min-width: 70px; } .countdown__number { font-size: 2rem; font-weight: 700; color: var(--accent); background: rgba(255, 255, 255, 0.05); border-radius: 5px; padding: 0.5rem; margin-bottom: 0.5rem; } .countdown__label { font-size: 0.8rem; color: var(--light); opacity: 0.7; text-transform: uppercase; } .limited-offer { font-size: 0.9rem; color: var(--accent); margin-top: 1rem; font-weight: 500; } /* Footer */ .footer { background: var(--dark); padding: 3rem 2rem; text-align: center; } .footer__logo { font-size: 1.5rem; color: var(--primary); margin-bottom: 1rem; font-weight: 700; } .footer__social { display: flex; justify-content: center; gap: 1.5rem; margin: 2rem 0; } .footer__social-link { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; color: var(--light); transition: var(--transition); text-decoration: none; } .footer__social-link:hover { background: var(--primary); color: var(--dark); transform: translateY(-5px); } .footer__social-icon { font-size: 1.2rem; } .footer__contact { margin-bottom: 2rem; } .footer__contact-item { margin-bottom: 0.5rem; color: var(--light); opacity: 0.7; font-size: 0.9rem; } .footer__copyright { font-size: 0.8rem; color: var(--light); opacity: 0.5; } /* Responsive */ @media screen and (max-width: 768px) { .hero__title { font-size: 2.5rem; } .hero__subtitle { font-size: 1.2rem; } .section-title { font-size: 2rem; } .stat__number { font-size: 2rem; } .countdown__number { font-size: 1.5rem; min-width: 60px; } .ticket-options { flex-direction: column; align-items: center; } .ticket { max-width: 100%; } } @media screen and (max-width: 480px) { .hero__title { font-size: 2rem; } .hero__subtitle { font-size: 1rem; } .section-title { font-size: 1.8rem; } .about__stats { flex-direction: column; } .timeline::before { left: 15px; } .timeline-item::before { left: 6px; width: 18px; height: 18px; } .timeline-item { padding-left: 50px; } .countdown { flex-wrap: wrap; } } /* Animations */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-in.active { opacity: 1; transform: translateY(0); } /* Floating Elements */ .floating-element { position: absolute; background: rgba(255, 255, 255, 0.05); border-radius: 50%; z-index: -1; } .floating-1 { width: 150px; height: 150px; top: 20%; left: 10%; animation: float1 15s infinite alternate ease-in-out; } .floating-2 { width: 80px; height: 80px; top: 50%; right: 10%; animation: float2 12s infinite alternate ease-in-out; } .floating-3 { width: 120px; height: 120px; bottom: 20%; left: 20%; animation: float3 18s infinite alternate ease-in-out; } @keyframes float1 { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(20px, 30px) rotate(60deg); } } @keyframes float2 { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(-20px, 20px) rotate(-30deg); } } @keyframes float3 { 0% { transform: translate(0, 0) rotate(0deg); } 100% { transform: translate(30px, -20px) rotate(45deg); } } /* Cursor styles */ .custom-cursor { width: 20px; height: 20px; border: 2px solid var(--primary); border-radius: 50%; position: fixed; pointer-events: none; transform: translate(-50%, -50%); z-index: 9999; transition: width 0.3s, height 0.3s, border-color 0.3s; mix-blend-mode: difference; } .custom-cursor-follower { width: 8px; height: 8px; background-color: var(--primary); border-radius: 50%; position: fixed; pointer-events: none; transform: translate(-50%, -50%); z-index: 9999; transition: width 0.2s, height 0.2s, background-color 0.2s, transform 0.1s; } /* Loader */ .loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--dark); display: flex; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.5s ease, visibility 0.5s ease; } .loader.hidden { opacity: 0; visibility: hidden; } .loader__content { text-align: center; } .loader__logo { font-size: 2rem; color: var(--primary); margin-bottom: 2rem; font-weight: 700; letter-spacing: 2px; } .loader__bar { width: 200px; height: 3px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden; position: relative; } .loader__progress { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: var(--primary); transition: width 0.4s ease; } /* Mobile menu */ .mobile-menu-btn { display: none; position: fixed; top: 2rem; right: 2rem; z-index: 999; background: transparent; border: none; cursor: pointer; width: 30px; height: 25px; } .mobile-menu-btn span { display: block; width: 100%; height: 2px; background: var(--primary); position: absolute; left: 0; transition: var(--transition); } .mobile-menu-btn span:nth-child(1) { top: 0; } .mobile-menu-btn span:nth-child(2) { top: 50%; transform: translateY(-50%); } .mobile-menu-btn span:nth-child(3) { bottom: 0; } .mobile-menu-btn.active span:nth-child(1) { transform: rotate(45deg); top: 50%; } .mobile-menu-btn.active span:nth-child(2) { opacity: 0; } .mobile-menu-btn.active span:nth-child(3) { transform: rotate(-45deg); top: 50%; } @media screen and (max-width: 768px) { .mobile-menu-btn { display: block; } } .mobile-menu { position: fixed; top: 0; right: -100%; width: 80%; max-width: 300px; height: 100%; background: var(--dark); z-index: 998; padding: 6rem 2rem 2rem; transition: right 0.4s ease; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2); } .mobile-menu.active { right: 0; } .mobile-menu__nav { list-style: none; } .mobile-menu__item { margin-bottom: 1.5rem; } .mobile-menu__link { color: var(--light); text-decoration: none; font-size: 1.2rem; font-weight: 500; display: block; padding: 0.5rem 0; transition: var(--transition); } .mobile-menu__link:hover { color: var(--primary); transform: translateX(10px); } /* Overlay */ .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(13, 14, 35, 0.8); z-index: 997; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; } .overlay.active { opacity: 1; visibility: visible; } /* Tooltip */ .tooltip { position: absolute; background: var(--dark); color: var(--light); padding: 0.5rem 1rem; border-radius: 5px; font-size: 0.8rem; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 1000; white-space: nowrap; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); border: 1px solid var(--primary); } .tooltip::before { content: ''; position: absolute; width: 10px; height: 10px; background: var(--dark); transform: rotate(45deg); border: 1px solid var(--primary); z-index: -1; } .tooltip.top::before { bottom: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); border-top: none; border-left: none; } .tooltip.bottom::before { top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); border-bottom: none; border-right: none; } .tooltip.left::before { top: 50%; right: -6px; transform: translateY(-50%) rotate(45deg); border-top: none; border-right: none; } .tooltip.right::before { top: 50%; left: -6px; transform: translateY(-50%) rotate(45deg); border-bottom: none; border-left: none; } .has-tooltip { position: relative; } </style> </head> <body> <!-- Loader --> <div class="loader"> <div class="loader__content"> <div class="loader__logo">SYNTHESIS 2024</div> <div class="loader__bar"> <div class="loader__progress"></div> </div> </div> </div> <!-- Custom Cursor --> <div class="custom-cursor"></div> <div class="custom-cursor-follower"></div> <!-- Mobile Menu Button --> <button class="mobile-menu-btn"> <span></span> <span></span> <span></span> </button> <!-- Mobile Menu --> <div class="mobile-menu"> <ul class="mobile-menu__nav"> <li class="mobile-menu__item"><a href="#" class="mobile-menu__link" data-section="hero">Home</a></li> <li class="mobile-menu__item"><a href="#" class="mobile-menu__link" data-section="about">About</a></li> <li class="mobile-menu__item"><a href="#" class="mobile-menu__link" data-section="lineup">Lineup</a></li> <li class="mobile-menu__item"><a href="#" class="mobile-menu__link" data-section="schedule">Schedule</a></li> <li class="mobile-menu__item"><a href="#" class="mobile-menu__link" data-section="registration">Tickets</a></li> </ul> </div> <!-- Overlay --> <div class="overlay"></div> <!-- Main Container --> <div class="container"> <!-- Hero Section --> <section class="section hero" id="hero"> <div class="floating-element floating-1"></div> <div class="floating-element floating-2"></div> <div class="floating-element floating-3"></div> <div class="hero__logo fade-in">SYNTHESIS</div> <h1 class="hero__title fade-in">Where Music Meets Technology</h1> <p class="hero__subtitle fade-in">A groundbreaking festival exploring the intersection of sound innovation and digital artistry</p> <div class="hero__date fade-in">AUGUST 15-17, 2024 • DIGITAL HARBOR, SAN FRANCISCO</div> <a href="#" class="cta-btn fade-in">Secure Your Spot</a> <div class="scroll-indicator" id="scroll-down"> <span>SCROLL DOWN</span> <div class="scroll-indicator__icon"></div> </div> </section> <!-- About Section --> <section class="section about" id="about"> <h2 class="section-title fade-in">The Experience</h2> <div class="about__content"> <p class="about__text fade-in"> <span class="about__highlight">SYNTHESIS</span> is more than a festival—it's a convergence of sonic innovation and digital revolution. Across three immersive days, experience how boundary-pushing artists and technologists are redefining the future of musical expression. </p> <p class="about__text fade-in"> From AI-generated compositions to reactive audiovisual installations, SYNTHESIS celebrates those who dare to explore the uncharted territories where sound and code collide. </p> <div class="about__stats"> <div class="stat fade-in"> <div class="stat__number" data-count="48">0</div> <div class="stat__label">Artists</div> </div> <div class="stat fade-in"> <div class="stat__number" data-count="12">0</div> <div class="stat__label">Tech Showcases</div> </div> <div class="stat fade-in"> <div class="stat__number" data-count="5">0</div> <div class="stat__label">Interactive Stages</div> </div> </div> <a href="#" class="cta-btn fade-in">Discover the Vision</a> </div> </section> <!-- Lineup Section --> <section class="section lineup" id="lineup"> <h2 class="section-title fade-in">Featured Artists</h2> <div class="lineup__grid"> <div class="artist"> <h3 class="artist__name">Neural Pulse</h3> <p class="artist__genre">Algorithmic Techno</p> <span class="artist__time">FRI 9:30 PM</span> </div> <div class="artist"> <h3 class="artist__name">Quantum Field</h3> <p class="artist__genre">Generative Ambient</p> <span class="artist__time">SAT 8:15 PM</span> </div> <div class="artist"> <h3 class="artist__name">Byte Ritual</h3> <p class="artist__genre">Modular Electronica</p> <span class="artist__time">FRI 11:45 PM</span> </div> <div class="artist"> <h3 class="artist__name">Echo Recursion</h3> <p class="artist__genre">Spatial Audio Design</p> <span class="artist__time">SUN 7:00 PM</span> </div> </div> <a href="#" class="cta-btn fade-in" style="margin-top: 3rem;">Full Lineup</a> </section> <!-- Schedule Section --> <section class="section schedule" id="schedule"> <h2 class="section-title fade-in">Event Timeline</h2> <div class="timeline"> <div class="timeline-item"> <div class="timeline-item__time">DAY 1 - 2:00 PM</div> <h3 class="timeline-item__title">Opening Ceremony & Keynote</h3> <p class="timeline-item__location">Main Stage - Innovation Plaza</p> <p class="timeline-item__description">The festival begins with a groundbreaking showcase of this year's most anticipated music technology innovations.</p> </div> <div class="timeline-item"> <div class="timeline-item__time">DAY 1 - 8:00
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Phantom Evolution - The Future of Motion</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap'); :root { --dark: #0a0a0a; --dark-accent: #151515; --silver: #c0c0c0; --teal: #00e5e5; --orange: #ff4500; } body { background-color: var(--dark); color: white; overflow-x: hidden; height: 100vh; perspective: 1px; transform-style: preserve-3d; overflow-y: auto; scroll-behavior: smooth; } .parallax-container { position: relative; height: 700px; width: 100%; transform-style: preserve-3d; overflow: hidden; } .parallax-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; will-change: transform; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .layer-bg { transform: translateZ(-2px) scale(3); z-index: 1; background-image: linear-gradient(rgba(10, 10, 10, 0.7), rgba(10, 10, 10, 0.8)), url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); } .layer-road { transform: translateZ(-1px) scale(2); z-index: 2; background-image: url('https://images.unsplash.com/photo-1553489404-0b859ec1540a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); opacity: 0.6; } .layer-car { transform: translateZ(0) scale(1); z-index: 3; background-image: url('https://images.unsplash.com/photo-1544829099-b9a0c07fad1a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); background-size: 120%; background-position: center 40%; transition: background-size 0.8s ease-out; } .layer-details { transform: translateZ(0) scale(1); z-index: 4; display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; height: 100%; } .nav { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; } .logo { font-size: 1.8rem; font-weight: 700; letter-spacing: 2px; color: white; text-transform: uppercase; display: flex; align-items: center; } .logo span { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--teal); margin-right: 8px; box-shadow: 0 0 15px var(--teal); } .nav-links { display: flex; gap: 2rem; } .nav-links a { color: white; text-decoration: none; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; transition: color 0.3s; } .nav-links a:hover { color: var(--teal); } .car-details { margin-top: auto; width: 100%; max-width: 600px; opacity: 0; transform: translateY(50px); transition: all 0.8s ease-out; } .car-title { font-size: 3.5rem; font-weight: 700; margin-bottom: 1rem; line-height: 1; background: linear-gradient(45deg, white, var(--silver)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 20px rgba(192, 192, 192, 0.2); } .car-specs { display: flex; gap: 2rem; margin: 1.5rem 0; } .spec-item { display: flex; flex-direction: column; align-items: flex-start; } .spec-label { font-size: 0.8rem; color: var(--silver); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.5rem; } .spec-value { font-size: 1.8rem; font-weight: 700; color: white; } .spec-unit { font-size: 0.8rem; vertical-align: super; margin-left: 2px; } .car-description { font-size: 1rem; line-height: 1.6; color: var(--silver); margin-bottom: 2rem; max-width: 500px; } .cta-button { display: inline-flex; align-items: center; padding: 0.8rem 2rem; background: linear-gradient(90deg, var(--teal), #00a0a0); color: white; border: none; border-radius: 30px; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: all 0.3s; position: relative; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 229, 229, 0.3); } .cta-button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 229, 229, 0.4); } .cta-button::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transform: translateX(-100%); } .cta-button:hover::after { animation: shine 1.5s infinite; } @keyframes shine { 100% { transform: translateX(100%); } } .progress-bar { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: linear-gradient(90deg, var(--teal), var(--orange)); z-index: 100; transition: width 0.2s; } .car-detail-panels { position: absolute; bottom: 10%; right: 5%; display: flex; gap: 15px; z-index: 10; } .detail-panel { width: 60px; height: 60px; background: rgba(15, 15, 15, 0.7); backdrop-filter: blur(5px); border: 1px solid rgba(192, 192, 192, 0.2); border-radius: 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s; position: relative; overflow: hidden; } .detail-panel:hover { transform: translateY(-5px); border-color: var(--teal); box-shadow: 0 5px 15px rgba(0, 229, 229, 0.2); } .detail-panel-icon { font-size: 24px; color: var(--silver); transition: all 0.3s; } .detail-panel:hover .detail-panel-icon { color: var(--teal); } .detail-panel::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--teal); transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease-out; } .detail-panel:hover::after { transform: scaleX(1); transform-origin: left; } .speed-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; opacity: 0; transition: opacity 0.5s; pointer-events: none; } .speed-line { position: absolute; height: 1px; width: 100px; background: rgba(255, 255, 255, 0.2); transform: rotate(-45deg); } .tooltip { position: absolute; background: rgba(15, 15, 15, 0.9); border: 1px solid rgba(192, 192, 192, 0.3); padding: 8px 12px; border-radius: 5px; font-size: 0.8rem; color: white; bottom: 120%; left: 50%; transform: translateX(-50%) scale(0); transform-origin: bottom; transition: transform 0.3s; white-space: nowrap; z-index: 100; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .detail-panel:hover .tooltip { transform: translateX(-50%) scale(1); } .tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: rgba(192, 192, 192, 0.3) transparent transparent transparent; } .pulse { position: absolute; width: 100%; height: 100%; border-radius: 10px; background: var(--teal); opacity: 0; z-index: -1; } .detail-panel:hover .pulse { animation: pulse 1.5s infinite; } @keyframes pulse { 0% { transform: scale(0.95); opacity: 0; } 50% { opacity: 0.2; } 100% { transform: scale(1.8); opacity: 0; } } @media (max-width: 768px) { .car-title { font-size: 2.5rem; } .car-specs { flex-wrap: wrap; gap: 1rem; } .spec-value { font-size: 1.5rem; } .car-description { font-size: 0.9rem; } .nav-links { gap: 1rem; } .nav-links a { font-size: 0.8rem; } .logo { font-size: 1.5rem; } .car-detail-panels { right: 1rem; bottom: 5%; } .layer-car { background-size: 150%; } } @media (max-width: 480px) { .car-title { font-size: 2rem; } .nav-links { display: none; } .car-detail-panels { display: flex; flex-direction: row; bottom: 1rem; right: 50%; transform: translateX(50%); } .detail-panel { width: 50px; height: 50px; } .detail-panel-icon { font-size: 20px; } .layer-car { background-size: 180%; } } </style> </head> <body> <div class="progress-bar"></div> <div class="parallax-container"> <div class="parallax-layer layer-bg"></div> <div class="parallax-layer layer-road"></div> <div class="parallax-layer layer-car"></div> <div class="parallax-layer layer-details"> <div class="nav"> <div class="logo"><span></span>PHANTOM</div> <div class="nav-links"> <a href="#">Models</a> <a href="#">Performance</a> <a href="#">Innovation</a> <a href="#">Experience</a> </div> </div> <div class="car-details"> <h1 class="car-title">PHANTOM EVOLUTION</h1> <p class="car-description">Redefining the boundaries of automotive engineering, the Phantom Evolution merges cutting-edge aerodynamics with sustainable performance. Not just a car—a statement of technological mastery.</p> <div class="car-specs"> <div class="spec-item"> <div class="spec-label">Acceleration</div> <div class="spec-value">2.4<span class="spec-unit">s</span></div> </div> <div class="spec-item"> <div class="spec-label">Top Speed</div> <div class="spec-value">330<span class="spec-unit">km/h</span></div> </div> <div class="spec-item"> <div class="spec-label">Range</div> <div class="spec-value">620<span class="spec-unit">km</span></div> </div> </div> <button class="cta-button">Reserve Experience</button> </div> </div> <div class="car-detail-panels"> <div class="detail-panel"> <div class="pulse"></div> <div class="tooltip">Aerodynamic Design</div> <div class="detail-panel-icon">★</div> </div> <div class="detail-panel"> <div class="pulse"></div> <div class="tooltip">Interior Luxury</div> <div class="detail-panel-icon">⚙</div> </div> <div class="detail-panel"> <div class="pulse"></div> <div class="tooltip">Performance Stats</div> <div class="detail-panel-icon">⚡</div> </div> </div> <div class="speed-lines"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const parallaxContainer = document.querySelector('.parallax-container'); const layerBg = document.querySelector('.layer-bg'); const layerRoad = document.querySelector('.layer-road'); const layerCar = document.querySelector('.layer-car'); const carDetails = document.querySelector('.car-details'); const progressBar = document.querySelector('.progress-bar'); const speedLines = document.querySelector('.speed-lines'); // Generate speed lines for (let i = a= 0; i < 20; i++) { const line = document.createElement('div'); line.classList.add('speed-line'); line.style.top = `${Math.random() * 100}%`; line.style.left = `${Math.random() * 100}%`; line.style.width = `${50 + Math.random() * 100}px`; line.style.opacity = `${0.1 + Math.random() * 0.4}`; speedLines.appendChild(line); } // Show car details with animation setTimeout(() => { carDetails.style.opacity = '1'; carDetails.style.transform = 'translateY(0)'; }, 500); // Parallax scroll effect let scrolling = false; let scrollTimeout; let lastScrollTop = 0; window.addEventListener('scroll', function() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; const scrollPercent = (scrollTop / (document.body.scrollHeight - window.innerHeight)) * 100; progressBar.style.width = `${scrollPercent}%`; // Check if scrolling down or up const scrollDirection = scrollTop > lastScrollTop ? 'down' : 'up'; lastScrollTop = scrollTop; // Only update if within container bounds if (scrollTop <= parallaxContainer.offsetHeight) { const yScroll = scrollTop * 0.5; layerBg.style.transform = `translateZ(-2px) scale(3) translateY(${yScroll * 0.2}px)`; layerRoad.style.transform = `translateZ(-1px) scale(2) translateY(${yScroll * 0.4}px)`; // Zoom in/out car based on scroll direction if (scrollDirection === 'down') { layerCar.style.backgroundSize = '130%'; } else { layerCar.style.backgroundSize = '120%'; } // Show speed lines when scrolling fast if (!scrolling) { scrolling = true; speedLines.style.opacity = '1'; clearTimeout(scrollTimeout); scrollTimeout = setTimeout(function() { scrolling = false; speedLines.style.opacity = '0'; }, 150); } } }); // Handle click on detail panels const detailPanels = document.querySelectorAll('.detail-panel'); detailPanels.forEach(panel => { panel.addEventListener('click', function() { // Flash effect panel.style.backgroundColor = 'var(--teal)'; setTimeout(() => { panel.style.backgroundColor = 'rgba(15, 15, 15, 0.7)'; }, 300); // Show different car angle based on which panel was clicked const panelIndex = Array.from(detailPanels).indexOf(panel); switch(panelIndex) { case 0: // Aerodynamic view layerCar.style.backgroundImage = "url('https://images.unsplash.com/photo-1544829099-b9a0c07fad1a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"; break; case 1: // Interior view layerCar.style.backgroundImage = "url('https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"; break; case 2: // Performance view layerCar.style.backgroundImage = "url('https://images.unsplash.com/photo-1560009320-c01920eef9f8?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80')"; break; } }); }); // Simulate mouse movement for dynamic car viewing parallaxContainer.addEventListener('mousemove', function(e) { const xPos = (e.clientX / window.innerWidth - 0.5) * 10; const yPos = (e.clientY / window.innerHeight - 0.5) * 5; layerCar.style.backgroundPosition = `calc(50% + ${xPos}px) calc(40% + ${yPos}px)`; }); // Add hover effect to CTA button const ctaButton = document.querySelector('.cta-button'); ctaButton.addEventListener('mouseenter', function() { this.style.backgroundColor = 'var(--teal)'; }); ctaButton.addEventListener('mouseleave', function() { this.style.background = 'linear-gradient(90deg, var(--teal), #00a0a0)'; }); // Handle CTA button click ctaButton.addEventListener('click', function(e) { e.preventDefault(); // Visual feedback this.textContent = 'Experience Reserved'; this.style.background = 'linear-gradient(90deg, var(--orange), var(--teal))'; // Restore after 2 seconds setTimeout(() => { this.textContent = 'Reserve Experience'; this.style.background = 'linear-gradient(90deg, var(--teal), #00a0a0)'; }, 2000); }); // Create a simulated scroll animation on page load setTimeout(() => { window.scrollTo({ top: 10, behavior: 'smooth' }); setTimeout(() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }, 1000); }, 1500); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NEONWAVE • Music Collective</title> <style> :root { --neon-pink: #ff00ff; --neon-blue: #00ffff; --neon-purple: #9d00ff; --neon-green: #00ff8c; --dark-bg: #0a0a16; --darker-bg: #050510; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Chakra Petch', sans-serif; } body { background-color: var(--darker-bg); color: white; overflow-x: hidden; height: 100vh; perspective: 1px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--neon-purple) var(--darker-bg); } body::-webkit-scrollbar { width: 8px; } body::-webkit-scrollbar-track { background: var(--darker-bg); } body::-webkit-scrollbar-thumb { background-color: var(--neon-purple); border-radius: 4px; } @font-face { font-family: 'Chakra Petch'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/chakrapetch/v9/cIf6MapbsEk7TDLdtEz1BwkWi6pgeL4.woff2) format('woff2'); } .container { width: 100%; max-width: 700px; margin: 0 auto; overflow: hidden; position: relative; height: 700px; } .background-grid { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(var(--dark-bg) 1px, transparent 1px), linear-gradient(90deg, var(--dark-bg) 1px, transparent 1px); background-size: 30px 30px; opacity: 0.15; z-index: -1; transform: perspective(500px) translateZ(-1px) scale(2); } .stars { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; } .star { position: absolute; width: 2px; height: 2px; background-color: white; border-radius: 50%; animation: twinkle var(--duration) ease-in-out infinite; opacity: var(--initial-opacity); } @keyframes twinkle { 0%, 100% { opacity: var(--initial-opacity); } 50% { opacity: 1; } } header { padding: 20px; position: relative; z-index: 10; display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 24px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; color: white; text-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple); position: relative; } .logo::after { content: ''; position: absolute; width: 100%; height: 2px; bottom: -5px; left: 0; background: linear-gradient(90deg, transparent, var(--neon-purple), transparent); animation: pulse 3s infinite; } @keyframes pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } nav a { margin: 0 10px; color: white; text-decoration: none; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; position: relative; transition: all 0.3s ease; } nav a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: linear-gradient(to right, var(--neon-pink), var(--neon-blue)); transition: width 0.3s ease; } nav a:hover { text-shadow: 0 0 8px var(--neon-blue); } nav a:hover::after { width: 100%; } .parallax-section { height: 600px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; } .parallax-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; will-change: transform; } .layer-1 { background: radial-gradient(circle at center, var(--neon-purple) 0%, transparent 70%); opacity: 0.15; filter: blur(20px); transform: translateZ(-0.5px) scale(1.5); } .layer-2 { background: linear-gradient(45deg, var(--neon-pink) 0%, transparent 60%); opacity: 0.1; filter: blur(15px); transform: translateZ(-0.3px) scale(1.3); } .layer-3 { display: flex; justify-content: center; align-items: center; transform: translateZ(0) scale(1); } .album-art { width: 300px; height: 300px; position: relative; transform-style: preserve-3d; transition: transform 0.5s ease; } .album-art:hover { transform: perspective(500px) rotateY(15deg); } .album-cover { width: 100%; height: 100%; object-fit: cover; position: absolute; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 30px var(--neon-purple); border: 1px solid rgba(157, 0, 255, 0.3); } .album-cover::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(255, 0, 255, 0.2) 0%, transparent 40%, rgba(0, 255, 255, 0.2) 100%); z-index: 2; pointer-events: none; } .album-info { position: absolute; bottom: -70px; left: 0; width: 100%; text-align: center; opacity: 0; transform: translateY(20px); transition: all 0.5s ease; } .album-art:hover .album-info { opacity: 1; transform: translateY(0); } .album-title { font-size: 24px; font-weight: bold; margin-bottom: 5px; text-shadow: 0 0 10px var(--neon-blue); } .album-artist { font-size: 16px; color: var(--neon-green); } .holographic-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( 135deg, rgba(255, 0, 255, 0.1) 0%, rgba(0, 255, 255, 0.1) 25%, rgba(157, 0, 255, 0.1) 50%, rgba(0, 255, 140, 0.1) 75%, rgba(255, 0, 255, 0.1) 100% ); pointer-events: none; z-index: 3; mix-blend-mode: overlay; animation: holographic 5s linear infinite; } @keyframes holographic { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } } .glitch-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAUm0lEQVR4nO2d25LjKBCGQTIg7IP2/V9zHyRASM7Obv7qmkvbbbft7mwlVerutiX4ISCJ82g0Go1Go9FoNBqNRqPRaDQajUaj0Wg0Go1Go9FoNBqNRqPRaDQajUaj0Wg0Go1Go9FoNBqNRqPR+H8DMcaFEJhjPPk3KQUr5a9+tv8HjuNQWuv3tm2zbduDUmoZhoG5Nx2BjDG1bZsOw7CTH3qv69o553bOOWKMEWPsqm1bqbVWWmu9LMvHPM/s6XP9NoQQcLvdPtvQYRh24xzGGNmT5/qtfD6fE/73dV1Xay1ZllXatqVRpWkaaNuWKKVgv9/DMAyQZRljjAEiAkopHMexMMastVZN0/SH+u0IIVAIAcfj0QHA1Pe9Yl02TROMsa+u62rb3ftx2YT6jAR5nid/lVI5eJvGWHc6nfZ5nsE5h67romVZGOcc8jyPAFDM8+y01u5wOOx936NzrumPpTnnwBiDcRzheDyCcy45HbmXcRwVISR47zvv/T7PM7RtC/f7HQBAaK2BMQbee6SUbmVZFmvto+97N89z8cTlfhVCCKCUwvV6hRACtG0LQggYx9H7lHkZY1RK5RhjoJT2nHNwziHP89B1nTfGLMuyNK3xGwGAEEKApmlACOG37XAYhoXcZsf0PM9XrbXXWlsppTPGUErpL368n4NSCoQQ6LoOlmWBpmmA9oP7QJumGV6v19d2lLXWoZTyfd97pbTzPjwhxNM0TcV9fl2Wd30KIYRSSgkhhFJKGWOMEsIRADDGADjn5CklMHyc9J0BAJAQAhDx+Jxpvs4bY4AQcnDOQWttj8cjGGNCURRBCPFKRlhrHaUUrLWw7zs8nc+v5RUpJaWUknI+OQqNpXx/HofDHeMcsM/zIpAj8Ln7sgAA/h1/0xjHkZRl2VdVNXPOf74UT1/EGOOCc5jn+a+vd7vd2nEcoeu6b59FSgnbtoHWGq7XKzjn4HQ6vZLUZ7JWKSVT7PXnS/9Hh+XPuq4bMMZG8zTvFOcchBCglHImTX6+XjAKHsL5fB4AgJdluT+u1w9KKXjvIYQA0zRBCAGu12sb1t8IpcAwDHC/34Hz9PynlIK+70EpFeq6PuVX6z0L3vtQVdX+4vV+IfpM3G43UEoBYww458d/fwKtNTjnQCmV13V93DLOOei6DkIIAPDDDMn/yFcsy4KMMYgxQgj78W8ppeecc0LIkb0fD+UPUkpwzsFHXQNjDI7HI0zTBIyxlGUNbVOCMcZ1XfeqqvLGRrHWHu8z63OwriusteCcO7z3h/NZa+2Px+MQQrjUdT07595+QKwLYeehHHqQGOOeZx/kZw7IFwghsNbCuq6Qc/75d0orBGOQffQoxyieTmc1TbO/bVvZtm2dpikredd91+s1XS8X2LYN2rYFYwzcbrdDxtwFKYQAaZqG8jXStC2UZSkoowAgfbgCYwwNwwDzPB+MsTKP7uPHa31m3JwUJJhzDgCODZqm6ZARZhgG6PsepJRQFAWM45j3fYd935FSiojYh68sLqW0LKHsY3f/K46O8jfvvT99Xl6hnEkpCca4X69XoJSCMcbbYSA55+vzeYdNb2A3Kzm0FcD3cJmlNGqbBsw8A+cMhmH8GIbh0+AeprGwMXZfObJ2XELWDrq+3y+nE3LOsa5rkaYJxnGEfd9T87y7rktLHDnnU9/3pJTK4jg+dsdvIoQA+76DMQaGYdBSShLCDh52IABwlFKDMcYLId50cGsQQnApJYQQyL7vtO/7kWXZvepavK7L5LoOyj1ACAEyxkgpJRzvBoBhmMj9foc8z6EoitR1vZnneQHA7LouOecOIYTLGHM8fLbfzLIsqapqRERKCCn4/f6vdhUhhJOUkg0hpFPfLT/kkFKaEJ3Qg9QUEmFECjy0Qogx5oZHmn0aRyClTH3X0eY45BghY5xuW0oAsDXG9Pu+F8YYYYxB5xw3a72QUpJzLs9rF3z23u/e++i9j8YY55xLCBDGGJdznqSUJKV0uN5fgPf+cRjrukJVVWCMofbKz3k3Ig5n3kAJJEogxpiAIGfGuACQOABA+h+I2AXvRUQUQshzzkAphevlAsSFGG9XyqL/g4i5qqqyrusrIcSFEPYQghVCeCEAQgjbm5f+UGitYRiGT+ccobTlTLwVpB/wk1eUVkacV6ZJKdG2baqqimmt6ePxKBE91FW+U0r3x+NRSykPrfXatm0DZSqmaa5USjUMw5VzPm3bpiEEoKQaOOcAAAfjPCFiIIy8vN5fGCEEvvc5hJDn6c0F4C/3xYVQIwZK42ioO4/N2MnHeQrMYSYiDchoqfOcUlJVxvYsz1FX+Sil1CEEHULQnHPsvNfee6q1pvu+o1IKlpg/QgiP7zNH4PFh/gIY4xBCQGcthBDAGJs/r/MzrHvbgJSvNjEBDwBDZVAEEEJCQj65rhpg5ACrfJDUdd0uhHB93xvO+ZRzHnPO+7ZtNee8nKbJhhBOucFZyrlK+7Yuy0JyzhBCYJSqg1IaAMBggGNvxOgLQF44JaXl1D9OZCIfn4USB8nC6IcUZaQRbHQYGLIFIAjYAZxvd8gL6RGzEgDg6/UIq7XrruvG1lgcQnBpnqcNAHrGWFcURZGUUkVd12XG+KSSWhBRWWvVOI4r59xQykhRFAYRXczxUznn0hgTHwPbGGeYc+ZCvF7XLwQRURvjvfdolOZSyvLLtb5T1zVwzi3nvDfGRsYY9n0/Ucq8c8765Uh+TUDg4JGSC5ICnkbMWu+aq6ZpSNM0j0vl2pAQx+z9AgCFtbabpmmSUnrO+aGUGsZxpDHGMudcpJTKuq6r6/UKTdPA5XKBsizh8XjE2+0GIYTvR0UpXZRSmhASlmVhlNImMi7SHPPrN+i9h7quoSiKJ3X2j5MKrTVcrzcASDDbraiqqq6qSr9+2H8L50eMcQcA6PteKaXqPM9bzrnVWgdj9DTNdhxH65wbUkp5nmfnnDvq0aYZYxynpIaU0pZz3nLOUJbldn88hpgzR0Q0xtCc86OU0qfT6WC+J05v5J/U/ZFzzpwx9ng85MfHR/n5+fn1R6SUDxkTABBjHMdpmt98nfcTQsC6rlBVFRU8Hu/ZKHVSyhwpZazreixSaodhGH5kmv8DX7a+tTZbG+ZpnmdCyBBjVN77FGPUM6VVlmX9tm1D+tKVIIQMlFLsnMOyLOU8z8Nszc45V977vWkaV1UVeuddznkahoFTSsPnbU9VVadlWcbjOGZrLZZlmVJKPPxQ9P5CvPdwzmZCyYeC8NpR5nAcKXgYttlCmcVnp0SYWykF1lr/UlbvIIQAWmtARHKapvH1DP8LTdN455zbti10XUcppZAQAeNRGGNpHMdlFwLHcTTGmMp7X+acSQiB5ZxZURS2LEtbFAUWReHGcXQppd1auwEAVVq53W5zDOFrL4SQsKqqJ9b9hWRLB8s34EAAPAHbckDe0eWhEQC2TcKn1CDnTDjn5UuL+Msgi/nXm3s+n+F6vcI4jlBVVUJEGwHguq6oU0r7vo/OuXVdV7dt28o5d0op13VdLaUspZRkWZZEKTUAQCmlJ4SQfd8VpZRQSvl1XUkIYS+Kgj47a/M8P3+wPw0hpb8YOZDCzSxCKF97ZdsMD7lBCcm8P76+bnVdY1mWRCnt3rz5M95n5mmaIHtHQ3QeLbJpmoAxxqZpKgCgL4qiL8uyVUqVWuskpaSUUlJVVb6u67rv+1ZrTdZ1pSklzBjHs2j11h7atvVt04L3HsZx3K21/hUF/QcJKUEWxeCcY+Uc+pABC4hBuRB3jPEDYwx32xADQB7HEZQOkGXZ9tLNPcF7DyGE5IVtDYMcx9G5bfOvr/lBVVXQtm2hlKqMMS3n3OacQ5ZlzhjjELFM+tKtruu0bRs1xpDHbUkhBS5EAaMEMKfQ9/16PB7dNE3xdDp9vfnfBGMM+76PXdf9PMrO8wpVVR1FUdSmqgbENBrMrCrKTpyvpCzLQimVY/Q7xjjnEKZpmtd1XVNKKcaYU0pZKaVPOTsAoJZSRkopaK1DHte+bVvvnIu32w2qqnrL6P5pHo9HmKYJOOcwTdP+7HM0TXOUPx7uXMXsDQjAGYBRGgAAJeEHF0VRKKXqa0NISrqum4wx67ZtIYSwpx37ed9XpdQmpbSHwxGKoiCMMTocDsQ5R1JKJ4TAU0pXxtjR9/1hjGmXZbHGGJtlWTZNk5mmmTjnTyXcO4eo/ZCRQwiUeXyeOLvT6QQfHx/T6XS63+93yDmDEOLrjf40fd+D9x6KooBGKXXWWufbtu1vv+b7dF2XYozr4XDY1nWNZVlGDBSt7cyyLG/bVlZVBfM8Z+89rOvq933XxFbRh8BDCNlam+Z5tpTSubQNxhiMc8gYM0VZIM8y7Ps+pLnBDQBIVVUZACittVVK+ffGAH8hnPPI82w5nU5D13X5er3C5XKBZVmSMWbLsvwVZf41Ukrw3kNVVXA8HiFnu72czvxEOXbv/XHOOaWUlDHGppSylBKJ0VvrfCaEpK7rklJqizFujDHsnNuNMRsAsJzzfLlcurquO845K8syL8siT6eT5JxTwQXd991zzsdnb/QbEUIg59xxm+BwPCTv/UubFv8E8zwDImJuNn65XAYpZR/mCZ1zBHO21jp5OBzAWptdLhdFOcdxHDkhBA/DUGdZ1qSUupyzmec5Xde1J4TsyTtsrbW12SYAgBBCUkp5774dXUwpsSybQAgNAQZ4Ytr/JOM4PjOqWkqZ9n2/v/V63kAIge/cU/9XhBCw7zu0bZuXZZmu12vvvT99Ppf4vfdzXdd0mqbLMAzN8Xi8rOvKT6dT/ng8uHOOFEWRqqr60Fq3m92KabLlSK99LrL9D8RojXPe8iyrLhaIr7jT3wWlFJxzlBCyjeMYXl7rO7fbDbquSznnfdt2stmsft/3zzIgI46jMsboiKjneS7atu2dc4SeMx/medZZlpGqqlLXda4sy0JrXVBKec75vix1pVSllLJt21aIsqDPrtm2bVtZ6xLn/JnnBwBw7PONQKVQzXvNMTFv76dpAgjRb9vS7vvu3r7eGeSc4XK54DAMAQBAKdW+fPrXU2cMtm2TuR+8tVYxxrIsyxhjDCFEzzm/7fu+cs4P3vs05yxjjDmlxDnnRCkVSimVcx5ZxmQIYQ8hBEopSSkREIATQnbO+bxtm2OMQdu2ZVEUYtc3VzTbVNvMo1LqL58CY0zOGBYEYrFtW7Ft2z/6Rn8Sx3F8HBZN0/Tt8XhgSuln6JJSApOXjjLGHIQQW9/3VmutnXO+aZrJWiv3fY/TNA0ppTHnvDLGnjFPVoyx01qfrbUNxhhTSrMsy7Z9j0VRkCzL0rZtRimFnXOQbKTWWr+ua8w5C845V0qVAJC3bZvleVnfLZGEJIScKaWCcx4hfOX+/SbGcfy6jmma5N7rXdM0OSEEAhxB7h/UdQ1VVQnnXLfvuzudTnrbtitjjJ1OJ5NSCsu6xrIsYdMbK4oChRDfMl0xRscYW621NcaYu93uZwIAeJ4fM0qAMwYYYxJC7IwxK4Tw9fCJjHOeE0KYlLLqur7/+PgoOOdAKT26rov3+9333Qkul8vXBvk9iGmAeHAMEfV2uw24DMOjYZwEKWUXY7SASGOE/hNiXOdlWYzW+mCMKQH+3fgnhKCUMmOMEUJI+RHvSCklHULQlFJ6zgVn2fb7Dc6T955KKTcAOLZtK9q2FVmWxRjjJoQQWit9Pp8rKaUSQmyMcTsc/D/qug6MMVjXFXHuAFGjUjWUZZnHcYxxGCGbAUPXdTmEc5rECQDI4XCYeVGgnOTvudH/QwgBWJYB7VxP07RSRT6TbSvHcXTXL3NdNzQMQzLGpNvtBsMwzMuyCEVIYIyZqqpqtNZSSomiKL7nZgCZJmEYBklBu9ZaQQjhnPMopcyI2Eop66K8paPBHRbvvfTeY13XB865BQAWQgjLsgirddC2LWVZZmKMEUL41U+8HSklfDweEXMQRO6I2DPG7l3XzdM0USGEAQDXdR2d9bwhjrqus3meu3Vd+9PptLRt+7OnCjFGnzPQJFdCSrEOw1DEGL+S4hhjIYSwxxjVuq55WZZ0t3Y5lYD7vrO2bYUQYo8pnVJKO+f8ZIyhWZZptm0M9n2PxLm1qioLIcQY4/Eub80Kfzs5Z/De+xgjKsZDpA0pnXWlDSGsxA2DZpqmT2vt3XsfD4eDK4pi0Vrr6/V6+OfnVLXWnRCCSynDtm0xYwQpRYwxWkJIRSnOd0oR47Svq9UhxOiccyHGGGMMIRlJDscjl1LGnLMJIRhrrT0cDkZrHTnnLuccX9qQ/jcgYoTA3hDYgojfkmk3+TnU5Xg8PjH/vu+pMaYKIZQpJeWcQ9u2HZGi+Gdzq/Z9B8YYIOIHYyxDQJO9T9baGGOMznOvFJ1sWdRpnmehVECMsY8x9iHuPMm7tdYqIcQupbSUUluWJauq6psev+kof0O2bYPT6ZTquibnfV+7rtMY4z1dLu5+u19jjIPzHqSU+2HPzlbnJGW9YhyH/HGILtbfJU8ppSHGeDQjvHdSysJaK3LO3lq7E0Kscy4T56D9TH3qZ1SUvxgpJRwOB/dUfigpxTRNMssyv23bQ0LGGLHWrjll9jzM9SHe8TwdRlEIAc45nOd5HsdxzDmzv3kOf1oOu4NSCr7rWiYJDiDgRZYxOw1jbjbjcd3pnnNmUogohGBSyt4YswDAIqVcDwfjnPv1d/BXgoi4G4OOcV+HkOwLgB9S4BnfkGXZPQRPbrcb7Ptu+76fd7v5JY39ZyAHWZv9yCnLGXLG0Bd5n4efTxkCYwEBIKFEOIwVc+9Z8RYAuL72+H8LhJB0Op3y1PeoJx9KW1/nCUkPYpwhpTjJfhK59c0J/UWsVlsA6L335qWl6q9pQ34pzjlYlgWapvk8E0ULmyNorTGEREmJyzJXVeVAiKlxGEIw9r9cHnkvOecDAFqlGX8KH/4q/rSH9b3pTKPRaDQajUaj0Wg0Go1Go9FoNBqNRqPRaDQajUaj0Wg0Go1Go9FoNBqNRqPRaDQajUaj0Wg0Go1Go/Eb+TeBBgfK1UMgaAAAAABJRU5ErkJggg==') repeat; opacity: 0.06; pointer-events: none; animation: glitch 60s linear infinite; } @keyframes glitch { 0% { background-position: 0 0; opacity: 0.03; } 25% { background-position: 100px -100px; opacity: 0.04; } 50% { background-position: -100px 200px; opacity: 0.06; } 75% { background-position: 50px -50px; opacity: 0.05; } 100% { background-position: 0 0; opacity: 0.03; } } .vinyl-record { position: absolute; right: -80px; top: 50%; transform: translateY(-50%); width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at center, #111 0%, #222 40%, #333 60%, #222 80%, #111 100% ); box-shadow: 0 0 15px rgba(0, 0, 0, 0.8); z-index: 1; display: none; animation: rotate 8s linear infinite; } .vinyl-record::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 35%; height: 35%; border-radius: 50%; background: radial-gradient(circle at center, var(--neon-pink) 0%, var(--neon-purple) 100% ); box-shadow: 0 0 10px var(--neon-purple); } .vinyl-record::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10%; height: 10%; border-radius: 50%; background: #333; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); } @keyframes rotate { 0% { transform: translateY(-50%) rotate(0deg); } 100% { transform: translateY(-50%) rotate(360deg); } } .tour-dates { position: absolute; bottom: 20px; left: 0; width: 100%; z-index: 10; } .tour-dates h2 { text-align: center; font-size: 28px; margin-bottom: 15px; color: var(--neon-blue); text-shadow: 0 0 10px var(--neon-blue); text-transform: uppercase; letter-spacing: 2px; } .tour-list { display: flex; overflow-x: auto; padding: 0 20px; scroll-behavior: smooth; scrollbar-width: none; } .tour-list::-webkit-scrollbar { display: none; } .tour-item { flex: 0 0 auto; width: 180px; margin-right: 15px; padding: 15px; border: 1px solid rgba(0, 255, 255, 0.2); background: rgba(10, 10, 22, 0.8); backdrop-filter: blur(10px); border-radius: 4px; position: relative; overflow: hidden; transition: all 0.3s ease; transform: translateY(120px); opacity: 0; animation: slideUp 0.8s forwards; animation-delay: calc(var(--delay) * 0.1s); } @keyframes slideUp { to { transform: translateY(0); opacity: 1; } } .tour-item:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 255, 255, 0.15); border-color: var(--neon-blue); } .tour-item::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple)); } .tour-date { font-size: 18px; color: var(--neon-green); margin-bottom: 5px; } .tour-city { font-size: 14px; color: white; margin-bottom: 5px; font-weight: bold; } .tour-venue { font-size: 12px; color: rgba(255, 255, 255,
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Parallax - Innovative Tech Solutions</title> <style> @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); :root { --primary: #1a2b49; --secondary: #2f80ed; --accent: #56ccf2; --light: #f5f9ff; --dark: #0d1526; --text: #333747; } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: 'Space Grotesk', sans-serif; color: var(--text); background-color: var(--light); overflow-x: hidden; line-height: 1.6; } .container { max-width: 700px; margin: 0 auto; padding: 0 1rem; overflow: hidden; height: 700px; position: relative; } .parallax-wrapper { height: 100vh; overflow-x: hidden; overflow-y: auto; perspective: 10px; } .header { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; z-index: -1; } .bg-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary), var(--dark)); transform: translateZ(-10px) scale(2); } .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } .particle { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.1); animation: float 20s infinite linear; opacity: 0; } .floating-shape { position: absolute; background: linear-gradient(135deg, var(--secondary), var(--accent)); border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: translateZ(-5px) scale(1.5); opacity: 0.3; animation: morphing 15s infinite; } .header-content { text-align: center; color: white; transform: translateZ(-5px) scale(1.5); padding: 2rem; opacity: 0; animation: fadeIn 1s ease-out forwards 0.5s; } .header-content h1 { font-size: 3rem; margin-bottom: 1rem; letter-spacing: -0.02em; font-weight: 700; background: linear-gradient(to right, #fff, var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .header-content p { font-size: 1.2rem; max-width: 600px; margin: 0 auto; margin-bottom: 2rem; } .cta-button { display: inline-block; padding: 0.8rem 1.8rem; background: linear-gradient(135deg, var(--secondary), var(--accent)); color: white; text-decoration: none; border-radius: 30px; font-weight: 600; font-size: 1rem; transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; cursor: pointer; } .cta-button:before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: all 0.6s; z-index: -1; } .cta-button:hover:before { left: 100%; } .sections { position: relative; z-index: 1; background: var(--light); } .section { padding: 4rem 2rem; opacity: 0; transform: translateY(50px); transition: all 0.8s ease; } .section.visible { opacity: 1; transform: translateY(0); } .section-title { text-align: center; margin-bottom: 3rem; position: relative; } .section-title h2 { font-size: 2.2rem; color: var(--primary); font-weight: 700; margin-bottom: 1rem; letter-spacing: -0.01em; } .section-title::after { content: ''; position: absolute; width: 60px; height: 3px; background: linear-gradient(to right, var(--secondary), var(--accent)); bottom: -10px; left: 50%; transform: translateX(-50%); border-radius: 2px; } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 2rem; } .feature-card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(to right, var(--secondary), var(--accent)); z-index: -1; transition: height 0.3s ease; } .feature-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .feature-card:hover::before { height: 8px; } .feature-icon { margin-bottom: 1.5rem; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(47, 128, 237, 0.1), rgba(86, 204, 242, 0.1)); border-radius: 12px; } .feature-icon svg { width: 24px; height: 24px; color: var(--secondary); } .feature-card h3 { font-size: 1.3rem; margin-bottom: 1rem; color: var(--primary); } .timeline { position: relative; max-width: 600px; margin: 3rem auto; } .timeline::before { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background: linear-gradient(to bottom, var(--secondary), var(--accent)); transform: translateX(-50%); } .timeline-item { position: relative; margin-bottom: 3rem; width: 100%; } .timeline-item:nth-child(odd) { padding-right: calc(50% + 30px); text-align: right; } .timeline-item:nth-child(even) { padding-left: calc(50% + 30px); text-align: left; } .timeline-dot { position: absolute; top: 8px; width: 16px; height: 16px; background: linear-gradient(to right, var(--secondary), var(--accent)); border-radius: 50%; box-shadow: 0 0 0 4px rgba(86, 204, 242, 0.2); } .timeline-item:nth-child(odd) .timeline-dot { right: calc(50% - 8px); } .timeline-item:nth-child(even) .timeline-dot { left: calc(50% - 8px); } .timeline-content { padding: 1.5rem; background: white; border-radius: 12px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .timeline-year { font-size: 0.9rem; font-weight: 600; color: var(--secondary); margin-bottom: 0.5rem; } .timeline-content h3 { font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--primary); } .footer { background: var(--primary); color: white; padding: 2rem; text-align: center; } .scroll-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 30px; height: 50px; border: 2px solid white; border-radius: 15px; cursor: pointer; opacity: 0; animation: fadeIn 1s ease-out forwards 1.5s; } .scroll-indicator::before { content: ''; position: absolute; top: 10px; left: 50%; width: 6px; height: 6px; background: white; border-radius: 50%; transform: translateX(-50%); animation: scrollMouse 2s infinite; } .cursor-follower { position: fixed; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, rgba(47, 128, 237, 0.5), rgba(86, 204, 242, 0.5)); pointer-events: none; mix-blend-mode: difference; z-index: 9999; transform: translate(-50%, -50%) scale(0); transition: transform 0.15s ease-out; opacity: 0.7; } .nav { position: fixed; top: 20px; right: 20px; z-index: 100; display: flex; opacity: 0; animation: fadeIn 1s ease-out forwards 1s; } .nav-btn { width: 10px; height: 10px; border-radius: 50%; margin: 0 5px; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: all 0.3s ease; } .nav-btn.active { background: white; transform: scale(1.3); } .logo { position: fixed; top: 20px; left: 20px; z-index: 100; color: white; font-weight: 700; font-size: 1.5rem; letter-spacing: -0.05em; opacity: 0; animation: fadeIn 1s ease-out forwards 1s; } .logo span { color: var(--accent); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scrollMouse { 0% { opacity: 1; top: 10px; } 100% { opacity: 0; top: 30px; } } @keyframes float { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(180deg); } 100% { transform: translateY(0) rotate(360deg); } } @keyframes morphing { 0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } 25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; } 50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; } 75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; } 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } } @media (max-width: 768px) { .header-content h1 { font-size: 2.2rem; } .header-content p { font-size: 1rem; } .section { padding: 3rem 1rem; } .section-title h2 { font-size: 1.8rem; } .timeline::before { left: 30px; } .timeline-item:nth-child(odd), .timeline-item:nth-child(even) { padding-left: 70px; padding-right: 0; text-align: left; } .timeline-item:nth-child(odd) .timeline-dot, .timeline-item:nth-child(even) .timeline-dot { left: 22px; } } </style> </head> <body> <div class="container"> <div class="parallax-wrapper"> <div class="cursor-follower"></div> <div class="logo">Horizon<span>X</span></div> <div class="nav"> <div class="nav-btn active" data-index="0"></div> <div class="nav-btn" data-index="1"></div> <div class="nav-btn" data-index="2"></div> <div class="nav-btn" data-index="3"></div> </div> <header class="header" id="home"> <div class="bg-layer"></div> <div class="particles" id="particles"></div> <div class="floating-shape" style="width: 300px; height: 300px; top: 20%; left: 60%;"></div> <div class="floating-shape" style="width: 150px; height: 150px; top: 60%; left: 10%;"></div> <div class="header-content"> <h1>Redefining Digital Boundaries</h1> <p>HorizonX builds intelligent systems that adapt to your business needs, combining AI with human expertise to create solutions for tomorrow's challenges.</p> <a class="cta-button" id="learn-more">Explore Our Tech</a> </div> <div class="scroll-indicator" id="scroll-down"></div> </header> <main class="sections"> <section class="section" id="features"> <div class="section-title"> <h2>Our Core Technologies</h2> </div> <div class="feature-grid"> <div class="feature-card"> <div class="feature-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path> <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline> <line x1="12" y1="22.08" x2="12" y2="12"></line> </svg> </div> <h3>Quantum AI</h3> <p>Our proprietary AI system leverages quantum computing principles to process complex data sets 10x faster than traditional models.</p> </div> <div class="feature-card"> <div class="feature-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path> </svg> </div> <h3>Adaptive Networks</h3> <p>Self-healing infrastructure that predicts failures before they happen and automatically reroutes critical processes.</p> </div> <div class="feature-card"> <div class="feature-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path> </svg> </div> <h3>Quantum-Proof Security</h3> <p>Future-ready encryption protocols designed to withstand attacks from next-generation quantum computers.</p> </div> </div> </section> <section class="section" id="timeline"> <div class="section-title"> <h2>Our Innovation Journey</h2> </div> <div class="timeline"> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="timeline-content"> <div class="timeline-year">2019</div> <h3>Foundation</h3> <p>HorizonX launched with a team of 12 engineers from MIT, Stanford, and Google</p> </div> </div> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="timeline-content"> <div class="timeline-year">2020</div> <h3>Quantum AI Patent</h3> <p>Developed our core Quantum Artificial Intelligence algorithm</p> </div> </div> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="timeline-content"> <div class="timeline-year">2021</div> <h3>Series A Funding</h3> <p>Secured $42M to scale operations and expand research capabilities</p> </div> </div> <div class="timeline-item"> <div class="timeline-dot"></div> <div class="timeline-content"> <div class="timeline-year">2023</div> <h3>Global Launch</h3> <p>Released our flagship platform in 27 countries with Fortune 500 clients</p> </div> </div> </div> </section> <section class="section" id="contact"> <div class="section-title"> <h2>Ready to Transform?</h2> </div> <p style="text-align: center; margin-bottom: 2rem;">Experience how our adaptive technology can revolutionize your business operations and drive innovation.</p> <div style="text-align: center;"> <a class="cta-button">Schedule a Demo</a> </div> </section> <footer class="footer"> <p>© 2023 HorizonX Technologies. Pioneering the digital frontier.</p> </footer> </main> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const sections = document.querySelectorAll('.section'); const navBtns = document.querySelectorAll('.nav-btn'); const parallaxWrapper = document.querySelector('.parallax-wrapper'); const cursor = document.querySelector('.cursor-follower'); const scrollDownBtn = document.getElementById('scroll-down'); const learnMoreBtn = document.getElementById('learn-more'); // Create particles const particlesContainer = document.getElementById('particles'); for (let i = 0; i < 30; i++) { const size = Math.random() * 10 + 5; const particle = document.createElement('div'); particle.classList.add('particle'); particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.left = `${Math.random() * 100}%`; particle.style.top = `${Math.random() * 100}%`; particle.style.opacity = Math.random() * 0.5; particle.style.animationDuration = `${Math.random() * 10 + 10}s`; particle.style.animationDelay = `${Math.random() * 5}s`; particlesContainer.appendChild(particle); } // Custom cursor document.addEventListener('mousemove', function(e) { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; cursor.style.transform = 'translate(-50%, -50%) scale(1)'; }); document.addEventListener('mouseout', function() { cursor.style.transform = 'translate(-50%, -50%) scale(0)'; }); // Intersection Observer for sections const observerOptions = { root: null, rootMargin: '0px', threshold: 0.2 }; const observer = new IntersectionObserver(function(entries) { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); } }); }, observerOptions); sections.forEach(section => { observer.observe(section); }); // Scroll event for nav highlighting parallaxWrapper.addEventListener('scroll', function() { const scrollPosition = parallaxWrapper.scrollTop; const headerHeight = document.querySelector('.header').offsetHeight; if (scrollPosition < headerHeight) { updateActiveNav(0); } else { sections.forEach((section, index) => { const sectionTop = section.offsetTop; const sectionHeight = section.offsetHeight; if (scrollPosition >= sectionTop - 100 && scrollPosition < sectionTop + sectionHeight - 100) { updateActiveNav(index + 1); } }); } }); // Click event for nav buttons navBtns.forEach(btn => { btn.addEventListener('click', function() { const index = parseInt(this.getAttribute('data-index')); scrollToSection(index); }); }); // Click event for scroll down button scrollDownBtn.addEventListener('click', function() { scrollToSection(1); }); // Click event for learn more button learnMoreBtn.addEventListener('click', function() { scrollToSection(1); }); // Helper function to update active nav function updateActiveNav(index) { navBtns.forEach(btn => { btn.classList.remove('active'); }); navBtns[index].classList.add('active'); } // Helper function to scroll to section function scrollToSection(index) { let target; if (index === 0) { target = document.getElementById('home'); } else { target = sections[index - 1]; } parallaxWrapper.scrollTo({ top: index === 0 ? 0 : target.offsetTop, behavior: 'smooth' }); } // Add hover effect to buttons const buttons = document.querySelectorAll('.cta-button'); buttons.forEach(button => { button.addEventListener('mouseenter', function() { cursor.style.transform = 'translate(-50%, -50%) scale(1.5)'; cursor.style.mixBlendMode = 'overlay'; }); button.addEventListener('mouseleave', function() { cursor.style.transform = 'translate(-50%, -50%) scale(1)'; cursor.style.mixBlendMode = 'difference'; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Parallax Magazine</title> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Source+Sans+Pro:wght@300;400;600&display=swap'); :root { --color-bg: #f8f7f4; --color-text: #2d2d2d; --color-accent: #7c9a92; --color-accent-light: #d7e0dd; --color-muted: #9b9b9b; --serif: 'Playfair Display', serif; --sans: 'Source Sans Pro', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; font-family: var(--sans); color: var(--color-text); background-color: var(--color-bg); overflow-x: hidden; scroll-behavior: smooth; font-size: 16px; line-height: 1.6; } body { background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23d7e0dd' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E"); } .container { width: 100%; max-width: 700px; margin: 0 auto; position: relative; height: 100%; overflow-y: auto; overflow-x: hidden; perspective: 1px; transform-style: preserve-3d; scroll-behavior: smooth; } header { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 90vh; padding: 2rem; text-align: center; transform-style: preserve-3d; z-index: 1; } .header-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--color-accent-light); transform: translateZ(-1px) scale(2); z-index: -1; } h1 { font-family: var(--serif); font-size: 3.5rem; margin-bottom: 1rem; line-height: 1.2; color: var(--color-text); position: relative; letter-spacing: -0.5px; } h2 { font-family: var(--serif); font-size: 2.5rem; margin-bottom: 1.5rem; line-height: 1.3; } h3 { font-family: var(--sans); font-weight: 600; font-size: 1.4rem; margin-bottom: 1rem; color: var(--color-accent); } .subtitle { font-family: var(--sans); font-size: 1.2rem; color: var(--color-muted); margin-bottom: 2rem; max-width: 600px; } .scroll-cta { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; opacity: 0.8; transition: opacity 0.3s ease; } .scroll-cta:hover { opacity: 1; } .scroll-line { width: 2px; height: 50px; background: var(--color-text); margin-top: 8px; position: relative; overflow: hidden; } .scroll-line::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-accent); animation: scroll-down 2s ease infinite; } @keyframes scroll-down { 0% { transform: translateY(-100%); } 50% { transform: translateY(100%); } 100% { transform: translateY(300%); } } .nav { position: sticky; top: 0; left: 0; right: 0; background-color: rgba(248, 247, 244, 0.9); backdrop-filter: blur(10px); display: flex; justify-content: space-between; padding: 1rem 2rem; z-index: 10; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); opacity: 0; transform: translateY(-20px); transition: opacity 0.5s ease, transform 0.5s ease; } .nav.visible { opacity: 1; transform: translateY(0); } .logo { font-family: var(--serif); font-weight: 700; font-size: 1.5rem; color: var(--color-accent); text-decoration: none; } .nav-links { display: flex; gap: 1.5rem; } .nav-link { color: var(--color-text); text-decoration: none; font-family: var(--sans); font-weight: 400; position: relative; transition: color 0.3s ease; } .nav-link::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--color-accent); transition: width 0.3s ease; } .nav-link:hover { color: var(--color-accent); } .nav-link:hover::after { width: 100%; } .article { padding: 5rem 2rem; transform-style: preserve-3d; position: relative; } .article-content { max-width: 600px; margin: 0 auto; opacity: 0; transform: translateY(40px); transition: opacity 1s ease, transform 1s ease; } .article-content.visible { opacity: 1; transform: translateY(0); } .article-meta { display: flex; align-items: center; margin-bottom: 1.5rem; font-family: var(--sans); color: var(--color-muted); font-size: 0.9rem; } .article-author { font-weight: 600; margin-right: 1rem; } .article-date { position: relative; padding-left: 1rem; } .article-date::before { content: '•'; position: absolute; left: 0.4rem; } .article-image { width: 100%; height: 300px; object-fit: cover; margin: 2rem 0; border-radius: 4px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); transition: transform 0.5s ease; cursor: pointer; } .article-image:hover { transform: scale(1.02); } p { margin-bottom: 1.5rem; font-family: var(--sans); font-size: 1.05rem; line-height: 1.8; color: var(--color-text); } blockquote { border-left: 4px solid var(--color-accent); padding-left: 1.5rem; margin: 2rem 0; font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--color-muted); } .reading-progress { position: fixed; top: 0; left: 0; width: 0; height: 3px; background: var(--color-accent); z-index: 99; transition: width 0.1s ease; } .tag { display: inline-block; padding: 0.3rem 0.8rem; background-color: var(--color-accent-light); border-radius: 20px; margin-right: 0.5rem; margin-bottom: 0.5rem; font-size: 0.8rem; color: var(--color-accent); transition: all 0.3s ease; } .tag:hover { background-color: var(--color-accent); color: white; transform: translateY(-2px); } .tag-container { margin: 2rem 0; } .article-divider { display: flex; align-items: center; margin: 4rem 0; } .divider-line { flex-grow: 1; height: 1px; background-color: var(--color-accent-light); } .divider-symbol { margin: 0 1rem; color: var(--color-accent); font-size: 1.4rem; } .next-article { display: flex; flex-direction: column; align-items: center; padding: 3rem 2rem; text-align: center; background-color: var(--color-accent-light); margin-top: 3rem; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .next-article:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .next-article::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%); transform: translateX(-100%); transition: transform 0.6s ease; } .next-article:hover::before { transform: translateX(100%); } .next-title { font-family: var(--serif); font-size: 1.8rem; margin-bottom: 1rem; } .next-preview { max-width: 500px; margin-bottom: 1.5rem; } .read-button { display: inline-block; padding: 0.8rem 1.5rem; background-color: var(--color-accent); color: white; border-radius: 30px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; border: none; cursor: pointer; font-family: var(--sans); } .read-button:hover { background-color: #698b84; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } @media (max-width: 600px) { h1 { font-size: 2.8rem; } h2 { font-size: 2rem; } .nav { padding: 0.8rem 1rem; } .logo { font-size: 1.2rem; } .nav-links { gap: 0.8rem; font-size: 0.9rem; } .article { padding: 3rem 1.5rem; } blockquote { font-size: 1.1rem; } } </style> </head> <body> <div class="reading-progress"></div> <div class="container"> <nav class="nav"> <a href="#" class="logo">Parallax</a> <div class="nav-links"> <a href="#article-1" class="nav-link">Featured</a> <a href="#article-2" class="nav-link">Travel</a> <a href="#article-3" class="nav-link">Design</a> </div> </nav> <header> <div class="header-bg"></div> <h1>The Art of Visual Storytelling</h1> <p class="subtitle">Exploring how parallax effects and thoughtful typography create immersive reading experiences in modern digital publishing</p> <div class="scroll-cta"> <span>Scroll to explore</span> <div class="scroll-line"></div> </div> </header> <article id="article-1" class="article"> <div class="article-content" data-index="1"> <div class="article-meta"> <span class="article-author">By Sophia Chen</span> <span class="article-date">July 18, 2023</span> </div> <h2>The Renaissance of Digital Magazine Design</h2> <p>In the ever-evolving landscape of digital publishing, magazine layouts have transcended traditional constraints. No longer bound by the physical limitations of paper, designers are leveraging web technologies to create reading experiences that feel simultaneously familiar and revolutionary.</p> <img src="https://images.unsplash.com/photo-1506399558188-acca6f8cbf41?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="Magazine layout in digital format" class="article-image"> <p>Parallax scrolling—once merely a novelty effect—has matured into a sophisticated narrative tool. When thoughtfully implemented, these depth-based transitions guide readers through content with a sense of physical movement, mirroring how we intuitively navigate spaces in the real world.</p> <blockquote> Design is not just what it looks like and feels like. Design is how it works. The best digital magazines understand that visual appeal must serve content accessibility. </blockquote> <p>The resurgence of serif fonts in digital spaces marks another shift in the industry. After years of sans-serif dominance due to screen resolution limitations, improved displays now showcase the subtle details and varied stroke weights of serif typefaces. This revival brings classical typography's warmth and authority to digital platforms, creating a balanced visual hierarchy when paired with clean sans-serif subheadings.</p> <div class="tag-container"> <span class="tag">Web Design</span> <span class="tag">Typography</span> <span class="tag">Digital Publishing</span> <span class="tag">User Experience</span> </div> </div> </article> <div class="article-divider"> <div class="divider-line"></div> <span class="divider-symbol">✦</span> <div class="divider-line"></div> </div> <article id="article-2" class="article"> <div class="article-content" data-index="2"> <div class="article-meta"> <span class="article-author">By Marcus Elliot</span> <span class="article-date">July 12, 2023</span> </div> <h2>Mindful Content Pacing in the Attention Economy</h2> <h3>How scroll-triggered animations create breathing room for complex ideas</h3> <p>In a media landscape dominated by infinite scrolling and algorithm-driven content consumption, thoughtfully designed magazine layouts offer a counterpoint to the frenetic pace of most digital platforms. By controlling the reveal of content through scroll-based animations, designers create intentional pauses—moments that allow readers to absorb and contemplate complex information.</p> <img src="https://images.unsplash.com/photo-1560264280-88b68371db39?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="Person reading a digital magazine" class="article-image"> <p>This approach represents a fundamental shift from the maximalist design philosophy that dominated early digital publishing—where designers, anxious about bounce rates, crammed as much content as possible "above the fold." Modern magazine layouts embrace whitespace and progressive disclosure, treating the scroll as a natural and intuitive interaction rather than an obstacle to content.</p> <p>Muted color palettes, featuring subtle earth tones and desaturated hues, complement this more measured approach. These color schemes reduce cognitive load while maintaining visual interest, creating environments where readers feel invited to linger rather than rushed to consume.</p> <blockquote> The most valuable currency in digital publishing today isn't clicks or views—it's sustained attention. Layouts that respect the reader's cognitive capacity build trust and deeper engagement. </blockquote> <div class="tag-container"> <span class="tag">Content Strategy</span> <span class="tag">Scroll Design</span> <span class="tag">Animation</span> <span class="tag">Reader Experience</span> </div> </div> </article> <div class="article-divider"> <div class="divider-line"></div> <span class="divider-symbol">✦</span> <div class="divider-line"></div> </div> <article id="article-3" class="article"> <div class="article-content" data-index="3"> <div class="article-meta"> <span class="article-author">By Naomi Wright</span> <span class="article-date">July 5, 2023</span> </div> <h2>Textural Depth in Flat Interfaces</h2> <p>While flat design continues to influence digital aesthetics, sophisticated magazine layouts are reintroducing subtle textures that add depth without compromising performance or clarity. Light textural backgrounds—often inspired by paper, fabric, or natural patterns—create a sensory richness that purely digital interfaces frequently lack.</p> <img src="https://images.unsplash.com/photo-1522542550221-31fd19575a2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="Textured paper and design elements" class="article-image"> <p>These textures serve both aesthetic and functional purposes. Psychologically, they connect digital reading experiences to their physical predecessors, triggering associations with traditional publishing that can increase perceived credibility. From a usability perspective, subtle textural contrast between content sections aids in visual organization, creating intuitive boundaries without requiring heavy dividing elements.</p> <p>The most successful implementations pair these textural elements with parallax effects, creating a multi-layered environment that responds organically to user interaction. This approach transforms the two-dimensional screen into a space with perceived depth, where content appears to exist on different planes—some elements remaining fixed while others move at varying speeds.</p> <blockquote> Textures in digital design aren't merely decorative; they're communicative. The right textural background establishes emotional context before a single word is read. </blockquote> <p>As we continue to refine digital publishing experiences, this balance between innovation and tradition remains essential. The most compelling magazine layouts honor the rich history of print design while embracing the unique capabilities of digital platforms—creating experiences that feel both timeless and thoroughly contemporary.</p> <div class="tag-container"> <span class="tag">Texture Design</span> <span class="tag">Visual Hierarchy</span> <span class="tag">Digital Craft</span> <span class="tag">Minimalism</span> </div> </div> </article> <div class="next-article"> <h3>Coming Next</h3> <h2 class="next-title">Typography Trends Reshaping Editorial Design</h2> <p class="next-preview">An exploration of how variable fonts, intentional contrast, and dynamic sizing are creating more responsive and expressive magazine layouts across devices.</p> <button class="read-button">Read when published</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const container = document.querySelector('.container'); const articles = document.querySelectorAll('.article-content'); const progressBar = document.querySelector('.reading-progress'); const nav = document.querySelector('.nav'); const nextArticle = document.querySelector('.next-article'); // Intersection Observer for article visibility const observerOptions = { root: container, rootMargin: '0px', threshold: 0.2 }; const articleObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); } }); }, observerOptions); articles.forEach(article => { articleObserver.observe(article); }); // Nav visibility const navObserver = new IntersectionObserver((entries) => { if (!entries[0].isIntersecting) { nav.classList.add('visible'); } else { nav.classList.remove('visible'); } }, { threshold: 0.1 }); navObserver.observe(document.querySelector('header')); // Reading progress bar container.addEventListener('scroll', () => { const totalHeight = container.scrollHeight - container.clientHeight; const progress = (container.scrollTop / totalHeight) * 100; progressBar.style.width = `${progress}%`; }); // Smooth scroll for nav links document.querySelectorAll('.nav-link').forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); container.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); }); }); // Next article button effect nextArticle.addEventListener('click', function() { const button = this.querySelector('.read-button'); button.textContent = "Coming soon!"; setTimeout(() => { button.textContent = "Read when published"; }, 2000); }); // Add hover interaction for images document.querySelectorAll('.article-image').forEach(img => { img.addEventListener('click', function() { this.style.transform = 'scale(1.02) rotate(1deg)'; setTimeout(() => { this.style.transform = 'scale(1.02)'; }, 300); }); }); // Initialize with first article visible articles[0].classList.add('visible'); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QUANTUM X1 - Next Gen Processing</title> <style> /* Reset & Base Styles */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } @font-face { font-family: 'SpaceGrotesk'; src: url('https://fonts.gstatic.com/s/spacegrotesk/v15/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj7oUXsrPMBTTA.woff2') format('woff2'); font-weight: 400; font-style: normal; } @font-face { font-family: 'SpaceGrotesk'; src: url('https://fonts.gstatic.com/s/spacegrotesk/v15/V8mQoQDjQSkFtoMM3T6r8E7mF71Q-gOoraIAEj7aUXsrPMBTTA.woff2') format('woff2'); font-weight: 700; font-style: normal; } :root { --primary: #06F; --secondary: #9400FF; --bg-dark: #050510; --text: #FFFFFF; --text-alt: #B4B4CC; --panel-bg: rgba(20, 20, 35, 0.85); --glow: rgba(6, 102, 255, 0.5); } html { scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--primary) var(--bg-dark); } body { font-family: 'SpaceGrotesk', sans-serif; background-color: var(--bg-dark); color: var(--text); overflow-x: hidden; width: 100%; height: 100vh; line-height: 1.6; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--bg-dark); } ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; } h1, h2, h3 { font-weight: 700; line-height: 1.2; } h1 { font-size: 3rem; background: linear-gradient(90deg, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 1rem; } h2 { font-size: 2rem; margin-bottom: 0.75rem; } p { margin-bottom: 1.5rem; color: var(--text-alt); } .highlight { color: var(--primary); font-weight: 700; } .container { width: 100%; height: 100vh; overflow-y: auto; overflow-x: hidden; perspective: 10px; scroll-snap-type: y mandatory; } .section { scroll-snap-align: start; height: 100vh; position: relative; display: flex; justify-content: center; align-items: center; padding: 2rem; overflow: hidden; } /* Parallax Layers */ .layer { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .parallax { transform-style: preserve-3d; z-index: -1; } .bg-layer-1 { transform: translateZ(-10px) scale(2); } .bg-layer-2 { transform: translateZ(-5px) scale(1.5); } .bg-layer-3 { transform: translateZ(-2px) scale(1.2); } /* Content Styling */ .content { background: var(--panel-bg); backdrop-filter: blur(10px); border-radius: 20px; padding: 2.5rem; max-width: 600px; width: 90%; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 20px var(--glow); border: 1px solid rgba(255, 255, 255, 0.1); transform: translateZ(0); z-index: 5; opacity: 0; transition: all 0.7s ease-out; } .visible { opacity: 1; transform: translateZ(0) translateY(0); } /* Product Visuals */ .product-visual { position: absolute; width: 50%; max-width: 400px; opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.215, 0.61, 0.355, 1); z-index: 4; } .visual-active { opacity: 1; transform: translateY(0); } /* Feature Cards */ .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; } .feature-card { background: rgba(0, 0, 0, 0.3); border-radius: 10px; padding: 1.25rem; border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; cursor: pointer; position: relative; overflow: hidden; } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2), 0 0 10px var(--glow); border-color: var(--primary); } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 0; background: linear-gradient(to bottom, var(--primary), var(--secondary)); transition: height 0.3s ease; } .feature-card:hover::before { height: 100%; } .feature-card h3 { font-size: 1.2rem; margin-bottom: 0.5rem; } .feature-card p { font-size: 0.9rem; margin-bottom: 0; } /* Spec Table */ .spec-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; } .spec-table th, .spec-table td { text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .spec-table th { color: var(--primary); font-weight: 700; background: rgba(0, 0, 0, 0.2); } .spec-table tr:last-child td { border-bottom: none; } /* Nav Dots */ .nav-dots { position: fixed; right: 2rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1rem; z-index: 100; } .nav-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: all 0.3s ease; } .nav-dot.active { background: var(--primary); box-shadow: 0 0 10px var(--glow); transform: scale(1.3); } /* Button Styles */ .cta-button { display: inline-block; padding: 1rem 2rem; background: linear-gradient(90deg, var(--primary), var(--secondary)); color: white; border: none; border-radius: 30px; font-weight: 700; cursor: pointer; text-decoration: none; text-align: center; letter-spacing: 1px; transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; margin-top: 1.5rem; } .cta-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: all 0.5s ease; z-index: -1; } .cta-button:hover::before { left: 100%; } .cta-button:hover { box-shadow: 0 0 20px var(--glow); transform: translateY(-3px); } /* Animations */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } @keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } .float-animation { animation: float 6s ease-in-out infinite; } .pulse-animation { animation: pulse 4s ease-in-out infinite; } /* Progress Bar */ .progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 4px; z-index: 100; } .progress-bar { height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary)); width: 0%; transition: width 0.1s ease; } /* Responsive Design */ @media (max-width: 768px) { h1 { font-size: 2.2rem; } h2 { font-size: 1.5rem; } .content { padding: 2rem; width: 95%; } .feature-grid { grid-template-columns: 1fr; } .nav-dots { right: 0.8rem; } .product-visual { width: 70%; } } /* Background Gradient */ .bg-gradient { position: absolute; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(20, 20, 40, 0.5) 0%, rgba(5, 5, 16, 0.9) 70%); z-index: -1; } /* Tech Grid Pattern */ .tech-grid { position: absolute; width: 100%; height: 100%; background: linear-gradient(rgba(6, 102, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(6, 102, 255, 0.05) 1px, transparent 1px); background-size: 40px 40px; z-index: -1; } /* Tech particle effects */ .particles { position: absolute; width: 100%; height: 100%; z-index: -1; } .particle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--primary); opacity: 0.5; } </style> </head> <body> <div class="progress-container"> <div class="progress-bar" id="progressBar"></div> </div> <div class="nav-dots"> <div class="nav-dot active" data-index="0"></div> <div class="nav-dot" data-index="1"></div> <div class="nav-dot" data-index="2"></div> <div class="nav-dot" data-index="3"></div> </div> <div class="container" id="scrollContainer"> <!-- Hero Section --> <section class="section" id="section1"> <div class="parallax"> <div class="bg-gradient layer bg-layer-1"></div> <div class="tech-grid layer bg-layer-2"></div> <div class="particles layer bg-layer-3" id="particles"></div> </div> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgdmlld0JveD0iMCAwIDQwMCA0MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iMTIwIiB5PSIxMDAiIHdpZHRoPSIxNjAiIGhlaWdodD0iMjAwIiByeD0iMTAiIGZpbGw9InVybCgjZ3JhZGllbnQpIiBmaWxsLW9wYWNpdHk9IjAuOSIvPjxjaXJjbGUgY3g9IjIwMCIgY3k9IjE1MCIgcj0iMjAiIGZpbGw9IiMwNmYiLz48cGF0aCBkPSJNMTYwIDIwMEgyNDAiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMiIvPjxwYXRoIGQ9Ik0xNjAgMjIwSDI0MCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggZD0iTTE2MCAyNDBIMjIwIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiLz48Y2lyY2xlIGN4PSIyMDAiIGN5PSIyODAiIHI9IjEwIiBmaWxsPSIjOTQwMGZmIi8+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkaWVudCIgeDE9IjEyMCIgeTE9IjEwMCIgeDI9IjI4MCIgeTI9IjMwMCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiMxMTE4MzAiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwQjBCMTgiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4=" class="product-visual float-animation" id="heroVisual" alt="QUANTUM X1 Processor"> <div class="content" id="content1"> <h1>QUANTUM X1</h1> <h2>Next-Gen Quantum Processing</h2> <p>The QUANTUM X1 introduces unprecedented computational power with <span class="highlight">7nm quantum node architecture</span> and AI-enhanced processing capabilities. Experience computing at the edge of what's possible.</p> <a href="#" class="cta-button">Explore Features</a> </div> </section> <!-- Performance Section --> <section class="section" id="section2"> <div class="parallax"> <div class="bg-gradient layer bg-layer-1"></div> <div class="tech-grid layer bg-layer-2"></div> </div> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgdmlld0JveD0iMCAwIDQwMCA0MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMjAwIiBjeT0iMjAwIiByPSIxMDAiIGZpbGw9InVybCgjZ3JhZGllbnQyKSIgZmlsbC1vcGFjaXR5PSIwLjkiLz48Y2lyY2xlIGN4PSIyMDAiIGN5PSIyMDAiIHI9IjgwIiBzdHJva2U9IiMwNmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWRhc2hhcnJheT0iMTAgNSIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0xNjAgMTYwTDI0MCAyNDAiIHN0cm9rZT0iIzk0MDBmZiIgc3Ryb2tlLXdpZHRoPSIzIi8+PHBhdGggZD0iTTI0MCAxNjBMMTYwIDI0MCIgc3Ryb2tlPSIjOTQwMGZmIiBzdHJva2Utd2lkdGg9IjMiLz48Y2lyY2xlIGN4PSIyMDAiIGN5PSIyMDAiIHI9IjIwIiBmaWxsPSIjMDZmIiBmaWxsLW9wYWNpdHk9IjAuOCIvPjxkZWZzPjxyYWRpYWxHcmFkaWVudCBpZD0iZ3JhZGllbnQyIiBjeD0iMjAwIiBjeT0iMjAwIiByPSIxMDAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBzdG9wLWNvbG9yPSIjMTAxODMwIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMEIwQjE4Ii8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PC9zdmc+" class="product-visual pulse-animation" id="perfVisual" alt="Quantum Architecture"> <div class="content" id="content2"> <h2>Quantum Architecture</h2> <p>The QUANTUM X1 redefines computational boundaries with its revolutionary parallel processing architecture.</p> <div class="feature-grid"> <div class="feature-card"> <h3>11.2 TFLOPS</h3> <p>Tensor computation delivering 4x throughput over previous gen</p> </div> <div class="feature-card"> <h3>Neural Engine</h3> <p>Dedicated 18-core engine for machine learning operations</p> </div> <div class="feature-card"> <h3>7nm Architecture</h3> <p>Ultra-efficient design with 86% improved thermal profile</p> </div> <div class="feature-card"> <h3>0.8ms Latency</h3> <p>Industry-leading response time for real-time applications</p> </div> </div> </div> </section> <!-- Technical Specs Section --> <section class="section" id="section3"> <div class="parallax"> <div class="bg-gradient layer bg-layer-1"></div> <div class="tech-grid layer bg-layer-2"></div> </div> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgdmlld0JveD0iMCAwIDQwMCA0MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iMTAwIiB5PSIxMDAiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiByeD0iMTAiIGZpbGw9InVybCgjZ3JhZGllbnQzKSIgZmlsbC1vcGFjaXR5PSIwLjkiLz48cmVjdCB4PSIxMjAiIHk9IjEyMCIgd2lkdGg9IjE2MCIgaGVpZ2h0PSIxNjAiIHJ4PSI1IiBzdHJva2U9IiMwNmYiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIvPjxyZWN0IHg9IjE0MCIgeT0iMTQwIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIGZpbGw9IiMwNmYiIGZpbGwtb3BhY2l0eT0iMC42Ii8+PHJlY3QgeD0iMTgwIiB5PSIxNDAiIHdpZHRoPSIyMCIgaGVpZ2h0PSI0MCIgZmlsbD0iIzk0MDBmZiIgZmlsbC1vcGFjaXR5PSIwLjYiLz48cmVjdCB4PSIyMDAiIHk9IjE0MCIgd2lkdGg9IjYwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjMDZmIiBmaWxsLW9wYWNpdHk9IjAuNiIvPjxyZWN0IHg9IjE0MCIgeT0iMTgwIiB3aWR0aD0iMTIwIiBoZWlnaHQ9IjIwIiBmaWxsPSIjOTQwMGZmIiBmaWxsLW9wYWNpdHk9IjAuNiIvPjxyZWN0IHg9IjE0MCIgeT0iMjAwIiB3aWR0aD0iNjAiIGhlaWdodD0iNDAiIGZpbGw9IiMwNmYiIGZpbGwtb3BhY2l0eT0iMC42Ii8+PHJlY3QgeD0iMjAwIiB5PSIyMDAiIHdpZHRoPSI2MCIgaGVpZ2h0PSI0MCIgZmlsbD0iIzk0MDBmZiIgZmlsbC1vcGFjaXR5PSIwLjYiLz48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImdyYWRpZW50MyIgeDE9IjEwMCIgeTE9IjEwMCIgeDI9IjMwMCIgeTI9IjMwMCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiMxMDE4MzAiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMwQjBCMTgiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4=" class="product-visual" id="techVisual" alt="Technical Specifications"> <div class="content" id="content3"> <h2>Technical Specifications</h2> <p>Built with precision for demanding workloads, the QUANTUM X1 delivers industry-leading performance metrics across the board.</p> <table class="spec-table"> <tr> <th>Specification</th> <th>Details</th> </tr> <tr> <td>Compute Cores</td> <td>32 physical cores with 128 virtual threads</td> </tr> <tr> <td>Neural Engine</td> <td>18-core dedicated ML processor</td> </tr> <tr> <td>Memory Bandwidth</td> <td>1.2 TB/s with HBM2E integration</td> </tr> <tr> <td>Process Node</td> <td>Advanced 7nm EUV process</td> </tr> <tr> <td>Power Consumption</td> <td>65W TDP (configurable 45-85W range)</td> </tr> </table> </div> </section> <!-- Applications Section --> <section class="section" id="section4"> <div class="parallax"> <div class="bg-gradient layer bg-layer-1"></div> <div class="tech-grid layer bg-layer-2"></div> </div> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgdmlld0JveD0iMCAwIDQwMCA0MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMTUwIiBjeT0iMTUwIiByPSI1MCIgZmlsbD0idXJsKCNncmFkaWVudDQpIiBmaWxsLW9wYWNpdHk9IjAuOSIvPjxjaXJjbGUgY3g9IjI1MCIgY3k9IjE1MCIgcj0iNTAiIGZpbGw9InVybCgjZ3JhZGllbnQ0KSIgZmlsbC1vcGFjaXR5PSIwLjkiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSIyNTAiIHI9IjUwIiBmaWxsPSJ1cmwoI2dyYWRpZW50NCkiIGZpbGwtb3BhY2l0eT0iMC45Ii8+PGNpcmNsZSBjeD0iMjUwIiBjeT0iMjUwIiByPSI1MCIgZmlsbD0idXJsKCNncmFkaWVudDQpIiBmaWxsLW9wYWNpdHk9IjAuOSIvPjxwYXRoIGQ9Ik0xNTAgMTUwTDI1MCAxNTAiIHN0cm9rZT0iIzA2ZiIgc3Ryb2tlLXdpZHRoPSIzIi8+PHBhdGggZD0iTTE1MCAxNTBMMTUwIDI1MCIgc3Ryb2tlPSIjMDZmIiBzdHJva2Utd2lkdGg9IjMiLz48cGF0aCBkPSJNMTUwIDI1MEwyNTAgMjUwIiBzdHJva2U9IiM5NDAwZmYiIHN0cm9rZS13aWR0aD0iMyIvPjxwYXRoIGQ9Ik0yNTAgMTUwTDI1MCAyNTAiIHN0cm9rZT0iIzk0MDBmZiIgc3Ryb2tlLXdpZHRoPSIzIi8+PHBhdGggZD0iTTE1MCAxNTBMMjUwIDI1MCIgc3Ryb2tlPSIjMDZmIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1kYXNoYXJyYXk9IjUgNSIvPjxwYXRoIGQ9Ik0yNTAgMTUwTDE1MCAyNTAiIHN0cm9rZT0iIzk0MDBmZiIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtZGFzaGFycmF5PSI1IDUiLz48ZGVmcz48cmFkaWFsR3JhZGllbnQgaWQ9ImdyYWRpZW50NCIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSgxNTAgMTUwKSByb3RhdGUoOTApIHNjYWxlKDUwKSI+PHN0b3Agc3RvcC1jb2xvcj0iIzEwMTgzMCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzBCMEIxOCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg==" class="product-visual" id="appVisual" alt="Application Ecosystem"> <div class="content" id="content4"> <h2>Unlock New Possibilities</h2> <p>The QUANTUM X1's revolutionary architecture enables breakthrough capabilities across multiple domains.</p> <div class="feature-grid"> <div class="feature-card"> <h3>Real-time AI</h3> <p>Process ML models 7x faster with zero latency inference</p> </div> <div class="feature-card"> <h3>Advanced Simulation</h3> <p>Run complex physics models with molecular-level precision</p> </div> <div class="feature-card"> <h3>Media Encoding</h3> <p>8K HDR encoding at 120fps with adaptive optimization</p> </div> <div class="feature-card"> <h3>Secure Computing</h3> <p>Hardware-based encrypted processing with zero overhead</p> </div> </div> <a href="#" class="cta-button">Request Developer Kit</a> </div> </section> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Elements const container = document.getElementById('scrollContainer'); const sections = document.querySelectorAll('.section'); const contents = document.querySelectorAll('.content'); const productVisuals = document.querySelectorAll('.product-visual'); const navDots = document.querySelectorAll('.nav-dot'); const progressBar = document.getElementById('progressBar'); // Create particles const particlesContainer = document.getElementById('particles'); for (let i = 0; i < 50; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); particle.style.left = `${Math.random() * 100}%`; particle.style.top = `${Math.random() * 100}%`; particle.style.opacity = Math.random() * 0.5 + 0.1; particle.style.width = `${Math.random() * 3 + 1}px`; particle.style.height = particle.style.width; // Set animation const animDuration = Math.random() * 50 + 20; const animDelay = Math.random() * 10; particle.style.animation = `pulse ${animDuration}s ease-in-out ${animDelay}s infinite`; particlesContainer.appendChild(particle); } // Initial display showContent(0); // Intersection Observer for sections const options = { root: container, rootMargin: '-50% 0px', threshold: 0 }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const index = Array.from(sections).indexOf(entry.target); updateActiveSection(index); } }); }, options); sections.forEach(section => { observer.observe(section); }); // Update scroll progress container.addEventListener('scroll', () => { const scrollPosition = container.scrollTop; const totalHeight = container.scrollHeight - container.clientHeight; const progress = (scrollPosition / totalHeight) * 100; progressBar.style.width = `${progress}%`; }); // Navigation dots click event navDots.forEach(dot => { dot.addEventListener('click', () => { const index = parseInt(dot.getAttribute('data-index')); sections[index].scrollIntoView({ behavior: 'smooth' }); }); }); // Update active section function updateActiveSection(index) { // Update nav dots navDots.forEach(dot => dot.classList.remove('active')); navDots[index].classList.add('active'); // Show content for active section showContent(index); } // Show content with animation function showContent(index) { // Reset all contents and visuals contents.forEach(content => { content.classList.remove('visible'); content.style.transform = 'translateZ(0) translateY(40px)'; }); productVisuals.forEach(visual => { visual.classList.remove('visual-active'); }); // Animate active content and visual setTimeout(() => { contents[index].classList.add('visible'); productVisuals[index].classList.add('visual-active'); }, 200); } // Feature cards hover effect const featureCards = document.querySelectorAll('.feature-card'); featureCards.forEach(card => { card.addEventListener('mouseenter', () => { featureCards.forEach(c => { if (c !== card) c.style.opacity = '0.7'; }); }); card.addEventListener('mouseleave', () => { featureCards.forEach(c => { c.style.opacity = '1'; }); }); }); // CTA Button
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>EcoRevive - Restoring Nature, Empowering Communities</title> <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap'); :root { --warm-amber: #F2A154; --earth-brown: #734222; --leaf-green: #406343; --cream: #F7F3E9; --soft-clay: #E7D2CC; --deep-clay: #AD8174; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; height: 100%; } body { font-family: 'Montserrat', sans-serif; background-color: var(--cream); color: #333; overflow-x: hidden; height: 100%; line-height: 1.6; } h1, h2, h3, h4 { font-family: 'Playfair Display', serif; font-weight: 600; color: var(--earth-brown); } .parallax-container { height: 100%; overflow-y: auto; overflow-x: hidden; perspective: 10px; scroll-behavior: smooth; } .section { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; overflow: hidden; transform-style: preserve-3d; z-index: 1; } .section-content { position: relative; z-index: 2; background-color: rgba(247, 243, 233, 0.85); padding: 2rem; border-radius: 12px; max-width: 600px; box-shadow: 0 8px 32px rgba(115, 66, 34, 0.1); transform: translateZ(0); opacity: 0; transition: all 0.6s ease-out; } .section-content.active { opacity: 1; transform: translateY(0); } .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transform: translateZ(-10px) scale(2); z-index: -1; } .midground { position: absolute; width: 100%; height: 100%; object-fit: cover; transform: translateZ(-5px) scale(1.5); z-index: 0; } .foreground { position: absolute; width: 100%; height: 100%; object-fit: cover; transform: translateZ(-2px) scale(1.2); z-index: 1; } .texture-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjZmZmIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDVMNSAwWk02IDRMNCA2Wk0tMSAxTDEgLTFaIiBzdHJva2U9IiNGMkExNTQiIHN0cm9rZS1vcGFjaXR5PSIwLjIiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgo8L3N2Zz4='); opacity: 0.2; z-index: 1; } .btn { display: inline-block; padding: 0.8rem 1.5rem; background-color: var(--warm-amber); color: white; border: none; border-radius: 30px; cursor: pointer; font-weight: 600; text-decoration: none; transition: all 0.3s ease; margin-top: 1.5rem; position: relative; overflow: hidden; } .btn:hover { background-color: var(--earth-brown); transform: translateY(-3px); } .btn::after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: -100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: 0.5s; } .btn:hover::after { left: 100%; } .impact-counter { display: flex; justify-content: space-around; margin: 2rem 0; text-align: center; } .counter-item { flex: 1; padding: 0.5rem; } .counter-number { font-size: 2.5rem; font-weight: 700; color: var(--warm-amber); margin-bottom: 0.5rem; } .counter-label { font-size: 0.9rem; color: var(--earth-brown); } .highlight { color: var(--leaf-green); } .testimonial { padding: 1.5rem; border-left: 4px solid var(--warm-amber); margin: 1.5rem 0; background-color: rgba(255, 255, 255, 0.5); border-radius: 0 8px 8px 0; position: relative; } .testimonial::before { content: """; position: absolute; top: -0.5rem; left: 1rem; font-size: 3rem; color: var(--warm-amber); opacity: 0.3; font-family: Georgia, serif; } .case-study { margin: 2rem 0; padding-bottom: 1rem; border-bottom: 1px solid var(--soft-clay); } .case-study-header { display: flex; align-items: center; margin-bottom: 1rem; } .case-study-icon { width: 40px; height: 40px; background-color: var(--warm-amber); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 1rem; } .case-study-icon svg { width: 20px; height: 20px; fill: white; } .progress-bar { height: 8px; background-color: var(--soft-clay); border-radius: 4px; margin: 1rem 0; position: relative; overflow: hidden; } .progress-bar-fill { position: absolute; height: 100%; background-color: var(--warm-amber); width: 0; border-radius: 4px; transition: width 1.5s ease-out; } .nav-dots { position: fixed; top: 50%; right: 1.5rem; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1rem; z-index: 100; } .nav-dot { width: 12px; height: 12px; background-color: rgba(115, 66, 34, 0.3); border-radius: 50%; cursor: pointer; transition: all 0.3s ease; } .nav-dot.active { background-color: var(--warm-amber); transform: scale(1.3); } .nav-dot:hover { background-color: var(--earth-brown); } .reveal-text { position: relative; overflow: hidden; } .reveal-text-inner { display: inline-block; transform: translateY(100%); opacity: 0; transition: transform 0.8s ease, opacity 0.8s ease; } .reveal-text.active .reveal-text-inner { transform: translateY(0); opacity: 1; } @media (max-width: 768px) { .section { padding: 1rem; } .section-content { padding: 1.5rem; max-width: 90%; } .impact-counter { flex-direction: column; gap: 1rem; } .counter-number { font-size: 2rem; } .nav-dots { right: 0.5rem; } } /* Loader */ .loader-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--cream); display: flex; justify-content: center; align-items: center; z-index: 1000; transition: opacity 0.5s ease, visibility 0.5s ease; } .loader { width: 80px; height: 80px; position: relative; } .loader:before, .loader:after { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 50%; background-color: var(--warm-amber); opacity: 0.6; animation: pulse 2s ease-in-out infinite; } .loader:after { animation-delay: -1s; } @keyframes pulse { 0%, 100% { transform: scale(0); opacity: 0.6; } 50% { transform: scale(1); opacity: 0; } } </style> </head> <body> <div class="loader-container"> <div class="loader"></div> </div> <div class="parallax-container"> <section class="section" id="section1"> <div class="background" style="background-image: url('https://images.unsplash.com/photo-1572204292164-b35ba943fca7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80');"></div> <div class="texture-overlay"></div> <div class="section-content"> <div class="reveal-text"> <h1 class="reveal-text-inner">EcoRevive: <span class="highlight">Restoring Nature</span> & Empowering Communities</h1> </div> <div class="reveal-text"> <p class="reveal-text-inner">Since 2015, we've worked to heal damaged ecosystems while creating sustainable livelihoods for local communities. Our holistic approach combines environmental regeneration with community development.</p> </div> <a href="#section2" class="btn">Discover Our Impact</a> </div> </section> <section class="section" id="section2"> <div class="background" style="background-image: url('https://images.unsplash.com/photo-1571607388263-1044f9ea01dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1695&q=80');"></div> <div class="texture-overlay"></div> <div class="section-content"> <div class="reveal-text"> <h2 class="reveal-text-inner">Our Growing Impact</h2> </div> <div class="reveal-text"> <p class="reveal-text-inner">From small beginnings in coastal Kenya, we've expanded to 17 sites across East Africa, creating measurable change in both ecological health and community prosperity.</p> </div> <div class="impact-counter"> <div class="counter-item"> <div class="counter-number" data-target="3750000">0</div> <div class="counter-label">Trees Planted</div> </div> <div class="counter-item"> <div class="counter-number" data-target="42">0</div> <div class="counter-label">Communities Engaged</div> </div> <div class="counter-item"> <div class="counter-number" data-target="12840">0</div> <div class="counter-label">People Employed</div> </div> </div> <div class="progress-bar"> <div class="progress-bar-fill" data-width="78"></div> </div> <div class="reveal-text"> <p class="reveal-text-inner">78% of our project sites have seen improved biodiversity metrics within 3 years</p> </div> <a href="#section3" class="btn">See Our Work</a> </div> </section> <section class="section" id="section3"> <div class="background" style="background-image: url('https://images.unsplash.com/photo-1533748450902-f0b0c9371a86?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1742&q=80');"></div> <div class="texture-overlay"></div> <div class="section-content"> <div class="reveal-text"> <h2 class="reveal-text-inner">Case Study: The Mangrove Revival</h2> </div> <div class="case-study"> <div class="case-study-header"> <div class="case-study-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.86 3.061l7.14 1.812v9.123l-7.14 1.814-7.72-1.858v-9.114l7.72-1.777zm-.86 1.964l-5 1.154v7.155l5 1.2v-9.509zm7 .96l-5-1.27v9.535l5-1.269v-6.996z"/></svg> </div> <h3>Lamu Archipelago, Kenya</h3> </div> <div class="reveal-text"> <p class="reveal-text-inner">In 2018, we began restoring severely degraded mangrove forests along Kenya's northern coast. Working with five fishing villages, we've restored 1,230 hectares and established community-managed conservation areas.</p> </div> <div class="progress-bar"> <div class="progress-bar-fill" data-width="65"></div> </div> <div class="reveal-text"> <p class="reveal-text-inner">65% increase in local fish stocks since project inception</p> </div> </div> <div class="testimonial"> <div class="reveal-text"> <p class="reveal-text-inner">"Before EcoRevive came, our mangroves were disappearing and fish were scarce. Now our children have opportunities. We're fishing sustainably and earning income from honey production in the restored forests."</p> </div> <div class="reveal-text"> <p class="reveal-text-inner"><strong>– Amina Bakari, Community Leader</strong></p> </div> </div> <a href="#section4" class="btn">Our Approach</a> </div> </section> <section class="section" id="section4"> <div class="background" style="background-image: url('https://images.unsplash.com/photo-1541959833400-049d37f98cdb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1772&q=80');"></div> <div class="texture-overlay"></div> <div class="section-content"> <div class="reveal-text"> <h2 class="reveal-text-inner">Our Integrated Approach</h2> </div> <div class="reveal-text"> <p class="reveal-text-inner">EcoRevive believes that lasting environmental restoration happens when communities are fully engaged as stakeholders and beneficiaries.</p> </div> <div class="case-study"> <div class="case-study-header"> <div class="case-study-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.787 7.531c-5.107 2.785-12.72 9.177-15.787 15.469h2.939c.819-2.021 2.522-4.536 3.851-5.902 8.386 3.747 17.21-2.775 17.21-11.343 0-1.535-.302-3.136-.92-4.755-2.347 3.119-5.647 1.052-10.851 1.625-7.657.844-11.162 6.797-8.764 11.54 3.506-3.415 9.523-6.38 12.322-6.634z"/></svg> </div> <h3>Community Guardianship</h3> </div> <div class="reveal-text"> <p class="reveal-text-inner">We train and employ local residents as ecosystem guardians, creating meaningful work while building local capacity for long-term stewardship.</p> </div> </div> <div class="case-study"> <div class="case-study-header"> <div class="case-study-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14 18.597v.403h-10v-.417c-.004-1.112.044-1.747 1.324-2.043 1.403-.324 2.787-.613 2.122-1.841-1.973-3.637-.563-5.699 1.554-5.699 2.077 0 3.521 1.985 1.556 5.699-.647 1.22.688 1.51 2.121 1.841 1.284.297 1.328.936 1.323 2.057zm6-9.597h-4v2h4v-2zm0 4h-4v2h4v-2zm0-8h-4v2h4v-2zm4-4h-24v20h24v-20z"/></svg> </div> <h3>Alternative Livelihoods</h3> </div> <div class="reveal-text"> <p class="reveal-text-inner">We develop sustainable income streams from restored ecosystems—from eco-tourism to sustainable harvesting—ensuring communities have economic incentives for conservation.</p> </div> </div> <a href="#section5" class="btn">Join Our Mission</a> </div> </section> <section class="section" id="section5"> <div class="background" style="background-image: url('https://images.unsplash.com/photo-1527482797697-8795b05a13fe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80');"></div> <div class="texture-overlay"></div> <div class="section-content"> <div class="reveal-text"> <h2 class="reveal-text-inner">Be Part of the Restoration</h2> </div> <div class="reveal-text"> <p class="reveal-text-inner">Every contribution creates immediate impact. $25 plants 50 native trees and provides a day's work for a community member. $100 supports a family for a month through our transition programs.</p> </div> <div class="progress-bar"> <div class="progress-bar-fill" data-width="87"></div> </div> <div class="reveal-text"> <p class="reveal-text-inner">87% of donations go directly to field programs</p> </div> <div class="testimonial"> <div class="reveal-text"> <p class="reveal-text-inner">"What makes EcoRevive different is their genuine partnership with communities. They're not just restoring ecosystems—they're restoring human dignity and connection to the land."</p> </div> <div class="reveal-text"> <p class="reveal-text-inner"><strong>– Dr. Nadia Kimani, Environmental Scientist</strong></p> </div> </div> <a href="#" class="btn">Support Our Work</a> </div> </section> </div> <div class="nav-dots"> <div class="nav-dot active" data-section="section1"></div> <div class="nav-dot" data-section="section2"></div> <div class="nav-dot" data-section="section3"></div> <div class="nav-dot" data-section="section4"></div> <div class="nav-dot" data-section="section5"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Remove loader once content is loaded setTimeout(() => { document.querySelector('.loader-container').style.opacity = '0'; setTimeout(() => { document.querySelector('.loader-container').style.display = 'none'; }, 500); }, 1500); const sections = document.querySelectorAll('.section'); const navDots = document.querySelectorAll('.nav-dot'); const progressBars = document.querySelectorAll('.progress-bar-fill'); const counterElements = document.querySelectorAll('.counter-number'); const revealTexts = document.querySelectorAll('.reveal-text'); const parallaxContainer = document.querySelector('.parallax-container'); // Initialize first section as active sections[0].querySelector('.section-content').classList.add('active'); animateRevealText(sections[0]); // Handle navigation dots click navDots.forEach(dot => { dot.addEventListener('click', function() { const targetId = this.getAttribute('data-section'); document.getElementById(targetId).scrollIntoView({ behavior: 'smooth' }); }); }); // Animate counting function animateCounter(el) { const target = parseInt(el.getAttribute('data-target')); const duration = 2000; // ms const startTime = performance.now(); const startValue = 0; function updateCounter(currentTime) { const elapsedTime = currentTime - startTime; if (elapsedTime < duration) { const progress = elapsedTime / duration; const currentValue = Math.floor(startValue + progress * (target - startValue)); el.textContent = new Intl.NumberFormat().format(currentValue); requestAnimationFrame(updateCounter); } else { el.textContent = new Intl.NumberFormat().format(target); } } requestAnimationFrame(updateCounter); } // Animate progress bars function animateProgressBar(el) { const width = el.getAttribute('data-width'); el.style.width = width + '%'; } // Animate reveal text function animateRevealText(section) { const revealElements = section.querySelectorAll('.reveal-text'); revealElements.forEach((el, index) => { setTimeout(() => { el.classList.add('active'); }, 100 * index); }); } // Check which section is in view function checkSectionInView() { const scrollPosition = parallaxContainer.scrollTop; const windowHeight = window.innerHeight; sections.forEach((section, index) => { const sectionTop = section.offsetTop - 100; const sectionHeight = section.offsetHeight; const sectionContent = section.querySelector('.section-content'); if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) { // Update nav dots navDots.forEach(dot => dot.classList.remove('active')); navDots[index].classList.add('active'); // Activate section content if not already active if (!sectionContent.classList.contains('active')) { sectionContent.classList.add('active'); animateRevealText(section); // Animate counters in this section const counters = section.querySelectorAll('.counter-number'); counters.forEach(counter => { animateCounter(counter); }); // Animate progress bars in this section const progressBars = section.querySelectorAll('.progress-bar-fill'); progressBars.forEach(progressBar => { animateProgressBar(progressBar); }); } } else { // Optionally, deactivate sections that are not in view // sectionContent.classList.remove('active'); } }); } // Listen for scroll events parallaxContainer.addEventListener('scroll', function() { checkSectionInView(); }); // Initial check checkSectionInView(); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); if (targetId !== '#') { document.querySelector(targetId).scrollIntoView({ behavior: 'smooth' }); } }); }); // Random parallax movement on mouse move document.addEventListener('mousemove', function(e) { const moveX = (e.clientX - window.innerWidth / 2) * 0.01; const moveY = (e.clientY - window.innerHeight / 2) * 0.01; document.querySelectorAll('.background').forEach(bg => { bg.style.transform = `translateZ(-10px) scale(2) translate(${moveX}px, ${moveY}px)`; }); }); }); </script> </body> </html>
