Scroll effects can transform a mundane webpage into an engaging, interactive experience. They captivate users and enhance the overall aesthetic of a site.
From parallax scrolling to infinite scroll, these effects offer a variety of ways to keep visitors engaged. Here are 10 scroll effect examples that can elevate your web design.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Subframe's drag-and-drop interface and intuitive, responsive canvas make designing scroll effects a breeze. Loved by designers and developers alike, it ensures pixel-perfect UI every time.
Ready to elevate your web design? Start for free today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Unlock the power of Subframe to design stunning UIs with ease. From scroll effects to pixel-perfect interfaces, Subframe's drag-and-drop editor ensures efficiency and precision.
Start creating beautiful, responsive designs immediately. No coding required!
Start for free today and elevate your web design game.
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wanderlore - Extraordinary Journeys</title> <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap'); :root { --primary: #1a3c5a; --secondary: #e8a44c; --text-light: #ffffff; --text-dark: #1a1a1a; --bg-light: #f9f9f9; --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } body, html { font-family: 'Montserrat', sans-serif; overflow-x: hidden; scroll-behavior: smooth; width: 100%; height: 100%; background-color: var(--bg-light); color: var(--text-dark); } .parallax-container { height: 100vh; width: 100%; position: relative; overflow: hidden; } .parallax-layer { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; background-position: center; transition: var(--transition); } .layer-back { background-image: url('https://images.unsplash.com/photo-1518548419970-58e3b4079ab2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); z-index: 1; transform: translateZ(-5px) scale(1.5); } .layer-mid { background-image: url('https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); z-index: 2; transform: translateZ(-3px) scale(1.3); opacity: 0.9; } .layer-front { background-image: url('https://images.unsplash.com/photo-1519451241324-20b4ea2c4220?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); z-index: 3; transform: translateZ(-1px) scale(1.1); opacity: 0.7; } .gradient-overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.6) 100%); z-index: 4; } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 5; width: 90%; max-width: 600px; padding: 20px; } header { position: absolute; top: 0; left: 0; width: 100%; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; z-index: 10; } .logo { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 700; color: var(--text-light); text-decoration: none; display: flex; align-items: center; } .logo span { color: var(--secondary); } .nav-link { color: var(--text-light); text-decoration: none; margin-left: 20px; font-weight: 500; position: relative; padding-bottom: 5px; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background-color: var(--secondary); transition: var(--transition); } .nav-link:hover::after { width: 100%; } h1 { font-family: 'Playfair Display', serif; font-size: 3.5rem; font-weight: 700; margin-bottom: 15px; color: var(--text-light); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); opacity: 0; transform: translateY(20px); animation: fadeIn 0.8s forwards 0.3s; } .subtitle { font-size: 1.2rem; margin-bottom: 30px; color: var(--text-light); opacity: 0; transform: translateY(20px); animation: fadeIn 0.8s forwards 0.6s; } .search-container { background-color: rgba(255, 255, 255, 0.9); border-radius: 50px; overflow: hidden; display: flex; margin-bottom: 30px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); opacity: 0; transform: translateY(20px); animation: fadeIn 0.8s forwards 0.9s; } .search-input { flex: 1; border: none; padding: 15px 20px; background: transparent; font-size: 1rem; font-family: 'Montserrat', sans-serif; } .search-input:focus { outline: none; } .search-btn { background-color: var(--primary); border: none; color: white; padding: 15px 25px; cursor: pointer; transition: var(--transition); font-weight: 600; } .search-btn:hover { background-color: var(--secondary); } .featured-destinations { display: flex; justify-content: center; gap: 15px; margin-top: 40px; opacity: 0; transform: translateY(20px); animation: fadeIn 0.8s forwards 1.2s; } .destination-chip { background-color: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 30px; padding: 10px 20px; color: var(--text-light); backdrop-filter: blur(5px); cursor: pointer; transition: var(--transition); font-size: 0.9rem; } .destination-chip:hover { background-color: var(--secondary); border-color: var(--secondary); transform: translateY(-3px); } .scroll-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); color: var(--text-light); text-align: center; z-index: 10; font-size: 0.9rem; opacity: 0; animation: pulseOpacity 2s infinite, fadeIn 0.8s forwards 1.5s; } .scroll-indicator .arrow { display: block; width: 20px; height: 20px; border-right: 3px solid var(--text-light); border-bottom: 3px solid var(--text-light); transform: rotate(45deg); margin: 10px auto; animation: bounce 2s infinite; } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } @keyframes pulseOpacity { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: rotate(45deg) translateY(0); } 40% { transform: rotate(45deg) translateY(-10px); } 60% { transform: rotate(45deg) translateY(-5px); } } @media (max-width: 768px) { h1 { font-size: 2.5rem; } .subtitle { font-size: 1rem; } .featured-destinations { flex-wrap: wrap; } .nav-links { display: none; } } @media (max-width: 480px) { h1 { font-size: 2rem; } .search-container { flex-direction: column; border-radius: 20px; } .search-btn { width: 100%; border-radius: 0; } } /* Unique floating elements */ .floating-element { position: absolute; z-index: 4; width: 60px; height: 60px; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; backdrop-filter: blur(2px); animation: float 6s ease-in-out infinite; } .element-1 { top: 15%; left: 10%; width: 80px; height: 80px; animation-delay: 0s; } .element-2 { top: 60%; right: 15%; width: 40px; height: 40px; animation-delay: 2s; } .element-3 { bottom: 20%; left: 20%; width: 30px; height: 30px; animation-delay: 4s; } @keyframes float { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(10deg); } 100% { transform: translateY(0) rotate(0deg); } } /* Destination preview on hover */ .destination-preview { position: absolute; bottom: 90px; left: 50%; transform: translateX(-50%) scale(0.9); width: 300px; background-color: rgba(255, 255, 255, 0.95); border-radius: 12px; padding: 15px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2); opacity: 0; transition: var(--transition); z-index: 6; pointer-events: none; overflow: hidden; } .destination-preview.active { opacity: 1; transform: translateX(-50%) scale(1); } .preview-img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; margin-bottom: 10px; } .preview-title { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--primary); margin-bottom: 5px; } .preview-description { font-size: 0.85rem; color: var(--text-dark); margin-bottom: 10px; } .preview-price { font-weight: 600; color: var(--secondary); } </style> </head> <body> <div class="parallax-container"> <div class="parallax-layer layer-back"></div> <div class="parallax-layer layer-mid"></div> <div class="parallax-layer layer-front"></div> <div class="gradient-overlay"></div> <div class="floating-element element-1"></div> <div class="floating-element element-2"></div> <div class="floating-element element-3"></div> <header> <a href="#" class="logo">Wander<span>lore</span></a> <nav class="nav-links"> <a href="#" class="nav-link">Destinations</a> <a href="#" class="nav-link">Experiences</a> <a href="#" class="nav-link">Deals</a> <a href="#" class="nav-link">About</a> </nav> </header> <div class="content"> <h1>Journey Beyond the Ordinary</h1> <p class="subtitle">Discover handcrafted experiences that transform travel into stories worth telling.</p> <div class="search-container"> <input type="text" class="search-input" placeholder="Where would you like to explore?"> <button class="search-btn">Discover</button> </div> <div class="featured-destinations"> <div class="destination-chip" data-destination="santorini">Santorini</div> <div class="destination-chip" data-destination="kyoto">Kyoto</div> <div class="destination-chip" data-destination="patagonia">Patagonia</div> <div class="destination-chip" data-destination="marrakech">Marrakech</div> </div> </div> <div class="destination-preview" id="preview"> <img src="" alt="" class="preview-img"> <h3 class="preview-title"></h3> <p class="preview-description"></p> <p class="preview-price"></p> </div> <div class="scroll-indicator"> <span>Scroll to explore</span> <span class="arrow"></span> </div> </div> <script> // Parallax scrolling effect document.addEventListener('DOMContentLoaded', () => { const container = document.querySelector('.parallax-container'); const layerBack = document.querySelector('.layer-back'); const layerMid = document.querySelector('.layer-mid'); const layerFront = document.querySelector('.layer-front'); window.addEventListener('scroll', () => { const scrollY = window.scrollY; layerBack.style.transform = `translateY(${scrollY * 0.1}px)`; layerMid.style.transform = `translateY(${scrollY * 0.2}px)`; layerFront.style.transform = `translateY(${scrollY * 0.3}px)`; }); // Mouse parallax effect for additional depth container.addEventListener('mousemove', (e) => { const mouseX = e.clientX; const mouseY = e.clientY; const windowWidth = window.innerWidth; const windowHeight = window.innerHeight; const moveX = (mouseX - windowWidth / 2) / 50; const moveY = (mouseY - windowHeight / 2) / 50; layerBack.style.transform = `translate(${-moveX * 0.5}px, ${-moveY * 0.5}px)`; layerMid.style.transform = `translate(${-moveX * 1}px, ${-moveY * 1}px)`; layerFront.style.transform = `translate(${-moveX * 1.5}px, ${-moveY * 1.5}px)`; }); }); // Destination preview functionality const destinationData = { santorini: { image: "https://images.unsplash.com/photo-1570077188670-e3a8d69ac5ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80", title: "Santorini, Greece", description: "Iconic whitewashed villages perched on volcanic cliffs overlooking the azure Aegean Sea.", price: "From $1,299 per person" }, kyoto: { image: "https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80", title: "Kyoto, Japan", description: "Ancient temples, sublime gardens, and geisha traditions in Japan's cultural heart.", price: "From $1,599 per person" }, patagonia: { image: "https://images.unsplash.com/photo-1531798123643-26d5aae06071?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80", title: "Patagonia, Argentina & Chile", description: "Epic landscapes with jagged mountain peaks, pristine glaciers and diverse wildlife.", price: "From $2,099 per person" }, marrakech: { image: "https://images.unsplash.com/photo-1548759806-821effb9e8b6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80", title: "Marrakech, Morocco", description: "A sensory feast of bustling souks, ornate palaces, and tranquil riads in the Red City.", price: "From $899 per person" } }; const destinationChips = document.querySelectorAll('.destination-chip'); const preview = document.getElementById('preview'); const previewImg = preview.querySelector('.preview-img'); const previewTitle = preview.querySelector('.preview-title'); const previewDescription = preview.querySelector('.preview-description'); const previewPrice = preview.querySelector('.preview-price'); destinationChips.forEach(chip => { chip.addEventListener('mouseenter', () => { const destination = chip.dataset.destination; const data = destinationData[destination]; previewImg.src = data.image; previewImg.alt = data.title; previewTitle.textContent = data.title; previewDescription.textContent = data.description; previewPrice.textContent = data.price; preview.classList.add('active'); }); chip.addEventListener('mouseleave', () => { preview.classList.remove('active'); }); }); // Prevent form submission const searchBtn = document.querySelector('.search-btn'); searchBtn.addEventListener('click', (e) => { e.preventDefault(); const searchInput = document.querySelector('.search-input'); if (searchInput.value.trim() !== '') { searchInput.value = ''; searchInput.placeholder = 'Great choice! Explore our destinations below.'; setTimeout(() => { searchInput.placeholder = 'Where would you like to explore?'; }, 3000); } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interactive News Storytelling</title> <style> :root { --primary-color: #1a2a3a; --secondary-color: #e63946; --text-color: #333; --light-color: #f8f9fa; --accent-color: #457b9d; --transition-duration: 0.8s; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Helvetica Neue', Arial, sans-serif; color: var(--text-color); background-color: var(--light-color); line-height: 1.6; overflow-x: hidden; height: 100vh; } .story-container { width: 100%; max-width: 700px; margin: 0 auto; position: relative; overflow: hidden; height: 700px; } .progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: rgba(255, 255, 255, 0.2); z-index: 100; } .progress-bar { height: 100%; background: var(--secondary-color); width: 0%; transition: width 0.3s ease; } .story-section { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; position: relative; overflow: hidden; } .story-content { position: relative; z-index: 2; opacity: 0; transform: translateY(50px); transition: opacity var(--transition-duration), transform var(--transition-duration); max-width: 600px; background: rgba(255, 255, 255, 0.9); padding: 2rem; border-radius: 8px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } .story-section.active .story-content { opacity: 1; transform: translateY(0); } .story-title { font-size: 2.5rem; color: var(--primary-color); margin-bottom: 1.5rem; font-weight: 800; line-height: 1.2; position: relative; } .story-title::after { content: ''; position: absolute; left: 0; bottom: -10px; width: 60px; height: 4px; background-color: var(--secondary-color); transition: width 0.5s ease; } .story-section.active .story-title::after { width: 120px; } .story-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1); transition: opacity var(--transition-duration), transform var(--transition-duration); z-index: 1; } .story-section.active .story-image { opacity: 1; transform: scale(1); } .story-text { font-size: 1.1rem; margin-bottom: 1.5rem; line-height: 1.8; } .story-quote { font-size: 1.3rem; font-style: italic; font-weight: 500; color: var(--accent-color); border-left: 4px solid var(--secondary-color); padding-left: 1rem; margin: 2rem 0; } .stat-box { background: var(--primary-color); color: white; padding: 1.5rem; border-radius: 8px; margin: 2rem 0; position: relative; overflow: hidden; } .stat-box::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, var(--secondary-color) 0%, transparent 40%); opacity: 0.2; } .stat-number { font-size: 3rem; font-weight: 800; line-height: 1; margin-bottom: 0.5rem; color: var(--light-color); opacity: 0; transform: translateY(20px); transition: opacity 1s ease, transform 1s ease; transition-delay: 0.3s; } .story-section.active .stat-number { opacity: 1; transform: translateY(0); } .stat-label { font-size: 1rem; opacity: 0.8; } .highlight { color: var(--secondary-color); font-weight: 600; } .navigation-dots { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 100; } .nav-dot { width: 12px; height: 12px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; cursor: pointer; transition: all 0.3s ease; position: relative; } .nav-dot.active { background-color: var(--secondary-color); transform: scale(1.3); } .nav-dot:hover::after { content: attr(data-label); position: absolute; right: 24px; top: 0; background: var(--secondary-color); color: white; padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; white-space: nowrap; } .scroll-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); animation: bounce 2s infinite; z-index: 10; opacity: 0.8; color: var(--secondary-color); font-size: 0.9rem; font-weight: 600; text-align: center; } .scroll-indicator svg { width: 30px; height: auto; display: block; margin: 5px auto; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); } 40% { transform: translateY(-10px) translateX(-50%); } 60% { transform: translateY(-5px) translateX(-50%); } } .interactive-element { position: relative; background-color: rgba(255, 255, 255, 0.8); padding: 1rem; border-radius: 8px; margin-top: 1.5rem; cursor: pointer; transition: all 0.3s ease; overflow: hidden; } .interactive-element:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .interactive-element::after { content: '↓ Click to reveal more'; position: absolute; bottom: 10px; right: 10px; font-size: 0.75rem; color: var(--accent-color); transition: opacity 0.3s ease; } .interactive-element.expanded::after { opacity: 0; } .hidden-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease; } .interactive-element.expanded .hidden-content { max-height: 500px; } /* Responsive styles */ @media (max-width: 768px) { .story-title { font-size: 2rem; } .story-content { padding: 1.5rem; } .story-text { font-size: 1rem; } .stat-number { font-size: 2.5rem; } .navigation-dots { right: 10px; } } @media (max-width: 480px) { .story-content { padding: 1rem; margin: 0 0.5rem; } .story-title { font-size: 1.8rem; } .story-quote { font-size: 1.1rem; } .navigation-dots { display: none; } } </style> </head> <body> <div class="progress-container"> <div class="progress-bar" id="progressBar"></div> </div> <div class="navigation-dots" id="navigationDots"> <!-- Navigation dots will be added dynamically --> </div> <div class="story-container" id="storyContainer"> <section class="story-section" id="section1"> <img src="https://images.unsplash.com/photo-1585776245991-cf89dd7fc73a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Arctic glaciers" class="story-image"> <div class="story-content"> <h1 class="story-title">Arctic Ice: The Silent Sentinel of Our Climate</h1> <p class="story-text">For millennia, Arctic ice has regulated our planet's temperature. Now, as it recedes at unprecedented rates, scientists race to understand the global implications before it's too late.</p> <p class="story-text">Scroll through this interactive report to discover how the changing Arctic is already affecting communities worldwide, and what the latest research reveals about our climate future.</p> </div> <div class="scroll-indicator"> <span>Scroll to continue</span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 5v14M5 12l7 7 7-7"/> </svg> </div> </section> <section class="story-section" id="section2"> <img src="https://images.unsplash.com/photo-1503198515498-d0bd9ed16902?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2088&q=80" alt="Melting ice cap" class="story-image"> <div class="story-content"> <h2 class="story-title">The Accelerating Melt</h2> <p class="story-text">In just the past 30 years, the Arctic has lost <span class="highlight">75% of its summer ice volume</span>. This isn't just concerning — it's transforming our planet's climate systems.</p> <div class="stat-box"> <div class="stat-number">13.1%</div> <div class="stat-label">Arctic sea ice decline per decade since 1979</div> </div> <p class="story-text">Dr. Maja Petersen, a glaciologist with 20 years of field research, puts it bluntly: "What happens in the Arctic doesn't stay in the Arctic. The disruption of these ancient ice patterns is already triggering weather extremes far beyond polar regions."</p> <div class="interactive-element" id="interactive1"> <h3>Why Ice Matters</h3> <p>Ice reflects up to 90% of sunlight back to space, while open water absorbs 90% of that heat.</p> <div class="hidden-content"> <p>This creates a dangerous positive feedback loop: less ice means more heat absorption, which means faster melting, and even less ice. Scientists call this the "Arctic amplification" effect.</p> <p>Recent data shows the Arctic is warming at <span class="highlight">four times the global average</span> rate, accelerating far beyond previous climate models.</p> </div> </div> </div> </section> <section class="story-section" id="section3"> <img src="https://images.unsplash.com/photo-1504208434309-cb69f4fe52b0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Coastal flooding" class="story-image"> <div class="story-content"> <h2 class="story-title">Global Consequences</h2> <p class="story-text">From disrupted jet streams to rising sea levels, the effects ripple across hemispheres, creating what researchers now call "weather whiplash."</p> <blockquote class="story-quote"> The Arctic is the air conditioner of the Northern Hemisphere. When it breaks down, the whole system falls into disarray. </blockquote> <p class="story-text">Communities from Miami to Mumbai are already experiencing more frequent flooding as sea levels rise. Meanwhile, agricultural belts face increasingly unpredictable growing seasons, threatening food security for millions.</p> <div class="interactive-element" id="interactive2"> <h3>The Jet Stream Effect</h3> <p>The polar jet stream—a river of fast-moving air that influences weather patterns—is becoming more erratic.</p> <div class="hidden-content"> <p>Traditionally, the temperature difference between the Arctic and mid-latitudes kept the jet stream flowing in a relatively straight path. With Arctic warming, this difference has decreased.</p> <p>The result: a wavier jet stream that allows cold polar air to plunge farther south (creating extreme winter events) while pulling warm air farther north (creating heat waves and accelerating melt).</p> </div> </div> </div> </section> <section class="story-section" id="section4"> <img src="https://images.unsplash.com/photo-1532939624-3af1308db9a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2068&q=80" alt="Arctic research station" class="story-image"> <div class="story-content"> <h2 class="story-title">Racing Against Time</h2> <p class="story-text">For the first time in human history, the Arctic Ocean could be virtually ice-free in summer within decades. Yet despite alarming projections, researchers see reasons for cautious hope.</p> <div class="stat-box"> <div class="stat-number">2035</div> <div class="stat-label">Earliest projected year for ice-free Arctic summers</div> </div> <p class="story-text">Advanced monitoring technologies are providing unprecedented data. From NASA's IceSat-2 satellite to autonomous underwater drones, scientists now track changes with millimeter-precision, helping refine climate models and inform policy decisions.</p> <p class="story-text">Community-based monitoring programs in Inuit territories are combining traditional knowledge with scientific methods, creating more robust understanding of these complex systems.</p> <div class="interactive-element" id="interactive3"> <h3>Adaptation Strategies</h3> <p>Countries are developing specialized approaches to navigate the new Arctic reality.</p> <div class="hidden-content"> <p>The Netherlands has pioneered floating communities and advanced flood management systems that are now being adopted globally.</p> <p>Alaska Native communities are documenting ice pattern changes through indigenous knowledge systems, creating early warning networks that help protect coastal villages.</p> <p>Agricultural researchers are developing crop varieties that can withstand more variable conditions, helping secure food systems in uncertain times.</p> </div> </div> </div> </section> </div> <script> document.addEventListener('DOMContentLoaded', function() { const sections = document.querySelectorAll('.story-section'); const progressBar = document.getElementById('progressBar'); const navigationDots = document.getElementById('navigationDots'); const storyContainer = document.getElementById('storyContainer'); const interactiveElements = document.querySelectorAll('.interactive-element'); // Create navigation dots sections.forEach((section, index) => { const dot = document.createElement('div'); dot.classList.add('nav-dot'); dot.setAttribute('data-index', index); dot.setAttribute('data-label', section.querySelector('.story-title').textContent); navigationDots.appendChild(dot); dot.addEventListener('click', () => { window.scrollTo({ top: section.offsetTop, behavior: 'smooth' }); }); }); const navDots = document.querySelectorAll('.nav-dot'); // Handle interactive elements interactiveElements.forEach(element => { element.addEventListener('click', function() { this.classList.toggle('expanded'); }); }); // Function to check which section is in view function checkSections() { const scrollPosition = window.scrollY; const windowHeight = window.innerHeight; const documentHeight = document.body.scrollHeight; // Update progress bar const scrollPercentage = (scrollPosition / (documentHeight - windowHeight)) * 100; progressBar.style.width = `${scrollPercentage}%`; // Check each section sections.forEach((section, index) => { const sectionTop = section.offsetTop; const sectionHeight = section.offsetHeight; if (scrollPosition >= sectionTop - windowHeight * 0.5 && scrollPosition < sectionTop + sectionHeight - windowHeight * 0.5) { section.classList.add('active'); navDots[index].classList.add('active'); } else { section.classList.remove('active'); navDots[index].classList.remove('active'); } }); } // Set up smooth scroll behavior within our container let lastScrollTop = 0; let isScrolling = false; let targetScrollPosition = 0; const scrollSpeed = 0.05; // Adjust for smoother or faster scrolling function smoothScroll() { if (!isScrolling) return; const currentScrollPosition = window.scrollY; const scrollDifference = targetScrollPosition - currentScrollPosition; if (Math.abs(scrollDifference) < 1) { isScrolling = false; return; } window.scrollTo(0, currentScrollPosition + scrollDifference * scrollSpeed); requestAnimationFrame(smoothScroll); } window.addEventListener('scroll', function() { checkSections(); // Set target position for smooth scrolling targetScrollPosition = window.scrollY; if (!isScrolling) { isScrolling = true; smoothScroll(); } }); // Initialize checkSections(); // Ensure the first section is active when the page loads sections[0].classList.add('active'); navDots[0].classList.add('active'); // Handle resize events window.addEventListener('resize', checkSections); // Optional: Parallax effect for images window.addEventListener('scroll', function() { const scrollPosition = window.scrollY; document.querySelectorAll('.story-image').forEach((image, index) => { const section = sections[index]; const sectionTop = section.offsetTop; const distanceFromTop = scrollPosition - sectionTop; if (distanceFromTop > -window.innerHeight && distanceFromTop < window.innerHeight) { const parallaxValue = distanceFromTop * 0.2; image.style.transform = `scale(1.1) translateY(${parallaxValue}px)`; } }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Designer Portfolio Showcase</title> <style> :root { --primary: #6f42c1; --secondary: #2a9d8f; --accent: #e76f51; --light: #f8f9fa; --dark: #212529; --text: #495057; --transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background: linear-gradient(135deg, #f6f9fc, #edf2f7); color: var(--text); overflow-x: hidden; height: 100%; width: 100%; } .container { max-width: 700px; margin: 0 auto; padding: 1.5rem; height: 700px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--primary) var(--light); } .container::-webkit-scrollbar { width: 6px; } .container::-webkit-scrollbar-track { background: var(--light); } .container::-webkit-scrollbar-thumb { background-color: var(--primary); border-radius: 6px; } header { padding: 1rem 0 2rem; } h1 { font-size: 2.2rem; margin-bottom: 0.5rem; background: linear-gradient(90deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; position: relative; } h1::after { content: ""; position: absolute; bottom: -6px; left: 0; width: 50px; height: 3px; background: var(--accent); border-radius: 3px; } p { line-height: 1.6; margin-bottom: 1rem; } .subtitle { font-size: 1.1rem; color: var(--primary); font-weight: 500; } .portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; } .project { border-radius: 12px; background: white; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05); overflow: hidden; transform: translateY(40px); opacity: 0; transition: all var(--transition); position: relative; height: 200px; cursor: pointer; } .project.visible { transform: translateY(0); opacity: 1; } .project.expanded { height: 320px; grid-column: span 2; } .project-thumb { height: 140px; width: 100%; background-size: cover; background-position: center; transition: all var(--transition); } .project.expanded .project-thumb { height: 180px; } .project-content { padding: 1rem; transform: translateY(0); transition: all var(--transition); } .project-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--dark); transition: all var(--transition); } .project.expanded .project-title { font-size: 1.4rem; } .project-category { display: inline-block; font-size: 0.7rem; background: var(--light); color: var(--primary); padding: 0.3rem 0.7rem; border-radius: 20px; font-weight: 500; margin-bottom: 0.5rem; } .project-desc { font-size: 0.85rem; color: var(--text); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; transition: all var(--transition); margin-top: 0.5rem; } .project.expanded .project-desc { -webkit-line-clamp: 5; margin-top: 1rem; } .project-meta { display: flex; align-items: center; margin-top: 1rem; opacity: 0; height: 0; overflow: hidden; transition: all var(--transition); } .project.expanded .project-meta { opacity: 1; height: auto; } .meta-item { display: flex; align-items: center; margin-right: 1rem; font-size: 0.8rem; } .meta-item svg { margin-right: 0.3rem; fill: var(--primary); } .tools { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; opacity: 0; height: 0; overflow: hidden; transition: all var(--transition); } .project.expanded .tools { opacity: 1; height: auto; } .tool { font-size: 0.7rem; background: rgba(111, 66, 193, 0.1); color: var(--primary); padding: 0.3rem 0.6rem; border-radius: 4px; } .toggle-expand { position: absolute; bottom: 10px; right: 10px; width: 24px; height: 24px; background: var(--light); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); border: none; outline: none; } .toggle-expand:hover { background: var(--primary); transform: scale(1.1); } .toggle-expand svg { width: 12px; height: 12px; transition: all var(--transition); fill: var(--primary); } .toggle-expand:hover svg { fill: white; } .project.expanded .toggle-expand svg { transform: rotate(45deg); } .cursor { position: fixed; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--primary); margin-left: -20px; margin-top: -20px; transition: transform 0.2s ease-out; pointer-events: none; z-index: 9999; mix-blend-mode: difference; opacity: 0; } .cursor-dot { position: fixed; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; margin-left: -4px; margin-top: -4px; pointer-events: none; z-index: 9999; transition: all 0.1s ease; opacity: 0; } .circle-bg { position: fixed; top: -50vh; left: -50vh; width: 100vh; height: 100vh; border-radius: 50%; background: radial-gradient(circle, rgba(111, 66, 193, 0.05) 0%, rgba(255, 255, 255, 0) 70%); pointer-events: none; z-index: -1; } .filters { display: flex; gap: 0.8rem; margin: 1.5rem 0; flex-wrap: wrap; } .filter-btn { padding: 0.5rem 1rem; background: none; border: 1px solid rgba(111, 66, 193, 0.2); border-radius: 30px; color: var(--text); cursor: pointer; font-size: 0.85rem; transition: all 0.3s; position: relative; overflow: hidden; z-index: 1; } .filter-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, var(--primary), var(--secondary)); transition: all 0.3s; z-index: -1; } .filter-btn:hover { color: white; border-color: transparent; } .filter-btn:hover::before { left: 0; } .filter-btn.active { background: linear-gradient(90deg, var(--primary), var(--secondary)); color: white; border-color: transparent; } @media (max-width: 600px) { .portfolio-grid { grid-template-columns: 1fr; } .project.expanded { grid-column: auto; height: 340px; } h1 { font-size: 1.8rem; } .subtitle { font-size: 1rem; } .filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: none; } .filters::-webkit-scrollbar { display: none; } .filter-btn { flex-shrink: 0; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } header { animation: fadeIn 0.8s forwards; } .filters { animation: fadeIn 0.8s 0.2s forwards; opacity: 0; transform: translateY(20px); } </style> </head> <body> <div class="container"> <header> <h1>Creative Portfolio</h1> <p class="subtitle">Innovative design solutions that transform ideas into experiences</p> <p>A curated collection of my most impactful projects across digital product design, branding, and interactive experiences. Each piece represents a unique challenge solved through thoughtful design thinking.</p> </header> <div class="filters"> <button class="filter-btn active" data-filter="all">All Projects</button> <button class="filter-btn" data-filter="ux">UX/UI Design</button> <button class="filter-btn" data-filter="branding">Branding</button> <button class="filter-btn" data-filter="web">Web Design</button> <button class="filter-btn" data-filter="motion">Motion</button> </div> <div class="portfolio-grid"> <div class="project" data-category="ux web"> <div class="project-thumb" style="background-image: url('https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80');"></div> <div class="project-content"> <span class="project-category">UX/UI Design</span> <h3 class="project-title">Fintech Dashboard Redesign</h3> <p class="project-desc">Complete overhaul of a fintech platform's dashboard, improving user comprehension of complex financial data through intuitive visualizations and streamlined information architecture.</p> <div class="project-meta"> <div class="meta-item"> <svg width="16" height="16" viewBox="0 0 24 24"> <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z" /> </svg> <span>10 Weeks</span> </div> <div class="meta-item"> <svg width="16" height="16" viewBox="0 0 24 24"> <path d="M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2M17,13H11V7H13V11H17V13Z" /> </svg> <span>2023</span> </div> </div> <div class="tools"> <span class="tool">Figma</span> <span class="tool">Prototyping</span> <span class="tool">User Testing</span> <span class="tool">Data Visualization</span> </div> </div> <button class="toggle-expand"> <svg viewBox="0 0 24 24"> <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /> </svg> </button> </div> <div class="project" data-category="branding"> <div class="project-thumb" style="background-image: url('https://images.unsplash.com/photo-1634942536962-d45ef5a07bef?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80');"></div> <div class="project-content"> <span class="project-category">Branding</span> <h3 class="project-title">Eco Startup Identity</h3> <p class="project-desc">Brand identity system for a sustainability-focused tech startup that needed to balance innovation with environmental consciousness. The result is a flexible yet consistent visual language that scales across digital and physical touchpoints.</p> <div class="project-meta"> <div class="meta-item"> <svg width="16" height="16" viewBox="0 0 24 24"> <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z" /> </svg> <span>8 Weeks</span> </div> <div class="meta-item"> <svg width="16" height="16" viewBox="0 0 24 24"> <path d="M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2M17,13H11V7H13V11H17V13Z" /> </svg> <span>2022</span> </div> </div> <div class="tools"> <span class="tool">Illustrator</span> <span class="tool">Brand Strategy</span> <span class="tool">Typography</span> <span class="tool">Color Theory</span> </div> </div> <button class="toggle-expand"> <svg viewBox="0 0 24 24"> <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /> </svg> </button> </div> <div class="project" data-category="web"> <div class="project-thumb" style="background-image: url('https://images.unsplash.com/photo-1565106430482-8f6e74349ca1?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80');"></div> <div class="project-content"> <span class="project-category">Web Design</span> <h3 class="project-title">Publishing Platform</h3> <p class="project-desc">A responsive web platform for independent writers to publish and monetize their work. The focus was on creating a distraction-free reading environment while incorporating subtle monetization opportunities.</p> <div class="project-meta"> <div class="meta-item"> <svg width="16" height="16" viewBox="0 0 24 24"> <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z" /> </svg> <span>12 Weeks</span> </div> <div class="meta-item"> <svg width="16" height="16" viewBox="0 0 24 24"> <path d="M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2M17,13H11V7H13V11H17V13Z" /> </svg> <span>2023</span> </div> </div> <div class="tools"> <span class="tool">Webflow</span> <span class="tool">Responsive Design</span> <span class="tool">CSS Animation</span> <span class="tool">Typography</span> </div> </div> <button class="toggle-expand"> <svg viewBox="0 0 24 24"> <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /> </svg> </button> </div> <div class="project" data-category="motion ux"> <div class="project-thumb" style="background-image: url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80');"></div> <div class="project-content"> <span class="project-category">Motion Design</span> <h3 class="project-title">Interactive Onboarding</h3> <p class="project-desc">A series of microinteractions and motion design elements for a health app's onboarding flow. The animations guide users through complex signup procedures while maintaining engagement and reducing drop-off rates.</p> <div class="project-meta"> <div class="meta-item"> <svg width="16" height="16" viewBox="0 0 24 24"> <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z" /> </svg> <span>6 Weeks</span> </div> <div class="meta-item"> <svg width="16" height="16" viewBox="0 0 24 24"> <path d="M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2M17,13H11V7H13V11H17V13Z" /> </svg> <span>2022</span> </div> </div> <div class="tools"> <span class="tool">After Effects</span> <span class="tool">Lottie</span> <span class="tool">Principle</span> <span class="tool">Micro-animations</span> </div> </div> <button class="toggle-expand"> <svg viewBox="0 0 24 24"> <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /> </svg> </button> </div> <div class="project" data-category="ux web"> <div class="project-thumb" style="background-image: url('https://images.unsplash.com/photo-1545235617-9465d2a55698?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80');"></div> <div class="project-content"> <span class="project-category">UX/UI Design</span> <h3 class="project-title">Smart Home Control</h3> <p class="project-desc">A smart home control interface that balances advanced functionality with simplicity. The system provides quick access to common controls while organizing more complex features in an intuitive hierarchy.</p> <div class="project-meta"> <div class="meta-item"> <svg width="16" height="16" viewBox="0 0 24 24"> <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z" /> </svg> <span>14 Weeks</span> </div> <div class="meta-item"> <svg width="16" height="16" viewBox="0 0 24 24"> <path d="M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2M17,13H11V7H13V11H17V13Z" /> </svg> <span>2023</span> </div> </div> <div class="tools"> <span class="tool">Figma</span> <span class="tool">User Testing</span> <span class="tool">Usability</span> <span class="tool">Interaction Design</span> </div> </div> <button class="toggle-expand"> <svg viewBox="0 0 24 24"> <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /> </svg> </button> </div> <div class="project" data-category="branding motion"> <div class="project-thumb" style="background-image: url('https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80');"></div> <div class="project-content"> <span class="project-category">Motion Branding</span> <h3 class="project-title">Kinetic Identity</h3> <p class="project-desc">A dynamic brand identity system for an arts festival that comes alive through motion. The system adapts to different formats while maintaining core visual principles and expressing the festival's creative energy.</p> <div class="project-meta"> <div class="meta-item"> <svg width="16" height="16" viewBox="0 0 24 24"> <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z" /> </svg> <span>9 Weeks</span> </div> <div class="meta-item"> <svg width="16" height="16" viewBox="0 0 24 24"> <path d="M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2M17,13H11V7H13V11H17V13Z" /> </svg> <span>2022</span> </div> </div> <div class="tools"> <span class="tool">After Effects</span> <span class="tool">Cinema 4D</span> <span class="tool">Illustrator</span> <span class="tool">Brand Guidelines</span> </div> </div> <button class="toggle-expand"> <svg viewBox="0 0 24 24"> <path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" /> </svg> </button> </div> </div> </div> <div class="cursor"></div> <div class="cursor-dot"></div> <div class="circle-bg"></div> <script> document.addEventListener('DOMContentLoaded', function() { // Custom cursor const cursor = document.querySelector('.cursor'); const cursorDot = document.querySelector('.cursor-dot'); const circleBg = document.querySelector('.circle-bg'); document.addEventListener('mousemove', function(e) { cursor.style.opacity = '1'; cursorDot.style.opacity = '1'; // Add slight delay to the main cursor for smoother effect setTimeout(() => { cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`; }, 50); // The dot follows cursor immediately cursorDot.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`; // Move background circle circleBg.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`; }); document.addEventListener('mouseout', function() { cursor.style.opacity = '0'; cursorDot.style.opacity = '0'; }); // Scroll animations for projects const projects = document.querySelectorAll('.project'); const container = document.querySelector('.container'); function checkScroll() { projects.forEach(project => { const projectTop = project.getBoundingClientRect().top; const projectBottom = project.getBoundingClientRect().bottom; const windowHeight = container.clientHeight; if (projectTop < windowHeight - 100 && projectBottom > 0) { project.classList.add('visible'); } else { project.classList.remove('visible'); } }); } // Check initial position setTimeout(checkScroll, 300); // Update on scroll container.addEventListener('scroll', checkScroll); // Project expansion projects.forEach(project => { const toggleBtn = project.querySelector('.toggle-expand'); toggleBtn.addEventListener('click', function(e) { e.stopPropagation(); project.classList.toggle('expanded'); // If it's expanded, scroll to it if (project.classList.contains('expanded')) { // Close any other expanded projects projects.forEach(p => { if (p !== project && p.classList.contains('expanded')) { p.classList.remove('expanded'); } }); // Scroll to this project setTimeout(() => { project.scrollIntoView({ behavior: 'smooth', block: 'center' }); }, 100); } }); // Allow clicking on the entire project to expand project.addEventListener('click', function() { if (!project.classList.contains('expanded')) { project.classList.add('expanded'); // Close any other expanded projects projects.forEach(p => { if (p !== project && p.classList.contains('expanded')) { p.classList.remove('expanded'); } }); } }); }); // Filters functionality const filterBtns = document.querySelectorAll('.filter-btn'); filterBtns.forEach(btn => { btn.addEventListener('click', function() { // Remove active class from all buttons filterBtns.forEach(b => b.classList.remove('active')); // Add active class to current button btn.classList.add('active'); const filter = btn.getAttribute('data-filter'); // Filter projects projects.forEach(project => { const categories = project.getAttribute('data-category').split(' '); if (filter === 'all' || categories.includes(filter)) { project.style.display = 'block'; } else { project.style.display = 'none'; } // Close expanded projects when filtering project.classList.remove('expanded'); }); // Recheck visibility after filtering setTimeout(checkScroll, 300); }); }); // Cursor interaction with clickable elements const clickables = document.querySelectorAll('button, .project'); clickables.forEach(el => { el.addEventListener('mouseenter', () => { cursor.style.transform = 'scale(0.5)'; cursorDot.style.transform = `translate(${parseInt(cursorDot.style.transform.split('(')[1])}px, ${parseInt(cursorDot.style.transform.split(', ')[1])}px) scale(2.5)`; }); el.addEventListener('mouseleave', () => { cursor.style.transform = 'scale(1)'; cursorDot.style.transform = `translate(${parseInt(cursorDot.style.transform.split('(')[1])}px, ${parseInt(cursorDot.style.transform.split(', ')[1])}px) scale(1)`; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Global Climate Data Insights</title> <style> :root { --primary: #2d4059; --secondary: #ea5455; --tertiary: #f07b3f; --light: #ffd460; --background: #f5f5f5; --text: #333; --card-bg: #ffffff; --shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: var(--background); color: var(--text); overflow-x: hidden; line-height: 1.6; } .dashboard { width: 100%; max-width: 700px; height: 700px; margin: 0 auto; overflow-y: auto; overflow-x: hidden; position: relative; scrollbar-width: thin; scrollbar-color: var(--tertiary) var(--background); } .dashboard::-webkit-scrollbar { width: 8px; } .dashboard::-webkit-scrollbar-track { background: var(--background); } .dashboard::-webkit-scrollbar-thumb { background-color: var(--tertiary); border-radius: 10px; } header { background: var(--primary); color: white; padding: 1.5rem; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow); } h1 { font-size: 1.8rem; margin-bottom: 0.5rem; } .subtitle { font-size: 0.9rem; opacity: 0.8; } .stats-summary { display: flex; justify-content: space-between; padding: 1rem; margin-top: 1rem; background: rgba(255, 255, 255, 0.1); border-radius: 8px; } .stat-item { text-align: center; } .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--light); } .stat-label { font-size: 0.8rem; opacity: 0.8; } .section { padding: 2rem 1.5rem; background: var(--card-bg); margin: 1.5rem; border-radius: 12px; box-shadow: var(--shadow); opacity: 0.3; transform: translateY(40px); transition: all 0.8s ease-out; } .section.visible { opacity: 1; transform: translateY(0); } .section-title { font-size: 1.4rem; color: var(--primary); margin-bottom: 1.5rem; display: flex; align-items: center; } .section-title::before { content: ''; width: 12px; height: 12px; background: var(--secondary); display: inline-block; margin-right: 8px; border-radius: 50%; } .chart-container { position: relative; height: 220px; margin: 1rem 0; } .chart-labels { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.8rem; color: #777; } .chart-bar { position: absolute; bottom: 0; width: 10%; background: var(--secondary); border-radius: 4px 4px 0 0; transform: scaleY(0); transform-origin: bottom; transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1); } .legend { display: flex; flex-wrap: wrap; margin-top: 1rem; gap: 1rem; } .legend-item { display: flex; align-items: center; font-size: 0.85rem; } .legend-color { width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; } .tooltip { position: absolute; background: var(--primary); color: white; padding: 0.5rem; border-radius: 4px; font-size: 0.8rem; pointer-events: none; opacity: 0; transition: opacity 0.3s; z-index: 10; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); max-width: 150px; } .donut-chart { position: relative; width: 200px; height: 200px; margin: 0 auto; } .donut-segment { position: absolute; width: 100%; height: 100%; clip-path: polygon(50% 50%, 100% 0, 100% 100%); transform-origin: center; transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1); } .donut-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-weight: 700; font-size: 1.2rem; } .donut-label span { display: block; font-size: 0.8rem; opacity: 0.7; font-weight: 400; } .line-chart { position: relative; height: 200px; width: 100%; margin-top: 1rem; } .line-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 2s ease-out; fill: none; stroke: var(--tertiary); stroke-width: 3; } .line-point { fill: white; stroke: var(--tertiary); stroke-width: 2; r: 4; transition: opacity 0.5s, transform 0.3s; opacity: 0; cursor: pointer; } .line-point:hover { transform: scale(1.5); } .grid-line { stroke: #e0e0e0; stroke-width: 1; } .insights { margin-top: 1rem; padding: 1rem; background: rgba(240, 123, 63, 0.1); border-left: 3px solid var(--tertiary); border-radius: 0 4px 4px 0; } .insight-title { font-weight: 600; margin-bottom: 0.5rem; color: var(--tertiary); } footer { text-align: center; padding: 1.5rem; font-size: 0.8rem; color: #777; margin-top: 1rem; } /* Animation for the chart bars */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse { animation: pulse 2s infinite; } .progress-indicator { position: fixed; top: 0; left: 0; height: 4px; background: var(--secondary); z-index: 1000; width: 0%; transition: width 0.3s ease; } @media (max-width: 500px) { .stats-summary { flex-wrap: wrap; } .stat-item { width: 50%; margin-bottom: 1rem; } .section { padding: 1.5rem 1rem; margin: 1rem 0.8rem; } .chart-container { height: 180px; } } </style> </head> <body> <div class="progress-indicator"></div> <div class="dashboard" id="dashboard"> <header> <h1>Global Climate Data Insights</h1> <p class="subtitle">Interactive visualization of climate change metrics (2000-2023)</p> <div class="stats-summary"> <div class="stat-item"> <div class="stat-value">1.1°C</div> <div class="stat-label">Temp Increase</div> </div> <div class="stat-item"> <div class="stat-value">417</div> <div class="stat-label">CO₂ PPM</div> </div> <div class="stat-item"> <div class="stat-value">3.6mm</div> <div class="stat-label">Sea Level Rise/Year</div> </div> <div class="stat-item"> <div class="stat-value">-13%</div> <div class="stat-label">Arctic Ice</div> </div> </div> </header> <section class="section" id="section1"> <h2 class="section-title">Annual Temperature Anomalies</h2> <p>Global temperature deviation from 20th century average (°C), showing accelerating warming trends in recent decades.</p> <div class="chart-container" id="barChart"> <!-- Bars will be inserted by JS --> </div> <div class="chart-labels"> <span>2000</span> <span>2005</span> <span>2010</span> <span>2015</span> <span>2020</span> <span>2023</span> </div> <div class="legend"> <div class="legend-item"> <div class="legend-color" style="background: var(--secondary);"></div> <span>Temperature Anomaly (°C)</span> </div> <div class="legend-item"> <div class="legend-color" style="background: #cccccc;"></div> <span>Pre-2000 Average</span> </div> </div> <div class="insights"> <h3 class="insight-title">Key Insight</h3> <p>Eight of the ten warmest years on record have occurred since 2015, with 2023 being the warmest year ever recorded. This clear upward trend aligns with increasing greenhouse gas concentrations.</p> </div> </section> <section class="section" id="section2"> <h2 class="section-title">Carbon Emission Sources</h2> <p>Breakdown of global carbon emissions by sector, highlighting the primary contributors to greenhouse gas accumulation.</p> <div class="donut-chart" id="donutChart"> <div class="donut-label">41.5 Gt<span>CO₂ (2023)</span></div> <!-- Donut segments will be inserted by JS --> </div> <div class="legend" style="justify-content: center; margin-top: 2rem;"> <div class="legend-item"> <div class="legend-color" style="background: #EA5455;"></div> <span>Energy (34.7%)</span> </div> <div class="legend-item"> <div class="legend-color" style="background: #F07B3F;"></div> <span>Industry (22.9%)</span> </div> <div class="legend-item"> <div class="legend-color" style="background: #FFD460;"></div> <span>Transport (16.2%)</span> </div> <div class="legend-item"> <div class="legend-color" style="background: #2D4059;"></div> <span>Agriculture (12.1%)</span> </div> <div class="legend-item"> <div class="legend-color" style="background: #5c6e91;"></div> <span>Buildings (9.6%)</span> </div> <div class="legend-item"> <div class="legend-color" style="background: #82bef6;"></div> <span>Other (4.5%)</span> </div> </div> <div class="insights"> <h3 class="insight-title">Key Insight</h3> <p>Energy production and industrial processes account for over 57% of global emissions. The most rapid growth is occurring in developing economies, while some developed nations have begun decreasing their carbon footprint.</p> </div> </section> <section class="section" id="section3"> <h2 class="section-title">Arctic Sea Ice Decline</h2> <p>September minimum sea ice extent (million km²), showing dramatic reduction in Arctic ice coverage.</p> <div class="line-chart" id="lineChart"> <svg width="100%" height="100%" viewBox="0 0 600 200" preserveAspectRatio="none"> <!-- Grid lines --> <line class="grid-line" x1="0" y1="0" x2="600" y2="0"></line> <line class="grid-line" x1="0" y1="50" x2="600" y2="50"></line> <line class="grid-line" x1="0" y1="100" x2="600" y2="100"></line> <line class="grid-line" x1="0" y1="150" x2="600" y2="150"></line> <line class="grid-line" x1="0" y1="200" x2="600" y2="200"></line> <!-- Line path and points will be inserted by JS --> </svg> </div> <div class="chart-labels"> <span>2000</span> <span>2005</span> <span>2010</span> <span>2015</span> <span>2020</span> <span>2023</span> </div> <div class="insights"> <h3 class="insight-title">Key Insight</h3> <p>Arctic sea ice has been declining at a rate of approximately 13% per decade relative to the 1981-2010 average. The reduction accelerated after 2007, with 2012 showing the lowest recorded extent at 3.4 million km².</p> </div> </section> <section class="section" id="section4"> <h2 class="section-title">Climate Action Progress</h2> <p>Global progress toward emissions reduction targets set in the Paris Agreement, compared to baseline scenario.</p> <div class="chart-container" id="progressChart"> <!-- Progress bars will be inserted by JS --> </div> <div class="legend"> <div class="legend-item"> <div class="legend-color" style="background: var(--tertiary);"></div> <span>Current Policies (2.7-3.1°C)</span> </div> <div class="legend-item"> <div class="legend-color" style="background: var(--light);"></div> <span>Pledges & Targets (2.1-2.8°C)</span> </div> <div class="legend-item"> <div class="legend-color" style="background: #56d199;"></div> <span>Paris Goal (1.5°C)</span> </div> </div> <div class="insights"> <h3 class="insight-title">Key Insight</h3> <p>Despite increasing policy adoption, current measures fall short of the Paris Agreement goal to limit warming to 1.5°C. Most nations are not on track to meet their Nationally Determined Contributions (NDCs), requiring more aggressive action.</p> </div> </section> <footer> <p>Data sources: NOAA, NASA GISS, Global Carbon Project, NSIDC | Updated: January 2024</p> </footer> </div> <div class="tooltip" id="tooltip"></div> <script> document.addEventListener('DOMContentLoaded', function() { const sections = document.querySelectorAll('.section'); const progressIndicator = document.querySelector('.progress-indicator'); const dashboard = document.getElementById('dashboard'); const tooltip = document.getElementById('tooltip'); // Scroll-driven animations function checkScroll() { const viewportHeight = dashboard.clientHeight; const scrollPosition = dashboard.scrollTop; const totalHeight = dashboard.scrollHeight; // Update progress bar const scrollPercentage = (scrollPosition / (totalHeight - viewportHeight)) * 100; progressIndicator.style.width = `${scrollPercentage}%`; // Check each section sections.forEach(section => { const rect = section.getBoundingClientRect(); const sectionTop = rect.top; const sectionHeight = rect.height; // Section is visible when it's in the viewport if (sectionTop < viewportHeight * 0.8 && sectionTop > -sectionHeight * 0.3) { section.classList.add('visible'); // Trigger chart animations for visible sections const sectionId = section.id; if (sectionId === 'section1' && !section.dataset.animated) { animateBarChart(); section.dataset.animated = true; } else if (sectionId === 'section2' && !section.dataset.animated) { animateDonutChart(); section.dataset.animated = true; } else if (sectionId === 'section3' && !section.dataset.animated) { animateLineChart(); section.dataset.animated = true; } else if (sectionId === 'section4' && !section.dataset.animated) { animateProgressChart(); section.dataset.animated = true; } } else { section.classList.remove('visible'); } }); } dashboard.addEventListener('scroll', checkScroll); // Initial check checkScroll(); // ===================================== // Bar Chart - Temperature Anomalies // ===================================== function animateBarChart() { const barChart = document.getElementById('barChart'); // Temperature anomaly data const data = [ { year: 2000, value: 0.42 }, { year: 2001, value: 0.55 }, { year: 2002, value: 0.63 }, { year: 2003, value: 0.62 }, { year: 2004, value: 0.54 }, { year: 2005, value: 0.68 }, { year: 2006, value: 0.64 }, { year: 2007, value: 0.66 }, { year: 2008, value: 0.54 }, { year: 2009, value: 0.65 }, { year: 2010, value: 0.72 }, { year: 2011, value: 0.61 }, { year: 2012, value: 0.65 }, { year: 2013, value: 0.68 }, { year: 2014, value: 0.75 }, { year: 2015, value: 0.90 }, { year: 2016, value: 1.02 }, { year: 2017, value: 0.92 }, { year: 2018, value: 0.85 }, { year: 2019, value: 0.98 }, { year: 2020, value: 1.02 }, { year: 2021, value: 0.84 }, { year: 2022, value: 0.89 }, { year: 2023, value: 1.10 } ]; // Clear previous content barChart.innerHTML = ''; // Calculate max value for scaling const maxValue = Math.max(...data.map(d => d.value)); // Create bars data.forEach((item, index) => { const barHeight = (item.value / maxValue) * 100; const bar = document.createElement('div'); bar.className = 'chart-bar'; bar.style.height = `${barHeight}%`; bar.style.left = `${(index / data.length) * 100}%`; bar.style.backgroundColor = getTemperatureColor(item.value); // Create tooltip data bar.setAttribute('data-year', item.year); bar.setAttribute('data-value', item.value); barChart.appendChild(bar); // Add hover event for tooltip bar.addEventListener('mouseover', function(e) { showTooltip(e, `${item.year}: +${item.value}°C`); }); bar.addEventListener('mouseout', function() { hideTooltip(); }); // Animate bars sequentially setTimeout(() => { bar.style.transform = 'scaleY(1)'; }, 100 * index); }); } function getTemperatureColor(value) { // Color scale from cooler to warmer if (value < 0.5) return '#ffcc80'; if (value < 0.7) return '#ff9800'; if (value < 0.9) return '#f57c00'; if (value < 1.0) return '#e65100'; return '#d32f2f'; } // ===================================== // Donut Chart - Emissions by Sector // ===================================== function animateDonutChart() { const donutChart = document.getElementById('donutChart'); // Emission sectors data const data = [ { sector: 'Energy', percentage: 34.7, color: '#EA5455' }, { sector: 'Industry', percentage: 22.9, color: '#F07B3F' }, { sector: 'Transport', percentage: 16.2, color: '#FFD460' }, { sector: 'Agriculture', percentage: 12.1, color: '#2D4059' }, { sector: 'Buildings', percentage: 9.6, color: '#5c6e91' }, { sector: 'Other', percentage: 4.5, color: '#82bef6' } ]; let cumulativeAngle = 0; data.forEach((item, index) => { const segment = document.createElement('div'); segment.className = 'donut-segment'; // Calculate angles const angleInDegrees = item.percentage / 100 * 360; segment.style.backgroundColor = item.color; segment.style.transform = `rotate(${cumulativeAngle}deg)`; // Store data for tooltip segment.setAttribute('data-sector', item.sector); segment.setAttribute('data-percentage', item.percentage); // Add hover event for tooltip segment.addEventListener('mouseover', function(e) { showTooltip(e, `${item.sector}: ${item.percentage}%`); this.style.transform = `rotate(${cumulativeAngle}deg) scale(1.05)`; }); segment.addEventListener('mouseout', function() { hideTooltip(); this.style.transform = `rotate(${cumulativeAngle}deg) scale(1)`; }); donutChart.appendChild(segment); // Animate segments sequentially setTimeout(() => { segment.style.clipPath = `polygon(50% 50%, 100% 0, 100% 100%, 0 100%, 0 0)`; }, 200 * index); cumulativeAngle += angleInDegrees; }); } // ===================================== // Line Chart - Arctic Sea Ice // ===================================== function animateLineChart() { const lineChart = document.getElementById('lineChart'); const svg = lineChart.querySelector('svg'); // Arctic sea ice data (million km²) const data = [ { year: 2000, value: 6.32 }, { year: 2001, value: 6.75 }, { year: 2002, value: 5.96 }, { year: 2003, value: 6.15 }, { year: 2004, value: 6.05 }, { year: 2005, value: 5.57 }, { year: 2006, value: 5.92 }, { year: 2007, value: 4.30 }, { year: 2008, value: 4.73 }, { year: 2009, value: 5.39 }, { year: 2010, value: 4.93 }, { year: 2011, value: 4.61 }, { year: 2012, value: 3.41 }, { year: 2013, value: 5.35 }, { year: 2014, value: 5.02 }, { year: 2015, value: 4.63 }, { year: 2016, value: 4.72 }, { year: 2017, value: 4.87 }, { year: 2018, value: 4.79 }, { year: 2019, value: 4.32 }, { year: 2020, value: 3.92 }, { year: 2021, value: 4.72 }, { year: 2022, value: 4.87 }, { year: 2023, value: 4.23 } ]; // Calculate max and min values for scaling const maxValue = Math.max(...data.map(d => d.value)); const minValue = Math.min(...data.map(d => d.value)); const range = maxValue - minValue; // Generate path string let pathString = ''; data.forEach((point, index) => { const x = (index / (data.length - 1)) * 600; // Invert y-scale because SVG has 0,0 at top-left const y = 200 - ((point.value - minValue) / range) * 180; if (index === 0) { pathString += `M ${x} ${y}`; } else { pathString += ` L ${x} ${y}`; } }); // Create path element const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); path.setAttribute('d', pathString); path.setAttribute('class', 'line-path'); svg.appendChild(path); // Animate the path setTimeout(() => { path.style.strokeDashoffset = '0'; }, 500); // Add data points data.forEach((point, index) => { const x = (index / (data.length - 1)) * 600; const y = 200 - ((point.value - minValue) / range) * 180; const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle'); circle.setAttribute('cx', x); circle.setAttribute('cy', y); circle.setAttribute('class', 'line-point'); // Add data for tooltip circle.setAttribute('data-year', point.year); circle.setAttribute('data-value', point.value); svg.appendChild(circle); // Add hover events for tooltip circle.addEventListener('mouseover', function(e) { showTooltip(e, `${point.year}: ${point.value} million km²`); this.style.transform = 'scale(1.5)'; }); circle.addEventListener('mouseout', function() { hideTooltip(); this.style.transform = 'scale(1)'; }); // Animate points sequentially setTimeout(() => { circle.style.opacity = '1'; }, 1500 + (index * 100)); }); // Add y-axis labels const labels = [maxValue.toFixed(1), ((maxValue + minValue) / 2).toFixed(1), minValue.toFixed(1)]; labels.forEach((label, index) => { const text = document.createElementNS('http://www.w3.org/2000/svg', 'text'); text.setAttribute('x', '5'); text.setAttribute('y', 10 + (index * 95)); text.setAttribute('fill', '#777'); text.setAttribute('font-size', '12'); text.textContent = `${label}`; svg.appendChild(text); }); } // ===================================== // Progress Chart - Climate Action // ===================================== function animateProgressChart() { const progressChart = document.getElementById('progressChart'); // Climate action progress data const data = [ { scenario: 'Current Policies', percentage: 32, color: 'var(--tertiary)' }, { scenario: 'Pledges & Targets', percentage: 57, color: 'var(--light)' }, { scenario: 'Paris Goal', percentage: 100, color: '#56d199' } ]; // Clear previous content progressChart.innerHTML = ''; // Create horizontal progress bars data.forEach((item, index) => { const barContainer = document.createElement('div'); barContainer.style.position = 'relative'; barContainer.style.height = '40px'; barContainer.style.margin = '20px 0'; barContainer.style.backgroundColor = '#f0f0f0'; barContainer.style.borderRadius = '4px'; const bar = document.createElement('div'); bar.style.position = 'absolute'; bar.style.height = '100%'; bar.style.width = '0%'; // Start at 0 bar.style.backgroundColor = item.color; bar.style.borderRadius = '4px'; bar.style.transition = 'width 1.5s cubic-bezier(0.34, 1.56, 0.64, 1)'; const label = document.createElement('div'); label.style.position = 'absolute'; label.style.top = '50%'; label.style.left = '10px'; label.style.transform = 'translateY(-50%)'; label.style.color = '#333'; label.style.fontWeight = '600'; label.style.zIndex = '2'; label.textContent = `${item.scenario} (${item.percentage}%)`; barContainer.appendChild(bar); barContainer.appendChild(label); progressChart.appendChild(barContainer); // Animate bars sequentially setTimeout(() => { bar.style.width = `${item.percentage}%`; }, 300 * index); }); } // ===================================== // Tooltip Functions // ===================================== function showTooltip(event, text) { const tooltip = document.getElementById('tooltip'); tooltip.textContent = text; tooltip.style.opacity = '1'; // Position the tooltip near the mouse but prevent it from going off-screen const rect = event.target.getBoundingClientRect(); const dashboardRect = dashboard.getBoundingClientRect(); let left = rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2); let top = rect.top - tooltip.offsetHeight - 10; // Adjust if too close to edges if (left < dashboardRect.left + 10) left = dashboardRect.left + 10; if (left + tooltip.offsetWidth > dashboardRect.right - 10) { left = dashboardRect.right - tooltip.offsetWidth - 10; } // If tooltip would go above the dashboard, show it below the element if (top < dashboardRect.top) { top = rect.bottom + 10; } tooltip.style.left = `${left}px`; tooltip.style.top = `${top}px`; } function hideTooltip() { document.getElementById('tooltip').style.opacity = '0'; } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nexus Solutions - Enterprise Innovation</title> <style> :root { --primary: #2c3e50; --secondary: #34495e; --accent: #3498db; --light: #ecf0f1; --dark: #1a2530; --success: #2ecc71; --warning: #f39c12; --danger: #e74c3c; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--light); color: var(--dark); overflow-x: hidden; max-width: 700px; margin: 0 auto; } .scroll-container { height: 100vh; overflow-y: scroll; scroll-behavior: smooth; scroll-snap-type: y mandatory; position: relative; } section { height: 100vh; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; overflow: hidden; padding: 2rem; } .hero { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: var(--light); text-align: center; } .hero-content { opacity: 0; transform: translateY(30px); animation: fadeInUp 1s 0.3s forwards; z-index: 2; } .hero h1 { font-size: 3rem; margin-bottom: 1rem; font-weight: 700; letter-spacing: -0.5px; } .hero p { font-size: 1.25rem; max-width: 600px; margin: 0 auto 2rem; line-height: 1.6; } .cta-button { background-color: var(--accent); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-block; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .cta-button:hover { background-color: #2980b9; transform: translateY(-2px); box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); } .section-title { font-size: 2.5rem; margin-bottom: 1.5rem; text-align: center; position: relative; color: var(--primary); font-weight: 700; } .section-title::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background-color: var(--accent); border-radius: 2px; } .values-container, .services-container, .team-container { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 2rem; max-width: 100%; margin-top: 1rem; } .value-card, .service-card, .team-card { background-color: white; border-radius: 10px; padding: 2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); text-align: center; width: 100%; max-width: 300px; position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; opacity: 0; transform: translateY(40px); } .value-card:hover, .service-card:hover, .team-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12); } .value-card::before, .service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background-color: var(--accent); } .value-icon, .service-icon { font-size: 2.5rem; margin-bottom: 1.5rem; color: var(--accent); position: relative; display: inline-block; } .value-icon::after, .service-icon::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 30px; height: 2px; background-color: var(--accent); } .value-title, .service-title { font-size: 1.25rem; margin-bottom: 1rem; color: var(--primary); font-weight: 600; } .value-description, .service-description { font-size: 0.95rem; color: var(--secondary); line-height: 1.6; } .contact { background-color: var(--primary); color: var(--light); } .contact-form { background-color: white; padding: 2rem; border-radius: 10px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); width: 100%; max-width: 500px; margin-top: 2rem; opacity: 0; transform: translateY(30px); } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; font-size: 0.95rem; color: var(--dark); font-weight: 500; } .form-control { width: 100%; padding: 0.75rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; transition: border-color 0.3s ease; } .form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); } textarea.form-control { resize: vertical; min-height: 100px; } .submit-btn { background-color: var(--primary); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; width: 100%; } .submit-btn:hover { background-color: var(--secondary); } .parallax-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--light); z-index: -1; } .pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(var(--accent) 1px, transparent 1px); background-size: 20px 20px; opacity: 0.05; z-index: -1; } .nav-dots { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 15px; z-index: 10; } .nav-dot { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); cursor: pointer; transition: all 0.3s ease; } .nav-dot.active { background-color: var(--accent); transform: scale(1.3); } .nav-dot:hover { background-color: var(--accent); } .floating-shape { position: absolute; border-radius: 50%; background-color: var(--accent); opacity: 0.1; z-index: -1; animation: float 20s infinite ease-in-out; } .shape1 { width: 300px; height: 300px; top: -150px; left: -150px; animation-delay: 0s; } .shape2 { width: 200px; height: 200px; bottom: -100px; right: -100px; background-color: var(--success); animation-delay: 5s; } .shape3 { width: 150px; height: 150px; top: 20%; right: -75px; background-color: var(--warning); animation-delay: 10s; } .bounce-element { animation: bounce 1s ease infinite; animation-play-state: paused; } .scroll-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; color: var(--accent); font-size: 0.9rem; opacity: 0.7; transition: opacity 0.3s ease; animation: fadeInUp 1s 1s forwards, bounce 2s 2s infinite; } .scroll-indicator i { font-size: 1.5rem; margin-top: 0.5rem; } .scroll-indicator:hover { opacity: 1; } @keyframes float { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(50px, 25px) rotate(5deg); } 50% { transform: translate(0, 50px) rotate(0deg); } 75% { transform: translate(-50px, 25px) rotate(-5deg); } 100% { transform: translate(0, 0) rotate(0deg); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-20px); } 60% { transform: translateY(-10px); } } @media (max-width: 768px) { .hero h1 { font-size: 2.5rem; } .section-title { font-size: 2rem; } .values-container, .services-container, .team-container { gap: 1rem; } .value-card, .service-card, .team-card { padding: 1.5rem; max-width: 100%; } .nav-dots { right: 10px; } } @media (max-width: 480px) { .hero h1 { font-size: 2rem; } .hero p { font-size: 1rem; } .section-title { font-size: 1.75rem; } } /* Cursor tracker */ .cursor-follower { position: fixed; width: 30px; height: 30px; border-radius: 50%; background-color: rgba(52, 152, 219, 0.3); pointer-events: none; transform: translate(-50%, -50%); transition: transform 0.1s ease; z-index: 9999; mix-blend-mode: difference; } /* Progress indicator */ .progress-bar { position: fixed; top: 0; left: 0; width: 0%; height: 4px; background-color: var(--accent); z-index: 100; transition: width 0.2s ease; } /* Mobile menu */ .mobile-menu-toggle { display: none; position: fixed; top: 20px; right: 20px; z-index: 100; background-color: var(--primary); color: white; border: none; border-radius: 50%; width: 50px; height: 50px; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); } @media (max-width: 768px) { .mobile-menu-toggle { display: flex; justify-content: center; align-items: center; } .nav-dots { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(44, 62, 80, 0.95); flex-direction: column; justify-content: center; align-items: center; transform: translateY(0); gap: 30px; z-index: 99; } .nav-dots.active { display: flex; } .nav-dot { width: 15px; height: 15px; } } </style> </head> <body> <div class="progress-bar"></div> <div class="cursor-follower"></div> <button class="mobile-menu-toggle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="3" y1="12" x2="21" y2="12"></line> <line x1="3" y1="6" x2="21" y2="6"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg> </button> <div class="nav-dots"> <div class="nav-dot active" data-section="hero"></div> <div class="nav-dot" data-section="values"></div> <div class="nav-dot" data-section="services"></div> <div class="nav-dot" data-section="contact"></div> </div> <div class="scroll-container"> <section id="hero" class="hero"> <div class="floating-shape shape1"></div> <div class="floating-shape shape2"></div> <div class="floating-shape shape3"></div> <div class="hero-content"> <h1>Nexus Solutions</h1> <p>Transforming enterprise operations through strategic innovation and technology-driven solutions that empower your business to thrive in the digital era.</p> <a href="#contact" class="cta-button">Get Started</a> </div> <div class="scroll-indicator"> <span>Scroll to explore</span> <i> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 5v14M19 12l-7 7-7-7"/> </svg> </i> </div> </section> <section id="values" class="values"> <div class="pattern"></div> <div class="parallax-bg"></div> <h2 class="section-title">Our Core Values</h2> <div class="values-container"> <div class="value-card" data-delay="0"> <div class="value-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="8" x2="12" y2="12"></line> <line x1="12" y1="16" x2="12.01" y2="16"></line> </svg> </div> <h3 class="value-title">Relentless Innovation</h3> <p class="value-description">We constantly challenge the status quo, pursuing breakthrough ideas that transform how enterprises operate and compete in rapidly evolving markets.</p> </div> <div class="value-card" data-delay="200"> <div class="value-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon> </svg> </div> <h3 class="value-title">Exceptional Quality</h3> <p class="value-description">Our unwavering commitment to excellence ensures every solution we deliver exceeds expectations, combining precision, reliability, and outstanding performance.</p> </div> <div class="value-card" data-delay="400"> <div class="value-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path> <circle cx="9" cy="7" r="4"></circle> <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path> <path d="M16 3.13a4 4 0 0 1 0 7.75"></path> </svg> </div> <h3 class="value-title">Client Partnership</h3> <p class="value-description">We cultivate deep, strategic relationships with our clients, aligning our expertise with your business objectives to create lasting value and sustainable growth.</p> </div> </div> </section> <section id="services" class="services"> <div class="pattern"></div> <div class="parallax-bg"></div> <h2 class="section-title">Our Services</h2> <div class="services-container"> <div class="service-card" data-delay="0"> <div class="service-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect> <line x1="8" y1="21" x2="16" y2="21"></line> <line x1="12" y1="17" x2="12" y2="21"></line> </svg> </div> <h3 class="service-title">Digital Transformation</h3> <p class="service-description">Strategically reimagine your business processes, culture, and customer experiences through our comprehensive digital transformation framework.</p> </div> <div class="service-card" data-delay="200"> <div class="service-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline> </svg> </div> <h3 class="service-title">Data Analytics</h3> <p class="service-description">Unlock insights from your enterprise data with our advanced analytics solutions, empowering informed decision-making and predictive business intelligence.</p> </div> <div class="service-card" data-delay="400"> <div class="service-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path> </svg> </div> <h3 class="service-title">Cybersecurity</h3> <p class="service-description">Protect your critical assets with our enterprise-grade security solutions, featuring advanced threat detection, incident response, and compliance frameworks.</p> </div> </div> </section> <section id="contact" class="contact"> <div class="floating-shape shape1"></div> <div class="floating-shape shape3"></div> <h2 class="section-title" style="color: var(--light);">Get in Touch</h2> <div class="contact-form"> <div class="form-group"> <label for="name">Full Name</label> <input type="text" id="name" class="form-control" placeholder="Enter your name"> </div> <div class="form-group"> <label for="email">Email Address</label> <input type="email" id="email" class="form-control" placeholder="Enter your email"> </div> <div class="form-group"> <label for="company">Company</label> <input type="text" id="company" class="form-control" placeholder="Enter your company name"> </div> <div class="form-group"> <label for="message">Message</label> <textarea id="message" class="form-control" placeholder="How can we help your business?"></textarea> </div> <button type="button" class="submit-btn">Send Message</button> </div> </section> </div> <script> document.addEventListener('DOMContentLoaded', function() { const scrollContainer = document.querySelector('.scroll-container'); const navDots = document.querySelectorAll('.nav-dot'); const sections = document.querySelectorAll('section'); const progressBar = document.querySelector('.progress-bar'); const cursorFollower = document.querySelector('.cursor-follower'); const mobileMenuToggle = document.querySelector('.mobile-menu-toggle'); const navDotsContainer = document.querySelector('.nav-dots'); const valueCards = document.querySelectorAll('.value-card'); const serviceCards = document.querySelectorAll('.service-card'); const contactForm = document.querySelector('.contact-form'); // Initialize animation for cards function animateCards() { valueCards.forEach((card, index) => { const delay = parseInt(card.getAttribute('data-delay')) || 0; setTimeout(() => { card.style.animation = `fadeInUp 0.8s ${delay}ms forwards`; }, delay); }); serviceCards.forEach((card, index) => { const delay = parseInt(card.getAttribute('data-delay')) || 0; setTimeout(() => { card.style.animation = `fadeInUp 0.8s ${delay}ms forwards`; }, delay); }); } // Handle scroll events scrollContainer.addEventListener('scroll', function() { const scrollTop = scrollContainer.scrollTop; const docHeight = scrollContainer.scrollHeight; const winHeight = scrollContainer.clientHeight; const scrollPercent = (scrollTop / (docHeight - winHeight)) * 100; progressBar.style.width = scrollPercent + '%'; // Update active section let currentSection = ''; sections.forEach(section => { const sectionTop = section.offsetTop; const sectionHeight = section.offsetHeight; if (scrollTop >= sectionTop - sectionHeight / 3) { currentSection = section.getAttribute('id'); } }); // Update active nav dot navDots.forEach(dot => { dot.classList.remove('active'); if (dot.getAttribute('data-section') === currentSection) { dot.classList.add('active'); } }); // Animate cards when they come into view const valuesSection = document.getElementById('values'); const servicesSection = document.getElementById('services'); const contactSection = document.getElementById('contact'); if (scrollTop >= valuesSection.offsetTop - winHeight / 2 && scrollTop < valuesSection.offsetTop + valuesSection.offsetHeight) { animateCards(); } if (scrollTop >= servicesSection.offsetTop - winHeight / 2 && scrollTop < servicesSection.offsetTop + servicesSection.offsetHeight) { animateCards(); } if (scrollTop >= contactSection.offsetTop - winHeight / 2 && scrollTop < contactSection.offsetTop + contactSection.offsetHeight) { contactForm.style.animation = 'fadeInUp 0.8s forwards'; } }); // Nav dots click handling navDots.forEach(dot => { dot.addEventListener('click', function() { const sectionId = this.getAttribute('data-section'); const section = document.getElementById(sectionId); scrollContainer.scrollTo({ top: section.offsetTop, behavior: 'smooth' }); // Close mobile menu if open if (navDotsContainer.classList.contains('active')) { navDotsContainer.classList.remove('active'); } }); }); // Mouse follower cursor document.addEventListener('mousemove', function(e) { cursorFollower.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`; }); // Bounce effect on hover for specific elements const bounceElements = document.querySelectorAll('.cta-button, .submit-btn'); bounceElements.forEach(element => { element.addEventListener('mouseenter', function() { this.style.animationPlayState = 'running'; }); element.addEventListener('mouseleave', function() { this.style.animationPlayState = 'paused'; }); }); // Mobile menu toggle mobileMenuToggle.addEventListener('click', function() { navDotsContainer.classList.toggle('active'); }); // Handle form submission (prevent actual submission) const submitBtn = document.querySelector('.submit-btn'); submitBtn.addEventListener('click', function(e) { e.preventDefault(); // Basic validation const name = document.getElementById('name').value; const email = document.getElementById('email').value; const message = document.getElementById('message').value; if (name && email && message) { // Visual feedback - success submitBtn.textContent = 'Message Sent!'; submitBtn.style.backgroundColor = 'var(--success)'; // Reset form setTimeout(() => { document.getElementById('name').value = ''; document.getElementById('email').value = ''; document.getElementById('company').value = ''; document.getElementById('message').value = ''; submitBtn.textContent = 'Send Message'; submitBtn.style.backgroundColor = 'var(--primary)'; }, 2000); } else { // Visual feedback - error submitBtn.textContent = 'Please fill all fields'; submitBtn.style.backgroundColor = 'var(--danger)'; setTimeout(() => { submitBtn.textContent = 'Send Message'; submitBtn.style.backgroundColor = 'var(--primary)'; }, 2000); } }); // Smooth scrolling for all internal links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); const targetSection = document.querySelector(targetId); scrollContainer.scrollTo({ top: targetSection.offsetTop, behavior: 'smooth' }); }); }); // Trigger animations for initially visible elements animateCards(); // Parallax effect for background elements scrollContainer.addEventListener('scroll', function() { const scrollTop = scrollContainer.scrollTop; document.querySelectorAll('.parallax-bg').forEach(bg => { const parent = bg.parentElement; const parentTop = parent.offsetTop; const speed = 0.5; const yPos = (scrollTop - parentTop) * speed; bg.style.transform = `translateY(${yPos}px)`; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MoveWell - Your Fitness Journey Starts Here</title> <style> :root { --primary: #ff4757; --secondary: #5352ed; --accent: #20bf6b; --light: #f8f9fa; --dark: #2f3542; --gradient: linear-gradient(135deg, var(--primary), var(--secondary)); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { background-color: var(--light); color: var(--dark); overflow-x: hidden; max-width: 700px; margin: 0 auto; position: relative; } .container { width: 100%; height: 700px; padding: 20px; overflow-y: auto; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--primary) var(--light); } .container::-webkit-scrollbar { width: 8px; } .container::-webkit-scrollbar-track { background: rgba(248, 249, 250, 0.5); border-radius: 10px; } .container::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 10px; } header { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; position: sticky; top: 0; background-color: rgba(248, 249, 250, 0.95); backdrop-filter: blur(5px); z-index: 100; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .logo { font-size: 24px; font-weight: 700; color: var(--primary); display: flex; align-items: center; } .logo span { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .logo-icon { margin-right: 8px; font-size: 28px; } nav a { margin-left: 20px; text-decoration: none; color: var(--dark); font-weight: 500; transition: all 0.3s ease; position: relative; } nav a:after { content: ""; position: absolute; width: 0; height: 2px; bottom: -5px; left: 0; background: var(--gradient); transition: width 0.3s ease; } nav a:hover { color: var(--primary); } nav a:hover:after { width: 100%; } .hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 60px 0; opacity: 0; transform: translateY(30px); transition: all 0.7s ease; } .hero.active { opacity: 1; transform: translateY(0); } h1 { font-size: 3rem; margin-bottom: 20px; line-height: 1.2; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; } .hero p { font-size: 1.2rem; margin-bottom: 30px; max-width: 600px; line-height: 1.6; } .cta-button { padding: 15px 30px; border: none; border-radius: 30px; background: var(--gradient); color: white; font-weight: 600; font-size: 1rem; cursor: pointer; box-shadow: 0 10px 20px rgba(255, 71, 87, 0.3); transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; margin-top: 20px; } .cta-button:hover { transform: translateY(-3px); box-shadow: 0 15px 25px rgba(255, 71, 87, 0.4); } .cta-button:active { transform: translateY(1px); } .cta-button:before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); transition: all 0.5s ease; z-index: -1; } .cta-button:hover:before { left: 100%; } .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; padding: 60px 0; } .feature-card { background-color: white; border-radius: 15px; padding: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); text-align: center; transition: all 0.5s ease; opacity: 0; transform: translateY(30px); position: relative; overflow: hidden; } .feature-card.active { opacity: 1; transform: translateY(0); } .feature-card:hover { transform: translateY(-10px) !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); } .feature-icon { font-size: 3rem; margin-bottom: 20px; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .feature-card h3 { font-size: 1.5rem; margin-bottom: 15px; font-weight: 600; } .feature-card p { font-size: 1rem; color: #666; line-height: 1.6; } .testimonials { padding: 60px 0; text-align: center; } .testimonials h2 { font-size: 2.5rem; margin-bottom: 40px; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; opacity: 0; transform: translateY(30px); transition: all 0.7s ease; } .testimonials h2.active { opacity: 1; transform: translateY(0); } .testimonial-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 20px; padding: 20px 0; scrollbar-width: none; } .testimonial-slider::-webkit-scrollbar { display: none; } .testimonial-card { scroll-snap-align: start; min-width: 85%; background-color: white; border-radius: 15px; padding: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); text-align: left; display: flex; flex-direction: column; opacity: 0; transform: translateX(50px); transition: all 0.7s ease; } .testimonial-card.active { opacity: 1; transform: translateX(0); } .quote { font-size: 1.1rem; line-height: 1.6; margin-bottom: 20px; font-style: italic; color: #444; } .profile { display: flex; align-items: center; margin-top: auto; } .profile-img { width: 50px; height: 50px; border-radius: 50%; background: var(--gradient); margin-right: 15px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 1.2rem; } .profile-info h4 { font-size: 1rem; margin-bottom: 5px; } .profile-info p { font-size: 0.9rem; color: #666; } .motivational { padding: 60px 0; text-align: center; background-color: #f8f9fa; border-radius: 15px; margin: 20px 0; position: relative; overflow: hidden; opacity: 0; transform: scale(0.95); transition: all 0.7s ease; } .motivational.active { opacity: 1; transform: scale(1); } .motivational:before { content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; background: radial-gradient(circle, rgba(255, 71, 87, 0.1) 0%, rgba(83, 82, 237, 0.1) 100%); transform: rotate(-5deg); z-index: 0; } .motivational h2 { font-size: 2.5rem; margin-bottom: 20px; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; position: relative; z-index: 1; } .motivational p { font-size: 1.2rem; max-width: 600px; margin: 0 auto; line-height: 1.6; position: relative; z-index: 1; color: #444; margin-bottom: 30px; } .stats { display: flex; justify-content: space-around; flex-wrap: wrap; margin: 40px 0; padding: 0 20px; } .stat-item { margin: 20px; opacity: 0; transform: translateY(30px); transition: all 0.7s ease; } .stat-item.active { opacity: 1; transform: translateY(0); } .stat-number { font-size: 3rem; font-weight: 700; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; } .stat-text { font-size: 1rem; color: #666; } .download-section { padding: 60px 0; text-align: center; opacity: 0; transform: translateY(30px); transition: all 0.7s ease; } .download-section.active { opacity: 1; transform: translateY(0); } .download-section h2 { font-size: 2.5rem; margin-bottom: 20px; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; } .download-section p { font-size: 1.2rem; max-width: 600px; margin: 0 auto 30px; line-height: 1.6; color: #444; } .store-buttons { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; } .store-button { padding: 15px 30px; border: none; border-radius: 10px; background: var(--dark); color: white; font-weight: 600; font-size: 1rem; cursor: pointer; display: flex; align-items: center; transition: all 0.3s ease; } .store-button i { font-size: 1.5rem; margin-right: 10px; } .store-button:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .app-display { margin: 40px auto; position: relative; max-width: 300px; opacity: 0; transform: translateY(30px); transition: all 0.7s ease; } .app-display.active { opacity: 1; transform: translateY(0); } .phone-mockup { width: 100%; height: 600px; background: var(--dark); border-radius: 40px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15); position: relative; overflow: hidden; border: 10px solid #222; } .app-screen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, #f5f7fa, #c3cfe2); display: flex; flex-direction: column; } .app-header { padding: 20px; text-align: center; background: var(--gradient); color: white; } .app-content { padding: 20px; display: flex; flex-direction: column; gap: 15px; overflow-y: auto; flex: 1; } .app-card { background: white; border-radius: 10px; padding: 15px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .app-nav { display: flex; justify-content: space-around; padding: 15px 0; background: white; border-top: 1px solid #eee; } .app-nav-item { font-size: 1.2rem; color: #888; } .app-nav-item.active { color: var(--primary); } .floating-elements { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: -1; } .floating-element { position: absolute; border-radius: 50%; opacity: 0.1; filter: blur(10px); } .e1 { width: 150px; height: 150px; background: var(--primary); top: 10%; left: 5%; animation: float 20s infinite alternate ease-in-out; } .e2 { width: 100px; height: 100px; background: var(--secondary); top: 30%; right: 10%; animation: float 15s infinite alternate-reverse ease-in-out; } .e3 { width: 80px; height: 80px; background: var(--accent); bottom: 20%; left: 15%; animation: float 18s infinite alternate ease-in-out; } @keyframes float { 0% { transform: translateY(0) translateX(0) rotate(0deg); } 50% { transform: translateY(-30px) translateX(20px) rotate(10deg); } 100% { transform: translateY(30px) translateX(-20px) rotate(-10deg); } } .motivational-badge { position: fixed; bottom: 30px; right: 30px; background: var(--gradient); color: white; padding: 15px 20px; border-radius: 30px; font-weight: 600; box-shadow: 0 10px 20px rgba(255, 71, 87, 0.3); transform: translateY(100px); opacity: 0; transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; z-index: 200; } .motivational-badge.show { transform: translateY(0); opacity: 1; } .motivational-badge:hover { transform: translateY(-5px) scale(1.05); } @media (max-width: 600px) { h1 { font-size: 2.2rem; } .hero p, .motivational p, .download-section p { font-size: 1rem; } .features { gap: 20px; } .feature-card { padding: 20px; } .testimonial-card { min-width: 90%; padding: 20px; } .stats { flex-direction: column; align-items: center; } .stat-item { margin: 10px; } .store-buttons { flex-direction: column; align-items: center; } .app-display { max-width: 250px; } } </style> </head> <body> <div class="container"> <header> <div class="logo"> <div class="logo-icon">🔥</div> <span>MoveWell</span> </div> <nav> <a href="#features">Features</a> <a href="#testimonials">Results</a> <a href="#download">Download</a> </nav> </header> <section class="hero" id="hero"> <h1>Transform Your Fitness Journey</h1> <p>MoveWell is more than an app — it's your personal fitness companion designed to keep you motivated, accountable, and celebrating every milestone.</p> <button class="cta-button">Start Your 14-Day Free Trial</button> </section> <section class="features" id="features"> <div class="feature-card" data-delay="0"> <div class="feature-icon">⚡</div> <h3>Adaptive Workouts</h3> <p>Our AI analyzes your performance and adjusts workouts in real-time to match your capabilities and goals.</p> </div> <div class="feature-card" data-delay="200"> <div class="feature-icon">📊</div> <h3>Progress Tracking</h3> <p>Visualize your journey with intuitive charts that show strength gains, endurance improvements, and body composition changes.</p> </div> <div class="feature-card" data-delay="400"> <div class="feature-icon">🥗</div> <h3>Nutrition Guidance</h3> <p>Receive personalized meal suggestions based on your workout intensity, goals, and dietary preferences.</p> </div> <div class="feature-card" data-delay="600"> <div class="feature-icon">👥</div> <h3>Community Challenges</h3> <p>Join monthly fitness challenges with the MoveWell community and unlock special achievements as you progress.</p> </div> </section> <section class="motivational" id="motivational"> <h2>Every Rep Counts</h2> <p>It's not about perfect. It's about effort. When you bring that effort every single day, that's where transformation happens. That's how change occurs.</p> </section> <section class="stats" id="stats"> <div class="stat-item" data-delay="0"> <div class="stat-number" data-count="87">0</div> <div class="stat-text">% Success Rate</div> </div> <div class="stat-item" data-delay="200"> <div class="stat-number" data-count="15">0</div> <div class="stat-text">Min Daily Workouts</div> </div> <div class="stat-item" data-delay="400"> <div class="stat-number" data-count="92">0</div> <div class="stat-text">% User Retention</div> </div> </section> <section class="testimonials" id="testimonials"> <h2>Real Results from Real People</h2> <div class="testimonial-slider"> <div class="testimonial-card" data-delay="0"> <div class="quote">"MoveWell's adaptive workouts adjusted to my busy schedule. Even with just 20 minutes a day, I've lost 15 pounds in 2 months and feel stronger than ever!"</div> <div class="profile"> <div class="profile-img">SM</div> <div class="profile-info"> <h4>Sarah M.</h4> <p>Marketing Executive, 32</p> </div> </div> </div> <div class="testimonial-card" data-delay="200"> <div class="quote">"As someone recovering from an injury, I needed something that wouldn't push me too hard. MoveWell's intelligent programming helped me rebuild strength without setbacks."</div> <div class="profile"> <div class="profile-img">JT</div> <div class="profile-info"> <h4>James T.</h4> <p>Physical Therapist, 41</p> </div> </div> </div> <div class="testimonial-card" data-delay="400"> <div class="quote">"The nutrition guidance completely changed my relationship with food. I'm fueling for performance now, not just eating randomly, and my energy levels have skyrocketed."</div> <div class="profile"> <div class="profile-img">AL</div> <div class="profile-info"> <h4>Aisha L.</h4> <p>Software Engineer, 28</p> </div> </div> </div> </div> </section> <section class="app-display" id="app-display"> <div class="phone-mockup"> <div class="app-screen"> <div class="app-header"> <h3>MoveWell</h3> </div> <div class="app-content"> <div class="app-card"> <h4>Today's Workout</h4> <p>Full Body HIIT - 20 min</p> <div class="progress" style="height: 8px; background: #eee; border-radius: 4px; margin-top: 10px;"> <div style="width: 70%; height: 100%; background: var(--primary); border-radius: 4px;"></div> </div> </div> <div class="app-card"> <h4>Daily Quote</h4> <p>"The only bad workout is the one that didn't happen."</p> </div> <div class="app-card"> <h4>Nutrition Tip</h4> <p>Hydrate before, during, and after your workout for optimal performance.</p> </div> <div class="app-card"> <h4>Weekly Progress</h4> <div style="display: flex; justify-content: space-between; margin-top: 10px;"> <div style="height: 40px; width: 10px; background: var(--primary); border-radius: 5px;"></div> <div style="height: 60px; width: 10px; background: var(--primary); border-radius: 5px;"></div> <div style="height: 50px; width: 10px; background: var(--primary); border-radius: 5px;"></div> <div style="height: 80px; width: 10px; background: var(--primary); border-radius: 5px;"></div> <div style="height: 65px; width: 10px; background: var(--secondary); border-radius: 5px;"></div> <div style="height: 45px; width: 10px; background: var(--accent); border-radius: 5px;"></div> <div style="height: 30px; width: 10px; background: var(--accent); border-radius: 5px;"></div> </div> </div> </div> <div class="app-nav"> <div class="app-nav-item active">🏠</div> <div class="app-nav-item">🏋️</div> <div class="app-nav-item">📊</div> <div class="app-nav-item">👤</div> </div> </div> </div> </section> <section class="download-section" id="download"> <h2>Begin Your Transformation Today</h2> <p>Download MoveWell now and join thousands who are redefining their relationship with fitness. Your first 14 days are absolutely free.</p> <div class="store-buttons"> <button class="store-button"> <i>📱</i> App Store </button> <button class="store-button"> <i>🤖</i> Google Play </button> </div> </section> <div class="floating-elements"> <div class="floating-element e1"></div> <div class="floating-element e2"></div> <div class="floating-element e3"></div> </div> </div> <div class="motivational-badge" id="motivationBadge">🔥 You've got this!</div> <script> // Observer for animations on scroll const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('active'); // Handle number counting animation for stats if (entry.target.classList.contains('stat-item')) { const statNumber = entry.target.querySelector('.stat-number'); const finalValue = parseInt(statNumber.getAttribute('data-count')); animateCounter(statNumber, finalValue); } } }); }, { threshold: 0.1 }); // Observe elements document.querySelectorAll('.hero, .feature-card, .testimonial-card, .motivational, .stat-item, .app-display, .download-section, .testimonials h2').forEach(element => { observer.observe(element); }); // Set different animation delays for elements that need it document.querySelectorAll('[data-delay]').forEach(element => { const delay = element.getAttribute('data-delay'); element.style.transitionDelay = `${delay}ms`; }); // Animate counter function function animateCounter(element, finalValue) { let currentValue = 0; const duration = 2000; // 2 seconds const interval = Math.min(50, duration / finalValue); const step = finalValue / (duration / interval); const timer = setInterval(() => { currentValue += step; if (currentValue >= finalValue) { element.textContent = finalValue; clearInterval(timer); } else { element.textContent = Math.floor(currentValue); } }, interval); } // Motivational messages that appear while scrolling const motivationalMessages = [ "Keep pushing! 💪", "You're crushing it! 🔥", "One more rep! ⚡", "Progress over perfection! 🌟", "Small steps, big changes! 🚶♂️", "You've got this! 💯", "Feel the burn! 🔥", "Breaking barriers! 🧱", "Stronger every day! 💪", "Your future self thanks you! 🙏" ]; const container = document.querySelector('.container'); const motivationBadge = document.getElementById('motivationBadge'); let lastScrollPosition = 0; let badgeTimeout; container.addEventListener('scroll', () => { const currentScrollPosition = container.scrollTop; // Only show badge when scrolling more than 100px if (Math.abs(currentScrollPosition - lastScrollPosition) > 100) { lastScrollPosition = currentScrollPosition; showMotivationBadge(); } }); function showMotivationBadge() { clearTimeout(badgeTimeout); // Select random message const randomMessage = motivationalMessages[Math.floor(Math.random() * motivationalMessages.length)]; motivationBadge.textContent = randomMessage; // Show and animate badge motivationBadge.classList.add('show'); // Hide after 3 seconds badgeTimeout = setTimeout(() => { motivationBadge.classList.remove('show'); }, 3000); } // Make badges interactive motivationBadge.addEventListener('click', () => { motivationBadge.style.transform = 'translateY(0) scale(1.2)'; setTimeout(() => { motivationBadge.style.transform = ''; }, 300); }); // Prevent form submission behavior document.querySelectorAll('button').forEach(button => { button.addEventListener('click', (e) => { e.preventDefault(); // Fun bounce animation on button click button.style.transform = 'scale(0.95)'; setTimeout(() => { button.style.transform = ''; }, 200); }); }); // Initialize starting animations window.addEventListener('load', () => { document.querySelector('.hero').classList.add('active'); // Show first motivation after 2 seconds setTimeout(showMotivationBadge, 2000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FAÇADE Magazine</title> <style> :root { --primary-color: #000; --secondary-color: #fff; --accent-color: #ff2d55; --text-color: #333; --light-gray: #f5f5f5; --transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Helvetica Neue', Arial, sans-serif; } body { background-color: var(--secondary-color); color: var(--text-color); overflow-x: hidden; width: 100%; height: 100%; } .container { width: 100%; height: 700px; position: relative; overflow: hidden; } .page-indicator { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 100; } .indicator { width: 30px; height: 4px; background-color: rgba(0, 0, 0, 0.2); cursor: pointer; transition: var(--transition); } .indicator.active { background-color: var(--accent-color); width: 50px; } .magazine-page { position: absolute; width: 100%; height: 100%; transition: var(--transition); opacity: 0; transform: translateX(100%); overflow-y: auto; padding: 20px; z-index: 1; scroll-behavior: smooth; } .magazine-page.active { opacity: 1; transform: translateX(0); z-index: 10; } .magazine-page.prev { transform: translateX(-30%) scale(0.8); opacity: 0.3; } .magazine-page.next { transform: translateX(30%) scale(0.8); opacity: 0.3; } /* Navigation */ .nav { position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px; z-index: 100; pointer-events: none; } .logo { font-size: 24px; font-weight: 700; letter-spacing: 2px; color: var(--accent-color); mix-blend-mode: difference; pointer-events: auto; } .menu-btn { width: 30px; height: 20px; position: relative; cursor: pointer; pointer-events: auto; } .menu-btn span { position: absolute; width: 100%; height: 2px; background-color: var(--primary-color); transition: var(--transition); } .menu-btn span:nth-child(1) { top: 0; } .menu-btn span:nth-child(2) { top: 9px; } .menu-btn span:nth-child(3) { bottom: 0; } .menu-btn.active span:nth-child(1) { transform: rotate(45deg); top: 9px; } .menu-btn.active span:nth-child(2) { opacity: 0; } .menu-btn.active span:nth-child(3) { transform: rotate(-45deg); bottom: 9px; } /* Cover Page */ .cover { background-color: var(--primary-color); color: var(--secondary-color); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } .cover h1 { font-size: 3.5rem; font-weight: 900; letter-spacing: 5px; margin-bottom: 20px; } .cover h2 { font-size: 1.2rem; font-weight: 300; margin-bottom: 40px; letter-spacing: 2px; } .cover-img { width: 70%; height: auto; position: relative; overflow: hidden; margin-bottom: 30px; } .cover-img img { width: 100%; height: auto; transition: transform 1s ease; } .cover-img:hover img { transform: scale(1.05); } .issue-info { display: flex; justify-content: space-between; width: 80%; margin-top: 20px; font-size: 0.8rem; letter-spacing: 1px; } /* Feature Article */ .feature-article { display: grid; grid-template-columns: 1fr; grid-gap: 20px; padding: 40px 20px; background-color: var(--secondary-color); } .feature-header { position: relative; margin-bottom: 40px; } .feature-title { font-size: 2rem; font-weight: 700; line-height: 1.2; margin-bottom: 20px; position: relative; } .feature-title::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 60px; height: 4px; background-color: var(--accent-color); } .feature-intro { font-size: 1.2rem; font-weight: 300; line-height: 1.5; margin-bottom: 30px; font-style: italic; } .feature-image { width: 100%; height: 300px; overflow: hidden; position: relative; margin-bottom: 30px; } .feature-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; } .feature-image:hover img { transform: scale(1.1); } .feature-content { line-height: 1.6; column-count: 1; column-gap: 30px; } .feature-content p { margin-bottom: 20px; } .pull-quote { font-size: 1.5rem; font-weight: 500; line-height: 1.3; color: var(--accent-color); padding: 20px 0; position: relative; margin: 30px 0; border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1); } /* Trends Section */ .trends { padding: 40px 20px; background-color: var(--light-gray); } .trends-title { font-size: 2rem; margin-bottom: 30px; position: relative; text-transform: uppercase; } .trends-title::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 60px; height: 4px; background-color: var(--accent-color); } .trends-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; margin-top: 20px; } .trend-item { position: relative; overflow: hidden; height: 150px; border-radius: 5px; cursor: pointer; } .trend-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .trend-item:hover img { transform: scale(1.1); } .trend-caption { position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px; background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%); color: white; font-size: 0.9rem; transform: translateY(30px); opacity: 0; transition: var(--transition); } .trend-item:hover .trend-caption { transform: translateY(0); opacity: 1; } /* Editor's Letter */ .editors-letter { padding: 40px 20px; background-color: var(--secondary-color); } .letter-header { display: flex; align-items: center; margin-bottom: 30px; } .editor-image { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; margin-right: 20px; } .editor-image img { width: 100%; height: 100%; object-fit: cover; } .editor-info h3 { font-size: 1.5rem; margin-bottom: 5px; } .editor-info p { font-size: 0.9rem; color: #888; } .letter-content { line-height: 1.6; position: relative; padding-left: 20px; border-left: 3px solid var(--accent-color); } .letter-content p { margin-bottom: 20px; } .signature { font-family: 'Brush Script MT', cursive; font-size: 1.5rem; color: var(--accent-color); margin-top: 20px; } @media screen and (min-width: 600px) { .feature-content { column-count: 2; } .feature-title { font-size: 2.5rem; } .trends-grid { grid-template-columns: repeat(3, 1fr); } } /* Page turn animation */ .page-turn { position: fixed; top: 0; right: 0; width: 0; height: 100%; background-color: var(--accent-color); z-index: 1000; transition: width 0.5s cubic-bezier(0.7, 0, 0.3, 1); } /* Navigation arrows */ .nav-arrows { position: fixed; top: 50%; width: 100%; display: flex; justify-content: space-between; padding: 0 10px; z-index: 90; transform: translateY(-50%); } .arrow { width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.8); display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, background-color 0.3s ease; } .arrow:hover { transform: scale(1.1); background-color: white; } .arrow.prev::before, .arrow.next::before { content: ''; width: 10px; height: 10px; border-top: 2px solid #000; border-right: 2px solid #000; transition: var(--transition); } .arrow.prev::before { transform: rotate(-135deg); margin-left: 5px; } .arrow.next::before { transform: rotate(45deg); margin-right: 5px; } /* Scroll animation */ .scroll-indicator { position: fixed; bottom: 50px; left: 50%; transform: translateX(-50%); width: 30px; height: 50px; border: 2px solid rgba(0, 0, 0, 0.3); border-radius: 15px; display: flex; justify-content: center; z-index: 100; opacity: 0.8; } .scroll-dot { width: 6px; height: 6px; background-color: rgba(0, 0, 0, 0.5); border-radius: 50%; position: relative; top: 8px; animation: scrollAnim 1.5s infinite; } @keyframes scrollAnim { 0% { opacity: 1; top: 8px; } 100% { opacity: 0; top: 32px; } } </style> </head> <body> <div class="container"> <div class="nav"> <div class="logo">FAÇADE</div> <div class="menu-btn"> <span></span> <span></span> <span></span> </div> </div> <div class="nav-arrows"> <div class="arrow prev"></div> <div class="arrow next"></div> </div> <div class="page-turn"></div> <!-- Cover Page --> <div class="magazine-page cover active"> <h1>FAÇADE</h1> <h2>REDEFINING SUSTAINABLE COUTURE</h2> <div class="cover-img"> <img src="https://images.unsplash.com/photo-1583759136431-9d70db2eb04c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Cover model"> </div> <div class="issue-info"> <span>AUTUMN/WINTER 2023</span> <span>ISSUE 47</span> <span>$12.99</span> </div> <div class="scroll-indicator"> <div class="scroll-dot"></div> </div> </div> <!-- Feature Article Page --> <div class="magazine-page feature-article"> <div class="feature-header"> <h2 class="feature-title">The Renaissance of Reclaimed Textiles</h2> <p class="feature-intro">How discarded materials are reborn into luxury pieces through innovative craftsmanship and visionary design.</p> </div> <div class="feature-image"> <img src="https://images.unsplash.com/photo-1558769132-cb1aea458c5e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Reclaimed textiles fashion"> </div> <div class="feature-content"> <p>In a quiet atelier in East London, designer Mira Zhao transforms discarded silk kimonos into structured evening wear that commands runway attention. Her process—meticulous deconstruction followed by architectural reconstruction—represents fashion's new frontier: sustainability without aesthetic compromise.</p> <p>"The challenge isn't finding beauty in waste," Zhao explains, careful fingers separating indigo threads from a vintage fabric. "It's revealing the beauty that was always there but overlooked."</p> <div class="pull-quote"> "True sustainability requires rethinking not just materials, but our entire relationship with garments. Each piece carries history and potential." </div> <p>This philosophy drives the work of emergent fashion houses like Reclaim Atelier and Vestiges, where textiles with previous lives—parachute silk, vintage denim, even industrial canvas—find new expression in collections that defy the disposable nature of contemporary fashion.</p> <p>The movement signals more than ethical consumption; it represents an aesthetic pivot toward authenticity. Garments bearing subtle marks of their previous existence—a faded patch, reinforced stitching, gentle wear patterns—now command premium prices precisely because of these character-giving imperfections.</p> </div> </div> <!-- Trends Page --> <div class="magazine-page trends"> <h2 class="trends-title">Season's Vanguard</h2> <p>The definitive guide to this season's most influential textile innovations and styling approaches, as spotted on runways from Tokyo to Milan.</p> <div class="trends-grid"> <div class="trend-item"> <img src="https://images.unsplash.com/photo-1509631179647-0177331693ae?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Trend 1"> <div class="trend-caption">Deconstructed tailoring reimagines office classics with asymmetrical elements</div> </div> <div class="trend-item"> <img src="https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Trend 2"> <div class="trend-caption">Biomaterials derived from agricultural waste create zero-impact statement pieces</div> </div> <div class="trend-item"> <img src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Trend 3"> <div class="trend-caption">Textile blocking techniques combine traditional weaves with technical fabrics</div> </div> <div class="trend-item"> <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Trend 4"> <div class="trend-caption">Digital printing techniques enable photo-realistic narratives on fabric</div> </div> <div class="trend-item"> <img src="https://images.unsplash.com/photo-1544022613-e87ca75a784a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Trend 5"> <div class="trend-caption">Hand-embroidered detailing returns as the counterpoint to mass production</div> </div> <div class="trend-item"> <img src="https://images.unsplash.com/photo-1551803091-e20673f15770?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Trend 6"> <div class="trend-caption">Micro-fringe applications create movement and dimension in monochromatic looks</div> </div> </div> </div> <!-- Editor's Letter Page --> <div class="magazine-page editors-letter"> <div class="letter-header"> <div class="editor-image"> <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="Editor portrait"> </div> <div class="editor-info"> <h3>Editor's Letter</h3> <p>Claire Montgomery, Editor-in-Chief</p> </div> </div> <div class="letter-content"> <p>Dear reader,</p> <p>As we assembled this issue during a time of unprecedented global recalibration, one question persisted in our editorial discussions: What constitutes meaningful innovation in fashion today?</p> <p>The answer, we discovered, lies not in novelty for its own sake, but in purposeful creation. The designers featured in these pages aren't merely creating garments—they're proposing new systems of value, challenging our notions of luxury, and redefining craftsmanship for an era that desperately needs sustainable visions.</p> <p>In our cover story, we explore how reclaimed materials have transcended their "upcycled" categorization to become the medium of choice for some of fashion's most visionary creators. This isn't about making do with less—it's about recognizing the untapped potential in what already exists.</p> <p>Throughout this issue, you'll notice we've made changes to our production process as well. This magazine now comes to you printed on recycled stock using algae-based inks that biodegrade completely. Our digital edition incorporates immersive elements that enhance storytelling while reducing our carbon footprint.</p> <p>Fashion has always been about looking forward. Today, that forward vision must encompass responsibility alongside beauty. The two, as this issue demonstrates, are not merely compatible—they're inseparable.</p> <div class="signature">Claire Montgomery</div> </div> </div> <div class="page-indicator"> <div class="indicator active" data-index="0"></div> <div class="indicator" data-index="1"></div> <div class="indicator" data-index="2"></div> <div class="indicator" data-index="3"></div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const pages = document.querySelectorAll('.magazine-page'); const indicators = document.querySelectorAll('.indicator'); const prevArrow = document.querySelector('.arrow.prev'); const nextArrow = document.querySelector('.arrow.next'); const pageTurn = document.querySelector('.page-turn'); const menuBtn = document.querySelector('.menu-btn'); let currentPage = 0; // Initialize page classes updatePageClasses(); // Handle page turn animation function turnPage(from, to) { // Animate page turn effect pageTurn.style.width = '100%'; setTimeout(() => { // Update active page pages[from].classList.remove('active'); pages[to].classList.add('active'); // Update indicators indicators[from].classList.remove('active'); indicators[to].classList.add('active'); updatePageClasses(); // Reverse animation pageTurn.style.width = '0'; }, 500); } // Update prev/next classes function updatePageClasses() { pages.forEach((page, index) => { page.classList.remove('prev', 'next'); if (index === currentPage - 1) { page.classList.add('prev'); } else if (index === currentPage + 1) { page.classList.add('next'); } }); } // Next page function goToNextPage() { if (currentPage < pages.length - 1) { turnPage(currentPage, currentPage + 1); currentPage++; } } // Previous page function goToPrevPage() { if (currentPage > 0) { turnPage(currentPage, currentPage - 1); currentPage--; } } // Event listeners nextArrow.addEventListener('click', goToNextPage); prevArrow.addEventListener('click', goToPrevPage); // Indicator clicks indicators.forEach((indicator, index) => { indicator.addEventListener('click', () => { if (index !== currentPage) { turnPage(currentPage, index); currentPage = index; } }); }); // Menu button menuBtn.addEventListener('click', function() { this.classList.toggle('active'); }); // Keyboard navigation document.addEventListener('keydown', function(e) { if (e.key === 'ArrowRight') { goToNextPage(); } else if (e.key === 'ArrowLeft') { goToPrevPage(); } }); // Touch events for swipe let touchStartX = 0; let touchEndX = 0; document.addEventListener('touchstart', e => { touchStartX = e.changedTouches[0].screenX; }); document.addEventListener('touchend', e => { touchEndX = e.changedTouches[0].screenX; handleSwipe(); }); function handleSwipe() { if (touchEndX < touchStartX - 50) { goToNextPage(); } else if (touchEndX > touchStartX + 50) { goToPrevPage(); } } // Scroll animations const observerOptions = { root: null, rootMargin: '0px', threshold: 0.1 }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, observerOptions); // Observe elements that should animate on scroll document.querySelectorAll('.feature-content p, .pull-quote, .feature-title, .feature-intro').forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateY(20px)'; el.style.transition = 'opacity 0.8s ease, transform 0.8s ease'; observer.observe(el); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Capital Nexus - Financial Services</title> <style> /* Base Styles */ :root { --primary: #114B5F; --secondary: #1A936F; --tertiary: #88D498; --neutral: #F3F7F0; --accent: #C6DABF; --text-dark: #333; --text-light: #fff; --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-main); line-height: 1.6; color: var(--text-dark); background-color: var(--neutral); overflow-x: hidden; max-width: 700px; margin: 0 auto; position: relative; height: 700px; overflow-y: auto; } .scrollbar-custom::-webkit-scrollbar { width: 8px; } .scrollbar-custom::-webkit-scrollbar-track { background: rgba(243, 247, 240, 0.8); } .scrollbar-custom::-webkit-scrollbar-thumb { background-color: var(--primary); border-radius: 20px; border: 2px solid var(--neutral); } /* Typography */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.2; margin-bottom: 1rem; color: var(--primary); } h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } p { margin-bottom: 1.5rem; } .subtle-accent { color: var(--secondary); } /* Layout */ .container { width: 100%; padding: 0 1.5rem; margin: 0 auto; } .section { padding: 4rem 0; position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } /* Header */ header { padding: 1.5rem 0; position: fixed; top: 0; left: 0; right: 0; background-color: rgba(243, 247, 240, 0.9); backdrop-filter: blur(5px); z-index: 1000; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; max-width: 700px; margin: 0 auto; } header.scrolled { padding: 0.8rem 0; } .header-content { display: flex; justify-content: space-between; align-items: center; padding: 0 1.5rem; } .logo { font-size: 1.5rem; font-weight: 700; color: var(--primary); display: flex; align-items: center; gap: 0.5rem; } .logo-icon { display: inline-block; width: 1.5rem; height: 1.5rem; background-color: var(--primary); border-radius: 50%; position: relative; overflow: hidden; } .logo-icon::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; height: 70%; background-color: var(--neutral); border-radius: 50%; } .logo-icon::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 30%; height: 100%; background-color: var(--secondary); } .nav-list { display: flex; list-style-type: none; gap: 1.5rem; } .nav-link { color: var(--text-dark); text-decoration: none; font-weight: 500; transition: color 0.3s ease; position: relative; } .nav-link:hover { color: var(--secondary); } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0; background-color: var(--secondary); transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } /* Hero Section */ .hero { padding-top: 7rem; position: relative; overflow: hidden; min-height: 100vh; } .hero-content { position: relative; z-index: 2; } .hero h1 { margin-bottom: 1.5rem; opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; } .hero p { font-size: 1.2rem; margin-bottom: 2rem; max-width: 600px; opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s; } .hero.active h1, .hero.active p { opacity: 1; transform: translateY(0); } .cta-btn { display: inline-block; background-color: var(--secondary); color: var(--text-light); padding: 0.8rem 1.8rem; border-radius: 30px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; border: 2px solid transparent; opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease 0.4s, transform 0.8s ease 0.4s, background-color 0.3s ease, color 0.3s ease, border 0.3s ease; } .hero.active .cta-btn { opacity: 1; transform: translateY(0); } .cta-btn:hover { background-color: transparent; color: var(--secondary); border-color: var(--secondary); } .graphic-element { position: absolute; top: 50%; right: -100px; transform: translateY(-50%); width: 300px; height: 300px; background-color: var(--accent); border-radius: 50%; opacity: 0.15; z-index: 1; } .graphic-element::before { content: ''; position: absolute; top: 20%; left: 20%; width: 60%; height: 60%; background-color: var(--tertiary); border-radius: 50%; opacity: 0.7; } /* Stats Section */ .stats-section { padding: 5rem 0; background-color: var(--primary); border-radius: 10px; margin: 3rem 1.5rem; color: var(--text-light); } .stats-section h2 { color: var(--text-light); text-align: center; margin-bottom: 3rem; opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; } .stats-section.active h2 { opacity: 1; transform: translateY(0); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; padding: 0 2rem; } .stat-card { text-align: center; padding: 1.5rem; background-color: rgba(255, 255, 255, 0.1); border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); backdrop-filter: blur(5px); transition: transform 0.3s ease, box-shadow 0.3s ease; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .stats-section.active .stat-card { opacity: 1; transform: translateY(0); } .stats-section.active .stat-card:nth-child(1) { transition-delay: 0.2s; } .stats-section.active .stat-card:nth-child(2) { transition-delay: 0.4s; } .stats-section.active .stat-card:nth-child(3) { transition-delay: 0.6s; } .stat-card:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } .stat-number { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--tertiary); } .stat-label { font-size: 1rem; font-weight: 500; } /* Services Section */ .services-section { padding: 5rem 0; position: relative; } .services-section h2 { text-align: center; margin-bottom: 3rem; opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; } .services-section.active h2 { opacity: 1; transform: translateY(0); } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-bottom: 3rem; } .service-card { background-color: white; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); padding: 2rem; transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .services-section.active .service-card { opacity: 1; transform: translateY(0); } .services-section.active .service-card:nth-child(1) { transition-delay: 0.2s; } .services-section.active .service-card:nth-child(2) { transition-delay: 0.4s; } .services-section.active .service-card:nth-child(3) { transition-delay: 0.6s; } .service-card:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); } .service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(to right, var(--primary), var(--secondary)); opacity: 0.8; } .service-icon { font-size: 2.5rem; color: var(--secondary); margin-bottom: 1.5rem; display: inline-block; } .service-title { font-size: 1.3rem; margin-bottom: 1rem; color: var(--primary); } /* CTA Section */ .cta-section { padding: 5rem 0; background-color: var(--accent); border-radius: 10px; margin: 3rem 1.5rem; text-align: center; position: relative; overflow: hidden; } .cta-content { position: relative; z-index: 2; opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; } .cta-section.active .cta-content { opacity: 1; transform: translateY(0); } .cta-title { color: var(--primary); margin-bottom: 1.5rem; } .cta-text { max-width: 600px; margin: 0 auto 2rem; } .bg-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.05; z-index: 1; background-image: radial-gradient(circle at 20% 80%, var(--primary) 0%, transparent 8%), radial-gradient(circle at 80% 30%, var(--primary) 0%, transparent 8%); background-size: 40px 40px; } /* Footer */ footer { padding: 2rem 0; background-color: var(--primary); color: var(--text-light); margin-top: 3rem; } .footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; } .copyright { font-size: 0.9rem; opacity: 0.8; } .social-links { display: flex; gap: 1rem; } .social-link { color: var(--text-light); font-size: 1.2rem; transition: color 0.3s ease; } .social-link:hover { color: var(--tertiary); } /* Counter Animation */ @keyframes countUp { from { content: "0"; } to { content: attr(data-target); } } /* Responsive Adjustments */ @media (max-width: 768px) { h1 { font-size: 2rem; } h2 { font-size: 1.8rem; } .nav-list { gap: 1rem; } .stats-grid, .services-grid { grid-template-columns: 1fr; } .footer-content { flex-direction: column; text-align: center; } } @media (max-width: 480px) { header { padding: 1rem 0; } .header-content { flex-direction: column; gap: 1rem; } .logo { font-size: 1.3rem; } .nav-list { font-size: 0.9rem; } .hero h1 { font-size: 1.8rem; } .hero p { font-size: 1rem; } .section { padding: 3rem 0; } .cta-btn { padding: 0.7rem 1.5rem; font-size: 0.9rem; } } </style> </head> <body class="scrollbar-custom"> <header id="header"> <div class="header-content"> <a href="#" class="logo"> <span class="logo-icon"></span> Capital Nexus </a> <nav> <ul class="nav-list"> <li><a href="#services" class="nav-link">Services</a></li> <li><a href="#stats" class="nav-link">Performance</a></li> <li><a href="#contact" class="nav-link">Contact</a></li> </ul> </nav> </div> </header> <main> <section id="hero" class="section hero"> <div class="container hero-content"> <h1>Financial Strategy for the <span class="subtle-accent">Modern Investor</span></h1> <p>Navigate market complexities with precision and clarity. Our advisory services create tailored paths to financial independence backed by data-driven insights and decades of expertise.</p> <a href="#contact" class="cta-btn">Start Your Journey</a> </div> <div class="graphic-element"></div> </section> <section id="stats" class="stats-section"> <h2>Our Impact in Numbers</h2> <div class="stats-grid"> <div class="stat-card"> <div class="stat-number" id="clientStat">0</div> <div class="stat-label">Client Portfolios Optimized</div> </div> <div class="stat-card"> <div class="stat-number" id="returnStat">0</div> <div class="stat-label">Average Return Rate</div> </div> <div class="stat-card"> <div class="stat-number" id="managedStat">0</div> <div class="stat-label">Assets Under Management</div> </div> </div> </section> <section id="services" class="section services-section"> <div class="container"> <h2>Tailored Financial Solutions</h2> <div class="services-grid"> <div class="service-card"> <div class="service-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path> </svg> </div> <h3 class="service-title">Wealth Strategy & Planning</h3> <p>Comprehensive wealth management structured around your specific life goals. We integrate tax optimization, retirement planning, and estate strategies for a resilient financial foundation.</p> </div> <div class="service-card"> <div class="service-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="2" y="7" width="20" height="14" rx="2" ry="2"></rect> <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path> </svg> </div> <h3 class="service-title">Portfolio Construction</h3> <p>Data-driven investment allocation tailored to your risk tolerance. Our proprietary analysis model identifies opportunities across asset classes while maintaining balance during market volatility.</p> </div> <div class="service-card"> <div class="service-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path> <path d="M22 12A10 10 0 0 0 12 2v10z"></path> </svg> </div> <h3 class="service-title">Market Analytics</h3> <p>Advanced market intelligence delivered through our custom dashboard. Track performance metrics, visualize trends, and access real-time portfolio adjustments based on economic indicators.</p> </div> </div> </div> </section> <section id="contact" class="cta-section"> <div class="bg-pattern"></div> <div class="cta-content"> <h2 class="cta-title">Ready to Secure Your Financial Future?</h2> <p class="cta-text">Schedule a complimentary consultation with our senior advisors. We'll analyze your current financial position and outline strategic opportunities specific to your goals.</p> <a href="#" class="cta-btn">Request Consultation</a> </div> </section> </main> <footer> <div class="container footer-content"> <div class="copyright">© 2023 Capital Nexus Financial Services. All rights reserved.</div> <div class="social-links"> <a href="#" class="social-link"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path> </svg> </a> <a href="#" class="social-link"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path> <rect x="2" y="9" width="4" height="12"></rect> <circle cx="4" cy="4" r="2"></circle> </svg> </a> <a href="#" class="social-link"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path> </svg> </a> </div> </div> </footer> <script> // Scroll animations with IntersectionObserver document.addEventListener('DOMContentLoaded', function() { // Add active class to hero immediately document.getElementById('hero').classList.add('active'); // Header scroll effect const header = document.getElementById('header'); window.addEventListener('scroll', function() { if (window.scrollY > 50) { header.classList.add('scrolled'); } else { header.classList.remove('scrolled'); } }); // Scroll animation for sections const sections = document.querySelectorAll('.stats-section, .services-section, .cta-section'); const observerOptions = { root: null, rootMargin: '0px', threshold: 0.15 }; const observer = new IntersectionObserver(function(entries, observer) { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('active'); // If it's the stats section, animate the counters if (entry.target.classList.contains('stats-section')) { animateCounters(); } // Once it's been animated, no need to observe anymore observer.unobserve(entry.target); } }); }, observerOptions); sections.forEach(section => { observer.observe(section); }); // Smooth scroll for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); if (targetId === '#') return; const targetElement = document.querySelector(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth' }); } }); }); // Counter animation function animateCounters() { const clientStat = document.getElementById('clientStat'); const returnStat = document.getElementById('returnStat'); const managedStat = document.getElementById('managedStat'); animateValue(clientStat, 0, 3750, 2000); animateValue(returnStat, 0, 17.8, 2000, true); animateValue(managedStat, 0, 2.4, 2000, true, 'B'); } function animateValue(element, start, end, duration, isDecimal = false, suffix = '') { let startTimestamp = null; const decimal = isDecimal ? 1 : 0; function step(timestamp) { if (!startTimestamp) startTimestamp = timestamp; const progress = Math.min((timestamp - startTimestamp) / duration, 1); let value = progress * (end - start) + start; if (isDecimal) { element.textContent = value.toFixed(1) + suffix; } else { element.textContent = Math.floor(value).toLocaleString() + suffix; } if (progress < 1) { window.requestAnimationFrame(step); } } window.requestAnimationFrame(step); } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Interactive History Timeline</title> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Source+Serif+Pro:wght@400;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --sepia: #f1e6d4; --ink: #2b2620; --accent: #8b5d33; --highlight: #d3b88c; --faded: #9c8e7e; --parchment: #f8f4e9; --redink: #722f2f; } body { font-family: 'Source Serif Pro', serif; background-color: var(--sepia); color: var(--ink); overflow-x: hidden; height: 700px; width: 700px; max-width: 100%; margin: 0 auto; } .timeline-container { height: 100%; overflow-y: auto; scroll-behavior: smooth; position: relative; padding: 20px; } .timeline-header { text-align: center; margin-bottom: 30px; opacity: 0; animation: fadeIn 1.2s forwards; } .timeline-header h1 { font-family: 'Playfair Display', serif; font-size: 2.4rem; color: var(--redink); margin-bottom: 5px; text-shadow: 1px 1px 0px var(--highlight); letter-spacing: 1px; } .timeline-header p { font-style: italic; color: var(--faded); font-size: 1rem; max-width: 600px; margin: 0 auto; line-height: 1.6; } .timeline-line { position: absolute; left: 50%; transform: translateX(-50%); width: 4px; background-color: var(--accent); top: 180px; bottom: 40px; opacity: 0.7; z-index: 0; } .timeline-progress { position: absolute; left: 50%; transform: translateX(-50%); width: 4px; background-color: var(--redink); top: 180px; height: 0; z-index: 1; transition: height 0.3s ease-out; } .timeline-events { position: relative; padding-bottom: 40px; } .event { display: flex; margin: 80px 0; opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; position: relative; z-index: 2; } .event.visible { opacity: 1; transform: translateY(0); } .event-content { width: 45%; padding: 25px; background-color: var(--parchment); box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1); border-radius: 4px; position: relative; transition: transform 0.3s ease; } .event-content:hover { transform: scale(1.02); } .event-content::before { content: ''; position: absolute; width: 0; height: 0; top: 20px; } .event:nth-child(odd) { justify-content: flex-end; } .event:nth-child(odd) .event-content::before { left: -10px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right: 10px solid var(--parchment); } .event:nth-child(even) .event-content { margin-left: auto; } .event:nth-child(even) .event-content::before { right: -10px; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid var(--parchment); } .event-date { position: absolute; width: 80px; height: 40px; background-color: var(--highlight); border-radius: 20px; display: flex; justify-content: center; align-items: center; font-family: 'Playfair Display', serif; font-weight: 700; color: var(--ink); top: 15px; z-index: 3; box-shadow: 0 2px 4px rgba(0,0,0,0.15); border: 1px solid var(--accent); } .event:nth-child(odd) .event-date { left: calc(45% + 15px); } .event:nth-child(even) .event-date { right: calc(45% + 15px); } .event-marker { position: absolute; left: 50%; transform: translateX(-50%); width: 20px; height: 20px; background-color: var(--parchment); border-radius: 50%; border: 4px solid var(--accent); top: 25px; z-index: 3; transition: transform 0.3s ease, background-color 0.3s ease; } .event.active .event-marker { transform: translateX(-50%) scale(1.3); background-color: var(--redink); border-color: var(--highlight); } .event-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; margin-bottom: 10px; color: var(--redink); border-bottom: 2px solid var(--highlight); padding-bottom: 5px; } .event-description { font-size: 0.95rem; line-height: 1.6; color: var(--ink); } .event-image { width: 100%; height: 140px; margin: 15px 0; background-size: cover; background-position: center; border-radius: 3px; position: relative; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .event-image::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(185, 172, 151, 0.1), rgba(185, 172, 151, 0.3)); } .sepia-filter { filter: sepia(30%); } .event-quote { font-style: italic; border-left: 3px solid var(--highlight); padding-left: 10px; margin-top: 12px; font-size: 0.9rem; color: var(--faded); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .scroll-instruction { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); font-size: 0.8rem; color: var(--faded); text-align: center; display: flex; flex-direction: column; align-items: center; animation: pulse 2s infinite; } .scroll-arrow { margin-top: 5px; font-size: 1.2rem; } @keyframes pulse { 0% { opacity: 0.5; transform: translateX(-50%) translateY(0); } 50% { opacity: 1; transform: translateX(-50%) translateY(5px); } 100% { opacity: 0.5; transform: translateX(-50%) translateY(0); } } .timeline-footer { text-align: center; margin-top: 50px; padding: 20px; font-size: 0.9rem; color: var(--faded); font-style: italic; opacity: 0; transition: opacity 0.8s ease; } .timeline-footer.visible { opacity: 1; } @media (max-width: 750px) { .timeline-line, .timeline-progress { left: 20px; } .event { flex-direction: column; margin: 60px 0; } .event-content { width: 85%; margin-left: 40px !important; padding: 15px; } .event:nth-child(odd) .event-content::before, .event:nth-child(even) .event-content::before { left: -10px; right: auto; border-right: 10px solid var(--parchment); border-left: none; } .event-date { left: 40px !important; right: auto !important; top: -20px; } .event-marker { left: 20px; top: 50%; transform: translateY(-50%); } .event.active .event-marker { transform: translateY(-50%) scale(1.3); } .timeline-header h1 { font-size: 1.8rem; } } </style> </head> <body> <div class="timeline-container" id="timeline"> <div class="timeline-header"> <h1>The American Civil Rights Movement</h1> <p>A journey through pivotal moments that transformed a nation's pursuit of equality and justice</p> </div> <div class="timeline-line"></div> <div class="timeline-progress" id="progressBar"></div> <div class="timeline-events"> <div class="event" data-year="1954"> <div class="event-marker"></div> <div class="event-date">1954</div> <div class="event-content"> <h3 class="event-title">Brown v. Board of Education</h3> <div class="event-image sepia-filter" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/f/f4/Brown_v._Board_of_Education_Building.jpg')"></div> <p class="event-description">The Supreme Court unanimously ruled that racial segregation in public schools was unconstitutional, overturning the "separate but equal" doctrine established in Plessy v. Ferguson.</p> <p class="event-quote">"We conclude that in the field of public education, the doctrine of 'separate but equal' has no place. Separate educational facilities are inherently unequal." — Chief Justice Earl Warren</p> </div> </div> <div class="event" data-year="1955"> <div class="event-marker"></div> <div class="event-date">1955</div> <div class="event-content"> <h3 class="event-title">Montgomery Bus Boycott</h3> <div class="event-image sepia-filter" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/47/RosaParks_1964.jpg')"></div> <p class="event-description">Following Rosa Parks' arrest for refusing to give up her seat to a white passenger, the African American community organized a 381-day boycott of Montgomery buses, led by 26-year-old Martin Luther King Jr.</p> <p class="event-quote">"People always say that I didn't give up my seat because I was tired, but that isn't true. I was not tired physically... I was not old... I was forty-two. No, the only tired I was, was tired of giving in." — Rosa Parks</p> </div> </div> <div class="event" data-year="1957"> <div class="event-marker"></div> <div class="event-date">1957</div> <div class="event-content"> <h3 class="event-title">Little Rock Nine</h3> <div class="event-image sepia-filter" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/f/fa/101st_Airborne_at_Little_Rock_Central_High.jpg')"></div> <p class="event-description">Nine African American students enrolled at Little Rock Central High School, facing violent protests. President Eisenhower deployed federal troops to ensure their safe entry, marking the first use of federal forces to enforce integration.</p> <p class="event-quote">"It was like going into battle every day." — Elizabeth Eckford, one of the Little Rock Nine</p> </div> </div> <div class="event" data-year="1963"> <div class="event-marker"></div> <div class="event-date">1963</div> <div class="event-content"> <h3 class="event-title">March on Washington</h3> <div class="event-image sepia-filter" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/7f/IHaveADream-LincolnMemorial.jpg')"></div> <p class="event-description">Over 250,000 people joined the March on Washington for Jobs and Freedom where Martin Luther King Jr. delivered his iconic "I Have a Dream" speech at the Lincoln Memorial, advocating for civil and economic rights.</p> <p class="event-quote">"I have a dream that my four little children will one day live in a nation where they will not be judged by the color of their skin but by the content of their character." — Martin Luther King Jr.</p> </div> </div> <div class="event" data-year="1964"> <div class="event-marker"></div> <div class="event-date">1964</div> <div class="event-content"> <h3 class="event-title">Civil Rights Act</h3> <div class="event-image sepia-filter" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/8/80/Lyndon_Johnson_signing_Civil_Rights_Act_1964.jpg')"></div> <p class="event-description">President Lyndon B. Johnson signed the Civil Rights Act of 1964, prohibiting discrimination on the basis of race, color, religion, sex, or national origin. The legislation outlawed segregation in public facilities and schools.</p> <p class="event-quote">"We have lost the South for a generation." — President Johnson to an aide after signing the Act, acknowledging its political consequences</p> </div> </div> <div class="event" data-year="1965"> <div class="event-marker"></div> <div class="event-date">1965</div> <div class="event-content"> <h3 class="event-title">Selma to Montgomery Marches</h3> <div class="event-image sepia-filter" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/7a/Bloody_Sunday-officers_await_demonstrators.jpeg')"></div> <p class="event-description">Three protest marches from Selma to Montgomery, Alabama highlighted voting rights issues. The first march ended in brutal violence against protesters on "Bloody Sunday," galvanizing national support for the Voting Rights Act.</p> <p class="event-quote">"What happened in Selma is part of a far larger movement which reaches into every section and state of America." — Martin Luther King Jr.</p> </div> </div> <div class="event" data-year="1968"> <div class="event-marker"></div> <div class="event-date">1968</div> <div class="event-content"> <h3 class="event-title">Assassination of MLK</h3> <div class="event-image sepia-filter" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/05/Martin_Luther_King%2C_Jr..jpg')"></div> <p class="event-description">Dr. Martin Luther King Jr. was assassinated at the Lorraine Motel in Memphis, Tennessee. His death triggered riots in more than 100 cities across the United States and accelerated the passage of the Fair Housing Act.</p> <p class="event-quote">"Darkness cannot drive out darkness; only light can do that. Hate cannot drive out hate; only love can do that." — Martin Luther King Jr.</p> </div> </div> </div> <div class="timeline-footer"> The struggle for civil rights continues today, building on the foundation laid by these historic events and the countless brave individuals who risked everything for equality. </div> <div class="scroll-instruction"> <span>Scroll to explore</span> <span class="scroll-arrow">↓</span> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const timeline = document.getElementById('timeline'); const events = document.querySelectorAll('.event'); const progressBar = document.getElementById('progressBar'); const footer = document.querySelector('.timeline-footer'); const scrollInstruction = document.querySelector('.scroll-instruction'); // Check if element is in viewport function isInViewport(element) { const rect = element.getBoundingClientRect(); return ( rect.top >= 0 && rect.top <= (window.innerHeight || document.documentElement.clientHeight) * 0.7 ); } // Update timeline based on scroll position function updateTimeline() { let activeEventFound = false; events.forEach(event => { if (isInViewport(event)) { if (!event.classList.contains('visible')) { event.classList.add('visible'); } if (!activeEventFound) { events.forEach(e => e.classList.remove('active')); event.classList.add('active'); activeEventFound = true; } } }); // Update progress bar const scrollPercentage = (timeline.scrollTop / (timeline.scrollHeight - timeline.clientHeight)) * 100; const progressHeight = Math.min(scrollPercentage * 0.9, 90); // Max 90% to account for footer progressBar.style.height = `${progressHeight}%`; // Show footer when near bottom if (scrollPercentage > 85) { footer.classList.add('visible'); scrollInstruction.style.opacity = '0'; } else { scrollInstruction.style.opacity = '1'; } } // Add hover effects to event markers events.forEach(event => { const marker = event.querySelector('.event-marker'); marker.addEventListener('mouseenter', () => { marker.style.transform = 'translateX(-50%) scale(1.5)'; marker.style.backgroundColor = 'var(--redink)'; }); marker.addEventListener('mouseleave', () => { if (!event.classList.contains('active')) { marker.style.transform = 'translateX(-50%) scale(1)'; marker.style.backgroundColor = 'var(--parchment)'; } else { marker.style.transform = 'translateX(-50%) scale(1.3)'; } }); marker.addEventListener('click', () => { event.scrollIntoView({ behavior: 'smooth', block: 'center' }); }); }); // Scroll event for timeline timeline.addEventListener('scroll', updateTimeline); // Initial update setTimeout(updateTimeline, 500); // Adjust for mobile function checkResponsive() { if (window.innerWidth <= 750) { events.forEach(event => { const marker = event.querySelector('.event-marker'); marker.style.transform = 'translateY(-50%)'; if (event.classList.contains('active')) { marker.style.transform = 'translateY(-50%) scale(1.3)'; } }); } else { events.forEach(event => { const marker = event.querySelector('.event-marker'); marker.style.transform = 'translateX(-50%)'; if (event.classList.contains('active')) { marker.style.transform = 'translateX(-50%) scale(1.3)'; } }); } } window.addEventListener('resize', checkResponsive); checkResponsive(); }); </script> </body> </html>
