Shapes are fundamental elements in design, influencing both aesthetics and functionality. Understanding different shape examples can elevate your design projects to new heights.
In this article, we will explore ten diverse shape examples that can inspire and enhance your creative process. Let's dive in and discover the potential of these shapes.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Subframe's drag-and-drop interface and intuitive, responsive canvas make it easy to create pixel-perfect UI every time. Loved by designers and developers alike, Subframe ensures your designs are both stunning and functional.
Start for free and elevate your design projects today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Ready to elevate your design projects? With Subframe, you can create pixel-perfect UIs and stunning shapes efficiently using our drag-and-drop visual editor.
Start designing immediately and see the difference. Start for free and transform your creative process today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Organic Magazine Layout</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Playfair Display', Georgia, serif; background-color: #f8f5f2; color: #333; width: 100%; height: 100vh; overflow-x: hidden; padding: 30px; } .magazine-container { position: relative; max-width: 700px; max-height: 700px; margin: 0 auto; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; } .magazine-container::-webkit-scrollbar { width: 5px; } .magazine-container::-webkit-scrollbar-thumb { background: #c8553d; border-radius: 10px; } header { margin-bottom: 20px; } .title { font-size: 42px; font-weight: 900; color: #2a2a2a; margin-bottom: 10px; line-height: 1; position: relative; z-index: 5; } .subtitle { font-size: 18px; font-style: italic; color: #878787; margin-bottom: 30px; max-width: 80%; } .organic-shape { position: absolute; z-index: 1; opacity: 0.9; pointer-events: none; transition: all 0.8s ease-in-out; } .shape1 { top: -10%; right: -10%; width: 300px; height: 300px; background-color: #e2c2c6; border-radius: 68% 32% 61% 39% / 43% 58% 42% 57%; opacity: 0.3; transform: rotate(-15deg); } .shape2 { bottom: 10%; left: -10%; width: 250px; height: 250px; background-color: #aebd93; border-radius: 30% 70% 70% 30% / 30% 40% 60% 70%; opacity: 0.3; transform: rotate(20deg); } .article-section { position: relative; margin-bottom: 50px; display: flex; flex-direction: column; } .section-title { font-size: 28px; margin-bottom: 15px; font-weight: 700; color: #2a2a2a; position: relative; z-index: 3; } .section-title::after { content: ''; position: absolute; height: 3px; width: 60px; background-color: #c8553d; bottom: -5px; left: 0; transition: width 0.3s ease-in-out; } .section-title:hover::after { width: 100px; } .feature-image { position: relative; margin: 10px 0 25px; overflow: hidden; border-radius: 0 20% 0 20%; max-width: 100%; transition: all 0.3s ease-in-out; transform-origin: center; z-index: 2; } .feature-image:hover { border-radius: 20% 0 20% 0; transform: scale(1.02); } .feature-image img { width: 100%; height: auto; display: block; transition: all 0.3s ease; } .content { position: relative; line-height: 1.6; font-size: 16px; margin-bottom: 20px; z-index: 3; } .text-wrap { margin-bottom: 20px; font-family: 'Roboto', Arial, sans-serif; } .highlight { font-size: 24px; font-weight: 300; color: #c8553d; font-style: italic; display: block; margin: 25px 0; padding-left: 20px; border-left: 3px solid #c8553d; line-height: 1.4; } .image-float { float: right; width: 45%; margin: 5px 0 15px 25px; border-radius: 50% 20% 50% 20%; overflow: hidden; shape-outside: circle(50%); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .image-float img { width: 100%; height: auto; display: block; transition: all 0.3s ease; } .image-float:hover img { transform: scale(1.05); } .text-overlap { position: relative; z-index: 4; background-color: rgba(248, 245, 242, 0.95); padding: 25px; border-radius: 0 0 20px 0; box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05); margin-top: -40px; margin-left: 20px; width: 90%; transition: all 0.3s ease; } .text-overlap:hover { transform: translateY(-5px); box-shadow: 5px 8px 20px rgba(0, 0, 0, 0.1); } .accent-btn { display: inline-block; padding: 10px 25px; margin-top: 15px; background-color: #c8553d; color: white; border: none; border-radius: 25px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-family: 'Roboto', Arial, sans-serif; } .accent-btn:hover { background-color: #a8442e; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(200, 85, 61, 0.3); } .tag { display: inline-block; padding: 5px 12px; margin-right: 10px; margin-bottom: 10px; background-color: #aebd93; color: white; border-radius: 15px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; } footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid #ddd; text-align: center; font-size: 14px; color: #878787; font-family: 'Roboto', Arial, sans-serif; } @media (max-width: 600px) { body { padding: 15px; } .title { font-size: 32px; } .subtitle { font-size: 16px; max-width: 100%; } .section-title { font-size: 24px; } .highlight { font-size: 18px; } .image-float { float: none; width: 100%; margin: 15px 0; shape-outside: none; } .text-overlap { margin-left: 0; width: 100%; padding: 20px; } .shape1, .shape2 { width: 150px; height: 150px; } } @keyframes floatAnimation { 0% { transform: translateY(0) rotate(-15deg); } 50% { transform: translateY(-10px) rotate(-12deg); } 100% { transform: translateY(0) rotate(-15deg); } } @keyframes floatAnimation2 { 0% { transform: translateY(0) rotate(20deg); } 50% { transform: translateY(10px) rotate(25deg); } 100% { transform: translateY(0) rotate(20deg); } } .shape1 { animation: floatAnimation 8s ease-in-out infinite; } .shape2 { animation: floatAnimation2 9s ease-in-out infinite; } .tag-container { margin: 20px 0; } .newsletter-box { background: linear-gradient(45deg, #e2c2c6, #aebd93); border-radius: 8px; padding: 20px; margin-top: 30px; position: relative; overflow: hidden; color: #2a2a2a; } .newsletter-box::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%); opacity: 0; transform: scale(0.5); transition: all 0.5s ease-in-out; } .newsletter-box:hover::before { opacity: 1; transform: scale(1); } .newsletter-box h3 { margin-bottom: 15px; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); } .newsletter-form { display: flex; flex-wrap: wrap; gap: 10px; } .newsletter-form input { flex: 1; min-width: 200px; padding: 10px 15px; border: none; border-radius: 25px; font-family: 'Roboto', Arial, sans-serif; } .newsletter-form input:focus { outline: none; box-shadow: 0 0 0 2px #c8553d; } </style> </head> <body> <div class="magazine-container"> <div class="organic-shape shape1"></div> <div class="organic-shape shape2"></div> <header> <h1 class="title">Breaking Free: Design Beyond Boundaries</h1> <p class="subtitle">How organic layouts are reshaping visual storytelling in modern editorial design</p> </header> <article> <section class="article-section"> <h2 class="section-title">The Fluid Revolution</h2> <div class="feature-image"> <img src="https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80" alt="Abstract fluid shapes in design"> </div> <div class="text-overlap"> <p class="content text-wrap"> For decades, magazine layouts followed rigid grids—rectangular images housed in rectangular frames, text confined to perfect columns. But a revolution has been quietly unfolding. Today's most innovative publications are embracing organic, free-flowing layouts that mirror the natural world's asymmetry and spontaneity. </p> <p class="highlight"> "The rectangular page is merely a convention, not a natural law of design. Nature doesn't create in perfect squares." </p> </div> </section> <section class="article-section"> <h2 class="section-title">Breaking Visual Tension</h2> <div class="content"> <div class="image-float"> <img src="https://images.unsplash.com/photo-1635594202056-9ea3b425eb06?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80" alt="Flowing design elements"> </div> <p class="text-wrap"> The interplay between organic shapes and structured content creates a visual tension that captivates readers. When text flows around irregular forms rather than rectangular boundaries, it creates pathways for the eye to travel naturally across the page. This technique, known as visual flow mapping, increases reader engagement by up to 42% according to recent eye-tracking studies. </p> <p class="text-wrap"> Muted color palettes—soft sages, dusty roses, and warm neutrals—form the foundation, while strategic pops of vibrant color guide attention to key elements. This balance between restraint and boldness mirrors the tension between structure and fluidity in the layout itself. </p> <p class="text-wrap"> The subtle overlapping of elements adds dimension, creating a sense of depth that flat layouts lack. When a text block slightly intersects with an image, or a shape gently encroaches on a headline, the result is a layout that feels alive—almost breathing. </p> </div> <div class="tag-container"> <span class="tag">Visual Tension</span> <span class="tag">Flow Design</span> <span class="tag">Editorial</span> </div> </section> <section class="article-section"> <h2 class="section-title">The Technical Challenge</h2> <div class="content"> <p class="text-wrap"> Creating these fluid layouts presents unique technical challenges. High-resolution imagery must be meticulously masked to create organic boundaries that still showcase the subject effectively. Designers are now employing advanced CSS shape-outside properties and SVG masking to achieve fluid text wrapping that was impossible just a few years ago. </p> <p class="highlight"> The marriage of technology and organic design principles has given rise to layouts that feel both cutting-edge and fundamentally human. </p> <p class="text-wrap"> Tools like Figma, Adobe XD, and specialized plugins have emerged to facilitate these complex layouts. Designers now speak of "flow states" rather than grid systems, treating the page as a canvas for visual choreography rather than a container for content. </p> <button class="accent-btn" id="read-more">Explore Techniques</button> </div> </section> <section class="newsletter-box"> <h3>Stay Updated on Design Trends</h3> <p>Get monthly insights on boundary-breaking layouts and visual storytelling.</p> <form class="newsletter-form"> <input type="email" placeholder="Your email address" aria-label="Email"> <button type="button" class="accent-btn">Subscribe</button> </form> </section> </article> <footer> <p>Breaking Free Magazine • Typography & Layout Issue • Summer 2023</p> </footer> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Animate organic shapes on mousemove const container = document.querySelector('.magazine-container'); const shapes = document.querySelectorAll('.organic-shape'); container.addEventListener('mousemove', function(e) { const x = e.clientX / window.innerWidth; const y = e.clientY / window.innerHeight; shapes.forEach((shape, index) => { const factor = index === 0 ? 10 : -10; shape.style.transform = `translate(${x * factor}px, ${y * factor}px) rotate(${index === 0 ? -15 : 20}deg)`; }); }); // Button interaction const readMoreBtn = document.getElementById('read-more'); readMoreBtn.addEventListener('click', function() { this.textContent = this.textContent === 'Explore Techniques' ? 'Coming Soon' : 'Explore Techniques'; // Create a ripple effect const ripple = document.createElement('span'); ripple.classList.add('ripple'); ripple.style.position = 'absolute'; ripple.style.borderRadius = '50%'; ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.7)'; ripple.style.transform = 'scale(0)'; ripple.style.animation = 'ripple 0.6s linear'; ripple.style.pointerEvents = 'none'; this.style.position = 'relative'; this.style.overflow = 'hidden'; const rect = this.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${event.clientX - rect.left - size/2}px`; ripple.style.top = `${event.clientY - rect.top - size/2}px`; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); // Add keyframes for ripple effect const style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = ` @keyframes ripple { to { transform: scale(4); opacity: 0; } } `; document.head.appendChild(style); // Newsletter form interaction const form = document.querySelector('.newsletter-form'); const emailInput = form.querySelector('input[type="email"]'); const submitBtn = form.querySelector('button'); submitBtn.addEventListener('click', function(e) { e.preventDefault(); if (emailInput.value.trim() !== '' && emailInput.value.includes('@')) { submitBtn.textContent = 'Subscribed!'; submitBtn.style.backgroundColor = '#aebd93'; emailInput.value = ''; setTimeout(() => { submitBtn.textContent = 'Subscribe'; submitBtn.style.backgroundColor = '#c8553d'; }, 2000); } else { emailInput.style.boxShadow = '0 0 0 2px #c8553d'; emailInput.placeholder = 'Please enter a valid email'; setTimeout(() => { emailInput.style.boxShadow = 'none'; emailInput.placeholder = 'Your email address'; }, 2000); } }); // Feature image parallax effect const featureImages = document.querySelectorAll('.feature-image'); window.addEventListener('scroll', function() { featureImages.forEach(image => { const rect = image.getBoundingClientRect(); if (rect.top < window.innerHeight && rect.bottom > 0) { const scrollPercent = (rect.top / window.innerHeight) * 100; image.querySelector('img').style.transform = `translateY(${scrollPercent / 10}px)`; } }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FLUID - Fashion Editorial</title> <style> :root { --black: #0a0a0a; --white: #f5f5f5; --accent: #ff2e63; --secondary: #4ecdc4; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Helvetica Neue', sans-serif; } body { background-color: var(--white); color: var(--black); overflow-x: hidden; max-width: 700px; max-height: 700px; margin: 0 auto; position: relative; } .container { padding: 20px; overflow-y: auto; height: 700px; position: relative; scrollbar-width: none; } .container::-webkit-scrollbar { display: none; } header { margin-bottom: 30px; position: relative; } .logo { font-size: 2.5rem; font-weight: 900; letter-spacing: -1px; margin-bottom: 5px; display: inline-block; position: relative; } .logo::after { content: ""; position: absolute; bottom: -3px; left: 0; height: 3px; width: 0; background: var(--accent); transition: width 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .logo:hover::after { width: 100%; } .tagline { font-size: 0.9rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 300; color: var(--black); opacity: 0.7; } .article { margin-bottom: 40px; position: relative; } .article-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 15px; line-height: 1.2; } .article-meta { display: flex; justify-content: space-between; margin-bottom: 20px; font-size: 0.85rem; color: var(--black); opacity: 0.7; } .image-container { position: relative; width: 100%; margin-bottom: 20px; overflow: hidden; border-radius: 2px; } .image-featured { width: 100%; height: auto; display: block; transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1); filter: grayscale(100%); } .image-container:hover .image-featured { transform: scale(1.05); filter: grayscale(0%); } .color-splash { position: absolute; width: 60px; height: 60px; border-radius: 50%; background-color: var(--accent); top: 10px; right: 10px; z-index: 2; mix-blend-mode: lighten; transform: translateY(-20px); opacity: 0; transition: all 0.5s ease; } .image-container:hover .color-splash { transform: translateY(0); opacity: 1; } .excerpt { font-size: 1.1rem; line-height: 1.6; margin-bottom: 15px; } .shape-outside-left { float: left; shape-outside: circle(40% at 30% 50%); width: 250px; height: 250px; margin-right: 20px; position: relative; } .shape-outside-right { float: right; shape-outside: ellipse(40% 50% at 70% 50%); width: 280px; height: 300px; margin-left: 20px; position: relative; } .shape-image { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter 0.4s ease; clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%); } .shape-outside-left:hover .shape-image, .shape-outside-right:hover .shape-image { filter: grayscale(0%); } .content { font-size: 1rem; line-height: 1.7; margin-bottom: 20px; } .content p { margin-bottom: 15px; } .content p:first-of-type::first-letter { font-size: 3.5rem; line-height: 0.8; float: left; margin-right: 10px; color: var(--accent); font-weight: 900; } .read-more { display: inline-block; padding: 8px 20px; background-color: var(--black); color: var(--white); text-decoration: none; font-size: 0.9rem; font-weight: 500; border-radius: 2px; letter-spacing: 1px; position: relative; overflow: hidden; transition: all 0.3s ease; z-index: 1; } .read-more::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: var(--accent); transition: left 0.3s ease; z-index: -1; } .read-more:hover { color: var(--white); } .read-more:hover::before { left: 0; } .tags { display: flex; flex-wrap: wrap; margin-top: 15px; } .tag { margin-right: 10px; margin-bottom: 10px; padding: 5px 10px; font-size: 0.8rem; background-color: rgba(10, 10, 10, 0.05); border-radius: 2px; transition: all 0.3s ease; } .tag:hover { background-color: var(--secondary); color: var(--white); transform: translateY(-2px); } .cursor { width: 20px; height: 20px; border-radius: 50%; background-color: rgba(255, 46, 99, 0.5); position: fixed; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); mix-blend-mode: difference; transition: transform 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } @media (max-width: 600px) { .logo { font-size: 2rem; } .article-title { font-size: 1.5rem; } .excerpt { font-size: 1rem; } .shape-outside-left, .shape-outside-right { width: 100%; height: auto; float: none; margin: 0 0 20px 0; } .shape-image { clip-path: none; } .content p:first-of-type::first-letter { font-size: 2.5rem; } } .mobile-menu { display: none; position: fixed; top: 20px; right: 20px; z-index: 100; width: 40px; height: 40px; background-color: var(--black); border-radius: 50%; justify-content: center; align-items: center; cursor: pointer; } .mobile-menu span { width: 20px; height: 2px; background-color: var(--white); position: relative; transition: all 0.3s ease; } .mobile-menu span::before, .mobile-menu span::after { content: ""; position: absolute; width: 20px; height: 2px; background-color: var(--white); transition: all 0.3s ease; } .mobile-menu span::before { top: -5px; } .mobile-menu span::after { top: 5px; } @media (max-width: 600px) { .mobile-menu { display: flex; } } .animated-gradient { position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, var(--black), var(--accent), var(--secondary), var(--black)); background-size: 300% 100%; animation: gradient 4s ease infinite; z-index: 1000; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } </style> </head> <body> <div class="cursor"></div> <div class="animated-gradient"></div> <div class="container"> <header> <h1 class="logo">FLUID</h1> <p class="tagline">Where Fashion Defies Boundaries</p> </header> <div class="mobile-menu"> <span></span> </div> <article class="article"> <h2 class="article-title">The Art of Negative Space: Fashion's New Frontier</h2> <div class="article-meta"> <span>By Alessandra Minh</span> <span>June 12, 2023</span> </div> <div class="image-container"> <img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=840&q=80" alt="Fashion Editorial" class="image-featured"> <div class="color-splash"></div> </div> <p class="excerpt"><em>In the shifting landscapes of haute couture, the interplay between form and absence creates a compelling visual language that transcends traditional boundaries.</em></p> <div class="content"> <div class="shape-outside-left"> <img src="https://images.unsplash.com/photo-1589465885857-44edb59bbff2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Model in black and white" class="shape-image"> </div> <p>The contemporary fashion landscape is witnessing a revolution in silhouette design. No longer bound by the conventional architectures of clothing, designers are embracing the fluid, the curved, and the spectacularly unconfined. What emerges is not merely garments, but sculptural statements that dance between presence and absence.</p> <p>Boundary-defying designers like Rei Kawakubo and Yohji Yamamoto have long understood the power of negative space. Their avant-garde creations don't simply clothe the body—they redefine its relationship with the surrounding environment. The interplay of solid and void becomes a conversation, rather than a boundary.</p> <div class="shape-outside-right"> <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Fashion portrait" class="shape-image"> </div> <p>This season's collections draw inspiration from liquid forms—water droplets suspended in mid-air, smoke curling through space, silk ribbons caught in a gentle breeze. The result is clothing that appears to defy the very laws of physics, creating organic contours that both frame and free the human form.</p> <p>A standout in this movement is Jonathan Anderson's latest for Loewe, where molded leather pieces curve away from the body at unexpected intervals, creating shadow spaces that become as important as the material itself. The high-contrast monochromatic palette makes these negative spaces all the more pronounced, with occasional bursts of saturated color drawing the eye to precisely calibrated points.</p> <p>The influence extends beyond garments to presentation. Fashion photography now embraces fluid composition, with models arranged in formations that create negative space between figures—breathing room that speaks as loudly as the clothing itself. It's a visual poetry where what's omitted carries as much weight as what's included.</p> </div> <a href="#" class="read-more">Continue Reading</a> <div class="tags"> <span class="tag">Haute Couture</span> <span class="tag">Minimalism</span> <span class="tag">Avant-Garde</span> <span class="tag">Fashion Week</span> </div> </article> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Custom cursor const cursor = document.querySelector('.cursor'); document.addEventListener('mousemove', function(e) { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; }); document.addEventListener('mousedown', function() { cursor.style.transform = 'translate(-50%, -50%) scale(0.8)'; }); document.addEventListener('mouseup', function() { cursor.style.transform = 'translate(-50%, -50%) scale(1)'; }); document.querySelectorAll('a, .tag, .image-container').forEach(item => { item.addEventListener('mouseenter', function() { cursor.style.width = '40px'; cursor.style.height = '40px'; cursor.style.backgroundColor = 'rgba(255, 46, 99, 0.2)'; }); item.addEventListener('mouseleave', function() { cursor.style.width = '20px'; cursor.style.height = '20px'; cursor.style.backgroundColor = 'rgba(255, 46, 99, 0.5)'; }); }); // Mobile menu toggle const mobileMenu = document.querySelector('.mobile-menu'); mobileMenu.addEventListener('click', function() { this.classList.toggle('active'); if (this.classList.contains('active')) { this.querySelector('span').style.transform = 'rotate(45deg)'; this.querySelector('span').style.backgroundColor = 'var(--accent)'; this.querySelector('span::before').style.transform = 'rotate(90deg)'; this.querySelector('span::before').style.top = '0'; this.querySelector('span::after').style.transform = 'rotate(90deg)'; this.querySelector('span::after').style.top = '0'; } else { this.querySelector('span').style.transform = 'rotate(0)'; this.querySelector('span').style.backgroundColor = 'var(--white)'; } }); // Prevent default on read more links document.querySelectorAll('.read-more').forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); this.textContent = 'Coming Soon'; setTimeout(() => { this.textContent = 'Continue Reading'; }, 2000); }); }); // Animation on scroll for elements const animateOnScroll = () => { const articles = document.querySelectorAll('.article'); articles.forEach(article => { const articlePosition = article.getBoundingClientRect().top; const screenPosition = window.innerHeight / 1.3; if (articlePosition < screenPosition) { article.style.opacity = '1'; article.style.transform = 'translateY(0)'; } }); }; window.addEventListener('scroll', animateOnScroll); animateOnScroll(); // Run once on page load // Disable cursor on touch devices if ('ontouchstart' in window || navigator.maxTouchPoints) { cursor.style.display = 'none'; } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Travel Story - The Hidden Paths of Kyoto</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } :root { --color-earth: #8B6F47; --color-sand: #D7BC8A; --color-moss: #5A6F3F; --color-terracotta: #C35A38; --color-stone: #A39288; --color-paper: #F5EFE1; } body { font-family: 'Georgia', serif; background-color: var(--color-paper); color: #333; overflow-x: hidden; width: 100%; height: 100%; max-width: 700px; max-height: 700px; margin: 0 auto; } .travel-container { position: relative; max-width: 700px; height: 700px; padding: 1rem; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-earth) var(--color-paper); } .travel-container::-webkit-scrollbar { width: 8px; } .travel-container::-webkit-scrollbar-track { background: var(--color-paper); } .travel-container::-webkit-scrollbar-thumb { background-color: var(--color-earth); border-radius: 20px; } .map-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.08; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='mapPattern' patternUnits='userSpaceOnUse' width='200' height='200'%3E%3Cpath d='M 0,50 C 50,25 50,75 100,50 C 150,25 150,75 200,50 M 0,100 C 50,75 50,125 100,100 C 150,75 150,125 200,100 M 0,150 C 50,125 50,175 100,150 C 150,125 150,175 200,150' stroke='%238B6F47' fill='none' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23mapPattern)'/%3E%3C/svg%3E"); } .title-section { padding: 1.5rem 0; text-align: center; margin-bottom: 1rem; position: relative; } h1 { font-size: 2.5rem; color: var(--color-earth); line-height: 1.2; margin-bottom: 0.5rem; font-weight: normal; position: relative; display: inline-block; } h1::after { content: ''; position: absolute; width: 100%; height: 8px; bottom: -8px; left: 0; background-image: url("data:image/svg+xml,%3Csvg width='100' height='8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 0,4 C 10,1 15,7 20,4 C 25,1 30,7 40,4 C 50,1 60,7 70,4 C 80,1 90,7 100,4' stroke='%23C35A38' fill='none' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 100px 8px; } .subtitle { font-style: italic; color: var(--color-terracotta); font-size: 1.2rem; margin-top: 1rem; } .story-section { position: relative; margin-bottom: 3rem; } .image-container { width: 100%; height: 250px; position: relative; margin: 1.5rem 0; clip-path: polygon(0% 0%, 100% 5%, 98% 95%, 5% 100%); transform: rotate(-1deg); transition: all 0.5s ease; } .image-container:hover { transform: rotate(0) scale(1.02); box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2); } .image-container img { width: 100%; height: 100%; object-fit: cover; } .image-container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(138, 111, 71, 0.5), transparent); z-index: 1; opacity: 0.7; transition: opacity 0.3s ease; } .image-container:hover::before { opacity: 0.2; } .caption { position: absolute; bottom: 15px; left: 15px; color: white; font-size: 0.9rem; z-index: 2; background-color: rgba(0, 0, 0, 0.6); padding: 5px 10px; border-radius: 3px; transform: rotate(-1deg); } .text-block { position: relative; padding: 1.5rem; background-color: rgba(255, 255, 255, 0.7); border-radius: 2px; margin: 1rem 0; z-index: 1; clip-path: polygon(1% 0%, 100% 0%, 99% 98%, 0% 100%); border-left: 4px solid var(--color-earth); } .text-block p { line-height: 1.7; margin-bottom: 1rem; } .text-block p:last-child { margin-bottom: 0; } .landmark { font-weight: bold; color: var(--color-terracotta); } .stamp { position: absolute; top: -15px; right: 20px; width: 60px; height: 60px; background-color: var(--color-terracotta); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.7rem; transform: rotate(15deg); opacity: 0.8; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); z-index: 3; } .stamp-inner { width: 52px; height: 52px; border: 1px dashed white; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 5px; } .illustrated-icon { font-size: 1.8rem; margin-right: 0.5rem; color: var(--color-moss); display: inline-block; transform-origin: center; transition: transform 0.3s ease; } .illustrated-icon:hover { transform: rotate(15deg) scale(1.2); } .journey-path { position: relative; margin: 2rem 0; padding-left: 2rem; } .journey-path::before { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: repeating-linear-gradient( to bottom, var(--color-earth) 0, var(--color-earth) 8px, transparent 8px, transparent 12px ); } .journey-marker { width: 15px; height: 15px; background-color: var(--color-terracotta); border-radius: 50%; position: absolute; left: -6px; top: 0; z-index: 2; box-shadow: 0 0 0 3px rgba(195, 90, 56, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; } .journey-marker:hover { transform: scale(1.3); box-shadow: 0 0 0 5px rgba(195, 90, 56, 0.3); } .quote-block { font-style: italic; padding: 1rem 2rem; margin: 1.5rem 0; position: relative; color: var(--color-earth); font-size: 1.1rem; line-height: 1.6; } .quote-block::before { content: """; font-size: 4rem; position: absolute; left: 0; top: -1rem; color: var(--color-sand); opacity: 0.7; font-family: Georgia, serif; } .detail-section { background-color: rgba(215, 188, 138, 0.2); border-radius: 3px; padding: 1.5rem; margin: 1.5rem 0; position: relative; overflow: hidden; } .detail-section h3 { color: var(--color-moss); margin-bottom: 1rem; position: relative; display: inline-block; } .detail-section h3::after { content: ''; position: absolute; width: 100%; height: 2px; bottom: -5px; left: 0; background-color: var(--color-moss); } .detail-list { list-style-type: none; } .detail-list li { padding: 0.5rem 0; padding-left: 1.5rem; position: relative; } .detail-list li::before { content: '→'; position: absolute; left: 0; color: var(--color-terracotta); } .compass { position: absolute; bottom: 20px; right: 20px; width: 60px; height: 60px; background-color: var(--color-paper); border-radius: 50%; border: 2px solid var(--color-earth); display: flex; align-items: center; justify-content: center; box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); cursor: pointer; z-index: 10; transition: transform 0.3s ease; } .compass:hover { transform: rotate(45deg); } .compass-inner { width: 40px; height: 40px; position: relative; } .compass-needle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4px; height: 28px; background: linear-gradient(to bottom, var(--color-terracotta) 50%, var(--color-earth) 50%); border-radius: 2px; transform-origin: center; transition: transform 0.5s ease; } .compass:hover .compass-needle { animation: compass-spin 2s ease-in-out; } @keyframes compass-spin { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } .paper-tear { height: 20px; margin: 2rem 0; background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,10 Q10,5 20,10 T40,10 T60,10 T80,10 T100,10 T120,10 T140,10 T160,10 T180,10 T200,10 T220,10 T240,10 T260,10 T280,10 T300,10 T320,10 T340,10 T360,10 T380,10 T400,10 T420,10 T440,10 T460,10 T480,10 T500,10 T520,10 T540,10 T560,10 T580,10 T600,10 T620,10 T640,10 T660,10 T680,10 T700,10' fill='none' stroke='%23D7BC8A' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: center; } @media (max-width: 600px) { h1 { font-size: 2rem; } .subtitle { font-size: 1rem; } .image-container { height: 200px; } .text-block { padding: 1rem; } .quote-block { padding: 1rem; font-size: 1rem; } } </style> </head> <body> <div class="travel-container"> <div class="map-background"></div> <div class="title-section"> <h1>The Hidden Paths of Kyoto</h1> <div class="subtitle">Walking the ancient streets between temples and tea houses</div> </div> <div class="story-section"> <div class="journey-path"> <div class="journey-marker"></div> <div class="text-block"> <p>My journey began at dawn, watching the morning mist cling to the <span class="landmark">Kiyomizu-dera temple</span> as it has for over a thousand years. Unlike the glossy pages of travel magazines, I wasn't seeking the postcard vista — I'd come for the hidden paths that wind between the tourist attractions, the spaces between the famous sites where Kyoto reveals its true character.</p> <p>The wooden terrace creaked beneath my feet as other early risers gathered, but I soon slipped away, following a narrow stone path that disappeared into a grove of bamboo.</p> <div class="stamp"> <div class="stamp-inner">Kyoto<br/>Day 1</div> </div> </div> </div> <div class="image-container"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300' viewBox='0 0 600 300'%3E%3Crect width='600' height='300' fill='%235A6F3F' /%3E%3Cpath d='M0 200 L600 180 L600 300 L0 300 Z' fill='%23897048' /%3E%3Cpath d='M150 50 L200 50 L200 250 L150 280 Z' fill='%23A39288' /%3E%3Cpath d='M220 70 L270 70 L270 260 L220 290 Z' fill='%23A39288' /%3E%3Cpath d='M290 60 L340 60 L340 250 L290 280 Z' fill='%23A39288' /%3E%3Cpath d='M360 65 L410 65 L410 255 L360 285 Z' fill='%23A39288' /%3E%3Cpath d='M430 55 L480 55 L480 245 L430 275 Z' fill='%23A39288' /%3E%3Cpath d='M150 50 L200 50 L175 0 Z' fill='%23897048' /%3E%3Cpath d='M220 70 L270 70 L245 20 Z' fill='%23897048' /%3E%3Cpath d='M290 60 L340 60 L315 10 Z' fill='%23897048' /%3E%3Cpath d='M360 65 L410 65 L385 15 Z' fill='%23897048' /%3E%3Cpath d='M430 55 L480 55 L455 5 Z' fill='%23897048' /%3E%3C/svg%3E" alt="Path through bamboo forest near Kiyomizu-dera"> <div class="caption">First light through bamboo near Kiyomizu-dera</div> </div> <div class="quote-block"> In Kyoto, the spaces between famous temples hold more truth than the temples themselves. Here, in the narrow alleyways and hidden gardens, the city reveals its secrets to those patient enough to listen. </div> <div class="journey-path"> <div class="journey-marker"></div> <div class="text-block"> <p><span class="illustrated-icon">🏮</span>The path wound down through <span class="landmark">Ninenzaka</span> and <span class="landmark">Sannenzaka</span>, the preserved historic streets where modern tourists clash with ancient architecture. I turned left where most turn right, finding myself in a residential neighborhood where laundry hung from windows and the smell of morning rice filled the air.</p> <p>An elderly woman sweeping her doorstep nodded to me, and without a word pointed down a concealed alleyway barely wide enough for my shoulders. Ten minutes later, I emerged at a tiny <span class="landmark">tea house</span> known only to locals, where the matcha was served without ceremony but with generations of expertise.</p> </div> </div> <div class="detail-section"> <h3>Navigating Kyoto's Hidden Paths</h3> <ul class="detail-list"> <li>Look for the <i>roji</i> (dewy path) – narrow alleyways that often lead to tea houses</li> <li>Follow the locals during their morning routines rather than tourist crowds</li> <li>The best temples are often the unnamed ones with single monks tending gardens</li> <li>Markets like Nishiki are worth exploring, but arrive before 8am to see the real action</li> <li>When lost, follow the flow of water – Kyoto's streams often lead to surprising discoveries</li> </ul> </div> <div class="paper-tear"></div> <div class="journey-path"> <div class="journey-marker"></div> <div class="text-block"> <p>By midday, I'd reached <span class="landmark">Arashiyama</span>, but instead of heading straight for the famous bamboo grove, I followed a winding path along the riverbank. Fishermen sat motionless with lines cast into the shallow water, so still they seemed part of the landscape.</p> <p><span class="illustrated-icon">🍵</span>A makeshift shelter constructed of weathered wood stood by the river's edge. Inside, an ancient man prepared river fish over coals, serving them on ceramic plates that looked as old as he was. We shared no common language, but he gestured to the worn tatami beside him, and I spent the afternoon watching the Katsura River flow past while he occasionally refreshed my tea without a word.</p> </div> </div> <div class="image-container"> <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300' viewBox='0 0 600 300'%3E%3Crect width='600' height='300' fill='%23D7BC8A' /%3E%3Cpath d='M0 180 L600 200 L600 300 L0 300 Z' fill='%235A6F3F' /%3E%3Cpath d='M50 50 L550 50 L550 150 L50 150 Z' fill='%23C35A38' /%3E%3Cpath d='M200 100 L250 100 L250 150 L200 150 Z' fill='%23F5EFE1' /%3E%3Cpath d='M350 100 L400 100 L400 150 L350 150 Z' fill='%23F5EFE1' /%3E%3Cpath d='M100 220 L500 230 L430 300 L180 300 Z' fill='%23A39288' /%3E%3Cpath d='M250 180 L350 180 L350 220 L250 220 Z' fill='%23A39288' /%3E%3Ccircle cx='150' cy='100' r='20' fill='%23F5EFE1' /%3E%3Ccircle cx='450' cy='100' r='20' fill='%23F5EFE1' /%3E%3C/svg%3E" alt="Riverside tea house near Arashiyama"> <div class="caption">The riverside tea house where time stood still</div> </div> <div class="journey-path"> <div class="journey-marker"></div> <div class="text-block"> <p>As evening approached, I followed a series of small Shinto shrines, each seemingly leading to the next like breadcrumbs through the quiet neighborhoods. At <span class="landmark">Fushimi Inari Taisha</span>, tourists crowded the first few orange torii gates, snapping identical photos. Instead, I climbed.</p> <p><span class="illustrated-icon">⛩️</span>Beyond the fifth switchback, the crowds thinned. Above the tenth, I walked alone through corridors of vermilion gates, each donated by a business hoping for prosperity. At the very top, as darkness fell, a single lantern illuminated an ancient sub-shrine where moss had nearly reclaimed the stone fox guardians.</p> <p>Here, in the growing darkness, Kyoto revealed its truest face – not a preserved relic or tourist attraction, but a living, breathing entity that has absorbed centuries of human experience while remaining fundamentally unchanged.</p> </div> </div> <div class="quote-block"> Maps may direct you to temples, but it's the unmapped spaces that hold Kyoto's soul. Follow the gaps in the tourist trail, and you'll find the city that locals cherish. </div> </div> <div class="compass"> <div class="compass-inner"> <div class="compass-needle"></div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Animate the story elements as they enter viewport const storyElements = document.querySelectorAll('.text-block, .image-container, .quote-block, .detail-section'); // Create intersection observer const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = 1; entry.target.style.transform = 'translateY(0)'; observer.unobserve(entry.target); } }); }, { threshold: 0.1 }); // Apply initial styles and observe each element storyElements.forEach(element => { element.style.opacity = 0; element.style.transform = 'translateY(20px)'; element.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; observer.observe(element); }); // Interactive compass that responds to scrolling const compass = document.querySelector('.compass'); const compassNeedle = document.querySelector('.compass-needle'); document.addEventListener('scroll', function() { const scrollPercentage = (window.scrollY) / (document.body.scrollHeight - window.innerHeight); const rotation = scrollPercentage * 360; compassNeedle.style.transform = `translate(-50%, -50%) rotate(${rotation}deg)`; }); // Add click effect to compass compass.addEventListener('click', function() { window.scrollTo({ top: 0, behavior: 'smooth' }); }); // Make journey markers interactive const journeyMarkers = document.querySelectorAll('.journey-marker'); journeyMarkers.forEach((marker, index) => { marker.addEventListener('click', function() { const textBlock = this.parentElement.querySelector('.text-block'); textBlock.style.backgroundColor = 'rgba(255, 255, 255, 0.9)'; setTimeout(() => { textBlock.style.backgroundColor = 'rgba(255, 255, 255, 0.7)'; }, 300); }); }); // Image hover effect const images = document.querySelectorAll('.image-container'); images.forEach(image => { image.addEventListener('mouseenter', function() { this.style.zIndex = 5; }); image.addEventListener('mouseleave', function() { this.style.zIndex = 1; }); }); }); </script> </body> </html>
<html> <head> <style> :root { --primary-color: #f0f0f0; --secondary-color: #121212; --accent-color: #ff3e4d; --tertiary-color: #3e4fff; --transition-time: 0.4s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } body { background-color: var(--primary-color); color: var(--secondary-color); overflow-x: hidden; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .portfolio-container { position: relative; width: 700px; height: 700px; overflow: hidden; } .intro-section { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; transition: transform var(--transition-time) ease-out; background-color: var(--secondary-color); clip-path: polygon(0 0, 100% 0, 100% 85%, 75% 100%, 0 100%); } .intro-section.hide { transform: translateY(-100%); } .intro-title { font-size: 3rem; font-weight: 700; color: var(--primary-color); margin-bottom: 1rem; letter-spacing: -1px; } .intro-subtitle { font-size: 1.2rem; color: #999; margin-bottom: 2rem; max-width: 70%; text-align: center; } .enter-btn { background: transparent; border: 1px solid var(--primary-color); color: var(--primary-color); padding: 0.8rem 2rem; font-size: 1rem; cursor: pointer; transition: all var(--transition-time); position: relative; overflow: hidden; } .enter-btn:before { content: ''; position: absolute; background: var(--accent-color); width: 0; height: 100%; top: 0; left: 0; transition: width var(--transition-time); z-index: -1; } .enter-btn:hover { color: var(--secondary-color); } .enter-btn:hover:before { width: 100%; } .gallery-section { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 1fr); gap: 10px; padding: 30px; background-color: var(--primary-color); } .art-item { background-color: #f0f0f0; border-radius: 2px; overflow: hidden; position: relative; transition: transform 0.3s ease-out; cursor: pointer; } .art-item:hover { transform: scale(1.02); z-index: 2; } .art-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.2); opacity: 0; transition: opacity 0.3s; } .art-item:hover::before { opacity: 1; } .art-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .art-item:hover img { transform: scale(1.1); } .art-item.large { grid-column: span 5; grid-row: span 5; clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%); } .art-item.medium { grid-column: span 4; grid-row: span 4; clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%, 0 15%); } .art-item.small { grid-column: span 3; grid-row: span 3; clip-path: polygon(0 0, 100% 0, 100% 100%, 15% 100%, 0 85%); } .item-1 { grid-column: 1 / span 5; grid-row: 1 / span 5; } .item-2 { grid-column: 6 / span 4; grid-row: 1 / span 4; } .item-3 { grid-column: 10 / span 3; grid-row: 1 / span 3; } .item-4 { grid-column: 1 / span 3; grid-row: 6 / span 3; } .item-5 { grid-column: 4 / span 4; grid-row: 6 / span 4; } .item-6 { grid-column: 8 / span 5; grid-row: 5 / span 5; } .item-7 { grid-column: 1 / span 4; grid-row: 9 / span 4; } .item-8 { grid-column: 5 / span 3; grid-row: 10 / span 3; } .item-9 { grid-column: 8 / span 5; grid-row: 10 / span 3; } .art-info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); color: white; transform: translateY(100%); transition: transform 0.3s; } .art-item:hover .art-info { transform: translateY(0); } .art-title { font-size: 0.9rem; font-weight: 600; margin-bottom: 0.3rem; } .art-desc { font-size: 0.7rem; opacity: 0.8; } .menu { position: fixed; top: 30px; right: 30px; z-index: 100; } .menu-icon { height: 30px; width: 30px; position: relative; cursor: pointer; } .menu-icon span { height: 2px; width: 100%; background-color: var(--secondary-color); position: absolute; transition: all 0.3s; } .menu-icon span:nth-child(1) { top: 0; } .menu-icon span:nth-child(2) { top: 10px; } .menu-icon span:nth-child(3) { top: 20px; } .menu-icon.active span:nth-child(1) { transform: rotate(45deg); top: 10px; } .menu-icon.active span:nth-child(2) { opacity: 0; } .menu-icon.active span:nth-child(3) { transform: rotate(-45deg); top: 10px; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.9); z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .modal.open { opacity: 1; visibility: visible; } .modal-content { width: 80%; max-width: 600px; max-height: 80vh; position: relative; overflow: hidden; display: flex; flex-direction: column; clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%); } .modal-image { width: 100%; max-height: 60vh; object-fit: contain; } .modal-details { padding: 1.5rem; background-color: var(--primary-color); } .modal-title { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--secondary-color); } .modal-desc { font-size: 0.9rem; color: #666; line-height: 1.5; } .close-modal { position: absolute; top: 20px; right: 20px; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; z-index: 1100; } .art-detail { margin-top: 10px; font-size: 0.7rem; color: rgba(255, 255, 255, 0.6); } .shape-decorator { position: absolute; background-color: var(--accent-color); opacity: 0.15; transition: all 0.5s ease; pointer-events: none; } .shape-1 { width: 150px; height: 150px; top: -30px; left: 10%; border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } .shape-2 { width: 120px; height: 120px; bottom: 50px; right: 10%; border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; background-color: var(--tertiary-color); } .nav-dots { position: fixed; top: 50%; right: 30px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 5; } .nav-dot { width: 10px; height: 10px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.2); transition: all 0.3s; cursor: pointer; } .nav-dot.active { background-color: var(--accent-color); transform: scale(1.3); } @media (max-width: 700px) { .gallery-section { padding: 15px; gap: 5px; } .intro-title { font-size: 2rem; } .intro-subtitle { font-size: 1rem; max-width: 85%; } .art-title { font-size: 0.7rem; } .art-desc { font-size: 0.6rem; } .nav-dots { right: 10px; } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } </style> </head> <body> <div class="portfolio-container"> <div class="intro-section"> <h1 class="intro-title">ABSTRACT SPACES</h1> <p class="intro-subtitle">A collection of works exploring form, negative space, and the intersection of geometric abstraction</p> <button class="enter-btn">ENTER GALLERY</button> </div> <div class="gallery-section"> <div class="shape-decorator shape-1"></div> <div class="shape-decorator shape-2"></div> <div class="art-item large item-1"> <img src="https://images.unsplash.com/photo-1566765277677-39a1a01578b8?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Abstract painting"> <div class="art-info"> <h3 class="art-title">Chromatic Convergence</h3> <p class="art-desc">Exploring the tension between order and chaos through geometric abstraction</p> <p class="art-detail">Acrylic on canvas, 2021</p> </div> </div> <div class="art-item medium item-2"> <img src="https://images.unsplash.com/photo-1600758208050-a22f17dc5bb9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Geometric sculpture"> <div class="art-info"> <h3 class="art-title">Spatial Construct No.7</h3> <p class="art-desc">Three-dimensional abstraction examining negative space</p> <p class="art-detail">Steel, wood, resin, 2022</p> </div> </div> <div class="art-item small item-3"> <img src="https://images.unsplash.com/photo-1601084194829-bc8c0206d473?ixlib=rb-4.0.3&auto=format&fit=crop&w=700&q=80" alt="Digital abstraction"> <div class="art-info"> <h3 class="art-title">Digital Deformation</h3> <p class="art-desc">Digital composition exploring fluid boundaries</p> <p class="art-detail">Digital media, 2023</p> </div> </div> <div class="art-item small item-4"> <img src="https://images.unsplash.com/photo-1557672172-298e090bd0f1?ixlib=rb-4.0.3&auto=format&fit=crop&w=700&q=80" alt="Minimalist composition"> <div class="art-info"> <h3 class="art-title">Minimal Study #14</h3> <p class="art-desc">Reduction to essential forms and colors</p> <p class="art-detail">Oil on panel, 2021</p> </div> </div> <div class="art-item medium item-5"> <img src="https://images.unsplash.com/photo-1604871000636-074fa5117945?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Architectural abstraction"> <div class="art-info"> <h3 class="art-title">Architectural Void</h3> <p class="art-desc">The interplay between architectural forms and shadow</p> <p class="art-detail">Photography/Digital manipulation, 2023</p> </div> </div> <div class="art-item large item-6"> <img src="https://images.unsplash.com/photo-1550859492-d5da9d8e45f3?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Geometric abstract"> <div class="art-info"> <h3 class="art-title">Fractal Harmony</h3> <p class="art-desc">Complex geometric patterns creating visual rhythm</p> <p class="art-detail">Mixed media on canvas, 2022</p> </div> </div> <div class="art-item medium item-7"> <img src="https://images.unsplash.com/photo-1573221566340-81bdde00e00b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Color field painting"> <div class="art-info"> <h3 class="art-title">Color Field Study</h3> <p class="art-desc">Exploration of perception through color gradients</p> <p class="art-detail">Acrylic on canvas, 2022</p> </div> </div> <div class="art-item small item-8"> <img src="https://images.unsplash.com/photo-1543857778-c4a1a3e0b2eb?ixlib=rb-4.0.3&auto=format&fit=crop&w=700&q=80" alt="Textural abstract"> <div class="art-info"> <h3 class="art-title">Textural Relief</h3> <p class="art-desc">Examining materiality and three-dimensional space</p> <p class="art-detail">Paper and acrylic on wood, 2023</p> </div> </div> <div class="art-item medium item-9"> <img src="https://images.unsplash.com/photo-1605106702734-205df224ecce?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="Monochromatic sculpture"> <div class="art-info"> <h3 class="art-title">Monochrome Object</h3> <p class="art-desc">Form and shadow in a reductive palette</p> <p class="art-detail">Plaster and pigment, 2021</p> </div> </div> </div> <div class="nav-dots"> <div class="nav-dot active"></div> <div class="nav-dot"></div> <div class="nav-dot"></div> </div> </div> <div class="modal"> <button class="close-modal">×</button> <div class="modal-content"> <img class="modal-image" src="" alt=""> <div class="modal-details"> <h2 class="modal-title"></h2> <p class="modal-desc"></p> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const enterBtn = document.querySelector('.enter-btn'); const introSection = document.querySelector('.intro-section'); const artItems = document.querySelectorAll('.art-item'); const modal = document.querySelector('.modal'); const closeModal = document.querySelector('.close-modal'); const modalImage = document.querySelector('.modal-image'); const modalTitle = document.querySelector('.modal-title'); const modalDesc = document.querySelector('.modal-desc'); const shapes = document.querySelectorAll('.shape-decorator'); const navDots = document.querySelectorAll('.nav-dot'); // Enter button functionality enterBtn.addEventListener('click', function() { introSection.classList.add('hide'); }); // Mouse move effect for shapes document.addEventListener('mousemove', function(e) { const x = e.clientX / window.innerWidth; const y = e.clientY / window.innerHeight; shapes.forEach(shape => { const shapeX = (x - 0.5) * 20; const shapeY = (y - 0.5) * 20; shape.style.transform = `translate(${shapeX}px, ${shapeY}px) rotate(${shapeX * 2}deg)`; }); }); // Modal functionality artItems.forEach(item => { item.addEventListener('click', function() { const img = this.querySelector('img').src; const title = this.querySelector('.art-title').textContent; const desc = this.querySelector('.art-desc').textContent; const detail = this.querySelector('.art-detail').textContent; modalImage.src = img; modalTitle.textContent = title; modalDesc.textContent = `${desc}. ${detail}`; modal.classList.add('open'); }); }); closeModal.addEventListener('click', function() { modal.classList.remove('open'); }); // Close modal when clicking outside modal.addEventListener('click', function(e) { if (e.target === modal) { modal.classList.remove('open'); } }); // Nav dots functionality (simulating multiple pages) navDots.forEach((dot, index) => { dot.addEventListener('click', function() { navDots.forEach(d => d.classList.remove('active')); this.classList.add('active'); // This would normally change gallery pages // For demo, we'll just add a visual feedback const artItems = document.querySelectorAll('.art-item'); artItems.forEach(item => { item.style.opacity = '0.2'; setTimeout(() => { item.style.opacity = '1'; }, 400); }); }); }); // Add subtle animation to art items on load setTimeout(() => { artItems.forEach((item, index) => { setTimeout(() => { item.style.animation = 'pulse 2s'; setTimeout(() => { item.style.animation = ''; }, 2000); }, index * 100); }); }, 1000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Whimsy Wonderland: Interactive Children's Stories</title> <style> :root { --primary: #FF6B6B; --secondary: #4ECDC4; --accent1: #FFD166; --accent2: #A076F9; --accent3: #6BD490; --dark: #2A2D34; --light: #F7F9FC; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Comic Sans MS', cursive, sans-serif; } body { background-color: var(--light); overflow-x: hidden; height: 700px; width: 700px; max-width: 100%; max-height: 100%; } .container { width: 100%; height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; } .header { text-align: center; padding: 15px; background-color: var(--secondary); border-radius: 0 0 30px 30px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); position: relative; z-index: 10; } .header h1 { color: var(--light); font-size: 2.5rem; letter-spacing: 1px; text-shadow: 2px 2px 0px var(--accent2); margin-bottom: 5px; } .header p { color: var(--light); font-size: 1rem; } .story-container { flex: 1; display: flex; position: relative; perspective: 1000px; padding: 20px; overflow: hidden; } .shape-container { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; pointer-events: none; } .shape { position: absolute; border-radius: 50%; opacity: 0.4; transition: all 0.5s ease; animation: float 8s infinite ease-in-out; } .shape:nth-child(1) { width: 120px; height: 120px; background-color: var(--accent1); top: 10%; left: 10%; animation-delay: 0s; } .shape:nth-child(2) { width: 150px; height: 90px; background-color: var(--accent2); top: 60%; left: 70%; border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; animation-delay: 1s; } .shape:nth-child(3) { width: 100px; height: 100px; background-color: var(--primary); top: 40%; left: 20%; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; animation-delay: 2s; } .shape:nth-child(4) { width: 80px; height: 80px; background-color: var(--accent3); top: 20%; left: 80%; border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; animation-delay: 3s; } @keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(5deg); } } .story-panel { background-color: white; border-radius: 30px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); padding: 25px; margin: 10px; width: calc(100% - 20px); height: calc(100% - 20px); z-index: 5; position: relative; overflow: hidden; transition: transform 0.5s ease; transform-style: preserve-3d; } .story-panel:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); } .story-content { display: flex; flex-direction: column; height: 100%; } .story-title { color: var(--primary); font-size: 1.8rem; margin-bottom: 15px; text-align: center; position: relative; } .story-title::after { content: ""; position: absolute; width: 50%; height: 4px; background-color: var(--accent1); bottom: -5px; left: 25%; border-radius: 10px; } .story-image-container { position: relative; width: 100%; height: 200px; margin-bottom: 15px; overflow: hidden; border-radius: 20px; } .story-image { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; transition: transform 0.5s ease; } .story-image-container:hover .story-image { transform: scale(1.05); } .character { position: absolute; cursor: pointer; transition: all 0.3s ease; } #blob { width: 80px; height: 80px; background-color: var(--accent2); border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; bottom: 20px; left: 30px; animation: blobby 4s infinite alternate ease-in-out; } #star { width: 60px; height: 60px; background-color: var(--accent1); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); top: 30px; right: 40px; animation: twinkle 3s infinite alternate ease-in-out; } #cloud { width: 100px; height: 60px; background-color: var(--light); border-radius: 50px; top: 10px; left: 100px; animation: float 6s infinite ease-in-out; box-shadow: 0 5px 10px rgba(0,0,0,0.1); } #cloud:before { content: ""; position: absolute; width: 50px; height: 50px; background-color: var(--light); border-radius: 50%; bottom: 10px; left: 15px; } #cloud:after { content: ""; position: absolute; width: 60px; height: 60px; background-color: var(--light); border-radius: 50%; bottom: 5px; right: 15px; } @keyframes blobby { 0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } } @keyframes twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.8; } } .story-text { font-size: 1rem; line-height: 1.5; color: var(--dark); flex-grow: 1; overflow-y: auto; padding-right: 10px; margin-bottom: 15px; } .story-text::-webkit-scrollbar { width: 8px; } .story-text::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; } .story-text::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 10px; } .story-text p { margin-bottom: 15px; } .page-controls { display: flex; justify-content: space-between; margin-top: auto; } .page-button { background-color: var(--accent2); color: white; border: none; padding: 10px 20px; border-radius: 50px; cursor: pointer; font-size: 1rem; font-weight: bold; transition: all 0.3s ease; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); display: flex; align-items: center; gap: 5px; } .page-button:hover { background-color: var(--primary); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); } .page-button:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .page-button.prev { background-color: var(--accent3); } .page-indicator { display: flex; gap: 8px; justify-content: center; margin-top: 10px; } .page-dot { width: 12px; height: 12px; border-radius: 50%; background-color: #ddd; transition: all 0.3s ease; } .page-dot.active { background-color: var(--primary); transform: scale(1.2); } @media (max-width: 600px) { .header h1 { font-size: 2rem; } .story-title { font-size: 1.5rem; } .story-text { font-size: 0.9rem; } .page-button { padding: 8px 15px; font-size: 0.9rem; } .story-image-container { height: 150px; } #blob { width: 60px; height: 60px; } #star { width: 40px; height: 40px; } #cloud { width: 80px; height: 50px; } } .character-info { position: absolute; background-color: white; border-radius: 15px; padding: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); opacity: 0; transform: translateY(10px); transition: all 0.3s ease; z-index: 20; pointer-events: none; width: 150px; } .character-info.show { opacity: 1; transform: translateY(0); } .character-info h4 { color: var(--primary); margin-bottom: 5px; } .character-info p { font-size: 0.8rem; color: var(--dark); } /* Page transition animation */ .page-transition { animation: pageFlip 0.8s ease-in-out; } @keyframes pageFlip { 0% { transform: rotateY(0deg); opacity: 1; } 50% { transform: rotateY(90deg); opacity: 0.5; } 100% { transform: rotateY(0deg); opacity: 1; } } </style> </head> <body> <div class="container"> <header class="header"> <h1>Whimsy Wonderland</h1> <p>Where shapes come alive!</p> </header> <div class="story-container"> <div class="shape-container"> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> </div> <div class="story-panel" id="storyPanel"> <div class="story-content"> <h2 class="story-title">The Blob, The Star, and The Cloud</h2> <div class="story-image-container"> <div class="character" id="blob"></div> <div class="character" id="star"></div> <div class="character" id="cloud"></div> </div> <div class="story-text"> <p>Once upon a time in Shape Village, there lived three best friends: Blobby the Blob, Twinkle the Star, and Fluffy the Cloud.</p> <p>Blobby could change into any shape he wanted. Sometimes he was round like a ball, and other times he stretched like taffy. "Being different shapes is fun!" Blobby would say as he bounced around.</p> <p>Twinkle sparkled in the night sky. She loved to shine brightly to help lost travelers find their way home. "Everyone deserves to shine in their own special way," Twinkle often said.</p> <p>Fluffy floated peacefully above them all. He could make rain to water the flowers or provide shade on hot sunny days. "I'm happiest when I'm helping others," Fluffy would whisper as he drifted by.</p> <p>Click on each character to learn more about them!</p> </div> <div class="page-controls"> <button class="page-button prev" id="prevButton">← Previous</button> <button class="page-button next" id="nextButton">Next →</button> </div> <div class="page-indicator"> <span class="page-dot active" data-page="1"></span> <span class="page-dot" data-page="2"></span> <span class="page-dot" data-page="3"></span> </div> </div> </div> <div id="characterInfo" class="character-info"> <h4>Character</h4> <p>Click on characters to learn about them!</p> </div> </div> </div> <script> const storyPanel = document.getElementById('storyPanel'); const nextButton = document.getElementById('nextButton'); const prevButton = document.getElementById('prevButton'); const pageDots = document.querySelectorAll('.page-dot'); const characters = document.querySelectorAll('.character'); const characterInfo = document.getElementById('characterInfo'); let currentPage = 1; const totalPages = 3; const storyContent = [ { title: "The Blob, The Star, and The Cloud", text: `<p>Once upon a time in Shape Village, there lived three best friends: Blobby the Blob, Twinkle the Star, and Fluffy the Cloud.</p> <p>Blobby could change into any shape he wanted. Sometimes he was round like a ball, and other times he stretched like taffy. "Being different shapes is fun!" Blobby would say as he bounced around.</p> <p>Twinkle sparkled in the night sky. She loved to shine brightly to help lost travelers find their way home. "Everyone deserves to shine in their own special way," Twinkle often said.</p> <p>Fluffy floated peacefully above them all. He could make rain to water the flowers or provide shade on hot sunny days. "I'm happiest when I'm helping others," Fluffy would whisper as he drifted by.</p> <p>Click on each character to learn more about them!</p>` }, { title: "The Great Shape Adventure", text: `<p>One morning, the three friends decided to go on an adventure to Polygon Mountain, where all shapes were born.</p> <p>"I hear there's a magical shape-shifter at the top," Blobby wobbled excitedly. "Maybe they can teach me new shapes!"</p> <p>Twinkle twinkled brightly, "And I can collect stardust to make my points even shinier!"</p> <p>Fluffy puffed up proudly, "I'll keep you both cool during our journey."</p> <p>Along the way, they met Triangle Tina who was stuck in a pointy bush. "Help me!" she cried.</p> <p>Blobby transformed into a smooth slide, Twinkle lit up the path, and Fluffy provided a soft landing. Together, they helped Triangle Tina get free!</p>` }, { title: "The Shape Festival", text: `<p>When they reached Polygon Mountain, they found all the shapes celebrating the annual Shape Festival!</p> <p>Circles were rolling, squares were stacking, and triangles were forming beautiful patterns together.</p> <p>"Wow!" exclaimed Blobby, "Everyone is using what makes them special to create something beautiful!"</p> <p>The Shape Master approached our three friends. "You three demonstrated the most important lesson of all—different shapes working together can solve any problem."</p> <p>From that day on, Blobby, Twinkle, and Fluffy taught everyone in Shape Village how combining their unique abilities could create wonderful things.</p> <p>And remember: Just like our shape friends, what makes you different is what makes you special!</p>` } ]; // Character info data const characterData = { blob: { name: "Blobby the Blob", info: "A shape-shifter who can transform into any form. Loves bouncing around and making friends laugh." }, star: { name: "Twinkle the Star", info: "Shines brightly to guide lost travelers. Has five points that each represent a different value: kindness, courage, wisdom, joy, and friendship." }, cloud: { name: "Fluffy the Cloud", info: "A helpful cloud who can make rain or provide shade. Dreams of traveling around the world to help plants grow everywhere." } }; // Update page content based on current page function updatePage() { const content = storyContent[currentPage - 1]; // Add page transition animation storyPanel.classList.add('page-transition'); setTimeout(() => { document.querySelector('.story-title').textContent = content.title; document.querySelector('.story-text').innerHTML = content.text; // Update active page dot pageDots.forEach(dot => { dot.classList.remove('active'); if (parseInt(dot.dataset.page) === currentPage) { dot.classList.add('active'); } }); // Remove animation class after transition setTimeout(() => { storyPanel.classList.remove('page-transition'); }, 800); }, 400); // Update button states prevButton.disabled = currentPage === 1; nextButton.disabled = currentPage === totalPages; } // Event listeners for next/prev buttons nextButton.addEventListener('click', () => { if (currentPage < totalPages) { currentPage++; updatePage(); } }); prevButton.addEventListener('click', () => { if (currentPage > 1) { currentPage--; updatePage(); } }); // Event listeners for page indicator dots pageDots.forEach(dot => { dot.addEventListener('click', () => { currentPage = parseInt(dot.dataset.page); updatePage(); }); }); // Character interaction characters.forEach(character => { character.addEventListener('mouseenter', (e) => { const characterType = character.id; const data = characterData[characterType]; // Position the info box near the character const rect = character.getBoundingClientRect(); characterInfo.style.top = `${rect.top - 10}px`; characterInfo.style.left = `${rect.left + rect.width + 10}px`; // Update content and show info box characterInfo.innerHTML = `<h4>${data.name}</h4><p>${data.info}</p>`; characterInfo.classList.add('show'); }); character.addEventListener('mouseleave', () => { characterInfo.classList.remove('show'); }); // For mobile/touch devices character.addEventListener('click', (e) => { const characterType = character.id; const data = characterData[characterType]; // Position the info box near the character const rect = character.getBoundingClientRect(); characterInfo.style.top = `${rect.top - 10}px`; characterInfo.style.left = `${rect.left + rect.width + 10}px`; // Update content and show info box characterInfo.innerHTML = `<h4>${data.name}</h4><p>${data.info}</p>`; // Toggle visibility characterInfo.classList.toggle('show'); e.stopPropagation(); }); }); // Close character info when clicking elsewhere document.addEventListener('click', () => { characterInfo.classList.remove('show'); }); // Add mousemove interaction for shapes document.addEventListener('mousemove', (e) => { const mouseX = e.clientX / window.innerWidth; const mouseY = e.clientY / window.innerHeight; const shapes = document.querySelectorAll('.shape'); shapes.forEach((shape, index) => { const offsetX = (mouseX - 0.5) * (index + 1) * 20; const offsetY = (mouseY - 0.5) * (index + 1) * 20; shape.style.transform = `translate(${offsetX}px, ${offsetY}px) rotate(${offsetX}deg)`; }); }); // Initialize first page updatePage(); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary-green: #2e8b57; --light-green: #8fbc8f; --dark-green: #006400; --accent-teal: #20b2aa; --soft-cream: #fffaf0; --leaf-shadow: rgba(0, 100, 0, 0.2); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--soft-cream); color: #333; overflow-x: hidden; width: 100%; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .container { max-width: 700px; width: 100%; height: 700px; position: relative; overflow: hidden; } .background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="700" height="700" viewBox="0 0 700 700"><defs><linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%232e8b57;stop-opacity:0.7" /><stop offset="100%" style="stop-color:%2320b2aa;stop-opacity:0.5" /></linearGradient></defs><rect width="700" height="700" fill="url(%23grad1)" /></svg>'); background-size: cover; opacity: 0.8; z-index: -1; } .water-ripple { position: absolute; width: 50px; height: 50px; background: radial-gradient(circle, rgba(32, 178, 170, 0.6) 0%, rgba(32, 178, 170, 0) 70%); border-radius: 50%; transform: scale(0); animation: ripple 8s linear infinite; } @keyframes ripple { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(20); opacity: 0; } } header { padding: 25px 20px; text-align: center; position: relative; } .logo { position: relative; display: inline-block; font-size: 2rem; font-weight: bold; color: var(--dark-green); letter-spacing: 1px; margin-bottom: 10px; } .logo::before { content: ''; position: absolute; top: -10px; left: -15px; width: 30px; height: 30px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%232e8b57" d="M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7,8 17,8 17,8Z"/></svg>'); background-size: contain; background-repeat: no-repeat; opacity: 0.8; transform: rotate(-15deg); transition: transform 0.3s ease; } .logo:hover::before { transform: rotate(0deg) scale(1.2); } .tagline { font-size: 1rem; font-style: italic; color: var(--dark-green); margin-bottom: 15px; } .main-content { display: flex; flex-direction: column; align-items: center; padding: 20px; } .leaf-section { width: 100%; margin-bottom: 30px; position: relative; overflow: hidden; border-radius: 15px; transition: transform 0.3s ease; cursor: pointer; } .leaf-section:hover { transform: translateY(-5px); } .leaf-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.15; z-index: -1; transform: rotate(0deg) scale(1); transition: transform 0.5s ease; } .leaf-section:hover .leaf-bg { transform: rotate(5deg) scale(1.1); } .leaf-bg svg { width: 100%; height: 100%; } .section-content { padding: 20px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6)); border-radius: 15px; box-shadow: 0 5px 15px var(--leaf-shadow); backdrop-filter: blur(5px); } .section-title { font-size: 1.4rem; color: var(--dark-green); margin-bottom: 10px; position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--primary-green); transition: width 0.3s ease; } .leaf-section:hover .section-title::after { width: 100%; } .section-text { font-size: 0.95rem; line-height: 1.6; color: #333; } .eco-fact { display: inline-block; margin-top: 15px; font-size: 0.9rem; color: var(--dark-green); padding: 5px 10px; border-radius: 20px; background-color: rgba(143, 188, 143, 0.3); border-left: 3px solid var(--primary-green); } .actions-section { width: 100%; display: flex; justify-content: space-around; flex-wrap: wrap; margin-top: 20px; } .action-card { flex: 0 0 calc(33.333% - 20px); max-width: calc(33.333% - 20px); min-width: 150px; background: linear-gradient(145deg, var(--light-green), var(--primary-green)); border-radius: 15px; padding: 15px; margin-bottom: 20px; color: white; text-align: center; box-shadow: 0 4px 8px var(--leaf-shadow); position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .action-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px var(--leaf-shadow); } .action-card::before { content: ''; position: absolute; top: -10px; right: -10px; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.2); border-radius: 50%; transform: scale(0); transition: transform 0.5s ease; } .action-card:hover::before { transform: scale(5); } .action-icon { font-size: 2rem; margin-bottom: 10px; } .action-title { font-size: 1.1rem; font-weight: bold; margin-bottom: 5px; } .action-desc { font-size: 0.85rem; opacity: 0.9; } .leaf-counter { width: 100%; background: linear-gradient(90deg, var(--primary-green), var(--accent-teal)); border-radius: 15px; padding: 20px; margin-top: 20px; color: white; text-align: center; box-shadow: 0 5px 15px var(--leaf-shadow); position: relative; overflow: hidden; } .counter-title { font-size: 1.3rem; margin-bottom: 15px; } .counter-value { font-size: 2.5rem; font-weight: bold; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); } .counter-text { font-size: 0.9rem; opacity: 0.9; } .water-drops { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .water-drop { position: absolute; width: 10px; height: 15px; background-color: rgba(255, 255, 255, 0.6); border-radius: 5px 5px 15px 15px; animation: falling-drop 3s linear infinite; opacity: 0; } @keyframes falling-drop { 0% { transform: translateY(-20px) rotate(0deg); opacity: 0; } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { transform: translateY(700px) rotate(45deg); opacity: 0; } } .floating-leaf { position: absolute; width: 30px; height: 20px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%232e8b57" d="M17,8C8,10 5.9,16.17 3.82,21.34L5.71,22L6.66,19.7C7.14,19.87 7.64,20 8,20C19,20 22,3 22,3C21,5 14,5.25 9,6.25C4,7.25 2,11.5 2,13.5C2,15.5 3.75,17.25 3.75,17.25C7,8 17,8 17,8Z"/></svg>'); background-size: contain; background-repeat: no-repeat; animation: floating 10s ease-in-out infinite; opacity: 0.7; } @keyframes floating { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(15px, 15px) rotate(5deg); } 50% { transform: translate(0, 30px) rotate(0deg); } 75% { transform: translate(-15px, 15px) rotate(-5deg); } 100% { transform: translate(0, 0) rotate(0deg); } } .commitment-form { width: 100%; margin-top: 25px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)); border-radius: 15px; padding: 20px; box-shadow: 0 5px 15px var(--leaf-shadow); } .form-title { font-size: 1.3rem; color: var(--dark-green); margin-bottom: 15px; text-align: center; } .form-group { margin-bottom: 15px; } .form-label { display: block; margin-bottom: 5px; color: var(--dark-green); font-size: 0.9rem; } .form-input { width: 100%; padding: 10px 15px; border: 1px solid var(--light-green); border-radius: 8px; font-size: 1rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; outline: none; } .form-input:focus { border-color: var(--primary-green); box-shadow: 0 0 0 3px rgba(46, 139, 87, 0.2); } .form-select { width: 100%; padding: 10px 15px; border: 1px solid var(--light-green); border-radius: 8px; font-size: 1rem; background-color: white; cursor: pointer; appearance: none; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%232e8b57" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>'); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; } .submit-btn { width: 100%; padding: 12px; background: linear-gradient(90deg, var(--primary-green), var(--accent-teal)); color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 4px 6px var(--leaf-shadow); position: relative; overflow: hidden; } .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 12px var(--leaf-shadow); } .submit-btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.5); opacity: 0; border-radius: 100%; transform: scale(1, 1) translate(-50%); transform-origin: 50% 50%; } .submit-btn:focus::after { animation: ripple-effect 1s ease-out; } @keyframes ripple-effect { 0% { transform: scale(0, 0); opacity: 0.5; } 100% { transform: scale(20, 20); opacity: 0; } } .success-message { display: none; padding: 15px; background-color: rgba(143, 188, 143, 0.3); border-radius: 8px; border-left: 4px solid var(--primary-green); margin-top: 15px; color: var(--dark-green); font-weight: bold; text-align: center; } footer { width: 100%; text-align: center; padding: 15px 0; font-size: 0.8rem; color: var(--dark-green); position: relative; margin-top: 15px; } .social-icons { display: flex; justify-content: center; margin-top: 10px; gap: 15px; } .social-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background-color: var(--primary-green); color: white; border-radius: 50%; transition: transform 0.3s ease, background-color 0.3s ease; cursor: pointer; } .social-icon:hover { transform: translateY(-3px) rotate(10deg); background-color: var(--dark-green); } @media (max-width: 600px) { .actions-section { flex-direction: column; align-items: center; } .action-card { flex: 0 0 calc(100% - 20px); max-width: calc(100% - 20px); margin-bottom: 15px; } .counter-value { font-size: 2rem; } .section-title { font-size: 1.2rem; } .form-title { font-size: 1.2rem; } } /* Progress bar styles */ .eco-progress { width: 100%; margin-top: 20px; padding: 0 20px; } .progress-label { display: flex; justify-content: space-between; margin-bottom: 8px; } .progress-text { font-size: 0.9rem; color: var(--dark-green); font-weight: bold; } .progress-bar { height: 10px; background-color: rgba(143, 188, 143, 0.3); border-radius: 10px; overflow: hidden; position: relative; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary-green), var(--accent-teal)); border-radius: 10px; width: 0; transition: width 1.5s ease-in-out; position: relative; } .progress-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100% ); animation: progress-shine 2s infinite; } @keyframes progress-shine { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Tooltip styles */ .eco-tip { position: relative; display: inline-block; margin-left: 5px; width: 16px; height: 16px; background-color: var(--primary-green); color: white; border-radius: 50%; text-align: center; line-height: 16px; font-size: 12px; cursor: help; } .eco-tip-text { visibility: hidden; width: 200px; background-color: var(--dark-green); color: white; text-align: center; border-radius: 6px; padding: 8px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -100px; opacity: 0; transition: opacity 0.3s; font-size: 0.8rem; font-weight: normal; line-height: 1.4; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .eco-tip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--dark-green) transparent transparent transparent; } .eco-tip:hover .eco-tip-text { visibility: visible; opacity: 1; } </style> </head> <body> <div class="container"> <div class="background-image"></div> <div class="water-ripple"></div> <div class="water-drops" id="waterDrops"></div> <header> <div class="logo">EcoAction</div> <div class="tagline">Small changes, big impact on our planet</div> </header> <div class="main-content"> <div class="leaf-section" id="aboutSection"> <div class="leaf-bg"> <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <path fill="#2e8b57" d="M44.7,-76.4C58.9,-69.2,72.1,-58.5,79.6,-44.7C87.1,-30.9,89,-14.4,88.5,1.7C88.1,17.9,85.5,35.8,76.6,49.4C67.7,63,52.6,72.3,37.2,77.7C21.8,83.1,6.1,84.6,-10.7,83.5C-27.5,82.5,-45.3,78.9,-57.8,68.5C-70.3,58.1,-77.4,40.9,-81.7,23.1C-86,5.3,-87.5,-13.2,-82.2,-29.2C-76.9,-45.2,-64.8,-58.8,-50.1,-65.9C-35.4,-73.1,-17.7,-73.8,-0.6,-72.8C16.6,-71.9,33.1,-69.3,44.7,-76.4Z" transform="translate(100 100)" /> </svg> </div> <div class="section-content"> <h2 class="section-title">Our Mission</h2> <p class="section-text"> We're on a mission to protect our planet's fragile ecosystems through collective action and awareness. Climate change is accelerating at an alarming rate, with global temperatures rising 1.1°C above pre-industrial levels. Our initiative focuses on practical, everyday actions that can make a meaningful difference. </p> <div class="eco-fact">Did you know? A single tree can absorb up to 48 pounds of CO₂ per year.</div> </div> </div> <div class="actions-section"> <div class="action-card"> <div class="action-icon">🌱</div> <div class="action-title">Plant Trees</div> <div class="action-desc">Join our community tree planting events in local parks and watersheds</div> </div> <div class="action-card"> <div class="action-icon">🚿</div> <div class="action-title">Save Water</div> <div class="action-desc">Reduce shower time and fix leaks to save up to 10 gallons daily</div> </div> <div class="action-card"> <div class="action-icon">♻️</div> <div class="action-title">Reduce Waste</div> <div class="action-desc">Switch to reusable containers and properly sort recyclables</div> </div> </div> <div class="eco-progress"> <div class="progress-label"> <span class="progress-text">Community Impact</span> <span class="progress-text"><span id="progressValue">0</span>%</span> </div> <div class="progress-bar"> <div class="progress-fill" id="progressFill"></div> </div> </div> <div class="leaf-counter"> <h3 class="counter-title">Trees Planted This Month</h3> <div class="counter-value" id="treeCounter">0</div> <p class="counter-text">Help us reach our goal of 500 trees by the end of the month!</p> </div> <div class="leaf-section" id="tipsSection"> <div class="leaf-bg"> <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <path fill="#2e8b57" d="M34.6,-59.3C46.1,-53.4,57.6,-45.6,64.4,-34.7C71.3,-23.8,73.5,-9.9,71.8,3C70.2,15.9,64.7,27.7,56.6,37.6C48.4,47.4,37.7,55.2,25.8,60.2C13.9,65.2,0,67.3,-13.9,66.3C-27.7,65.3,-41.6,61.1,-51.8,52.2C-62.1,43.2,-68.8,29.5,-71.2,15C-73.7,0.5,-71.9,-14.8,-65.8,-27.3C-59.6,-39.8,-49.2,-49.5,-37.6,-55.3C-26,-61.2,-13,-63.1,-0.3,-62.7C12.5,-62.3,25,-65.2,34.6,-59.3Z" transform="translate(100 100)" /> </svg> </div> <div class="section-content"> <h2 class="section-title">Eco-Friendly Tips <span class="eco-tip">i<span class="eco-tip-text">These practical tips can help reduce your environmental footprint</span></span></h2> <p class="section-text"> 1. Bring your own shopping bags - this simple habit can prevent hundreds of plastic bags from entering landfills yearly.<br> 2. Opt for locally-grown produce to reduce transportation emissions and support local farmers.<br> 3. Turn off lights when not needed - lighting accounts for about 15% of home electricity use. </p> </div> </div> <div class="commitment-form"> <h3 class="form-title">Make Your Eco-Commitment</h3> <div class="form-group"> <label class="form-label" for="name">Your Name</label> <input type="text" id="name" class="form-input" placeholder="Enter your name"> </div> <div class="form-group"> <label class="form-label" for="email">Email Address</label> <input type="email" id="email" class="form-input" placeholder="Your email address"> </div> <div class="form-group"> <label class="form-label" for="commitment">I Pledge To:</label> <select id="commitment" class="form-select"> <option value="" selected disabled>Choose your commitment</option> <option value="plant">Plant a tree this month</option> <option value="reduce">Reduce plastic use by 50%</option> <option value="water">Save water with shorter showers</option> <option value="energy">Switch to energy-efficient lighting</option> <option value="transport">Use public transport more frequently</option> </select> </div> <button type="button" id="submitBtn" class="submit-btn">Submit My Pledge</button> <div id="successMessage" class="success-message"> Thank you for your commitment to our planet! We've sent confirmation details to your email. </div> </div> </div> <footer> <p>© 2023 EcoAction Initiative - Together for a Greener Tomorrow</p> <div class="social-icons"> <div class="social-icon">f</div> <div class="social-icon">t</div> <div class="social-icon">i</div> </div> </footer> <div id="floatingLeaves"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Create water drops animation const waterDrops = document.getElementById('waterDrops'); for (let i = 0; i < 15; i++) { createWaterDrop(waterDrops); } // Create floating leaves const floatingLeaves = document.getElementById('floatingLeaves'); for (let i = 0; i < 5; i++) { createFloatingLeaf(floatingLeaves); } // Counter animation animateCounter(document.getElementById('treeCounter'), 0, 347, 2000); // Progress bar animation setTimeout(() => { const progressFill = document.getElementById('progressFill'); const progressValue = document.getElementById('progressValue'); const targetValue = 69; progressFill.style.width = `${targetValue}%`; animateCounter(progressValue, 0, targetValue, 1500); }, 500); // Form submission handling document.getElementById('submitBtn').addEventListener('click', function() { const nameInput = document.getElementById('name'); const emailInput = document.getElementById('email'); const commitmentSelect = document.getElementById('commitment'); if (nameInput.value && emailInput.value && commitmentSelect.value) { // Show success message document.getElementById('successMessage').style.display = 'block'; // Clear form nameInput.value = ''; emailInput.value = ''; commitmentSelect.selectedIndex = 0; // Hide success message after 5 seconds setTimeout(() => { document.getElementById('successMessage').style.display = 'none'; }, 5000); } else { // Simple validation feedback if (!nameInput.value) nameInput.style.borderColor = '#d32f2f'; if (!emailInput.value) emailInput.style.borderColor = '#d32f2f'; if (!commitmentSelect.value) commitmentSelect.style.borderColor = '#d32f2f'; } }); // Reset validation styling on input const formInputs = document.querySelectorAll('.form-input, .form-select'); formInputs.forEach(input => { input.addEventListener('input', function() { this.style.borderColor = ''; }); }); // Intersection Observer for section animations const sections = document.querySelectorAll('.leaf-section, .leaf-counter'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = '1'; entry.target.style.transform = 'translateY(0)'; } }); }, { threshold: 0.1 }); sections.forEach(section => { section.style.opacity = '0'; section.style.transform = 'translateY(20px)'; section.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; observer.observe(section); }); }); // Function to create water drops function createWaterDrop(container) { const drop = document.createElement('div'); drop.classList.add('water-drop'); drop.style.left = `${Math.random() * 100}%`; drop.style.animationDuration = `${3 + Math.random() * 3}s`; drop.style.animationDelay = `${Math.random() * 5}s`; container.appendChild(drop); // Recreate drop after animation ends drop.addEventListener('animationend', function() { drop.remove(); createWaterDrop(container); }); } // Function to create floating leaves function createFloatingLeaf(container) { const leaf = document.createElement('div'); leaf.classList.add('floating-leaf'); leaf.style.left = `${Math.random() * 80 + 10}%`; leaf.style.top = `${Math.random() * 80 + 10}%`; leaf.style.animationDuration = `${10 + Math.random() * 10}s`; leaf.style.animationDelay = `${Math.random() * 5}s`; leaf.style.transform = `rotate(${Math.random() * 360}deg) scale(${0.8 + Math.random() * 0.5})`; container.appendChild(leaf); } // Counter animation function function animateCounter(element, start, end, duration) { let startTimestamp = null; const step = (timestamp) => { if (!startTimestamp) startTimestamp = timestamp; const progress = Math.min((timestamp - startTimestamp) / duration, 1); element.innerHTML = Math.floor(progress * (end - start) + start); 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>SoundScape 2024 - Music Festival</title> <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Poppins:wght@300;600&display=swap'); :root { --primary: #FF3366; --secondary: #6B2BFF; --tertiary: #30DBFF; --dark: #1A1A2E; --light: #F9F9F9; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; background-color: var(--dark); color: var(--light); overflow-x: hidden; width: 100%; height: 100vh; max-width: 700px; max-height: 700px; margin: 0 auto; position: relative; } .container { width: 100%; height: 100%; padding: 20px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; position: relative; } .container::-webkit-scrollbar { display: none; } header { position: relative; margin-bottom: 30px; } .festival-name { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 3.5rem; line-height: 0.9; background: linear-gradient(45deg, var(--primary), var(--tertiary)); -webkit-background-clip: text; background-clip: text; color: transparent; text-transform: uppercase; margin-bottom: 15px; position: relative; text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2); z-index: 2; } .date-location { font-size: 1rem; margin-bottom: 20px; color: var(--tertiary); letter-spacing: 1px; position: relative; z-index: 2; } .sound-wave { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.3; overflow: hidden; } .wave { position: absolute; width: 100%; height: 40px; background: var(--secondary); border-radius: 40%; opacity: 0.2; animation: wave-animation 8s infinite linear; } .wave:nth-child(2) { top: 20px; animation-delay: 0.5s; background: var(--primary); } .wave:nth-child(3) { top: 40px; animation-delay: 1s; background: var(--tertiary); } @keyframes wave-animation { 0% { transform: translateX(-50%) scaleY(0.5); } 50% { transform: translateX(10%) scaleY(1.5); } 100% { transform: translateX(-50%) scaleY(0.5); } } .cta-button { background: linear-gradient(90deg, var(--primary), var(--secondary)); color: white; border: none; padding: 12px 30px; border-radius: 30px; font-weight: bold; font-size: 1rem; cursor: pointer; margin-top: 10px; position: relative; overflow: hidden; transition: transform 0.3s ease; z-index: 5; } .cta-button:hover { transform: scale(1.05); } .cta-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: 0.5s; } .cta-button:hover::before { left: 100%; } .lineup-section { margin: 40px 0; position: relative; } .section-title { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.8rem; margin-bottom: 20px; position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 3px; background: var(--primary); border-radius: 3px; } .artists-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 15px; margin-top: 20px; } .artist-card { position: relative; border-radius: 10px; overflow: hidden; height: 120px; cursor: pointer; transition: transform 0.3s ease; } .artist-card:hover { transform: translateY(-5px); } .artist-img { width: 100%; height: 100%; object-fit: cover; transition: all 0.3s ease; } .artist-card:hover .artist-img { transform: scale(1.1); } .artist-name { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); color: white; font-size: 0.8rem; font-weight: 600; text-align: center; } .experience-section { margin: 40px 0; position: relative; } .experiences { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; } .experiences::-webkit-scrollbar { display: none; } .experience-card { min-width: 250px; margin-right: 15px; padding: 20px; border-radius: 15px; scroll-snap-align: start; position: relative; overflow: hidden; } .exp-1 { background: linear-gradient(135deg, #ff6b6b, #ff9e40); } .exp-2 { background: linear-gradient(135deg, #6b7fff, #40c9ff); } .exp-3 { background: linear-gradient(135deg, #9b6bff, #ff40a3); } .experience-title { font-weight: 700; font-size: 1.2rem; margin-bottom: 10px; } .experience-text { font-size: 0.9rem; line-height: 1.4; } .pulse-circle { position: absolute; bottom: -30px; right: -30px; width: 100px; height: 100px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(0.7); opacity: 0.3; } 50% { transform: scale(1); opacity: 0.15; } 100% { transform: scale(0.7); opacity: 0.3; } } .tickets-section { margin: 40px 0; padding: 25px; border-radius: 15px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } .ticket-option { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px dashed rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; align-items: center; } .ticket-option:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .ticket-name { font-weight: 600; font-size: 1rem; } .ticket-price { font-weight: 600; color: var(--tertiary); } .animated-background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; } .circle { position: absolute; border-radius: 50%; opacity: 0.1; filter: blur(30px); } .circle-1 { width: 300px; height: 300px; background: var(--primary); top: -100px; left: -100px; animation: float 20s infinite alternate; } .circle-2 { width: 200px; height: 200px; background: var(--secondary); bottom: -50px; right: -50px; animation: float 15s infinite alternate-reverse; } .circle-3 { width: 150px; height: 150px; background: var(--tertiary); bottom: 150px; left: 50px; animation: float 18s infinite alternate; } @keyframes float { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(50px, 20px) scale(1.1); } 100% { transform: translate(-30px, 40px) scale(0.95); } } .newsletter { margin: 40px 0 20px; padding: 20px; border-radius: 15px; background: rgba(107, 43, 255, 0.2); border: 1px solid rgba(107, 43, 255, 0.3); } .email-input { display: flex; margin-top: 15px; } input[type="email"] { flex: 1; padding: 12px 15px; border: none; border-radius: 30px 0 0 30px; background: rgba(255, 255, 255, 0.1); color: white; outline: none; font-family: 'Poppins', sans-serif; } input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.5); } .subscribe-btn { padding: 12px 20px; border: none; border-radius: 0 30px 30px 0; background: var(--primary); color: white; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .subscribe-btn:hover { background: #ff1a4f; } .social-links { display: flex; justify-content: center; margin-top: 30px; gap: 20px; } .social-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: white; font-size: 1.2rem; transition: all 0.3s ease; cursor: pointer; } .social-icon:hover { transform: translateY(-3px); background: var(--primary); } @media (max-width: 500px) { .festival-name { font-size: 2.8rem; } .artists-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); } .artist-card { height: 90px; } .experiences { padding: 0 15px; margin: 0 -15px; } .experience-card { min-width: 220px; padding: 15px; } } /* Equalizer Animation */ .equalizer { position: absolute; top: 20px; right: 20px; display: flex; align-items: flex-end; height: 30px; gap: 3px; z-index: 10; } .eq-bar { width: 4px; background: var(--primary); border-radius: 3px; transition: height 0.2s ease; } .eq-bar:nth-child(odd) { background: var(--tertiary); } /* Festival Map */ .map-container { border-radius: 15px; overflow: hidden; margin: 20px 0; position: relative; height: 200px; background: #2a2a3a; } .festival-map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImdyYWQxIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojMWEyNjJmO3N0b3Atb3BhY2l0eToxIiAvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6IzIwMzc0MDtzdG9wLW9wYWNpdHk6MSIgLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iNzAwIiBoZWlnaHQ9IjIwMCIgZmlsbD0idXJsKCNncmFkMSkiLz48Y2lyY2xlIGN4PSIxNTAiIGN5PSI1MCIgcj0iMTUiIGZpbGw9IiNGRjMzNjYiIGZpbGwtb3BhY2l0eT0iMC44Ii8+PHRleHQgeD0iMTcwIiB5PSI1NSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjEyIiBmaWxsPSJ3aGl0ZSI+TWFpbiBTdGFnZTwvdGV4dD48Y2lyY2xlIGN4PSIyODAiIGN5PSI4MCIgcj0iMTIiIGZpbGw9IiMzMERCRkYiIGZpbGwtb3BhY2l0eT0iMC44Ii8+PHRleHQgeD0iMzAwIiB5PSI4NSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjEyIiBmaWxsPSJ3aGl0ZSI+RWxlY3Ryb25pYyBTdGFnZTwvdGV4dD48Y2lyY2xlIGN4PSIxODAiIGN5PSIxNDAiIHI9IjEyIiBmaWxsPSIjNkIyQkZGIiBmaWxsLW9wYWNpdHk9IjAuOCIvPjx0ZXh0IHg9IjIwMCIgeT0iMTQ1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTIiIGZpbGw9IndoaXRlIj5JbmRpZSBTdGFnZTwvdGV4dD48Y2lyY2xlIGN4PSI0MDAiIGN5PSIxMjAiIHI9IjEwIiBmaWxsPSIjZmZjYzAwIiBmaWxsLW9wYWNpdHk9IjAuOCIvPjx0ZXh0IHg9IjQyMCIgeT0iMTI1IiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTIiIGZpbGw9IndoaXRlIj5Gb29kIFZpbGxhZ2U8L3RleHQ+PHBvbHlsaW5lIHBvaW50cz0iNTAsNTAgMTAwLDUwIDE1MCw4MCAyMDAsODAgMjUwLDEyMCAzMDAsMTIwIDM1MCwxNjAgNDAwLDE2MCIgc3Ryb2tlPSIjRkYzMzY2IiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1vcGFjaXR5PSIwLjUiIGZpbGw9Im5vbmUiLz48cG9seWxpbmUgcG9pbnRzPSI1MCwxMDAgMTAwLDEwMCAxNjAsMTMwIDIyMCwxMzAgMjgwLDE1MCAzNDAsMTUwIDQwMCwxMDAiIHN0cm9rZT0iIzMwREJGRiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2Utb3BhY2l0eT0iMC41IiBmaWxsPSJub25lIi8+PHBvbHlnb24gcG9pbnRzPSI0MjAsMjAgNDcwLDIwIDUwMCw1MCA0NzAsODAgNDIwLDgwIDM5MCw1MCA0MjAsMjAiIGZpbGw9IiM2QjJCRkYiIGZpbGwtb3BhY2l0eT0iMC4zIiBzdHJva2U9IiM2QjJCRkYiIHN0cm9rZS13aWR0aD0iMSIvPjx0ZXh0IHg9IjQxOCIgeT0iNTUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxMiIgZmlsbD0id2hpdGUiPkNhbXBpbmc8L3RleHQ+PHBvbHlnb24gcG9pbnRzPSI1MDAsMTAwIDU3MCwxMDAgNTkwLDEzMCA1NzAsMTYwIDUwMCwxNjAgNDgwLDEzMCA1MDAsMTAwIiBmaWxsPSIjRkYzMzY2IiBmaWxsLW9wYWNpdHk9IjAuMyIgc3Ryb2tlPSIjRkYzMzY2IiBzdHJva2Utd2lkdGg9IjEiLz48dGV4dCB4PSI1MTAiIHk9IjEzNSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjEyIiBmaWxsPSJ3aGl0ZSI+VklQPC90ZXh0PjxyZWN0IHg9IjU2MCIgeT0iMjAiIHdpZHRoPSI4MCIgaGVpZ2h0PSI0MCIgZmlsbD0iIzMwREJGRiIgZmlsbC1vcGFjaXR5PSIwLjMiIHN0cm9rZT0iIzMwREJGRiIgc3Ryb2tlLXdpZHRoPSIxIi8+PHRleHQgeD0iNTcwIiB5PSI0NSIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjEyIiBmaWxsPSJ3aGl0ZSI+RW50cmFuY2U8L3RleHQ+PC9zdmc+'); background-size: cover; background-repeat: no-repeat; transition: transform 0.3s ease; } .map-container:hover .festival-map { transform: scale(1.05); } .map-label { position: absolute; top: 10px; left: 10px; background: rgba(0, 0, 0, 0.6); padding: 5px 10px; border-radius: 5px; font-size: 0.8rem; z-index: 2; } /* Day selector */ .day-selector { display: flex; margin: 20px 0; gap: 10px; justify-content: center; } .day-btn { padding: 8px 15px; border-radius: 20px; background: rgba(255, 255, 255, 0.1); border: none; color: white; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .day-btn.active { background: var(--primary); } .day-btn:hover { background: rgba(255, 255, 255, 0.2); } .day-btn.active:hover { background: var(--primary); } /* Footer */ footer { text-align: center; margin-top: 30px; padding: 20px 0; color: rgba(255, 255, 255, 0.6); font-size: 0.8rem; } </style> </head> <body> <div class="animated-background"> <div class="circle circle-1"></div> <div class="circle circle-2"></div> <div class="circle circle-3"></div> </div> <div class="container"> <header> <div class="equalizer"> <div class="eq-bar"></div> <div class="eq-bar"></div> <div class="eq-bar"></div> <div class="eq-bar"></div> <div class="eq-bar"></div> <div class="eq-bar"></div> <div class="eq-bar"></div> </div> <div class="sound-wave"> <div class="wave"></div> <div class="wave"></div> <div class="wave"></div> </div> <h1 class="festival-name">Sound<br>Scape<br>2024</h1> <p class="date-location">JULY 15-17, 2024 • ECHO VALLEY, CA</p> <button class="cta-button">GET TICKETS</button> </header> <section class="lineup-section"> <h2 class="section-title">Lineup</h2> <div class="day-selector"> <button class="day-btn active">FRI</button> <button class="day-btn">SAT</button> <button class="day-btn">SUN</button> </div> <div class="artists-grid"> <div class="artist-card"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTIwIDEyMCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAiIHkxPSIwIiB4Mj0iMTIwIiB5Mj0iMTIwIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNGRjMzNjYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM2QjJCRkYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgZmlsbD0idXJsKCNncmFkKSIvPjxjaXJjbGUgY3g9IjYwIiBjeT0iNDUiIHI9IjIwIiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuMiIvPjxwYXRoIGQ9Ik0zMCA2MEMzMCA0MCA0MCAzMCA2MCAzMFM5MCA0MCA5MCA2MFYxMjBIMzBWNjBaIiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuMSIvPjwvc3ZnPg==" alt="Artist" class="artist-img"> <div class="artist-name">Sound Voyager</div> </div> <div class="artist-card"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTIwIDEyMCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAiIHkxPSIwIiB4Mj0iMTIwIiB5Mj0iMTIwIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMzMERCRkYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM2QjJCRkYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgZmlsbD0idXJsKCNncmFkKSIvPjxjaXJjbGUgY3g9IjYwIiBjeT0iNDUiIHI9IjIwIiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuMiIvPjxwYXRoIGQ9Ik0zMCA2MEMzMCA0MCA0MCAzMCA2MCAzMFM5MCA0MCA5MCA2MFYxMjBIMzBWNjBaIiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuMSIvPjwvc3ZnPg==" alt="Artist" class="artist-img"> <div class="artist-name">Echo Prism</div> </div> <div class="artist-card"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTIwIDEyMCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAiIHkxPSIwIiB4Mj0iMTIwIiB5Mj0iMTIwIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM2QjJCRkYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGRjMzNjYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgZmlsbD0idXJsKCNncmFkKSIvPjxjaXJjbGUgY3g9IjYwIiBjeT0iNDUiIHI9IjIwIiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuMiIvPjxwYXRoIGQ9Ik0zMCA2MEMzMCA0MCA0MCAzMCA2MCAzMFM5MCA0MCA5MCA2MFYxMjBIMzBWNjBaIiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuMSIvPjwvc3ZnPg==" alt="Artist" class="artist-img"> <div class="artist-name">Pulse Collective</div> </div> <div class="artist-card"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTIwIDEyMCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAiIHkxPSIwIiB4Mj0iMTIwIiB5Mj0iMTIwIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMzMERCRkYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGRjMzNjYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgZmlsbD0idXJsKCNncmFkKSIvPjxjaXJjbGUgY3g9IjYwIiBjeT0iNDUiIHI9IjIwIiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuMiIvPjxwYXRoIGQ9Ik0zMCA2MEMzMCA0MCA0MCAzMCA2MCAzMFM5MCA0MCA5MCA2MFYxMjBIMzBWNjBaIiBmaWxsPSIjZmZmZmZmIiBmaWxsLW9wYWNpdHk9IjAuMSIvPjwvc3ZnPg==" alt="Artist" class="artist-img"> <div class="artist-name">Nova Wave</div> </div> <div class="artist-card"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTIwIDEyMCI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAiIHkxPSIwIiB4Mj0iMTIwIiB5Mj0iMTIwIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNGRjMzNjYiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMzMERCRkYiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgZmlsbD0idXJsKCNncmFkKSIvPjxjaXJjbGUgY3g9IjYwIiBjeT0
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Educational Content Platform</title> <style> :root { --primary-color: #2c3e50; --secondary-color: #f1c40f; --accent-color: #3498db; --text-color: #333; --light-bg: #f9f9f9; --highlight: #e74c3c; --neutral-1: #ecf0f1; --neutral-2: #bdc3c7; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--light-bg); color: var(--text-color); overflow-x: hidden; max-width: 700px; height: 700px; margin: 0 auto; padding: 20px; position: relative; } .container { max-width: 100%; height: 100%; overflow-y: auto; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--accent-color) var(--neutral-1); position: relative; } .container::-webkit-scrollbar { width: 8px; } .container::-webkit-scrollbar-track { background: var(--neutral-1); border-radius: 4px; } .container::-webkit-scrollbar-thumb { background-color: var(--accent-color); border-radius: 4px; } header { position: sticky; top: 0; background-color: rgba(255, 255, 255, 0.95); padding: 15px 0; margin-bottom: 20px; border-bottom: 2px solid var(--accent-color); backdrop-filter: blur(5px); z-index: 100; } h1 { color: var(--primary-color); font-size: 28px; position: relative; display: inline-block; margin-bottom: 10px; } h1::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 60%; height: 3px; background-color: var(--secondary-color); border-radius: 2px; transform-origin: left; animation: underlineExpand 1.2s ease-in-out; } nav { display: flex; gap: 15px; margin-bottom: 10px; } .nav-item { cursor: pointer; padding: 5px 10px; border-radius: 20px; background-color: var(--neutral-1); transition: all 0.3s ease; font-size: 14px; } .nav-item:hover { background-color: var(--accent-color); color: white; transform: translateY(-2px); } .nav-item.active { background-color: var(--primary-color); color: white; } section { margin-bottom: 40px; position: relative; } .topic-section { display: none; animation: fadeIn 0.5s ease-in-out; } .topic-section.active { display: block; } h2 { color: var(--primary-color); margin-bottom: 20px; font-size: 22px; position: relative; } h2::before { content: ''; position: absolute; left: -15px; top: 50%; width: 8px; height: 20px; background-color: var(--secondary-color); border-radius: 4px; transform: translateY(-50%); } p { line-height: 1.6; margin-bottom: 15px; position: relative; z-index: 1; } .highlight-text { background-color: rgba(241, 196, 15, 0.2); padding: 2px 4px; border-radius: 3px; font-weight: 500; } .key-point { background-color: var(--neutral-1); border-left: 4px solid var(--highlight); padding: 15px; margin: 20px 0; border-radius: 0 5px 5px 0; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; } .key-point:hover { transform: translateX(5px); box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.1); } .key-point::before { content: '!'; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); background-color: var(--highlight); color: white; width: 20px; height: 20px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: bold; font-size: 14px; } .diagram-container { position: relative; margin: 30px 0; padding: 20px; background-color: white; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); overflow: hidden; } .diagram-container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(90deg, var(--accent-color), var(--secondary-color)); border-radius: 5px 5px 0 0; } .diagram { display: flex; flex-direction: column; align-items: center; position: relative; } .diagram-title { font-weight: 600; color: var(--primary-color); margin-bottom: 15px; font-size: 18px; text-align: center; } .semi-organic-shape { position: relative; width: 250px; height: 250px; margin: 20px auto; } .shape { position: absolute; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transition: all 0.8s ease; } .shape-1 { width: 100%; height: 100%; background-color: rgba(52, 152, 219, 0.2); animation: morphShape 15s infinite alternate; } .shape-2 { width: 80%; height: 80%; top: 10%; left: 10%; background-color: rgba(241, 196, 15, 0.15); animation: morphShape 12s infinite alternate-reverse; } .shape-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70%; text-align: center; font-weight: 500; color: var(--primary-color); z-index: 2; } .text-flow { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin: 30px 0; } .text-flow-image { flex: 0 0 40%; position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .text-flow-image img { width: 100%; height: auto; transition: transform 0.5s ease; display: block; } .text-flow-image:hover img { transform: scale(1.05); } .text-flow-content { flex: 1; } .interactive-element { background-color: white; border-radius: 10px; padding: 15px; margin: 20px 0; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease; cursor: pointer; } .interactive-element:hover { transform: translateY(-5px); } .interactive-title { display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: var(--primary-color); } .interactive-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease, padding 0.5s ease; padding: 0; } .interactive-element.active .interactive-content { max-height: 200px; padding-top: 15px; } .toggle-icon { transition: transform 0.3s ease; } .interactive-element.active .toggle-icon { transform: rotate(180deg); } .progress-indicator { position: fixed; top: 0; left: 0; width: 0; height: 3px; background: linear-gradient(90deg, var(--secondary-color), var(--accent-color)); z-index: 1000; transition: width 0.2s ease; } .tooltip { position: absolute; background-color: var(--primary-color); color: white; padding: 8px 12px; border-radius: 5px; font-size: 14px; z-index: 100; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; pointer-events: none; white-space: nowrap; } .tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--primary-color) transparent transparent transparent; } .footnote { font-size: 14px; color: var(--neutral-2); border-top: 1px solid var(--neutral-2); padding-top: 15px; margin-top: 30px; } @keyframes morphShape { 0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } 25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; } 50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; } 75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; } 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes underlineExpand { from { width: 0; } to { width: 60%; } } @media (max-width: 700px) { body { padding: 15px; } h1 { font-size: 24px; } nav { flex-wrap: wrap; } .text-flow { flex-direction: column; } .text-flow-image { flex: 0 0 100%; } .semi-organic-shape { width: 200px; height: 200px; } } @media (max-width: 480px) { .nav-item { padding: 4px 8px; font-size: 13px; } h1 { font-size: 22px; } h2 { font-size: 18px; } } </style> </head> <body> <div class="progress-indicator"></div> <div class="container"> <header> <h1>Learning Pathways</h1> <nav> <div class="nav-item active" data-target="neuroscience">Neuroscience</div> <div class="nav-item" data-target="physics">Quantum Physics</div> <div class="nav-item" data-target="ecology">Marine Ecology</div> <div class="nav-item" data-target="literature">Comparative Literature</div> </nav> </header> <section id="neuroscience" class="topic-section active"> <h2>The Cognitive Symphony</h2> <p>Our understanding of the human brain has evolved dramatically over the past century. Today's neuroscientists approach cognition as an <span class="highlight-text">interconnected network</span> rather than isolated regions with singular functions.</p> <div class="diagram-container"> <div class="diagram-title">Neural Pathway Formation</div> <div class="diagram"> <div class="semi-organic-shape"> <div class="shape shape-1"></div> <div class="shape shape-2"></div> <div class="shape-content">Neuroplasticity occurs through both structural and functional changes at cellular level</div> </div> </div> </div> <div class="text-flow"> <div class="text-flow-image"> <img src="https://images.unsplash.com/photo-1559757175-7cb056fba93d?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Brain networks visualization"> </div> <div class="text-flow-content"> <p>The prefrontal cortex orchestrates our executive functions, including working memory, attention control, and decision-making processes. When examining cognitive architecture, researchers have identified that <span class="highlight-text">neural efficiency</span> – not just raw processing power – distinguishes expert performance from novice attempts.</p> <p>Learning occurs at multiple levels simultaneously, from molecular changes at synapses to reorganization of entire neural networks.</p> </div> </div> <div class="key-point"> Recent longitudinal studies demonstrate that intensive learning of complex skills creates measurable structural changes in white matter tracts, challenging previous assumptions about adult brain plasticity limits. </div> <div class="interactive-element"> <div class="interactive-title"> <span>Memory Formation Process</span> <span class="toggle-icon">▼</span> </div> <div class="interactive-content"> <p>Memory consolidation follows a three-stage process: encoding (initial acquisition), storage (maintenance), and retrieval (accessing stored information). The hippocampus serves as a crucial waystation for declarative memories before they're distributed to cortical regions for long-term storage.</p> </div> </div> <div class="interactive-element"> <div class="interactive-title"> <span>Attention Networks</span> <span class="toggle-icon">▼</span> </div> <div class="interactive-content"> <p>Modern attention research distinguishes between three networks: alerting (achieving and maintaining alertness), orienting (selecting information from sensory input), and executive control (resolving conflict among competing responses).</p> </div> </div> </section> <section id="physics" class="topic-section"> <h2>Quantum Mechanics Fundamentals</h2> <p>Quantum mechanics describes nature at the smallest scales, where classical physics breaks down. The <span class="highlight-text">wave-particle duality</span> of matter and energy forms one of its foundational principles.</p> <div class="diagram-container"> <div class="diagram-title">Schrödinger's Wave Function</div> <div class="diagram"> <div class="semi-organic-shape"> <div class="shape shape-1"></div> <div class="shape shape-2"></div> <div class="shape-content">Ψ(x,t) represents probability amplitude for finding a particle at position x at time t</div> </div> </div> </div> <div class="text-flow"> <div class="text-flow-content"> <p>Heisenberg's uncertainty principle states that we cannot simultaneously know both the position and momentum of a particle with perfect precision. This is not due to measurement limitations but is a fundamental property of quantum systems.</p> <p>Quantum superposition allows particles to exist in multiple states simultaneously until observed or measured, leading to the famous <span class="highlight-text">Copenhagen interpretation</span>.</p> </div> <div class="text-flow-image"> <img src="https://images.unsplash.com/photo-1635070041078-e363dbe005cb?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Quantum visualization"> </div> </div> <div class="key-point"> Quantum entanglement allows particles to become correlated in ways that cannot be explained by classical physics, even when separated by vast distances—what Einstein famously called "spooky action at a distance." </div> </section> <section id="ecology" class="topic-section"> <h2>Coral Reef Ecosystems</h2> <p>Coral reefs occupy less than 1% of the ocean floor yet support approximately 25% of all marine species. These <span class="highlight-text">biodiverse hotspots</span> function as the rainforests of the sea.</p> <div class="diagram-container"> <div class="diagram-title">Coral Polyp Structure</div> <div class="diagram"> <div class="semi-organic-shape"> <div class="shape shape-1"></div> <div class="shape shape-2"></div> <div class="shape-content">Symbiotic relationship between polyp and zooxanthellae algae creates energy through photosynthesis</div> </div> </div> </div> <div class="text-flow"> <div class="text-flow-image"> <img src="https://images.unsplash.com/photo-1546026423-cc4642628d2b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Coral reef ecosystem"> </div> <div class="text-flow-content"> <p>The interrelationships within coral reef ecosystems exemplify ecological principles at work. Keystone species like parrotfish maintain reef health by preventing algal overgrowth, while cleaner wrasses establish mutualistic relationships with larger fish.</p> <p>Reef resilience depends on <span class="highlight-text">functional redundancy</span>—multiple species performing similar ecological roles—which provides insurance against environmental disturbances.</p> </div> </div> <div class="key-point"> Mass coral bleaching events have increased in frequency and severity due to rising ocean temperatures, with the Great Barrier Reef experiencing unprecedented back-to-back bleaching in 2016 and 2017 that affected nearly two-thirds of this UNESCO World Heritage site. </div> </section> <section id="literature" class="topic-section"> <h2>Narrative Structure Across Cultures</h2> <p>Comparative literature examines how narrative traditions evolved across different cultures, revealing both universal patterns and distinctive cultural innovations. The <span class="highlight-text">hero's journey</span> represents one such cross-cultural archetype.</p> <div class="diagram-container"> <div class="diagram-title">Narrative Structural Elements</div> <div class="diagram"> <div class="semi-organic-shape"> <div class="shape shape-1"></div> <div class="shape shape-2"></div> <div class="shape-content">Polyphonic narratives integrate multiple independent viewpoints rather than subordinating them to author's perspective</div> </div> </div> </div> <div class="text-flow"> <div class="text-flow-content"> <p>While Western narrative tradition often emphasizes linear progression and conflict resolution, East Asian narratives may employ <span class="highlight-text">kishōtenketsu</span> structure—a four-part pattern that develops through exposition, development, twist, and reconciliation without necessarily relying on conflict.</p> <p>Oral storytelling traditions often incorporate mnemonic devices like repetition, rhyme, and rhythm that shape narrative structure differently than literary forms developed for reading.</p> </div> <div class="text-flow-image"> <img src="https://images.unsplash.com/photo-1457369804613-52c61a468e7d?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Ancient manuscripts"> </div> </div> <div class="key-point"> Digital storytelling and interactive narratives are creating entirely new structural possibilities beyond traditional linear forms, challenging conventional distinctions between author and audience through participatory elements. </div> </section> <div class="footnote"> Learning Pathways Educational Platform © 2023 - Bringing sophisticated learning content to curious minds </div> </div> <div class="tooltip" id="tooltip"></div> <script> document.addEventListener('DOMContentLoaded', function() { // Navigation tabs const navItems = document.querySelectorAll('.nav-item'); const sections = document.querySelectorAll('.topic-section'); navItems.forEach(item => { item.addEventListener('click', function() { const target = this.getAttribute('data-target'); // Update active nav navItems.forEach(navItem => navItem.classList.remove('active')); this.classList.add('active'); // Show target section sections.forEach(section => { section.classList.remove('active'); if (section.id === target) { section.classList.add('active'); } }); }); }); // Interactive elements toggle const interactiveElements = document.querySelectorAll('.interactive-element'); interactiveElements.forEach(element => { element.addEventListener('click', function() { this.classList.toggle('active'); }); }); // Scroll progress indicator const progressIndicator = document.querySelector('.progress-indicator'); const container = document.querySelector('.container'); container.addEventListener('scroll', function() { const scrollPosition = container.scrollTop; const scrollHeight = container.scrollHeight - container.clientHeight; const scrollPercentage = (scrollPosition / scrollHeight) * 100; progressIndicator.style.width = `${scrollPercentage}%`; }); // Highlight text tooltip functionality const highlightedTexts = document.querySelectorAll('.highlight-text'); const tooltip = document.getElementById('tooltip'); const tooltipContent = { 'interconnected network': 'The connectome refers to the complete mapping of neural connections in the brain.', 'neural efficiency': 'Neural efficiency hypothesis suggests experts use fewer neural resources for the same task.', 'wave-particle duality': 'Light and matter exhibit properties of both waves and particles depending on the experiment.', 'Copenhagen interpretation': 'Dominant interpretation suggesting quantum systems remain in superposition until measured.', 'biodiverse hotspots': 'Areas featuring exceptional concentrations of endemic species and experiencing habitat loss.', 'functional redundancy': 'Multiple species performing similar ecological functions, providing ecosystem resilience.', 'hero\'s journey': 'Narrative pattern identified by Joseph Campbell involving separation, initiation, and return.', 'kishōtenketsu': 'Traditional East Asian four-part narrative structure that doesn\'t rely on conflict and resolution.' }; highlightedTexts.forEach(text => { text.addEventListener('mouseenter', function(e) { const content = tooltipContent[this.textContent.trim()] || 'No additional information available'; tooltip.textContent = content; // Position the tooltip const rect = this.getBoundingClientRect(); tooltip.style.top = `${rect.top - 40}px`; tooltip.style.left = `${rect.left + (rect.width / 2)}px`; tooltip.style.transform = 'translateX(-50%)'; // Show the tooltip tooltip.style.opacity = '1'; tooltip.style.visibility = 'visible'; }); text.addEventListener('mouseleave', function() { tooltip.style.opacity = '0'; tooltip.style.visibility = 'hidden'; }); }); // Animation for diagram containers when they come into view const observeElements = document.querySelectorAll('.diagram-container, .key-point'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.animation = 'fadeIn 0.8s ease forwards'; observer.unobserve(entry.target); } }); }, { threshold: 0.2 }); observeElements.forEach(element => { observer.observe(element); // Initially hide the elements element.style.opacity = '0'; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MOVE | Fitness & Wellness</title> <style> /* Reset and Base Styles */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #fc4a1a; --primary-light: #fd6b41; --secondary: #1AFCDC; --dark: #151515; --light: #fafafa; --accent: #7209B7; } @font-face { font-family: 'Movimento'; src: url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap'); } body { font-family: 'Helvetica Neue', Arial, sans-serif; background-color: var(--light); color: var(--dark); width: 100%; height: 100vh; overflow-x: hidden; line-height: 1.5; position: relative; } .container { width: 100%; max-width: 700px; margin: 0 auto; padding: 0; overflow-y: auto; height: 700px; scroll-behavior: smooth; } /* Header Styles */ header { padding: 20px; position: sticky; top: 0; background-color: rgba(250, 250, 250, 0.95); backdrop-filter: blur(10px); z-index: 100; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .logo { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.8rem; color: var(--primary); letter-spacing: -1px; position: relative; } .logo::after { content: ''; position: absolute; bottom: 0; left: 0; width: 50%; height: 4px; background-color: var(--secondary); border-radius: 2px; transform: translateY(5px); } .menu-button { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; height: 20px; width: 30px; padding: 0; } .menu-button span { display: block; height: 3px; width: 100%; background-color: var(--dark); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; } .menu-button.active span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); } .menu-button.active span:nth-child(2) { opacity: 0; } .menu-button.active span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); } .menu { position: fixed; top: 60px; left: 0; width: 100%; background-color: rgba(250, 250, 250, 0.95); backdrop-filter: blur(10px); padding: 20px; transform: translateY(-100%); opacity: 0; transition: transform 0.3s, opacity 0.3s; z-index: 99; } .menu.active { transform: translateY(0); opacity: 1; } .menu ul { list-style-type: none; } .menu li { margin-bottom: 10px; } .menu a { text-decoration: none; color: var(--dark); font-weight: 600; font-size: 1.2rem; padding: 5px 0; display: block; position: relative; overflow: hidden; } .menu a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--primary); transform: translateX(-100%); transition: transform 0.3s; } .menu a:hover::after { transform: translateX(0); } /* Hero Section */ .hero { height: 50vh; background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); display: flex; align-items: center; justify-content: center; color: white; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 C75,70 25,90 0,50 Z" fill="rgba(255,255,255,0.1)"/></svg>'); background-size: cover; } .hero-content { text-align: center; position: relative; z-index: 1; padding: 2rem; } .hero h1 { font-size: 3rem; margin-bottom: 1rem; font-weight: 800; line-height: 1.2; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } .hero p { font-size: 1.2rem; max-width: 80%; margin: 0 auto 2rem; } .btn { display: inline-block; padding: 12px 30px; background-color: var(--secondary); color: var(--dark); text-decoration: none; border-radius: 50px; font-weight: 600; transition: transform 0.3s, box-shadow 0.3s; border: none; cursor: pointer; position: relative; overflow: hidden; z-index: 1; } .btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); transform: translateX(-100%) rotate(45deg); transition: transform 0.5s; z-index: -1; } .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .btn:hover::before { transform: translateX(100%) rotate(45deg); } /* Motion Section */ .motion-section { padding: 3rem 2rem; position: relative; } .motion-section h2 { font-size: 2rem; margin-bottom: 1.5rem; position: relative; display: inline-block; } .motion-section h2::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 70%; height: 4px; background-color: var(--primary); border-radius: 2px; } .fluid-content { display: flex; flex-direction: column; gap: 2rem; } .flow-article { position: relative; padding: 1.5rem; background-color: white; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; } .flow-article:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .flow-article::before { content: ''; position: absolute; top: 0; left: 0; width: 5px; height: 100%; background-color: var(--primary); border-radius: 5px 0 0 5px; } .flow-article h3 { font-size: 1.4rem; margin-bottom: 1rem; color: var(--primary); } .flow-article p { margin-bottom: 1rem; } .flow-article .shape-container { position: relative; } .shape-image { float: left; width: 150px; height: 150px; shape-outside: circle(50%); margin-right: 15px; margin-bottom: 15px; border-radius: 50%; background-color: var(--primary-light); background-size: cover; background-position: center; } .shape-quote { float: right; width: 200px; height: 200px; shape-outside: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); margin-left: 15px; margin-bottom: 15px; background-color: var(--accent); display: flex; align-items: center; justify-content: center; color: white; padding: 30px; text-align: center; font-style: italic; font-weight: 600; } /* Techniques Grid */ .techniques-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-top: 2rem; } .technique-card { background-color: white; border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s; cursor: pointer; position: relative; } .technique-card:hover { transform: scale(1.05); } .technique-card img { width: 100%; height: 100px; object-fit: cover; } .technique-card h4 { padding: 10px; text-align: center; font-size: 0.9rem; background-color: rgba(255, 255, 255, 0.9); margin: 0; position: absolute; bottom: 0; width: 100%; backdrop-filter: blur(5px); } /* Progress Circle */ .progress-section { padding: 3rem 2rem; background-color: var(--dark); color: var(--light); text-align: center; } .progress-section h2 { font-size: 2rem; margin-bottom: 2rem; position: relative; display: inline-block; color: var(--secondary); } .progress-section h2::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 70%; height: 4px; background-color: var(--secondary); border-radius: 2px; } .progress-container { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; } .progress-item { position: relative; width: 120px; height: 120px; } .progress-circle { width: 100%; height: 100%; transform: rotate(-90deg); } .progress-circle circle { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1s ease; } .progress-circle .bg { stroke: rgba(255, 255, 255, 0.1); } .progress-circle .progress { stroke: var(--secondary); } .progress-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; font-weight: 700; } .progress-label { margin-top: 0.5rem; font-size: 0.9rem; color: var(--secondary); } /* Testimonials */ .testimonials { padding: 3rem 2rem; position: relative; overflow: hidden; } .testimonials::before { content: ''; position: absolute; top: 0; right: 0; width: 300px; height: 300px; background: radial-gradient(circle, var(--secondary) 0%, rgba(255, 255, 255, 0) 70%); opacity: 0.3; transform: translate(50%, -50%); z-index: -1; } .testimonials h2 { font-size: 2rem; margin-bottom: 2rem; position: relative; display: inline-block; } .testimonials h2::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 70%; height: 4px; background-color: var(--primary); border-radius: 2px; } .testimonial-slider { width: 100%; position: relative; margin-top: 2rem; } .testimonial-track { display: flex; transition: transform 0.5s ease; width: 300%; } .testimonial-slide { width: calc(100% / 3); padding: 0 10px; flex-shrink: 0; } .testimonial-card { background-color: white; border-radius: 10px; padding: 1.5rem; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; } .testimonial-card::before { content: '"'; position: absolute; top: -20px; left: 10px; font-size: 7rem; color: rgba(0, 0, 0, 0.05); font-family: Georgia, serif; } .testimonial-card p { font-style: italic; margin-bottom: 1rem; position: relative; z-index: 1; } .testimonial-author { display: flex; align-items: center; margin-top: 1rem; } .testimonial-avatar { width: 50px; height: 50px; border-radius: 50%; background-color: var(--primary-light); margin-right: 10px; background-size: cover; background-position: center; } .testimonial-info h4 { margin: 0; font-size: 1rem; } .testimonial-info p { margin: 0; font-size: 0.8rem; color: #777; font-style: normal; } .slider-dots { display: flex; justify-content: center; margin-top: 1.5rem; } .dot { width: 10px; height: 10px; border-radius: 50%; background-color: #ddd; margin: 0 5px; cursor: pointer; transition: background-color 0.3s; } .dot.active { background-color: var(--primary); } /* Newsletter Section */ .newsletter { padding: 3rem 2rem; background-color: var(--accent); color: white; text-align: center; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); margin-bottom: 2rem; } .newsletter h2 { font-size: 2rem; margin-bottom: 1rem; } .newsletter p { margin-bottom: 2rem; max-width: 80%; margin-left: auto; margin-right: auto; } .newsletter-form { display: flex; max-width: 500px; margin: 0 auto; position: relative; } .newsletter-form input { flex: 1; padding: 15px; border: none; border-radius: 50px; font-size: 1rem; outline: none; padding-right: 150px; } .newsletter-form button { position: absolute; right: 0; top: 0; bottom: 0; padding: 0 30px; background-color: var(--primary); color: white; border: none; border-radius: 0 50px 50px 0; font-weight: 600; cursor: pointer; transition: background-color 0.3s; } .newsletter-form button:hover { background-color: var(--primary-light); } /* Footer */ footer { padding: 2rem; background-color: var(--dark); color: var(--light); text-align: center; } .social-links { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1rem; } .social-links a { color: var(--light); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; transition: background-color 0.3s, transform 0.3s; } .social-links a:hover { background-color: var(--primary); transform: translateY(-3px); } .social-icon { width: 20px; height: 20px; fill: currentColor; } .copyright { font-size: 0.8rem; opacity: 0.7; } /* Floating Animation */ @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .floating { animation: float 4s ease-in-out infinite; } /* Pulse Animation */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulsing { animation: pulse 2s ease-in-out infinite; } /* Media Queries */ @media (max-width: 600px) { .newsletter-form { flex-direction: column; } .newsletter-form input { padding-right: 15px; margin-bottom: 10px; border-radius: 50px; } .newsletter-form button { position: static; width: 100%; border-radius: 50px; padding: 15px; } .hero h1 { font-size: 2rem; } .hero p { font-size: 1rem; max-width: 100%; } .progress-container { gap: 1rem; } .progress-item { width: 100px; height: 100px; } .flow-article .shape-container { clear: both; } .shape-image, .shape-quote { float: none; margin: 0 auto 15px; display: block; } } </style> </head> <body> <div class="container"> <header> <div class="logo">MOVE</div> <button class="menu-button"> <span></span> <span></span> <span></span> </button> <nav class="menu"> <ul> <li><a href="#home">Home</a></li> <li><a href="#techniques">Techniques</a></li> <li><a href="#progress">Progress</a></li> <li><a href="#testimonials">Testimonials</a></li> </ul> </nav> </header> <section class="hero" id="home"> <div class="hero-content"> <h1>Movement is <br>Medicine</h1> <p>Transform your fitness journey with mindful movement practices that nurture both body and spirit.</p> <a href="#techniques" class="btn pulsing">Explore Techniques</a> </div> </section> <section class="motion-section" id="techniques"> <h2>Flow State Fitness</h2> <div class="fluid-content"> <article class="flow-article"> <h3>The Art of Fluid Movement</h3> <div class="shape-container"> <div class="shape-image" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M50,10 C70,10 90,30 90,50 C90,75 70,90 50,90 C30,90 10,75 10,50 C10,30 30,10 50,10 Z" fill="%23fc4a1a" /></svg>');"></div> <p>Fluid movement isn't just about aesthetics — it's a biomechanical advantage. By focusing on smooth transitions between exercises, you reduce joint stress while improving mobility and coordination. This approach mimics natural human movement patterns, allowing your body to function as the integrated system it was designed to be.</p> <p>The practice of fluid movement training includes elements from dance, martial arts, gymnastics, and yoga — all combined to create functional strength that translates to real-world activities.</p> <div class="shape-quote floating"> "Movement is a medicine for creating change in a person's physical, emotional, and mental states." </div> <p>The most effective fitness routines are those that engage your body's fascial network — the continuous web of connective tissue that surrounds and supports every muscle, bone, nerve, and organ. When we move fluidly, we're stimulating this network in ways that isolated exercises simply cannot match.</p> </div> </article> <article class="flow-article"> <h3>Mindful Movement Practices</h3> <p>The integration of mindfulness with movement creates a powerful synergy that enhances both physical performance and mental wellbeing. Here are some evidence-based practices that harness this connection:</p> <div class="techniques-grid"> <div class="technique-card"> <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%237209B7' /><path d='M50,20 C60,40 70,50 80,60 C70,70 60,80 50,80 C40,80 30,70 20,60 C30,50 40,40 50,20 Z' fill='%23fc4a1a' /></svg>" alt="Flow yoga"> <h4>Flow Yoga</h4> </div> <div class="technique-card"> <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%23fc4a1a' /><circle cx='50' cy='50' r='30' fill='%231AFCDC' /></svg>" alt="Animal flow"> <h4>Animal Flow</h4> </div> <div class="technique-card"> <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%231AFCDC' /><path d='M20,50 Q50,20 80,50 Q50,80 20,50 Z' fill='%237209B7' /></svg>" alt="Tai Chi"> <h4>Tai Chi</h4> </div> <div class="technique-card"> <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' fill='%237209B7' /><path d='M30,70 Q50,30 70,70 Z' fill='white' /></svg>" alt="Dance Fitness"> <h4>Dance Fitness</h4> </div> </div> </article> </div> </section> <section class="progress-section" id="progress"> <h2>Track Your Progress</h2> <p>Fluid movement training offers measurable improvements across multiple dimensions of fitness:</p> <div class="progress-container"> <div class="progress-item"> <svg class="progress-circle" viewBox="0 0 100 100"> <circle class="bg" cx="50" cy="50" r="45" /> <circle class="progress mobility-progress" cx="50" cy="50" r="45" pathLength="100" /> </svg> <div class="progress-text mobility-text">0%</div> <div class="progress-label">Mobility</div> </div> <div class="progress-item"> <svg class="progress-circle" viewBox="0 0 100 100"> <circle class="bg" cx="50" cy="50" r="45" /> <circle class="progress strength-progress" cx="50" cy="50" r="45" pathLength="100" /> </svg> <div class="progress-text strength-text">0%</div> <div class="progress-label">Strength</div> </div> <div class="progress-item"> <svg class="progress-circle" viewBox="0 0 100 100"> <circle class="bg" cx="50" cy="50" r="45" /> <circle class="progress balance-progress" cx="50" cy="50" r="45" pathLength="100" /> </svg> <div class="progress-text balance-text">0%</div> <div class="progress-label">Balance</div> </div> </div> </section> <section class="testimonials" id="testimonials"> <h2>Movement Stories</h2> <div class="testimonial-slider"> <div class="testimonial-track"> <div class="testimonial-slide"> <div class="testimonial-card"> <p>"After years of traditional weight training, I switched to fluid movement practice and the results were transformative. My chronic shoulder pain disappeared within 3 weeks, and I've developed strength I never had before — particularly in transitional movements that matter in everyday life."</p> <div class="testimonial-author"> <div class="testimonial-avatar" style="background-color: #fc4a1a;"></div> <div class="testimonial-info"> <h4>Michael Reeves</h4> <p>Former CrossFit Athlete</p> </div> </div> </div> </div> <div class="testimonial-slide"> <div class="testimonial-card"> <p>"As a yoga instructor, integrating fluid movement principles into my practice revolutionized my teaching. My students report faster progress, better body awareness, and a deeper mind-body connection that stays with them beyond the mat."</p> <div class="testimonial-author"> <div class="testimonial-avatar" style="background-color: #7209B7;"></div> <div class="testimonial-info"> <h4>Sophia Chen</h4> <p>Yoga Instructor</p> </div> </div> </div> </div> <div class="testimonial-slide"> <div class="testimonial-card"> <p>"At 65, I thought my fitness journey was about managing decline. The fluid movement program changed everything — I've gained mobility I haven't had in decades and the mindfulness component has improved my sleep quality dramatically."</p> <div class="testimonial-author"> <div class="testimonial-avatar" style="background-color: #1AFCDC;"></div> <div class="testimonial-info"> <h4>Robert Jameson</h4> <p>Retired Teacher</p> </div> </div> </div> </div> </div> <div class="slider-dots"> <span class="dot active" data-index="0"></span> <span class="dot" data-index="1"></span> <span class="dot" data-index="2"></span> </div> </div> </section> <section class="newsletter"> <h2>Join the Movement</h2> <p>Subscribe to our weekly flow state newsletter for movement tips, mindfulness practices, and exclusive fluid training sequences.</p> <form class="newsletter-form"> <input type="email" placeholder="Your email address" required> <button type="button" id="subscribe-btn">Subscribe</button> </form> </section> <footer> <div class="social-links"> <a href="#" aria-label="Instagram"> <svg class="social-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/> </svg> </a> <a href="#" aria-label="Twitter"> <svg class="social-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/> </svg> </a> <a href="#" aria-label="Youtube"> <svg class="social-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/> </svg> </a> </div> <p class="copyright">© 2023 MOVE Fitness & Wellness. All rights reserved.</p> </footer> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Menu toggle const menuButton = document.querySelector('.menu-button'); const menu = document.querySelector('.menu'); menuButton.addEventListener('click', function() { menuButton.classList.toggle('active'); menu.classList.toggle('active'); }); // Close menu when clicking menu items const menuItems = document.querySelectorAll('.menu a'); menuItems.forEach(item => { item.addEventListener('click', function() { menuButton.classList.remove('active'); menu.classList.remove('active'); }); }); // Progress circles animation function animateProgress(selector, targetValue, textSelector) { const circle = document.querySelector(selector); const text = document.querySelector(textSelector); const
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); body { width: 100%; height: 100vh; background-color: #f8f5f2; color: #2d2d2d; overflow: hidden; } .showcase-container { width: 100%; height: 100%; max-width: 700px; max-height: 700px; margin: 0 auto; position: relative; overflow: hidden; } .texture-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239C92AC' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E"); opacity: 0.5; pointer-events: none; z-index: 10; } .header { position: relative; padding: 30px; text-align: center; z-index: 5; } .header h1 { font-size: 2.5rem; font-weight: 300; letter-spacing: 2px; margin-bottom: 10px; color: #433d3a; position: relative; display: inline-block; } .header h1::after { content: ''; position: absolute; width: 60px; height: 3px; background-color: #c8a79c; bottom: -8px; left: 50%; transform: translateX(-50%); transition: width 0.5s ease-in-out; } .header h1:hover::after { width: 100%; } .header p { font-size: 1rem; font-weight: 300; max-width: 500px; margin: 0 auto; margin-top: 20px; line-height: 1.6; color: #666; position: relative; } .gallery { position: relative; display: flex; flex-direction: column; gap: 30px; padding: 0 30px; margin-top: 20px; overflow-y: auto; max-height: calc(100% - 150px); scrollbar-width: thin; scrollbar-color: #c8a79c #f8f5f2; } .gallery::-webkit-scrollbar { width: 6px; } .gallery::-webkit-scrollbar-track { background: #f8f5f2; } .gallery::-webkit-scrollbar-thumb { background-color: #c8a79c; border-radius: 3px; } .space-item { display: flex; align-items: center; position: relative; min-height: 250px; transform: translateY(50px); opacity: 0; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease-in-out; } .space-item.visible { transform: translateY(0); opacity: 1; } .space-item:nth-child(odd) { flex-direction: row; } .space-item:nth-child(even) { flex-direction: row-reverse; } .image-container { flex: 1; height: 250px; position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1); transition: transform 0.4s ease, box-shadow 0.4s ease; } .image-container:hover { transform: translateY(-5px); box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15); } .space-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; } .image-container:hover .space-image { transform: scale(1.05); } .image-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4)); opacity: 0; transition: opacity 0.3s ease; } .image-container:hover .image-overlay { opacity: 1; } .content { flex: 1; padding: 0 30px; display: flex; flex-direction: column; justify-content: center; } .space-title { font-size: 1.5rem; font-weight: 500; margin-bottom: 15px; color: #433d3a; position: relative; display: inline-block; } .space-title::before { content: ''; position: absolute; width: 40px; height: 2px; background-color: #c8a79c; bottom: -6px; left: 0; transition: width 0.3s ease-in-out; } .space-item:nth-child(even) .space-title::before { left: auto; right: 0; } .space-item:hover .space-title::before { width: 100%; } .space-description { font-size: 0.95rem; line-height: 1.6; color: #666; margin-bottom: 15px; } .space-features { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; } .feature { font-size: 0.8rem; padding: 5px 12px; background-color: #ece8e4; border-radius: 20px; color: #6d6661; transition: background-color 0.3s ease, transform 0.3s ease; cursor: default; } .feature:hover { background-color: #c8a79c; color: white; transform: translateY(-2px); } .organic-shape { position: absolute; width: 300px; height: 300px; border-radius: 80% 60% 70% 50% / 60% 80% 60% 70%; background-color: rgba(200, 167, 156, 0.1); z-index: -1; transition: transform 2s ease-in-out, border-radius 2s ease-in-out; animation: morphShape 15s ease-in-out infinite alternate; } .space-item:nth-child(odd) .organic-shape { top: -100px; right: -50px; } .space-item:nth-child(even) .organic-shape { bottom: -100px; left: -50px; } @keyframes morphShape { 0% { border-radius: 80% 60% 70% 50% / 60% 80% 60% 70%; } 25% { border-radius: 40% 80% 50% 70% / 70% 50% 80% 40%; } 50% { border-radius: 60% 50% 80% 40% / 50% 70% 40% 80%; } 75% { border-radius: 70% 40% 60% 80% / 40% 60% 70% 50%; } 100% { border-radius: 50% 70% 40% 60% / 80% 40% 60% 50%; } } .explore-btn { align-self: flex-start; margin-top: 10px; padding: 10px 20px; background-color: transparent; border: 1px solid #c8a79c; color: #c8a79c; font-size: 0.85rem; font-weight: 500; letter-spacing: 1px; border-radius: 30px; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; position: relative; overflow: hidden; } .explore-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: #c8a79c; transition: left 0.3s ease; z-index: -1; } .explore-btn:hover { color: white; } .explore-btn:hover::before { left: 0; } .cursor-follow { position: fixed; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(200, 167, 156, 0.2); mix-blend-mode: multiply; pointer-events: none; z-index: 9999; transition: transform 0.1s, width 0.3s, height 0.3s; transform: translate(-50%, -50%); display: none; } .footer { position: relative; padding: 20px 30px; text-align: center; font-size: 0.85rem; color: #999; margin-top: 20px; z-index: 5; } @media (max-width: 650px) { .header h1 { font-size: 2rem; } .space-item { flex-direction: column !important; gap: 20px; min-height: auto; } .content { padding: 15px 10px; } .space-title { font-size: 1.3rem; } .space-description { font-size: 0.9rem; } .image-container { width: 100%; } .organic-shape { width: 200px; height: 200px; } } @media (max-width: 450px) { .header { padding: 20px 15px; } .header h1 { font-size: 1.8rem; } .gallery { padding: 0 15px; } .feature { font-size: 0.75rem; padding: 4px 10px; } } </style> </head> <body> <div class="cursor-follow"></div> <div class="showcase-container"> <div class="texture-overlay"></div> <div class="header"> <h1>Biophilic Living</h1> <p>Where organic forms meet structured design. Explore our carefully curated spaces that balance nature's fluidity with contemporary architectural precision.</p> </div> <div class="gallery"> <div class="space-item"> <div class="image-container"> <img src="https://images.unsplash.com/photo-1600585154526-990dced4db0d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Minimalist Living Room" class="space-image"> <div class="image-overlay"></div> </div> <div class="content"> <h2 class="space-title">Sculptural Serenity</h2> <p class="space-description">A living space where curved furniture elements create a fluid dialogue with structured architectural details. Light oak surfaces complement textured fabrics to enhance tactile depth.</p> <div class="space-features"> <span class="feature">Curved Silhouettes</span> <span class="feature">Tactile Textiles</span> <span class="feature">Natural Light</span> </div> <button class="explore-btn">Explore Space</button> </div> <div class="organic-shape"></div> </div> <div class="space-item"> <div class="image-container"> <img src="https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80" alt="Modern Kitchen" class="space-image"> <div class="image-overlay"></div> </div> <div class="content"> <h2 class="space-title">Culinary Contours</h2> <p class="space-description">This kitchen merges precision cabinetry with organic material choices. Terrazzo countertops introduce natural pattern complexity against geometric cabinet forms, creating visual harmony.</p> <div class="space-features"> <span class="feature">Terrazzo Elements</span> <span class="feature">Precision Joinery</span> <span class="feature">Floating Shelves</span> </div> <button class="explore-btn">Explore Space</button> </div> <div class="organic-shape"></div> </div> <div class="space-item"> <div class="image-container"> <img src="https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Bedroom Retreat" class="space-image"> <div class="image-overlay"></div> </div> <div class="content"> <h2 class="space-title">Textile Topography</h2> <p class="space-description">A bedroom sanctuary where layered textiles create an undulating landscape. The headboard's organic shape counters the room's clean lines, while a neutral palette allows textural elements to define the space.</p> <div class="space-features"> <span class="feature">Layered Textures</span> <span class="feature">Sculptural Lighting</span> <span class="feature">Tonal Harmony</span> </div> <button class="explore-btn">Explore Space</button> </div> <div class="organic-shape"></div> </div> <div class="space-item"> <div class="image-container"> <img src="https://images.unsplash.com/photo-1630699144338-cc52f86e5005?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Bathroom Oasis" class="space-image"> <div class="image-overlay"></div> </div> <div class="content"> <h2 class="space-title">Mineral Bathscape</h2> <p class="space-description">Water-inspired curves define this bathroom where travertine surfaces create a cave-like sanctuary. Precision-cut mirrors and fixtures provide architectural counterpoints to the natural stone textures.</p> <div class="space-features"> <span class="feature">Stone Textures</span> <span class="feature">Curved Elements</span> <span class="feature">Ambient Lighting</span> </div> <button class="explore-btn">Explore Space</button> </div> <div class="organic-shape"></div> </div> </div> <div class="footer"> Biophilic Living Showcase © 2023 </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Cursor follow effect const cursorFollow = document.querySelector('.cursor-follow'); if (window.innerWidth > 768) { cursorFollow.style.display = 'block'; document.addEventListener('mousemove', function(e) { cursorFollow.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`; }); } // Buttons hover effect const buttons = document.querySelectorAll('.explore-btn'); buttons.forEach(button => { button.addEventListener('mouseenter', function() { if (window.innerWidth > 768) { cursorFollow.style.width = '60px'; cursorFollow.style.height = '60px'; cursorFollow.style.backgroundColor = 'rgba(200, 167, 156, 0.3)'; } }); button.addEventListener('mouseleave', function() { if (window.innerWidth > 768) { cursorFollow.style.width = '40px'; cursorFollow.style.height = '40px'; cursorFollow.style.backgroundColor = 'rgba(200, 167, 156, 0.2)'; } }); // Prevent actual submission button.addEventListener('click', function(e) { e.preventDefault(); // Add a small animation on click this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = 'scale(1)'; }, 200); }); }); // Images hover effect const images = document.querySelectorAll('.image-container'); images.forEach(image => { image.addEventListener('mouseenter', function() { if (window.innerWidth > 768) { cursorFollow.style.width = '80px'; cursorFollow.style.height = '80px'; cursorFollow.style.backgroundColor = 'rgba(200, 167, 156, 0.1)'; } }); image.addEventListener('mouseleave', function() { if (window.innerWidth > 768) { cursorFollow.style.width = '40px'; cursorFollow.style.height = '40px'; cursorFollow.style.backgroundColor = 'rgba(200, 167, 156, 0.2)'; } }); }); // Intersection Observer for scroll animations const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); } }); }, { threshold: 0.1 }); const spaceItems = document.querySelectorAll('.space-item'); spaceItems.forEach(item => { observer.observe(item); }); // Adjust organic shapes on mouse movement document.addEventListener('mousemove', function(e) { const shapes = document.querySelectorAll('.organic-shape'); const mouseX = e.clientX / window.innerWidth; const mouseY = e.clientY / window.innerHeight; shapes.forEach(shape => { const boundingRect = shape.getBoundingClientRect(); const shapeX = boundingRect.left + boundingRect.width / 2; const shapeY = boundingRect.top + boundingRect.height / 2; const moveX = (mouseX - 0.5) * 20; const moveY = (mouseY - 0.5) * 20; shape.style.transform = `translate(${moveX}px, ${moveY}px)`; }); }); }); </script> </body> </html>
