Fixed backgrounds can transform a website's visual appeal, creating a captivating user experience. By anchoring the background image while allowing other content to scroll, designers can achieve a dynamic and engaging effect.
In this article, we explore ten stunning examples of fixed backgrounds that showcase the versatility and impact of this design technique. Each example highlights unique approaches to integrating fixed backgrounds into various web layouts.
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
Subframe's drag-and-drop interface and intuitive, responsive canvas make designing fixed backgrounds a breeze. Loved by designers and developers alike, it ensures pixel-perfect UI every time.
Ready to elevate your design game? 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. Whether you're crafting fixed backgrounds or any other UI elements, Subframe's intuitive tools ensure efficiency and pixel-perfect results.
Don't wait—start creating beautiful designs immediately. Start for free today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QuantumSphere Corporate</title> <style> :root { --primary-color: #2c3e50; --secondary-color: #34495e; --accent-color: #3498db; --text-light: #ecf0f1; --text-dark: #2c3e50; --shadow: rgba(0, 0, 0, 0.1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { height: 100vh; color: var(--text-dark); overflow-x: hidden; } .background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #f5f5f5; z-index: -2; } .texture { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity: 0.7; z-index: -1; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 100%); z-index: -1; } .container { max-width: 700px; margin: 0 auto; padding: 20px; position: relative; } header { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid rgba(44, 62, 80, 0.1); margin-bottom: 30px; } .logo { display: flex; align-items: center; font-weight: 700; font-size: 1.5rem; color: var(--primary-color); } .logo-icon { width: 30px; height: 30px; margin-right: 10px; position: relative; border-radius: 50%; background: var(--primary-color); display: flex; justify-content: center; align-items: center; } .logo-icon::before, .logo-icon::after { content: ''; position: absolute; border-radius: 50%; } .logo-icon::before { width: 18px; height: 18px; background: white; } .logo-icon::after { width: 8px; height: 8px; background: var(--accent-color); } nav ul { display: flex; list-style: none; } nav ul li { margin-left: 20px; position: relative; } nav ul li a { text-decoration: none; color: var(--primary-color); font-weight: 500; font-size: 0.9rem; transition: color 0.3s; padding: 5px 0; } nav ul li a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background-color: var(--accent-color); transition: width 0.3s ease; } nav ul li a:hover { color: var(--accent-color); } nav ul li a:hover::after { width: 100%; } .hero { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; margin-bottom: 60px; } .hero-content h1 { font-size: 2.5rem; margin-bottom: 15px; line-height: 1.2; color: var(--primary-color); } .hero-content p { margin-bottom: 25px; line-height: 1.6; color: var(--secondary-color); } .btn { display: inline-block; padding: 12px 24px; background-color: var(--accent-color); color: white; border-radius: 4px; text-decoration: none; font-weight: 500; transition: all 0.3s ease; border: none; cursor: pointer; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); transition: transform 0.5s; transform: skewX(-15deg); } .btn:hover { background-color: #2980b9; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(52, 152, 219, 0.3); } .btn:hover::before { transform: translateX(200%) skewX(-15deg); } .hero-image { position: relative; transform-style: preserve-3d; transition: transform 0.5s ease; } .hero-image img { width: 100%; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .hero-image::before { content: ''; position: absolute; top: 20px; left: 20px; width: 100%; height: 100%; background: var(--accent-color); opacity: 0.1; border-radius: 10px; z-index: -1; transition: all 0.3s ease; } .hero-image:hover { transform: translateZ(20px); } .hero-image:hover::before { top: 10px; left: 10px; } .features { margin-bottom: 60px; } .section-title { text-align: center; margin-bottom: 40px; position: relative; } .section-title h2 { font-size: 2rem; color: var(--primary-color); display: inline-block; position: relative; padding-bottom: 10px; } .section-title h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 50px; height: 3px; background-color: var(--accent-color); } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 25px; } .feature-card { background: rgba(255, 255, 255, 0.8); padding: 25px; border-radius: 8px; box-shadow: 0 5px 15px var(--shadow); transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background-color: var(--accent-color); transition: width 0.3s ease; z-index: -1; } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px var(--shadow); } .feature-card:hover::before { width: 100%; opacity: 0.1; } .feature-icon { font-size: 1.8rem; color: var(--accent-color); margin-bottom: 15px; } .feature-card h3 { font-size: 1.2rem; margin-bottom: 10px; color: var(--primary-color); } .feature-card p { font-size: 0.9rem; line-height: 1.6; color: var(--secondary-color); } .products { margin-bottom: 60px; } .product-slider { overflow: hidden; position: relative; padding: 20px 0; } .slider-container { display: flex; transition: transform 0.5s ease; } .product-card { flex: 0 0 calc(33.333% - 20px); margin: 0 10px; background: rgba(255, 255, 255, 0.9); border-radius: 8px; box-shadow: 0 5px 15px var(--shadow); overflow: hidden; transition: all 0.3s ease; } .product-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px var(--shadow); } .product-image { height: 150px; overflow: hidden; position: relative; } .product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .product-card:hover .product-image img { transform: scale(1.1); } .product-content { padding: 20px; } .product-content h3 { font-size: 1.1rem; margin-bottom: 10px; color: var(--primary-color); } .product-content p { font-size: 0.85rem; line-height: 1.6; color: var(--secondary-color); margin-bottom: 15px; } .product-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; } .product-price { font-weight: 700; color: var(--accent-color); } .slider-arrows { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; display: flex; justify-content: space-between; padding: 0 5px; z-index: 2; } .arrow { width: 40px; height: 40px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 10px var(--shadow); transition: all 0.3s ease; } .arrow:hover { background: var(--accent-color); color: white; } .dots { display: flex; justify-content: center; margin-top: 20px; } .dot { width: 10px; height: 10px; background: var(--shadow); border-radius: 50%; margin: 0 5px; cursor: pointer; transition: all 0.3s ease; } .dot.active { background: var(--accent-color); transform: scale(1.2); } .testimonials { margin-bottom: 60px; } .testimonial-card { background: rgba(255, 255, 255, 0.8); padding: 30px; border-radius: 8px; box-shadow: 0 5px 15px var(--shadow); position: relative; } .testimonial-card::before { content: '"'; position: absolute; top: 10px; left: 20px; font-size: 5rem; color: rgba(52, 152, 219, 0.1); font-family: Georgia, serif; line-height: 1; } .testimonial-content { position: relative; z-index: 1; } .testimonial-text { font-style: italic; margin-bottom: 20px; line-height: 1.7; color: var(--secondary-color); } .testimonial-author { display: flex; align-items: center; } .author-image { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; margin-right: 15px; } .author-image img { width: 100%; height: 100%; object-fit: cover; } .author-info h4 { font-size: 1rem; margin-bottom: 5px; color: var(--primary-color); } .author-info p { font-size: 0.8rem; color: var(--secondary-color); } .contact { background: rgba(255, 255, 255, 0.9); padding: 30px; border-radius: 8px; box-shadow: 0 5px 15px var(--shadow); } .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 5px; font-weight: 500; color: var(--primary-color); } .form-control { width: 100%; padding: 12px 15px; font-size: 0.9rem; border: 1px solid #e0e0e0; border-radius: 4px; transition: all 0.3s ease; } .form-control:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2); } textarea.form-control { min-height: 120px; resize: vertical; } @media (max-width: 768px) { .hero { grid-template-columns: 1fr; text-align: center; } .hero-content { order: 2; } .hero-image { order: 1; margin-bottom: 30px; } nav ul { display: none; } .mobile-menu { display: block; } .product-card { flex: 0 0 calc(100% - 40px); } } /* Mobile menu styles */ .mobile-menu { display: none; font-size: 1.5rem; color: var(--primary-color); cursor: pointer; } .mobile-menu-container { position: fixed; top: 0; right: -100%; width: 250px; height: 100%; background: white; box-shadow: -5px 0 15px var(--shadow); transition: right 0.3s ease; z-index: 999; padding: 60px 20px; } .mobile-menu-container.active { right: 0; } .close-menu { position: absolute; top: 20px; right: 20px; font-size: 1.5rem; cursor: pointer; color: var(--primary-color); } .mobile-nav ul { list-style: none; } .mobile-nav ul li { margin-bottom: 15px; } .mobile-nav ul li a { color: var(--primary-color); text-decoration: none; display: block; padding: 10px 0; border-bottom: 1px solid #f0f0f0; transition: color 0.3s; } .mobile-nav ul li a:hover { color: var(--accent-color); } @media (max-width: 480px) { .container { padding: 15px; } .hero-content h1 { font-size: 2rem; } .section-title h2 { font-size: 1.7rem; } .features-grid { grid-template-columns: 1fr; } } /* Animation keyframes */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } /* Apply animations */ .hero, .features, .products, .testimonials, .contact { animation: fadeIn 1s forwards; } .feature-card { animation: slideUp 0.6s forwards; animation-delay: calc(var(--card-index) * 0.1s); opacity: 0; } .logo-icon { animation: pulse 2s infinite; } /* Cursor effect */ .custom-cursor { width: 20px; height: 20px; border: 2px solid var(--accent-color); border-radius: 50%; position: fixed; transform: translate(-50%, -50%); pointer-events: none; z-index: 9999; transition: width 0.3s, height 0.3s, border-color 0.3s; display: none; } .custom-cursor-dot { width: 5px; height: 5px; background-color: var(--accent-color); border-radius: 50%; position: fixed; transform: translate(-50%, -50%); pointer-events: none; z-index: 10000; transition: width 0.3s, height 0.3s, background-color 0.3s; display: none; } /* For non-touch devices only */ @media (hover: hover) and (pointer: fine) { .custom-cursor, .custom-cursor-dot { display: block; } } </style> </head> <body> <div class="background"></div> <div class="texture"></div> <div class="overlay"></div> <div class="custom-cursor"></div> <div class="custom-cursor-dot"></div> <div class="container"> <header> <div class="logo"> <div class="logo-icon"></div> <span>QuantumSphere</span> </div> <nav> <ul> <li><a href="#about">About</a></li> <li><a href="#solutions">Solutions</a></li> <li><a href="#products">Products</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <div class="mobile-menu">☰</div> </header> <div class="mobile-menu-container"> <div class="close-menu">×</div> <nav class="mobile-nav"> <ul> <li><a href="#about">About</a></li> <li><a href="#solutions">Solutions</a></li> <li><a href="#products">Products</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </div> <section class="hero"> <div class="hero-content"> <h1>Enterprise Solutions for the Digital Age</h1> <p>QuantumSphere delivers cutting-edge technology platforms that transform how businesses operate in today's data-driven landscape. Our solutions blend innovation with practicality to solve your most complex challenges.</p> <a href="#contact" class="btn">Schedule a Consultation</a> </div> <div class="hero-image"> <img src="https://images.unsplash.com/photo-1581094794329-c8112a89af12?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" alt="Digital Solutions"> </div> </section> <section class="features" id="solutions"> <div class="section-title"> <h2>Our Core Solutions</h2> </div> <div class="features-grid"> <div class="feature-card" style="--card-index: 0"> <div class="feature-icon">⚙️</div> <h3>Integrated Analytics</h3> <p>Transform raw data into actionable insights with our enterprise-grade analytics platform, custom-tailored to your industry needs.</p> </div> <div class="feature-card" style="--card-index: 1"> <div class="feature-icon">🔒</div> <h3>Secure Infrastructure</h3> <p>Our military-grade security protocols and compliance frameworks safeguard your most sensitive business assets.</p> </div> <div class="feature-card" style="--card-index: 2"> <div class="feature-icon">🔄</div> <h3>Workflow Automation</h3> <p>Streamline operations with intelligent workflow solutions that reduce manual processes by up to 85%.</p> </div> </div> </section> <section class="products" id="products"> <div class="section-title"> <h2>Featured Products</h2> </div> <div class="product-slider"> <div class="slider-arrows"> <div class="arrow prev">←</div> <div class="arrow next">→</div> </div> <div class="slider-container"> <div class="product-card"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" alt="QuantumFlow Platform"> </div> <div class="product-content"> <h3>QuantumFlow Platform</h3> <p>Our flagship enterprise integration platform with real-time data processing capabilities.</p> <div class="product-meta"> <span class="product-category">Enterprise Software</span> <span class="product-price">Custom Pricing</span> </div> </div> </div> <div class="product-card"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" alt="DataGuard Security Suite"> </div> <div class="product-content"> <h3>DataGuard Security Suite</h3> <p>Comprehensive protection against the latest cyber threats with AI-powered detection.</p> <div class="product-meta"> <span class="product-category">Cybersecurity</span> <span class="product-price">From $5,999/yr</span> </div> </div> </div> <div class="product-card"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80" alt="WorkSync Automation"> </div> <div class="product-content"> <h3>WorkSync Automation</h3> <p>Intelligent process automation that adapts to your business logic and scales with your needs.</p> <div class="product-meta"> <span class="product-category">Business Process</span> <span class="product-price">From $2,499/mo</span> </div> </div> </div> </div> <div class="dots"> <div class="dot active"></div> <div class="dot"></div> <div class="dot"></div> </div> </div> </section> <section class="testimonials"> <div class="section-title"> <h2>Client Success Stories</h2> </div> <div class="testimonial-card"> <div class="testimonial-content"> <p class="testimonial-text">QuantumSphere's integration platform reduced our data processing time by 73% and provided analytics capabilities we didn't know were possible. The ROI we've seen in just six months has exceeded all expectations.</p> <div class="testimonial-author"> <div class="author-image"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="Sarah Johnson"> </div> <div class="author-info"> <h4>Sarah Johnson</h4> <p>CTO, Nexus Innovations</p> </div> </div> </div> </div> </section> <section class="contact" id="contact"> <div class="section-title"> <h2>Get in Touch</h2> </div> <form id="contact-form"> <div class="form-group"> <label for="name">Name</label> <input type="text" id="name" class="form-control" required> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" id="email" class="form-control" required> </div> <div class="form-group"> <label for="company">Company</label> <input type="text" id="company" class="form-control" required> </div> <div class="form-group"> <label for="message">Message</label> <textarea id="message" class="form-control" required></textarea> </div> <button type="button" class="btn" id="submit-form">Submit Request</button> </form> </section> </div> <script> // Initialize product slider const sliderContainer = document.querySelector('.slider-container'); const slides = document.querySelectorAll('.product-card'); const dots = document.querySelectorAll('.dot'); const prevBtn = document.querySelector('.prev'); const nextBtn = document.querySelector('.next'); let slideIndex = 0; const slideWidth = 100 / slides.length; // Set animation delay for feature cards document.querySelectorAll('.feature-card').forEach((card, index) => { card.style.setProperty('--card-index', index); }); // Mobile menu functionality const mobileMenuBtn = document.querySelector('.mobile-menu'); const mobileMenuContainer = document.querySelector('.mobile-menu-container'); const closeMenuBtn = document.querySelector('.close-menu'); mobileMenuBtn.addEventListener('click', () => { mobileMenuContainer.classList.add('active'); }); closeMenuBtn.addEventListener('click', () => { mobileMenuContainer.classList.remove('active'); }); // Handle slide change function goToSlide(index) { if (index < 0) { slideIndex = slides.length - 1; } else if (index >= slides.length) { slideIndex = 0; } else { slideIndex = index; } sliderContainer.style.transform = `translateX(-${slideIndex * slideWidth}%)`; // Update dots dots.forEach((dot, i) => { dot.classList.toggle('active', i === slideIndex); }); } // Initialize slider controls prevBtn.addEventListener('click', () => goToSlide(slideIndex - 1)); nextBtn.addEventListener('click', () => goToSlide(slideIndex + 1)); dots.forEach((dot, i) => { dot.addEventListener('click', () => goToSlide(i)); }); // Auto slide let slideInterval = setInterval(() => goToSlide(slideIndex + 1), 5000); // Pause auto slide on hover sliderContainer.addEventListener('mouseenter', () => { clearInterval(slideInterval); }); sliderContainer.addEventListener('mouseleave', () => { slideInterval = setInterval(() => goToSlide(slideIndex + 1), 5000); }); // Form submission document.getElementById('submit-form').addEventListener('click', function(e) { e.preventDefault(); const name = document.getElementById('name').value; const email = document.getElementById('email').value; const company = document.getElementById('company').value; const message = document.getElementById('message').value; if (name && email && company && message) { // Normally this would submit to a server, but we'll simulate success const btn = document.getElementById('submit-form'); btn.textContent = 'Request Received'; btn.disabled = true; btn.style.backgroundColor = '#27ae60'; // Reset form after 3 seconds setTimeout(() => { document.getElementById('contact-form').reset(); btn.textContent = 'Submit Request'; btn.disabled = false; btn.style.backgroundColor = ''; }, 3000); } }); // Custom cursor effect const cursor = document.querySelector('.custom-cursor'); const cursorDot = document.querySelector('.custom-cursor-dot'); document.addEventListener('mousemove', (e) => { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; cursorDot.style.left = e.clientX + 'px'; cursorDot.style.top = e.clientY + 'px'; }); // Change cursor on interactive elements const interactiveElements = document.querySelectorAll('a, button, .arrow, .dot'); interactiveElements.forEach(el => { el.addEventListener('mouseenter', () => { cursor.style.width = '40px'; cursor.style.height = '40px'; cursor.style.borderColor = 'var(--accent-color)'; cursorDot.style.width = '8px'; cursorDot.style.height = '8px'; }); el.addEventListener('mouseleave', () => { cursor.style.width = '20px'; cursor.style.height = '20px'; cursor.style.borderColor = 'var(--accent-color)'; cursorDot.style.width = '5px'; cursorDot.style.height = '5px'; }); }); // Parallax effect on hero image const heroImage = document.querySelector('.hero-image'); document.addEventListener('mousemove', (e) => { const x = (window.innerWidth / 2 - e.clientX) / 30; const y = (window.innerHeight / 2 - e.clientY) / 30; heroImage.style.transform = `translateX(${x}px) translateY(${y}px)`; }); // Smooth scroll for navigation document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 100, behavior: 'smooth' }); // Close mobile menu if open mobileMenuContainer.classList.remove('active'); } }); }); // Adjust for responsive layout function adjustLayout() { if (window.innerWidth <= 768) { // Mobile adjustments sliderContainer.style.transform = 'translateX(0)'; } else { // Desktop adjustments goToSlide(slideIndex); } } window.addEventListener('resize', adjustLayout); // Initialize adjustLayout(); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Echo Headphones E-commerce</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif; } :root { --primary: #272343; --secondary: #e3f6f5; --accent: #ff005b; --text: #333; --white: #ffffff; } body { width: 100%; height: 100vh; overflow-x: hidden; color: var(--text); background-color: var(--white); } .background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #e3f6f5 0%, #bae8e8 100%); z-index: -2; } .background::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIyNCIgY3k9IjI0IiByPSIxIiBmaWxsPSIjMjcyMzQzIiBmaWxsLW9wYWNpdHk9IjAuMiIvPjwvc3ZnPg=='); opacity: 0.5; z-index: -1; } .product-image { position: fixed; top: 0; right: 0; width: 50%; height: 100%; background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAwIiBoZWlnaHQ9IjgwMCIgdmlld0JveD0iMCAwIDgwMCA4MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iNDAwIiBjeT0iNDAwIiByPSIzMDAiIGZpbGw9IiMyNzIzNDMiLz48cGF0aCBkPSJNMzAwIDUwMEM1MDAgNTAwIDUwMCAzMDAgNTAwIDMwME01MDAgMzAwQzMwMCAzMDAgMzAwIDUwMCAzMDAgNTAwIiBzdHJva2U9IiNGRjAwNUIiIHN0cm9rZS13aWR0aD0iMTUiLz48L3N2Zz4='); background-size: contain; background-position: center; background-repeat: no-repeat; z-index: -1; transform: translateX(10%); opacity: 0.9; } .container { max-width: 700px; height: 100%; margin: 0 auto; padding: 2rem; display: flex; flex-direction: column; justify-content: center; } .nav { position: fixed; top: 0; left: 0; width: 100%; padding: 1.5rem 2rem; display: flex; justify-content: space-between; align-items: center; z-index: 100; backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.2); } .logo { font-weight: 700; font-size: 1.5rem; color: var(--primary); text-decoration: none; display: flex; align-items: center; } .logo span { display: inline-block; width: 10px; height: 10px; background-color: var(--accent); border-radius: 50%; margin-right: 8px; } .nav-links { display: flex; gap: 2rem; } .nav-link { text-decoration: none; color: var(--primary); font-weight: 500; position: relative; transition: color 0.3s; } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background-color: var(--accent); transition: width 0.3s ease; } .nav-link:hover { color: var(--accent); } .nav-link:hover::after { width: 100%; } .content { max-width: 500px; padding-top: 4rem; } .badge { display: inline-block; background-color: var(--accent); color: white; padding: 0.5rem 1rem; border-radius: 50px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1.5rem; opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s forwards 0.2s; } h1 { font-size: 3rem; font-weight: 800; line-height: 1.2; margin-bottom: 1.5rem; color: var(--primary); opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s forwards 0.4s; } h1 .highlight { color: var(--accent); position: relative; display: inline-block; } h1 .highlight::after { content: ''; position: absolute; bottom: 8px; left: 0; width: 100%; height: 8px; background-color: var(--secondary); z-index: -1; transform: skewX(-10deg); } .description { font-size: 1.1rem; line-height: 1.6; margin-bottom: 2rem; opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s forwards 0.6s; } .features { display: flex; gap: 1.5rem; margin-bottom: 2.5rem; opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s forwards 0.8s; } .feature { display: flex; flex-direction: column; align-items: center; text-align: center; } .feature-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background-color: var(--secondary); border-radius: 12px; margin-bottom: 0.5rem; position: relative; overflow: hidden; } .feature-icon::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent); transition: 0.5s; } .feature:hover .feature-icon::before { left: 100%; } .feature-text { font-size: 0.9rem; font-weight: 500; } .price-container { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s forwards 1s; } .price { font-size: 2.5rem; font-weight: 700; color: var(--primary); } .price-old { font-size: 1.5rem; text-decoration: line-through; color: #999; } .discount { padding: 0.3rem 0.8rem; background-color: var(--accent); color: white; border-radius: 50px; font-size: 0.9rem; font-weight: 600; } .cta-buttons { display: flex; gap: 1rem; opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s forwards 1.2s; } .btn { padding: 1rem 2rem; border-radius: 50px; font-weight: 600; font-size: 1rem; text-align: center; cursor: pointer; transition: all 0.3s ease; border: none; outline: none; position: relative; overflow: hidden; } .btn-primary { background-color: var(--primary); color: white; flex: 1; } .btn-primary:hover { background-color: #1a172e; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(39, 35, 67, 0.2); } .btn-primary::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.5); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .btn-primary:hover::after { animation: ripple 1s ease-out; } .btn-secondary { background-color: transparent; color: var(--primary); border: 2px solid var(--primary); } .btn-secondary:hover { background-color: var(--secondary); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(39, 35, 67, 0.1); } .scroll-icon { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); width: 30px; height: 50px; border: 2px solid var(--primary); border-radius: 50px; display: flex; justify-content: center; padding-top: 10px; opacity: 0; animation: fadeIn 1s forwards 1.5s, bounce 2s infinite 1.5s; } .scroll-dot { width: 6px; height: 6px; background-color: var(--primary); border-radius: 50%; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { to { opacity: 0.7; } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-10px); } 60% { transform: translateX(-50%) translateY(-5px); } } @keyframes ripple { 0% { transform: scale(0, 0); opacity: 0.5; } 20% { transform: scale(25, 25); opacity: 0.5; } 100% { opacity: 0; transform: scale(40, 40); } } .product-card { position: fixed; top: 50%; right: 5%; transform: translateY(-50%); width: 300px; height: 300px; border-radius: 20px; background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1.5rem; opacity: 0; animation: fadeIn 1s forwards 1.5s; z-index: 10; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.5); } .product-image-3d { width: 200px; height: 200px; background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDUwMCA1MDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMjUwIiBjeT0iMjUwIiByPSIyMDAiIGZpbGw9IiMyNzIzNDMiLz48cGF0aCBkPSJNMTUwIDMwMEMzNTAgMzAwIDM1MCAxNTAgMzUwIDE1ME0zNTAgMTUwQzE1MCAxNTAgMTUwIDMwMCAxNTAgMzAwIiBzdHJva2U9IiNGRjAwNUIiIHN0cm9rZS13aWR0aD0iMTAiLz48L3N2Zz4='); background-size: contain; background-position: center; background-repeat: no-repeat; margin-bottom: 1rem; transform-style: preserve-3d; animation: rotate3d 20s infinite linear; } @keyframes rotate3d { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .product-title { font-size: 1.2rem; font-weight: 700; color: var(--primary); margin-bottom: 0.5rem; text-align: center; } .rating { display: flex; margin-bottom: 0.5rem; } .star { color: gold; margin: 0 2px; } .reviews { font-size: 0.8rem; color: #777; } /* Responsive Styles */ @media (max-width: 700px) { .nav { padding: 1rem; } .nav-links { display: none; } .content { padding-top: 2rem; } h1 { font-size: 2.2rem; } .product-image { opacity: 0.15; width: 100%; transform: translateX(0); } .product-card { position: relative; top: auto; right: auto; transform: none; margin: 2rem auto; width: 220px; height: 220px; } .product-image-3d { width: 150px; height: 150px; } .cta-buttons { flex-direction: column; } .features { margin-bottom: 1.5rem; } .badge { margin-bottom: 1rem; } .scroll-icon { display: none; } } </style> </head> <body> <div class="background"></div> <div class="product-image"></div> <nav class="nav"> <a href="#" class="logo"><span></span>ECHO</a> <div class="nav-links"> <a href="#" class="nav-link">Shop</a> <a href="#" class="nav-link">Features</a> <a href="#" class="nav-link">Reviews</a> <a href="#" class="nav-link">Support</a> </div> </nav> <div class="container"> <div class="content"> <div class="badge">New Release</div> <h1>Experience Sound <span class="highlight">Redefined</span></h1> <p class="description">The Echo A7 headphones deliver unparalleled audio clarity with adaptive noise cancellation that responds to your environment in real-time. Your sound, your space, your moment.</p> <div class="features"> <div class="feature"> <div class="feature-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3 18V12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12V18" stroke="#272343" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M21 19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H18C17.4696 21 16.9609 20.7893 16.5858 20.4142C16.2107 20.0391 16 19.5304 16 19V16C16 15.4696 16.2107 14.9609 16.5858 14.5858C16.9609 14.2107 17.4696 14 18 14H21V19ZM3 19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H6C6.53043 21 7.03914 20.7893 7.41421 20.4142C7.78929 20.0391 8 19.5304 8 19V16C8 15.4696 7.78929 14.9609 7.41421 14.5858C7.03914 14.2107 6.53043 14 6 14H3V19Z" stroke="#272343" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <span class="feature-text">36hr Battery</span> </div> <div class="feature"> <div class="feature-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.53 16.122C9.73215 16.3669 9.90096 16.6411 10.0209 16.9349C10.1408 17.2288 10.2093 17.5382 10.2236 17.8528C10.238 18.1674 10.1979 18.4816 10.1057 18.7837C10.0134 19.0857 9.87095 19.3711 9.685 19.631C9.44027 19.9724 9.10008 20.2346 8.70636 20.3825C8.31264 20.5305 7.88343 20.5572 7.473 20.46C7.05453 20.3678 6.67355 20.1459 6.3777 19.8248C6.08185 19.5037 5.88453 19.0988 5.812 18.663C5.74321 18.2368 5.80567 17.7985 5.99208 17.4079C6.1785 17.0172 6.47954 16.6944 6.85899 16.4849C7.23844 16.2755 7.67637 16.1901 8.10927 16.2408C8.54217 16.2915 8.94734 16.476 9.26 16.766" stroke="#272343" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M19.07 9.446C19.8681 8.24833 20.1219 6.77098 19.7742 5.36911C19.4265 3.96724 18.5056 2.77453 17.2352 2.08273C15.9648 1.39093 14.4646 1.2672 13.0962 1.74513C11.7278 2.22305 10.6166 3.26094 10.024 4.599C7.73204 3.86537 5.23003 4.7771 3.90799 6.88732C2.58594 8.99754 2.81127 11.6838 4.466 13.553" stroke="#272343" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M14.5311 6.898C14.7231 7.32493 15.0137 7.69937 15.3787 7.98647C15.7438 8.27356 16.1708 8.4644 16.6241 8.539C17.0773 8.61359 17.5426 8.56963 17.974 8.41121C18.4054 8.2528 18.7877 7.98526 19.0811 7.635C19.3258 7.32892 19.4959 6.96617 19.5764 6.57688C19.6568 6.18759 19.6452 5.78394 19.5423 5.39994C19.4395 5.01594 19.2484 4.6633 18.9851 4.37084C18.7217 4.07837 18.3943 3.85489 18.0311 3.717C17.6678 3.5791 17.2786 3.52066 16.8917 3.54607C16.5048 3.57148 16.1307 3.68008 15.7975 3.86437C15.4642 4.04866 15.1809 4.3038 14.9694 4.61182C14.7579 4.91985 14.6241 5.27205 14.5791 5.64" stroke="#272343" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <span class="feature-text">Smart ANC</span> </div> <div class="feature"> <div class="feature-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M2 9.6V14.4C2 15.8852 2.59 17.3096 3.6402 18.3598C4.6904 19.41 6.11479 20 7.6 20H16.4C17.8852 20 19.3096 19.41 20.3598 18.3598C21.41 17.3096 22 15.8852 22 14.4V9.6C22 8.11479 21.41 6.69041 20.3598 5.64018C19.3096 4.58995 17.8852 4 16.4 4H7.6C6.11479 4 4.6904 4.58995 3.6402 5.64018C2.59 6.69041 2 8.11479 2 9.6Z" stroke="#272343" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9.5 10L12 12.5L14.5 10" stroke="#272343" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <span class="feature-text">Gesture Control</span> </div> </div> <div class="price-container"> <span class="price">$249</span> <span class="price-old">$299</span> <span class="discount">-17%</span> </div> <div class="cta-buttons"> <button class="btn btn-primary" id="add-to-cart">Add to Cart</button> <button class="btn btn-secondary" id="learn-more">Learn More</button> </div> </div> </div> <div class="product-card"> <div class="product-image-3d"></div> <h3 class="product-title">Echo A7 Headphones</h3> <div class="rating"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="reviews">(128)</span> </div> </div> <div class="scroll-icon"> <div class="scroll-dot"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Parallax effect for product image window.addEventListener('mousemove', function(e) { const moveX = (e.clientX - window.innerWidth / 2) * 0.01; const moveY = (e.clientY - window.innerHeight / 2) * 0.01; document.querySelector('.product-image').style.transform = `translateX(${10 + moveX}%) translateY(${moveY}px)`; document.querySelector('.product-card').style.transform = `translateY(calc(-50% + ${moveY * 2}px)) translateX(${moveX * 2}px)`; }); // Button click animations const addToCartBtn = document.getElementById('add-to-cart'); const learnMoreBtn = document.getElementById('learn-more'); addToCartBtn.addEventListener('click', function() { this.textContent = '✓ Added to Cart'; this.style.backgroundColor = '#22a45d'; setTimeout(() => { this.textContent = 'Add to Cart'; this.style.backgroundColor = ''; }, 2000); }); learnMoreBtn.addEventListener('click', function() { const cardElement = document.querySelector('.product-card'); // Temporarily increase z-index for better visibility during animation cardElement.style.zIndex = '100'; // Add a class to animate cardElement.classList.add('active'); cardElement.style.transform = 'translateY(-50%) scale(1.1)'; cardElement.style.boxShadow = '0 25px 50px rgba(0, 0, 0, 0.2)'; setTimeout(() => { cardElement.style.transform = 'translateY(-50%) scale(1)'; cardElement.style.boxShadow = ''; cardElement.style.zIndex = '10'; }, 2000); }); // 3D tilt effect for product card const card = document.querySelector('.product-card'); card.addEventListener('mousemove', function(e) { const height = this.clientHeight; const width = this.clientWidth; const xVal = e.offsetX; const yVal = e.offsetY; const yRotation = 20 * ((xVal - width / 2) / width); const xRotation = -20 * ((yVal - height / 2) / height); const transformString = `perspective(500px) rotateX(${xRotation}deg) rotateY(${yRotation}deg) scale(1.05)`; this.style.transform = transformString; }); card.addEventListener('mouseout', function() { this.style.transform = 'translateY(-50%)'; }); // Feature icon hover animations const featureIcons = document.querySelectorAll('.feature-icon'); featureIcons.forEach(icon => { icon.addEventListener('mouseenter', function() { this.style.backgroundColor = '#bae8e8'; }); icon.addEventListener('mouseleave', function() { this.style.backgroundColor = '#e3f6f5'; }); }); }); </script> </body> </html>
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } :root { --primary: #2563eb; --primary-dark: #1d4ed8; --secondary: #0f172a; --accent: #38bdf8; --light: #f1f5f9; --gray: #94a3b8; --gray-dark: #475569; } body { background-color: var(--secondary); color: var(--light); overflow-x: hidden; width: 100%; height: 100%; max-width: 700px; max-height: 700px; } .container { max-width: 700px; height: 700px; margin: 0 auto; padding: 2rem; overflow-y: auto; position: relative; z-index: 2; scroll-behavior: smooth; } /* Geometric Pattern Background */ .geometric-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; opacity: 0.15; } .shape { position: absolute; border: 2px solid rgba(56, 189, 248, 0.3); border-radius: 2px; } /* Header Styles */ header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; position: relative; } .logo { font-size: 1.5rem; font-weight: 800; color: var(--light); position: relative; z-index: 2; } .logo span { color: var(--accent); } nav ul { display: flex; list-style: none; gap: 1.5rem; } nav a { color: var(--gray); text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: color 0.3s ease; position: relative; } nav a:hover { color: var(--accent); } nav a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 0; background-color: var(--accent); transition: width 0.3s ease; } nav a:hover::after { width: 100%; } /* Hero Section */ .hero { margin: 4rem 0; position: relative; z-index: 2; } .hero h1 { font-size: 3rem; font-weight: 800; line-height: 1.2; margin-bottom: 1.5rem; background: linear-gradient(90deg, var(--light) 0%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero p { font-size: 1.15rem; color: var(--gray); line-height: 1.6; margin-bottom: 2rem; max-width: 550px; } .cta-buttons { display: flex; gap: 1rem; } .btn { padding: 0.75rem 1.5rem; border-radius: 0.5rem; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; border: none; } .btn-primary { background-color: var(--primary); color: white; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.2); } .btn-primary:hover { background-color: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3); } .btn-secondary { background-color: transparent; color: var(--light); border: 1px solid var(--gray); } .btn-secondary:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); } /* Features Section */ .features { margin: 6rem 0; position: relative; z-index: 2; } .section-title { text-align: center; margin-bottom: 3rem; position: relative; } .section-title h2 { font-size: 2rem; font-weight: 700; color: var(--light); margin-bottom: 1rem; } .section-title p { color: var(--gray); font-size: 1.1rem; max-width: 600px; margin: 0 auto; } .section-title::after { content: ''; position: absolute; bottom: -1rem; left: 50%; transform: translateX(-50%); width: 50px; height: 3px; background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%); } .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin: 0 auto; } .feature-card { background: rgba(15, 23, 42, 0.5); border: 1px solid rgba(148, 163, 184, 0.1); padding: 1.5rem; border-radius: 0.75rem; transition: all 0.3s ease; position: relative; overflow: hidden; backdrop-filter: blur(10px); } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); border-color: rgba(56, 189, 248, 0.3); } .feature-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(56, 189, 248, 0.03), transparent); transform: rotate(45deg); transition: all 0.8s ease; z-index: -1; } .feature-card:hover::before { transform: rotate(45deg) translate(50%, 50%); } .feature-card .icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(37, 99, 235, 0.1); color: var(--accent); font-size: 1.5rem; margin-bottom: 1rem; } .feature-card h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--light); } .feature-card p { color: var(--gray); font-size: 0.95rem; line-height: 1.6; } /* Footer */ footer { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid rgba(148, 163, 184, 0.1); text-align: center; color: var(--gray); position: relative; z-index: 2; } .footer-logo { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; color: var(--light); } .footer-logo span { color: var(--accent); } .social-links { display: flex; justify-content: center; gap: 1rem; margin: 1.5rem 0; } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--gray); background: rgba(71, 85, 105, 0.1); transition: all 0.3s ease; } .social-links a:hover { color: var(--light); background: var(--primary); transform: translateY(-3px); } .copyright { font-size: 0.9rem; color: var(--gray-dark); margin-top: 1.5rem; } /* Scroll Animation */ .scroll-animate { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; } .scroll-animate.active { opacity: 1; transform: translateY(0); } /* Responsive Design */ @media (max-width: 768px) { .container { padding: 1.5rem; } header { flex-direction: column; align-items: flex-start; gap: 1rem; } nav ul { gap: 1rem; } .hero h1 { font-size: 2.25rem; } .hero p { font-size: 1rem; } .cta-buttons { flex-direction: column; width: 100%; } .btn { width: 100%; text-align: center; } .feature-grid { grid-template-columns: 1fr; } } /* Parallax Effect */ .parallax { transform: translateY(0); transition: transform 0.5s ease; } /* Cursor Effect */ .cursor-effect { position: fixed; width: 20px; height: 20px; border-radius: 50%; background-color: rgba(56, 189, 248, 0.5); pointer-events: none; mix-blend-mode: screen; z-index: 9999; transform: translate(-50%, -50%); filter: blur(3px); opacity: 0; transition: opacity 0.3s ease; } .cursor-effect-trail { position: fixed; width: 50px; height: 50px; border-radius: 50%; border: 2px solid rgba(56, 189, 248, 0.15); pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s ease; } </style> </head> <body> <div class="cursor-effect"></div> <div class="cursor-effect-trail"></div> <div class="geometric-bg" id="geometricBg"></div> <div class="container"> <header> <div class="logo">Nexus<span>Flow</span></div> <nav> <ul> <li><a href="#features">Features</a></li> <li><a href="#solutions">Solutions</a></li> <li><a href="#about">About</a></li> </ul> </nav> </header> <section class="hero scroll-animate"> <h1>Accelerate your startup with intelligent infrastructure</h1> <p>NexusFlow provides cutting-edge technology solutions that streamline operations, optimize workflows, and drive innovation. Built for startups that move at light speed.</p> <div class="cta-buttons"> <button class="btn btn-primary">Start Building</button> <button class="btn btn-secondary">View Demo</button> </div> </section> <section id="features" class="features"> <div class="section-title scroll-animate"> <h2>Platform Capabilities</h2> <p>Adaptable technology infrastructure designed for modern tech startups</p> </div> <div class="feature-grid"> <div class="feature-card scroll-animate"> <div class="icon"> <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"><polygon points="12 2 2 7 12 12 22 7 12 2"></polygon><polyline points="2 17 12 22 22 17"></polyline><polyline points="2 12 12 17 22 12"></polyline></svg> </div> <h3>Microservices Architecture</h3> <p>Build scalable applications with isolated services that can be developed, deployed, and maintained independently.</p> </div> <div class="feature-card scroll-animate"> <div class="icon"> <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"><path d="M20 14.66V20a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h5.34"></path><polygon points="18 2 22 6 12 16 8 16 8 12 18 2"></polygon></svg> </div> <h3>API-First Development</h3> <p>Design APIs before implementing services to ensure consistent interfaces and maximize developer productivity.</p> </div> <div class="feature-card scroll-animate"> <div class="icon"> <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"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg> </div> <h3>Security by Design</h3> <p>Automated security scanning and compliance checks woven into the CI/CD pipeline to protect your applications.</p> </div> <div class="feature-card scroll-animate"> <div class="icon"> <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"><path d="M22 12h-4l-3 9L9 3l-3 9H2"></path></svg> </div> <h3>Real-time Analytics</h3> <p>Monitor system health and user interactions with comprehensive dashboards for data-driven decisions.</p> </div> </div> </section> <footer> <div class="footer-logo">Nexus<span>Flow</span></div> <div class="social-links"> <a href="#" aria-label="Twitter"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg> </a> <a href="#" aria-label="GitHub"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg> </a> <a href="#" aria-label="LinkedIn"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg> </a> </div> <p class="copyright">© 2023 NexusFlow. All rights reserved.</p> </footer> </div> <script> // Create geometric pattern background function createGeometricBackground() { const container = document.getElementById('geometricBg'); const numShapes = 40; for (let i = 0; i < numShapes; i++) { const shape = document.createElement('div'); shape.classList.add('shape'); // Random size between 10px and 70px const size = Math.floor(Math.random() * 60) + 10; shape.style.width = `${size}px`; shape.style.height = `${size}px`; // Random position const posX = Math.floor(Math.random() * 100); const posY = Math.floor(Math.random() * 100); shape.style.left = `${posX}%`; shape.style.top = `${posY}%`; // Random rotation const rotation = Math.floor(Math.random() * 360); shape.style.transform = `rotate(${rotation}deg)`; // Random opacity const opacity = (Math.random() * 0.3) + 0.1; shape.style.opacity = opacity; // Random border color const colorValue = Math.floor(Math.random() * 50) + 150; shape.style.borderColor = `rgba(${colorValue}, ${colorValue + 20}, ${colorValue + 40}, ${opacity})`; container.appendChild(shape); } } // Scroll animation function handleScrollAnimations() { const elements = document.querySelectorAll('.scroll-animate'); elements.forEach(element => { const elementPosition = element.getBoundingClientRect().top; const windowHeight = window.innerHeight; if (elementPosition < windowHeight - 50) { element.classList.add('active'); } }); } // Parallax effect function handleParallax() { const container = document.querySelector('.container'); const scrollPosition = container.scrollTop; const parallaxElements = document.querySelectorAll('.parallax'); parallaxElements.forEach(element => { const speed = element.dataset.speed || 0.2; element.style.transform = `translateY(${scrollPosition * speed}px)`; }); } // Cursor effect function handleCursorEffect(e) { const cursor = document.querySelector('.cursor-effect'); const cursorTrail = document.querySelector('.cursor-effect-trail'); cursor.style.left = `${e.clientX}px`; cursor.style.top = `${e.clientY}px`; cursor.style.opacity = '1'; cursorTrail.style.left = `${e.clientX}px`; cursorTrail.style.top = `${e.clientY}px`; cursorTrail.style.opacity = '1'; } function hideCursor() { const cursor = document.querySelector('.cursor-effect'); const cursorTrail = document.querySelector('.cursor-effect-trail'); cursor.style.opacity = '0'; cursorTrail.style.opacity = '0'; } // Initialize document.addEventListener('DOMContentLoaded', () => { createGeometricBackground(); handleScrollAnimations(); // Scroll event listeners const container = document.querySelector('.container'); container.addEventListener('scroll', () => { handleScrollAnimations(); handleParallax(); }); // Cursor effect document.addEventListener('mousemove', handleCursorEffect); document.addEventListener('mouseleave', hideCursor); // Add active class to initial visible elements setTimeout(() => { handleScrollAnimations(); }, 100); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Creative Portfolio</title> <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Caveat:wght@400;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #2a2a2a; --accent: #ff6b6b; --light: #f9f7f3; --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } body { font-family: 'Montserrat', sans-serif; background-color: var(--light); color: var(--primary); overflow-x: hidden; height: 100vh; width: 100%; position: relative; line-height: 1.6; } .background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgogIDxkZWZzPgogICAgPHBhdHRlcm4gaWQ9InBhdHRlcm4iIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+CiAgICAgIDxsaW5lIHgxPSIwIiB5MT0iMCIgeDI9IjQwIiB5Mj0iNDAiIHN0cm9rZT0iI2ZmYWQ5ZCIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIiBzdHJva2UtZGFzaGFycmF5PSIxLCA5Ii8+CiAgICA8L3BhdHRlcm4+CiAgPC9kZWZzPgogIDxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNmOWY3ZjMiLz4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI3BhdHRlcm4pIiBvcGFjaXR5PSIwLjQiLz4KICA8Y2lyY2xlIGN4PSI3MCUiIGN5PSIyMCUiIHI9IjEyMCIgZmlsbD0iI2ZmZDZjYiIgb3BhY2l0eT0iMC4zIi8+CiAgPGNpcmNsZSBjeD0iMzAlIiBjeT0iODAlIiByPSIxNTAiIGZpbGw9IiNkNmY3ZmYiIG9wYWNpdHk9IjAuMiIvPgogIDxwYXRoIGQ9Ik01MCwxMDAgQzUwLDEwMCAxNTAsMTUwIDI1MCwxMDAgUzM1MCwyMDAgNDUwLDEwMCIgc3Ryb2tlPSIjODg4IiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWRhc2hhcnJheT0iMSwgMTUiIGZpbGw9Im5vbmUiIG9wYWNpdHk9IjAuMyIvPgogIDxwYXRoIGQ9Ik0tNTAsNDAwIEM1MCwzMDAgMTUwLDUwMCAyNTAsNDAwIFMzNTAsNTAwIDQ1MCw0MDAiIHN0cm9rZT0iIzg4OCIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IjEsIDE1IiBmaWxsPSJub25lIiBvcGFjaXR5PSIwLjMiLz4KPC9zdmc+') center/cover no-repeat; z-index: -1; opacity: 0.8; } .container { max-width: 700px; margin: 0 auto; padding: 20px; height: 100vh; display: flex; flex-direction: column; } header { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; margin-bottom: 30px; position: relative; } .logo { font-size: 24px; font-weight: 700; display: flex; align-items: center; } .logo .dot { width: 10px; height: 10px; background-color: var(--accent); border-radius: 50%; display: inline-block; margin-left: 5px; transform-origin: center; animation: pulse 3s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } nav ul { display: flex; list-style: none; gap: 20px; } nav a { text-decoration: none; color: var(--primary); font-weight: 500; position: relative; padding: 5px 0; text-transform: lowercase; transition: var(--transition); } nav a:hover { color: var(--accent); } nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--accent); transition: var(--transition); } nav a:hover::after { width: 100%; } .hamburger { display: none; cursor: pointer; background: none; border: none; padding: 10px; z-index: 10; } .hamburger span { display: block; width: 25px; height: 3px; margin: 5px 0; background-color: var(--primary); transition: var(--transition); } .content { flex: 1; display: flex; flex-direction: column; gap: 50px; padding: 0 10px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--accent) var(--light); } .content::-webkit-scrollbar { width: 5px; } .content::-webkit-scrollbar-thumb { background-color: var(--accent); border-radius: 10px; } .content::-webkit-scrollbar-track { background-color: transparent; } .hero { display: flex; flex-direction: column; gap: 20px; max-width: 600px; } .hero h1 { font-size: 3rem; line-height: 1.2; margin-bottom: 10px; } .hero p { font-size: 1.1rem; margin-bottom: 20px; max-width: 500px; } .handwritten { font-family: 'Caveat', cursive; color: var(--accent); display: inline-block; transform: rotate(-2deg); font-size: 1.2em; } .btn { display: inline-block; padding: 12px 30px; background-color: var(--primary); color: var(--light); border: none; cursor: pointer; text-decoration: none; border-radius: 4px; font-weight: 600; transition: var(--transition); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; z-index: 1; } .btn::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: var(--accent); transition: var(--transition); z-index: -1; } .btn:hover::before { width: 100%; } .btn:hover { transform: translateY(-3px); box-shadow: 0 7px 15px rgba(0, 0, 0, 0.15); } .portfolio { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; } .portfolio-item { position: relative; overflow: hidden; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: var(--transition); cursor: pointer; height: 200px; } .portfolio-item:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .portfolio-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .portfolio-item:hover img { transform: scale(1.1); } .portfolio-item .overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 15px; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); color: white; transform: translateY(100%); transition: var(--transition); } .portfolio-item:hover .overlay { transform: translateY(0); } .portfolio-item .overlay h3 { font-size: 1rem; margin-bottom: 5px; } .portfolio-item .overlay p { font-size: 0.8rem; opacity: 0.8; } .about { display: flex; flex-direction: column; gap: 20px; } .section-title { position: relative; margin-bottom: 20px; display: inline-block; } .section-title::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 50px; height: 3px; background-color: var(--accent); transition: var(--transition); } .section-title:hover::after { width: 100%; } .skills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .skill { padding: 5px 15px; background-color: rgba(255, 107, 107, 0.1); border-radius: 20px; font-size: 0.8rem; color: var(--accent); transition: var(--transition); border: 1px dashed var(--accent); } .skill:hover { background-color: var(--accent); color: white; transform: translateY(-3px); } .contact-section { display: flex; flex-direction: column; gap: 20px; } .social-links { display: flex; gap: 15px; margin-top: 10px; } .social-link { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: var(--primary); color: var(--light); text-decoration: none; transition: var(--transition); } .social-link:hover { background-color: var(--accent); transform: translateY(-3px) rotate(10deg); } .social-link i { font-size: 1.2rem; } .contact-form { margin-top: 20px; display: flex; flex-direction: column; gap: 15px; } .form-group { position: relative; } .contact-form input, .contact-form textarea { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 4px; font-family: 'Montserrat', sans-serif; font-size: 0.9rem; transition: var(--transition); background-color: rgba(255, 255, 255, 0.8); } .contact-form textarea { resize: vertical; min-height: 100px; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.2); } .contact-form label { position: absolute; top: 12px; left: 15px; font-size: 0.9rem; color: #777; pointer-events: none; transition: var(--transition); } .contact-form input:focus ~ label, .contact-form textarea:focus ~ label, .contact-form input:not(:placeholder-shown) ~ label, .contact-form textarea:not(:placeholder-shown) ~ label { transform: translateY(-20px) scale(0.8); color: var(--accent); background-color: var(--light); padding: 0 5px; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: transparent; } .portfolio-details { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; z-index: 100; opacity: 0; pointer-events: none; transition: var(--transition); padding: 20px; } .portfolio-details.active { opacity: 1; pointer-events: all; } .details-content { background-color: white; border-radius: 8px; max-width: 600px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; padding: 20px; transform: scale(0.9); transition: transform 0.4s; } .portfolio-details.active .details-content { transform: scale(1); } .close-details { position: absolute; top: 15px; right: 15px; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--primary); transition: var(--transition); } .close-details:hover { color: var(--accent); transform: rotate(90deg); } .details-content img { width: 100%; height: auto; border-radius: 6px; margin-bottom: 20px; } .cursor { position: fixed; width: 15px; height: 15px; border-radius: 50%; background-color: var(--accent); pointer-events: none; mix-blend-mode: difference; transform: translate(-50%, -50%); z-index: 999; transition: transform 0.1s ease; opacity: 0.7; } @media (max-width: 768px) { .hamburger { display: block; } nav { position: fixed; top: 0; right: -100%; width: 70%; height: 100vh; background-color: var(--light); z-index: 9; display: flex; align-items: center; justify-content: center; transition: var(--transition); box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); } nav.active { right: 0; } nav ul { flex-direction: column; align-items: center; } nav a { font-size: 1.2rem; } .hero h1 { font-size: 2.5rem; } .hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .cursor { display: none; } } @media (max-width: 480px) { .hero h1 { font-size: 2rem; } .portfolio { grid-template-columns: 1fr; } .portfolio-item { height: 250px; } } </style> </head> <body> <div class="cursor"></div> <div class="background"></div> <div class="container"> <header> <div class="logo">emma<span class="dot"></span>sketch</div> <button class="hamburger"> <span></span> <span></span> <span></span> </button> <nav> <ul> <li><a href="#work">work</a></li> <li><a href="#about">about</a></li> <li><a href="#contact">contact</a></li> </ul> </nav> </header> <div class="content"> <section class="hero"> <h1>Creating visual <span class="handwritten">stories</span> through watercolor & digital art</h1> <p>Illustrator and designer with a passion for hand-drawn aesthetics that bridge the gap between traditional and digital artforms.</p> <a href="#work" class="btn">View Portfolio</a> </section> <section id="work" class="portfolio-section"> <h2 class="section-title">Selected Works</h2> <div class="portfolio"> <div class="portfolio-item" data-id="1"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iI2ZmZDZjYiIvPjxjaXJjbGUgY3g9IjE1MCIgY3k9IjE1MCIgcj0iNzAiIGZpbGw9IiNmZjllOWUiIGZpbGwtb3BhY2l0eT0iMC43Ii8+PHBhdGggZD0iTTEwMCw3MCBDMTQwLDExMCAxNTAsMTIwIDIxMCw5MCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Ik03MCwxODAgQzExMCwyMjAgMTUwLDIzMCAyMTAsMTkwIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+" alt="Floral Watercolor Series"> <div class="overlay"> <h3>Floral Watercolor Series</h3> <p>Hand-painted botanical illustrations</p> </div> </div> <div class="portfolio-item" data-id="2"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iI2Q2ZGZmZiIvPjxwYXRoIGQ9Ik01MCw1MCBMMTAwLDEwMCBMMTUwLDcwIEwyMDAsMTIwIEwyNTAsMTAwIiBzdHJva2U9IiM4ODg4ODgiIHN0cm9rZS13aWR0aD0iMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTUwLDE1MCBMMTAwLDIwMCBMMTUwLDE3MCBMMjAwLDIyMCBMMjUwLDIwMCIgc3Ryb2tlPSIjODg4ODg4IiBzdHJva2Utd2lkdGg9IjMiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxjaXJjbGUgY3g9IjE1MCIgY3k9IjE1MCIgcj0iNDAiIGZpbGw9IiM5ZmJjZmYiIGZpbGwtb3BhY2l0eT0iMC43Ii8+PC9zdmc+" alt="Minimal Line Art"> <div class="overlay"> <h3>Minimal Line Art</h3> <p>Pen and ink abstract forms</p> </div> </div> <div class="portfolio-item" data-id="3"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iI2YwZTZmZiIvPjxjaXJjbGUgY3g9IjE1MCIgY3k9IjgwIiByPSI1MCIgZmlsbD0iI2MzYWRmZiIgZmlsbC1vcGFjaXR5PSIwLjciLz48cmVjdCB4PSI3MCIgeT0iMTQwIiB3aWR0aD0iMTYwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2Q1YzNmZiIgZmlsbC1vcGFjaXR5PSIwLjciLz48cGF0aCBkPSJNNzAsMjQwIEw3MCwxNDAgTDIzMCwxNDAgTDIzMCwyNDAiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=" alt="Brand Identity: Bloom"> <div class="overlay"> <h3>Brand Identity: Bloom</h3> <p>Watercolor logo and packaging</p> </div> </div> <div class="portfolio-item" data-id="4"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjMwMCIgZmlsbD0iI2ZmZWNkNiIvPjxjaXJjbGUgY3g9IjgwIiBjeT0iODAiIHI9IjUwIiBmaWxsPSIjZmZkNzk1IiBmaWxsLW9wYWNpdHk9IjAuNyIvPjxjaXJjbGUgY3g9IjIyMCIgY3k9IjIyMCIgcj0iNTAiIGZpbGw9IiNmZmM2NzUiIGZpbGwtb3BhY2l0eT0iMC43Ii8+PHBhdGggZD0iTTgwLDgwIEwyMjAsMjIwIiBzdHJva2U9IiNmZmY1ZWIiIHN0cm9rZS13aWR0aD0iMTAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==" alt="Book Illustrations"> <div class="overlay"> <h3>Book Illustrations</h3> <p>Children's book watercolor series</p> </div> </div> </div> </section> <section id="about" class="about"> <h2 class="section-title">About Me</h2> <p>I'm a self-taught artist who fell in love with watercolors after spending years in the digital design world. My work combines traditional hand-drawn elements with contemporary design principles, creating a signature style that feels both nostalgic and modern.</p> <p>Each piece in my portfolio begins as a pencil sketch or watercolor painting, which I carefully scan and refine digitally while preserving the original texture and spontaneity of traditional media.</p> <h3>Skills & Techniques</h3> <div class="skills"> <span class="skill">Watercolor</span> <span class="skill">Ink Drawing</span> <span class="skill">Digital Illustration</span> <span class="skill">Pattern Design</span> <span class="skill">Editorial Art</span> <span class="skill">Brand Identity</span> </div> </section> <section id="contact" class="contact-section"> <h2 class="section-title">Let's Connect</h2> <p>Interested in collaborating or commissioning a custom piece? Send me a message and I'll get back to you within 48 hours.</p> <div class="social-links"> <a href="#" class="social-link"> <i>in</i> </a> <a href="#" class="social-link"> <i>ig</i> </a> <a href="#" class="social-link"> <i>be</i> </a> </div> <form class="contact-form"> <div class="form-group"> <input type="text" id="name" placeholder="Your Name"> <label for="name">Your Name</label> </div> <div class="form-group"> <input type="email" id="email" placeholder="Your Email"> <label for="email">Your Email</label> </div> <div class="form-group"> <textarea id="message" placeholder="Your Message"></textarea> <label for="message">Your Message</label> </div> <button type="button" class="btn" id="submitBtn">Send Message</button> </form> </section> </div> </div> <div class="portfolio-details"> <div class="details-content"> <button class="close-details">×</button> <img id="detail-image" src="" alt=""> <h2 id="detail-title"></h2> <p id="detail-description"></p> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Custom Cursor const cursor = document.querySelector('.cursor'); document.addEventListener('mousemove', (e) => { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; }); document.addEventListener('mousedown', () => { cursor.style.transform = 'translate(-50%, -50%) scale(0.7)'; }); document.addEventListener('mouseup', () => { cursor.style.transform = 'translate(-50%, -50%) scale(1)'; }); // Portfolio Items Detail View const portfolioItems = document.querySelectorAll('.portfolio-item'); const portfolioDetails = document.querySelector('.portfolio-details'); const closeDetails = document.querySelector('.close-details'); const detailImage = document.getElementById('detail-image'); const detailTitle = document.getElementById('detail-title'); const detailDescription = document.getElementById('detail-description'); const portfolioData = [ { id: 1, title: "Floral Watercolor Series", description: "A collection of delicate botanical illustrations created with traditional watercolor techniques. Each piece captures the subtle transparencies and organic textures that only watercolor can achieve. This series was featured in 'Botanical Art Quarterly' and has been used for a line of artisanal greeting cards.", image: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIj48cmVjdCB3aWR0aD0iNjAwIiBoZWlnaHQ9IjQwMCIgZmlsbD0iI2ZmZDZjYiIvPjxjaXJjbGUgY3g9IjMwMCIgY3k9IjIwMCIgcj0iMTIwIiBmaWxsPSIjZmY5ZTllIiBmaWxsLW9wYWNpdHk9IjAuNyIvPjxwYXRoIGQ9Ik0yMDAsMTIwIEMyODAsMTgwIDMwMCwyMDAgNDIwLDE2MCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjUiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Ik0xNDAsMjQwIEMyMjAsMzAwIDMwMCwzMjAgNDIwLDI2MCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjUiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjxwYXRoIGQ9Ik0zMDAsMTAwIEMzMDAsMTAwIDMzMCwxNTAgMzAwLDIwMCBDMjcwLDI1MCAzMDAsMzAwIDMwMCwzMDAiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIzIiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48Y2lyY2xlIGN4PSIyMDAiIGN5PSIxNTAiIHI9IjMwIiBmaWxsPSIjZmY3YzdjIiBmaWxsLW9wYWNpdHk9IjAuNyIvPjxjaXJjbGUgY3g9IjQwMCIgY3k9IjIyMCIgcj0iMjUiIGZpbGw9IiNmZjdjN2MiIGZpbGwtb3BhY2l0eT0iMC43Ii8+PC9zdmc+" }, { id: 2, title: "Minimal Line Art", description: "A series exploring form and space through minimal line work. These compositions are created with Japanese brush pens on textured paper, focusing on the relationship between positive and negative space. The series has been adapted for a collection of minimalist home decor items.", image: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MDAiIGhlaWdodD0iNDAwIj48cmVjdCB3aWR0aD0iNjAwIiBoZWlnaHQ9IjQwMCIgZmlsbD0iI2Q2ZGZmZiIvPjxwYXRoIGQ9Ik0xMDAsMTAwIEwyMDAsMjAwIEwzMDAsMTQwIEw0MDAsMjQwIEw1MDAsMjAwIiBzdHJva2U9IiM4ODg4ODgiIHN0cm9rZS13aWR0aD0iNSIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PHBhdGggZD0iTTEwMCwzMDAgTDIwMCw0MDAgTDMwMCwzNDAgTDQwMCw0NDAgTDUwMCw0MDAiIHN0cm9rZT0iIzg4ODg4
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Serene Health & Wellness</title> <style> @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Montserrat:wght@300;400;500;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #4D7B82; --secondary: #E8F5F2; --accent: #8AAD9E; --text: #2E4045; --light-text: #5E7076; --bg: #FFFFFF; } body, html { font-family: 'Montserrat', sans-serif; height: 100%; width: 100%; overflow: hidden; color: var(--text); background-color: var(--bg); } .container { position: relative; height: 700px; width: 700px; max-width: 100%; margin: 0 auto; overflow: hidden; } .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; } .leaf-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" fill="none"><path d="M60,40 Q80,20 90,40 T70,70 Q60,80 50,70 T30,50 Q20,40 40,30 T60,40" fill="%238AAD9E" opacity="0.2"/></svg>') repeat; background-size: 200px; opacity: 0.3; } .water-ripple { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, transparent 0%, var(--secondary) 70%); opacity: 0.6; } .content { position: relative; padding: 2rem; height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--accent) var(--secondary); } .content::-webkit-scrollbar { width: 5px; } .content::-webkit-scrollbar-track { background: var(--secondary); } .content::-webkit-scrollbar-thumb { background-color: var(--accent); border-radius: 10px; } header { text-align: center; margin-bottom: 2rem; } .logo { font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; font-weight: 500; color: var(--primary); margin-bottom: 0.5rem; letter-spacing: 1px; } .tagline { font-size: 0.9rem; color: var(--light-text); font-weight: 300; } nav { display: flex; justify-content: center; margin: 1.5rem 0; } .nav-link { margin: 0 1rem; text-decoration: none; color: var(--text); font-size: 0.9rem; position: relative; padding: 5px 0; transition: color 0.3s ease; } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--accent); transition: width 0.3s ease; } .nav-link:hover { color: var(--primary); } .nav-link:hover::after { width: 100%; } .featured-article { background-color: rgba(255, 255, 255, 0.85); border-radius: 12px; padding: 2rem; margin-bottom: 2rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; } .featured-article:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } .featured-article::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 0; background-color: var(--accent); transition: height 0.5s ease; } .featured-article:hover::before { height: 100%; } .article-title { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 600; color: var(--primary); margin-bottom: 1rem; } .article-excerpt { font-size: 0.95rem; line-height: 1.6; color: var(--light-text); margin-bottom: 1.5rem; } .read-more { display: inline-flex; align-items: center; text-decoration: none; color: var(--primary); font-weight: 500; font-size: 0.9rem; transition: color 0.3s ease; } .read-more:hover { color: var(--accent); } .read-more svg { margin-left: 5px; transition: transform 0.3s ease; } .read-more:hover svg { transform: translateX(5px); } .article-categories { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.5rem; } .category-tag { background-color: var(--secondary); color: var(--primary); padding: 4px 10px; border-radius: 4px; font-size: 0.8rem; transition: background-color 0.3s ease, color 0.3s ease; } .category-tag:hover { background-color: var(--primary); color: white; } .recent-posts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 2rem; } .post-card { background-color: rgba(255, 255, 255, 0.9); border-radius: 8px; padding: 1.2rem; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; position: relative; overflow: hidden; } .post-card:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); } .post-card::before { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background-color: var(--accent); transition: width 0.3s ease; } .post-card:hover::before { width: 100%; } .post-title { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 600; color: var(--primary); margin-bottom: 0.5rem; } .post-excerpt { font-size: 0.85rem; line-height: 1.5; color: var(--light-text); margin-bottom: 1rem; flex-grow: 1; } .post-meta { font-size: 0.75rem; color: var(--accent); } .newsletter { background-color: rgba(255, 255, 255, 0.9); border-radius: 10px; padding: 1.5rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); text-align: center; position: relative; overflow: hidden; } .newsletter::before { content: ''; position: absolute; top: 0; right: 0; width: 100px; height: 100px; background: radial-gradient(circle at top right, var(--secondary) 0%, transparent 70%); opacity: 0.6; } .newsletter-title { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 600; color: var(--primary); margin-bottom: 0.5rem; } .newsletter-text { font-size: 0.9rem; line-height: 1.5; color: var(--light-text); margin-bottom: 1.2rem; } .newsletter-form { display: flex; gap: 10px; max-width: 400px; margin: 0 auto; } .newsletter-input { flex-grow: 1; padding: 10px 15px; border: 1px solid var(--secondary); border-radius: 5px; font-family: 'Montserrat', sans-serif; font-size: 0.9rem; outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .newsletter-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(138, 173, 158, 0.2); } .newsletter-button { background-color: var(--primary); color: white; border: none; border-radius: 5px; padding: 10px 20px; font-family: 'Montserrat', sans-serif; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; } .newsletter-button:hover { background-color: #3C6168; transform: translateY(-2px); } .newsletter-button:active { transform: translateY(0); } footer { text-align: center; padding: 1rem 0; font-size: 0.8rem; color: var(--light-text); } .ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.4); transform: scale(0); animation: ripple-animation 2s infinite ease-out; pointer-events: none; } @keyframes ripple-animation { 0% { transform: scale(0); opacity: 0.5; } 100% { transform: scale(1); opacity: 0; } } .floating-leaf { position: absolute; width: 30px; height: 30px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%238AAD9E" opacity="0.3"><path d="M17,8C8,10,5.9,16.17,3.82,21.34L5.71,22L6.66,19.7C7.14,19.87,7.64,20,8,20C19,20,22,3,22,3C21,5,14,5.25,9,6.25C4,7.25,2,11.5,2,13.5C2,15.5,3.75,17.25,3.75,17.25C7,8,17,8,17,8Z"/></svg>'); background-size: contain; background-repeat: no-repeat; z-index: -1; opacity: 0.6; pointer-events: none; } @media (max-width: 600px) { .container { width: 100%; height: 100%; } .content { padding: 1.5rem; } .logo { font-size: 1.8rem; } .tagline { font-size: 0.8rem; } nav { flex-wrap: wrap; } .nav-link { margin: 0 0.5rem; font-size: 0.8rem; } .featured-article { padding: 1.5rem; } .article-title { font-size: 1.4rem; } .recent-posts { grid-template-columns: 1fr; } } </style> </head> <body> <div class="container"> <div class="background"> <div class="leaf-pattern"></div> <div class="water-ripple"></div> </div> <div class="content"> <header> <div class="logo">Serene Wellness</div> <div class="tagline">Cultivating balance in mind, body, and spirit</div> <nav> <a href="#" class="nav-link">Mind</a> <a href="#" class="nav-link">Body</a> <a href="#" class="nav-link">Nutrition</a> <a href="#" class="nav-link">Practices</a> </nav> </header> <article class="featured-article"> <div class="article-categories"> <span class="category-tag">Mindfulness</span> <span class="category-tag">Mental Health</span> </div> <h2 class="article-title">The Ripple Effect: How Small Mindful Moments Create Lasting Change</h2> <p class="article-excerpt"> Just as a single droplet creates ripples across still water, brief moments of mindfulness can transform your mental landscape. In our latest research-backed exploration, discover how dedicating just 3 minutes of mindful breathing three times daily reduced cortisol levels by 23% in participants after two weeks. We'll guide you through practical techniques that fit seamlessly into your busy schedule. </p> <a href="#" class="read-more"> Continue reading <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M5 12h14"></path> <path d="M12 5l7 7-7 7"></path> </svg> </a> </article> <section class="recent-posts"> <article class="post-card"> <h3 class="post-title">Forest Bathing: The Japanese Art of Nature Therapy</h3> <p class="post-excerpt"> Shinrin-yoku (literally "forest bathing") isn't just a walk in the woods. This evidence-based practice reduces blood pressure and boosts immune function through phytoncides—natural compounds released by trees. </p> <div class="post-meta">May 15, 2023 • 6 min read</div> </article> <article class="post-card"> <h3 class="post-title">Circadian Nutrition: Timing Your Meals for Optimal Health</h3> <p class="post-excerpt"> Your body's internal clock affects more than sleep. Learn how aligning your eating schedule with your circadian rhythm can improve digestion, metabolism, and energy levels throughout the day. </p> <div class="post-meta">May 8, 2023 • 8 min read</div> </article> <article class="post-card"> <h3 class="post-title">Breathwork Techniques for Anxiety Management</h3> <p class="post-excerpt"> The 4-7-8 breathing method, box breathing, and alternate nostril breathing can activate your parasympathetic nervous system, reducing anxiety within minutes when practiced correctly. </p> <div class="post-meta">April 29, 2023 • 5 min read</div> </article> <article class="post-card"> <h3 class="post-title">Balancing Your Microbiome: Beyond Probiotics</h3> <p class="post-excerpt"> New research suggests that prebiotic foods may be more effective than supplements for gut health. Discover the top 12 foods that nourish your beneficial gut bacteria naturally. </p> <div class="post-meta">April 20, 2023 • 7 min read</div> </article> </section> <section class="newsletter"> <h3 class="newsletter-title">Weekly Wellness Wisdom</h3> <p class="newsletter-text"> Join our mindful community and receive science-backed wellness insights, seasonal self-care rituals, and exclusive meditation guides delivered weekly. </p> <form class="newsletter-form" onsubmit="handleSubmit(event)"> <input type="email" class="newsletter-input" placeholder="Your email address" required> <button type="submit" class="newsletter-button">Subscribe</button> </form> </section> <footer> <p>© 2023 Serene Wellness | Mindful content for balanced living</p> </footer> </div> </div> <script> // Create water ripple effect on click document.addEventListener('DOMContentLoaded', function() { const container = document.querySelector('.container'); container.addEventListener('click', function(e) { // Only create ripple on background clicks, not on interactive elements if (e.target.classList.contains('container') || e.target.classList.contains('background') || e.target.classList.contains('leaf-pattern') || e.target.classList.contains('water-ripple')) { createRipple(e); } }); function createRipple(e) { const ripple = document.createElement('div'); ripple.classList.add('ripple'); const x = e.clientX - container.getBoundingClientRect().left; const y = e.clientY - container.getBoundingClientRect().top; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; // Randomize ripple size const size = Math.floor(Math.random() * 100) + 100; ripple.style.width = `${size}px`; ripple.style.height = `${size}px`; container.appendChild(ripple); // Remove the ripple after animation completes setTimeout(() => { ripple.remove(); }, 2000); } // Create floating leaves animation function createFloatingLeaves() { const numLeaves = 5; for (let i = 0; i < numLeaves; i++) { setTimeout(() => { const leaf = document.createElement('div'); leaf.classList.add('floating-leaf'); // Randomize starting position const startX = Math.random() * container.clientWidth; const startY = container.clientHeight + 10; leaf.style.left = `${startX}px`; leaf.style.top = `${startY}px`; // Randomize size const size = Math.floor(Math.random() * 20) + 15; leaf.style.width = `${size}px`; leaf.style.height = `${size}px`; // Randomize opacity leaf.style.opacity = (Math.random() * 0.3 + 0.1).toString(); // Randomize rotation const rotation = Math.floor(Math.random() * 360); leaf.style.transform = `rotate(${rotation}deg)`; container.appendChild(leaf); // Animate leaf floating upward const duration = Math.floor(Math.random() * 15000) + 10000; const targetX = startX + (Math.random() * 100 - 50); const targetY = -50; // Create animation leaf.animate([ { transform: `translate(0, 0) rotate(${rotation}deg)` }, { transform: `translate(${targetX - startX}px, ${targetY - startY}px) rotate(${rotation + 360}deg)` } ], { duration: duration, easing: 'ease-out', iterations: 1 }).onfinish = () => { leaf.remove(); // Create new leaf when this one finishes createFloatingLeaves(1); }; }, i * 2000); // Stagger leaf creation } } // Start leaves animation createFloatingLeaves(); // Subtle parallax effect on mouse move container.addEventListener('mousemove', function(e) { const leafPattern = document.querySelector('.leaf-pattern'); const waterRipple = document.querySelector('.water-ripple'); const xPos = (e.clientX / container.clientWidth) * 10; const yPos = (e.clientY / container.clientHeight) * 10; leafPattern.style.transform = `translate(${xPos}px, ${yPos}px)`; waterRipple.style.transform = `translate(${-xPos/2}px, ${-yPos/2}px)`; }); // Handle form submission (prevent default) window.handleSubmit = function(event) { event.preventDefault(); const input = document.querySelector('.newsletter-input'); const button = document.querySelector('.newsletter-button'); if (input.value) { // Show success state button.textContent = "Subscribed!"; button.style.backgroundColor = "#8AAD9E"; input.style.borderColor = "#8AAD9E"; // Reset after 2 seconds setTimeout(() => { button.textContent = "Subscribe"; button.style.backgroundColor = ""; input.style.borderColor = ""; input.value = ""; }, 2000); } }; }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PARALLAX | Modern Magazine</title> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Work+Sans:wght@300;400;600;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary-color: #121212; --accent-color: #ff3e4d; --light-gray: #f2f2f2; --dark-gray: #3a3a3a; --white: #ffffff; } body { font-family: 'Work Sans', sans-serif; color: var(--primary-color); overflow-x: hidden; background-color: var(--white); height: 700px; position: relative; width: 100%; } .magazine-container { width: 100%; height: 700px; overflow-y: scroll; overflow-x: hidden; position: relative; scroll-behavior: smooth; } .magazine-container::-webkit-scrollbar { width: 5px; } .magazine-container::-webkit-scrollbar-track { background: var(--light-gray); } .magazine-container::-webkit-scrollbar-thumb { background: var(--dark-gray); } .header { position: fixed; top: 0; left: 0; width: 100%; padding: 1.5rem; z-index: 100; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(5px); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); } .nav { display: flex; justify-content: space-between; align-items: center; max-width: 650px; margin: 0 auto; } .logo { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.5rem; color: var(--primary-color); text-decoration: none; position: relative; } .logo::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background-color: var(--accent-color); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .logo:hover::after { transform: scaleX(1); } .menu-toggle { display: none; background: none; border: none; cursor: pointer; font-size: 1.5rem; } .menu { display: flex; } .menu-item { margin-left: 1.5rem; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; color: var(--primary-color); transition: color 0.3s ease; } .menu-item:hover { color: var(--accent-color); } .parallax-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url('https://images.unsplash.com/photo-1505682750263-f3f9e519c565?ixlib=rb-1.2.1&auto=format&fit=crop&q=80') no-repeat center center; background-size: cover; z-index: -1; opacity: 0.3; } .magazine-section { height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; padding: 2rem; } .magazine-content { max-width: 650px; padding: 3rem; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); position: relative; z-index: 2; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .magazine-content:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); } .magazine-content::before { content: ''; position: absolute; top: -10px; left: -10px; width: 50px; height: 50px; background-color: var(--accent-color); border-radius: 50%; opacity: 0.3; z-index: -1; transition: transform 0.5s ease; } .magazine-content:hover::before { transform: scale(5); } .section-title { font-family: 'Playfair Display', serif; font-size: 2.5rem; margin-bottom: 1.5rem; line-height: 1.2; position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 50%; height: 3px; background-color: var(--accent-color); } .section-subtitle { font-family: 'Work Sans', sans-serif; font-size: 1.2rem; font-weight: 300; margin-bottom: 2rem; color: var(--dark-gray); } .section-content p { margin-bottom: 1.5rem; line-height: 1.8; font-size: 1rem; } .highlight { color: var(--accent-color); font-weight: 600; } .article-img { width: 100%; height: 300px; object-fit: cover; margin: 2rem 0; transition: transform 0.3s ease; cursor: pointer; position: relative; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .article-img:hover { transform: scale(1.02); } .article-caption { font-size: 0.85rem; color: var(--dark-gray); text-align: center; margin-top: 0.5rem; font-style: italic; } .article-tags { display: flex; flex-wrap: wrap; margin: 2rem 0; } .tag { padding: 0.4rem 0.8rem; background-color: var(--light-gray); border-radius: 20px; margin-right: 0.5rem; margin-bottom: 0.5rem; font-size: 0.8rem; font-weight: 600; transition: background-color 0.3s ease, color 0.3s ease; cursor: pointer; } .tag:hover { background-color: var(--accent-color); color: var(--white); } .article-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--light-gray); } .author-info { display: flex; align-items: center; } .author-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; margin-right: 1rem; border: 2px solid var(--accent-color); } .author-name { font-weight: 600; font-size: 0.9rem; } .author-role { font-size: 0.8rem; color: var(--dark-gray); } .share-buttons { display: flex; } .share-btn { width: 35px; height: 35px; border-radius: 50%; background-color: var(--light-gray); display: flex; align-items: center; justify-content: center; margin-left: 0.5rem; cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease; } .share-btn:hover { background-color: var(--accent-color); transform: translateY(-3px); } .share-btn i { color: var(--primary-color); font-size: 1rem; transition: color 0.3s ease; } .share-btn:hover i { color: var(--white); } .pull-quote { font-family: 'Playfair Display', serif; font-size: 1.5rem; line-height: 1.5; padding: 2rem; margin: 2rem 0; position: relative; color: var(--dark-gray); border-left: 3px solid var(--accent-color); background-color: var(--light-gray); } .pull-quote::before { content: '"'; font-size: 4rem; position: absolute; top: -20px; left: 10px; color: var(--accent-color); opacity: 0.3; } @media (max-width: 768px) { .nav { flex-direction: column; align-items: flex-start; } .menu { flex-direction: column; width: 100%; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .menu-toggle { display: block; position: absolute; top: 1.5rem; right: 1.5rem; } .menu-item { margin: 1rem 0; margin-left: 0; } .menu.active { max-height: 300px; } .magazine-content { padding: 2rem; } .section-title { font-size: 2rem; } .article-footer { flex-direction: column; align-items: flex-start; } .share-buttons { margin-top: 1rem; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.8s ease forwards; opacity: 0; } .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.3s; } .delay-3 { animation-delay: 0.5s; } /* Custom cursor */ .custom-cursor { position: fixed; width: 20px; height: 20px; border-radius: 50%; background-color: rgba(255, 62, 77, 0.3); pointer-events: none; mix-blend-mode: difference; z-index: 9999; transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s, background-color 0.3s; } /* Reading progress */ .progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: transparent; z-index: 101; } .progress-bar { height: 100%; background: var(--accent-color); width: 0%; } </style> </head> <body> <div class="custom-cursor"></div> <div class="progress-container"> <div class="progress-bar" id="progressBar"></div> </div> <div class="parallax-background"></div> <header class="header"> <nav class="nav"> <a href="#" class="logo">PARALLAX</a> <button class="menu-toggle" id="menuToggle">☰</button> <div class="menu" id="menu"> <a href="#" class="menu-item">Features</a> <a href="#" class="menu-item">Photography</a> <a href="#" class="menu-item">Design</a> <a href="#" class="menu-item">Subscribe</a> </div> </nav> </header> <div class="magazine-container" id="magazineContainer"> <section class="magazine-section"> <div class="magazine-content"> <h1 class="section-title fade-in">The Art of Visual Depth</h1> <h2 class="section-subtitle fade-in delay-1">How modern photographers use layering to create immersive editorial narratives</h2> <div class="section-content"> <p class="fade-in delay-2">In the ever-evolving landscape of digital publishing, the marriage between <span class="highlight">photography and editorial design</span> has entered a new dimension. Modern magazines are no longer satisfied with static layouts—they're creating interactive experiences that pull readers deeper into the narrative.</p> <p class="fade-in delay-3">Today's most innovative publications are employing <span class="highlight">parallax techniques</span> not just as visual gimmicks, but as storytelling devices that enhance the emotional impact of their content.</p> <img src="https://images.unsplash.com/photo-1504052434569-70ad5836ab65?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="Photographer working with layered composition" class="article-img fade-in"> <div class="article-caption">Photographer Maya Livingston employing depth techniques during an editorial shoot for Vogue Italia</div> <p>The concept is deceptively simple: by allowing background and foreground elements to move at different speeds, designers create an illusion of depth that mimics how our eyes naturally perceive the world. What's revolutionary is how this technical approach is being integrated with editorial strategy.</p> <div class="pull-quote">When used thoughtfully, parallax isn't just a visual effect—it's a narrative device that guides readers through layers of meaning, mimicking how we discover and process information in real life.</div> <p>"We're seeing photography directors specifically shooting with parallax in mind," explains design director Javier Mendoza. "They're composing images with distinct foreground, middle-ground, and background elements, knowing these planes will eventually move independently in the digital version."</p> <p>This deliberate approach requires photographers to think beyond the traditional frame. "You're essentially shooting for animation," says <span class="highlight">editorial photographer Elena Chen</span>. "You need to capture more environmental context and ensure your focal points work within a dynamic composition."</p> <div class="article-tags"> <span class="tag">Editorial Design</span> <span class="tag">Photography</span> <span class="tag">Digital Publishing</span> <span class="tag">Motion Design</span> <span class="tag">Visual Storytelling</span> </div> <div class="article-footer"> <div class="author-info"> <img src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="Author" class="author-img"> <div> <div class="author-name">Marcus Donovan</div> <div class="author-role">Design Editor</div> </div> </div> <div class="share-buttons"> <div class="share-btn"><i>♥</i></div> <div class="share-btn"><i>↗</i></div> <div class="share-btn"><i>✉</i></div> </div> </div> </div> </div> </section> </div> <script> // Custom cursor document.addEventListener('DOMContentLoaded', () => { const cursor = document.createElement('div'); cursor.classList.add('custom-cursor'); document.body.appendChild(cursor); document.addEventListener('mousemove', (e) => { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; }); document.addEventListener('mousedown', () => { cursor.style.width = '15px'; cursor.style.height = '15px'; cursor.style.backgroundColor = 'rgba(255, 62, 77, 0.5)'; }); document.addEventListener('mouseup', () => { cursor.style.width = '20px'; cursor.style.height = '20px'; cursor.style.backgroundColor = 'rgba(255, 62, 77, 0.3)'; }); // Add hover effect to interactive elements const interactiveElements = document.querySelectorAll('a, button, .tag, .share-btn, .article-img'); interactiveElements.forEach(el => { el.addEventListener('mouseenter', () => { cursor.style.width = '40px'; cursor.style.height = '40px'; cursor.style.backgroundColor = 'rgba(255, 62, 77, 0.2)'; }); el.addEventListener('mouseleave', () => { cursor.style.width = '20px'; cursor.style.height = '20px'; cursor.style.backgroundColor = 'rgba(255, 62, 77, 0.3)'; }); }); // Menu toggle for mobile const menuToggle = document.getElementById('menuToggle'); const menu = document.getElementById('menu'); if (menuToggle && menu) { menuToggle.addEventListener('click', () => { menu.classList.toggle('active'); }); } // Parallax effect const parallaxBg = document.querySelector('.parallax-background'); const magazineContainer = document.getElementById('magazineContainer'); if (parallaxBg && magazineContainer) { magazineContainer.addEventListener('scroll', () => { const scrolled = magazineContainer.scrollTop; parallaxBg.style.transform = `translateY(${scrolled * 0.3}px)`; // Update reading progress const windowHeight = magazineContainer.clientHeight; const fullHeight = magazineContainer.scrollHeight; const scrolled2 = magazineContainer.scrollTop; const progressBar = document.getElementById('progressBar'); if (progressBar) { const percentScrolled = (scrolled2 / (fullHeight - windowHeight)) * 100; progressBar.style.width = `${percentScrolled}%`; } }); } // Animate elements into view as they scroll into viewport const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); observer.unobserve(entry.target); } }); }, { threshold: 0.1 }); const animatedElements = document.querySelectorAll('.fade-in'); animatedElements.forEach(el => { observer.observe(el); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LearnScape - Academic Blueprint</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', Arial, sans-serif; } html, body { height: 100%; width: 100%; overflow: hidden; } body { position: relative; background-color: #f0f4f8; color: #333; } .blueprint-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #253545; background-image: linear-gradient(rgba(59, 85, 110, 0.3) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 85, 110, 0.3) 1px, transparent 1px), linear-gradient(rgba(59, 85, 110, 0.1) 0.5px, transparent 0.5px), linear-gradient(90deg, rgba(59, 85, 110, 0.1) 0.5px, transparent 0.5px); background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px; z-index: -1; } .blueprint-elements { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.1; z-index: -1; } .container { max-width: 700px; height: 700px; margin: 0 auto; padding: 25px; overflow-y: auto; position: relative; } .header { text-align: center; margin-bottom: 20px; position: relative; } .logo { font-size: 2.2rem; font-weight: 700; color: #EEF8FF; margin-bottom: 10px; letter-spacing: 1px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .compass { position: absolute; top: 10px; right: 10px; width: 60px; height: 60px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.3); transition: transform 0.5s ease; } .compass:hover { transform: rotate(45deg); } .compass:before { content: ""; position: absolute; top: 5px; left: 28px; width: 2px; height: 48px; background: linear-gradient(to bottom, #ff4757 50%, #70a1ff 50%); transform-origin: center; } .compass:after { content: ""; position: absolute; top: 28px; left: 5px; width: 48px; height: 2px; background: linear-gradient(to right, #70a1ff 50%, #ff4757 50%); transform-origin: center; } .tagline { font-size: 1rem; color: rgba(238, 248, 255, 0.7); font-style: italic; margin-bottom: 20px; } .content-area { display: grid; grid-template-columns: 1fr; gap: 25px; padding: 20px; background-color: rgba(255, 255, 255, 0.1); border-radius: 10px; backdrop-filter: blur(5px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); } .card { background-color: rgba(255, 255, 255, 0.9); border-radius: 8px; padding: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; } .card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .card:before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(to bottom, #70a1ff, #1e90ff); } .card-title { font-size: 1.2rem; color: #253545; margin-bottom: 10px; font-weight: 600; display: flex; align-items: center; gap: 10px; } .card-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background-color: #70a1ff; color: white; border-radius: 50%; font-size: 14px; } .card-content { color: #555; line-height: 1.5; } .diagram { background-color: rgba(255, 255, 255, 0.95); border-radius: 8px; padding: 15px; width: 100%; display: flex; flex-direction: column; align-items: center; } .diagram-title { font-size: 0.9rem; color: #253545; margin-bottom: 15px; font-weight: 500; text-align: center; } .diagram-content { position: relative; width: 100%; height: 120px; } .node { position: absolute; width: 80px; height: 30px; background-color: #70a1ff; color: white; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 0.8rem; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; } .node:hover { transform: scale(1.05); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .node-1 { top: 10px; left: 50%; transform: translateX(-50%); } .node-2 { top: 70px; left: 20%; background-color: #ff6b6b; } .node-3 { top: 70px; left: 50%; transform: translateX(-50%); background-color: #1e90ff; } .node-4 { top: 70px; right: 20%; background-color: #5352ed; } .connector { position: absolute; background-color: rgba(37, 53, 69, 0.7); transform-origin: top left; z-index: -1; } footer { margin-top: 20px; text-align: center; font-size: 0.8rem; color: rgba(238, 248, 255, 0.7); } .tools-section { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px; } .tool-card { background-color: rgba(255, 255, 255, 0.8); border-radius: 8px; padding: 15px; text-align: center; transition: transform 0.3s, background-color 0.3s; cursor: pointer; border: 1px solid rgba(112, 161, 255, 0.3); } .tool-card:hover { transform: translateY(-3px); background-color: rgba(255, 255, 255, 0.95); } .tool-icon { font-size: 1.5rem; margin-bottom: 8px; color: #1e90ff; } .tool-name { font-size: 0.85rem; color: #253545; font-weight: 500; } @media (max-width: 600px) { .container { padding: 15px; } .content-area { padding: 15px; gap: 15px; } .logo { font-size: 1.8rem; } .tools-section { grid-template-columns: repeat(2, 1fr); } .compass { width: 40px; height: 40px; } .compass:before { top: 3px; left: 18px; height: 32px; } .compass:after { top: 18px; left: 3px; width: 32px; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .card, .diagram, .tools-section { animation: fadeIn 0.6s ease-out forwards; } .card:nth-child(2) { animation-delay: 0.2s; } .diagram { animation-delay: 0.4s; } .tools-section { animation-delay: 0.6s; } /* Custom scrollbar */ .container::-webkit-scrollbar { width: 6px; } .container::-webkit-scrollbar-track { background: rgba(238, 248, 255, 0.1); } .container::-webkit-scrollbar-thumb { background-color: rgba(112, 161, 255, 0.7); border-radius: 3px; } .drag-hint { position: absolute; top: 5px; right: 5px; font-size: 0.7rem; color: #70a1ff; opacity: 0.7; background-color: rgba(255, 255, 255, 0.9); padding: 2px 5px; border-radius: 3px; } </style> </head> <body> <div class="blueprint-background"></div> <div class="blueprint-elements"></div> <div class="container"> <div class="header"> <div class="compass"></div> <div class="logo">LearnScape</div> <div class="tagline">Where education meets innovation</div> </div> <div class="content-area"> <div class="card"> <div class="card-title"> <div class="card-icon">📚</div> Module-Based Learning Paths </div> <div class="card-content"> Our framework structures knowledge into interconnected modules that build upon each other. This approach lets educators create custom learning paths while maintaining clear relationships between concepts—perfect for both linear and non-linear learning styles. </div> </div> <div class="card"> <div class="card-title"> <div class="card-icon">🔍</div> Adaptive Content Delivery </div> <div class="card-content"> Using real-time performance data, our platform automatically adjusts difficulty levels and learning resources to match each student's pace and comprehension. This personalized approach ensures optimal engagement while preventing both boredom and frustration. </div> </div> <div class="diagram"> <div class="drag-hint">Drag nodes to rearrange</div> <div class="diagram-title">Knowledge Structure Visualization</div> <div class="diagram-content"> <div class="node node-1" draggable="true">Core Concept</div> <div class="node node-2" draggable="true">Theory</div> <div class="node node-3" draggable="true">Application</div> <div class="node node-4" draggable="true">Extension</div> <div class="connector connector-1"></div> <div class="connector connector-2"></div> <div class="connector connector-3"></div> </div> </div> <div class="tools-section"> <div class="tool-card"> <div class="tool-icon">📊</div> <div class="tool-name">Analytics Dashboard</div> </div> <div class="tool-card"> <div class="tool-icon">🔄</div> <div class="tool-name">Content Builder</div> </div> <div class="tool-card"> <div class="tool-icon">👥</div> <div class="tool-name">Collaboration Hub</div> </div> </div> </div> <footer> Designed for educators, built for learners - LearnScape 2023 </footer> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Draw connector lines between nodes function updateConnectors() { const node1 = document.querySelector('.node-1'); const node2 = document.querySelector('.node-2'); const node3 = document.querySelector('.node-3'); const node4 = document.querySelector('.node-4'); const connector1 = document.querySelector('.connector-1'); const connector2 = document.querySelector('.connector-2'); const connector3 = document.querySelector('.connector-3'); // Calculate positions and draw lines drawLine(connector1, node1, node2); drawLine(connector2, node1, node3); drawLine(connector3, node1, node4); } function drawLine(connector, startNode, endNode) { const startRect = startNode.getBoundingClientRect(); const endRect = endNode.getBoundingClientRect(); const container = document.querySelector('.diagram-content').getBoundingClientRect(); const startX = startRect.left + startRect.width/2 - container.left; const startY = startRect.bottom - container.top; const endX = endRect.left + endRect.width/2 - container.left; const endY = endRect.top - container.top; const length = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2)); const angle = Math.atan2(endY - startY, endX - startX) * 180 / Math.PI; connector.style.width = `${length}px`; connector.style.height = '2px'; connector.style.left = `${startX}px`; connector.style.top = `${startY}px`; connector.style.transform = `rotate(${angle}deg)`; } // Make nodes draggable const nodes = document.querySelectorAll('.node'); nodes.forEach(node => { node.addEventListener('dragstart', function(e) { e.dataTransfer.setData('text/plain', node.className); setTimeout(() => { node.style.opacity = '0.4'; }, 0); }); node.addEventListener('dragend', function() { node.style.opacity = '1'; updateConnectors(); }); }); const diagramContent = document.querySelector('.diagram-content'); diagramContent.addEventListener('dragover', function(e) { e.preventDefault(); }); diagramContent.addEventListener('drop', function(e) { e.preventDefault(); const data = e.dataTransfer.getData('text/plain'); const draggedNode = document.querySelector(`.${data.split(' ')[0]}`); const containerRect = diagramContent.getBoundingClientRect(); const x = e.clientX - containerRect.left - (draggedNode.offsetWidth / 2); const y = e.clientY - containerRect.top - (draggedNode.offsetHeight / 2); // Keep node within bounds const maxX = containerRect.width - draggedNode.offsetWidth; const maxY = containerRect.height - draggedNode.offsetHeight; const boundedX = Math.max(0, Math.min(x, maxX)); const boundedY = Math.max(0, Math.min(y, maxY)); draggedNode.style.left = `${boundedX}px`; draggedNode.style.top = `${boundedY}px`; draggedNode.style.transform = 'none'; updateConnectors(); }); // Animate tool cards on hover const toolCards = document.querySelectorAll('.tool-card'); toolCards.forEach(card => { card.addEventListener('mouseenter', function() { const icon = this.querySelector('.tool-icon'); icon.style.transform = 'scale(1.2)'; icon.style.transition = 'transform 0.3s'; }); card.addEventListener('mouseleave', function() { const icon = this.querySelector('.tool-icon'); icon.style.transform = 'scale(1)'; }); }); // Initialize connectors updateConnectors(); // Update connectors if window is resized window.addEventListener('resize', updateConnectors); // Create blueprint elements const blueprintElements = document.querySelector('.blueprint-elements'); // Add some decorative elements to the blueprint const elementsCount = 10; for(let i = 0; i < elementsCount; i++) { const element = document.createElement('div'); element.style.position = 'absolute'; element.style.width = `${Math.random() * 100 + 50}px`; element.style.height = `${Math.random() * 100 + 50}px`; element.style.left = `${Math.random() * 100}%`; element.style.top = `${Math.random() * 100}%`; element.style.border = '1px solid rgba(112, 161, 255, 0.4)'; element.style.borderRadius = '2px'; blueprintElements.appendChild(element); } // Create circles for(let i = 0; i < elementsCount/2; i++) { const circle = document.createElement('div'); circle.style.position = 'absolute'; const size = Math.random() * 30 + 20; circle.style.width = `${size}px`; circle.style.height = `${size}px`; circle.style.left = `${Math.random() * 100}%`; circle.style.top = `${Math.random() * 100}%`; circle.style.border = '1px solid rgba(112, 161, 255, 0.4)'; circle.style.borderRadius = '50%'; blueprintElements.appendChild(circle); } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wanderlust - Discover Your Next Adventure</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } :root { --primary: #ff7e5f; --secondary: #feb47b; --dark: #2d3436; --light: #f9f9f9; --accent: #0984e3; } @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); body { height: 700px; max-width: 700px; margin: 0 auto; overflow-x: hidden; color: var(--light); background-color: #f5f5f5; } .hero { position: relative; height: 100%; width: 100%; overflow: hidden; } .hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://images.unsplash.com/photo-1480497490787-505ec076689f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80'); background-size: cover; background-position: center; transition: transform 0.6s ease-out, filter 0.6s ease-out; z-index: 1; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 100%); z-index: 2; } .content { position: relative; z-index: 3; height: 100%; width: 100%; display: flex; flex-direction: column; padding: 2rem; } nav { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; } .logo { font-size: 1.8rem; font-weight: 700; color: var(--light); text-decoration: none; display: flex; align-items: center; } .logo span { background: linear-gradient(45deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .logo-icon { margin-right: 8px; font-size: 1.5rem; } .nav-menu { display: flex; gap: 1.5rem; } .nav-link { color: var(--light); text-decoration: none; font-weight: 500; font-size: 0.9rem; position: relative; padding: 0.2rem 0; transition: all 0.3s; } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: linear-gradient(45deg, var(--primary), var(--secondary)); transition: width 0.3s; } .nav-link:hover::after { width: 100%; } .hero-content { display: flex; flex-direction: column; justify-content: center; height: 100%; max-width: 550px; } .hero-subtitle { text-transform: uppercase; letter-spacing: 3px; font-size: 0.8rem; margin-bottom: 1rem; position: relative; display: inline-block; padding-left: 40px; } .hero-subtitle::before { content: ''; position: absolute; left: 0; top: 50%; width: 30px; height: 1px; background: var(--primary); } .hero-title { font-size: 2.8rem; font-weight: 700; margin-bottom: 1.5rem; line-height: 1.2; } .gradient-text { background: linear-gradient(45deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero-description { font-size: 1rem; line-height: 1.6; margin-bottom: 2rem; max-width: 500px; } .search-form { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); border-radius: 12px; padding: 1.5rem; transition: transform 0.3s, box-shadow 0.3s; border: 1px solid rgba(255, 255, 255, 0.1); } .search-form:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); } .form-title { font-size: 1.2rem; margin-bottom: 1.2rem; font-weight: 600; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } .form-group { display: flex; flex-direction: column; } .form-label { font-size: 0.8rem; margin-bottom: 0.5rem; font-weight: 500; } .form-input { padding: 0.8rem 1rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); color: var(--light); font-size: 0.9rem; transition: all 0.3s; } .form-input:focus { outline: none; border-color: var(--primary); background: rgba(255, 255, 255, 0.2); } .form-input::placeholder { color: rgba(255, 255, 255, 0.6); } .search-btn { width: 100%; padding: 0.9rem; border-radius: 8px; border: none; background: linear-gradient(45deg, var(--primary), var(--secondary)); color: white; font-weight: 600; cursor: pointer; transition: all 0.3s; position: relative; overflow: hidden; } .search-btn::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: left 0.7s; } .search-btn:hover::before { left: 100%; } .search-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255, 126, 95, 0.4); } .popular-destinations { display: flex; gap: 1rem; margin-top: 1.5rem; } .destination-tag { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 0.5rem 1rem; font-size: 0.8rem; transition: all 0.3s; cursor: pointer; } .destination-tag:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); } .scroll-icon { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); animation: bounce 2s infinite; z-index: 10; width: 20px; height: 30px; border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 15px; display: flex; justify-content: center; padding-top: 5px; } .scroll-icon::before { content: ''; width: 4px; height: 8px; background: var(--light); border-radius: 4px; animation: scrollAnimate 2s infinite; } @keyframes scrollAnimate { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(10px); opacity: 0; } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); } 40% { transform: translateY(-10px) translateX(-50%); } 60% { transform: translateY(-5px) translateX(-50%); } } .mobile-menu-btn { display: none; background: none; border: none; color: var(--light); font-size: 1.5rem; cursor: pointer; z-index: 100; } .destination-pill { display: inline-block; padding: 5px 8px; margin-right: 8px; margin-bottom: 8px; background: linear-gradient(45deg, var(--primary), var(--secondary)); border-radius: 15px; font-size: 0.7rem; transition: all 0.3s; cursor: pointer; } .destination-pill:hover { transform: translateY(-2px); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } @media (max-width: 768px) { .hero-title { font-size: 2.2rem; } .form-row { grid-template-columns: 1fr; } .nav-menu { display: none; } .mobile-menu-btn { display: block; } .mobile-nav { position: fixed; top: 0; right: -70%; width: 70%; height: 100%; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px); z-index: 100; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: right 0.3s ease; } .mobile-nav.active { right: 0; } .mobile-nav .nav-link { margin: 1rem 0; font-size: 1.2rem; } .close-btn { position: absolute; top: 2rem; right: 2rem; background: none; border: none; color: var(--light); font-size: 1.5rem; cursor: pointer; } } @media (max-width: 480px) { .content { padding: 1.5rem; } .hero-title { font-size: 1.8rem; } .search-form { padding: 1rem; } .popular-destinations { flex-wrap: wrap; } } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .hero-subtitle, .hero-title, .hero-description, .search-form { animation: fadeIn 0.8s ease-out forwards; opacity: 0; } .hero-subtitle { animation-delay: 0.2s; } .hero-title { animation-delay: 0.4s; } .hero-description { animation-delay: 0.6s; } .search-form { animation-delay: 0.8s; } .popular-destinations { animation: fadeIn 0.8s ease-out 1s forwards; opacity: 0; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); } ::-webkit-scrollbar-thumb { background: linear-gradient(var(--primary), var(--secondary)); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary); } </style> </head> <body> <div class="hero"> <div class="hero-bg" id="hero-bg"></div> <div class="hero-overlay"></div> <div class="content"> <nav> <a href="#" class="logo"> <span class="logo-icon">✈</span> <span>Wanderlust</span> </a> <div class="nav-menu"> <a href="#" class="nav-link">Destinations</a> <a href="#" class="nav-link">Experiences</a> <a href="#" class="nav-link">Deals</a> <a href="#" class="nav-link">Travel Guide</a> </div> <button class="mobile-menu-btn" id="mobile-menu-btn">☰</button> </nav> <div class="mobile-nav" id="mobile-nav"> <button class="close-btn" id="close-btn">×</button> <a href="#" class="nav-link">Destinations</a> <a href="#" class="nav-link">Experiences</a> <a href="#" class="nav-link">Deals</a> <a href="#" class="nav-link">Travel Guide</a> </div> <div class="hero-content"> <span class="hero-subtitle">Discover the world</span> <h1 class="hero-title">Find your perfect <span class="gradient-text">escape</span> today</h1> <p class="hero-description">From hidden gems to iconic landmarks, our curated experiences help you create memories that last a lifetime. Begin your journey with just a few clicks.</p> <div class="search-form" id="search-form"> <h3 class="form-title">Where will your next adventure take you?</h3> <div class="form-row"> <div class="form-group"> <label class="form-label">Destination</label> <input type="text" class="form-input" placeholder="City or region" id="destination"> </div> <div class="form-group"> <label class="form-label">Travel Type</label> <select class="form-input"> <option>Beach Getaway</option> <option>Mountain Retreat</option> <option>City Exploration</option> <option>Cultural Immersion</option> <option>Adventure Tour</option> </select> </div> </div> <div class="form-row"> <div class="form-group"> <label class="form-label">Check In</label> <input type="date" class="form-input"> </div> <div class="form-group"> <label class="form-label">Check Out</label> <input type="date" class="form-input"> </div> </div> <div class="form-row"> <div class="form-group"> <label class="form-label">Travelers</label> <input type="number" class="form-input" min="1" value="2"> </div> <div class="form-group"> <label class="form-label">Budget Range</label> <select class="form-input"> <option>Economy ($)</option> <option>Standard ($$)</option> <option>Luxury ($$$)</option> <option>Ultra-Luxury ($$$$)</option> </select> </div> </div> <button class="search-btn" id="search-btn">Discover Your Journey</button> </div> <div class="popular-destinations"> <span class="destination-pill">Bali</span> <span class="destination-pill">Santorini</span> <span class="destination-pill">Kyoto</span> <span class="destination-pill">Amalfi Coast</span> <span class="destination-pill">Machu Picchu</span> </div> </div> <div class="scroll-icon"></div> </div> </div> <script> // Parallax effect on background document.addEventListener('mousemove', function(e) { const heroBackground = document.getElementById('hero-bg'); // Get mouse position as percentage of window const mouseX = e.clientX / window.innerWidth; const mouseY = e.clientY / window.innerHeight; // Subtle movement only (5px in each direction) const moveX = 5 * (0.5 - mouseX); const moveY = 5 * (0.5 - mouseY); // Apply transform heroBackground.style.transform = `translate(${moveX}px, ${moveY}px) scale(1.05)`; }); // Focus effect (darken and blur background when form is focused) const formInputs = document.querySelectorAll('.form-input'); const heroBackground = document.getElementById('hero-bg'); const searchForm = document.getElementById('search-form'); formInputs.forEach(input => { input.addEventListener('focus', () => { heroBackground.style.filter = 'blur(5px) brightness(0.7)'; }); input.addEventListener('blur', () => { if (!isAnyInputFocused()) { heroBackground.style.filter = 'none'; } }); }); function isAnyInputFocused() { let focused = false; formInputs.forEach(input => { if (document.activeElement === input) { focused = true; } }); return focused; } // Mobile menu functionality const mobileMenuBtn = document.getElementById('mobile-menu-btn'); const closeBtn = document.getElementById('close-btn'); const mobileNav = document.getElementById('mobile-nav'); mobileMenuBtn.addEventListener('click', () => { mobileNav.classList.add('active'); }); closeBtn.addEventListener('click', () => { mobileNav.classList.remove('active'); }); // Search button effect const searchBtn = document.getElementById('search-btn'); searchBtn.addEventListener('click', function(e) { e.preventDefault(); // Get destination value const destination = document.getElementById('destination').value; // Provide feedback with an overlay message const feedback = document.createElement('div'); feedback.style.position = 'fixed'; feedback.style.top = '50%'; feedback.style.left = '50%'; feedback.style.transform = 'translate(-50%, -50%)'; feedback.style.background = 'rgba(0, 0, 0, 0.8)'; feedback.style.color = 'white'; feedback.style.padding = '20px'; feedback.style.borderRadius = '10px'; feedback.style.zIndex = '1000'; feedback.style.maxWidth = '80%'; feedback.style.textAlign = 'center'; if (destination) { feedback.textContent = `Discovering adventures in ${destination}...`; } else { feedback.textContent = 'Please enter a destination'; } document.body.appendChild(feedback); // Remove feedback after 2 seconds setTimeout(() => { feedback.style.opacity = '0'; feedback.style.transition = 'opacity 0.5s'; setTimeout(() => { document.body.removeChild(feedback); }, 500); }, 2000); }); // Destination pill clicks const destinationPills = document.querySelectorAll('.destination-pill'); const destinationInput = document.getElementById('destination'); destinationPills.forEach(pill => { pill.addEventListener('click', () => { destinationInput.value = pill.textContent; // Smooth scroll to search form searchForm.scrollIntoView({ behavior: 'smooth' }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GreenBridge Initiative</title> <style> *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } :root { --primary: #4CAF50; --secondary: #2E7D32; --accent: #FFC107; --text-light: #FFFFFF; --text-dark: #333333; --overlay: rgba(0, 82, 73, 0.85); } html, body { width: 100%; height: 100%; overflow-x: hidden; } body { position: relative; color: var(--text-light); background-color: #f5f5f5; } .bg-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-image: url('https://images.unsplash.com/photo-1532629345422-7515f3d16bb6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80'); background-size: cover; background-position: center; } .bg-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--overlay); } .container { max-width: 700px; margin: 0 auto; padding: 2rem; height: 100%; display: flex; flex-direction: column; } header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; } .logo { display: flex; align-items: center; } .logo-icon { width: 40px; height: 40px; border-radius: 50%; background-color: var(--accent); display: flex; align-items: center; justify-content: center; margin-right: 1rem; position: relative; overflow: hidden; } .logo-icon::before, .logo-icon::after { content: ''; position: absolute; background-color: var(--secondary); transition: transform 0.3s ease; } .logo-icon::before { width: 8px; height: 20px; transform: translateY(-5px); } .logo-icon::after { width: 20px; height: 8px; transform: translateX(5px); } .logo-icon:hover::before { transform: translateY(0) rotate(45deg); } .logo-icon:hover::after { transform: translateX(0) rotate(45deg); } .logo-text { font-size: 1.2rem; font-weight: 700; letter-spacing: 1px; } nav ul { list-style: none; display: flex; } nav li { margin-left: 1.5rem; } nav a { color: var(--text-light); text-decoration: none; position: relative; transition: color 0.3s ease; } nav a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--accent); transition: width 0.3s ease; } nav a:hover { color: var(--accent); } nav a:hover::after { width: 100%; } main { flex: 1; display: flex; flex-direction: column; justify-content: center; } .hero { margin-bottom: 3rem; } h1 { font-size: 2.5rem; margin-bottom: 1rem; line-height: 1.2; } h1 span { color: var(--accent); position: relative; display: inline-block; } h1 span::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background-color: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease; } h1:hover span::after { transform: scaleX(1); } .hero p { font-size: 1.1rem; line-height: 1.6; margin-bottom: 2rem; max-width: 600px; } .animated-stats { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2rem; } .stat-card { background-color: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 1.5rem; flex: 1; min-width: 150px; backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; } .stat-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .stat-number { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--accent); } .stat-title { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; } .cta-section { display: flex; flex-direction: column; align-items: flex-start; } .cta-buttons { display: flex; gap: 1rem; margin-bottom: 2rem; } .btn { display: inline-block; padding: 0.8rem 1.5rem; border-radius: 30px; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; z-index: 1; } .btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); transform: translateX(-100%); transition: transform 0.3s ease; z-index: -1; } .btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .btn:hover::before { transform: translateX(0); } .btn-primary { background-color: var(--accent); color: var(--text-dark); border: none; } .btn-secondary { background-color: transparent; color: var(--text-light); border: 2px solid var(--text-light); } .newsletter { width: 100%; max-width: 500px; position: relative; } .newsletter h3 { margin-bottom: 1rem; font-size: 1.2rem; } .newsletter-form { display: flex; position: relative; } .newsletter-input { flex: 1; padding: 0.8rem 1rem; border-radius: 30px; border: none; background-color: rgba(255, 255, 255, 0.9); color: var(--text-dark); font-size: 1rem; outline: none; transition: box-shadow 0.3s ease; } .newsletter-input:focus { box-shadow: 0 0 0 2px var(--accent); } .newsletter-btn { position: absolute; right: 5px; top: 5px; padding: 0.6rem 1.2rem; border-radius: 25px; background-color: var(--primary); color: white; border: none; cursor: pointer; transition: background-color 0.3s ease; font-weight: 600; } .newsletter-btn:hover { background-color: var(--secondary); } .success-message { position: absolute; bottom: -30px; left: 0; color: var(--accent); font-size: 0.9rem; opacity: 0; transition: opacity 0.3s ease; } .show-message { opacity: 1; } footer { margin-top: 2rem; text-align: center; font-size: 0.9rem; } .social-links { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1rem; } .social-links a { color: var(--text-light); font-size: 1.2rem; transition: color 0.3s ease, transform 0.3s ease; } .social-links a:hover { color: var(--accent); transform: translateY(-3px); } .impact-dots { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: -1; } .dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background-color: var(--accent); opacity: 0; animation: pulse 3s infinite; } @keyframes pulse { 0% { transform: scale(0); opacity: 0.5; } 50% { opacity: 0.2; } 100% { transform: scale(2); opacity: 0; } } @media (max-width: 600px) { h1 { font-size: 2rem; } header { flex-direction: column; align-items: flex-start; } nav { margin-top: 1rem; } nav ul { gap: 1rem; } .animated-stats { flex-direction: column; } .cta-buttons { flex-direction: column; width: 100%; } .btn { width: 100%; text-align: center; } .newsletter-form { flex-direction: column; } .newsletter-btn { position: relative; right: auto; top: auto; margin-top: 0.5rem; width: 100%; } } </style> </head> <body> <div class="bg-container"> <div class="bg-overlay"></div> </div> <div class="container"> <header> <div class="logo"> <div class="logo-icon"></div> <div class="logo-text">GreenBridge</div> </div> <nav> <ul> <li><a href="#mission">Mission</a></li> <li><a href="#programs">Programs</a></li> <li><a href="#join">Join Us</a></li> </ul> </nav> </header> <main> <section class="hero"> <h1>Connecting Communities for <span>Global Impact</span></h1> <p>GreenBridge Initiative builds resilient networks between communities facing climate challenges. Our projects empower local leaders with sustainable solutions while fostering global solidarity and resource sharing.</p> </section> <section class="animated-stats"> <div class="stat-card"> <div class="stat-number" data-target="128">0</div> <div class="stat-title">Communities Served</div> </div> <div class="stat-card"> <div class="stat-number" data-target="37">0</div> <div class="stat-title">Countries Reached</div> </div> <div class="stat-card"> <div class="stat-number" data-target="12500">0</div> <div class="stat-title">Trees Planted</div> </div> </section> <section class="cta-section"> <div class="cta-buttons"> <a href="#" class="btn btn-primary">Support Our Work</a> <a href="#" class="btn btn-secondary">Learn How We Help</a> </div> <div class="newsletter"> <h3>Join our community of changemakers</h3> <form class="newsletter-form" id="newsletter-form"> <input type="email" class="newsletter-input" placeholder="Your email address" required> <button type="submit" class="newsletter-btn">Subscribe</button> </form> <div class="success-message" id="success-message">Thank you! You're now part of our global community.</div> </div> </section> </main> <footer> <div class="social-links"> <a href="#">★</a> <a href="#">♦</a> <a href="#">■</a> <a href="#">●</a> </div> <p>© 2023 GreenBridge Initiative. Cultivating global connections for local resilience.</p> </footer> </div> <div class="impact-dots" id="impact-dots"></div> <script> // Animate counting for stats const animateStats = () => { const statNumbers = document.querySelectorAll('.stat-number'); statNumbers.forEach(stat => { const target = parseInt(stat.getAttribute('data-target')); const duration = 2000; // ms const increment = target / (duration / 16); // 60fps let current = 0; const updateCount = () => { if (current < target) { current += increment; stat.textContent = Math.floor(current); requestAnimationFrame(updateCount); } else { stat.textContent = target.toLocaleString(); } }; updateCount(); }); }; // Create animated dots const createDots = () => { const dotContainer = document.getElementById('impact-dots'); const numDots = 25; for (let i = 0; i < numDots; i++) { const dot = document.createElement('div'); dot.classList.add('dot'); // Random position const x = Math.random() * 100; const y = Math.random() * 100; dot.style.left = `${x}%`; dot.style.top = `${y}%`; // Random animation delay dot.style.animationDelay = `${Math.random() * 5}s`; dotContainer.appendChild(dot); } }; // Newsletter form submission const handleNewsletterSubmission = () => { const form = document.getElementById('newsletter-form'); const successMessage = document.getElementById('success-message'); form.addEventListener('submit', (e) => { e.preventDefault(); const email = form.querySelector('input').value; if (email) { // Simulate API call setTimeout(() => { form.reset(); successMessage.classList.add('show-message'); setTimeout(() => { successMessage.classList.remove('show-message'); }, 3000); }, 800); } }); }; // Check if element is in viewport const isInViewport = (element) => { const rect = element.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); }; // Handle animations on scroll const handleScrollAnimations = () => { const statsSection = document.querySelector('.animated-stats'); let hasAnimated = false; window.addEventListener('scroll', () => { if (!hasAnimated && isInViewport(statsSection)) { animateStats(); hasAnimated = true; } }); // Initial check for visible stats on page load if (isInViewport(statsSection)) { animateStats(); hasAnimated = true; } }; // Initialize document.addEventListener('DOMContentLoaded', () => { createDots(); handleNewsletterSubmission(); handleScrollAnimations(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PeakFit - Your Personal Fitness Journey</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } :root { --primary: #ff4757; --secondary: #3742fa; --dark: #2f3542; --light: #f1f2f6; --accent: #ffa502; } @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); body { overflow-x: hidden; background-color: var(--light); color: var(--dark); height: 100vh; width: 100%; } .background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #3742fa 0%, #ff4757 100%); z-index: -2; } .pattern { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.2) 0%, transparent 40%), radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.15) 0%, transparent 40%); z-index: -1; } .dynamic-shapes { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; } .shape { position: absolute; border-radius: 50%; filter: blur(8px); opacity: 0.6; animation: float 15s infinite ease-in-out; } @keyframes float { 0%, 100% { transform: translateY(0) translateX(0) scale(1); } 25% { transform: translateY(-20px) translateX(20px) scale(1.05); } 50% { transform: translateY(10px) translateX(-15px) scale(0.95); } 75% { transform: translateY(15px) translateX(10px) scale(1.02); } } .container { width: 100%; height: 100vh; max-width: 700px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; position: relative; z-index: 1; } nav { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; margin-bottom: 30px; } .logo { font-weight: 700; font-size: 24px; color: white; display: flex; align-items: center; } .logo span { color: var(--accent); } .logo-icon { margin-right: 10px; background-color: white; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .logo-icon svg { width: 20px; height: 20px; fill: var(--primary); } .menu-btn { background: rgba(255, 255, 255, 0.2); border: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s ease; } .menu-btn:hover { background: rgba(255, 255, 255, 0.3); } .menu-btn svg { width: 20px; height: 20px; fill: white; } .content { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; padding: 20px 0; } h1 { font-size: 36px; margin-bottom: 20px; font-weight: 700; line-height: 1.2; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } p { font-size: 16px; margin-bottom: 30px; line-height: 1.6; max-width: 500px; color: rgba(255, 255, 255, 0.9); } .app-features { display: flex; justify-content: center; gap: 20px; margin-bottom: 40px; flex-wrap: wrap; } .feature { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 16px; padding: 24px; width: 130px; height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 0.3s ease, background 0.3s ease; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.2); } .feature:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.2); } .feature-icon { width: 40px; height: 40px; background: white; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .feature-icon svg { width: 24px; height: 24px; } .feature-title { font-weight: 600; font-size: 14px; color: white; } .cta { margin-top: 20px; position: relative; } .cta-input { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); padding: 16px 130px 16px 20px; border-radius: 30px; color: white; font-size: 16px; width: 100%; transition: background 0.3s ease; backdrop-filter: blur(5px); } .cta-input:focus { outline: none; background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.5); } .cta-input::placeholder { color: rgba(255, 255, 255, 0.6); } .cta-btn { position: absolute; right: 5px; top: 5px; background: var(--accent); color: white; border: none; padding: 12px 25px; border-radius: 25px; font-weight: 600; cursor: pointer; transition: transform 0.3s ease, background 0.3s ease; } .cta-btn:hover { background: #ff9100; transform: translateX(-2px); } .app-preview { margin-top: 40px; position: relative; display: flex; justify-content: center; } .phone-mockup { width: 220px; height: 440px; background: var(--dark); border-radius: 30px; padding: 12px; position: relative; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); overflow: hidden; border: 6px solid rgba(255, 255, 255, 0.1); transform: rotate(-5deg); transition: transform 0.5s ease; } .phone-mockup:hover { transform: rotate(0deg) scale(1.05); } .phone-screen { background: white; border-radius: 20px; height: 100%; overflow: hidden; position: relative; } .app-ui { width: 100%; height: 100%; object-fit: cover; transition: transform 10s linear; } .phone-mockup:hover .app-ui { transform: translateY(-60%); } .notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 20px; background: var(--dark); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; z-index: 10; } .bottom-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; } .social-icons { display: flex; gap: 15px; } .social-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; } .social-icon:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-3px); } .social-icon svg { width: 20px; height: 20px; fill: white; } .app-stores { display: flex; gap: 15px; } .store-badge { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; padding: 8px 20px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; } .store-badge:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-3px); } .store-badge svg { width: 20px; height: 20px; fill: white; } .store-badge span { color: white; font-size: 14px; font-weight: 500; } /* Pulse Animation for CTA Button */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 165, 2, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 165, 2, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 165, 2, 0); } } .pulse { animation: pulse 2s infinite; } /* Responsive Design */ @media (max-width: 640px) { h1 { font-size: 28px; } p { font-size: 14px; } .app-features { gap: 15px; } .feature { width: 110px; height: 110px; padding: 15px; } .feature-icon { width: 30px; height: 30px; } .feature-title { font-size: 12px; } .phone-mockup { width: 180px; height: 360px; } .bottom-bar { flex-direction: column; gap: 20px; } } @media (max-width: 480px) { .app-features { gap: 10px; } .feature { width: 90px; height: 90px; padding: 12px; } .cta-input { padding: 14px 110px 14px 15px; font-size: 14px; } .cta-btn { padding: 10px 15px; font-size: 14px; } } </style> </head> <body> <div class="background"></div> <div class="pattern"></div> <div class="dynamic-shapes" id="dynamic-shapes"></div> <div class="container"> <nav> <div class="logo"> <div class="logo-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M7.5 14.5c-1.58 0-2.903 1.06-3.337 2.5H2v2h2.163c.434 1.44 1.757 2.5 3.337 2.5s2.903-1.06 3.337-2.5H22v-2H10.837c-.434-1.44-1.757-2.5-3.337-2.5zm0 5c-.827 0-1.5-.673-1.5-1.5s.673-1.5 1.5-1.5 1.5.673 1.5 1.5-.673 1.5-1.5 1.5zm9-11c-1.58 0-2.903 1.06-3.337 2.5H2v2h11.163c.434 1.44 1.757 2.5 3.337 2.5s2.903-1.06 3.337-2.5H22v-2h-2.163c-.434-1.44-1.757-2.5-3.337-2.5zm0 5c-.827 0-1.5-.673-1.5-1.5s.673-1.5 1.5-1.5 1.5.673 1.5 1.5-.673 1.5-1.5 1.5z"/> </svg> </div> Peak<span>Fit</span> </div> <button class="menu-btn"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/> </svg> </button> </nav> <div class="content"> <h1>Transform Your Fitness Journey With Real-Time Progress</h1> <p>Track workouts, analyze performance, and achieve your goals faster with AI-powered insights that adapt to your personal fitness evolution.</p> <div class="app-features"> <div class="feature" id="feature-1"> <div class="feature-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ff4757"> <path d="M13.49 5.48c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm-3.6 13.9l1-4.4 2.1 2v6h2v-7.5l-2.1-2 .6-3c1.3 1.5 3.3 2.5 5.5 2.5v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1l-5.2 2.2v4.7h2v-3.4l1.8-.7-1.6 8.1-4.9-1-.4 2 7 1.4z"/> </svg> </div> <div class="feature-title">Workout Tracker</div> </div> <div class="feature" id="feature-2"> <div class="feature-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#3742fa"> <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/> </svg> </div> <div class="feature-title">Analytics</div> </div> <div class="feature" id="feature-3"> <div class="feature-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffa502"> <path d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/> </svg> </div> <div class="feature-title">Scheduling</div> </div> <div class="feature" id="feature-4"> <div class="feature-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ff4757"> <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/> </svg> </div> <div class="feature-title">AI Coach</div> </div> </div> <div class="cta"> <input type="email" class="cta-input" placeholder="Enter your email to get early access"> <button class="cta-btn pulse">Get Started</button> </div> <div class="app-preview"> <div class="phone-mockup"> <div class="notch"></div> <div class="phone-screen"> <svg class="app-ui" viewBox="0 0 300 600" xmlns="http://www.w3.org/2000/svg"> <rect width="300" height="600" fill="#f8f9fa"/> <!-- Header --> <rect width="300" height="70" fill="#3742fa"/> <text x="20" y="42" font-family="Arial" font-size="20" fill="white">PeakFit</text> <circle cx="260" cy="35" r="18" fill="white" opacity="0.2"/> <circle cx="260" cy="35" r="14" fill="white"/> <text x="255" y="41" font-family="Arial" font-size="16" fill="#3742fa" font-weight="bold">J</text> <!-- Stats Section --> <rect x="15" y="85" width="270" height="100" rx="10" fill="white" stroke="#eaeaea" stroke-width="1"/> <text x="30" y="115" font-family="Arial" font-size="14" fill="#666">Today's Progress</text> <rect x="30" y="130" width="200" height="10" rx="5" fill="#f0f0f0"/> <rect x="30" y="130" width="120" height="10" rx="5" fill="#ff4757"/> <text x="30" y="160" font-family="Arial" font-size="18" fill="#333" font-weight="bold">1,253 calories</text> <text x="200" y="160" font-family="Arial" font-size="14" fill="#666">Goal: 2,000</text> <!-- Workout Card --> <rect x="15" y="200" width="270" height="150" rx="10" fill="white" stroke="#eaeaea" stroke-width="1"/> <rect x="15" y="200" width="270" height="40" rx="10" fill="#3742fa"/> <text x="30" y="225" font-family="Arial" font-size="16" fill="white">Recommended Workout</text> <text x="30" y="265" font-family="Arial" font-size="18" fill="#333" font-weight="bold">Upper Body Strength</text> <text x="30" y="290" font-family="Arial" font-size="14" fill="#666">45 min · 350 calories</text> <rect x="30" y="310" width="100" height="30" rx="15" fill="#ff4757"/> <text x="58" y="330" font-family="Arial" font-size="14" fill="white">Start</text> <!-- Activity Feed --> <text x="20" y="380" font-family="Arial" font-size="18" fill="#333" font-weight="bold">Recent Activity</text> <!-- Activity 1 --> <rect x="15" y="395" width="270" height="70" rx="10" fill="white" stroke="#eaeaea" stroke-width="1"/> <circle cx="45" cy="430" r="20" fill="#f0f0f0"/> <text x="40" y="436" font-family="Arial" font-size="20" fill="#3742fa">🏃</text> <text x="80" y="420" font-family="Arial" font-size="16" fill="#333">Morning Run</text> <text x="80" y="445" font-family="Arial" font-size="14" fill="#666">5.2 km · 28 min</text> <text x="230" y="430" font-family="Arial" font-size="14" fill="#999">2h ago</text> <!-- Activity 2 --> <rect x="15" y="475" width="270" height="70" rx="10" fill="white" stroke="#eaeaea" stroke-width="1"/> <circle cx="45" cy="510" r="20" fill="#f0f0f0"/> <text x="40" y="516" font-family="Arial" font-size="20" fill="#3742fa">💪</text> <text x="80" y="500" font-family="Arial" font-size="16" fill="#333">Strength Training</text> <text x="80" y="525" font-family="Arial" font-size="14" fill="#666">45 min · High intensity</text> <text x="225" y="510" font-family="Arial" font-size="14" fill="#999">Yesterday</text> <!-- Bottom Navigation --> <rect width="300" height="60" y="540" fill="white"/> <line x1="0" y1="540" x2="300" y2="540" stroke="#eaeaea" stroke-width="1"/> <circle cx="60" cy="570" r="8" fill="#3742fa"/> <circle cx="150" cy="570" r="8" fill="#ddd"/> <circle cx="240" cy="570" r="8" fill="#ddd"/> </svg> </div> </div> </div> </div> <div class="bottom-bar"> <div class="social-icons"> <div class="social-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96A10 10 0 0 0 22 12.06C22 6.53 17.5 2.04 12 2.04Z"/> </svg> </div> <div class="social-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2zm-.2 2A3.6 3.6 0 0 0 4 7.6v8.8C4 18.39 5.61 20 7.6 20h8.8a3.6 3.6 0 0 0 3.6-3.6V7.6C20 5.61 18.39 4 16.4 4H7.6zm9.65 1.5a1.25 1.25 0 0 1 1.25 1.25A1.25 1.25 0 0 1 17.25 8 1.25 1.25 0 0 1 16 6.75a1.25 1.25 0 0 1 1.25-1.25zM12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3z"/> </svg> </div> <div class="social-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/> </svg> </div> </div> <div class="app-stores"> <div class="store-badge"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M17.9 5c-.1.1-.7.4-1.2.6-1.5.7-2.7 2-3.2 3.7-.1.3-.1.5-.1 1.9v1.5l1.1-1.6c.6-.9 1.3-1.8 1.5-2 .3-.2.6-.5.8-.6.2-.2.5-.4.7-.5.4-.3 1.6-1.2 1.6-1.3.1-.2.1-1.7 0-1.8 0-.1-1-.1-1.2.1m3.9-1.5c-.7.2-2.2.9-2.5 1.2-.1.1 0 .1.6.5.3.2.9.6 1.3.9.5.4.7.5.8.5.4-.2.9-2.2.7-2.8-.1-.3-.3-.4-.9-.3m-9.3 10.2c-1.3.7-2.5 1.4-2.7 1.5-.7.3-1.7.2-2.9-.4-1-.6-1.3-.6-1-.2.4.6 1.5 1.3 2.3 1.6.5.1 1 .2 1.5.2h.8l2.1-1.2c1.2-.6 2.6-1.5 3.3-1.9l1.2-.7-.3-.1-.3-.1-4 1.3M18 14c-.1.5-.6 3.2-.6 3.4 0 .1 1.1.2 1.7.2h.5l.1-.5c.4-1.7.4-2.7.1-3.3l-.1-.3-.6.1c-.4 0-.9.1-1.1.4m.2-8.6c-1 .5-1.9 1.2-2.7 1.9-1.5 1.4-2.5 2.8-3.3 4.5-.7 1.6-.9 2.8-.6 3.3.1.1.6.2 1.4.2h1.3l.5-.9c.3-.5.8-1.4 1.2-2 .4-.5.7-1 .7-1 0-.3 2-3.2 2.7-4.1 1.3-1.6 1.5-1.9 1.4-2-.1-.1-.7 0-1.5.2-.1.1-.6.5-1.1.9"/> </svg> <span>App Store</span> </div> <div class="store-badge"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M3.19 15.74c-.33-.58-.51-1.29-.51-2.12 0-.87.18-1.61.54-2.2.19-.31.44-.58.74-.82l.68.68.01.01c-.27.18-.49.43-.65.74-.27.46-.41 1.03-.41 1.63 0 .5.12.97.34 1.39.23.41.55.75.96 1-.12.12-.75.47-.99.32-.3-.18-.55-.39-.71-.63m8.94 4.41c.28.38.39.82.32 1.29-.04.3-.18.6-.42.85-.2.2-.44.35-.7.46-.26.09-.55.15-.86.15-.77.01-1.61-.28-2.29-.94-.67-.65-.95-1.43-.94-2.2 0-.34.07-.66.17-.96.11-.29.27-.55.47-.78.38-.4.92-.68 1.5-.68.34 0 .67.09.97.26.27.16.5.38.7.64.23.29.39.61.5.93.11.33.16.66.17.98h-3.71c.03.35.17.69.42.97.26.28.6.42.99.42.24 0 .46-.08.65-.21.19-.15.32-.34.42-.59.03-.09.05-.18.05-.27h.9c0 .14 0 .1-.03.26-.03.14-.09.33-.28.43m-1.93-2.7c-.24 0-.47.06-.66.17-.18.11-.34.25-.46.43-.12.16-.21.35-.26.57-.04.16-.06.32-.06.48h2.9c-.03-.21-.09-.41-.17-.59-.09-.18-.2-.33-.33-.46-.14-.13-.29-.22-.46-.29-.15-.08-.32-.12-.5-.31m10.28 2.98c-.3.3-.64.55-1.02.75-.38.19-.82.29-1.32.29-.5 0-.94-.1-1.32-.29-.38-.2-.72-.45-1.01-.75-.29-.31-.54-.67-.7-1.06-.17-.39-.26-.8-.26-1.21 0-.41.09-.82.26-1.22.17-.4.41-.75.7-1.06.29-.31.63-.56 1.01-.75.38-.19.82-.29 1.32-.29.5 0 .94.1 1.32.29.39.19.72.44 1.02.75.29.31.53.66.71 1.06.17.4.26.81.26 1.22 0 .41-.09.82-.26 1.21-.18.39-.42.75-.71 1.06m-.56-2.96c-.1-.29-.25-.55-.45-.76-.2-.22-.42-.39-.69-.51-.26-.13-.55-.19-.86-.19s-.6.06-.86.19c-.27.12-.5.29-.69.51-.2.21-.36.47-.46.76-.11.28-.16.59-.16.91 0 .32.05.61.16.89.1.29.26.54.46.76.19.22.42.38.69.5.27.12.55.18.86.18s.6-.06.86-.18c.27-.12.49-.28.69-.5.2-.22.35-.47.45-.76.12-.28.17-.57.17-.89 0-.32-.05-.63-.17-.91m-17.14.1c-.24 0-.48.06-.7.15-.21.1-.41.26-.58.46-.16.2-.28.46-.38.76-.09.3-.13.65-.13 1.05 0 .41.04.76.13 1.05.09.29.22.53.38.73.16.19.35.34.57.43.22.1.46.14.71.14.24 0 .48-.05.7-.14.22-.09.41-.24.57-.43.16-.2.29-.44.38-.73.09-.29.14-.64.14-1.05 0-.4-.05-.75-.14-1.05-.09-.3-.22-.56-.38-.76-.16-.2-.35-.36-.57-.46-.22-.09-.46-.15-.7-.15zm8.07 3.81c-.07-.11-.13-.24-.2-.37-.06-.13-.13-.28-.2-.43-.07-.16-.14-.33-.21-.52s-.14-.4-.21-.62h-.04l-.21.62c-.07.19-.14.36-.21.52-.07.15-.13.3-.19.43-.06.13-.12.26-.19.37h1.46zm-8.07-4.71c.44 0 .85.09 1.21.27.36.18.68.44.94.77.26.33.46.74.6 1.23.14.49.22 1.04.22 1.65 0 .62-.07 1.17-.22 1.65-.14.48-.34.89-.6 1.22-.26.33-.58.58-.94.76-.36.18-.77.27-1.21.27-.45 0-.85-.09-1.22-.27-.36-.18-.68-.43-.94-.
