Creating an eye-catching banner is essential for capturing your audience's attention. In this article, we will explore 10 stunning banner examples that showcase effective design principles.
From vibrant colors to compelling typography, these examples will inspire you to elevate your own banner designs. Let's dive in and see what makes these banners stand out.
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 it easy to create pixel-perfect UI every time. Loved by designers and developers alike, Subframe ensures your banners are both stunning and functional.
Start for free and elevate your design game 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
Ready to elevate your design game? With Subframe, you can create pixel-perfect UIs, including stunning banners, in minutes. Our drag-and-drop editor ensures efficiency and precision.
Don't wait—start for free and begin designing immediately!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Urban Threads E-commerce Banner</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap'); body { overflow: hidden; background-color: #f8f9fa; display: flex; justify-content: center; align-items: center; height: 700px; width: 700px; } .banner-container { width: 100%; height: 100%; position: relative; overflow: hidden; background: linear-gradient(135deg, #2c3e50 0%, #4a569d 100%); border-radius: 12px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); } .pattern-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 20%, transparent 60%); z-index: 1; } .diagonal-stripes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03) 10px, transparent 10px, transparent 20px ); z-index: 1; } .content-wrapper { position: relative; z-index: 2; padding: 2rem; display: flex; flex-direction: column; height: 100%; color: white; } .badge { background-color: #ff6b6b; color: white; font-size: 0.9rem; font-weight: 600; padding: 0.5rem 1rem; border-radius: 50px; display: inline-block; margin-bottom: 1rem; transform: translateY(-20px); opacity: 0; animation: fadeInUp 0.5s ease-out forwards 0.3s; align-self: flex-start; box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3); } .headline { font-size: 3.2rem; font-weight: 800; line-height: 1.1; margin-bottom: 1rem; transform: translateY(-20px); opacity: 0; animation: fadeInUp 0.5s ease-out forwards 0.5s; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } .headline span { background: linear-gradient(90deg, #ff6b6b, #feca57); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; } .description { font-size: 1.2rem; font-weight: 300; margin-bottom: 2rem; line-height: 1.5; max-width: 85%; transform: translateY(-20px); opacity: 0; animation: fadeInUp 0.5s ease-out forwards 0.7s; } .cta-container { display: flex; gap: 1rem; transform: translateY(-20px); opacity: 0; animation: fadeInUp 0.5s ease-out forwards 0.9s; margin-top: auto; } .cta-primary { padding: 1rem 2.2rem; background: linear-gradient(90deg, #ff6b6b, #ff8e8e); border: none; border-radius: 50px; color: white; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 10px 20px rgba(255, 107, 107, 0.2); position: relative; overflow: hidden; } .cta-primary:hover { transform: translateY(-2px); box-shadow: 0 15px 25px rgba(255, 107, 107, 0.3); } .cta-primary::after { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: rgba(255, 255, 255, 0.2); transition: width 0.3s ease; } .cta-primary:hover::after { width: 100%; } .cta-secondary { padding: 1rem 2.2rem; background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 50px; color: white; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; } .cta-secondary:hover { background-color: rgba(255, 255, 255, 0.1); transform: translateY(-2px); } .floating-elements { position: absolute; top: 0; right: 0; width: 300px; height: 300px; z-index: 1; } .floating-circle { position: absolute; border-radius: 50%; opacity: 0.15; } .circle-1 { width: 150px; height: 150px; background-color: #ff6b6b; top: 20%; right: -30px; animation: float 12s ease-in-out infinite; } .circle-2 { width: 80px; height: 80px; background-color: #feca57; top: 50%; right: 20%; animation: float 8s ease-in-out infinite 1s; } .circle-3 { width: 120px; height: 120px; background-color: #48dbfb; top: 10%; right: 30%; animation: float 10s ease-in-out infinite 2s; } .timer-container { display: flex; gap: 0.8rem; margin-top: 1rem; margin-bottom: 1.5rem; opacity: 0; transform: translateY(-20px); animation: fadeInUp 0.5s ease-out forwards 0.8s; } .timer-box { background-color: rgba(0, 0, 0, 0.2); padding: 0.6rem 0.8rem; border-radius: 8px; text-align: center; min-width: 60px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); } .timer-number { font-size: 1.8rem; font-weight: 700; color: white; } .timer-label { font-size: 0.7rem; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 1px; } .timer-separator { font-size: 1.8rem; font-weight: 700; color: white; display: flex; align-items: center; padding-bottom: 1.3rem; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes float { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(5deg); } 100% { transform: translateY(0) rotate(0deg); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @media (max-width: 700px) { .headline { font-size: 2.5rem; } .description { font-size: 1rem; max-width: 100%; } .cta-container { flex-wrap: wrap; } .timer-container { transform: scale(0.9); transform-origin: left; } .floating-elements { width: 200px; height: 200px; } .circle-1 { width: 100px; height: 100px; } .circle-2 { width: 60px; height: 60px; } .circle-3 { width: 80px; height: 80px; } } @media (max-width: 500px) { .content-wrapper { padding: 1.5rem; } .headline { font-size: 2rem; } .description { margin-bottom: 1.5rem; } .cta-primary, .cta-secondary { padding: 0.8rem 1.5rem; font-size: 0.9rem; width: 100%; } .cta-container { flex-direction: column; } .timer-container { transform: scale(0.8); transform-origin: left; } } </style> </head> <body> <div class="banner-container"> <div class="pattern-overlay"></div> <div class="diagonal-stripes"></div> <div class="floating-elements"> <div class="floating-circle circle-1"></div> <div class="floating-circle circle-2"></div> <div class="floating-circle circle-3"></div> </div> <div class="content-wrapper"> <div class="badge">SUMMER FLASH SALE</div> <h1 class="headline">Upgrade Your <span>Summer Style</span> For Less</h1> <p class="description">Discover curated fashion pieces at 30-70% off. New arrivals daily, free shipping on orders over $50.</p> <div class="timer-container"> <div class="timer-box"> <div class="timer-number" id="days">02</div> <div class="timer-label">Days</div> </div> <div class="timer-separator">:</div> <div class="timer-box"> <div class="timer-number" id="hours">18</div> <div class="timer-label">Hours</div> </div> <div class="timer-separator">:</div> <div class="timer-box"> <div class="timer-number" id="minutes">45</div> <div class="timer-label">Mins</div> </div> <div class="timer-separator">:</div> <div class="timer-box"> <div class="timer-number" id="seconds">33</div> <div class="timer-label">Secs</div> </div> </div> <div class="cta-container"> <button class="cta-primary" id="shopNowBtn">Shop The Sale</button> <button class="cta-secondary" id="exploreBtn">View Lookbook</button> </div> </div> </div> <script> // Countdown Timer function updateCountdown() { // This is just a demo countdown - no actual end date let seconds = parseInt(document.getElementById('seconds').textContent); let minutes = parseInt(document.getElementById('minutes').textContent); let hours = parseInt(document.getElementById('hours').textContent); let days = parseInt(document.getElementById('days').textContent); seconds--; if (seconds < 0) { seconds = 59; minutes--; if (minutes < 0) { minutes = 59; hours--; if (hours < 0) { hours = 23; days--; if (days < 0) { // Reset the countdown for the demo days = 2; hours = 18; minutes = 45; seconds = 33; } } } } document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0'); document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0'); document.getElementById('hours').textContent = hours.toString().padStart(2, '0'); document.getElementById('days').textContent = days.toString().padStart(2, '0'); } setInterval(updateCountdown, 1000); // Hover effects and animations document.getElementById('shopNowBtn').addEventListener('mouseenter', function() { this.style.animation = 'pulse 0.5s ease-in-out infinite'; }); document.getElementById('shopNowBtn').addEventListener('mouseleave', function() { this.style.animation = ''; }); // Click handlers that don't redirect (for embed) document.getElementById('shopNowBtn').addEventListener('click', function(e) { e.preventDefault(); // Visual feedback instead of redirect this.textContent = "Added to Cart!"; setTimeout(() => { this.textContent = "Shop The Sale"; }, 1500); }); document.getElementById('exploreBtn').addEventListener('click', function(e) { e.preventDefault(); // Visual feedback this.style.backgroundColor = "rgba(255, 255, 255, 0.2)"; setTimeout(() => { this.style.backgroundColor = "transparent"; }, 300); }); // Add some dynamic motion to the background document.addEventListener('mousemove', function(e) { const xPos = e.clientX / window.innerWidth; const yPos = e.clientY / window.innerHeight; // Subtle parallax effect on circles const circles = document.querySelectorAll('.floating-circle'); circles.forEach((circle, index) => { const factor = (index + 1) * 5; circle.style.transform = `translate(${xPos * factor}px, ${yPos * factor}px) rotate(${xPos * 5}deg)`; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AI Summit 2024 - Event Banner</title> <style> :root { --primary: #3a0ca3; --secondary: #4361ee; --accent: #f72585; --light: #f8f9fa; --dark: #1a1b25; --success: #4cc9f0; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; } body { background-color: var(--light); height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; } .banner-container { width: 700px; height: 700px; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 2rem; background: linear-gradient(135deg, var(--dark), var(--primary)); border-radius: 20px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); overflow: hidden; } .banner-container::before { content: ''; 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"><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></svg>'); background-size: 150px; opacity: 0.6; pointer-events: none; } .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; } .particle { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.15); animation: float 10s infinite linear; } @keyframes float { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(-800px) rotate(360deg); opacity: 0; } } .header { position: relative; z-index: 1; } .tag { display: inline-block; padding: 0.4rem 1rem; background-color: var(--accent); color: white; font-weight: 600; font-size: 0.9rem; border-radius: 30px; margin-bottom: 1rem; box-shadow: 0 5px 15px rgba(247, 37, 133, 0.3); transform: translateY(0); transition: all 0.3s ease; } .tag:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(247, 37, 133, 0.4); } h1 { font-size: 2.8rem; color: white; margin-bottom: 1rem; line-height: 1.2; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .highlight { color: var(--success); position: relative; display: inline-block; } .highlight::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 8px; background: rgba(76, 201, 240, 0.3); z-index: -1; border-radius: 4px; } .description { color: rgba(255, 255, 255, 0.85); font-size: 1.1rem; line-height: 1.6; margin-bottom: 2rem; max-width: 90%; } .content { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; } .features { display: flex; gap: 1.5rem; margin-bottom: 2rem; } .feature { display: flex; align-items: center; gap: 0.5rem; color: white; font-size: 1rem; } .feature i { color: var(--success); font-size: 1.2rem; } .countdown { display: flex; gap: 1rem; margin-bottom: 2rem; } .countdown-item { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 70px; height: 70px; background: rgba(255, 255, 255, 0.1); border-radius: 12px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; } .countdown-item:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.15); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .countdown-number { font-size: 1.8rem; font-weight: 700; color: white; } .countdown-label { font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 1px; } .footer { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; } .cta { position: relative; overflow: hidden; display: inline-block; padding: 1rem 2.5rem; background: var(--accent); color: white; font-weight: 600; font-size: 1.1rem; border: none; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 10px 20px rgba(247, 37, 133, 0.3); } .cta::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: 0.5s; } .cta:hover { transform: translateY(-5px); box-shadow: 0 15px 25px rgba(247, 37, 133, 0.4); } .cta:hover::before { left: 100%; } .register-info { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; max-width: 180px; } .icon-pulse { display: inline-block; width: 8px; height: 8px; background-color: var(--success); border-radius: 50%; margin-right: 8px; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 201, 240, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(76, 201, 240, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(76, 201, 240, 0); } } .live-indicator { display: flex; align-items: center; gap: 0.5rem; color: white; font-weight: 600; font-size: 0.9rem; margin-bottom: 1rem; } .speakers { display: flex; margin-bottom: 1.5rem; } .speaker { width: 45px; height: 45px; border-radius: 50%; border: 2px solid white; object-fit: cover; margin-right: -15px; transition: all 0.3s ease; } .speaker:hover { transform: scale(1.1) translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); z-index: 2; } .speaker-count { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; background: var(--secondary); color: white; font-weight: 600; font-size: 0.9rem; border: 2px solid white; } @media (max-width: 600px) { .banner-container { padding: 1.5rem; height: auto; } h1 { font-size: 2.2rem; } .description { font-size: 1rem; } .countdown { gap: 0.5rem; } .countdown-item { width: 60px; height: 60px; } .footer { flex-direction: column; gap: 1.5rem; align-items: flex-start; } .register-info { max-width: 100%; } } .modalDialog { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.8); z-index: 9999; opacity: 0; pointer-events: none; transition: opacity 0.3s; display: flex; align-items: center; justify-content: center; } .modalDialog:target { opacity: 1; pointer-events: auto; } .modalDialog > div { width: 80%; max-width: 500px; position: relative; padding: 2rem; background: linear-gradient(135deg, var(--dark), var(--primary)); border-radius: 20px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); color: white; } .close { position: absolute; top: 1rem; right: 1rem; color: white; text-decoration: none; font-size: 1.5rem; transition: all 0.3s ease; } .close:hover { transform: rotate(90deg); } .form-group { margin-bottom: 1.5rem; } label { display: block; margin-bottom: 0.5rem; font-weight: 600; } input, select { width: 100%; padding: 0.8rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.1); color: white; font-size: 1rem; } input:focus, select:focus { outline: none; border-color: var(--success); background: rgba(255, 255, 255, 0.15); } .submit-btn { width: 100%; padding: 1rem; background: var(--accent); color: white; font-weight: 600; font-size: 1.1rem; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; } .submit-btn:hover { background: #e4167a; } ::placeholder { color: rgba(255, 255, 255, 0.5); } </style> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body> <div class="banner-container"> <div class="particles" id="particles"></div> <div class="header"> <div class="tag">Limited Spots Available</div> <h1>AI Summit 2024: <span class="highlight">Beyond Boundaries</span></h1> <p class="description">Join the world's leading AI innovators for a 3-day virtual conference exploring groundbreaking advancements in machine learning, neural networks, and ethical AI implementation.</p> </div> <div class="content"> <div class="live-indicator"> <div class="icon-pulse"></div> Registration now open </div> <div class="speakers"> <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Speaker" class="speaker"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Speaker" class="speaker"> <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Speaker" class="speaker"> <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Speaker" class="speaker"> <div class="speaker-count">+12</div> </div> <div class="features"> <div class="feature"> <i class="fas fa-video"></i> <span>Live Sessions</span> </div> <div class="feature"> <i class="fas fa-comments"></i> <span>Interactive Q&A</span> </div> <div class="feature"> <i class="fas fa-file-alt"></i> <span>Resources</span> </div> </div> <div class="countdown" id="countdown"> <div class="countdown-item"> <div class="countdown-number" id="days">00</div> <div class="countdown-label">Days</div> </div> <div class="countdown-item"> <div class="countdown-number" id="hours">00</div> <div class="countdown-label">Hours</div> </div> <div class="countdown-item"> <div class="countdown-number" id="minutes">00</div> <div class="countdown-label">Minutes</div> </div> <div class="countdown-item"> <div class="countdown-number" id="seconds">00</div> <div class="countdown-label">Seconds</div> </div> </div> </div> <div class="footer"> <a href="#openModal" class="cta">Register Now</a> <div class="register-info"> Early bird pricing ends in 7 days. Secure your spot today! </div> </div> </div> <div id="openModal" class="modalDialog"> <div> <a href="#close" title="Close" class="close">×</a> <h2 style="margin-bottom: 1.5rem;">Register for AI Summit 2024</h2> <div class="form-group"> <label for="name">Full Name</label> <input type="text" id="name" placeholder="Enter your full name"> </div> <div class="form-group"> <label for="email">Email Address</label> <input type="email" id="email" placeholder="Enter your email"> </div> <div class="form-group"> <label for="role">Your Role</label> <select id="role"> <option value="" disabled selected>Select your role</option> <option value="developer">AI Developer</option> <option value="researcher">Researcher</option> <option value="executive">Executive</option> <option value="student">Student</option> <option value="other">Other</option> </select> </div> <button class="submit-btn" id="submitRegistration">Secure My Spot</button> <p style="margin-top: 1rem; font-size: 0.9rem; color: rgba(255,255,255,0.7);">By registering, you'll receive exclusive access to pre-event materials and networking opportunities.</p> </div> </div> <script> // Generate animated background particles const particlesContainer = document.getElementById('particles'); const particleCount = 15; for (let i = 0; i < particleCount; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); // Random sizing and positioning const size = Math.random() * 50 + 10; const posX = Math.random() * 100; const posY = Math.random() * 100; const delay = Math.random() * 10; const duration = Math.random() * 10 + 10; particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.left = `${posX}%`; particle.style.top = `${posY}%`; particle.style.animationDelay = `${delay}s`; particle.style.animationDuration = `${duration}s`; particlesContainer.appendChild(particle); } // Countdown Timer const countdownDate = new Date(); countdownDate.setDate(countdownDate.getDate() + 30); // 30 days from now function updateCountdown() { const now = new Date().getTime(); const distance = countdownDate - now; const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); document.getElementById('days').innerText = days.toString().padStart(2, '0'); document.getElementById('hours').innerText = hours.toString().padStart(2, '0'); document.getElementById('minutes').innerText = minutes.toString().padStart(2, '0'); document.getElementById('seconds').innerText = seconds.toString().padStart(2, '0'); if (distance < 0) { clearInterval(countdownInterval); document.getElementById('days').innerText = '00'; document.getElementById('hours').innerText = '00'; document.getElementById('minutes').innerText = '00'; document.getElementById('seconds').innerText = '00'; } } updateCountdown(); const countdownInterval = setInterval(updateCountdown, 1000); // Form submission handling (preventing actual submission) document.getElementById('submitRegistration').addEventListener('click', function(e) { e.preventDefault(); const name = document.getElementById('name').value.trim(); const email = document.getElementById('email').value.trim(); const role = document.getElementById('role').value; // Simple validation if (!name || !email || !role) { // Highlight empty fields with a subtle animation if (!name) shake(document.getElementById('name')); if (!email) shake(document.getElementById('email')); if (!role) shake(document.getElementById('role')); return; } // Show success message instead of submitting const modalContent = document.querySelector('.modalDialog > div'); modalContent.innerHTML = ` <a href="#close" title="Close" class="close">×</a> <div style="text-align: center; padding: 2rem 1rem;"> <i class="fas fa-check-circle" style="font-size: 4rem; color: #4cc9f0; margin-bottom: 1.5rem;"></i> <h2 style="margin-bottom: 1rem;">Registration Successful!</h2> <p style="margin-bottom: 2rem;">Thank you, ${name}! We've sent a confirmation email to ${email}. You're officially registered for AI Summit 2024.</p> <a href="#close" class="cta" style="text-decoration: none;">Close</a> </div> `; }); // Shake animation for invalid form fields function shake(element) { element.style.border = '1px solid #f72585'; element.animate([ { transform: 'translateX(0)' }, { transform: 'translateX(-10px)' }, { transform: 'translateX(10px)' }, { transform: 'translateX(-10px)' }, { transform: 'translateX(10px)' }, { transform: 'translateX(0)' } ], { duration: 500, easing: 'ease-in-out' }); setTimeout(() => { if (element.value.trim() === '') { element.style.border = '1px solid #f72585'; } else { element.style.border = '1px solid rgba(255, 255, 255, 0.2)'; } }, 500); } // Form input validation styling const formInputs = document.querySelectorAll('input, select'); formInputs.forEach(input => { input.addEventListener('input', function() { if (this.value.trim() !== '') { this.style.border = '1px solid rgba(255, 255, 255, 0.2)'; } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Portfolio Showcase</title> <style> @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Montserrat:wght@300;400;500&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Montserrat', sans-serif; color: #333; height: 100%; width: 100%; overflow: hidden; } .portfolio-banner { position: relative; width: 100%; height: 100vh; max-height: 700px; max-width: 700px; margin: 0 auto; overflow: hidden; } .parallax-bg { position: absolute; top: 0; left: 0; width: 100%; height: 120%; background-image: url('https://images.unsplash.com/photo-1534531173927-aeb928d54385?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1500&q=80'); background-size: cover; background-position: center; transform: translateY(0); transition: transform 0.3s ease-out; z-index: 0; } .content-wrapper { position: relative; height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 2.5rem; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); z-index: 1; } .header { display: flex; justify-content: space-between; align-items: center; } .logo { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 1.5rem; letter-spacing: 1px; color: #fff; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } .nav { display: flex; gap: 1.5rem; } .nav-item { font-size: 0.85rem; color: #fff; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; position: relative; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } .nav-item::after { content: ''; position: absolute; width: 0; height: 1px; bottom: -4px; left: 0; background-color: #fff; transition: width 0.3s ease; } .nav-item:hover::after { width: 100%; } .center-content { text-align: center; max-width: 70%; margin: 0 auto; } .title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 3.5rem; line-height: 1.1; margin-bottom: 1rem; color: #fff; letter-spacing: 2px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(20px); animation: fadeUp 1s ease forwards; } .subtitle { font-weight: 300; font-size: 1rem; color: rgba(255, 255, 255, 0.9); margin-bottom: 1.5rem; line-height: 1.6; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(20px); animation: fadeUp 1s ease forwards 0.3s; } .cta-btn { display: inline-block; padding: 0.8rem 2rem; background: transparent; border: 1px solid #fff; color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: all 0.3s ease; opacity: 0; transform: translateY(20px); animation: fadeUp 1s ease forwards 0.6s; } .cta-btn:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-3px); } .scroll-indicator { display: flex; justify-content: center; align-items: center; opacity: 0; animation: fadeIn 1s ease forwards 1s; } .scroll-text { font-size: 0.75rem; color: rgba(255, 255, 255, 0.8); text-transform: uppercase; letter-spacing: 2px; margin-right: 0.5rem; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); } .scroll-arrow { width: 20px; height: 30px; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 10px; position: relative; } .scroll-arrow::before { content: ''; position: absolute; width: 4px; height: 4px; background: #fff; left: 50%; top: 6px; transform: translateX(-50%); border-radius: 50%; animation: scrollDown 1.5s infinite; } .work-selector { position: absolute; right: 2.5rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 1rem; z-index: 2; } .work-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: all 0.3s ease; } .work-dot.active { background: #fff; transform: scale(1.3); } .work-dot:hover { background: #fff; } .work-preview { position: absolute; right: 3rem; top: 50%; width: 120px; height: 80px; background-size: cover; background-position: center; opacity: 0; transition: all 0.3s ease; transform: translateY(-50%) translateX(20px); pointer-events: none; z-index: 3; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } @keyframes fadeUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes scrollDown { 0% { opacity: 1; top: 6px; } 70% { opacity: 0; top: 18px; } 100% { opacity: 0; top: 6px; } } @media (max-width: 768px) { .content-wrapper { padding: 1.5rem; } .title { font-size: 2.5rem; } .center-content { max-width: 90%; } .work-selector { right: 1.5rem; } .nav { gap: 1rem; } } @media (max-width: 480px) { .title { font-size: 2rem; } .subtitle { font-size: 0.9rem; } .nav-item { font-size: 0.75rem; } .center-content { max-width: 100%; } } </style> </head> <body> <div class="portfolio-banner"> <div class="parallax-bg" id="parallax-bg"></div> <div class="content-wrapper"> <div class="header"> <div class="logo">Aria Serafim</div> <div class="nav"> <div class="nav-item">Work</div> <div class="nav-item">About</div> <div class="nav-item">Contact</div> </div> </div> <div class="center-content"> <h1 class="title">Crafting Visual Stories</h1> <p class="subtitle">Architectural photography that captures the essence of space, light, and form. Each image tells the story of design's relationship with human experience.</p> <div class="cta-btn">View Portfolio</div> </div> <div class="scroll-indicator"> <span class="scroll-text">Scroll</span> <div class="scroll-arrow"></div> </div> </div> <div class="work-selector"> <div class="work-dot active" data-preview="https://images.unsplash.com/photo-1534531173927-aeb928d54385?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1500&q=80" data-index="0"></div> <div class="work-dot" data-preview="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1500&q=80" data-index="1"></div> <div class="work-dot" data-preview="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1500&q=80" data-index="2"></div> <div class="work-dot" data-preview="https://images.unsplash.com/photo-1600607687644-4e4d6bb8f83d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1500&q=80" data-index="3"></div> </div> <div class="work-preview" id="work-preview"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const backgroundImages = [ 'https://images.unsplash.com/photo-1534531173927-aeb928d54385?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1500&q=80', 'https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1500&q=80', 'https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1500&q=80', 'https://images.unsplash.com/photo-1600607687644-4e4d6bb8f83d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1500&q=80' ]; const portfolioTitles = [ 'Crafting Visual Stories', 'Spaces That Inspire', 'Form Follows Light', 'Architectural Harmony' ]; const portfolioSubtitles = [ 'Architectural photography that captures the essence of space, light, and form. Each image tells the story of design's relationship with human experience.', 'Dedicated to finding beauty in the built environment. My lens seeks the dialogue between structure and surrounding nature.', 'Exploring how light transforms architecture throughout the day. A study of shadows, reflections, and illumination.', 'Documenting the balance between tradition and innovation in contemporary architecture around the world.' ]; // Parallax effect const parallaxBg = document.getElementById('parallax-bg'); const banner = document.querySelector('.portfolio-banner'); banner.addEventListener('mousemove', (e) => { const xPos = e.clientX / banner.offsetWidth; const yPos = e.clientY / banner.offsetHeight; const xOffset = (xPos - 0.5) * 20; const yOffset = (yPos - 0.5) * 20; parallaxBg.style.transform = `translateX(${xOffset}px) translateY(${yOffset}px)`; }); // Work dot hover and click functionality const workDots = document.querySelectorAll('.work-dot'); const workPreview = document.getElementById('work-preview'); const title = document.querySelector('.title'); const subtitle = document.querySelector('.subtitle'); workDots.forEach((dot, index) => { dot.addEventListener('mouseenter', () => { const previewUrl = dot.getAttribute('data-preview'); workPreview.style.backgroundImage = `url(${previewUrl})`; workPreview.style.opacity = '1'; workPreview.style.transform = 'translateY(-50%) translateX(0)'; }); dot.addEventListener('mouseleave', () => { workPreview.style.opacity = '0'; workPreview.style.transform = 'translateY(-50%) translateX(20px)'; }); dot.addEventListener('click', () => { // Update active dot workDots.forEach(d => d.classList.remove('active')); dot.classList.add('active'); // Animate content change title.style.opacity = '0'; subtitle.style.opacity = '0'; setTimeout(() => { // Change background with fade effect parallaxBg.style.opacity = '0'; setTimeout(() => { parallaxBg.style.backgroundImage = `url(${backgroundImages[index]})`; parallaxBg.style.opacity = '1'; }, 300); // Update content title.textContent = portfolioTitles[index]; subtitle.textContent = portfolioSubtitles[index]; // Animate content back in title.style.opacity = '1'; subtitle.style.opacity = '1'; }, 300); }); }); // CTA button interaction const ctaBtn = document.querySelector('.cta-btn'); ctaBtn.addEventListener('mouseenter', () => { ctaBtn.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.2)'; }); ctaBtn.addEventListener('mouseleave', () => { ctaBtn.style.boxShadow = 'none'; }); ctaBtn.addEventListener('click', function(e) { e.preventDefault(); // Create ripple effect const ripple = document.createElement('span'); const rect = this.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); const x = e.clientX - rect.left - size / 2; const y = e.clientY - rect.top - size / 2; ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; ripple.style.position = 'absolute'; ripple.style.borderRadius = '50%'; ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.3)'; ripple.style.transform = 'scale(0)'; ripple.style.animation = 'ripple 0.6s linear'; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); // Add ripple animation const style = document.createElement('style'); style.textContent = ` @keyframes ripple { to { transform: scale(4); opacity: 0; } } `; document.head.appendChild(style); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mobile App Feature Banner</title> <style> :root { --primary-color: #6200ee; --secondary-color: #03dac6; --background-color: #f5f5f5; --text-color: #212121; --text-light: #757575; --accent-color: #ff6b6b; --success-color: #4caf50; --white: #ffffff; --shadow: 0 4px 20px rgba(0, 0, 0, 0.1); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } body { background-color: var(--background-color); color: var(--text-color); display: flex; justify-content: center; align-items: center; min-height: 700px; width: 100%; overflow-x: hidden; padding: 20px; } .container { width: 100%; max-width: 700px; height: 700px; position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; box-shadow: var(--shadow); background-color: var(--white); } header { padding: 20px; display: flex; justify-content: space-between; align-items: center; background-color: var(--primary-color); color: var(--white); } header h1 { font-size: 1.5rem; font-weight: 600; } .content { flex: 1; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; padding: 0 0 70px 0; position: relative; } .hero { position: relative; height: 200px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: var(--white); padding: 30px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath fill='%23ffffff' fill-opacity='0.1' d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z'%3E%3C/path%3E%3C/svg%3E"); opacity: 0.3; } .hero h2 { font-size: 2rem; margin-bottom: 10px; position: relative; z-index: 1; font-weight: 700; } .hero p { font-size: 1rem; opacity: 0.9; max-width: 420px; position: relative; z-index: 1; } .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding: 20px; } .feature-card { background-color: var(--white); border-radius: 12px; padding: 25px; position: relative; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); transition: var(--transition); cursor: pointer; border: 2px solid transparent; display: flex; flex-direction: column; overflow: hidden; } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); border-color: var(--secondary-color); } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background-color: var(--primary-color); transform: scaleY(0); transform-origin: bottom; transition: transform 0.3s ease; } .feature-card:hover::before { transform: scaleY(1); } .feature-card .icon { width: 50px; height: 50px; background-color: rgba(98, 0, 238, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; color: var(--primary-color); font-size: 24px; transition: var(--transition); } .feature-card:hover .icon { background-color: var(--primary-color); color: var(--white); transform: rotate(5deg) scale(1.1); } .feature-card h3 { font-size: 1.2rem; margin-bottom: 10px; color: var(--text-color); position: relative; display: inline-block; } .feature-card h3::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--secondary-color); transition: var(--transition); } .feature-card:hover h3::after { width: 100%; } .feature-card p { color: var(--text-light); font-size: 0.9rem; line-height: 1.5; margin-bottom: 15px; } .feature-card .badge { display: inline-block; background-color: rgba(3, 218, 198, 0.1); color: var(--secondary-color); padding: 4px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 500; margin-top: auto; } .action-btn { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: var(--primary-color); color: var(--white); padding: 15px 30px; border-radius: 30px; border: none; font-weight: 600; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(98, 0, 238, 0.3); transition: var(--transition); z-index: 10; width: calc(100% - 40px); max-width: 320px; } .action-btn:hover { background-color: #7c4dff; box-shadow: 0 8px 25px rgba(98, 0, 238, 0.4); transform: translateX(-50%) translateY(-3px); } .action-btn:active { transform: translateX(-50%) translateY(0); box-shadow: 0 4px 15px rgba(98, 0, 238, 0.3); } .action-btn .icon { margin-left: 10px; font-size: 1.2rem; transition: var(--transition); } .action-btn:hover .icon { transform: translateX(5px); } .progress-tracker { display: flex; justify-content: center; margin: 20px 0; gap: 10px; } .progress-dot { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.1); cursor: pointer; transition: var(--transition); } .progress-dot.active { background-color: var(--primary-color); transform: scale(1.3); } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(98, 0, 238, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(98, 0, 238, 0); } 100% { box-shadow: 0 0 0 0 rgba(98, 0, 238, 0); } } @keyframes wave { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .animated { animation: fadeIn 0.6s forwards; } .pulse { animation: pulse 2s infinite; } .notification-badge { position: absolute; top: -5px; right: -5px; background-color: var(--accent-color); color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: bold; transform: scale(0); transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); } .notification-active .notification-badge { transform: scale(1); } .feature-card.notification-active { border-color: var(--accent-color); } .feature-preview { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; margin-top: 10px; } .feature-card.expanded .feature-preview { max-height: 200px; } .feature-preview img { width: 100%; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } /* Custom toggle switch */ .toggle-wrapper { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } .toggle-wrapper span { font-size: 0.8rem; color: var(--text-light); } .toggle { position: relative; display: inline-block; width: 48px; height: 24px; } .toggle input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 24px; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .slider { background-color: var(--success-color); } input:focus + .slider { box-shadow: 0 0 1px var(--success-color); } input:checked + .slider:before { transform: translateX(24px); } /* Toast notification */ .toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(100px); background-color: rgba(33, 33, 33, 0.9); color: white; padding: 12px 20px; border-radius: 4px; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease; z-index: 100; opacity: 0; } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } .toast .icon { color: var(--success-color); } /* Responsive adjustments */ @media (max-width: 576px) { .hero h2 { font-size: 1.5rem; } .features { grid-template-columns: 1fr; } .feature-card { padding: 20px; } .action-btn { width: calc(100% - 40px); padding: 12px 20px; font-size: 0.9rem; } } @media (min-width: 577px) and (max-width: 700px) { .features { grid-template-columns: 1fr; } } </style> </head> <body> <div class="container"> <header> <h1>SoloSync</h1> <div class="notification-active"> <i class="icon">🔔</i> <span class="notification-badge">3</span> </div> </header> <div class="content"> <div class="hero animated"> <h2>Introducing Smart Tasks 2.0</h2> <p>Revolutionize your workflow with AI-powered task organization, adaptive reminders, and cross-device syncing.</p> </div> <div class="progress-tracker"> <div class="progress-dot active" data-index="0"></div> <div class="progress-dot" data-index="1"></div> <div class="progress-dot" data-index="2"></div> </div> <div class="features"> <div class="feature-card animated notification-active" style="animation-delay: 0.1s;" data-feature="task-ai"> <div class="icon">🧠</div> <div class="notification-badge">1</div> <h3>Task AI Assistant</h3> <p>Our new AI engine analyzes your work patterns and automatically organizes tasks based on your productivity cycles.</p> <div class="feature-preview"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 150' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23f5f8ff'/%3E%3Crect x='20' y='20' width='260' height='40' rx='8' fill='%23e2e9ff'/%3E%3Ccircle cx='40' cy='40' r='10' fill='%236200ee'/%3E%3Crect x='60' y='35' width='120' height='10' rx='2' fill='%23333'/%3E%3Crect x='60' y='50' width='80' height='5' rx='2' fill='%23999'/%3E%3Crect x='20' y='70' width='260' height='40' rx='8' fill='%23e2e9ff'/%3E%3Ccircle cx='40' cy='90' r='10' fill='%2303dac6'/%3E%3Crect x='60' y='85' width='150' height='10' rx='2' fill='%23333'/%3E%3Crect x='60' y='100' width='100' height='5' rx='2' fill='%23999'/%3E%3C/svg%3E" alt="Task AI Preview"> </div> <div class="badge">New</div> <div class="toggle-wrapper"> <span>Enable Feature</span> <label class="toggle"> <input type="checkbox" class="feature-toggle"> <span class="slider"></span> </label> </div> </div> <div class="feature-card animated" style="animation-delay: 0.2s;" data-feature="cross-sync"> <div class="icon">🔄</div> <h3>Cross-Device Sync</h3> <p>Seamlessly transition between mobile, tablet, desktop, and wearables with our new ultra-fast sync engine.</p> <div class="feature-preview"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 150' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23f5f8ff'/%3E%3Crect x='20' y='30' width='80' height='110' rx='8' fill='%23e2e9ff'/%3E%3Crect x='25' y='40' width='70' height='90' rx='4' fill='%23fff'/%3E%3Crect x='110' y='30' width='170' height='110' rx='8' fill='%23e2e9ff'/%3E%3Crect x='120' y='40' width='150' height='90' rx='4' fill='%23fff'/%3E%3Cpath d='M150 75 L130 95 L170 95 Z' fill='%236200ee'/%3E%3Cpath d='M150 95 L130 75 L170 75 Z' fill='%2303dac6'/%3E%3C/svg%3E" alt="Cross-Device Sync Preview"> </div> <div class="badge">Beta</div> <div class="toggle-wrapper"> <span>Enable Feature</span> <label class="toggle"> <input type="checkbox" class="feature-toggle" checked> <span class="slider"></span> </label> </div> </div> <div class="feature-card animated notification-active" style="animation-delay: 0.3s;" data-feature="adaptive-reminders"> <div class="icon">⏰</div> <div class="notification-badge">2</div> <h3>Adaptive Reminders</h3> <p>Smart notifications that adjust timing based on location, calendar events, and past response patterns.</p> <div class="feature-preview"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 150' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23f5f8ff'/%3E%3Ccircle cx='150' cy='75' r='60' fill='%23e2e9ff' stroke='%236200ee' stroke-width='5'/%3E%3Cpath d='M150 30 L150 75 L195 75' stroke='%2303dac6' stroke-width='6' stroke-linecap='round'/%3E%3Ccircle cx='150' cy='75' r='5' fill='%236200ee'/%3E%3Crect x='220' y='30' width='50' height='25' rx='12.5' fill='%23ff6b6b'/%3E%3Ctext x='245' y='46' font-family='Arial' font-size='12' fill='white' text-anchor='middle'%3E9:30%3C/text%3E%3C/svg%3E" alt="Adaptive Reminders Preview"> </div> <div class="badge">Popular</div> <div class="toggle-wrapper"> <span>Enable Feature</span> <label class="toggle"> <input type="checkbox" class="feature-toggle"> <span class="slider"></span> </label> </div> </div> <div class="feature-card animated" style="animation-delay: 0.4s;" data-feature="gesture-shortcuts"> <div class="icon">👆</div> <h3>Gesture Shortcuts</h3> <p>Create custom gesture patterns for quick access to frequently used features and actions.</p> <div class="feature-preview"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 150' width='300' height='150'%3E%3Crect width='300' height='150' fill='%23f5f8ff'/%3E%3Cpath d='M50 75 C80 45, 120 105, 150 75 C180 45, 220 105, 250 75' stroke='%236200ee' stroke-width='4' stroke-linecap='round' fill='none'/%3E%3Ccircle cx='50' cy='75' r='8' fill='%2303dac6'/%3E%3Ccircle cx='150' cy='75' r='8' fill='%2303dac6'/%3E%3Ccircle cx='250' cy='75' r='8' fill='%2303dac6'/%3E%3C/svg%3E" alt="Gesture Shortcuts Preview"> </div> <div class="badge">Advanced</div> <div class="toggle-wrapper"> <span>Enable Feature</span> <label class="toggle"> <input type="checkbox" class="feature-toggle"> <span class="slider"></span> </label> </div> </div> </div> </div> <button class="action-btn pulse"> <span>Activate Smart Tasks 2.0</span> <span class="icon">→</span> </button> </div> <div class="toast"> <span class="icon">✓</span> <span class="message">Feature activated successfully!</span> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Initialization with staggered animations const animatedElements = document.querySelectorAll('.animated'); animatedElements.forEach((el, index) => { setTimeout(() => { el.style.opacity = '1'; el.style.transform = 'translateY(0)'; }, 100 * index); }); // Progress tracker functionality const dots = document.querySelectorAll('.progress-dot'); let currentFeatureIndex = 0; const featureGroups = [ ['task-ai', 'cross-sync'], ['adaptive-reminders', 'gesture-shortcuts'], ['voice-commands', 'dark-theme'] ]; dots.forEach(dot => { dot.addEventListener('click', function() { const dotIndex = parseInt(this.dataset.index); setActiveDot(dotIndex); }); }); function setActiveDot(index) { dots.forEach(dot => dot.classList.remove('active')); dots[index].classList.add('active'); currentFeatureIndex = index; // Here you would implement the logic to show different feature sets // For this example, we'll just toggle classes for demonstration animateFeatureCards(); } function animateFeatureCards() { const featureCards = document.querySelectorAll('.feature-card'); featureCards.forEach((card, index) => { card.style.opacity = '0'; card.style.transform = 'translateY(20px)'; setTimeout(() => { card.style.opacity = '1'; card.style.transform = 'translateY(0)'; }, 100 * index); }); } // Feature card functionality const featureCards = document.querySelectorAll('.feature-card'); featureCards.forEach(card => { card.addEventListener('click', function() { this.classList.toggle('expanded'); }); }); // Toggle switches const toggles = document.querySelectorAll('.feature-toggle'); toggles.forEach(toggle => { toggle.addEventListener('change', function() { const card = this.closest('.feature-card'); const featureName = card.dataset.feature; const isEnabled = this.checked; // Show toast notification const toast = document.querySelector('.toast'); const toastMessage = toast.querySelector('.message'); toastMessage.textContent = isEnabled ? `${featureName.replace('-', ' ')} feature enabled!` : `${featureName.replace('-', ' ')} feature disabled.`; toast.classList.add('show'); setTimeout(() => { toast.classList.remove('show'); }, 3000); // If enabled, remove notification badge if present if (isEnabled && card.classList.contains('notification-active')) { card.classList.remove('notification-active'); } }); }); // Action button const actionBtn = document.querySelector('.action-btn'); actionBtn.addEventListener('click', function() { // Count enabled features const enabledFeatures = document.querySelectorAll('.feature-toggle:checked').length; // Show toast notification const toast = document.querySelector('.toast'); const toastMessage = toast.querySelector('.message'); if (enabledFeatures > 0) { toastMessage.textContent = `Smart Tasks 2.0 activated with ${enabledFeatures} feature${enabledFeatures !== 1 ? 's' : ''}!`; // Remove all notification badges document.querySelectorAll('.notification-active').forEach(el => { el.classList.remove('notification-active'); }); // Add success animation to button this.classList.remove('pulse'); this.innerHTML = '<span>Successfully Activated</span> <span class="icon">✓</span>'; this.style.backgroundColor = 'var(--success-color)'; } else { toastMessage.textContent = "Please enable at least one feature."; } toast.classList.add('show'); setTimeout(() => { toast.classList.remove('show'); }, 3000); }); // Simulate a notification appearing after some time setTimeout(() => { const randomCard = document.querySelectorAll('.feature-card:not(.notification-active)')[0]; if (randomCard) { randomCard.classList.add('notification-active'); const badge = document.createElement('div'); badge.classList.add('notification-badge'); badge.textContent = "!"; randomCard.appendChild(badge); // Add a slight animation to draw attention randomCard.style.animation = 'pulse 2s'; setTimeout(() => { randomCard.style.animation = ''; }, 2000); } }, 5000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Corporate Achievement Banner</title> <style> :root { --primary: #2c3e50; --secondary: #34495e; --accent: #3498db; --light: #ecf0f1; --success: #27ae60; --text: #2c3e50; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f5f5f5; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; } .container { width: 100%; max-width: 700px; height: 700px; display: flex; flex-direction: column; position: relative; overflow: hidden; } .banner { width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--light); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; position: relative; } .banner-content { display: flex; height: 100%; transition: transform 0.5s ease-in-out; } .text-section, .image-section { flex: 1; padding: 2.5rem; position: relative; overflow: hidden; transition: all 0.4s ease; } .text-section { display: flex; flex-direction: column; justify-content: center; } .title { font-size: 1.8rem; font-weight: 600; margin-bottom: 1rem; transition: transform 0.3s ease; position: relative; } .title::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 60px; height: 3px; background-color: var(--accent); transition: width 0.4s ease; } .text-section:hover .title::after { width: 100px; } .subtitle { font-size: 1rem; font-weight: 400; margin-bottom: 1.5rem; opacity: 0.85; } .description { font-size: 0.95rem; line-height: 1.6; margin-bottom: 2rem; max-width: 90%; } .stats { display: flex; gap: 1.5rem; margin-bottom: 2rem; } .stat { display: flex; flex-direction: column; align-items: flex-start; } .stat-number { font-size: 1.5rem; font-weight: 700; color: var(--accent); } .stat-label { font-size: 0.85rem; opacity: 0.7; } .cta-btn { padding: 0.8rem 1.5rem; background-color: var(--accent); color: white; border: none; border-radius: 4px; font-weight: 500; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3); max-width: fit-content; } .cta-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: all 0.4s ease; } .cta-btn:hover { background-color: #2980b9; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4); } .cta-btn:hover::before { left: 100%; } .image-section { background-color: rgba(255, 255, 255, 0.1); position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; } .image-wrapper { width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: 8px; transition: transform 0.4s ease; } .main-image { width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease; transform: scale(1.02); } .image-section:hover .main-image { transform: scale(1.1); } .achievement-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); padding: 2rem; transform: translateY(100%); transition: transform 0.5s ease; color: white; } .image-section:hover .achievement-overlay { transform: translateY(0); } .achievement-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; } .achievement-list { list-style: none; } .achievement-item { display: flex; align-items: center; margin-bottom: 0.7rem; font-size: 0.85rem; } .achievement-item::before { content: '✓'; color: var(--success); margin-right: 10px; font-weight: bold; } .progress-bar { position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background-color: var(--accent); transition: width 0.2s linear; } .floating-badge { position: absolute; top: 2rem; right: 2rem; background-color: rgba(39, 174, 96, 0.9); color: white; padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.8rem; font-weight: 500; display: flex; align-items: center; transform: translateY(0); animation: float 3s ease-in-out infinite; box-shadow: 0 4px 10px rgba(39, 174, 96, 0.3); z-index: 10; } .badge-dot { width: 8px; height: 8px; background-color: white; border-radius: 50%; margin-right: 8px; animation: pulse 2s infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } } @media (max-width: 768px) { .banner-content { flex-direction: column; } .text-section, .image-section { padding: 1.5rem; flex: none; height: 50%; } .title { font-size: 1.5rem; } .stats { gap: 1rem; } .description { margin-bottom: 1rem; } .achievement-overlay { padding: 1rem; } .achievement-title { font-size: 1rem; } } @media (max-width: 480px) { .stats { flex-direction: column; gap: 0.5rem; } .title { font-size: 1.3rem; } .subtitle { font-size: 0.9rem; } .description { font-size: 0.85rem; } } </style> </head> <body> <div class="container"> <div class="banner"> <div class="banner-content"> <div class="text-section"> <h1 class="title">Milestone Achieved: Carbon Neutral Operations</h1> <p class="subtitle">A new chapter in our sustainability journey</p> <p class="description">We're proud to announce that Vertex Solutions has achieved carbon neutrality across all global operations, three years ahead of our original target. This milestone represents our unwavering commitment to environmental stewardship while driving business growth.</p> <div class="stats"> <div class="stat"> <span class="stat-number">43%</span> <span class="stat-label">Emissions Reduced</span> </div> <div class="stat"> <span class="stat-number">100%</span> <span class="stat-label">Renewable Energy</span> </div> <div class="stat"> <span class="stat-number">$12M</span> <span class="stat-label">Investment</span> </div> </div> <button class="cta-btn">Read Full Report</button> </div> <div class="image-section"> <div class="image-wrapper"> <img src="https://images.unsplash.com/photo-1611273426858-450d8e3c9fce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Sustainable business operations" class="main-image"> </div> <div class="achievement-overlay"> <h3 class="achievement-title">Key Accomplishments</h3> <ul class="achievement-list"> <li class="achievement-item">Reduced carbon emissions by 43% since 2019</li> <li class="achievement-item">Transitioned all facilities to 100% renewable energy</li> <li class="achievement-item">Implemented circular economy principles in product design</li> <li class="achievement-item">Established sustainability training for all employees</li> <li class="achievement-item">Recognized by CDP with A- climate leadership rating</li> </ul> </div> <div class="floating-badge"> <span class="badge-dot"></span> <span>Carbon Neutral Certified</span> </div> </div> </div> <div class="progress-bar"></div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const progressBar = document.querySelector('.progress-bar'); const banner = document.querySelector('.banner'); const textSection = document.querySelector('.text-section'); const imageSection = document.querySelector('.image-section'); // Initialize the progress bar animation setTimeout(() => { progressBar.style.width = '100%'; }, 300); // Mouse movement effect for the text section textSection.addEventListener('mousemove', function(e) { const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const title = this.querySelector('.title'); const moveX = (x - rect.width / 2) / 20; const moveY = (y - rect.height / 2) / 20; title.style.transform = `translate(${moveX}px, ${moveY}px)`; }); // Reset the transform when mouse leaves textSection.addEventListener('mouseleave', function() { const title = this.querySelector('.title'); title.style.transform = 'translate(0, 0)'; }); // Handle the CTA button click const ctaButton = document.querySelector('.cta-btn'); ctaButton.addEventListener('click', function(e) { e.preventDefault(); // Visual feedback for the button click this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = ''; }, 200); // Show a toast notification instead of redirecting const toast = document.createElement('div'); toast.style.position = 'absolute'; toast.style.bottom = '20px'; toast.style.left = '50%'; toast.style.transform = 'translateX(-50%)'; toast.style.backgroundColor = 'rgba(39, 174, 96, 0.9)'; toast.style.color = 'white'; toast.style.padding = '12px 24px'; toast.style.borderRadius = '4px'; toast.style.fontWeight = '500'; toast.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)'; toast.style.zIndex = '100'; toast.style.opacity = '0'; toast.style.transition = 'opacity 0.3s ease'; toast.textContent = 'Full sustainability report will open in a new tab'; document.querySelector('.container').appendChild(toast); setTimeout(() => { toast.style.opacity = '1'; }, 100); setTimeout(() => { toast.style.opacity = '0'; setTimeout(() => { toast.remove(); }, 300); }, 3000); }); // Stats counter animation const statNumbers = document.querySelectorAll('.stat-number'); statNumbers.forEach(stat => { const targetValue = stat.textContent; const isCurrency = targetValue.includes('$'); const isPercentage = targetValue.includes('%'); let value = 0; if (isCurrency) { const numericValue = parseInt(targetValue.replace(/\D/g, '')); const increment = Math.ceil(numericValue / 50); const timer = setInterval(() => { value += increment; if (value >= numericValue) { value = numericValue; clearInterval(timer); } stat.textContent = `$${value}M`; }, 30); } else if (isPercentage) { const numericValue = parseInt(targetValue); const increment = Math.ceil(numericValue / 50); const timer = setInterval(() => { value += increment; if (value >= numericValue) { value = numericValue; clearInterval(timer); } stat.textContent = `${value}%`; }, 30); } else { const timer = setInterval(() => { value += 2; if (value >= parseInt(targetValue)) { value = parseInt(targetValue); clearInterval(timer); } stat.textContent = value; }, 30); } }); // Make achievement items appear one by one const achievementItems = document.querySelectorAll('.achievement-item'); achievementItems.forEach((item, index) => { item.style.opacity = '0'; item.style.transform = 'translateY(20px)'; item.style.transition = 'opacity 0.4s ease, transform 0.4s ease'; imageSection.addEventListener('mouseenter', function() { setTimeout(() => { item.style.opacity = '1'; item.style.transform = 'translateY(0)'; }, 200 + (index * 100)); }); imageSection.addEventListener('mouseleave', function() { setTimeout(() => { item.style.opacity = '0'; item.style.transform = 'translateY(20px)'; }, 100); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Holiday Season Sale</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&display=swap'); body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f8f9fa; overflow: hidden; } .banner-container { position: relative; width: 100%; max-width: 700px; height: 700px; background: linear-gradient(135deg, #8e2de2, #4a00e0); border-radius: 16px; overflow: hidden; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); } .season-toggle { position: absolute; top: 20px; right: 20px; z-index: 10; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(5px); padding: 10px 15px; border-radius: 30px; color: white; font-weight: 500; cursor: pointer; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.3); } .season-toggle:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); } .winter-bg { background: linear-gradient(135deg, #1e3c72, #2a5298); } .fall-bg { background: linear-gradient(135deg, #b91d1d, #e65c00); } .banner-content { position: relative; z-index: 2; padding: 40px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; } .banner-title { font-family: 'Playfair Display', serif; font-size: 4rem; font-weight: 900; margin-bottom: 20px; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(30px); animation: fadeUp 0.8s ease forwards 0.2s; } .banner-subtitle { font-size: 1.5rem; margin-bottom: 30px; line-height: 1.4; max-width: 80%; opacity: 0; transform: translateY(30px); animation: fadeUp 0.8s ease forwards 0.4s; } .discount-badge { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); padding: 15px 30px; border-radius: 50px; font-size: 1.8rem; font-weight: 700; margin-bottom: 40px; border: 2px solid rgba(255, 255, 255, 0.2); opacity: 0; transform: scale(0.8); animation: popIn 0.6s cubic-bezier(0.18, 1.3, 0.4, 1) forwards 0.6s; } .cta-button { padding: 16px 35px; background: white; color: #333; border: none; border-radius: 50px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; opacity: 0; transform: translateY(30px); animation: fadeUp 0.8s ease forwards 0.8s; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); } .cta-button:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .particles-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } .particle { position: absolute; width: 10px; height: 10px; background: rgba(255, 255, 255, 0.7); border-radius: 50%; animation: fall linear infinite; } .winter .particle { background: white; border-radius: 50%; } .fall .particle { background: none; border-radius: 0; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%23ff9800" d="M10 0 L13 7 L20 7 L14 12 L17 20 L10 15 L3 20 L6 12 L0 7 L7 7 Z"/></svg>'); background-size: contain; transform: rotate(0deg); animation: fallAndRotate linear infinite; } .limited-offer { position: absolute; bottom: 30px; left: 0; width: 100%; font-size: 1rem; font-weight: 500; padding: 10px; opacity: 0; animation: blinkEffect 3s infinite, fadeUp 0.8s ease forwards 1s; } .countdown { font-weight: 700; font-size: 1.2rem; margin-top: 10px; } .promotion-details { position: absolute; bottom: 80px; font-size: 0.9rem; opacity: 0.7; max-width: 80%; opacity: 0; animation: fadeUp 0.8s ease forwards 1.2s; } .illustration { position: absolute; width: 150px; height: 150px; z-index: 1; opacity: 0; animation: float 6s ease-in-out infinite, fadeIn 1s ease forwards 1.5s; } .illustration.top-left { top: 50px; left: 50px; animation-delay: 0.2s, 1.5s; } .illustration.top-right { top: 70px; right: 50px; animation-delay: 0.5s, 1.8s; } .illustration.bottom-left { bottom: 70px; left: 60px; animation-delay: 0.8s, 2.1s; } .illustration.bottom-right { bottom: 50px; right: 60px; animation-delay: 1.1s, 2.4s; } .winter .illustration { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3)); } .fall .illustration { filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.3)); } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes popIn { 50% { transform: scale(1.1); } to { opacity: 1; transform: scale(1); } } @keyframes blinkEffect { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } @keyframes fall { to { transform: translateY(700px); } } @keyframes fallAndRotate { to { transform: translateY(700px) rotate(360deg); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } @keyframes fadeIn { to { opacity: 1; } } @media (max-width: 700px) { .banner-title { font-size: 3rem; } .banner-subtitle { font-size: 1.2rem; max-width: 90%; } .discount-badge { font-size: 1.5rem; padding: 10px 25px; } .illustration { width: 100px; height: 100px; } .illustration.top-left { top: 30px; left: 30px; } .illustration.top-right { top: 40px; right: 30px; } .illustration.bottom-left { bottom: 100px; left: 30px; } .illustration.bottom-right { bottom: 100px; right: 30px; } } </style> </head> <body> <div class="banner-container winter"> <div class="season-toggle">Change Season</div> <div class="particles-container"></div> <div class="illustration top-left"> <svg viewBox="0 0 512 512" fill="white" class="winter-icon"> <path d="M217.9 105.9L340.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L217.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-241.4c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.5 24 9.9zM192 373.2l118-118c2-2 3.1-4.7 3.1-7.5s-1.1-5.5-3.1-7.5l-118-118L192 373.2z"/> </svg> </div> <div class="illustration top-right"> <svg viewBox="0 0 576 512" fill="white" class="winter-icon"> <path d="M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.6 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z"/> </svg> </div> <div class="illustration bottom-left"> <svg viewBox="0 0 512 512" fill="white" class="winter-icon"> <path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm50.7-186.9L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/> </svg> </div> <div class="illustration bottom-right"> <svg viewBox="0 0 512 512" fill="white" class="winter-icon"> <path d="M448 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM304 128a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm-32 32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm-96 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM448 416a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM304 448a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm-32 32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm-96 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm-96-32a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM48 448a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM16 304a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm32-32a32 32 0 1 0 64 0 32 32 0 1 0 -64 0zm96-32a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm32-32a32 32 0 1 0 64 0 32 32 0 1 0 -64 0zm96-32a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm32-32a32 32 0 1 0 64 0 32 32 0 1 0 -64 0zM496 176a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm-480 0a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"/> </svg> </div> <div class="banner-content"> <h1 class="banner-title">Winter Wonderland</h1> <p class="banner-subtitle">Embrace the chill with our collection of cozy essentials designed for those magical winter moments.</p> <div class="discount-badge">SAVE UP TO 40% OFF</div> <button class="cta-button">Explore Collection</button> <p class="promotion-details">Free shipping on orders over $50. Gift wrapping available.</p> <div class="limited-offer"> Limited-time offer ends in: <div class="countdown" id="countdown">5 days, 12 hours</div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const bannerContainer = document.querySelector('.banner-container'); const seasonToggle = document.querySelector('.season-toggle'); const bannerTitle = document.querySelector('.banner-title'); const bannerSubtitle = document.querySelector('.banner-subtitle'); const discountBadge = document.querySelector('.discount-badge'); const particlesContainer = document.querySelector('.particles-container'); const winterIcons = document.querySelectorAll('.winter-icon'); // Create particles function createParticles(count) { particlesContainer.innerHTML = ''; for (let i = 0; i < count; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); // Random positioning const size = Math.random() * 8 + 4; // 4px to 12px particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.left = `${Math.random() * 100}%`; particle.style.top = `-${size}px`; // Random animation duration const duration = Math.random() * 10 + 5; // 5s to 15s particle.style.animationDuration = `${duration}s`; // Random animation delay particle.style.animationDelay = `${Math.random() * 5}s`; particlesContainer.appendChild(particle); } } // Initialize with winter theme createParticles(50); // Update countdown timer function updateCountdown() { const now = new Date(); const endDate = new Date(); // Set end date to 5 days from now endDate.setDate(now.getDate() + 5); endDate.setHours(now.getHours() + 12); const diff = endDate - now; const days = Math.floor(diff / (1000 * 60 * 60 * 24)); const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); document.getElementById('countdown').textContent = `${days} days, ${hours} hours`; } updateCountdown(); setInterval(updateCountdown, 60000); // Update every minute // Toggle between seasons let isWinter = true; seasonToggle.addEventListener('click', function() { isWinter = !isWinter; if (isWinter) { // Switch to winter theme bannerContainer.classList.remove('fall-bg'); bannerContainer.classList.add('winter-bg'); bannerContainer.classList.remove('fall'); bannerContainer.classList.add('winter'); bannerTitle.textContent = 'Winter Wonderland'; bannerSubtitle.textContent = 'Embrace the chill with our collection of cozy essentials designed for those magical winter moments.'; discountBadge.textContent = 'SAVE UP TO 40% OFF'; seasonToggle.textContent = 'Change Season'; // Update SVG colors winterIcons.forEach(icon => { icon.setAttribute('fill', 'white'); }); createParticles(50); } else { // Switch to fall theme bannerContainer.classList.remove('winter-bg'); bannerContainer.classList.add('fall-bg'); bannerContainer.classList.remove('winter'); bannerContainer.classList.add('fall'); bannerTitle.textContent = 'Autumn Harvest'; bannerSubtitle.textContent = 'Fall in love with our autumn collection. Warm tones and cozy fabrics for the perfect seasonal transition.'; discountBadge.textContent = 'HARVEST SALE 35% OFF'; seasonToggle.textContent = 'Change Season'; // Update SVG colors winterIcons.forEach(icon => { icon.setAttribute('fill', '#ffb74d'); }); createParticles(30); } }); // CTA button hover effect const ctaButton = document.querySelector('.cta-button'); ctaButton.addEventListener('mouseenter', function() { this.style.background = isWinter ? '#e0f7fa' : '#fff3e0'; }); ctaButton.addEventListener('mouseleave', function() { this.style.background = 'white'; }); // Prevent actual navigation ctaButton.addEventListener('click', function(e) { e.preventDefault(); // Visual feedback for click this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = ''; }, 150); // Toggle a message to show interaction discountBadge.textContent = 'COUPON APPLIED!'; setTimeout(() => { discountBadge.textContent = isWinter ? 'SAVE UP TO 40% OFF' : 'HARVEST SALE 35% OFF'; }, 1500); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary-color: #5B9AA0; --secondary-color: #D6EDFF; --accent-color: #F67280; --text-color: #2C3E50; --light-color: #F9F9F9; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--light-color); color: var(--text-color); height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; } .banner-container { width: 100%; max-width: 700px; height: 650px; background: linear-gradient(120deg, #e6f7ff, #f9f0ff); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; position: relative; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; } .water-ripple { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at center, rgba(91, 154, 160, 0.2) 10%, transparent 60%); z-index: 0; opacity: 0.4; animation: ripple 8s infinite ease-in-out; } @keyframes ripple { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } .banner-header { position: relative; z-index: 1; text-align: center; } .banner-title { font-size: 2.5rem; font-weight: 700; color: var(--primary-color); margin-bottom: 15px; position: relative; display: inline-block; } .banner-title::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background-color: var(--accent-color); border-radius: 50px; } .banner-subtitle { font-size: 1.1rem; font-weight: 400; color: var(--text-color); margin-bottom: 25px; line-height: 1.5; max-width: 85%; margin: 0 auto; } .banner-content { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; } .illustration { width: 280px; height: 220px; margin: 20px 0; position: relative; background-color: rgba(255, 255, 255, 0.7); padding: 15px; border-radius: 12px; display: flex; justify-content: center; align-items: center; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07); overflow: hidden; } .children-container { display: flex; position: relative; } .child { width: 60px; height: 140px; position: relative; margin: 0 8px; transform-origin: bottom center; animation: sway 4s infinite ease-in-out; } .child:nth-child(2) { animation-delay: 0.5s; } .child:nth-child(3) { animation-delay: 1s; } @keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } } .child-head { width: 40px; height: 40px; background-color: #ffdbac; border-radius: 50%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .child-body { width: 30px; height: 60px; background-color: var(--accent-color); border-radius: 15px 15px 5px 5px; position: absolute; top: 35px; left: 50%; transform: translateX(-50%); } .child-legs { width: 40px; height: 40px; position: absolute; top: 90px; left: 50%; transform: translateX(-50%); } .leg { width: 10px; height: 40px; background-color: #ffdbac; border-radius: 5px; position: absolute; } .leg.left { left: 5px; } .leg.right { right: 5px; } .child:nth-child(1) .child-body { background-color: var(--accent-color); } .child:nth-child(2) .child-body { background-color: var(--primary-color); } .child:nth-child(3) .child-body { background-color: #7FB2D6; } .floating-bubbles { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; } .bubble { position: absolute; background-color: rgba(255, 255, 255, 0.6); border-radius: 50%; opacity: 0.6; animation: float 8s infinite ease-in-out; } @keyframes float { 0% { transform: translateY(0) translateX(0); opacity: 0; } 50% { opacity: 0.6; } 100% { transform: translateY(-100px) translateX(20px); opacity: 0; } } .progress-container { width: 100%; background-color: rgba(255, 255, 255, 0.5); border-radius: 50px; height: 20px; margin: 30px 0 15px; position: relative; overflow: hidden; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) inset; } .progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary-color), var(--accent-color)); border-radius: 50px; transition: width 1.5s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; } .progress-bar::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100% ); animation: shimmer 2s infinite; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .progress-text { display: flex; justify-content: space-between; width: 100%; font-size: 0.9rem; color: var(--text-color); margin-bottom: 20px; } .progress-label { font-weight: 600; } .stats { display: flex; justify-content: space-around; width: 100%; margin: 20px 0; } .stat { text-align: center; flex: 1; padding: 0 10px; position: relative; } .stat-value { font-size: 2rem; font-weight: 700; color: var(--primary-color); margin-bottom: 5px; position: relative; display: inline-block; } .stat-label { font-size: 0.9rem; color: var(--text-color); opacity: 0.8; } .stat::after { content: ''; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background-color: rgba(0, 0, 0, 0.1); } .stat:last-child::after { display: none; } .action-container { width: 100%; display: flex; justify-content: center; margin-top: 20px; position: relative; z-index: 2; } .donate-btn { padding: 14px 35px; background-color: var(--accent-color); color: white; border: none; border-radius: 50px; font-size: 1.1rem; font-weight: 600; cursor: pointer; box-shadow: 0 4px 15px rgba(246, 114, 128, 0.4); transition: all 0.3s ease; position: relative; overflow: hidden; } .donate-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(246, 114, 128, 0.5); } .donate-btn:active { transform: translateY(0); } .donate-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: all 0.4s ease; } .donate-btn:hover::before { left: 100%; } @media (max-width: 500px) { .banner-title { font-size: 2rem; } .banner-subtitle { font-size: 0.95rem; } .illustration { width: 240px; height: 180px; } .stat-value { font-size: 1.6rem; } .child { width: 50px; height: 120px; } .child-head { width: 35px; height: 35px; } .child-body { width: 25px; height: 50px; } .banner-container { padding: 20px; height: 600px; } } .heartbeat { animation: heartbeat 1.5s infinite; } @keyframes heartbeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } </style> </head> <body> <div class="banner-container"> <div class="water-ripple"></div> <div class="banner-header"> <h1 class="banner-title">Water for Children</h1> <p class="banner-subtitle">Help us provide clean drinking water to rural communities where children walk miles each day just to collect water that makes them sick.</p> </div> <div class="banner-content"> <div class="illustration"> <div class="children-container"> <div class="child"> <div class="child-head"></div> <div class="child-body"></div> <div class="child-legs"> <div class="leg left"></div> <div class="leg right"></div> </div> </div> <div class="child"> <div class="child-head"></div> <div class="child-body"></div> <div class="child-legs"> <div class="leg left"></div> <div class="leg right"></div> </div> </div> <div class="child"> <div class="child-head"></div> <div class="child-body"></div> <div class="child-legs"> <div class="leg left"></div> <div class="leg right"></div> </div> </div> </div> <div class="floating-bubbles"> <div class="bubble" style="width: 20px; height: 20px; left: 20%; top: 20%; animation-delay: 0s;"></div> <div class="bubble" style="width: 15px; height: 15px; left: 80%; top: 60%; animation-delay: 2s;"></div> <div class="bubble" style="width: 25px; height: 25px; left: 50%; top: 50%; animation-delay: 4s;"></div> <div class="bubble" style="width: 10px; height: 10px; left: 30%; top: 70%; animation-delay: 3s;"></div> <div class="bubble" style="width: 18px; height: 18px; left: 70%; top: 30%; animation-delay: 1s;"></div> </div> </div> <div class="stats"> <div class="stat"> <h3 class="stat-value" id="stat-wells">32</h3> <p class="stat-label">Wells Built</p> </div> <div class="stat"> <h3 class="stat-value" id="stat-people">4,870</h3> <p class="stat-label">People Helped</p> </div> <div class="stat"> <h3 class="stat-value" id="stat-villages">18</h3> <p class="stat-label">Villages Reached</p> </div> </div> <div class="progress-text"> <span class="progress-label">Current Campaign Progress:</span> <span class="progress-value" id="progress-percent">0%</span> </div> <div class="progress-container"> <div class="progress-bar" id="progress-bar"></div> </div> <div class="progress-text"> <span>$0</span> <span id="target-amount">$50,000</span> </div> </div> <div class="action-container"> <button class="donate-btn" id="donate-btn">Donate Now</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Set up donation progress animation const progressBar = document.getElementById('progress-bar'); const progressPercent = document.getElementById('progress-percent'); const donateBtn = document.getElementById('donate-btn'); const statWells = document.getElementById('stat-wells'); const statPeople = document.getElementById('stat-people'); const statVillages = document.getElementById('stat-villages'); // Animated counter function function animateCounter(element, start, end, duration) { let startTime = null; const step = (timestamp) => { if (!startTime) startTime = timestamp; const progress = Math.min((timestamp - startTime) / duration, 1); let value = Math.floor(progress * (end - start) + start); // Format with commas if it's a large number if (value > 999) { value = value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } element.innerText = value; if (progress < 1) { window.requestAnimationFrame(step); } }; window.requestAnimationFrame(step); } // Initial progress (simulated) const currentProgress = 68; // 68% of goal reached // Animate statistics on load setTimeout(() => { progressBar.style.width = `${currentProgress}%`; progressPercent.textContent = `${currentProgress}%`; animateCounter(statWells, 0, 32, 2000); animateCounter(statPeople, 0, 4870, 2500); animateCounter(statVillages, 0, 18, 1800); }, 500); // Interactive donation button donateBtn.addEventListener('click', function(e) { e.preventDefault(); // Add heartbeat effect on click this.classList.add('heartbeat'); setTimeout(() => { this.classList.remove('heartbeat'); }, 1000); // Simulate donation increment (for demo purposes) let newProgress = Math.min(currentProgress + 5, 100); progressBar.style.width = `${newProgress}%`; progressPercent.textContent = `${newProgress}%`; // Update stats for visual feedback let currentWells = parseInt(statWells.textContent); let currentPeople = parseInt(statPeople.textContent.replace(/,/g, '')); let currentVillages = parseInt(statVillages.textContent); animateCounter(statWells, currentWells, currentWells + 1, 1000); animateCounter(statPeople, currentPeople, currentPeople + 150, 1000); if (newProgress % 15 === 0) { animateCounter(statVillages, currentVillages, currentVillages + 1, 1000); } }); // Add random bubble animations for visual interest function createBubble() { const bubble = document.createElement('div'); bubble.classList.add('bubble'); const size = Math.random() * 15 + 10; const left = Math.random() * 100; const animationDuration = Math.random() * 4 + 4; bubble.style.width = `${size}px`; bubble.style.height = `${size}px`; bubble.style.left = `${left}%`; bubble.style.top = '100%'; bubble.style.animationDuration = `${animationDuration}s`; document.querySelector('.floating-bubbles').appendChild(bubble); setTimeout(() => { bubble.remove(); }, animationDuration * 1000); } // Create bubbles periodically setInterval(createBubble, 2000); // Initial bubbles for (let i = 0; i < 5; i++) { setTimeout(createBubble, i * 500); } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NovaTech X1 Launch</title> <style> @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Space Grotesk', sans-serif; } body { background-color: #0a0a0a; color: #f0f0f0; width: 100%; height: 100%; overflow: hidden; } .container { width: 100%; max-width: 700px; height: 700px; margin: 0 auto; position: relative; overflow: hidden; display: flex; flex-direction: column; perspective: 1000px; } .banner { width: 100%; height: 100%; background: linear-gradient(135deg, #10101a, #0a0a0a); border-radius: 12px; padding: 30px; position: relative; display: flex; flex-direction: column; justify-content: space-between; z-index: 1; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6); transition: all 0.5s ease; opacity: 0; transform: translateY(30px); } .banner.loaded { opacity: 1; transform: translateY(0); } .grid-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(42, 252, 152, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(42, 252, 152, 0.05) 1px, transparent 1px); background-size: 20px 20px; z-index: -1; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .logo { font-family: 'Syncopate', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -1px; color: #fff; display: flex; align-items: center; } .logo span { color: #2AFCC8; } .neon-circle { width: 12px; height: 12px; background: #2AFCC8; border-radius: 50%; margin-right: 10px; box-shadow: 0 0 10px #2AFCC8, 0 0 20px #2AFCC8; animation: pulse 2s infinite; } .date { font-size: 14px; opacity: 0.7; font-family: 'Space Grotesk', sans-serif; font-weight: 300; } .product { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; z-index: 2; } .tagline { font-size: 16px; color: #2AFCC8; margin-bottom: 15px; transform: translateY(20px); opacity: 0; animation: fadeInUp 0.6s ease forwards; animation-delay: 0.6s; text-transform: uppercase; letter-spacing: 4px; } .title { font-family: 'Syncopate', sans-serif; font-size: 56px; font-weight: 700; margin-bottom: 20px; line-height: 1; background: linear-gradient(90deg, #fff, #2AFCC8); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transform: translateY(20px); opacity: 0; animation: fadeInUp 0.6s ease forwards; animation-delay: 0.8s; } .description { font-size: 18px; font-weight: 300; line-height: 1.6; margin-bottom: 30px; max-width: 80%; color: rgba(255, 255, 255, 0.8); transform: translateY(20px); opacity: 0; animation: fadeInUp 0.6s ease forwards; animation-delay: 1s; } .specs { display: flex; gap: 20px; margin-bottom: 40px; transform: translateY(20px); opacity: 0; animation: fadeInUp 0.6s ease forwards; animation-delay: 1.2s; } .spec-item { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 15px; min-width: 120px; backdrop-filter: blur(10px); transition: all 0.3s ease; cursor: pointer; position: relative; overflow: hidden; } .spec-item:hover { background: rgba(42, 252, 200, 0.1); border-color: rgba(42, 252, 200, 0.3); transform: translateY(-5px); } .spec-item:hover::after { opacity: 1; } .spec-item::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(42, 252, 200, 0.1), transparent); transform: translateX(-100%); animation: shimmer 2s infinite; opacity: 0; transition: opacity 0.3s ease; } .spec-item h3 { font-size: 14px; color: #2AFCC8; margin-bottom: 5px; } .spec-item p { font-size: 18px; font-weight: 500; } .tech-details { position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px; background: rgba(10, 10, 10, 0.9); border-radius: 8px; transform: translateY(100%); transition: transform 0.3s ease; border-top: 1px solid rgba(42, 252, 200, 0.3); backdrop-filter: blur(5px); z-index: 10; font-size: 14px; } .spec-item:hover .tech-details { transform: translateY(0); } .cta { display: flex; align-items: center; gap: 20px; transform: translateY(20px); opacity: 0; animation: fadeInUp 0.6s ease forwards; animation-delay: 1.4s; } .cta-button { background: linear-gradient(90deg, #2AFCC8, #2AC8FC); color: #0a0a0a; border: none; padding: 15px 30px; border-radius: 30px; font-weight: 600; font-size: 16px; cursor: pointer; position: relative; overflow: hidden; z-index: 1; transition: all 0.3s ease; } .cta-button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(42, 252, 200, 0.3); } .cta-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #2AC8FC, #2AFCC8); z-index: -1; transition: opacity 0.3s ease; opacity: 0; } .cta-button:hover::before { opacity: 1; } .learn-more { color: #fff; text-decoration: none; font-size: 16px; position: relative; transition: all 0.3s ease; } .learn-more::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 1px; background: #2AFCC8; transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; } .learn-more:hover { color: #2AFCC8; } .learn-more:hover::after { transform: scaleX(1); transform-origin: left; } .product-image { position: absolute; right: -80px; bottom: 50px; width: 50%; max-width: 350px; transform: translateY(50px) rotate(10deg); opacity: 0; filter: drop-shadow(0 10px 20px rgba(42, 252, 200, 0.3)); z-index: 0; animation: fadeInProduct 1s ease forwards; animation-delay: 1.6s; } .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; } .particle { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(42, 252, 200, 0.6); box-shadow: 0 0 10px rgba(42, 252, 200, 0.8); animation: float 10s linear infinite; } @keyframes float { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-700px) translateX(50px); opacity: 0; } } @keyframes pulse { 0% { box-shadow: 0 0 10px #2AFCC8, 0 0 20px #2AFCC8; } 50% { box-shadow: 0 0 15px #2AFCC8, 0 0 30px #2AFCC8; } 100% { box-shadow: 0 0 10px #2AFCC8, 0 0 20px #2AFCC8; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInProduct { from { opacity: 0; transform: translateY(50px) rotate(10deg); } to { opacity: 1; transform: translateY(0) rotate(0deg); } } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @media (max-width: 700px) { .container { height: auto; min-height: 700px; } .banner { padding: 20px; } .title { font-size: 40px; } .description { font-size: 16px; max-width: 100%; } .specs { flex-wrap: wrap; } .spec-item { min-width: calc(50% - 10px); } .product-image { position: relative; right: 0; bottom: 0; width: 80%; max-width: 250px; margin: 20px auto 0; } .cta { flex-direction: column; align-items: flex-start; } } @media (max-width: 480px) { .title { font-size: 32px; } .spec-item { min-width: 100%; } } </style> </head> <body> <div class="container"> <div class="banner"> <div class="grid-pattern"></div> <div class="particles" id="particles"></div> <div class="header"> <div class="logo"> <div class="neon-circle"></div> NOVA<span>TECH</span> </div> <div class="date">LAUNCHING OCT 30, 2023</div> </div> <div class="product"> <div class="tagline">The future is now</div> <h1 class="title">NOVA X1</h1> <p class="description">Introducing the industry's first quantum-enhanced neural processor. The X1 breaks computational barriers with 30x faster AI processing and 80% less power consumption.</p> <div class="specs"> <div class="spec-item"> <h3>PERFORMANCE</h3> <p>180 TFLOPS</p> <div class="tech-details"> Built on 3nm architecture with 12-core quantum acceleration matrix </div> </div> <div class="spec-item"> <h3>EFFICIENCY</h3> <p>12W TDP</p> <div class="tech-details"> Revolutionary carbon nanotube heat dissipation system with zero throttling </div> </div> <div class="spec-item"> <h3>AI CORES</h3> <p>128 NPUs</p> <div class="tech-details"> Dedicated neural processing units with quantum entanglement acceleration </div> </div> </div> <div class="cta"> <button class="cta-button" id="preorderBtn">PRE-ORDER NOW</button> <a href="#" class="learn-more">Explore technical specs</a> </div> </div> <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCIgdmlld0JveD0iMCAwIDUwMCA1MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQxIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJBRkNDOCIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMkFDOEZDIiBzdG9wLW9wYWNpdHk9IjAuOCIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZDIiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMkFGQ0M4IiBzdG9wLW9wYWNpdHk9IjAuMyIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyQUM4RkMiIHN0b3Atb3BhY2l0eT0iMC4zIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICAgIDxyZWN0IHg9IjE1MCIgeT0iMTAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjMwMCIgcng9IjIwIiByeT0iMjAiIGZpbGw9IiMxNTE1MjAiIHN0cm9rZT0idXJsKCNncmFkMSkiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgPHJlY3QgeD0iMTgwIiB5PSIxMzAiIHdpZHRoPSIxNDAiIGhlaWdodD0iMjQwIiByeD0iNSIgcnk9IjUiIGZpbGw9InVybCgjZ3JhZDIpIiBmaWxsLW9wYWNpdHk9IjAuMSIvPgogICAgPGNpcmNsZSBjeD0iMjUwIiBjeT0iMTIwIiByPSI1IiBmaWxsPSIjMkFGQ0M4Ii8+CiAgICA8cmVjdCB4PSIyMDAiIHk9IjM4MCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMCIgcng9IjUiIHJ5PSI1IiBmaWxsPSIjMkFGQ0M4IiBmaWxsLW9wYWNpdHk9IjAuNyIvPgogICAgCiAgICA8Y2lyY2xlIGN4PSIxNzAiIGN5PSIxODAiIHI9IjEwIiBmaWxsPSJub25lIiBzdHJva2U9IiMyQUZDQzgiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgPGNpcmNsZSBjeD0iMTcwIiBjeT0iMjIwIiByPSIxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMkFGQ0M4IiBzdHJva2Utd2lkdGg9IjIiLz4KICAgIDxjaXJjbGUgY3g9IjE3MCIgY3k9IjI2MCIgcj0iMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzJBRkNDOCIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8Y2lyY2xlIGN4PSIxNzAiIGN5PSIzMDAiIHI9IjEwIiBmaWxsPSJub25lIiBzdHJva2U9IiMyQUZDQzgiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgCiAgICA8Y2lyY2xlIGN4PSIzMzAiIGN5PSIxODAiIHI9IjEwIiBmaWxsPSJub25lIiBzdHJva2U9IiMyQUZDQzgiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgPGNpcmNsZSBjeD0iMzMwIiBjeT0iMjIwIiByPSIxMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMkFGQ0M4IiBzdHJva2Utd2lkdGg9IjIiLz4KICAgIDxjaXJjbGUgY3g9IjMzMCIgY3k9IjI2MCIgcj0iMTAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzJBRkNDOCIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8Y2lyY2xlIGN4PSIzMzAiIGN5PSIzMDAiIHI9IjEwIiBmaWxsPSJub25lIiBzdHJva2U9IiMyQUZDQzgiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgCiAgICA8Y2lyY2xlIGN4PSIyNTAiIGN5PSIyMzAiIHI9IjQ1IiBmaWxsPSJub25lIiBzdHJva2U9InVybCgjZ3JhZDEpIiBzdHJva2Utd2lkdGg9IjMiLz4KICAgIDxjaXJjbGUgY3g9IjI1MCIgY3k9IjIzMCIgcj0iMzAiIGZpbGw9Im5vbmUiIHN0cm9rZT0idXJsKCNncmFkMSkiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgPGNpcmNsZSBjeD0iMjUwIiBjeT0iMjMwIiByPSIxNSIgZmlsbD0idXJsKCNncmFkMSkiLz4KICAgIDxjaXJjbGUgY3g9IjI3MCIgY3k9IjIxNSIgcj0iNCIgZmlsbD0iI2ZmZiIvPgogICAgCiAgICA8cmVjdCB4PSIxOTAiIHk9IjE0MCIgd2lkdGg9IjEyMCIgaGVpZ2h0PSIyMCIgcng9IjUiIHJ5PSI1IiBmaWxsPSIjMkFGQ0M4IiBmaWxsLW9wYWNpdHk9IjAuMSIvPgogICAgPHBhdGggZD0iTTIyMCAzMTAgTDI4MCAzMTAgTDI2MCAzNDAgTDI0MCAzNDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzJBRkNDOCIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICA8bGluZSB4MT0iMTkwIiB5MT0iMzQwIiB4Mj0iMzEwIiB5Mj0iMzQwIiBzdHJva2U9IiMyQUZDQzgiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWRhc2hhcnJheT0iNCIvPgogICAgCiAgICA8IS0tIERlY29yYXRpdmUgbGluZXMgYW5kIGNpcmN1aXRzIC0tPgogICAgPHBhdGggZD0iTTEwMCAxNTAgTDEzMCAxNTAgTDEzMCAxODAgTDE1MCAxODAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzJBRkNDOCIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2Utb3BhY2l0eT0iMC41Ii8+CiAgICA8cGF0aCBkPSJNMTAwIDIzMCBMMTMwIDIzMCBMMTMwIDI2MCBMMTUwIDI2MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMkFGQ0M4IiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1vcGFjaXR5PSIwLjUiLz4KICAgIDxwYXRoIGQ9Ik00MDAgMjAwIEwzNzAgMjAwIEwzNzAgMjIwIEwzNTAgMjIwIiBmaWxsPSJub25lIiBzdHJva2U9IiMyQUZDQzgiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLW9wYWNpdHk9IjAuNSIvPgogICAgPHBhdGggZD0iTTQwMCAyODAgTDM3MCAyODAgTDM3MCAzMDAgTDM1MCAzMDAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzJBRkNDOCIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2Utb3BhY2l0eT0iMC41Ii8+CiAgICAKICAgIDxjaXJjbGUgY3g9IjEwMCIgY3k9IjE1MCIgcj0iNSIgZmlsbD0iIzJBRkNDOCIgZmlsbC1vcGFjaXR5PSIwLjUiLz4KICAgIDxjaXJjbGUgY3g9IjEwMCIgY3k9IjIzMCIgcj0iNSIgZmlsbD0iIzJBRkNDOCIgZmlsbC1vcGFjaXR5PSIwLjUiLz4KICAgIDxjaXJjbGUgY3g9IjQwMCIgY3k9IjIwMCIgcj0iNSIgZmlsbD0iIzJBRkNDOCIgZmlsbC1vcGFjaXR5PSIwLjUiLz4KICAgIDxjaXJjbGUgY3g9IjQwMCIgY3k9IjI4MCIgcj0iNSIgZmlsbD0iIzJBRkNDOCIgZmlsbC1vcGFjaXR5PSIwLjUiLz4KPC9zdmc+" class="product-image" alt="NovaX1 Neural Processor"> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Show banner with animation setTimeout(function() { document.querySelector('.banner').classList.add('loaded'); }, 300); // Create particles const particlesContainer = document.getElementById('particles'); for (let i = 0; i < 20; i++) { createParticle(); } function createParticle() { const particle = document.createElement('div'); particle.classList.add('particle'); // Random position const x = Math.random() * 100; const y = Math.random() * 100; particle.style.left = `${x}%`; particle.style.bottom = `${-5}%`; // Random size const size = Math.random() * 3 + 2; particle.style.width = `${size}px`; particle.style.height = `${size}px`; // Random opacity particle.style.opacity = Math.random() * 0.5 + 0.3; // Random animation duration const duration = Math.random() * 15 + 10; particle.style.animationDuration = `${duration}s`; // Random delay const delay = Math.random() * 5; particle.style.animationDelay = `${delay}s`; particlesContainer.appendChild(particle); // Remove particle after animation and create a new one setTimeout(() => { particle.remove(); createParticle(); }, (duration + delay) * 1000); } // CTA Button Effect const preorderBtn = document.getElementById('preorderBtn'); preorderBtn.addEventListener('click', function(e) { e.preventDefault(); // Create a ripple effect const ripple = document.createElement('div'); ripple.style.position = 'absolute'; ripple.style.width = '10px'; ripple.style.height = '10px'; ripple.style.borderRadius = '50%'; ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.6)'; ripple.style.transform = 'scale(0)'; ripple.style.transition = 'all 0.6s ease'; // Get click position const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; this.appendChild(ripple); // Animate ripple setTimeout(() => { ripple.style.transform = 'scale(20)'; ripple.style.opacity = '0'; setTimeout(() => { ripple.remove(); }, 600); // Change button text this.textContent = 'RESERVED'; this.style.background = '#2AFCC8'; // Reset after 2 seconds setTimeout(() => { this.textContent = 'PRE-ORDER NOW'; this.style.background = 'linear-gradient(90deg, #2AFCC8, #2AC8FC)'; }, 2000); }, 10); }); // Parallax effect on product image document.addEventListener('mousemove', function(e) { const container = document.querySelector('.container'); const rect = container.getBoundingClientRect(); if (e.clientX > rect.left && e.clientX < rect.right && e.clientY > rect.top && e.clientY < rect.bottom) { const xPos = (e.clientX - rect.left) / rect.width - 0.5; const yPos = (e.clientY - rect.top) / rect.height - 0.5; const productImage = document.querySelector('.product-image'); productImage.style.transform = `translateY(${yPos * -10}px) translateX(${xPos * -10}px)`; } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fresh Harvest Delivery</title> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@400;500;600&display=swap'); :root { --primary: #FF6B35; --secondary: #2EC4B6; --accent: #FFBF69; --dark: #252422; --light: #FFFCF9; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; background-color: var(--light); color: var(--dark); height: 100%; width: 100%; overflow: hidden; } .container { width: 100%; height: 100vh; max-width: 700px; max-height: 700px; margin: 0 auto; position: relative; overflow: hidden; } .banner { width: 100%; height: 100%; display: flex; flex-direction: column; background-color: var(--light); position: relative; padding: 2rem; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); } .banner::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(255, 191, 105, 0.15) 0%, rgba(46, 196, 182, 0.15) 100%); z-index: 0; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; position: relative; z-index: 1; } .logo { font-family: 'Playfair Display', serif; font-size: 1.8rem; color: var(--dark); display: flex; align-items: center; gap: 10px; } .logo svg { height: 30px; width: 30px; fill: var(--primary); } .content { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; } .headline { font-family: 'Playfair Display', serif; font-size: 3rem; line-height: 1.2; margin-bottom: 1rem; color: var(--dark); position: relative; } .headline span { color: var(--primary); position: relative; } .headline span::after { content: ''; position: absolute; left: 0; bottom: 5px; width: 100%; height: 8px; background-color: var(--accent); z-index: -1; transform: skewX(-5deg); } .subheadline { font-size: 1.1rem; margin-bottom: 2rem; max-width: 80%; color: var(--dark); opacity: 0.9; } .cta { background-color: var(--primary); color: white; border: none; padding: 1rem 2rem; font-size: 1rem; font-weight: 600; border-radius: 50px; cursor: pointer; box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3); transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; max-width: fit-content; } .cta:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4); } .cta::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 ease; z-index: -1; } .cta:hover::before { left: 100%; } .food-carousel { position: absolute; bottom: 2rem; right: 2rem; display: flex; gap: 1.5rem; z-index: 2; } .food-item { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; position: relative; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); cursor: pointer; transition: all 0.3s ease; } .food-item:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .food-item img { width: 100%; height: 100%; object-fit: cover; } .food-item::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent); opacity: 0; transition: opacity 0.3s ease; } .food-item:hover::before { opacity: 1; } .food-popup { position: absolute; bottom: 120px; right: 50px; background-color: white; padding: 1.5rem; border-radius: 10px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); opacity: 0; transform: translateY(20px); pointer-events: none; transition: all 0.3s ease; width: 300px; z-index: 10; } .food-popup.active { opacity: 1; transform: translateY(0); } .food-popup h3 { font-family: 'Playfair Display', serif; font-size: 1.4rem; margin-bottom: 0.5rem; color: var(--dark); } .food-popup p { font-size: 0.9rem; margin-bottom: 1rem; color: var(--dark); opacity: 0.8; } .food-popup .price { font-weight: 600; color: var(--primary); font-size: 1.2rem; } .food-popup .add-btn { background-color: var(--secondary); color: white; border: none; padding: 0.5rem 1rem; font-size: 0.9rem; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; margin-top: 0.5rem; } .food-popup .add-btn:hover { background-color: #25a99d; } .food-image-large { position: absolute; top: 0; right: 0; width: 40%; height: 100%; overflow: hidden; z-index: 0; opacity: 0.8; } .food-image-large img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); animation: slowZoom 20s infinite alternate; } .food-image-large::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, var(--light), transparent); } .special-badge { position: absolute; top: 2rem; right: 2rem; background-color: var(--accent); color: var(--dark); font-weight: 600; padding: 0.5rem 1rem; border-radius: 50px; transform: rotate(5deg); box-shadow: 0 4px 10px rgba(255, 191, 105, 0.4); z-index: 3; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: rotate(5deg) scale(1); } 50% { transform: rotate(5deg) scale(1.05); } 100% { transform: rotate(5deg) scale(1); } } @keyframes slowZoom { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } @media (max-width: 600px) { .banner { padding: 1.5rem; } .headline { font-size: 2.2rem; } .subheadline { font-size: 1rem; max-width: 100%; } .food-image-large { opacity: 0.3; width: 100%; } .food-carousel { right: 1rem; bottom: 1rem; gap: 1rem; } .food-item { width: 60px; height: 60px; } .food-popup { width: 250px; right: 20px; bottom: 90px; } .special-badge { top: 1rem; right: 1rem; font-size: 0.8rem; } } </style> </head> <body> <div class="container"> <div class="banner"> <div class="header"> <div class="logo"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M3 22L12 2L21 22H3Z"/> <circle cx="12" cy="14" r="3"/> </svg> Fresh Harvest </div> </div> <div class="content"> <h1 class="headline">Farm-to-Door in <span>30 Minutes</span></h1> <p class="subheadline">Seasonal ingredients, chef-crafted recipes, and zero-waste packaging delivered right when you need it.</p> <button class="cta">Order Farm Fresh</button> </div> <div class="special-badge">30% OFF FIRST ORDER</div> <div class="food-image-large"> <img src="https://images.unsplash.com/photo-1540189549336-e6e99c3679fe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Food platter"> </div> <div class="food-carousel"> <div class="food-item" data-name="Rainbow Bowl" data-description="Vibrant mix of roasted sweet potatoes, avocado, quinoa, and seasonal veggies with turmeric tahini dressing." data-price="$14.95"> <img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" alt="Rainbow Bowl"> </div> <div class="food-item" data-name="Harvest Pizza" data-description="Stone-baked sourdough crust topped with heirloom tomatoes, buffalo mozzarella, and fresh basil from our garden." data-price="$18.50"> <img src="https://images.unsplash.com/photo-1604382354936-07c5d9983bd3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" alt="Harvest Pizza"> </div> <div class="food-item" data-name="Seasonal Salmon" data-description="Wild-caught salmon with charred lemon, microgreens, and maple-miso glaze on a bed of herbed farro." data-price="$22.95"> <img src="https://images.unsplash.com/photo-1519708227418-c8fd9a32b7a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=300&q=80" alt="Seasonal Salmon"> </div> </div> <div class="food-popup"> <h3>Rainbow Bowl</h3> <p>Vibrant mix of roasted sweet potatoes, avocado, quinoa, and seasonal veggies with turmeric tahini dressing.</p> <div class="price">$14.95</div> <button class="add-btn">Add to Order</button> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const foodItems = document.querySelectorAll('.food-item'); const foodPopup = document.querySelector('.food-popup'); const popupTitle = foodPopup.querySelector('h3'); const popupDescription = foodPopup.querySelector('p'); const popupPrice = foodPopup.querySelector('.price'); const ctaButton = document.querySelector('.cta'); let activeItem = null; // Add shimmer effect to CTA button setInterval(() => { const cta = document.querySelector('.cta'); cta.classList.add('shimmer'); setTimeout(() => { cta.classList.remove('shimmer'); }, 700); }, 4000); // Food item hover functionality foodItems.forEach(item => { item.addEventListener('mouseenter', function() { if (activeItem === this) return; activeItem = this; const name = this.getAttribute('data-name'); const description = this.getAttribute('data-description'); const price = this.getAttribute('data-price'); popupTitle.textContent = name; popupDescription.textContent = description; popupPrice.textContent = price; foodPopup.classList.add('active'); }); item.addEventListener('mouseleave', function() { if (activeItem === this) { setTimeout(() => { if (activeItem === this) { foodPopup.classList.remove('active'); activeItem = null; } }, 300); } }); }); // Prevent popup from closing when hovering the popup itself foodPopup.addEventListener('mouseenter', function() { foodPopup.classList.add('active'); }); foodPopup.addEventListener('mouseleave', function() { foodPopup.classList.remove('active'); activeItem = null; }); // Add button in popup functionality const addButton = foodPopup.querySelector('.add-btn'); addButton.addEventListener('click', function() { this.textContent = '✓ Added'; this.style.backgroundColor = '#4CAF50'; setTimeout(() => { this.textContent = 'Add to Order'; this.style.backgroundColor = ''; }, 1500); }); // CTA button effect ctaButton.addEventListener('click', function() { this.innerHTML = 'Order Placed!'; this.style.backgroundColor = '#4CAF50'; setTimeout(() => { this.innerHTML = 'Order Farm Fresh'; this.style.backgroundColor = ''; }, 1500); }); // Handle touch events for mobile foodItems.forEach(item => { item.addEventListener('touchstart', function(e) { e.preventDefault(); // Close any open popup first if (activeItem && activeItem !== this) { foodPopup.classList.remove('active'); } activeItem = this; const name = this.getAttribute('data-name'); const description = this.getAttribute('data-description'); const price = this.getAttribute('data-price'); popupTitle.textContent = name; popupDescription.textContent = description; popupPrice.textContent = price; foodPopup.classList.toggle('active'); }); }); // Close popup when tapping elsewhere document.addEventListener('touchstart', function(e) { if (!e.target.closest('.food-popup') && !e.target.closest('.food-item')) { foodPopup.classList.remove('active'); activeItem = null; } }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wanderlust Explorer</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } :root { --primary: #ff7e5f; --secondary: #feb47b; --dark: #2c3e50; --light: #f9f9f9; --overlay: rgba(0, 0, 0, 0.5); } .travel-banner { position: relative; width: 100%; height: 700px; overflow: hidden; color: var(--light); } .banner-bg { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 8s ease-in-out; z-index: 1; } .overlay { position: absolute; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100%); z-index: 2; } .content-wrapper { position: relative; z-index: 3; height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; padding: 2rem; } .banner-title { font-size: 3.5rem; font-weight: 800; margin-bottom: 1rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); transform: translateY(20px); opacity: 0; animation: fadeUp 1s ease forwards 0.2s; } .banner-subtitle { font-size: 1.5rem; font-weight: 400; margin-bottom: 2rem; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); max-width: 600px; transform: translateY(20px); opacity: 0; animation: fadeUp 1s ease forwards 0.4s; } .hotspots-container { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; transform: translateY(20px); opacity: 0; animation: fadeUp 1s ease forwards 0.6s; } .hotspot { position: relative; padding: 0.75rem 1.25rem; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 50px; cursor: pointer; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.2); } .hotspot:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .hotspot-label { font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 0.5rem; } .hotspot-icon { font-size: 1.2rem; } .hotspot-details { position: absolute; top: calc(100% + 15px); left: 50%; transform: translateX(-50%) scale(0.9); width: 300px; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(10px); padding: 1.5rem; border-radius: 10px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); z-index: 10; opacity: 0; pointer-events: none; transition: all 0.3s ease; } .hotspot:hover .hotspot-details { opacity: 1; transform: translateX(-50%) scale(1); pointer-events: all; } .hotspot-details::before { content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 16px; height: 16px; background: rgba(0, 0, 0, 0.85); } .hotspot-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--secondary); } .hotspot-description { font-size: 0.9rem; margin-bottom: 1rem; line-height: 1.5; } .hotspot-stats { display: flex; justify-content: space-between; padding-top: 0.75rem; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 0.85rem; } .hotspot-stat { display: flex; flex-direction: column; align-items: center; } .hotspot-stat-value { font-weight: 700; color: var(--primary); } .explore-btn { display: inline-block; margin-top: 2rem; padding: 1rem 2rem; background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); color: white; border: none; border-radius: 50px; font-weight: 600; font-size: 1.1rem; cursor: pointer; transition: all 0.3s ease; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); transform: translateY(20px); opacity: 0; animation: fadeUp 1s ease forwards 0.8s; } .explore-btn:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); } .location-indicator { position: absolute; bottom: 1.5rem; right: 1.5rem; z-index: 5; display: flex; align-items: center; padding: 0.5rem 1rem; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); border-radius: 50px; font-size: 0.9rem; font-weight: 600; opacity: 0; animation: fadeIn 1s ease forwards 1s; } .location-indicator i { margin-right: 0.5rem; color: var(--primary); } .destinations-nav { position: absolute; bottom: 1.5rem; left: 1.5rem; z-index: 5; display: flex; gap: 0.5rem; opacity: 0; animation: fadeIn 1s ease forwards 1s; } .dest-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: all 0.3s ease; } .dest-dot.active { background: var(--primary); transform: scale(1.3); } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { to { opacity: 1; } } @media (max-width: 768px) { .banner-title { font-size: 2.5rem; } .banner-subtitle { font-size: 1.2rem; } .hotspots-container { flex-direction: column; align-items: flex-start; max-width: 100%; } .hotspot-details { width: 250px; } } @media (max-width: 480px) { .banner-title { font-size: 2rem; } .banner-subtitle { font-size: 1rem; } .explore-btn { padding: 0.75rem 1.5rem; font-size: 1rem; } } </style> </head> <body> <div class="travel-banner"> <div class="banner-bg" id="bannerBg"></div> <div class="overlay"></div> <div class="content-wrapper"> <h1 class="banner-title">Discover Hidden Paradises</h1> <p class="banner-subtitle">Unveil extraordinary destinations beyond the beaten path, crafted for authentic travelers seeking meaningful journeys.</p> <div class="hotspots-container"> <div class="hotspot" data-dest="bali"> <div class="hotspot-label"> <i class="hotspot-icon">🏝️</i> <span>Bali Hideaways</span> </div> <div class="hotspot-details"> <h3 class="hotspot-title">Jatiluwih Rice Terraces</h3> <p class="hotspot-description">Escape the crowds at these UNESCO-listed terraces in central Bali, where ancient irrigation systems create emerald-green landscapes away from Ubud's tourist circuit.</p> <div class="hotspot-stats"> <div class="hotspot-stat"> <span class="hotspot-stat-value">9.2</span> <span>Rating</span> </div> <div class="hotspot-stat"> <span class="hotspot-stat-value">$45</span> <span>Day Tour</span> </div> <div class="hotspot-stat"> <span class="hotspot-stat-value">2 hrs</span> <span>From Ubud</span> </div> </div> </div> </div> <div class="hotspot" data-dest="peru"> <div class="hotspot-label"> <i class="hotspot-icon">🏔️</i> <span>Andean Treasures</span> </div> <div class="hotspot-details"> <h3 class="hotspot-title">Rainbow Mountain Alternatives</h3> <p class="hotspot-description">Skip Vinicunca's crowds and discover Palccoyo, featuring three equally stunning rainbow mountains with a fraction of the hiking time and virtually no other tourists.</p> <div class="hotspot-stats"> <div class="hotspot-stat"> <span class="hotspot-stat-value">9.4</span> <span>Rating</span> </div> <div class="hotspot-stat"> <span class="hotspot-stat-value">$85</span> <span>Full Tour</span> </div> <div class="hotspot-stat"> <span class="hotspot-stat-value">3 hrs</span> <span>From Cusco</span> </div> </div> </div> </div> <div class="hotspot" data-dest="japan"> <div class="hotspot-label"> <i class="hotspot-icon">🏮</i> <span>Secret Japan</span> </div> <div class="hotspot-details"> <h3 class="hotspot-title">Yakushima Island</h3> <p class="hotspot-description">Explore the ancient moss-covered forest that inspired Studio Ghibli's Princess Mononoke, home to thousand-year-old cedar trees and a magical atmosphere few travelers experience.</p> <div class="hotspot-stats"> <div class="hotspot-stat"> <span class="hotspot-stat-value">9.7</span> <span>Rating</span> </div> <div class="hotspot-stat"> <span class="hotspot-stat-value">$120</span> <span>Day Pass</span> </div> <div class="hotspot-stat"> <span class="hotspot-stat-value">4 hrs</span> <span>From Kagoshima</span> </div> </div> </div> </div> </div> <button class="explore-btn">Plan Your Escape</button> </div> <div class="location-indicator"> <i>📍</i> <span id="currentLocation">Bali, Indonesia</span> </div> <div class="destinations-nav"> <div class="dest-dot active" data-dest="bali"></div> <div class="dest-dot" data-dest="peru"></div> <div class="dest-dot" data-dest="japan"></div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const destinations = { bali: { image: 'https://images.unsplash.com/photo-1537953773345-d172ccf13cf1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1350&q=80', location: 'Bali, Indonesia' }, peru: { image: 'https://images.unsplash.com/photo-1526392060635-9d6019884377?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1350&q=80', location: 'Rainbow Mountain, Peru' }, japan: { image: 'https://images.unsplash.com/photo-1545569341-9eb8b30979d9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1350&q=80', location: 'Yakushima, Japan' } }; const bannerBg = document.getElementById('bannerBg'); const currentLocation = document.getElementById('currentLocation'); const destDots = document.querySelectorAll('.dest-dot'); const hotspots = document.querySelectorAll('.hotspot'); // Initial setup bannerBg.style.backgroundImage = `url(${destinations.bali.image})`; // Add hover effect for banner background document.querySelector('.travel-banner').addEventListener('mouseenter', function() { bannerBg.style.transform = 'scale(1.05)'; }); document.querySelector('.travel-banner').addEventListener('mouseleave', function() { bannerBg.style.transform = 'scale(1)'; }); // Destination navigation destDots.forEach(dot => { dot.addEventListener('click', function() { const dest = this.getAttribute('data-dest'); // Update active state destDots.forEach(d => d.classList.remove('active')); this.classList.add('active'); // Update background and location text bannerBg.style.opacity = '0'; setTimeout(() => { bannerBg.style.backgroundImage = `url(${destinations[dest].image})`; currentLocation.textContent = destinations[dest].location; bannerBg.style.opacity = '1'; }, 300); }); }); // Hotspot click also changes destination hotspots.forEach(hotspot => { hotspot.addEventListener('click', function(e) { if (e.target.closest('.hotspot-details')) return; const dest = this.getAttribute('data-dest'); // Update active state on navigation dots destDots.forEach(dot => { if (dot.getAttribute('data-dest') === dest) { dot.classList.add('active'); } else { dot.classList.remove('active'); } }); // Update background and location text bannerBg.style.opacity = '0'; setTimeout(() => { bannerBg.style.backgroundImage = `url(${destinations[dest].image})`; currentLocation.textContent = destinations[dest].location; bannerBg.style.opacity = '1'; }, 300); }); }); // Explore button effect const exploreBtn = document.querySelector('.explore-btn'); exploreBtn.addEventListener('click', function() { this.textContent = 'Customizing Your Journey...'; setTimeout(() => { this.textContent = 'Plan Your Escape'; }, 2000); }); // Auto-rotate destinations every 6 seconds let currentDestIndex = 0; const destKeys = Object.keys(destinations); setInterval(() => { currentDestIndex = (currentDestIndex + 1) % destKeys.length; const nextDest = destKeys[currentDestIndex]; // Update active state destDots.forEach(dot => { if (dot.getAttribute('data-dest') === nextDest) { dot.classList.add('active'); } else { dot.classList.remove('active'); } }); // Update background and location bannerBg.style.opacity = '0'; setTimeout(() => { bannerBg.style.backgroundImage = `url(${destinations[nextDest].image})`; currentLocation.textContent = destinations[nextDest].location; bannerBg.style.opacity = '1'; }, 300); }, 6000); }); </script> </body> </html>
