Exploring the world of mix examples can be both enlightening and inspiring. These examples showcase the versatility and creativity that can be achieved through thoughtful design and implementation.
In this article, we will delve into ten compelling mix examples that highlight innovative approaches and practical applications. Each example serves as a testament to the power of mixing elements to create something truly unique.
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 empower designers and developers to create pixel-perfect UI effortlessly. Loved by professionals across the industry, it ensures stunning results every time.
Ready to elevate your design game? Start for free today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Unlock the power of Subframe and design stunning UIs with unmatched efficiency. Create pixel-perfect interfaces, including mix, effortlessly with our intuitive drag-and-drop editor.
Ready to transform your design process? Start for free and begin creating immediately!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pulse: Music Streaming Interface</title> <style> :root { --primary: #6200ee; --secondary: #03dac6; --accent: #ff4081; --bg-dark: #121212; --text-light: #ffffff; --text-secondary: rgba(255, 255, 255, 0.7); --surface: #1e1e1e; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { background-color: var(--bg-dark); color: var(--text-light); height: 700px; width: 700px; max-width: 100%; overflow: hidden; position: relative; } .container { width: 100%; height: 100%; padding: 1.5rem; display: flex; flex-direction: column; position: relative; overflow: hidden; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; position: relative; z-index: 2; } .logo { font-size: 1.8rem; font-weight: 800; background: linear-gradient(90deg, var(--secondary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.5px; } .search { background: rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 0.5rem 1rem; display: flex; align-items: center; width: 40%; transition: all 0.3s ease; } .search:hover, .search:focus-within { background: rgba(255, 255, 255, 0.15); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .search input { background: transparent; border: none; color: var(--text-light); width: 100%; outline: none; margin-left: 0.5rem; } .search-icon { color: var(--text-secondary); } .now-playing { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; z-index: 2; } .album-wrapper { position: relative; width: 300px; height: 300px; margin-bottom: 2rem; perspective: 1000px; } .album-bg { position: absolute; top: -250%; left: -150%; width: 400%; height: 400%; background-size: cover; background-position: center; filter: blur(40px); opacity: 0.4; z-index: -1; transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .album-cover { width: 100%; height: 100%; border-radius: 8px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); overflow: hidden; position: relative; transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .album-cover:hover { transform: rotateY(5deg) rotateX(5deg); } .album-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .album-cover::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255, 64, 129, 0.5), rgba(3, 218, 198, 0.5)); mix-blend-mode: overlay; opacity: 0; transition: opacity 0.5s ease; z-index: 1; } .album-wrapper.playing .album-cover::before { opacity: 1; } .album-wrapper.playing .album-cover img { transform: scale(1.05); } .track-info { text-align: center; margin-bottom: 2rem; } .track-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 0.5rem; position: relative; display: inline-block; } .track-title::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--secondary), var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease; } .album-wrapper.playing + .track-info .track-title::after { transform: scaleX(1); } .artist { color: var(--text-secondary); font-size: 1rem; } .controls { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-bottom: 2rem; } .control-btn { background: transparent; border: none; cursor: pointer; color: var(--text-light); font-size: 1.5rem; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } .control-btn:hover { transform: scale(1.1); color: var(--accent); } .play-btn { background: var(--primary); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(98, 0, 238, 0.5); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .play-btn:hover { background: #7c4dff; transform: scale(1.1); box-shadow: 0 6px 16px rgba(98, 0, 238, 0.6); } .play-btn:active { transform: scale(0.95); } .progress-container { width: 100%; margin-bottom: 1rem; position: relative; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; overflow: hidden; } .progress-bar { height: 100%; background: linear-gradient(90deg, var(--secondary), var(--accent)); width: 23%; transition: width 0.1s linear; position: relative; } .progress-bar::before { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background: white; border-radius: 50%; opacity: 0; transition: opacity 0.3s ease; } .progress-container:hover .progress-bar::before { opacity: 1; } .time { display: flex; justify-content: space-between; color: var(--text-secondary); font-size: 0.8rem; } .up-next { margin-top: auto; position: relative; z-index: 2; } .up-next-title { font-size: 1rem; margin-bottom: 1rem; color: var(--text-secondary); display: flex; align-items: center; gap: 0.5rem; } .tracks { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; scrollbar-width: thin; scrollbar-color: var(--primary) var(--bg-dark); } .tracks::-webkit-scrollbar { height: 4px; } .tracks::-webkit-scrollbar-thumb { background-color: var(--primary); border-radius: 2px; } .track { min-width: 150px; background: var(--surface); border-radius: 8px; padding: 0.8rem; transition: all 0.3s ease; position: relative; overflow: hidden; } .track::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary), var(--accent)); opacity: 0; mix-blend-mode: overlay; transition: opacity 0.3s ease; } .track:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); } .track:hover::before { opacity: 0.2; } .track-img { width: 100%; aspect-ratio: 1; border-radius: 4px; margin-bottom: 0.8rem; overflow: hidden; } .track-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .track:hover .track-img img { transform: scale(1.08); } .track-name { font-weight: 600; margin-bottom: 0.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .track-artist { color: var(--text-secondary); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .equalizer { display: none; gap: 4px; height: 14px; align-items: flex-end; position: absolute; top: 8px; right: 8px; } .equalizer span { width: 2px; background: white; border-radius: 1px; animation: equalize 1s infinite; } .equalizer span:nth-child(1) { height: 60%; animation-delay: 0.1s; } .equalizer span:nth-child(2) { height: 100%; animation-delay: 0.3s; } .equalizer span:nth-child(3) { height: 40%; animation-delay: 0.5s; } .album-wrapper.playing .equalizer { display: flex; } @keyframes equalize { 0%, 100% { transform: scaleY(0.6); } 50% { transform: scaleY(1); } } .background-blob { position: absolute; top: 0; right: 0; width: 500px; height: 500px; background: radial-gradient(circle, var(--primary) 0%, transparent 70%); opacity: 0.1; filter: blur(60px); z-index: 1; animation: pulse 8s infinite alternate; } .background-blob2 { position: absolute; bottom: 0; left: 0; width: 400px; height: 400px; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); opacity: 0.1; filter: blur(60px); z-index: 1; animation: pulse 8s infinite alternate-reverse; } @keyframes pulse { 0% { transform: scale(1) translate(0, 0); } 100% { transform: scale(1.2) translate(50px, 30px); } } @media (max-width: 600px) { .header { flex-direction: column; gap: 1rem; margin-bottom: 1rem; } .search { width: 100%; } .album-wrapper { width: 220px; height: 220px; margin-bottom: 1.5rem; } .track-title { font-size: 1.5rem; } .controls { gap: 1rem; } .play-btn { width: 50px; height: 50px; } } /* Responsive layout for the embed */ @media (max-width: 700px) and (min-width: 601px) { .album-wrapper { width: 250px; height: 250px; } } /* Animated particles */ .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.5s ease; } .album-wrapper.playing ~ .particles { opacity: 1; } .particle { position: absolute; border-radius: 50%; opacity: 0; animation: float 3s infinite linear; } @keyframes float { 0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; } 10% { opacity: 0.8; } 100% { transform: translateY(-100px) translateX(30px) scale(0); opacity: 0; } } </style> </head> <body> <div class="container"> <div class="header"> <div class="logo">Pulse</div> <div class="search"> <span class="search-icon">🔍</span> <input type="text" placeholder="Search for tracks, artists, albums..."> </div> </div> <div class="now-playing"> <div class="album-wrapper"> <div class="album-bg"></div> <div class="album-cover"> <img src="https://images.unsplash.com/photo-1614613535308-eb5fbd3d2c17?q=80&w=500&auto=format&fit=crop" alt="Album Cover"> </div> <div class="equalizer"> <span></span> <span></span> <span></span> </div> </div> <div class="track-info"> <h2 class="track-title">Neon Dreams</h2> <p class="artist">Midnight Echoes</p> </div> <div class="progress-container"> <div class="progress-bar"></div> </div> <div class="time"> <span>1:42</span> <span>7:15</span> </div> <div class="controls"> <button class="control-btn" aria-label="Previous">⏮</button> <button class="control-btn play-btn" aria-label="Play/Pause">▶</button> <button class="control-btn" aria-label="Next">⏭</button> </div> </div> <div class="up-next"> <h3 class="up-next-title"> <span>Up Next</span> <span style="color: var(--accent);">✨</span> </h3> <div class="tracks"> <div class="track"> <div class="track-img"> <img src="https://images.unsplash.com/photo-1514525253161-7a46d19cd819?q=80&w=200&auto=format&fit=crop" alt="Track 1"> </div> <div class="track-name">Synthwave Highway</div> <div class="track-artist">Electric Horizon</div> </div> <div class="track"> <div class="track-img"> <img src="https://images.unsplash.com/photo-1619983081563-430f63602796?q=80&w=200&auto=format&fit=crop" alt="Track 2"> </div> <div class="track-name">Retrograde Motion</div> <div class="track-artist">Cosmic Pulse</div> </div> <div class="track"> <div class="track-img"> <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?q=80&w=200&auto=format&fit=crop" alt="Track 3"> </div> <div class="track-name">Vibrant Echoes</div> <div class="track-artist">Aurora Waves</div> </div> <div class="track"> <div class="track-img"> <img src="https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?q=80&w=200&auto=format&fit=crop" alt="Track 4"> </div> <div class="track-name">Midnight Glow</div> <div class="track-artist">Neon Dreams</div> </div> </div> </div> <div class="background-blob"></div> <div class="background-blob2"></div> <div class="particles"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const albumWrapper = document.querySelector('.album-wrapper'); const albumBg = document.querySelector('.album-bg'); const albumCover = document.querySelector('.album-cover img'); const playBtn = document.querySelector('.play-btn'); const progressBar = document.querySelector('.progress-bar'); const tracks = document.querySelectorAll('.track'); const particles = document.querySelector('.particles'); // Set initial album background albumBg.style.backgroundImage = `url(${albumCover.src})`; // Play/Pause functionality let isPlaying = false; playBtn.addEventListener('click', () => { isPlaying = !isPlaying; if (isPlaying) { playBtn.innerHTML = '❚❚'; albumWrapper.classList.add('playing'); // Start progress bar animation anime({ targets: '.progress-bar', width: '100%', easing: 'linear', duration: 60000, // 60 seconds autoplay: true }); // Add particles createParticles(); } else { playBtn.innerHTML = '▶'; albumWrapper.classList.remove('playing'); // Pause progress bar animation anime.remove('.progress-bar'); // Clear particles particles.innerHTML = ''; } }); // Vibrant mix-blend-mode effects on hover albumCover.addEventListener('mousemove', (e) => { const x = e.offsetX / albumCover.offsetWidth; const y = e.offsetY / albumCover.offsetHeight; // Dynamic tilt effect const rotateX = (y - 0.5) * 10; const rotateY = (0.5 - x) * 10; albumWrapper.querySelector('.album-cover').style.transform = `rotateY(${rotateY}deg) rotateX(${rotateX}deg)`; // Dynamic gradient on hover if (isPlaying) { albumWrapper.querySelector('.album-cover').style.boxShadow = `0 20px 40px rgba(0, 0, 0, 0.4), ${x * 20}px ${y * 20}px 30px rgba(255, 64, 129, 0.3), ${-x * 20}px ${-y * 20}px 30px rgba(3, 218, 198, 0.3)`; } }); albumCover.addEventListener('mouseleave', () => { // Reset transform albumWrapper.querySelector('.album-cover').style.transform = isPlaying ? 'rotateY(0deg) rotateX(0deg) scale(1.05)' : 'rotateY(0deg) rotateX(0deg)'; // Reset shadow albumWrapper.querySelector('.album-cover').style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.4)'; }); // Tracks hover interactions tracks.forEach(track => { track.addEventListener('click', () => { const newAlbumSrc = track.querySelector('img').src.replace('w=200', 'w=500'); const newTitle = track.querySelector('.track-name').textContent; const newArtist = track.querySelector('.track-artist').textContent; // Animated transition anime({ targets: albumCover, opacity: [1, 0, 1], scale: [1, 0.9, 1], easing: 'easeInOutQuad', duration: 600, complete: function() { albumCover.src = newAlbumSrc; albumBg.style.backgroundImage = `url(${newAlbumSrc})`; document.querySelector('.track-title').textContent = newTitle; document.querySelector('.artist').textContent = newArtist; // Reset progress progressBar.style.width = '0%'; } }); // If currently playing, maintain playing state if (isPlaying) { setTimeout(() => { anime({ targets: '.progress-bar', width: '100%', easing: 'linear', duration: 60000, autoplay: true }); }, 600); } }); }); // Create animated particles for playing effect function createParticles() { particles.innerHTML = ''; const colors = ['#ff4081', '#03dac6', '#6200ee', '#ffffff']; for (let i = 0; i < 20; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); // Random position and size const size = Math.random() * 6 + 2; const x = Math.random() * 100; const delay = Math.random() * 3; const duration = Math.random() * 2 + 2; const color = colors[Math.floor(Math.random() * colors.length)]; particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.left = `${x}%`; particle.style.bottom = '0'; particle.style.backgroundColor = color; particle.style.animationDuration = `${duration}s`; particle.style.animationDelay = `${delay}s`; particles.appendChild(particle); } } // Simple anime.js polyfill for the demo (since we can't include external libraries) const anime = { targets: null, remove: function() {}, random: function(min, max) { return Math.random() * (max - min) + min; } }; anime.remove = function(selector) { const el = document.querySelector(selector); if (el) { el.style.transition = 'none'; } }; anime = function(options) { const targets = document.querySelectorAll(options.targets); targets.forEach(target => { // Apply transitions target.style.transition = `all ${options.duration/1000}s ${options.easing || 'linear'}`; // For width property if (options.width) { setTimeout(() => { target.style.width = options.width; }, 10); } // For opacity and scale if (options.opacity || options.scale) { const keyframes = []; const totalSteps = options.opacity ? options.opacity.length : options.scale.length; for (let i = 0; i < totalSteps; i++) { const step = {}; if (options.opacity) step.opacity = options.opacity[i]; if (options.scale) step.transform = `scale(${options.scale[i]})`; step.offset = i / (totalSteps - 1); keyframes.push(step); } target.animate(keyframes, { duration: options.duration, easing: options.easing || 'linear', fill: 'forwards' }); } // Execute complete callback if (options.complete) { setTimeout(options.complete, options.duration); } }); return { targets: targets }; }; }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nexus Innovations | Corporate Solutions</title> <style> :root { --primary: #0056b3; --secondary: #002a59; --accent: #00c2ff; --light: #f5f9ff; --dark: #1a1a2e; --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: var(--light); color: var(--dark); overflow-x: hidden; line-height: 1.6; } header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; transition: var(--transition); mix-blend-mode: difference; } .header-scrolled { background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); mix-blend-mode: normal; } .logo { font-weight: 800; font-size: 1.5rem; color: var(--light); text-decoration: none; position: relative; z-index: 2; } .logo span { color: var(--accent); } .header-scrolled .logo { color: var(--secondary); } nav ul { display: flex; list-style: none; } nav ul li { margin-left: 2rem; } nav ul li a { color: var(--light); text-decoration: none; font-weight: 500; position: relative; transition: var(--transition); } nav ul li a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: var(--accent); transition: var(--transition); } nav ul li a:hover::after { width: 100%; } .header-scrolled nav ul li a { color: var(--secondary); } .hero { position: relative; height: 100vh; display: flex; align-items: center; overflow: hidden; background-color: var(--dark); } .hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://images.unsplash.com/photo-1573164713988-8665fc963095?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500'); background-size: cover; background-position: center; filter: brightness(0.6) contrast(1.1) saturate(0.8); z-index: 1; } .hero-content { position: relative; z-index: 2; max-width: 800px; padding: 0 2rem; margin: 0 auto; text-align: center; } h1 { font-size: 3.5rem; font-weight: 800; color: var(--light); margin-bottom: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; mix-blend-mode: difference; } h1 span { color: var(--accent); position: relative; display: inline-block; } h1 span::before { content: ''; position: absolute; bottom: 5px; left: 0; width: 100%; height: 8px; background-color: var(--accent); opacity: 0.3; z-index: -1; } .hero p { font-size: 1.1rem; color: var(--light); max-width: 600px; margin: 0 auto 2rem; mix-blend-mode: difference; } .btn { display: inline-block; padding: 0.8rem 2rem; background: var(--primary); color: white; text-decoration: none; border-radius: 4px; font-weight: 500; transition: var(--transition); border: none; cursor: pointer; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: 0.5s; } .btn:hover { background: var(--secondary); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .btn:hover::before { left: 100%; } section { padding: 5rem 2rem; } .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; } .feature-card { background: white; border-radius: 10px; padding: 2rem; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05); transition: var(--transition); position: relative; z-index: 1; overflow: hidden; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary), var(--secondary)); opacity: 0; z-index: -1; transition: var(--transition); } .feature-card:hover { transform: translateY(-10px); } .feature-card:hover::before { opacity: 0.03; } .feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: var(--light); border-radius: 50%; margin-bottom: 1.5rem; color: var(--primary); } .feature-card h3 { font-size: 1.3rem; margin-bottom: 1rem; color: var(--secondary); } .about { position: relative; background: var(--dark); color: var(--light); overflow: hidden; } .about-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://images.unsplash.com/photo-1497366811353-6870744d04b2?ixlib=rb-4.0.3&auto=format&fit=crop&w=1500'); background-size: cover; background-position: center; opacity: 0.2; filter: grayscale(50%); } .about-content { position: relative; max-width: 1000px; margin: 0 auto; z-index: 2; } .about h2, .testimonials h2, .contact h2 { font-size: 2.5rem; margin-bottom: 2rem; text-align: center; position: relative; display: inline-block; } .about h2::after, .testimonials h2::after, .contact h2::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 80px; height: 4px; background: var(--accent); } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .about-text p { margin-bottom: 1.5rem; color: rgba(255, 255, 255, 0.9); mix-blend-mode: difference; } .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .stat-item { text-align: center; padding: 1.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 8px; backdrop-filter: blur(10px); } .stat-number { font-size: 2.5rem; font-weight: 700; color: var(--accent); margin-bottom: 0.5rem; } .testimonials { background: var(--light); text-align: center; } .testimonial-slider { max-width: 800px; margin: 0 auto; position: relative; } .testimonial { background: white; padding: 2rem; border-radius: 10px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05); margin: 2rem 0; display: none; transition: var(--transition); } .testimonial.active { display: block; animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .quote { font-size: 1.1rem; font-style: italic; color: var(--dark); margin-bottom: 1.5rem; } .client { display: flex; align-items: center; justify-content: center; } .client-img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; margin-right: 1rem; } .client-info h4 { color: var(--primary); font-weight: 600; } .client-info p { font-size: 0.9rem; color: #666; } .slider-dots { display: flex; justify-content: center; margin-top: 2rem; } .dot { width: 10px; height: 10px; background: #ccc; border-radius: 50%; margin: 0 5px; cursor: pointer; transition: var(--transition); } .dot.active { background: var(--primary); transform: scale(1.3); } .contact { background: white; } .contact-form { max-width: 600px; margin: 0 auto; } .form-group { margin-bottom: 1.5rem; position: relative; } .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: var(--secondary); } .form-control { width: 100%; padding: 0.8rem 1rem; border: 1px solid #ddd; border-radius: 4px; transition: var(--transition); } .form-control:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1); } footer { background: var(--secondary); color: var(--light); padding: 3rem 2rem; text-align: center; } .footer-content { max-width: 1200px; margin: 0 auto; } .footer-logo { font-size: 1.8rem; font-weight: 800; margin-bottom: 1rem; } .footer-logo span { color: var(--accent); } .footer-links { display: flex; justify-content: center; list-style: none; margin: 1.5rem 0; } .footer-links li { margin: 0 1rem; } .footer-links a { color: var(--light); text-decoration: none; transition: var(--transition); } .footer-links a:hover { color: var(--accent); } .social-links { display: flex; justify-content: center; margin: 1.5rem 0; } .social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; margin: 0 0.5rem; color: var(--light); transition: var(--transition); } .social-link:hover { background: var(--accent); transform: translateY(-5px); } .copyright { font-size: 0.9rem; opacity: 0.7; margin-top: 2rem; } /* Responsive adjustments */ @media (max-width: 768px) { h1 { font-size: 2.5rem; } .about-grid { grid-template-columns: 1fr; } .about-text { order: 2; } .stats { order: 1; margin-bottom: 2rem; } nav ul { display: none; } .mobile-toggle { display: block; } } @media (max-width: 480px) { h1 { font-size: 2rem; } section { padding: 3rem 1.5rem; } .stats { grid-template-columns: 1fr; } } /* Scroll reveal animations */ .reveal { opacity: 0; transform: translateY(30px); transition: all 0.7s ease-in-out; } .reveal.active { opacity: 1; transform: translateY(0); } /* Hover effects for feature cards */ .feature-card:hover .feature-icon { background-color: var(--primary); color: white; transform: scale(1.1) rotate(5deg); } /* Cursor effect */ .custom-cursor { position: fixed; width: 20px; height: 20px; border: 2px solid var(--accent); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); z-index: 9999; transition: width 0.2s, height 0.2s, background-color 0.2s; mix-blend-mode: difference; } .custom-cursor.active { width: 40px; height: 40px; background-color: rgba(0, 194, 255, 0.1); } /* Blend mode elements */ .blend-text { mix-blend-mode: difference; color: white; } .blend-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, var(--primary), transparent); mix-blend-mode: overlay; opacity: 0.4; z-index: 1; } .text-gradient { background: linear-gradient(135deg, var(--accent), var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; } </style> </head> <body> <!-- Custom cursor --> <div class="custom-cursor"></div> <!-- Header --> <header id="header"> <a href="#" class="logo">Nexus<span>Innovations</span></a> <nav> <ul> <li><a href="#hero">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <!-- Hero Section --> <section id="hero" class="hero"> <div class="hero-bg"></div> <div class="blend-overlay"></div> <div class="hero-content"> <h1 class="blend-text">Elevate Your Business with <span>Seamless</span> Digital Solutions</h1> <p class="blend-text">We craft intelligent digital ecosystems that transform how enterprises operate, connect, and grow in today's dynamic marketplace.</p> <a href="#contact" class="btn">Schedule a Consultation</a> </div> </section> <!-- Services Section --> <section id="services"> <div class="container reveal"> <h2 class="text-center text-gradient">Our Core Services</h2> <div class="features"> <div class="feature-card"> <div class="feature-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect><line x1="3" y1="9" x2="21" y2="9"></line><line x1="9" y1="21" x2="9" y2="9"></line></svg> </div> <h3>Enterprise Architecture</h3> <p>Develop scalable, future-proof digital frameworks that align with your strategic business goals and technological roadmap.</p> </div> <div class="feature-card"> <div class="feature-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"></path><path d="M2 17l10 5 10-5"></path><path d="M2 12l10 5 10-5"></path></svg> </div> <h3>Data Intelligence</h3> <p>Transform raw data into actionable insights using advanced analytics and machine learning to drive informed business decisions.</p> </div> <div class="feature-card"> <div class="feature-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M16.2 7.8l-2 6.3-6.4 2.1 2-6.3z"></path></svg> </div> <h3>Digital Transformation</h3> <p>Guide your organization through holistic technological evolution with minimal disruption and maximum ROI.</p> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about"> <div class="about-bg"></div> <div class="about-content reveal"> <h2 class="blend-text">Our Approach</h2> <div class="about-grid"> <div class="about-text"> <p>At Nexus Innovations, we believe technology should serve as an extension of your business vision, not dictate it. Our methodology combines deep industry expertise with technological agility to create solutions that adapt to your evolving needs.</p> <p>We partner with forward-thinking enterprises to navigate complex digital landscapes, ensuring you stay ahead of market shifts while maintaining operational excellence.</p> </div> <div class="stats"> <div class="stat-item"> <div class="stat-number">94%</div> <div class="stat-title">Client Retention</div> </div> <div class="stat-item"> <div class="stat-number">$1.8B</div> <div class="stat-title">Client ROI Generated</div> </div> <div class="stat-item"> <div class="stat-number">127</div> <div class="stat-title">Enterprise Solutions</div> </div> <div class="stat-item"> <div class="stat-number">18</div> <div class="stat-title">Industry Awards</div> </div> </div> </div> </div> </section> <!-- Testimonials Section --> <section id="testimonials" class="testimonials"> <div class="container reveal"> <h2>Client Success Stories</h2> <div class="testimonial-slider"> <div class="testimonial active"> <p class="quote">"Nexus Innovations transformed our outdated infrastructure into a responsive, scalable ecosystem that reduced operational costs by 42% while improving productivity metrics across all departments."</p> <div class="client"> <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Client" class="client-img"> <div class="client-info"> <h4>Sarah Thornton</h4> <p>CTO, Meridian Global</p> </div> </div> </div> <div class="testimonial"> <p class="quote">"Their data intelligence platform enabled us to identify market trends months before our competitors, allowing us to adjust our strategy and capture a 23% increase in market share within two quarters."</p> <div class="client"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="client-img"> <div class="client-info"> <h4>Marcus Chen</h4> <p>CEO, VertexCore Systems</p> </div> </div> </div> <div class="testimonial"> <p class="quote">"What sets Nexus apart is their holistic approach to digital transformation. They didn't just modernize our tech stack—they transformed how we think about and leverage technology across our entire organization."</p> <div class="client"> <img src="https://randomuser.me/api/portraits/women/28.jpg" alt="Client" class="client-img"> <div class="client-info"> <h4>Elena Vartanian</h4> <p>COO, Quantum Logistics</p> </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> </div> </section> <!-- Contact Section --> <section id="contact" class="contact"> <div class="container reveal"> <h2>Start Your Transformation</h2> <div class="contact-form"> <div class="form-group"> <label for="name">Full Name</label> <input type="text" id="name" class="form-control" placeholder="Your name"> </div> <div class="form-group"> <label for="email">Email Address</label> <input type="email" id="email" class="form-control" placeholder="[email protected]"> </div> <div class="form-group"> <label for="company">Company</label> <input type="text" id="company" class="form-control" placeholder="Your company"> </div> <div class="form-group"> <label for="message">How can we help?</label> <textarea id="message" class="form-control" rows="5" placeholder="Tell us about your project goals"></textarea> </div> <button type="button" class="btn" id="submitBtn">Submit Inquiry</button> </div> </div> </section> <!-- Footer --> <footer> <div class="footer-content"> <div class="footer-logo">Nexus<span>Innovations</span></div> <p>Transforming enterprises through intelligent digital solutions.</p> <ul class="footer-links"> <li><a href="#">Home</a></li> <li><a href="#">Services</a></li> <li><a href="#">Case Studies</a></li> <li><a href="#">Careers</a></li> <li><a href="#">Contact</a></li> </ul> <div class="social-links"> <a href="#" class="social-link"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg> </a> <a href="#" class="social-link"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg> </a> <a href="#" class="social-link"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg> </a> </div> <p class="copyright">© 2023 Nexus Innovations. All rights reserved.</p> </div> </footer> <script> // Header scroll effect const header = document.getElementById('header'); window.addEventListener('scroll', () => { if (window.scrollY > 100) { header.classList.add('header-scrolled'); } else { header.classList.remove('header-scrolled'); } }); // Scroll reveal animation function revealOnScroll() { const reveals = document.querySelectorAll('.reveal'); reveals.forEach(reveal => { const windowHeight = window.innerHeight; const elementTop = reveal.getBoundingClientRect().top; const elementVisible = 150; if (elementTop < windowHeight - elementVisible) { reveal.classList.add('active'); } }); } window.addEventListener('scroll', revealOnScroll); window.addEventListener('load', revealOnScroll); // Custom cursor const cursor = document.querySelector('.custom-cursor'); document.addEventListener('mousemove', (e) => { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; }); document.addEventListener('mousedown', () => { cursor.classList.add('active'); }); document.addEventListener('mouseup', () => { cursor.classList.remove('active'); }); // Hover effect for interactive elements const interactiveElements = document.querySelectorAll('a, button, .feature-card, .dot'); interactiveElements.forEach(element => { element.addEventListener('mouseenter', () => { cursor.classList.add('active'); }); element.addEventListener('mouseleave', () => { cursor.classList.remove('active'); }); }); // Testimonial slider const dots = document.querySelectorAll('.dot'); const testimonials = document.querySelectorAll('.testimonial'); dots.forEach(dot => { dot.addEventListener('click', () => { const index = dot.getAttribute('data-index'); // Remove active class from all testimonials and dots testimonials.forEach(testimonial => testimonial.classList.remove('active')); dots.forEach(dot => dot.classList.remove('active')); // Add active class to selected testimonial and dot testimonials[index].classList.add('active'); dot.classList.add('active'); }); }); // Auto rotate testimonials let currentTestimonial = 0; function rotateTestimonials() { testimonials.forEach(testimonial => testimonial.classList.remove('active')); dots.forEach(dot => dot.classList.remove('active')); currentTestimonial = (currentTestimonial + 1) % testimonials.length; testimonials[currentTestimonial].classList.add('active'); dots[currentTestimonial].classList.add('active'); } setInterval(rotateTestimonials, 5000); // Form submission handling const submitBtn = document.getElementById('submitBtn'); submitBtn.addEventListener('click', (e) => { e.preventDefault(); const name = document.getElementById('name').value; const email = document.getElementById('email').value; const company = document.getElementById('company').value; const message = document.getElementById('message').value; if (name && email && message) { // Normally would submit to server, but for this demo we'll just show success submitBtn.textContent = 'Thanks! We\'ll be in touch soon.'; submitBtn.disabled = true; submitBtn.style.background = '#28a745'; // Clear form fields document.getElementById('name').value = ''; document.getElementById('email').value = ''; document.getElementById('company').value = ''; document.getElementById('message').value = ''; // Reset button after 3 seconds setTimeout(() => { submitBtn.textContent = 'Submit Inquiry'; submitBtn.disabled = false; submitBtn.style.background = ''; }, 3000); } }); // Smooth scrolling for navigation document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); </script> </body> </html>
<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: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; } body { background-color: #f7f7f7; color: #1a1a1a; overflow-x: hidden; width: 100%; height: 100%; max-width: 700px; max-height: 700px; margin: 0 auto; } .container { width: 100%; max-width: 700px; margin: 0 auto; padding: 1rem; overflow-y: auto; height: 100vh; max-height: 700px; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #333 #f7f7f7; } .container::-webkit-scrollbar { width: 5px; } .container::-webkit-scrollbar-track { background: #f7f7f7; } .container::-webkit-scrollbar-thumb { background-color: #333; } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .logo { font-size: 1.5rem; font-weight: 700; letter-spacing: 2px; color: #1a1a1a; } .nav-icons { display: flex; gap: 1rem; } .nav-icon { cursor: pointer; transition: transform 0.3s ease; } .nav-icon:hover { transform: scale(1.1); } .featured-collection { margin-bottom: 2rem; } h2 { font-size: 1.3rem; font-weight: 500; margin-bottom: 1rem; letter-spacing: 1px; } .product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .product-card { position: relative; overflow: hidden; border-radius: 4px; cursor: pointer; transition: transform 0.3s ease; background-color: #e6e6e6; } .product-card:hover { transform: translateY(-5px); } .product-image-container { position: relative; overflow: hidden; aspect-ratio: 3/4; } .product-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .product-card:hover .product-image { transform: scale(1.05); } .product-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1rem; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); color: white; opacity: 0; transform: translateY(20px); transition: all 0.3s ease; } .product-card:hover .product-overlay { opacity: 1; transform: translateY(0); } .product-details { padding: 1rem; } .product-title { font-size: 0.9rem; font-weight: 500; margin-bottom: 0.5rem; mix-blend-mode: difference; } .product-price { font-size: 0.8rem; font-weight: 700; color: #1a1a1a; } .product-spotlight { position: relative; margin-bottom: 2rem; overflow: hidden; border-radius: 4px; background-color: #1a1a1a; } .spotlight-image-container { position: relative; width: 100%; height: 250px; overflow: hidden; } .spotlight-image { width: 100%; height: 100%; object-fit: cover; filter: grayscale(40%); transition: filter 0.5s ease; } .spotlight-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 2rem; color: white; } .spotlight-title { font-size: 1.8rem; font-weight: 700; margin-bottom: 0.5rem; mix-blend-mode: difference; transform: translateX(-20px); opacity: 0; animation: slideIn 0.6s forwards; } .spotlight-description { font-size: 0.9rem; max-width: 80%; mix-blend-mode: difference; transform: translateX(-20px); opacity: 0; animation: slideIn 0.6s 0.2s forwards; } .spotlight-cta { margin-top: 1rem; background-color: white; color: #1a1a1a; border: none; padding: 0.5rem 1.5rem; font-size: 0.8rem; font-weight: 500; cursor: pointer; border-radius: 2px; transform: translateX(-20px); opacity: 0; animation: slideIn 0.6s 0.4s forwards; transition: background-color 0.3s ease; } .spotlight-cta:hover { background-color: #e6e6e6; } .trending-section { margin-bottom: 2rem; } .color-accent { color: #f44336; } .color-selector { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .color-option { width: 15px; height: 15px; border-radius: 50%; cursor: pointer; transition: transform 0.3s ease; } .color-option:hover { transform: scale(1.2); } .tag { position: absolute; top: 10px; right: 10px; background-color: #1a1a1a; color: white; padding: 0.2rem 0.5rem; font-size: 0.7rem; border-radius: 2px; z-index: 10; } .quick-add { position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(26, 26, 26, 0.8); color: white; text-align: center; padding: 0.5rem; font-size: 0.8rem; transform: translateY(100%); transition: transform 0.3s ease; cursor: pointer; } .product-card:hover .quick-add { transform: translateY(0); } .newsletter { background-color: #e6e6e6; padding: 1.5rem; border-radius: 4px; margin-bottom: 2rem; } .newsletter h3 { font-size: 1.2rem; margin-bottom: 1rem; } .newsletter-form { display: flex; gap: 0.5rem; } .newsletter-input { flex: 1; padding: 0.5rem; border: 1px solid #ccc; border-radius: 2px; } .newsletter-button { background-color: #1a1a1a; color: white; border: none; padding: 0.5rem 1rem; border-radius: 2px; cursor: pointer; transition: background-color 0.3s ease; } .newsletter-button:hover { background-color: #333; } @keyframes slideIn { to { transform: translateX(0); opacity: 1; } } .hover-info { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(26, 26, 26, 0.7); color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; padding: 1rem; text-align: center; } .product-card:hover .hover-info { opacity: 1; } .size-options { display: flex; gap: 0.3rem; margin-top: 0.5rem; } .size-option { width: 25px; height: 25px; display: flex; justify-content: center; align-items: center; background-color: white; color: #1a1a1a; font-size: 0.7rem; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; } .size-option:hover { background-color: #1a1a1a; color: white; } @media (max-width: 500px) { .product-grid { grid-template-columns: 1fr; } .spotlight-title { font-size: 1.5rem; } .spotlight-description { font-size: 0.8rem; max-width: 100%; } .newsletter-form { flex-direction: column; } } /* Cursor interaction */ .cursor-dot { position: fixed; width: 10px; height: 10px; background-color: #f44336; border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: transform 0.1s ease; opacity: 0; } .cursor-outline { position: fixed; width: 30px; height: 30px; border: 1px solid #1a1a1a; border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%); transition: width 0.2s ease, height 0.2s ease, transform 0.1s ease; opacity: 0; } /* Loading animation */ .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #f7f7f7; display: flex; justify-content: center; align-items: center; z-index: 10000; transition: opacity 0.5s ease; } .loading-spinner { width: 50px; height: 50px; border: 3px solid #e6e6e6; border-top: 3px solid #1a1a1a; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="loading-overlay"> <div class="loading-spinner"></div> </div> <div class="cursor-dot"></div> <div class="cursor-outline"></div> <div class="container"> <header> <div class="logo">MONOCHROME</div> <div class="nav-icons"> <div class="nav-icon"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="11" cy="11" r="8"></circle> <line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </div> <div class="nav-icon"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> <circle cx="12" cy="7" r="4"></circle> </svg> </div> <div class="nav-icon"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path> <line x1="3" y1="6" x2="21" y2="6"></line> <path d="M16 10a4 4 0 0 1-8 0"></path> </svg> <span class="cart-count"></span> </div> </div> </header> <div class="product-spotlight"> <div class="spotlight-image-container"> <img src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Autumn Collection" class="spotlight-image"> <div class="spotlight-overlay"> <h2 class="spotlight-title">AUTUMN ESSENTIALS</h2> <p class="spotlight-description">Minimalist pieces in natural tones for your seasonal wardrobe.</p> <button class="spotlight-cta">SHOP THE LOOK</button> </div> </div> </div> <div class="featured-collection"> <h2>NEW ARRIVALS <span class="color-accent">•</span></h2> <div class="product-grid"> <div class="product-card"> <span class="tag">NEW</span> <div class="product-image-container"> <img src="https://images.unsplash.com/photo-1551803091-e20673f15770?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=735&q=80" alt="Oversized Wool Coat" class="product-image"> <div class="hover-info"> <p>100% Merino Wool</p> <p>Relaxed Silhouette</p> <div class="size-options"> <div class="size-option">S</div> <div class="size-option">M</div> <div class="size-option">L</div> </div> </div> </div> <div class="quick-add">+ Quick Add</div> <div class="product-details"> <h3 class="product-title">Oversized Wool Coat</h3> <p class="product-price">$289.00</p> <div class="color-selector"> <div class="color-option" style="background-color: #1a1a1a;"></div> <div class="color-option" style="background-color: #8c7d70;"></div> <div class="color-option" style="background-color: #dfdbd5;"></div> </div> </div> </div> <div class="product-card"> <div class="product-image-container"> <img src="https://images.unsplash.com/photo-1566206091558-7f218b696731?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80" alt="Tailored Linen Shirt" class="product-image"> <div class="hover-info"> <p>Premium Italian Linen</p> <p>Structured Shoulders</p> <div class="size-options"> <div class="size-option">S</div> <div class="size-option">M</div> <div class="size-option">L</div> </div> </div> </div> <div class="quick-add">+ Quick Add</div> <div class="product-details"> <h3 class="product-title">Tailored Linen Shirt</h3> <p class="product-price">$145.00</p> <div class="color-selector"> <div class="color-option" style="background-color: #ffffff;"></div> <div class="color-option" style="background-color: #ddcfc4;"></div> <div class="color-option" style="background-color: #8d6a4a;"></div> </div> </div> </div> <div class="product-card"> <span class="tag">TRENDING</span> <div class="product-image-container"> <img src="https://images.unsplash.com/photo-1552374196-1ab2a1c593e8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Minimalist Cashmere Sweater" class="product-image"> <div class="hover-info"> <p>Ultra-soft Cashmere</p> <p>Refined Rib-knit Finish</p> <div class="size-options"> <div class="size-option">S</div> <div class="size-option">M</div> <div class="size-option">L</div> </div> </div> </div> <div class="quick-add">+ Quick Add</div> <div class="product-details"> <h3 class="product-title">Minimalist Cashmere Sweater</h3> <p class="product-price">$195.00</p> <div class="color-selector"> <div class="color-option" style="background-color: #1a1a1a;"></div> <div class="color-option" style="background-color: #f44336;"></div> <div class="color-option" style="background-color: #dfdbd5;"></div> </div> </div> </div> <div class="product-card"> <div class="product-image-container"> <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=736&q=80" alt="Structured Wool Pants" class="product-image"> <div class="hover-info"> <p>Premium Wool Blend</p> <p>Front Pleat Detail</p> <div class="size-options"> <div class="size-option">S</div> <div class="size-option">M</div> <div class="size-option">L</div> </div> </div> </div> <div class="quick-add">+ Quick Add</div> <div class="product-details"> <h3 class="product-title">Structured Wool Pants</h3> <p class="product-price">$175.00</p> <div class="color-selector"> <div class="color-option" style="background-color: #1a1a1a;"></div> <div class="color-option" style="background-color: #645a51;"></div> <div class="color-option" style="background-color: #4a5061;"></div> </div> </div> </div> </div> </div> <div class="newsletter"> <h3>Subscribe for exclusive access</h3> <p>Be the first to know about new arrivals and member-only offers.</p> <div class="newsletter-form"> <input type="email" class="newsletter-input" placeholder="Your email address"> <button class="newsletter-button">SUBSCRIBE</button> </div> </div> </div> <script> // Custom cursor const cursorDot = document.querySelector('.cursor-dot'); const cursorOutline = document.querySelector('.cursor-outline'); window.addEventListener('DOMContentLoaded', () => { // Loading animation setTimeout(() => { const loadingOverlay = document.querySelector('.loading-overlay'); loadingOverlay.style.opacity = '0'; setTimeout(() => { loadingOverlay.style.display = 'none'; // Show cursor elements cursorDot.style.opacity = '1'; cursorOutline.style.opacity = '1'; }, 500); }, 1500); // Product image hover effect const productCards = document.querySelectorAll('.product-card'); productCards.forEach(card => { card.addEventListener('mouseenter', () => { card.querySelector('.product-image').style.filter = 'grayscale(0%)'; }); card.addEventListener('mouseleave', () => { card.querySelector('.product-image').style.filter = 'grayscale(20%)'; }); }); // Spotlight image hover effect const spotlightImage = document.querySelector('.spotlight-image'); const spotlightContainer = document.querySelector('.spotlight-image-container'); spotlightContainer.addEventListener('mouseenter', () => { spotlightImage.style.filter = 'grayscale(10%)'; }); spotlightContainer.addEventListener('mouseleave', () => { spotlightImage.style.filter = 'grayscale(40%)'; }); // Quick add functionality const quickAddButtons = document.querySelectorAll('.quick-add'); quickAddButtons.forEach(button => { button.addEventListener('click', (e) => { e.stopPropagation(); button.textContent = 'Added!'; setTimeout(() => { button.textContent = '+ Quick Add'; }, 1500); }); }); // Newsletter form const newsletterForm = document.querySelector('.newsletter-form'); const newsletterInput = document.querySelector('.newsletter-input'); const newsletterButton = document.querySelector('.newsletter-button'); newsletterButton.addEventListener('click', (e) => { e.preventDefault(); if (newsletterInput.value) { newsletterButton.textContent = 'THANK YOU!'; newsletterInput.value = ''; setTimeout(() => { newsletterButton.textContent = 'SUBSCRIBE'; }, 2000); } }); // Color options const colorOptions = document.querySelectorAll('.color-option'); colorOptions.forEach(option => { option.addEventListener('click', (e) => { e.stopPropagation(); const parent = option.parentElement; const allOptions = parent.querySelectorAll('.color-option'); allOptions.forEach(o => o.style.transform = 'scale(1)'); option.style.transform = 'scale(1.2)'; }); }); // Size options const sizeOptions = document.querySelectorAll('.size-option'); sizeOptions.forEach(option => { option.addEventListener('click', (e) => { e.stopPropagation(); const parent = option.parentElement; const allOptions = parent.querySelectorAll('.size-option'); allOptions.forEach(o => { o.style.backgroundColor = 'white'; o.style.color = '#1a1a1a'; }); option.style.backgroundColor = '#1a1a1a'; option.style.color = 'white'; }); }); }); // Custom cursor movement document.addEventListener('mousemove', (e) => { cursorDot.style.left = `${e.clientX}px`; cursorDot.style.top = `${e.clientY}px`; cursorOutline.style.left = `${e.clientX}px`; cursorOutline.style.top = `${e.clientY}px`; }); // Cursor interactions document.querySelectorAll('.product-card, .spotlight-cta, .nav-icon, .color-option, .size-option, .newsletter-button').forEach(item => { item.addEventListener('mouseenter', () => { cursorDot.style.transform = 'translate(-50%, -50%) scale(1.5)'; cursorOutline.style.width = '40px'; cursorOutline.style.height = '40px'; cursorOutline.style.backgroundColor = 'rgba(244, 67, 54, 0.1)'; }); item.addEventListener('mouseleave', () => { cursorDot.style.transform = 'translate(-50%, -50%) scale(1)'; cursorOutline.style.width = '30px'; cursorOutline.style.height = '30px'; cursorOutline.style.backgroundColor = 'transparent'; }); }); // Prevents default behavior for all interactive elements document.querySelectorAll('button, .nav-icon, .product-card, .quick-add, .color-option, .size-option').forEach(el => { el.addEventListener('click', (e) => { e.preventDefault(); }); }); </script> </body> </html>
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } body { background-color: #f8f8f8; color: #333; min-height: 100vh; overflow-x: hidden; width: 100%; } .header-container { position: relative; width: 100%; max-width: 700px; margin: 0 auto; height: 700px; overflow: hidden; } nav { position: absolute; top: 0; left: 0; right: 0; padding: 1.5rem; display: flex; justify-content: space-between; align-items: center; z-index: 10; } .logo { font-weight: 700; font-size: 1.2rem; color: white; text-decoration: none; text-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: opacity 0.3s ease; } .logo:hover { opacity: 0.8; } .nav-links { display: flex; gap: 1.5rem; } .nav-links a { color: white; text-decoration: none; font-size: 0.9rem; text-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: opacity 0.3s ease; } .nav-links a:hover { opacity: 0.8; } .hero { position: relative; width: 100%; height: 100%; overflow: hidden; } .image-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; transform: scale(1.05); transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); } .title-container { position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; z-index: 5; } .blend-title { font-size: 4rem; font-weight: 800; text-align: center; color: white; line-height: 1; mix-blend-mode: overlay; transition: transform 0.5s ease; text-shadow: 0 2px 10px rgba(0,0,0,0.2); transform: translateY(20px); opacity: 0; } .blend-subtitle { margin-top: 1rem; font-size: 1.2rem; font-weight: 400; color: white; text-align: center; max-width: 600px; mix-blend-mode: difference; text-shadow: 0 1px 3px rgba(0,0,0,0.3); transform: translateY(20px); opacity: 0; transition: transform 0.5s ease, opacity 0.5s ease; transition-delay: 0.1s; } .brightness-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.4) 100%); opacity: 0.7; transition: opacity 0.5s ease; } .scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); color: white; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; display: flex; flex-direction: column; align-items: center; opacity: 0; transition: opacity 0.5s ease, transform 0.5s ease; transition-delay: 0.3s; } .scroll-arrow { margin-top: 0.5rem; width: 20px; height: 30px; animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } .content { padding: 2rem; max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; gap: 2rem; } .content h2 { font-size: 1.8rem; font-weight: 700; margin-bottom: 1rem; } .content p { line-height: 1.6; color: #555; } .image-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; } .grid-image { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 4px; transition: transform 0.3s ease; } .grid-image:hover { transform: scale(1.03); } .active .blend-title, .active .blend-subtitle { transform: translateY(0); opacity: 1; } .active .scroll-indicator { opacity: 1; } @media (max-width: 768px) { .blend-title { font-size: 3rem; } .blend-subtitle { font-size: 1rem; } .nav-links { gap: 1rem; } } @media (max-width: 480px) { .blend-title { font-size: 2.5rem; } .image-grid { grid-template-columns: 1fr; } nav { padding: 1rem; } .nav-links { gap: 0.7rem; } .nav-links a { font-size: 0.8rem; } } </style> </head> <body> <div class="header-container"> <nav> <a href="#" class="logo">Aperture</a> <div class="nav-links"> <a href="#">Portfolio</a> <a href="#">Insights</a> <a href="#">About</a> </div> </nav> <div class="hero"> <div class="image-layer"></div> <div class="brightness-overlay"></div> <div class="title-container"> <h1 class="blend-title">Light & Shadow</h1> <p class="blend-subtitle">Capturing the fleeting moments between darkness and illumination, where natural contrasts reveal hidden stories</p> </div> <div class="scroll-indicator"> Discover <svg class="scroll-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="12" y1="5" x2="12" y2="19"></line> <polyline points="19 12 12 19 5 12"></polyline> </svg> </div> </div> </div> <script> // Image array with high-quality nature photography const images = [ 'https://images.unsplash.com/photo-1477322524744-0eece9e79640?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1160&q=80', 'https://images.unsplash.com/photo-1455218873509-8097305ee378?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80', 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1274&q=80', 'https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80' ]; // Content titles and subtitles matching photography themes const content = [ { title: "Light & Shadow", subtitle: "Capturing the fleeting moments between darkness and illumination, where natural contrasts reveal hidden stories" }, { title: "Nature's Canvas", subtitle: "Exploring the intricate patterns and vibrant palettes that emerge when light dances through forests and mountains" }, { title: "Ethereal Landscapes", subtitle: "Where reality blends with the surreal, creating dreamlike visions of our natural world" }, { title: "Silent Wilderness", subtitle: "Documenting the untouched serenity of remote places, where nature speaks in its purest language" } ]; // DOM elements const imageLayer = document.querySelector('.image-layer'); const brightnessOverlay = document.querySelector('.brightness-overlay'); const blendTitle = document.querySelector('.blend-title'); const blendSubtitle = document.querySelector('.blend-subtitle'); const titleContainer = document.querySelector('.title-container'); const heroSection = document.querySelector('.hero'); let currentIndex = 0; let isScrolling = false; let scrollTimeout; // Initialize hero function initHero() { imageLayer.style.backgroundImage = `url(${images[0]})`; blendTitle.textContent = content[0].title; blendSubtitle.textContent = content[0].subtitle; // Activate animations after a short delay setTimeout(() => { titleContainer.classList.add('active'); }, 300); // Set up automatic image rotation setInterval(rotateImage, 8000); } // Rotate to next image with blend transition function rotateImage() { // First, fade out the content titleContainer.classList.remove('active'); setTimeout(() => { // Update index currentIndex = (currentIndex + 1) % images.length; // Apply zoom out effect to current image imageLayer.style.transform = 'scale(1)'; // After a delay, update image and content setTimeout(() => { imageLayer.style.backgroundImage = `url(${images[currentIndex]})`; blendTitle.textContent = content[currentIndex].title; blendSubtitle.textContent = content[currentIndex].subtitle; // Reset zoom and fade in content setTimeout(() => { imageLayer.style.transform = 'scale(1.05)'; titleContainer.classList.add('active'); }, 100); }, 400); }, 300); } // Adjust brightness based on scroll function handleScroll() { if (!isScrolling) { isScrolling = true; heroSection.classList.add('scrolling'); // Subtly adjust the brightness brightnessOverlay.style.opacity = '0.5'; // Reset after scrolling stops clearTimeout(scrollTimeout); scrollTimeout = setTimeout(() => { isScrolling = false; heroSection.classList.remove('scrolling'); brightnessOverlay.style.opacity = '0.7'; }, 200); } } // Mousemove effect for parallax function handleMouseMove(e) { const xPos = (e.clientX / window.innerWidth - 0.5) * 10; const yPos = (e.clientY / window.innerHeight - 0.5) * 10; blendTitle.style.transform = `translateY(0) translateX(${xPos * 0.5}px)`; imageLayer.style.transform = `scale(1.05) translateX(${xPos * -0.1}px) translateY(${yPos * -0.1}px)`; } // Initialize hero on page load document.addEventListener('DOMContentLoaded', initHero); // Add event listeners window.addEventListener('scroll', handleScroll); heroSection.addEventListener('mousemove', handleMouseMove); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PENUMBRA | Editorial Magazine</title> <style> @import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:wght@400;700&family=Playfair+Display:ital,wght@0,700;1,900&family=Source+Sans+Pro:wght@300;400;600&display=swap'); :root { --color-bg: #0f0f11; --color-text: #f0f0f0; --color-accent: #ff2d55; --color-secondary: #5e17eb; --font-serif: 'Playfair Display', serif; --font-serif-body: 'Libre Caslon Text', serif; --font-sans: 'Source Sans Pro', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); overflow-x: hidden; line-height: 1.6; max-width: 700px; margin: 0 auto; height: 700px; overflow-y: auto; } .magazine { display: flex; flex-direction: column; padding: 0 1rem; } .header { position: sticky; top: 0; z-index: 10; padding: 1rem 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background-color: rgba(15, 15, 17, 0.8); backdrop-filter: blur(10px); } .logo { font-family: var(--font-serif); font-weight: 900; font-style: italic; font-size: 1.8rem; letter-spacing: -1px; color: var(--color-accent); } .issue { font-family: var(--font-sans); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; opacity: 0.7; } .feature-article { margin: 2rem 0; position: relative; cursor: pointer; transition: transform 0.4s ease; will-change: transform; } .feature-article:hover { transform: translateY(-5px); } .article-img { width: 100%; height: 50vh; object-fit: cover; margin-bottom: 1rem; filter: saturate(1.2) contrast(1.1); } .headline-container { position: absolute; bottom: 2rem; width: 100%; padding: 1rem; } .headline { font-family: var(--font-serif); font-weight: 700; font-size: 2.5rem; line-height: 1.2; margin-bottom: 0.5rem; mix-blend-mode: difference; color: var(--color-text); transition: all 0.3s ease; } .feature-article:hover .headline { transform: scale(1.02); color: var(--color-accent); } .byline { font-family: var(--font-sans); font-weight: 300; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.9; } .excerpt { font-family: var(--font-serif-body); font-size: 1.1rem; margin-bottom: 1.5rem; max-width: 90%; } .articles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2rem 0; } .grid-article { position: relative; cursor: pointer; overflow: hidden; transition: all 0.3s ease; } .grid-article:hover { transform: translateY(-5px); } .grid-img { width: 100%; height: 200px; object-fit: cover; transition: transform 0.8s ease; } .grid-article:hover .grid-img { transform: scale(1.05); } .grid-headline-container { position: absolute; bottom: 0; width: 100%; padding: 1rem; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); } .grid-headline { font-family: var(--font-serif); font-weight: 700; font-size: 1.3rem; line-height: 1.2; mix-blend-mode: difference; transition: all 0.3s ease; } .grid-article:hover .grid-headline { color: var(--color-accent); } .section-heading { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; margin: 2.5rem 0 1.5rem; position: relative; display: inline-block; } .section-heading::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 40%; height: 3px; background-color: var(--color-accent); } .tag { display: inline-block; background-color: var(--color-secondary); color: var(--color-text); padding: 0.2rem 0.6rem; border-radius: 2px; font-size: 0.8rem; margin-right: 0.5rem; margin-bottom: 0.5rem; transition: all 0.3s ease; } .tag:hover { background-color: var(--color-accent); transform: translateY(-2px); } .categories { margin: 1rem 0 2rem; } .footer { margin-top: 3rem; padding: 2rem 0; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; font-size: 0.9rem; opacity: 0.7; } /* Blend mode animations */ .blend-transition { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-accent); mix-blend-mode: overlay; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .feature-article:hover .blend-transition, .grid-article:hover .blend-transition { opacity: 0.4; } /* Responsive adjustments */ @media (max-width: 600px) { .articles-grid { grid-template-columns: 1fr; } .headline { font-size: 2rem; } .excerpt { font-size: 1rem; } .article-img { height: 40vh; } } /* Custom cursor */ .custom-cursor { position: fixed; width: 20px; height: 20px; border-radius: 50%; background-color: var(--color-accent); pointer-events: none; mix-blend-mode: difference; transform: translate(-50%, -50%); z-index: 9999; opacity: 0; transition: transform 0.1s ease, opacity 0.3s ease; } /* Animated page loader */ .page-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-bg); display: flex; justify-content: center; align-items: center; z-index: 9999; } .loader-content { text-align: center; } .loader-text { font-family: var(--font-serif); font-size: 2rem; color: var(--color-accent); opacity: 0; animation: fadeInOut 2s forwards; } @keyframes fadeInOut { 0% { opacity: 0; transform: translateY(20px); } 50% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-20px); } } /* Text selection */ ::selection { background-color: var(--color-accent); color: var(--color-bg); } </style> </head> <body> <div class="custom-cursor"></div> <div class="page-loader"> <div class="loader-content"> <div class="loader-text">PENUMBRA</div> </div> </div> <div class="magazine"> <header class="header"> <div class="logo">PENUMBRA</div> <div class="issue">Issue 37 • Autumn 2023</div> </header> <div class="feature-article"> <img src="https://images.unsplash.com/photo-1533929736458-ca588d08c8be?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Fashion Revolution" class="article-img"> <div class="blend-transition"></div> <div class="headline-container"> <h2 class="headline">The Avant-Garde Revolution Rewriting Fashion's Rulebook</h2> <p class="byline">By Kazimir Vostok</p> </div> <p class="excerpt">As boundaries between high art and street culture dissolve, London's experimental design collectives are crafting identities through calculated visual disruption. We examine how these provocateurs are reshaping the industry's visual language.</p> </div> <h3 class="section-heading">Trending Articles</h3> <div class="articles-grid"> <div class="grid-article"> <img src="https://images.unsplash.com/photo-1551392505-f4056032826e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Digital Identities" class="grid-img"> <div class="blend-transition"></div> <div class="grid-headline-container"> <h3 class="grid-headline">Digital Identities: The New Character Studies</h3> </div> </div> <div class="grid-article"> <img src="https://images.unsplash.com/photo-1521819148270-83b3a7e89ff4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Typography Revival" class="grid-img"> <div class="blend-transition"></div> <div class="grid-headline-container"> <h3 class="grid-headline">Brutalist Typography Revival in Modern Publishing</h3> </div> </div> <div class="grid-article"> <img src="https://images.unsplash.com/photo-1510876372776-24323d784c96?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Architecture Frontiers" class="grid-img"> <div class="blend-transition"></div> <div class="grid-headline-container"> <h3 class="grid-headline">Architecture's New Frontiers: Form Following Fiction</h3> </div> </div> <div class="grid-article"> <img src="https://images.unsplash.com/photo-1534030347209-467a5b0ad3e6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Neo Expressionism" class="grid-img"> <div class="blend-transition"></div> <div class="grid-headline-container"> <h3 class="grid-headline">Neo-Expressionism Makes Its Digital Comeback</h3> </div> </div> </div> <h3 class="section-heading">Featured Categories</h3> <div class="categories"> <span class="tag">Avant-Garde</span> <span class="tag">Typography</span> <span class="tag">Visual Culture</span> <span class="tag">Contemporary Art</span> <span class="tag">Experimental Media</span> <span class="tag">Design Theory</span> <span class="tag">Digital Aesthetics</span> </div> <footer class="footer"> <p>PENUMBRA Magazine © 2023 | Exploring the boundaries of visual culture</p> </footer> </div> <script> // Page loader window.addEventListener('DOMContentLoaded', () => { setTimeout(() => { document.querySelector('.page-loader').style.opacity = '0'; setTimeout(() => { document.querySelector('.page-loader').style.display = 'none'; }, 500); }, 2000); }); // Custom cursor const cursor = document.querySelector('.custom-cursor'); document.addEventListener('mousemove', (e) => { cursor.style.opacity = '1'; cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`; }); document.addEventListener('mouseleave', () => { cursor.style.opacity = '0'; }); // Enhanced hover effects for articles const articles = document.querySelectorAll('.feature-article, .grid-article'); articles.forEach(article => { article.addEventListener('mouseenter', () => { cursor.style.transform = 'translate(-50%, -50%) scale(2.5)'; cursor.style.mixBlendMode = 'overlay'; }); article.addEventListener('mouseleave', () => { cursor.style.transform = 'translate(-50%, -50%) scale(1)'; cursor.style.mixBlendMode = 'difference'; }); article.addEventListener('click', () => { const headline = article.querySelector('.headline, .grid-headline'); headline.style.color = 'var(--color-accent)'; setTimeout(() => { headline.style.color = ''; }, 300); }); }); // Smooth scroll for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); // Animate tags on scroll const tags = document.querySelectorAll('.tag'); window.addEventListener('scroll', () => { tags.forEach((tag, index) => { setTimeout(() => { tag.style.transform = 'translateY(-5px)'; setTimeout(() => { tag.style.transform = 'translateY(0)'; }, 300); }, index * 100); }); }, { passive: true }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Neuron - Interactive Learning Platform</title> <style> :root { --primary: #6b72e5; --secondary: #f7c9bc; --tertiary: #a7efd9; --quaternary: #f9f8dc; --light: #ffffff; --dark: #28293d; --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-primary); background-color: #f5f7fa; color: var(--dark); line-height: 1.6; overflow-x: hidden; max-width: 700px; margin: 0 auto; padding: 1.5rem; height: 100vh; } .container { max-width: 100%; height: 100%; display: flex; flex-direction: column; gap: 1.5rem; } header { text-align: center; margin-bottom: 0.5rem; } .logo { display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; } .logo svg { width: 32px; height: 32px; margin-right: 0.75rem; } .logo h1 { font-size: 1.8rem; font-weight: 700; color: var(--primary); letter-spacing: -0.5px; } .subtitle { font-size: 0.95rem; color: #666; max-width: 500px; margin: 0 auto; } .courses-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; flex: 1; overflow-y: auto; padding-right: 5px; } .course-card { background: var(--light); border-radius: 12px; overflow: hidden; position: relative; height: 260px; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); } .course-card:hover { transform: translateY(-5px); box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1); } .course-image { height: 120px; position: relative; overflow: hidden; } .course-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .course-card:hover .course-image img { transform: scale(1.05); } .course-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, var(--primary), transparent); opacity: 0.5; transition: opacity 0.3s ease; mix-blend-mode: multiply; } .course-card:hover .course-overlay { opacity: 0.8; mix-blend-mode: color-burn; } .difficulty-badge { position: absolute; top: 10px; right: 10px; font-size: 0.7rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 12px; text-transform: uppercase; z-index: 10; transition: all 0.3s ease; } .difficulty-beginner { background-color: var(--tertiary); color: #2a6b57; } .difficulty-intermediate { background-color: var(--quaternary); color: #8c7800; } .difficulty-advanced { background-color: var(--secondary); color: #a23e29; } .course-content { padding: 1rem; display: flex; flex-direction: column; height: calc(100% - 120px); } .course-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; line-height: 1.3; } .course-desc { font-size: 0.85rem; color: #666; margin-bottom: 0.75rem; flex-grow: 1; } .course-meta { display: flex; align-items: center; justify-content: space-between; font-size: 0.75rem; color: #888; } .duration { display: flex; align-items: center; } .duration svg { width: 12px; height: 12px; margin-right: 4px; } .modules { display: flex; align-items: center; } .modules svg { width: 12px; height: 12px; margin-right: 4px; } .progress-container { height: 4px; background-color: #eee; border-radius: 4px; margin-top: 0.75rem; overflow: hidden; } .progress-bar { height: 100%; background: linear-gradient(to right, var(--tertiary), var(--primary)); transition: width 0.5s ease; border-radius: 4px; width: 0; } .tooltip { position: absolute; z-index: 100; background-color: var(--dark); color: var(--light); padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.75rem; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; transform: translateY(5px); max-width: 200px; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2); } .tooltip::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid var(--dark); } .filter-tabs { display: flex; justify-content: center; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } .filter-tab { padding: 0.5rem 1rem; font-size: 0.85rem; background-color: transparent; border: 1px solid #e1e1e1; border-radius: 20px; cursor: pointer; transition: all 0.2s ease; font-weight: 500; } .filter-tab:hover { background-color: rgba(107, 114, 229, 0.1); border-color: var(--primary); } .filter-tab.active { background-color: var(--primary); color: white; border-color: var(--primary); } /* Custom scrollbar */ .courses-grid::-webkit-scrollbar { width: 6px; } .courses-grid::-webkit-scrollbar-track { background: #f5f7fa; } .courses-grid::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; } .courses-grid::-webkit-scrollbar-thumb:hover { background: #ccc; } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .course-card { animation: fadeIn 0.5s ease forwards; opacity: 0; } /* Responsive fixes */ @media (max-width: 480px) { .courses-grid { grid-template-columns: 1fr; } .filter-tabs { flex-wrap: wrap; } } </style> </head> <body> <div class="container"> <header> <div class="logo"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 4L4 8L12 12L20 8L12 4Z" stroke="#6b72e5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M4 12L12 16L20 12" stroke="#6b72e5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M4 16L12 20L20 16" stroke="#6b72e5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <h1>neuron</h1> </div> <p class="subtitle">Discover interactive learning experiences that adapt to your cognitive style and help you build lasting knowledge</p> </header> <div class="filter-tabs"> <button class="filter-tab active" data-category="all">All Courses</button> <button class="filter-tab" data-category="design">Design</button> <button class="filter-tab" data-category="programming">Programming</button> <button class="filter-tab" data-category="data">Data Science</button> </div> <div class="courses-grid"></div> </div> <div class="tooltip" id="tooltip"></div> <script> // Course data const courses = [ { id: 1, title: "Visual Design Principles & Psychology", description: "Learn how color theory and visual hierarchy impact user perception and information retention", image: "https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?q=80&w=500&auto=format&fit=crop", duration: "6 weeks", modules: 18, difficulty: "beginner", progress: 65, category: "design" }, { id: 2, title: "Interactive JavaScript: Building Engaging UIs", description: "Master event listeners, DOM manipulation and animation techniques with practical examples", image: "https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=500&auto=format&fit=crop", duration: "8 weeks", modules: 24, difficulty: "intermediate", progress: 30, category: "programming" }, { id: 3, title: "CSS Blend Modes & Advanced Visual Effects", description: "Explore mix-blend-mode, filters and creative layering to create unique interactive experiences", image: "https://images.unsplash.com/photo-1523726491678-bf852e717f6a?q=80&w=500&auto=format&fit=crop", duration: "4 weeks", modules: 12, difficulty: "intermediate", progress: 10, category: "design" }, { id: 4, title: "Data Visualization for Complex Concepts", description: "Turn abstract data into interactive visualizations that make complex topics accessible", image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=500&auto=format&fit=crop", duration: "7 weeks", modules: 21, difficulty: "advanced", progress: 0, category: "data" }, { id: 5, title: "Responsive Design & Adaptive Layouts", description: "Build fluid interfaces that adjust seamlessly to different devices and screen sizes", image: "https://images.unsplash.com/photo-1517180102446-f3ece451e9d8?q=80&w=500&auto=format&fit=crop", duration: "5 weeks", modules: 15, difficulty: "beginner", progress: 85, category: "design" }, { id: 6, title: "Python for Interactive Learning Models", description: "Build AI systems that personalize learning paths based on user interaction patterns", image: "https://images.unsplash.com/photo-1526379095098-d400fd0bf935?q=80&w=500&auto=format&fit=crop", duration: "10 weeks", modules: 30, difficulty: "advanced", progress: 25, category: "programming" } ]; // DOM Elements const coursesGrid = document.querySelector('.courses-grid'); const tooltip = document.getElementById('tooltip'); const filterTabs = document.querySelectorAll('.filter-tab'); // Render courses function renderCourses(category = 'all') { coursesGrid.innerHTML = ''; const filteredCourses = category === 'all' ? courses : courses.filter(course => course.category === category); filteredCourses.forEach((course, index) => { const card = document.createElement('div'); card.className = 'course-card'; card.style.animationDelay = `${index * 0.1}s`; card.innerHTML = ` <div class="course-image"> <img src="${course.image}" alt="${course.title}"> <div class="course-overlay"></div> <div class="difficulty-badge difficulty-${course.difficulty}">${course.difficulty}</div> </div> <div class="course-content"> <h3 class="course-title">${course.title}</h3> <p class="course-desc">${course.description}</p> <div class="course-meta"> <div class="duration"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <polyline points="12 6 12 12 16 14"></polyline> </svg> ${course.duration} </div> <div class="modules"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline> </svg> ${course.modules} modules </div> </div> <div class="progress-container" data-tooltip="${course.progress}% complete"> <div class="progress-bar" style="width: ${course.progress}%"></div> </div> </div> `; // Add hover events for tooltip const progressContainer = card.querySelector('.progress-container'); progressContainer.addEventListener('mouseenter', (e) => { const rect = progressContainer.getBoundingClientRect(); tooltip.textContent = progressContainer.getAttribute('data-tooltip'); tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`; tooltip.style.top = `${rect.top - tooltip.offsetHeight - 10}px`; tooltip.style.opacity = '1'; tooltip.style.transform = 'translateY(0)'; }); progressContainer.addEventListener('mouseleave', () => { tooltip.style.opacity = '0'; tooltip.style.transform = 'translateY(5px)'; }); coursesGrid.appendChild(card); }); } // Initialize renderCourses(); // Filter functionality filterTabs.forEach(tab => { tab.addEventListener('click', () => { // Remove active class from all tabs filterTabs.forEach(t => t.classList.remove('active')); // Add active class to clicked tab tab.classList.add('active'); // Render filtered courses renderCourses(tab.getAttribute('data-category')); }); }); // Window resize listener for tooltip repositioning window.addEventListener('resize', () => { if (tooltip.style.opacity !== '0') { const activeElement = document.querySelector(':hover'); if (activeElement && activeElement.hasAttribute('data-tooltip')) { const rect = activeElement.getBoundingClientRect(); tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`; tooltip.style.top = `${rect.top - tooltip.offsetHeight - 10}px`; } } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>PULSE | Electronic Music Festival 2024</title> <style> :root { --primary: #ff00ff; --secondary: #00eeff; --accent: #ffff00; --dark: #0a0a0a; --light: #ffffff; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Syncopate', sans-serif; } @font-face { font-family: 'Syncopate'; src: url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&display=swap'); } body { background-color: var(--dark); color: var(--light); font-family: 'Syncopate', sans-serif; overflow-x: hidden; height: 100vh; width: 100%; } .container { width: 100%; height: 100%; position: relative; overflow: hidden; } .video-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .video-loop { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background: linear-gradient(45deg, rgba(10, 10, 10, 0.7), rgba(0, 0, 0, 0.4)); mix-blend-mode: color-dodge; } .content { position: relative; z-index: 4; width: 100%; height: 100%; display: flex; flex-direction: column; padding: 2rem; overflow-y: auto; scrollbar-width: none; } .content::-webkit-scrollbar { display: none; } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .logo { font-size: 1.8rem; font-weight: 700; color: var(--light); letter-spacing: 2px; position: relative; text-transform: uppercase; } .logo::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 3px; background: var(--secondary); transform: scaleX(0); transform-origin: right; transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1); } .logo:hover::after { transform: scaleX(1); transform-origin: left; } nav ul { display: flex; list-style: none; gap: 1.5rem; } nav a { color: var(--light); text-decoration: none; font-size: 0.9rem; text-transform: uppercase; position: relative; transition: color 0.3s ease; } nav a:hover { color: var(--secondary); } nav a::before { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background-color: var(--secondary); transform: scaleX(0); transition: transform 0.3s ease; } nav a:hover::before { transform: scaleX(1); } .hero { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin-bottom: 2rem; } .hero h1 { font-size: 4rem; font-weight: 700; line-height: 1.1; margin-bottom: 1rem; position: relative; mix-blend-mode: difference; text-transform: uppercase; } .hero h1 span { display: block; overflow: hidden; } .hero h1 span:nth-child(2) { color: var(--primary); } .hero h1 span:nth-child(3) { color: var(--secondary); } .hero p { font-size: 1.1rem; margin-bottom: 2rem; max-width: 500px; line-height: 1.5; } .date-location { display: flex; gap: 1.5rem; margin-bottom: 2rem; } .date, .location { position: relative; } .date h3, .location h3 { font-size: 0.75rem; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; letter-spacing: 1px; } .date p, .location p { font-size: 1rem; font-weight: 700; } .cta-button { padding: 0.8rem 2.5rem; background: transparent; border: 2px solid var(--primary); color: var(--light); font-size: 1rem; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease; z-index: 1; } .cta-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 0; background: var(--primary); z-index: -1; transition: height 0.3s ease; } .cta-button:hover::before { height: 100%; } .cta-button:hover { color: var(--dark); } .lineup { margin-bottom: 2rem; } .lineup h2 { font-size: 1.8rem; margin-bottom: 1.5rem; text-transform: uppercase; color: var(--light); } .artists { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; } .artist { background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); padding: 1.5rem; border-radius: 4px; position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .artist:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); } .artist::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 0; background: var(--primary); transition: height 0.3s ease; } .artist:hover::before { height: 100%; } .artist h3 { font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--light); } .artist p { font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); } .event-info { display: flex; gap: 2rem; margin-bottom: 2rem; flex-wrap: wrap; } .info-card { flex: 1; min-width: 200px; background: rgba(255, 255, 255, 0.05); border-radius: 4px; padding: 1.5rem; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; transition: transform 0.3s ease; } .info-card:hover { transform: translateY(-5px); } .info-card h3 { font-size: 1.2rem; margin-bottom: 1rem; color: var(--accent); text-transform: uppercase; } .info-card p { font-size: 0.9rem; line-height: 1.6; } .blend-element { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: var(--primary); filter: blur(100px); opacity: 0.5; mix-blend-mode: color-dodge; z-index: 3; pointer-events: none; transition: transform 0.5s ease; } .cursor-blend { position: fixed; width: 50px; height: 50px; border-radius: 50%; background: var(--accent); filter: blur(5px); opacity: 0.8; mix-blend-mode: exclusion; z-index: 999; pointer-events: none; transform: translate(-50%, -50%); } footer { margin-top: auto; text-align: center; font-size: 0.8rem; padding: 1rem 0; color: rgba(255, 255, 255, 0.5); } .time-counter { display: flex; gap: 1rem; margin-bottom: 2rem; } .time-unit { display: flex; flex-direction: column; align-items: center; background: rgba(0, 0, 0, 0.5); padding: 1rem; border-radius: 4px; min-width: 70px; position: relative; overflow: hidden; } .time-unit::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--primary), var(--secondary)); } .time-unit-value { font-size: 1.8rem; font-weight: 700; color: var(--light); } .time-unit-label { font-size: 0.7rem; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-top: 0.5rem; } @media (max-width: 768px) { .hero h1 { font-size: 2.5rem; } .date-location { flex-direction: column; gap: 1rem; } nav ul { gap: 1rem; } nav a { font-size: 0.7rem; } .logo { font-size: 1.2rem; } .artists { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } @media (max-width: 576px) { .hero h1 { font-size: 2rem; } .content { padding: 1rem; } .event-info { flex-direction: column; } .time-counter { flex-wrap: wrap; justify-content: center; } } /* Modal styles */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .modal.active { opacity: 1; visibility: visible; } .modal-content { width: 90%; max-width: 500px; background: var(--dark); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; padding: 2rem; position: relative; transform: translateY(50px); opacity: 0; transition: transform 0.5s ease, opacity 0.5s ease; } .modal.active .modal-content { transform: translateY(0); opacity: 1; } .modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: var(--light); font-size: 1.5rem; cursor: pointer; } .modal h2 { font-size: 1.8rem; margin-bottom: 1rem; color: var(--primary); } .modal p { margin-bottom: 1.5rem; font-size: 0.9rem; line-height: 1.6; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; } .form-group input { width: 100%; padding: 0.8rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; color: var(--light); font-size: 1rem; } .form-group input:focus { outline: none; border-color: var(--primary); } .submit-button { width: 100%; padding: 1rem; background: var(--primary); border: none; border-radius: 4px; color: var(--dark); font-size: 1rem; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: background 0.3s ease; } .submit-button:hover { background: var(--secondary); } /* Animation for text reveal */ @keyframes revealText { 0% { transform: translateY(100%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .animate-text { display: inline-block; opacity: 0; transform: translateY(100%); animation: revealText 0.8s forwards; } .animate-text:nth-child(1) { animation-delay: 0.1s; } .animate-text:nth-child(2) { animation-delay: 0.3s; } .animate-text:nth-child(3) { animation-delay: 0.5s; } </style> </head> <body> <div class="container"> <div class="video-container"> <video class="video-loop" autoplay loop muted playsinline> <source src="https://assets.mixkit.co/videos/preview/mixkit-crowd-of-people-partying-at-a-concert-4607-large.mp4" type="video/mp4"> </video> </div> <div class="overlay"></div> <div class="blend-element blend-1"></div> <div class="blend-element blend-2"></div> <div class="cursor-blend"></div> <div class="content"> <header> <div class="logo">PULSE</div> <nav> <ul> <li><a href="#lineup">Lineup</a></li> <li><a href="#info">Info</a></li> <li><a href="#" id="tickets-btn">Tickets</a></li> </ul> </nav> </header> <section class="hero"> <h1> <span><span class="animate-text">ELECTRONIC</span></span> <span><span class="animate-text">MUSIC</span></span> <span><span class="animate-text">FESTIVAL</span></span> </h1> <div class="time-counter"> <div class="time-unit"> <div class="time-unit-value" id="days">00</div> <div class="time-unit-label">Days</div> </div> <div class="time-unit"> <div class="time-unit-value" id="hours">00</div> <div class="time-unit-label">Hours</div> </div> <div class="time-unit"> <div class="time-unit-value" id="minutes">00</div> <div class="time-unit-label">Minutes</div> </div> <div class="time-unit"> <div class="time-unit-value" id="seconds">00</div> <div class="time-unit-label">Seconds</div> </div> </div> <div class="date-location"> <div class="date"> <h3>Date</h3> <p>August 12-14, 2024</p> </div> <div class="location"> <h3>Location</h3> <p>Neon Valley, San Francisco</p> </div> </div> <button class="cta-button" id="register-btn">Get Your Pass</button> </section> <section class="lineup" id="lineup"> <h2>Lineup</h2> <div class="artists"> <div class="artist"> <h3>Synth Collective</h3> <p>Main Stage · Friday 10PM</p> </div> <div class="artist"> <h3>Neon Pulse</h3> <p>Techno Arena · Saturday 11PM</p> </div> <div class="artist"> <h3>Digital Horizon</h3> <p>Bass Cave · Friday 12AM</p> </div> <div class="artist"> <h3>Echo Chambers</h3> <p>Main Stage · Saturday 9PM</p> </div> <div class="artist"> <h3>Beat Matrix</h3> <p>Underground · Sunday 1AM</p> </div> <div class="artist"> <h3>Frequency Wave</h3> <p>Ambient Dome · Saturday 8PM</p> </div> </div> </section> <section class="event-info" id="info"> <div class="info-card"> <h3>Stages</h3> <p>Experience 5 unique worlds of sound across our carefully designed stages: Main Stage, Techno Arena, Bass Cave, Underground, and Ambient Dome. Each space features custom visual mapping and immersive audio systems.</p> </div> <div class="info-card"> <h3>Experience</h3> <p>Beyond the music, PULSE offers interactive art installations, VR experiences, and a digital garden where technology meets nature. Download our app to customize your festival journey.</p> </div> <div class="info-card"> <h3>Access</h3> <p>Early access begins at 4PM for VIP pass holders. General admission opens at 6PM. Free shuttle service runs between downtown and festival grounds. On-site parking available with advance purchase.</p> </div> </section> <footer> <p>© 2024 PULSE Festival · Privacy Policy · Terms & Conditions</p> </footer> </div> </div> <div class="modal" id="tickets-modal"> <div class="modal-content"> <button class="modal-close" id="close-modal">×</button> <h2>Secure Your PULSE Pass</h2> <p>Join thousands of electronic music lovers for three days of cutting-edge performances, immersive visuals, and unforgettable experiences.</p> <div class="form-group"> <label for="name">Full Name</label> <input type="text" id="name" placeholder="Your name"> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" id="email" placeholder="Your email"> </div> <div class="form-group"> <label for="ticket-type">Ticket Type</label> <input type="text" id="ticket-type" placeholder="General / VIP / Weekend Pass"> </div> <button class="submit-button" id="submit-form">Reserve Now</button> </div> </div> <script> // Cursor blend effect document.addEventListener('mousemove', (e) => { const cursor = document.querySelector('.cursor-blend'); cursor.style.left = `${e.clientX}px`; cursor.style.top = `${e.clientY}px`; // Move blend elements slightly to follow cursor with delay const blendElements = document.querySelectorAll('.blend-element'); blendElements[0].style.transform = `translate(${e.clientX * 0.05}px, ${e.clientY * 0.03}px)`; if (blendElements[1]) { blendElements[1].style.transform = `translate(${-e.clientX * 0.03}px, ${-e.clientY * 0.02}px)`; } }); // Position blend elements initially const positionBlendElements = () => { const blendElements = document.querySelectorAll('.blend-element'); // Position first blend element in top right blendElements[0].style.top = '-50px'; blendElements[0].style.right = '-50px'; blendElements[0].style.background = 'var(--primary)'; // Position second blend element in bottom left if (blendElements[1]) { blendElements[1].style.bottom = '-100px'; blendElements[1].style.left = '-50px'; blendElements[1].style.background = 'var(--secondary)'; } }; // Countdown timer const setupCountdown = () => { const countDownDate = new Date("August 12, 2024 18:00:00").getTime(); const updateCountdown = () => { const now = new Date().getTime(); const distance = countDownDate - now; const days = Math.floor(distance / (1000 * 60 * 60 * 24)); const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((distance % (1000 * 60)) / 1000); document.getElementById("days").textContent = days.toString().padStart(2, '0'); document.getElementById("hours").textContent = hours.toString().padStart(2, '0'); document.getElementById("minutes").textContent = minutes.toString().padStart(2, '0'); document.getElementById("seconds").textContent = seconds.toString().padStart(2, '0'); }; updateCountdown(); setInterval(updateCountdown, 1000); }; // Modal functionality const setupModal = () => { const modal = document.getElementById('tickets-modal'); const registerBtn = document.getElementById('register-btn'); const ticketsBtn = document.getElementById('tickets-btn'); const closeBtn = document.getElementById('close-modal'); const submitBtn = document.getElementById('submit-form'); const openModal = () => { modal.classList.add('active'); }; const closeModal = () => { modal.classList.remove('active'); }; registerBtn.addEventListener('click', openModal); ticketsBtn.addEventListener('click', openModal); closeBtn.addEventListener('click', closeModal); // Handle form submission (simulate, no actual submission) submitBtn.addEventListener('click', () => { const nameInput = document.getElementById('name'); const emailInput = document.getElementById('email'); if (nameInput.value && emailInput.value) { // Show success message inside modal const modalContent = document.querySelector('.modal-content'); modalContent.innerHTML = ` <h2>Thanks, ${nameInput.value}!</h2> <p>Your PULSE Festival pass request has been received. We'll send confirmation details to ${emailInput.value} within 24 hours.</p> <button class="submit-button" id="close-success">Close</button> `; document.getElementById('close-success').addEventListener('click', closeModal); } }); // Close modal when clicking outside of it modal.addEventListener('click', (e) => { if (e.target === modal) { closeModal(); } }); }; // Smooth scrolling for anchor links const setupSmoothScroll = () => { document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); if (this.getAttribute('href') === '#') return; const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth' }); } }); }); }; // Interactive hover effect for artists const setupArtistInteraction = () => { const artists = document.querySelectorAll('.artist'); artists.forEach(artist => { artist.addEventListener('mouseenter', () => { const randomColor = `hsl(${Math.random() * 360}, 100%, 50%)`; artist.style.borderColor = randomColor; artist.querySelector('h3').style.color = randomColor; }); artist.addEventListener('mouseleave', () => { artist.style.borderColor = 'rgba(255, 255, 255, 0.1)'; artist.querySelector('h3').style.color = 'var(--light)'; }); }); }; // Initialize everything window.addEventListener('DOMContentLoaded', () => { positionBlendElements(); setupCountdown(); setupModal(); setupSmoothScroll(); setupArtistInteraction(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NeoFusion X7 Tech Showcase</title> <style> @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Chakra+Petch:wght@300;400;600&display=swap'); :root { --neon-blue: #00f3ff; --neon-purple: #bf00ff; --neon-pink: #ff00dd; --dark-bg: #050714; --medium-bg: #0c0f22; --light-bg: #161a36; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Chakra Petch', sans-serif; background-color: var(--dark-bg); color: #fff; overflow-x: hidden; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; } .container { width: 100%; max-width: 700px; height: 700px; display: flex; flex-direction: column; position: relative; overflow: hidden; } .showcase-header { text-align: center; margin-bottom: 20px; z-index: 10; } .showcase-title { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 2.5rem; background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 10px rgba(0, 243, 255, 0.3); margin-bottom: 5px; letter-spacing: 2px; } .showcase-subtitle { font-size: 1rem; opacity: 0.8; letter-spacing: 1px; } .tech-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; height: 100%; overflow-y: auto; padding: 10px; position: relative; scrollbar-width: thin; scrollbar-color: var(--neon-blue) var(--medium-bg); } .tech-grid::-webkit-scrollbar { width: 6px; } .tech-grid::-webkit-scrollbar-track { background: var(--medium-bg); } .tech-grid::-webkit-scrollbar-thumb { background-color: var(--neon-blue); border-radius: 20px; } .product-card { background: var(--medium-bg); border-radius: 15px; overflow: hidden; position: relative; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); transition: transform 0.3s, box-shadow 0.3s; height: 300px; display: flex; flex-direction: column; } .product-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 243, 255, 0.2); } .product-image-container { position: relative; height: 180px; overflow: hidden; } .product-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .product-card:hover .product-image { transform: scale(1.05); } .digital-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXR0ZXJuIGlkPSJncmlkIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGQ9Ik0gMjAgMCBMIDAgMCAwIDIwIiBmaWxsPSJub25lIiBzdHJva2U9IiMwMGYzZmYyMCIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiLz48L3N2Zz4='); mix-blend-mode: overlay; opacity: 0.3; transition: opacity 0.3s; } .product-card:hover .digital-overlay { opacity: 0.7; } .feature-highlight { position: absolute; border-radius: 50%; background: var(--neon-blue); filter: blur(20px); mix-blend-mode: screen; opacity: 0; transition: opacity 0.5s, transform 0.5s; } .product-card:hover .feature-highlight { opacity: 0.7; animation: pulse 2s infinite alternate; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.2); opacity: 0.4; } } .product-info { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; position: relative; z-index: 1; } .product-name { font-family: 'Orbitron', sans-serif; font-size: 1.2rem; margin-bottom: 5px; color: white; letter-spacing: 1px; display: flex; align-items: center; } .product-name::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--neon-blue); border-radius: 50%; margin-right: 8px; box-shadow: 0 0 10px var(--neon-blue); } .product-description { font-size: 0.85rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 10px; flex-grow: 1; } .tech-specs { display: flex; font-size: 0.75rem; opacity: 0.8; color: var(--neon-blue); } .spec-item { margin-right: 10px; display: flex; align-items: center; } .spec-item::before { content: '•'; margin-right: 4px; } .interaction-button { position: absolute; bottom: 15px; right: 15px; background: transparent; border: 1px solid var(--neon-blue); border-radius: 20px; color: white; padding: 5px 12px; font-family: 'Chakra Petch', sans-serif; font-size: 0.75rem; cursor: pointer; transition: all 0.3s; outline: none; overflow: hidden; } .interaction-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.2), transparent); transition: left 0.7s; } .interaction-button:hover { background: rgba(0, 243, 255, 0.1); box-shadow: 0 0 10px rgba(0, 243, 255, 0.5); transform: translateY(-2px); } .interaction-button:hover::before { left: 100%; } .blend-demo { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; z-index: 100; transition: opacity 0.5s; background: rgba(5, 7, 20, 0.95); } .blend-demo.active { opacity: 1; pointer-events: all; } .blend-content { width: 90%; max-width: 600px; position: relative; display: flex; flex-direction: column; align-items: center; } .blend-header { font-family: 'Orbitron', sans-serif; text-align: center; margin-bottom: 20px; } .blend-title { font-size: 1.8rem; background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; } .blend-subtitle { font-size: 0.9rem; opacity: 0.8; } .blend-showcase { position: relative; width: 300px; height: 300px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .base-layer, .blend-layer { position: absolute; width: 100%; height: 100%; object-fit: contain; transition: transform 0.3s, filter 0.3s; } .blend-layer { mix-blend-mode: screen; filter: hue-rotate(0deg); } .blend-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 20px; } .blend-mode-btn { background: var(--medium-bg); border: 1px solid var(--neon-blue); border-radius: 20px; color: white; padding: 8px 15px; font-family: 'Chakra Petch', sans-serif; font-size: 0.8rem; cursor: pointer; transition: all 0.3s; } .blend-mode-btn:hover, .blend-mode-btn.active { background: rgba(0, 243, 255, 0.2); box-shadow: 0 0 10px rgba(0, 243, 255, 0.5); } .close-demo { position: absolute; top: -40px; right: 0; background: transparent; border: none; color: white; font-size: 1.5rem; cursor: pointer; opacity: 0.7; transition: opacity 0.3s; } .close-demo:hover { opacity: 1; } .bg-circuit { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB4PSIwIiB5PSIwIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGQ9Ik0gMTAgMCBMIDAgMTAgTCAxMCAyMCBMIDIwIDEwIFoiIHN0cm9rZT0iIzAwZjNmZjEwIiBzdHJva2Utd2lkdGg9IjAuNSIgZmlsbD0ibm9uZSIvPjxjaXJjbGUgY3g9IjIwIiBjeT0iMjAiIHI9IjEiIGZpbGw9IiMwMGYzZmYxMCIvPjwvcGF0dGVybj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI3BhdHRlcm4pIi8+PC9zdmc+'); opacity: 0.05; z-index: -1; } .product-tags { position: absolute; top: 10px; left: 10px; z-index: 2; } .product-tag { display: inline-block; padding: 3px 8px; background: rgba(5, 7, 20, 0.7); color: var(--neon-blue); border-radius: 10px; font-size: 0.7rem; margin-right: 5px; border: 1px solid var(--neon-blue); } @media (max-width: 700px) { .tech-grid { grid-template-columns: 1fr; } .showcase-title { font-size: 2rem; } .product-card { height: 280px; } } @media (max-width: 400px) { .showcase-title { font-size: 1.7rem; } .showcase-subtitle { font-size: 0.9rem; } .product-name { font-size: 1rem; } .product-description { font-size: 0.8rem; } } </style> </head> <body> <div class="container"> <div class="bg-circuit"></div> <div class="showcase-header"> <h1 class="showcase-title">NeoFusion X7</h1> <p class="showcase-subtitle">Quantum Computing Ecosystem</p> </div> <div class="tech-grid"> <div class="product-card"> <div class="product-image-container"> <img class="product-image" src="https://images.unsplash.com/photo-1623934199716-dc28818a6ec7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8dGVjaHx8fHx8fDE3MDY2NDg2OTM&ixlib=rb-4.0.3&q=80&w=1080" alt="Quantum Processor"> <div class="digital-overlay"></div> <div class="feature-highlight" style="width: 60px; height: 60px; top: 40%; left: 30%;"></div> <div class="product-tags"> <span class="product-tag">NEW</span> </div> </div> <div class="product-info"> <h2 class="product-name">Q-Core Processor X7</h2> <p class="product-description">128-qubit architecture with tri-state quantum coherence. Processes complex algorithms 87x faster than classical computing.</p> <div class="tech-specs"> <span class="spec-item">128-qubit</span> <span class="spec-item">10nm</span> </div> <button class="interaction-button" data-product="qcore">Explore</button> </div> </div> <div class="product-card"> <div class="product-image-container"> <img class="product-image" src="https://images.unsplash.com/photo-1581092160607-ee22621dd758?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8dGVjaG5vbG9neXx8fHx8fDE3MDY2NDg3NjA&ixlib=rb-4.0.3&q=80&w=1080" alt="Neural Interface"> <div class="digital-overlay"></div> <div class="feature-highlight" style="width: 70px; height: 70px; top: 30%; left: 60%;"></div> </div> <div class="product-info"> <h2 class="product-name">NeuroSync Interface</h2> <p class="product-description">Ultra-responsive neural interface with 0.08ms latency. Supports advanced gesture recognition and direct thought-based inputs.</p> <div class="tech-specs"> <span class="spec-item">0.08ms</span> <span class="spec-item">BCI</span> </div> <button class="interaction-button" data-product="neurosync">Explore</button> </div> </div> <div class="product-card"> <div class="product-image-container"> <img class="product-image" src="https://images.unsplash.com/photo-1531297484001-80022131f5a1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8dGVjaHx8fHx8fDE3MDY2NDg4MjM&ixlib=rb-4.0.3&q=80&w=1080" alt="Holographic Display"> <div class="digital-overlay"></div> <div class="feature-highlight" style="width: 80px; height: 80px; top: 50%; left: 50%;"></div> <div class="product-tags"> <span class="product-tag">PREMIUM</span> </div> </div> <div class="product-info"> <h2 class="product-name">HoloMatrix Display</h2> <p class="product-description">Volumetric projection with 15K resolution per eye. Features haptic feedback zones and multi-user interaction capabilities.</p> <div class="tech-specs"> <span class="spec-item">15K</span> <span class="spec-item">120Hz</span> </div> <button class="interaction-button" data-product="holomatrix">Explore</button> </div> </div> <div class="product-card"> <div class="product-image-container"> <img class="product-image" src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8Y3liZXJzZWN1cml0eXx8fHx8fDE3MDY2NDg4ODA&ixlib=rb-4.0.3&q=80&w=1080" alt="Quantum Encryption"> <div class="digital-overlay"></div> <div class="feature-highlight" style="width: 60px; height: 60px; top: 40%; left: 40%;"></div> </div> <div class="product-info"> <h2 class="product-name">QuantumSec Module</h2> <p class="product-description">Entanglement-based encryption with post-quantum resilience. Self-evolving algorithms maintain security against future quantum attacks.</p> <div class="tech-specs"> <span class="spec-item">512-bit</span> <span class="spec-item">Adaptive</span> </div> <button class="interaction-button" data-product="quantumsec">Explore</button> </div> </div> </div> </div> <div class="blend-demo"> <div class="blend-content"> <button class="close-demo">×</button> <div class="blend-header"> <h2 class="blend-title">Visual Blend Technology</h2> <p class="blend-subtitle">Experience multi-layered holographic rendering</p> </div> <div class="blend-showcase"> <img class="base-layer" src="https://images.unsplash.com/photo-1581092160607-ee22621dd758?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8dGVjaG5vbG9neXx8fHx8fDE3MDY2NDg3NjA&ixlib=rb-4.0.3&q=80&w=1080" alt="Base Layer"> <img class="blend-layer" src="https://images.unsplash.com/photo-1623934199716-dc28818a6ec7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8dGVjaHx8fHx8fDE3MDY2NDg2OTM&ixlib=rb-4.0.3&q=80&w=1080" alt="Blend Layer"> </div> <div class="blend-controls"> <button class="blend-mode-btn" data-blend="screen">Screen</button> <button class="blend-mode-btn" data-blend="overlay">Overlay</button> <button class="blend-mode-btn" data-blend="multiply">Multiply</button> <button class="blend-mode-btn" data-blend="color-dodge">Color Dodge</button> <button class="blend-mode-btn" data-blend="difference">Difference</button> <button class="blend-mode-btn" data-blend="exclusion">Exclusion</button> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Feature highlight positioning randomization const highlights = document.querySelectorAll('.feature-highlight'); highlights.forEach(highlight => { setInterval(() => { const top = 20 + Math.random() * 60; const left = 20 + Math.random() * 60; highlight.style.top = `${top}%`; highlight.style.left = `${left}%`; }, 3000); }); // Blend mode demo functionality const blendDemo = document.querySelector('.blend-demo'); const closeDemo = document.querySelector('.close-demo'); const blendButtons = document.querySelectorAll('.blend-mode-btn'); const blendLayer = document.querySelector('.blend-layer'); const exploreButtons = document.querySelectorAll('.interaction-button'); exploreButtons.forEach(button => { button.addEventListener('click', () => { blendDemo.classList.add('active'); // Set product-specific content const product = button.getAttribute('data-product'); const baseLayer = document.querySelector('.base-layer'); if (product === 'qcore') { baseLayer.src = 'https://images.unsplash.com/photo-1623934199716-dc28818a6ec7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8dGVjaHx8fHx8fDE3MDY2NDg2OTM&ixlib=rb-4.0.3&q=80&w=1080'; blendLayer.src = 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8Y2lyY3VpdHx8fHx8fDE3MDY2NDkwMzQ&ixlib=rb-4.0.3&q=80&w=1080'; } else if (product === 'neurosync') { baseLayer.src = 'https://images.unsplash.com/photo-1581092160607-ee22621dd758?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8dGVjaG5vbG9neXx8fHx8fDE3MDY2NDg3NjA&ixlib=rb-4.0.3&q=80&w=1080'; blendLayer.src = 'https://images.unsplash.com/photo-1589254065878-42c9da997008?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8bmV1cmFsfHx8fHx8MTcwNjY0OTA4NA&ixlib=rb-4.0.3&q=80&w=1080'; } else if (product === 'holomatrix') { baseLayer.src = 'https://images.unsplash.com/photo-1531297484001-80022131f5a1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8dGVjaHx8fHx8fDE3MDY2NDg4MjM&ixlib=rb-4.0.3&q=80&w=1080'; blendLayer.src = 'https://images.unsplash.com/photo-1506729623306-b5a934d88b53?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8aG9sb2dyYW18fHx8fHwxNzA2NjQ5MTIw&ixlib=rb-4.0.3&q=80&w=1080'; } else if (product === 'quantumsec') { baseLayer.src = 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8Y3liZXJzZWN1cml0eXx8fHx8fDE3MDY2NDg4ODA&ixlib=rb-4.0.3&q=80&w=1080'; blendLayer.src = 'https://images.unsplash.com/photo-1563013544-824ae1b704d3?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxfDB8MXxyYW5kb218MHx8ZW5jcnlwdGlvbnx8fHx8fDE3MDY2NDkxNTQ&ixlib=rb-4.0.3&q=80&w=1080'; } // Reset to default blend mode blendLayer.style.mixBlendMode = 'screen'; updateActiveButton('screen'); }); }); closeDemo.addEventListener('click', () => { blendDemo.classList.remove('active'); }); blendButtons.forEach(button => { button.addEventListener('click', () => { const blendMode = button.getAttribute('data-blend'); blendLayer.style.mixBlendMode = blendMode; updateActiveButton(blendMode); // Add visual effects for certain modes if (blendMode === 'difference' || blendMode === 'exclusion') { blendLayer.style.filter = 'hue-rotate(90deg)'; } else { blendLayer.style.filter = 'hue-rotate(0deg)'; } }); }); function updateActiveButton(activeMode) { blendButtons.forEach(btn => { if (btn.getAttribute('data-blend') === activeMode) { btn.classList.add('active'); } else { btn.classList.remove('active'); } }); } // Automatic animation for product cards const cards = document.querySelectorAll('.product-card'); let currentActiveIndex = 0; function activateCard(index) { cards.forEach((card, i) => { if (i === index) { card.style.transform = 'translateY(-5px)'; card.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 243, 255, 0.2)'; card.querySelector('.digital-overlay').style.opacity = '0.7'; card.querySelector('.feature-highlight').style.opacity = '0.7'; } else { card.style.transform = ''; card.style.boxShadow = ''; card.querySelector('.digital-overlay').style.opacity = '0.3'; card.querySelector('.feature-highlight').style.opacity = '0'; } }); currentActiveIndex = (currentActiveIndex + 1) % cards.length; } // Initially activate the first card activateCard(currentActiveIndex); // Set interval for changing active card setInterval(() => { activateCard(currentActiveIndex); }, 3000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NEXUS Modern Art Exhibition</title> <style> :root { --primary: #ff3366; --secondary: #4a00e0; --accent: #00ffe0; --dark: #121212; --light: #f8f8ff; --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Futura', 'Helvetica', sans-serif; } body { background-color: var(--dark); color: var(--light); overflow-x: hidden; height: 100%; width: 100%; max-width: 700px; max-height: 700px; margin: 0 auto; position: relative; } .container { width: 100%; height: 100vh; max-height: 700px; overflow-y: auto; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--primary) var(--dark); } .container::-webkit-scrollbar { width: 8px; } .container::-webkit-scrollbar-track { background: var(--dark); } .container::-webkit-scrollbar-thumb { background-color: var(--primary); border-radius: 4px; } header { padding: 20px; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(to right, rgba(18, 18, 18, 0.9), rgba(18, 18, 18, 0.7)); backdrop-filter: blur(5px); position: sticky; top: 0; z-index: 100; } .logo { font-size: 1.5rem; font-weight: 900; letter-spacing: 2px; background: linear-gradient(45deg, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; display: inline-block; } .logo::after { content: '2024'; position: absolute; top: -5px; right: -20px; font-size: 0.5rem; color: var(--accent); } nav ul { display: flex; list-style: none; gap: 20px; } nav a { color: var(--light); text-decoration: none; font-size: 0.9rem; position: relative; transition: var(--transition); } nav a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: var(--primary); transition: var(--transition); } nav a:hover { color: var(--primary); } nav a:hover::after { width: 100%; } .hero { height: 300px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero-bg { position: absolute; width: 100%; height: 100%; background: radial-gradient(circle at 20% 20%, var(--secondary), transparent 40%), radial-gradient(circle at 80% 80%, var(--primary), transparent 40%); opacity: 0.7; z-index: -1; } .hero-content { max-width: 80%; text-align: center; padding: 20px; background: rgba(18, 18, 18, 0.5); backdrop-filter: blur(10px); border-radius: 15px; z-index: 1; } h1 { font-size: 2.5rem; margin-bottom: 15px; background: linear-gradient(to right, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero p { font-size: 1rem; line-height: 1.5; margin-bottom: 20px; color: var(--light); } .blend-controls { padding: 20px; display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; } .blend-btn { background: none; border: 1px solid var(--primary); color: var(--light); padding: 8px 15px; border-radius: 30px; cursor: pointer; transition: var(--transition); font-size: 0.8rem; outline: none; } .blend-btn.active, .blend-btn:hover { background-color: var(--primary); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(255, 51, 102, 0.3); } .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 20px; } .art-piece { position: relative; height: 250px; border-radius: 10px; overflow: hidden; cursor: pointer; transition: var(--transition); } .art-piece:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); } .art-bg { position: absolute; inset: 0; z-index: 1; background-size: cover; transition: var(--transition); } .art-img { position: absolute; inset: 0; z-index: 2; background-size: contain; background-position: center; background-repeat: no-repeat; transition: var(--transition); mix-blend-mode: normal; } .art-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 15px; background: linear-gradient(to top, rgba(18, 18, 18, 0.9), transparent); transform: translateY(100%); transition: var(--transition); z-index: 3; } .art-piece:hover .art-info { transform: translateY(0); } .art-info h3 { font-size: 1rem; margin-bottom: 5px; } .art-info p { font-size: 0.8rem; opacity: 0.8; } .art-modal { position: fixed; inset: 0; background-color: rgba(18, 18, 18, 0.95); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: var(--transition); } .art-modal.active { opacity: 1; pointer-events: all; } .modal-content { width: 90%; max-width: 600px; position: relative; border-radius: 15px; overflow: hidden; transform: scale(0.9); transition: var(--transition); } .art-modal.active .modal-content { transform: scale(1); } .modal-art-container { position: relative; height: 400px; overflow: hidden; } .modal-bg { position: absolute; inset: 0; z-index: 1; background-size: cover; } .modal-img { position: absolute; inset: 0; z-index: 2; background-size: contain; background-position: center; background-repeat: no-repeat; mix-blend-mode: normal; } .modal-info { padding: 20px; background-color: var(--dark); } .modal-info h2 { font-size: 1.5rem; margin-bottom: 10px; color: var(--primary); } .modal-info p { font-size: 0.9rem; line-height: 1.5; margin-bottom: 15px; } .modal-blend-controls { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 15px; } .close-modal { position: absolute; top: 15px; right: 15px; width: 30px; height: 30px; background-color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: var(--transition); } .close-modal:hover { transform: rotate(90deg); background-color: var(--light); color: var(--dark); } .close-modal::before, .close-modal::after { content: ''; position: absolute; width: 15px; height: 2px; background-color: var(--dark); } .close-modal::before { transform: rotate(45deg); } .close-modal::after { transform: rotate(-45deg); } footer { padding: 20px; text-align: center; background-color: var(--dark); border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.8rem; } footer p { opacity: 0.7; margin-bottom: 10px; } .social-links { display: flex; justify-content: center; gap: 15px; margin-top: 10px; } .social-links a { color: var(--light); transition: var(--transition); } .social-links a:hover { color: var(--primary); transform: translateY(-3px); } .ripple { position: absolute; border-radius: 50%; transform: scale(0); background: rgba(255, 255, 255, 0.2); animation: ripple 0.8s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(2); opacity: 0; } } @media (max-width: 600px) { header { flex-direction: column; padding: 15px; } .logo { margin-bottom: 10px; } h1 { font-size: 1.8rem; } .gallery { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; } .art-piece { height: 180px; } .modal-art-container { height: 250px; } .blend-controls { padding: 10px; gap: 8px; } .blend-btn { padding: 6px 10px; font-size: 0.7rem; } } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 51, 102, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(255, 51, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 51, 102, 0); } } .pulse { animation: pulse 2s infinite; } .float { animation: float 6s ease-in-out infinite; } </style> </head> <body> <div class="container"> <header> <div class="logo">NEXUS</div> <nav> <ul> <li><a href="#gallery">Gallery</a></li> <li><a href="#about">About</a></li> <li><a href="#events">Events</a></li> </ul> </nav> </header> <section class="hero"> <div class="hero-bg"></div> <div class="hero-content"> <h1>Chromatic Intersections</h1> <p>Experience abstract art through the lens of digital manipulation. Our exhibition explores the boundaries between medium and perception through blend modes and visual juxtaposition.</p> </div> </section> <div class="blend-controls"> <button class="blend-btn active" data-blend="normal">Normal</button> <button class="blend-btn" data-blend="multiply">Multiply</button> <button class="blend-btn" data-blend="screen">Screen</button> <button class="blend-btn" data-blend="overlay">Overlay</button> <button class="blend-btn" data-blend="difference">Difference</button> <button class="blend-btn" data-blend="exclusion">Exclusion</button> <button class="blend-btn" data-blend="luminosity">Luminosity</button> </div> <section id="gallery" class="gallery"> <!-- Art pieces will be dynamically added here --> </section> <footer> <p>NEXUS Modern Art Exhibition 2024</p> <p>Interactive blend mode technology exploring the intersection of physical and digital art media.</p> <div class="social-links"> <a href="#" aria-label="Instagram">IG</a> <a href="#" aria-label="Twitter">TW</a> <a href="#" aria-label="Facebook">FB</a> </div> </footer> </div> <div class="art-modal"> <div class="close-modal"></div> <div class="modal-content"> <div class="modal-art-container"> <div class="modal-bg"></div> <div class="modal-img"></div> </div> <div class="modal-info"> <h2></h2> <p class="modal-description"></p> <p class="modal-artist"></p> <div class="modal-blend-controls"> <button class="blend-btn active" data-blend="normal">Normal</button> <button class="blend-btn" data-blend="multiply">Multiply</button> <button class="blend-btn" data-blend="screen">Screen</button> <button class="blend-btn" data-blend="overlay">Overlay</button> <button class="blend-btn" data-blend="difference">Difference</button> <button class="blend-btn" data-blend="exclusion">Exclusion</button> <button class="blend-btn" data-blend="luminosity">Luminosity</button> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Art pieces data const artPieces = [ { title: "Fractal Consciousness", artist: "Elena Morozova", description: "A spiraling exploration of consciousness depicted through geometric patterns that represent the complexity of human thought.", image: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Crect width='100%25' height='100%25' fill='%23783CA4'/%3E%3Ccircle cx='150' cy='150' r='80' fill='none' stroke='%23FFCC00' stroke-width='12'/%3E%3Cpath d='M150,70 L150,230 M70,150 L230,150' stroke='%23FFFFFF' stroke-width='8'/%3E%3Ccircle cx='150' cy='150' r='40' fill='%23FF3366'/%3E%3C/svg%3E", background: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Crect width='100%25' height='100%25' fill='%23000055'/%3E%3Cpath d='M0,0 L300,300 M0,300 L300,0' stroke='%2300BBFF' stroke-width='2' stroke-opacity='0.3'/%3E%3C/svg%3E", }, { title: "Digital Neurons", artist: "Marcus Chen", description: "An abstract visualization of neural networks, bridging the gap between organic brain function and artificial intelligence patterns.", image: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Crect width='100%25' height='100%25' fill='%2300AA55' fill-opacity='0'/%3E%3Cpath d='M50,150 Q150,50 250,150 T450,150' fill='none' stroke='%23FF5533' stroke-width='15'/%3E%3Ccircle cx='100' cy='100' r='25' fill='%2300DDFF'/%3E%3Ccircle cx='200' cy='200' r='25' fill='%23FFDD00'/%3E%3C/svg%3E", background: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Crect width='100%25' height='100%25' fill='%23111122'/%3E%3Ccircle cx='50' cy='50' r='30' fill='%23223355'/%3E%3Ccircle cx='250' cy='250' r='50' fill='%23223355'/%3E%3C/svg%3E", }, { title: "Chromatic Wave", artist: "Sophia Nguyen", description: "A study in how colors interact when in motion, inspired by sound waves and frequency visualization.", image: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Crect width='100%25' height='100%25' fill='%23331144' fill-opacity='0'/%3E%3Cpath d='M0,150 Q75,50 150,150 T300,150' fill='none' stroke='%2300FFAA' stroke-width='10'/%3E%3Cpath d='M0,150 Q75,250 150,150 T300,150' fill='none' stroke='%23FF00AA' stroke-width='10'/%3E%3C/svg%3E", background: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23330033'/%3E%3Cstop offset='100%25' stop-color='%23006666'/%3E%3C/linearGradient%3E%3Crect width='100%25' height='100%25' fill='url(%23g)'/%3E%3C/svg%3E", }, { title: "Quantum Reflection", artist: "David Kim", description: "Inspired by quantum physics, this piece explores multiple states of existence represented through overlapping translucent forms.", image: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Crect width='100%25' height='100%25' fill='%23114466' fill-opacity='0'/%3E%3Cpolygon points='150,50 250,150 150,250 50,150' fill='%23FFAADD' fill-opacity='0.7'/%3E%3Cpolygon points='150,80 220,150 150,220 80,150' fill='%2300FFFF' fill-opacity='0.7'/%3E%3C/svg%3E", background: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Crect width='100%25' height='100%25' fill='%23440044'/%3E%3Cpath d='M0,0 L300,300 M300,0 L0,300' stroke='%23550055' stroke-width='2'/%3E%3C/svg%3E", }, { title: "Nebula Dream", artist: "Amara Johnson", description: "A surreal journey through cosmic space, where nebula-like formations create dreamlike scenery blending astronomical reality with imagination.", image: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Crect width='100%25' height='100%25' fill='%231A1A3A' fill-opacity='0'/%3E%3Cfilter id='f' x='0' y='0' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Ccircle cx='100' cy='100' r='50' fill='%23FF44AA' filter='url(%23f)'/%3E%3Ccircle cx='200' cy='200' r='60' fill='%2344AAFF' filter='url(%23f)'/%3E%3C/svg%3E", background: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Crect width='100%25' height='100%25' fill='%23000022'/%3E%3Ccircle cx='140' cy='140' r='1' fill='%23FFFFFF'/%3E%3Ccircle cx='200' cy='50' r='1' fill='%23FFFFFF'/%3E%3Ccircle cx='250' cy='100' r='1' fill='%23FFFFFF'/%3E%3Ccircle cx='50' cy='200' r='1' fill='%23FFFFFF'/%3E%3Ccircle cx='100' cy='250' r='1' fill='%23FFFFFF'/%3E%3Ccircle cx='210' cy='240' r='1' fill='%23FFFFFF'/%3E%3C/svg%3E", }, { title: "Algorithmic Emotion", artist: "Jamal Hassan", description: "A commentary on artificial intelligence's attempt to understand human emotions, represented through structured yet chaotic patterns.", image: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Crect width='100%25' height='100%25' fill='%234A004A' fill-opacity='0'/%3E%3Crect x='50' y='50' width='60' height='60' fill='%23FF3366'/%3E%3Crect x='120' y='50' width='60' height='60' fill='%2300AAFF'/%3E%3Crect x='190' y='50' width='60' height='60' fill='%23FFEE00'/%3E%3Crect x='50' y='120' width='60' height='60' fill='%2300DDAA'/%3E%3Crect x='120' y='120' width='60' height='60' fill='%23FFFFFF'/%3E%3Crect x='190' y='120' width='60' height='60' fill='%23FF00AA'/%3E%3Crect x='50' y='190' width='60' height='60' fill='%2300FFDD'/%3E%3Crect x='120' y='190' width='60' height='60' fill='%23AA00FF'/%3E%3Crect x='190' y='190' width='60' height='60' fill='%2300FF00'/%3E%3C/svg%3E", background: "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Crect width='100%25' height='100%25' fill='%23222222'/%3E%3Cpath d='M0,50 L300,50 M0,100 L300,100 M0,150 L300,150 M0,200 L300,200 M0,250 L300,250' stroke='%23333333' stroke-width='1'/%3E%3Cpath d='M50,0 L50,300 M100,0 L100,300 M150,0 L150,300 M200,0 L200,300 M250,0 L250,300' stroke='%23333333' stroke-width='1'/%3E%3C/svg%3E", } ]; // Populate gallery const gallery = document.querySelector('.gallery'); artPieces.forEach((piece, index) => { const artPiece = document.createElement('div'); artPiece.classList.add('art-piece'); artPiece.dataset.index = index; artPiece.innerHTML = ` <div class="art-bg" style="background-image: url('${piece.background}')"></div> <div class="art-img" style="background-image: url('${piece.image}')"></div> <div class="art-info"> <h3>${piece.title}</h3> <p>${piece.artist}</p> </div> `; gallery.appendChild(artPiece); // Add floating animation to every other piece if (index % 2 === 0) { artPiece.classList.add('float'); } }); // Global blend mode control const blendBtns = document.querySelectorAll('.blend-controls .blend-btn'); blendBtns.forEach(btn => { btn.addEventListener('click', function() { blendBtns.forEach(b => b.classList.remove('active')); this.classList.add('active'); const blendMode = this.dataset.blend; document.querySelectorAll('.art-img').forEach(img => { img.style.mixBlendMode = blendMode; }); // Add ripple effect createRipple(this); }); }); // Modal functionality const modal = document.querySelector('.art-modal'); const closeModal = document.querySelector('.close-modal'); const artPieceElements = document.querySelectorAll('.art-piece'); artPieceElements.forEach(piece => { piece.addEventListener('click', function() { const index = this.dataset.index; const art = artPieces[index]; // Populate modal with art data document.querySelector('.modal-bg').style.backgroundImage = `url('${art.background}')`; document.querySelector('.modal-img').style.backgroundImage = `url('${art.image}')`; document.querySelector('.modal-info h2').textContent = art.title; document.querySelector('.modal-description').textContent = art.description; document.querySelector('.modal-artist').textContent = `Artist: ${art.artist}`; // Set the current blend mode in modal const currentBlendMode = document.querySelector('.blend-controls .active').dataset.blend; document.querySelector('.modal-img').style.mixBlendMode = currentBlendMode; // Update active blend button in modal document.querySelectorAll('.modal-blend-controls .blend-btn').forEach(btn => { btn.classList.toggle('active', btn.dataset.blend === currentBlendMode); }); // Show modal modal.classList.add('active'); }); }); // Modal blend mode controls const modalBlendBtns = document.querySelectorAll('.modal-blend-controls .blend-btn'); modalBlendBtns.forEach(btn => { btn.addEventListener('click', function() { modalBlendBtns.forEach(b => b.classList.remove('active')); this.classList.add('active'); const blendMode = this.dataset.blend; document.querySelector('.modal-img').style.mixBlendMode = blendMode; // Add ripple effect createRipple(this); }); }); // Close modal closeModal.addEventListener('click', function() { modal.classList.remove('active'); }); // Close modal when clicking outside modal.addEventListener('click', function(e) { if (e.target === this) { modal.classList.remove('active'); } }); // Ripple effect function function createRipple(button) { const ripple = document.createElement('span'); ripple.classList.add('ripple'); button.appendChild(ripple); const rect = button.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`; ripple.addEventListener('animationend', function() { ripple.remove(); }); } // Add pulse effect to one random button for visual interest const randomBtnIndex = Math.floor(Math.random() * blendBtns.length); setTimeout(() => { if (!blendBtns[randomBtnIndex].classList.contains('active')) { blendBtns[randomBtnIndex].classList.add('pulse'); } }, 3000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wanderlust Journey - Travel Blog</title> <style> @import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Montserrat:wght@300;400;500;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #ff8c42; --secondary: #f9c784; --accent: #fc4445; --dark: #2e282a; --light: #f5f5f5; --overlay: rgba(46, 40, 42, 0.4); } body { font-family: 'Montserrat', sans-serif; color: var(--dark); background-color: var(--light); height: 100%; width: 100%; overflow-x: hidden; } .container { max-width: 700px; height: 700px; margin: 0 auto; position: relative; overflow: hidden; } .travel-gallery { display: flex; flex-direction: column; gap: 20px; padding: 20px; height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--secondary) transparent; } .travel-gallery::-webkit-scrollbar { width: 6px; } .travel-gallery::-webkit-scrollbar-thumb { background-color: var(--secondary); border-radius: 10px; } .header { text-align: center; margin-bottom: 20px; position: sticky; top: 0; background: var(--light); z-index: 10; padding: 10px 0; box-shadow: 0 4px 12px rgba(0,0,0,0.05); border-radius: 0 0 15px 15px; } .header h1 { font-family: 'Caveat', cursive; font-size: 3.2rem; margin-bottom: 8px; background: linear-gradient(to right, var(--primary), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 2px 2px 4px rgba(0,0,0,0.1); } .header p { font-weight: 300; font-size: 0.95rem; color: var(--dark); max-width: 80%; margin: 0 auto; } .destination-card { position: relative; border-radius: 15px; overflow: hidden; height: 280px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); transition: transform 0.5s ease, box-shadow 0.5s ease; } .destination-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.2); } .destination-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; } .destination-card:hover .destination-img { transform: scale(1.05); } .destination-info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; background: linear-gradient(to top, var(--overlay), transparent); color: white; mix-blend-mode: normal; transition: all 0.5s ease; } .destination-card:hover .destination-info { mix-blend-mode: overlay; padding-bottom: 40px; } .destination-title { font-family: 'Caveat', cursive; font-size: 2.5rem; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0,0,0,0.4); transition: transform 0.5s ease; } .destination-card:hover .destination-title { transform: translateY(-5px); } .destination-desc { font-size: 0.9rem; line-height: 1.5; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.6s ease, opacity 0.6s ease, margin-top 0.4s ease; } .destination-card:hover .destination-desc { max-height: 150px; opacity: 1; margin-top: 8px; } .location-marker { display: flex; align-items: center; margin-top: 8px; font-size: 0.85rem; font-weight: 500; } .location-marker svg { margin-right: 5px; fill: var(--secondary); height: 16px; width: 16px; } .tag { display: inline-block; background-color: var(--secondary); color: var(--dark); padding: 5px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; margin-right: 5px; margin-top: 8px; transition: transform 0.3s ease, background-color 0.3s ease; } .tag:hover { transform: scale(1.1); background-color: var(--primary); } .destination-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(255,140,66,0.3) 0%, rgba(255,140,66,0) 70%); opacity: 0; z-index: 1; mix-blend-mode: overlay; transition: opacity 0.5s ease; } .destination-card:hover::before { opacity: 1; } .read-more { display: inline-block; margin-top: 10px; color: var(--secondary); font-weight: 600; text-decoration: none; position: relative; transition: color 0.3s ease; } .read-more::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: var(--primary); transition: width 0.3s ease; } .read-more:hover { color: var(--primary); } .read-more:hover::after { width: 100%; } .explore-button { position: fixed; bottom: 30px; right: 30px; background: linear-gradient(to right, var(--primary), var(--accent)); color: white; border: none; padding: 12px 20px; border-radius: 30px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1rem; cursor: pointer; box-shadow: 0 4px 15px rgba(252, 68, 69, 0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; z-index: 100; display: flex; align-items: center; gap: 8px; } .explore-button:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(252, 68, 69, 0.5); } .explore-button svg { width: 18px; height: 18px; fill: white; } @media (max-width: 700px) { .header h1 { font-size: 2.5rem; } .header p { font-size: 0.85rem; } .destination-card { height: 230px; } .destination-title { font-size: 2rem; } .destination-desc { font-size: 0.8rem; } .explore-button { bottom: 20px; right: 20px; padding: 10px 15px; font-size: 0.9rem; } } .texture-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c4zIgWAAAA/klEQVR4nP1VUZOgIAyUcDgEDuW4Ax3//49XWVNn3vg2M39AbXe7SZAQYaLSfedm8FrmeRnyWSgUCoVCoVD4C9/m4fKLE+dZKSxO9bLnp0f8jgnDsWOVYrxPWGgVhqi9HXFpOMfIZBYVs+O8dIsMPLtsbH2JVxdpmbijfMGrzuVDLKuSXO3XP6SXo4YMc5OLVf2ZxagM0vCnXYyMpzFmOydj9OyR2nVyWbEzZ9t9MY7MuQmYfrQNE9tyroO5NzswB5cORxVXJzFYkPjdwTgON5kkTQRRt2n6vAF5Myw49QDMCQCr8lUe2Kkf0mP++SS5Cz89iO9qJzBXXvxPJDe6OE3f3QUAAAAASUVORK5CYII='); opacity: 0.03; pointer-events: none; z-index: 1000; } .cursor { position: fixed; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--secondary); pointer-events: none; transform: translate(-50%, -50%); z-index: 9999; transition: width 0.3s, height 0.3s, background-color 0.3s; mix-blend-mode: difference; display: none; } /* Add loading animation */ .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--light); display: flex; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.5s ease, visibility 0.5s ease; } .loading-spinner { width: 60px; height: 60px; border: 5px solid rgba(255, 140, 66, 0.3); border-radius: 50%; border-top-color: var(--primary); animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-up { animation: fadeUp 0.8s ease forwards; } .destination-card { opacity: 0; } </style> </head> <body> <div class="texture-overlay"></div> <div class="cursor"></div> <div class="loading-overlay"> <div class="loading-spinner"></div> </div> <div class="container"> <div class="travel-gallery"> <div class="header fade-up"> <h1>Wanderlust Journey</h1> <p>Immerse yourself in breathtaking destinations through the eyes of a seasoned nomad</p> </div> <div class="destination-card" data-delay="100"> <img src="https://images.unsplash.com/photo-1512100356356-de1b84283e18?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="Santorini, Greece" class="destination-img"> <div class="destination-info"> <h2 class="destination-title">Santorini, Greece</h2> <div class="location-marker"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"/></svg> Cyclades Islands, Aegean Sea </div> <p class="destination-desc">Perched on the edge of a caldera, Santorini's iconic blue-domed churches and whitewashed buildings cascade down volcanic cliffs. The sunset at Oia transformed the Aegean Sea into a canvas of fiery gold—a moment that took my breath away after hiking the ancient trail from Fira.</p> <div> <span class="tag">Island Paradise</span> <span class="tag">Sunset Views</span> </div> <a href="#" class="read-more">Read journey →</a> </div> </div> <div class="destination-card" data-delay="200"> <img src="https://images.unsplash.com/photo-1525097487452-6278ff080c31?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="Kyoto, Japan" class="destination-img"> <div class="destination-info"> <h2 class="destination-title">Kyoto, Japan</h2> <div class="location-marker"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"/></svg> Kansai Region, Honshu Island </div> <p class="destination-desc">Dawn at Arashiyama Bamboo Grove feels like stepping into another realm. The gentle rustling of towering bamboo stalks created a natural symphony as soft morning light filtered through. I arrived before 7am to experience this magical place without crowds—the best decision of my journey.</p> <div> <span class="tag">Ancient Temples</span> <span class="tag">Cultural Heritage</span> </div> <a href="#" class="read-more">Read journey →</a> </div> </div> <div class="destination-card" data-delay="300"> <img src="https://images.unsplash.com/photo-1581021387689-1655b14028ac?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="Machu Picchu, Peru" class="destination-img"> <div class="destination-info"> <h2 class="destination-title">Machu Picchu, Peru</h2> <div class="location-marker"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"/></svg> Cusco Region, Andes Mountains </div> <p class="destination-desc">After four days trekking the Inca Trail, watching the morning mist part to reveal Machu Picchu was pure magic. These ancient stones hold centuries of stories—I sat by the Guardian's Hut for hours, watching clouds dance around Huayna Picchu as llamas grazed peacefully nearby.</p> <div> <span class="tag">Ancient Wonder</span> <span class="tag">Mountain Trails</span> </div> <a href="#" class="read-more">Read journey →</a> </div> </div> <div class="destination-card" data-delay="400"> <img src="https://images.unsplash.com/photo-1523592121529-f6dde35f079e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80" alt="Marrakech, Morocco" class="destination-img"> <div class="destination-info"> <h2 class="destination-title">Marrakech, Morocco</h2> <div class="location-marker"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"/></svg> Marrakech-Safi, Atlas Mountains </div> <p class="destination-desc">Getting lost in Marrakech's medina is a sensory adventure—narrow alleyways overflow with vibrant textiles, aromatic spices, and the calls of merchants. I found a hidden riad with a courtyard fountain where I sipped mint tea as twilight painted the city in golden hues. The contrast between chaotic souks and peaceful garden retreats defines this magical city.</p> <div> <span class="tag">Ancient Medina</span> <span class="tag">Vibrant Markets</span> </div> <a href="#" class="read-more">Read journey →</a> </div> </div> </div> </div> <button class="explore-button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M503.47 360.997l-65.542-305.997c-4.032-19.089-23.088-31.809-42.58-28.32l-329.144 70.035c-19.109 4.224-31.765 23.296-28.378 42.594l57.686 305.214c4.16 19.022 23.231 31.765 42.58 28.282l329.04-70.035c19.262-3.098 31.923-22.234 28.339-41.773zM192 432c-44.183 0-80-35.817-80-80s35.817-80 80-80 80 35.817 80 80-35.817 80-80 80z"/></svg> Explore More </button> <script> document.addEventListener('DOMContentLoaded', function() { // Loading animation setTimeout(() => { const loadingOverlay = document.querySelector('.loading-overlay'); loadingOverlay.style.opacity = '0'; loadingOverlay.style.visibility = 'hidden'; // Reveal destination cards with staggered animation const cards = document.querySelectorAll('.destination-card'); cards.forEach((card, index) => { const delay = parseInt(card.getAttribute('data-delay')) || (index * 100); setTimeout(() => { card.style.opacity = '1'; card.classList.add('fade-up'); }, delay); }); }, 1500); // Custom cursor const cursor = document.querySelector('.cursor'); const links = document.querySelectorAll('a, button, .tag'); if (window.innerWidth > 700) { cursor.style.display = 'block'; document.addEventListener('mousemove', (e) => { cursor.style.top = e.clientY + 'px'; cursor.style.left = e.clientX + 'px'; }); links.forEach(link => { link.addEventListener('mouseenter', () => { cursor.style.width = '60px'; cursor.style.height = '60px'; cursor.style.backgroundColor = 'rgba(255, 140, 66, 0.2)'; }); link.addEventListener('mouseleave', () => { cursor.style.width = '40px'; cursor.style.height = '40px'; cursor.style.backgroundColor = 'transparent'; }); }); } // Button interaction const exploreButton = document.querySelector('.explore-button'); exploreButton.addEventListener('click', function() { // Create a pulsing animation when clicked this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = 'translateY(-3px)'; }, 150); // Scroll to bottom of content smoothly const gallery = document.querySelector('.travel-gallery'); gallery.scrollTo({ top: gallery.scrollHeight, behavior: 'smooth' }); }); // Prevent actual form submissions and link navigations document.querySelectorAll('a, button').forEach(element => { element.addEventListener('click', (e) => { e.preventDefault(); }); }); // Add scroll reveal effect to cards const revealOnScroll = () => { const cards = document.querySelectorAll('.destination-card'); const windowHeight = window.innerHeight; cards.forEach(card => { const cardTop = card.getBoundingClientRect().top; if (cardTop < windowHeight - 100) { card.style.opacity = '1'; card.classList.add('fade-up'); } }); }; // Trigger reveal on initial load and scroll revealOnScroll(); document.querySelector('.travel-gallery').addEventListener('scroll', revealOnScroll); }); </script> </body> </html>
