Glow text effects can transform ordinary text into eye-catching, vibrant designs that captivate viewers. These effects are perfect for adding a touch of flair to your digital projects.
In this article, we will explore 10 stunning glow text effect examples that you can easily incorporate into your designs. Get ready to be inspired by these creative and dynamic text treatments.
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
Designers and developers love Subframe for its drag-and-drop interface and intuitive, responsive canvas. Create pixel-perfect UI, including stunning glow text effects, effortlessly.
Join the community of satisfied users and 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
Ready to elevate your design game? With Subframe, you can create pixel-perfect UIs, including stunning glow text effects, in minutes. Our drag-and-drop interface ensures efficiency and ease of use.
Join the community of satisfied designers and start creating immediately. Start for free today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NeoSynth - The Cyberpunk Entertainment Hub</title> <style> @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap'); :root { --primary: #ff2a6d; --secondary: #05d9e8; --tertiary: #d65bca; --dark: #1a1a2e; --darker: #0f0f1a; --highlight: #7b00ff; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Rajdhani', sans-serif; background-color: var(--darker); color: #fff; overflow-x: hidden; background-image: radial-gradient(circle at 25% 35%, rgba(255, 42, 109, 0.1) 0%, transparent 45%), radial-gradient(circle at 75% 65%, rgba(5, 217, 232, 0.1) 0%, transparent 45%); height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .container { max-width: 680px; width: 100%; padding: 2rem; height: 680px; overflow-y: auto; overflow-x: hidden; position: relative; scrollbar-width: thin; scrollbar-color: var(--tertiary) var(--darker); } .container::-webkit-scrollbar { width: 6px; } .container::-webkit-scrollbar-track { background: var(--darker); } .container::-webkit-scrollbar-thumb { background-color: var(--tertiary); border-radius: 3px; } header { margin-bottom: 2rem; position: relative; } .logo { font-family: 'Orbitron', sans-serif; font-size: 2.5rem; font-weight: 900; text-align: center; letter-spacing: 2px; margin-bottom: 1rem; position: relative; text-transform: uppercase; } .neon-text { color: #fff; text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 30px var(--primary), 0 0 40px var(--primary); animation: pulse 2s infinite alternate; } @keyframes pulse { 0% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 30px var(--primary), 0 0 40px var(--primary); } 100% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 15px var(--primary), 0 0 25px var(--primary), 0 0 35px var(--primary), 0 0 45px var(--primary); } } .subtitle { font-size: 1.1rem; text-align: center; margin-bottom: 1rem; color: var(--secondary); text-shadow: 0 0 10px var(--secondary); font-weight: 500; } nav { display: flex; justify-content: center; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; } .nav-item { padding: 0.5rem 1rem; background: rgba(15, 15, 26, 0.7); border: 1px solid var(--tertiary); border-radius: 4px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; font-weight: 600; } .nav-item:before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: all 0.5s ease; } .nav-item:hover:before { left: 100%; } .nav-item:hover { background: rgba(26, 26, 46, 0.9); transform: translateY(-2px); box-shadow: 0 0 10px var(--tertiary), 0 0 20px rgba(214, 91, 202, 0.3); } .featured-section { margin-bottom: 2rem; position: relative; } .section-title { font-family: 'Orbitron', sans-serif; margin-bottom: 1rem; font-size: 1.5rem; font-weight: 700; position: relative; display: inline-block; color: var(--secondary); text-shadow: 0 0 10px var(--secondary); } .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .card { background: rgba(15, 15, 26, 0.7); border-radius: 8px; overflow: hidden; cursor: pointer; transition: all 0.3s ease; position: relative; border: 1px solid rgba(255, 255, 255, 0.1); } .card:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 0 15px rgba(5, 217, 232, 0.5), 0 0 30px rgba(5, 217, 232, 0.2); border-color: var(--secondary); } .card-image { width: 100%; height: 120px; background-position: center; background-size: cover; position: relative; } .card-img-1 { background-image: url('https://source.unsplash.com/random/300x200/?cyberpunk,neon'); } .card-img-2 { background-image: url('https://source.unsplash.com/random/300x200/?synthwave,city'); } .card-img-3 { background-image: url('https://source.unsplash.com/random/300x200/?cyber,tech'); } .card-img-4 { background-image: url('https://source.unsplash.com/random/300x200/?neon,street'); } .card-img-5 { background-image: url('https://source.unsplash.com/random/300x200/?futuristic,gaming'); } .card-img-6 { background-image: url('https://source.unsplash.com/random/300x200/?scifi,dark'); } .card-content { padding: 0.75rem; } .card-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; } .card-desc { font-size: 0.8rem; opacity: 0.8; } .neon-border { position: relative; } .neon-border::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 15px var(--secondary), 0 0 30px rgba(5, 217, 232, 0.5); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; border-radius: inherit; } .card:hover .neon-border::after { opacity: 1; } .featured-content { background: rgba(15, 15, 26, 0.7); border-radius: 8px; overflow: hidden; margin-bottom: 2rem; position: relative; border: 1px solid rgba(255, 255, 255, 0.1); } .featured-img { width: 100%; height: 200px; background-image: url('https://source.unsplash.com/random/600x300/?cyberpunk,future'); background-position: center; background-size: cover; position: relative; } .featured-img::before { content: 'FEATURED'; position: absolute; top: 10px; right: 10px; background: var(--primary); color: #fff; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.8rem; font-weight: 700; box-shadow: 0 0 10px var(--primary); } .featured-text { padding: 1.5rem; } .featured-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--primary); text-shadow: 0 0 10px rgba(255, 42, 109, 0.5); } .featured-desc { margin-bottom: 1rem; line-height: 1.5; } .btn { display: inline-block; padding: 0.5rem 1.25rem; background: linear-gradient(90deg, var(--primary), var(--tertiary)); border: none; border-radius: 4px; color: #fff; font-weight: 600; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; font-family: 'Rajdhani', sans-serif; text-transform: uppercase; letter-spacing: 1px; } .btn:hover { box-shadow: 0 0 15px var(--primary), 0 0 30px rgba(255, 42, 109, 0.5); transform: translateY(-2px); } .btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); transition: all 0.5s ease; } .btn:hover::before { left: 100%; } .newsletter { background: rgba(26, 26, 46, 0.8); border-radius: 8px; padding: 1.5rem; margin-bottom: 2rem; border: 1px solid var(--highlight); position: relative; overflow: hidden; } .newsletter::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( to bottom right, transparent, transparent, transparent, rgba(123, 0, 255, 0.1), transparent, transparent, transparent ); transform: rotate(30deg); animation: shine 6s linear infinite; } @keyframes shine { from { transform: rotate(30deg) translateX(-30%); } to { transform: rotate(30deg) translateX(30%); } } .newsletter-title { color: var(--highlight); text-shadow: 0 0 10px var(--highlight); margin-bottom: 1rem; font-size: 1.2rem; } .newsletter-desc { margin-bottom: 1rem; line-height: 1.5; } .newsletter-form { display: flex; gap: 0.5rem; } .input { flex: 1; padding: 0.5rem 1rem; background: rgba(15, 15, 26, 0.7); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; color: #fff; outline: none; transition: all 0.3s ease; font-family: 'Rajdhani', sans-serif; } .input:focus { border-color: var(--highlight); box-shadow: 0 0 10px rgba(123, 0, 255, 0.5); } .btn-purple { background: linear-gradient(90deg, var(--highlight), var(--tertiary)); } .btn-purple:hover { box-shadow: 0 0 15px var(--highlight), 0 0 30px rgba(123, 0, 255, 0.5); } .footer { text-align: center; margin-top: 1rem; font-size: 0.9rem; opacity: 0.7; } .glitch-effect { position: relative; animation: glitch 2s infinite; } @keyframes glitch { 0% { text-shadow: none; } 2% { text-shadow: 2px 0 0 red, -2px 0 0 blue; } 4% { text-shadow: none; } 8% { text-shadow: -2px 0 0 red, 2px 0 0 blue; } 10% { text-shadow: none; } 100% { text-shadow: none; } } .circuit-border { position: relative; } .circuit-border::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border-radius: 10px; background: linear-gradient(90deg, var(--darker) 50%, transparent 50%), linear-gradient(90deg, var(--darker) 50%, transparent 50%), linear-gradient(0deg, var(--darker) 50%, transparent 50%), linear-gradient(0deg, var(--darker) 50%, transparent 50%); background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; background-size: 15px 2px, 15px 2px, 2px 15px, 2px 15px; background-position: left top, right bottom, left bottom, right top; animation: border-dance 3s infinite linear; z-index: -1; } @keyframes border-dance { 0% { background-position: left top, right bottom, left bottom, right top; } 100% { background-position: right top, left bottom, right bottom, left top; } } .digital-noise { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.05; z-index: 100; } .digital-noise::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4='); animation: noise 0.5s linear infinite; } @keyframes noise { 0%, 100% { opacity: 0.05; } 50% { opacity: 0.02; } } @media (max-width: 768px) { .grid { grid-template-columns: repeat(2, 1fr); } .logo { font-size: 2rem; } .featured-img { height: 150px; } .featured-title { font-size: 1.2rem; } .newsletter-form { flex-direction: column; } } @media (max-width: 480px) { .grid { grid-template-columns: 1fr; } .nav-item { padding: 0.4rem 0.8rem; font-size: 0.9rem; } .container { padding: 1rem; } .logo { font-size: 1.8rem; } } /* Custom cursor */ .custom-cursor { position: fixed; width: 20px; height: 20px; border-radius: 50%; pointer-events: none; z-index: 9999; mix-blend-mode: exclusion; transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s, background-color 0.3s; background-color: transparent; border: 2px solid var(--secondary); box-shadow: 0 0 10px var(--secondary); } .cursor-fx { position: fixed; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; z-index: 10000; mix-blend-mode: exclusion; transform: translate(-50%, -50%); background-color: var(--secondary); box-shadow: 0 0 5px var(--secondary); transition: width 0.2s, height 0.2s; } /* Add color accent to hover */ [data-glow="primary"]:hover { color: var(--primary); text-shadow: 0 0 10px var(--primary); } [data-glow="secondary"]:hover { color: var(--secondary); text-shadow: 0 0 10px var(--secondary); } [data-glow="tertiary"]:hover { color: var(--tertiary); text-shadow: 0 0 10px var(--tertiary); } [data-glow="highlight"]:hover { color: var(--highlight); text-shadow: 0 0 10px var(--highlight); } </style> </head> <body> <div class="custom-cursor"></div> <div class="cursor-fx"></div> <div class="digital-noise"></div> <div class="container"> <header> <h1 class="logo neon-text glitch-effect">NeoSynth</h1> <p class="subtitle">Where reality blurs with digital dreams</p> <nav> <div class="nav-item" data-glow="primary">STREAMS</div> <div class="nav-item" data-glow="secondary">AUGMENTED REALITY</div> <div class="nav-item" data-glow="tertiary">NEUROCINEMA</div> <div class="nav-item" data-glow="highlight">DATAVERSE</div> </nav> </header> <section class="featured-section"> <div class="featured-content circuit-border"> <div class="featured-img neon-border"></div> <div class="featured-text"> <h2 class="featured-title">BINARY DREAMS: THE NEURAL CLUB EXPERIENCE</h2> <p class="featured-desc">Experience the mind-bending immersive club event that merges neuro-haptic feedback with synchronized audio-visual stimuli. Feel the music pulse through your neural pathways as reality distorts around you.</p> <button class="btn">JACK IN</button> </div> </div> </section> <section class="trending-section"> <h2 class="section-title">TRENDING EXPERIENCES</h2> <div class="grid"> <div class="card neon-border"> <div class="card-image card-img-1"></div> <div class="card-content"> <h3 class="card-title" data-glow="primary">Neon District Rave</h3> <p class="card-desc">Sensory-enhanced dance event in the abandoned MegaCorp sector</p> </div> </div> <div class="card neon-border"> <div class="card-image card-img-2"></div> <div class="card-content"> <h3 class="card-title" data-glow="secondary">SynthWave Collective</h3> <p class="card-desc">Retro-futuristic audio visual experience with neural bonding</p> </div> </div> <div class="card neon-border"> <div class="card-image card-img-3"></div> <div class="card-content"> <h3 class="card-title" data-glow="tertiary">Memory Hack</h3> <p class="card-desc">Custom-altered reality experience based on your subconscious</p> </div> </div> <div class="card neon-border"> <div class="card-image card-img-4"></div> <div class="card-content"> <h3 class="card-title" data-glow="highlight">Glitch Lounge</h3> <p class="card-desc">Experimental sonic distortion in a reality-bending environment</p> </div> </div> <div class="card neon-border"> <div class="card-image card-img-5"></div> <div class="card-content"> <h3 class="card-title" data-glow="primary">Virtual Combat Arena</h3> <p class="card-desc">Full sensory competitive gaming with haptic feedback suits</p> </div> </div> <div class="card neon-border"> <div class="card-image card-img-6"></div> <div class="card-content"> <h3 class="card-title" data-glow="secondary">Digital Dreamscape</h3> <p class="card-desc">Shared consciousness meditation journey with visual synthesis</p> </div> </div> </div> </section> <section class="newsletter"> <h2 class="newsletter-title">NEURAL FEED SUBSCRIPTION</h2> <p class="newsletter-desc">Get exclusive access to encrypted location data for underground events and beta testing of new sensory experiences.</p> <div class="newsletter-form"> <input type="email" class="input" placeholder="Your neural-link ID"> <button class="btn btn-purple">CONNECT</button> </div> </section> <footer class="footer"> <p>© 2153 NeoSynth Entertainment • BrainLink™ Compatible • Use at your own neural risk</p> </footer> </div> <script> document.addEventListener('DOMContentLoaded', () => { const cursor = document.querySelector('.custom-cursor'); const cursorFx = document.querySelector('.cursor-fx'); document.addEventListener('mousemove', (e) => { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; cursorFx.style.left = e.clientX + 'px'; cursorFx.style.top = e.clientY + 'px'; }); // Make cursor bigger on hover over interactive elements const interactiveElements = document.querySelectorAll('.btn, .card, .nav-item, .input, [data-glow]'); interactiveElements.forEach(el => { el.addEventListener('mouseover', () => { cursor.style.width = '50px'; cursor.style.height = '50px'; cursor.style.backgroundColor = 'rgba(5, 217, 232, 0.1)'; cursorFx.style.width = '8px'; cursorFx.style.height = '8px'; }); el.addEventListener('mouseleave', () => { cursor.style.width = '20px'; cursor.style.height = '20px'; cursor.style.backgroundColor = 'transparent'; cursorFx.style.width = '6px'; cursorFx.style.height = '6px'; }); }); // Handle button clicks with animation const buttons = document.querySelectorAll('.btn'); buttons.forEach(btn => { btn.addEventListener('click', function(e) { e.preventDefault(); // Create ripple effect const ripple = document.createElement('span'); ripple.classList.add('ripple'); this.appendChild(ripple); const x = e.clientX - this.getBoundingClientRect().left; const y = e.clientY - this.getBoundingClientRect().top; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; setTimeout(() => { ripple.remove(); }, 600); // Add active class this.classList.add('btn-active'); setTimeout(() => { this.classList.remove('btn-active'); }, 200); }); }); // Form submission prevention const form = document.querySelector('.newsletter-form'); form.addEventListener('submit', (e) => { e.preventDefault(); const input = form.querySelector('.input'); if (input.value.trim() !== '') { input.style.borderColor = 'var(--secondary)'; input.style.boxShadow = '0 0 15px var(--secondary)'; setTimeout(() => { input.value = ''; input.style.borderColor = 'rgba(255, 255, 255, 0.2)'; input.style.boxShadow = 'none'; const thankYou = document.createElement('div'); thankYou.textContent = 'Neural link established. Data stream incoming...'; thankYou.style.color = 'var(--secondary)'; thankYou.style.textShadow = '0 0 5px var(--secondary)'; thankYou.style.marginTop = '10px'; thankYou.style.fontSize = '0.9rem'; form.appendChild(thankYou); setTimeout(() => { thankYou.remove(); }, 3000); }, 500); } }); // Text glow effect on hover const glowElements = document.querySelectorAll('[data-glow]'); glowElements.forEach(el => { const color = el.getAttribute('data-glow'); let intensity = 10; el.addEventListener('mouseover', () => { const interval = setInterval(() => { el.style.textShadow = `0 0 ${intensity}px var(--${color})`; intensity = intensity >= 20 ? 10 : intensity + 1; }, 50); el.setAttribute('data-interval', interval); }); el.addEventListener('mouseleave', () => { clearInterval(parseInt(el.getAttribute('data-interval'))); el.style.textShadow = ''; intensity = 10; }); }); // Card hover effect enhancement const cards = document.querySelectorAll('.card'); cards.forEach(card => { card.addEventListener('mousemove', (e) => { const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const xPercent = x / rect.width; const yPercent = y / rect.height; const rotateY = (xPercent - 0.5) * 10; // -5 to 5 degrees const rotateX = (0.5 - yPercent) * 10; // -5 to 5 degrees card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.05)`; // Dynamic shadow based on position const shadowColor = card.querySelector('.card-title').getAttribute('data-glow'); card.style.boxShadow = ` ${-rotateY/2}px ${-rotateX/2}px 15px rgba(var(--${shadowColor}), 0.3), 0 10px 20px rgba(0, 0, 0, 0.2) `; }); card.addEventListener('mouseleave', () => { card.style.transform = ''; card.style.boxShadow = ''; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Summer Sale Banner</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&family=Playfair+Display:wght@700&display=swap'); body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #fff; overflow: hidden; } .container { width: 100%; max-width: 700px; height: 700px; position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: 12px; background: linear-gradient(135deg, #FFF8E1, #FFECB3); } .banner { height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; padding: 2rem; z-index: 2; } .banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23FFA000' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E"); z-index: -1; } .floating-elements { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; } .floating-element { position: absolute; width: 30px; height: 30px; background: radial-gradient(circle, rgba(255,193,7,0.4) 0%, rgba(255,193,7,0) 70%); border-radius: 50%; animation: float 15s linear infinite; z-index: 1; } @keyframes float { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-700px) translateX(100px); opacity: 0; } } .header { text-align: center; margin-bottom: 2rem; } .summer-sale { font-family: 'Playfair Display', serif; font-size: 4rem; font-weight: 700; background: linear-gradient(to right, #FF8A00, #FFC000); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 15px rgba(255, 165, 0, 0.6); animation: pulse 2s infinite, glow 2s infinite; letter-spacing: 1px; margin-bottom: 0.5rem; } .tagline { font-size: 1.5rem; font-weight: 300; color: #795548; margin-bottom: 1rem; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes glow { 0% { text-shadow: 0 0 10px rgba(255, 165, 0, 0.5); } 50% { text-shadow: 0 0 20px rgba(255, 165, 0, 0.8), 0 0 30px rgba(255, 165, 0, 0.4); } 100% { text-shadow: 0 0 10px rgba(255, 165, 0, 0.5); } } .discount-bubble { position: relative; background: #FF5722; color: white; font-size: 2.5rem; font-weight: 700; padding: 1.5rem; border-radius: 50%; display: flex; justify-content: center; align-items: center; width: 150px; height: 150px; box-shadow: 0 6px 20px rgba(255, 87, 34, 0.3); animation: float-bubble 6s ease-in-out infinite; transform: rotate(-10deg); margin: 1rem 0 2rem; } @keyframes float-bubble { 0%, 100% { transform: translateY(0) rotate(-10deg); } 50% { transform: translateY(-15px) rotate(-5deg); } } .discount-bubble::after { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border: 2px dashed white; border-radius: 50%; animation: rotate 30s linear infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .features { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2rem; } .feature { background: rgba(255, 255, 255, 0.7); padding: 1rem; border-radius: 8px; text-align: center; width: 140px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; } .feature:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); } .feature i { font-size: 1.75rem; color: #FF8A00; margin-bottom: 0.5rem; display: block; } .feature-text { font-size: 0.85rem; color: #795548; } .cta-button { background: linear-gradient(to right, #FF8A00, #FFC000); color: white; border: none; padding: 1rem 2.5rem; font-size: 1.25rem; font-weight: 600; border-radius: 50px; cursor: pointer; box-shadow: 0 6px 15px rgba(255, 138, 0, 0.3); transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 3; } .cta-button:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(255, 138, 0, 0.4); } .cta-button::after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; background: rgba(255, 255, 255, 0.3); border-radius: 50%; transform: scale(0); transition: transform 0.5s, opacity 0.3s; z-index: -1; } .cta-button:active::after { transform: scale(20); opacity: 0; } .timer { margin-top: 1.5rem; text-align: center; color: #795548; } .timer-text { font-size: 1rem; margin-bottom: 0.5rem; } .timer-digits { display: flex; justify-content: center; gap: 0.75rem; } .timer-unit { background: rgba(255, 255, 255, 0.7); padding: 0.5rem 0.75rem; border-radius: 6px; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .time-value { font-size: 1.25rem; color: #FF5722; } .time-label { font-size: 0.7rem; display: block; margin-top: 0.25rem; } @media (max-width: 600px) { .summer-sale { font-size: 3rem; } .tagline { font-size: 1.25rem; } .discount-bubble { width: 120px; height: 120px; font-size: 2rem; } .features { gap: 1rem; } .feature { width: 110px; padding: 0.75rem; } } @media (max-width: 400px) { .summer-sale { font-size: 2.5rem; } .features { flex-direction: column; align-items: center; } .feature { width: 80%; } } </style> </head> <body> <div class="container"> <div class="floating-elements" id="floating-elements"></div> <div class="banner"> <div class="header"> <h1 class="summer-sale">Summer Bliss</h1> <p class="tagline">Refresh your home with seasonal delights</p> </div> <div class="discount-bubble"> UP TO<br>60% OFF </div> <div class="features"> <div class="feature"> <i>🚚</i> <p class="feature-text">Free express delivery</p> </div> <div class="feature"> <i>🔄</i> <p class="feature-text">30-day returns</p> </div> <div class="feature"> <i>🎁</i> <p class="feature-text">Gift with purchase</p> </div> </div> <button class="cta-button" id="shop-now">Shop Collection</button> <div class="timer"> <p class="timer-text">Hurry! Sale ends in:</p> <div class="timer-digits" id="countdown"> <div class="timer-unit"> <span class="time-value" id="days">02</span> <span class="time-label">DAYS</span> </div> <div class="timer-unit"> <span class="time-value" id="hours">18</span> <span class="time-label">HRS</span> </div> <div class="timer-unit"> <span class="time-value" id="minutes">45</span> <span class="time-label">MINS</span> </div> <div class="timer-unit"> <span class="time-value" id="seconds">32</span> <span class="time-label">SECS</span> </div> </div> </div> </div> </div> <script> // Create floating elements const floatingContainer = document.getElementById('floating-elements'); for (let i = 0; i < 15; i++) { const element = document.createElement('div'); element.classList.add('floating-element'); // Random positioning element.style.left = `${Math.random() * 100}%`; element.style.top = `${Math.random() * 100}%`; element.style.width = `${Math.random() * 20 + 20}px`; element.style.height = element.style.width; // Random animation delay element.style.animationDelay = `${Math.random() * 15}s`; floatingContainer.appendChild(element); } // Countdown Timer function updateCountdown() { // For demo purposes, we'll just decrement the values let seconds = parseInt(document.getElementById('seconds').textContent); let minutes = parseInt(document.getElementById('minutes').textContent); let hours = parseInt(document.getElementById('hours').textContent); let days = parseInt(document.getElementById('days').textContent); seconds--; if (seconds < 0) { seconds = 59; minutes--; } if (minutes < 0) { minutes = 59; hours--; } if (hours < 0) { hours = 23; days--; } if (days < 0) { // Reset the timer when it reaches zero days = 2; hours = 18; minutes = 45; seconds = 32; } document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0'); document.getElementById('minutes').textContent = minutes.toString().padStart(2, '0'); document.getElementById('hours').textContent = hours.toString().padStart(2, '0'); document.getElementById('days').textContent = days.toString().padStart(2, '0'); } // Update the countdown every second setInterval(updateCountdown, 1000); // Button ripple effect document.getElementById('shop-now').addEventListener('click', function(e) { const button = e.currentTarget; const circle = document.createElement('span'); const diameter = Math.max(button.clientWidth, button.clientHeight); circle.style.width = circle.style.height = `${diameter}px`; circle.style.left = `${e.clientX - button.offsetLeft - diameter / 2}px`; circle.style.top = `${e.clientY - button.offsetTop - diameter / 2}px`; circle.classList.add('ripple'); // Visual feedback for click without actual navigation button.innerHTML = "Shopping..."; setTimeout(() => { button.innerHTML = "Shop Collection"; }, 800); }); </script> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NeoNex Gaming Portal</title> <style> @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rajdhani', sans-serif; } body { background-color: #0a0a0a; color: #f0f0f0; height: 700px; width: 700px; overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; } .game-portal { width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; position: relative; overflow: hidden; } .cursor-trail { position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: rgba(0, 0, 0, 0); pointer-events: none; z-index: 1; mix-blend-mode: screen; } .cursor-glow { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle, #ff00ff 0%, rgba(255, 0, 255, 0) 70%); pointer-events: none; z-index: 0; transform: translate(-50%, -50%); filter: blur(5px); } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; z-index: 2; } .logo { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 2.5rem; color: #fff; text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff; letter-spacing: 1px; transition: all 0.3s ease; } .nav { display: flex; gap: 15px; } .nav-item { font-size: 1.2rem; font-weight: 600; color: #a0a0a0; text-decoration: none; text-transform: uppercase; position: relative; transition: all 0.3s ease; cursor: pointer; } .nav-item:hover { color: #fff; text-shadow: 0 0 10px #ff00ff, 0 0 15px #ff00ff; } .nav-item::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, #00ffff, #ff00ff); transition: width 0.3s ease; } .nav-item:hover::after { width: 100%; } .main-content { display: flex; flex-grow: 1; gap: 20px; margin-bottom: 20px; z-index: 2; } .featured-games { flex: 2; display: flex; flex-direction: column; gap: 15px; } .section-title { font-family: 'Orbitron', sans-serif; font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 10px; text-shadow: 0 0 5px #00ffff; } .game-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; flex-grow: 1; } .game-card { position: relative; background: rgba(20, 20, 30, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; overflow: hidden; transition: all 0.3s ease; cursor: pointer; } .game-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255, 0, 255, 0.3) 0%, rgba(0, 255, 255, 0.3) 100%); opacity: 0; transition: opacity 0.3s ease; } .game-card:hover::before { opacity: 0.6; } .game-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 255, 255, 0.3); } .game-img { width: 100%; height: 100px; object-fit: cover; transition: all 0.3s ease; } .game-card:hover .game-img { transform: scale(1.05); } .game-details { padding: 10px; } .game-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 5px; transition: all 0.3s ease; } .game-card:hover .game-title { color: #fff; text-shadow: 0 0 10px #00ffff; } .game-genre { font-size: 0.9rem; color: #a0a0a0; } .side-content { flex: 1; display: flex; flex-direction: column; gap: 15px; } .player-stats { background: rgba(20, 20, 30, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 15px; flex-grow: 1; } .stat-row { display: flex; justify-content: space-between; margin-bottom: 10px; } .stat-label { color: #a0a0a0; } .stat-value { font-weight: 600; color: #fff; text-shadow: 0 0 5px #ff00ff; } .progress-bar { height: 5px; background: rgba(255, 255, 255, 0.1); border-radius: 5px; margin-top: 5px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, #00ffff, #ff00ff); width: 0; transition: width 1s ease; } .upcoming-tournaments { background: rgba(20, 20, 30, 0.6); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 15px; flex-grow: 1; } .tournament-item { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .tournament-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .tournament-name { font-weight: 600; margin-bottom: 5px; } .tournament-date { font-size: 0.9rem; color: #a0a0a0; } .tournament-prize { font-size: 0.9rem; color: #00ffff; text-shadow: 0 0 5px #00ffff; } .neon-effect { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: radial-gradient(circle at var(--x) var(--y), rgba(255, 0, 255, 0.3) 0%, rgba(0, 0, 0, 0) 60%); pointer-events: none; z-index: -1; } .grid-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(255, 0, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px); background-size: 40px 40px; z-index: -2; transform: perspective(500px) rotateX(30deg); transform-origin: center bottom; transition: all 0.5s ease; } .cta-button { display: inline-block; padding: 10px 20px; background: linear-gradient(90deg, #ff00ff, #00ffff); border: none; border-radius: 5px; color: #fff; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px; text-align: center; text-decoration: none; margin-top: 10px; position: relative; overflow: hidden; z-index: 1; } .cta-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); transition: left 0.5s ease; z-index: -1; } .cta-button:hover::before { left: 100%; } .cta-button:hover { box-shadow: 0 0 10px #ff00ff, 0 0 20px #00ffff; transform: translateY(-2px); } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } @media (max-width: 700px) { .header { flex-direction: column; align-items: flex-start; gap: 10px; } .logo { font-size: 2rem; } .nav { width: 100%; justify-content: space-between; } .main-content { flex-direction: column; } .game-grid { grid-template-columns: 1fr; } } </style> </head> <body> <div class="neon-effect"></div> <div class="grid-background"></div> <div class="cursor-glow"></div> <div class="game-portal"> <header class="header"> <div class="logo">NeoNex</div> <nav class="nav"> <div class="nav-item">Games</div> <div class="nav-item">Tournaments</div> <div class="nav-item">Leaderboard</div> <div class="nav-item">Profile</div> </nav> </header> <div class="main-content"> <div class="featured-games"> <h2 class="section-title">HOT RELEASES</h2> <div class="game-grid"> <div class="game-card"> <img src="https://images.unsplash.com/photo-1542751371-adc38448a05e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Cyber Nexus" class="game-img"> <div class="game-details"> <div class="game-title">Cyber Nexus</div> <div class="game-genre">Action RPG</div> </div> </div> <div class="game-card"> <img src="https://images.unsplash.com/photo-1612287230202-1ff1d85d1bdf?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Quantum Strike" class="game-img"> <div class="game-details"> <div class="game-title">Quantum Strike</div> <div class="game-genre">FPS</div> </div> </div> <div class="game-card"> <img src="https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Astral Racers" class="game-img"> <div class="game-details"> <div class="game-title">Astral Racers</div> <div class="game-genre">Racing</div> </div> </div> <div class="game-card"> <img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Neon Dynasty" class="game-img"> <div class="game-details"> <div class="game-title">Neon Dynasty</div> <div class="game-genre">Strategy</div> </div> </div> </div> </div> <div class="side-content"> <div class="player-stats"> <h2 class="section-title">YOUR STATS</h2> <div class="stat-row"> <span class="stat-label">Level</span> <span class="stat-value">42</span> </div> <div class="stat-row"> <span class="stat-label">XP</span> <span class="stat-value">8,745 / 10,000</span> </div> <div class="progress-bar"> <div class="progress-fill" style="width: 87%"></div> </div> <div class="stat-row"> <span class="stat-label">Win Rate</span> <span class="stat-value">68%</span> </div> <div class="progress-bar"> <div class="progress-fill" style="width: 68%"></div> </div> <div class="stat-row"> <span class="stat-label">Total Matches</span> <span class="stat-value">247</span> </div> <div class="cta-button">View Full Stats</div> </div> <div class="upcoming-tournaments"> <h2 class="section-title">TOURNAMENTS</h2> <div class="tournament-item"> <div class="tournament-name">Cyber League Finals</div> <div class="tournament-date">Oct 15, 2023 • 18:00 UTC</div> <div class="tournament-prize">$50,000 Prize Pool</div> </div> <div class="tournament-item"> <div class="tournament-name">Quantum Cup</div> <div class="tournament-date">Oct 22, 2023 • 15:00 UTC</div> <div class="tournament-prize">$25,000 Prize Pool</div> </div> <div class="tournament-item"> <div class="tournament-name">NeoNex Invitational</div> <div class="tournament-date">Nov 5, 2023 • 20:00 UTC</div> <div class="tournament-prize">$100,000 Prize Pool</div> </div> <div class="cta-button">Register Now</div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Initialize progress bars animation const progressBars = document.querySelectorAll('.progress-fill'); progressBars.forEach(bar => { const width = bar.style.width; bar.style.width = '0'; setTimeout(() => { bar.style.width = width; }, 300); }); // Cursor effects const cursor = document.querySelector('.cursor-glow'); const neonEffect = document.querySelector('.neon-effect'); const gridBackground = document.querySelector('.grid-background'); let trails = []; document.addEventListener('mousemove', function(e) { // Update cursor glow position cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; // Update neon effect neonEffect.style.setProperty('--x', e.clientX + 'px'); neonEffect.style.setProperty('--y', e.clientY + 'px'); // Create trail effect createTrail(e.clientX, e.clientY); // Tilt grid effect based on cursor position const xCenter = window.innerWidth / 2; const yCenter = window.innerHeight / 2; const xOffset = (e.clientX - xCenter) / xCenter * 10; const yOffset = (e.clientY - yCenter) / yCenter * 5; gridBackground.style.transform = `perspective(500px) rotateX(${30 - yOffset}deg) rotateY(${xOffset}deg)`; }); function createTrail(x, y) { const trail = document.createElement('div'); trail.className = 'cursor-trail'; trail.style.left = x + 'px'; trail.style.top = y + 'px'; // Random color between cyan and magenta const hue = Math.random() * 60 + 270; // 270-330 range (purple to pink) trail.style.boxShadow = `0 0 10px 5px hsla(${hue}, 100%, 70%, 0.8)`; document.body.appendChild(trail); // Animate the trail let size = 5; let opacity = 0.8; const animate = () => { size += 2; opacity -= 0.03; trail.style.width = size + 'px'; trail.style.height = size + 'px'; trail.style.opacity = opacity; if (opacity > 0) { requestAnimationFrame(animate); } else { trail.remove(); } }; requestAnimationFrame(animate); // Limit the number of trails trails.push(trail); if (trails.length > 20) { const oldTrail = trails.shift(); oldTrail.remove(); } } // Add hover effects to game cards const gameCards = document.querySelectorAll('.game-card'); gameCards.forEach(card => { card.addEventListener('mouseenter', function() { this.style.boxShadow = `0 0 20px rgba(0, 255, 255, 0.5), 0 0 30px rgba(255, 0, 255, 0.5)`; }); card.addEventListener('mouseleave', function() { this.style.boxShadow = 'none'; }); }); // Add pulse animation to logo const logo = document.querySelector('.logo'); logo.addEventListener('mouseenter', function() { this.style.animation = 'pulse 1s infinite'; this.style.textShadow = '0 0 15px #00ffff, 0 0 25px #00ffff, 0 0 35px #00ffff'; }); logo.addEventListener('mouseleave', function() { this.style.animation = 'none'; this.style.textShadow = '0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff'; }); // Make buttons interactive const buttons = document.querySelectorAll('.cta-button'); buttons.forEach(button => { button.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-5px)'; this.style.boxShadow = '0 0 15px #ff00ff, 0 0 25px #00ffff'; }); button.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0)'; this.style.boxShadow = 'none'; }); button.addEventListener('click', function(e) { e.preventDefault(); // Create ripple effect const ripple = document.createElement('div'); ripple.className = 'ripple'; const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; ripple.style.left = x + 'px'; ripple.style.top = y + 'px'; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); }); }); </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: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: #0f172a; color: #e2e8f0; width: 100%; height: 100%; overflow-x: hidden; padding: 2rem 1.5rem; } .container { max-width: 650px; margin: 0 auto; height: 100%; } .header { position: relative; opacity: 0; transform: translateY(20px); animation: fadeIn 1.2s ease-out forwards; } .logo { display: flex; align-items: center; gap: 12px; margin-bottom: 1.5rem; } .logo-icon { width: 32px; height: 32px; background: linear-gradient(135deg, #2563eb, #06b6d4); border-radius: 8px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 15px rgba(37, 99, 235, 0.4); } .logo-text { font-weight: 700; font-size: 20px; background: linear-gradient(135deg, #60a5fa, #a5f3fc); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.02em; } .headline { font-size: clamp(2.5rem, 8vw, 3.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 1.5rem; position: relative; } .glow-text { background: linear-gradient(135deg, #3b82f6, #06b6d4); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 20px rgba(59, 130, 246, 0.5); position: relative; opacity: 0; transform: translateY(10px); } .subtitle { font-size: 1.25rem; font-weight: 400; line-height: 1.5; color: #94a3b8; margin-bottom: 2.5rem; max-width: 90%; opacity: 0; transform: translateY(10px); animation: fadeUp 0.8s ease-out 0.6s forwards; } .featured-posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 3rem; opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s ease-out 1s forwards; } .post-card { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(100, 116, 139, 0.2); padding: 1.5rem; border-radius: 12px; transition: all 0.3s ease; cursor: pointer; position: relative; overflow: hidden; } .post-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(6, 182, 212, 0.1); border-color: rgba(59, 130, 246, 0.4); } .post-card:hover .post-title { background-position: right center; } .post-card:hover::before { opacity: 1; transform: translateY(0); } .post-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #3b82f6, #06b6d4); opacity: 0; transform: translateY(-3px); transition: all 0.3s ease; } .post-tag { display: inline-block; font-size: 0.75rem; font-weight: 600; color: #60a5fa; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.05em; } .post-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; background: linear-gradient(to right, #e2e8f0, #e2e8f0 50%, #3b82f6 50%); background-size: 200% 100%; background-position: left center; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transition: background-position 0.5s ease; line-height: 1.3; } .post-excerpt { font-size: 0.9rem; color: #94a3b8; line-height: 1.5; } .cursor-glow { position: fixed; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, rgba(6, 182, 212, 0) 70%); pointer-events: none; z-index: -1; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s ease; } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes glowPulse { 0% { opacity: 0.7; text-shadow: 0 0 10px rgba(59, 130, 246, 0.3); } 50% { opacity: 1; text-shadow: 0 0 25px rgba(59, 130, 246, 0.6), 0 0 50px rgba(6, 182, 212, 0.4); } 100% { opacity: 0.7; text-shadow: 0 0 10px rgba(59, 130, 246, 0.3); } } @media (max-width: 600px) { .featured-posts { grid-template-columns: 1fr; } .subtitle { max-width: 100%; } body { padding: 1.5rem 1rem; } } </style> </head> <body> <div class="cursor-glow" id="cursorGlow"></div> <div class="container"> <header class="header"> <div class="logo"> <div class="logo-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 19l9 2-9-18-9 18 9-2z"></path> </svg> </div> <div class="logo-text">TechLuminous</div> </div> <h1 class="headline"> Explore the <span class="glow-text" id="glowWord1">cutting-edge</span> of tech with <span class="glow-text" id="glowWord2">crystal-clear</span> insights </h1> <p class="subtitle">Stay ahead with our distilled analysis of emerging technologies, development frameworks, and digital innovation—all presented in minimalist elegance.</p> </header> <section class="featured-posts"> <article class="post-card"> <div class="post-tag">Development</div> <h2 class="post-title">WebGPU: The New Graphics API Transforming Browser Capabilities</h2> <p class="post-excerpt">How the successor to WebGL is enabling complex 3D applications and machine learning directly in browsers without plugins.</p> </article> <article class="post-card"> <div class="post-tag">AI Insights</div> <h2 class="post-title">Neural Network Architecture Patterns You Need to Know in 2023</h2> <p class="post-excerpt">A technical breakdown of transformer innovations improving efficiency for large language models and computer vision.</p> </article> </section> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Glow text animation sequence const glowElements = document.querySelectorAll('.glow-text'); glowElements.forEach((element, index) => { setTimeout(() => { element.style.animation = `fadeUp 0.8s ease-out forwards, glowPulse 3s ease-in-out 1s infinite`; }, 300 + (index * 200)); }); // Cursor glow effect const cursorGlow = document.getElementById('cursorGlow'); document.addEventListener('mousemove', (e) => { requestAnimationFrame(() => { cursorGlow.style.left = `${e.clientX}px`; cursorGlow.style.top = `${e.clientY}px`; cursorGlow.style.opacity = '1'; }); }); document.addEventListener('mouseleave', () => { cursorGlow.style.opacity = '0'; }); // Add subtle hover effect for post cards const postCards = document.querySelectorAll('.post-card'); postCards.forEach(card => { card.addEventListener('mouseenter', () => { glowElements.forEach(element => { element.style.textShadow = '0 0 30px rgba(59, 130, 246, 0.8), 0 0 60px rgba(6, 182, 212, 0.5)'; }); }); card.addEventListener('mouseleave', () => { glowElements.forEach(element => { element.style.textShadow = '0 0 20px rgba(59, 130, 246, 0.5)'; }); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>VIBE VERSE FESTIVAL 2024</title> <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;900&family=Poppins:wght@400;500;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #ff00cc; --secondary: #00ffcc; --accent1: #ff6600; --accent2: #00ccff; --dark: #111; --light: #fff; } body { font-family: 'Poppins', sans-serif; background-color: var(--dark); color: var(--light); overflow-x: hidden; min-height: 700px; max-height: 700px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--primary) var(--dark); } body::-webkit-scrollbar { width: 8px; } body::-webkit-scrollbar-track { background: var(--dark); } body::-webkit-scrollbar-thumb { background-color: var(--primary); border-radius: 20px; } .container { max-width: 700px; margin: 0 auto; padding: 0 15px; } header { position: relative; height: 100vh; max-height: 500px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; overflow: hidden; } .hero { position: relative; z-index: 2; } .glow-title { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 4rem; line-height: 1; margin-bottom: 1rem; text-transform: uppercase; color: var(--light); text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 40px var(--primary), 0 0 80px var(--primary); animation: pulse 2s infinite alternate; } .glow-subtitle { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.25rem; margin-bottom: 2rem; color: var(--light); text-shadow: 0 0 5px var(--secondary), 0 0 10px var(--secondary); letter-spacing: 2px; } .date-location { font-size: 1.25rem; margin-bottom: 2rem; color: var(--accent2); animation: fadeInUp 1s; } .cta-button { display: inline-block; padding: 12px 32px; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1rem; text-transform: uppercase; background: linear-gradient(45deg, var(--primary), var(--secondary)); color: var(--light); border: none; border-radius: 50px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 0 15px rgba(255, 0, 204, 0.5); letter-spacing: 1px; z-index: 1; } .cta-button:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, var(--accent1), var(--accent2)); opacity: 0; z-index: -1; transition: opacity 0.3s ease; } .cta-button:hover { transform: translateY(-5px); box-shadow: 0 5px 25px rgba(255, 0, 204, 0.7); } .cta-button:hover:before { opacity: 1; } .light-beams { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; } .beam { position: absolute; bottom: -100px; width: 30px; height: 700px; background: linear-gradient(to top, transparent, rgba(255, 0, 204, 0.3)); transform-origin: bottom; } .beam:nth-child(1) { left: 15%; transform: rotate(-30deg); animation: rotateLightBeam 8s infinite linear; background: linear-gradient(to top, transparent, rgba(255, 0, 204, 0.3)); } .beam:nth-child(2) { left: 35%; transform: rotate(-15deg); animation: rotateLightBeam 12s infinite linear; background: linear-gradient(to top, transparent, rgba(0, 255, 204, 0.3)); } .beam:nth-child(3) { left: 55%; transform: rotate(15deg); animation: rotateLightBeam 10s infinite linear; background: linear-gradient(to top, transparent, rgba(255, 102, 0, 0.3)); } .beam:nth-child(4) { left: 75%; transform: rotate(30deg); animation: rotateLightBeam 7s infinite linear; background: linear-gradient(to top, transparent, rgba(0, 204, 255, 0.3)); } .audio-visualizer { position: absolute; bottom: 0; left: 0; width: 100%; height: 75px; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 20px; z-index: 2; } .bar { width: 8px; height: 20px; background-color: var(--primary); border-radius: 5px 5px 0 0; opacity: 0.8; transform-origin: bottom; } section { padding: 3rem 0; } .section-title { font-family: 'Montserrat', sans-serif; font-size: 2rem; margin-bottom: 1.5rem; position: relative; display: inline-block; color: var(--light); text-shadow: 0 0 10px var(--secondary); } .artist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 20px; margin-bottom: 2rem; } .artist-card { background: rgba(255, 255, 255, 0.1); border-radius: 10px; overflow: hidden; transition: all 0.3s ease; position: relative; cursor: pointer; } .artist-card:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); } .artist-card:hover .artist-image { transform: scale(1.1); } .artist-image-container { height: 130px; overflow: hidden; } .artist-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .artist-info { padding: 10px; text-align: center; } .artist-name { font-size: 0.9rem; margin: 0; font-weight: 600; } .artist-genre { font-size: 0.7rem; color: var(--accent2); margin-top: 5px; } .schedule-container { max-height: 300px; overflow-y: auto; margin-bottom: 2rem; scrollbar-width: thin; scrollbar-color: var(--secondary) transparent; } .schedule-container::-webkit-scrollbar { width: 5px; } .schedule-container::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); } .schedule-container::-webkit-scrollbar-thumb { background-color: var(--secondary); border-radius: 20px; } .schedule-day { margin-bottom: 1.5rem; } .day-title { font-size: 1.25rem; margin-bottom: 0.75rem; color: var(--accent1); position: relative; display: inline-block; } .day-title:after { content: ''; position: absolute; left: 0; bottom: -5px; width: 100%; height: 2px; background: linear-gradient(to right, var(--primary), var(--secondary)); } .schedule-item { display: flex; margin-bottom: 0.75rem; background: rgba(255, 255, 255, 0.05); padding: 10px 15px; border-radius: 8px; transition: transform 0.3s ease, background 0.3s ease; } .schedule-item:hover { transform: translateX(10px); background: rgba(255, 255, 255, 0.1); } .schedule-time { min-width: 80px; font-weight: 600; color: var(--secondary); } .schedule-artist { font-weight: 500; } .schedule-stage { margin-left: auto; font-size: 0.85rem; color: var(--accent2); align-self: center; } .music-controls { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); border-radius: 50px; padding: 10px 20px; margin-top: 20px; border: 1px solid rgba(255, 255, 255, 0.1); } .music-info { flex: 1; text-align: center; } .music-title { font-size: 0.9rem; font-weight: 500; margin-bottom: 5px; } .music-artist { font-size: 0.75rem; color: var(--accent2); } .music-button { background: none; border: none; color: var(--light); font-size: 1.25rem; cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.3s ease; } .music-button:hover { background: rgba(255, 255, 255, 0.1); transform: scale(1.1); } .play-button { background: linear-gradient(45deg, var(--primary), var(--secondary)); box-shadow: 0 0 10px rgba(255, 0, 204, 0.5); } .play-button:hover { transform: scale(1.15); box-shadow: 0 0 15px rgba(255, 0, 204, 0.7); } .particle { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; } @keyframes pulse { 0% { text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 30px var(--primary), 0 0 40px var(--primary); } 100% { text-shadow: 0 0 15px var(--secondary), 0 0 30px var(--secondary), 0 0 45px var(--secondary), 0 0 60px var(--secondary); } } @keyframes rotateLightBeam { 0% { transform: rotate(var(--initRotate)); } 50% { transform: rotate(calc(var(--initRotate) + 60deg)); } 100% { transform: rotate(var(--initRotate)); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes visualize { 0%, 100% { height: var(--minHeight); } 50% { height: var(--maxHeight); } } @keyframes float { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--moveX), calc(var(--moveY) - 100px)); } } /* Responsive styles */ @media (max-width: 600px) { .glow-title { font-size: 2.5rem; } .glow-subtitle { font-size: 1rem; } .date-location { font-size: 1rem; } .artist-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); } .artist-image-container { height: 100px; } .section-title { font-size: 1.5rem; } .schedule-item { flex-direction: column; } .schedule-stage { margin-left: 0; margin-top: 5px; } } </style> </head> <body> <div class="container"> <header> <div class="light-beams"> <div class="beam"></div> <div class="beam"></div> <div class="beam"></div> <div class="beam"></div> </div> <div class="hero"> <h1 class="glow-title">VIBE VERSE</h1> <h2 class="glow-subtitle">MUSIC FESTIVAL 2024</h2> <p class="date-location">JULY 15-17 • ECHO VALLEY, CA</p> <button class="cta-button" id="tickets-btn">GET TICKETS</button> </div> <div class="audio-visualizer" id="visualizer"> <!-- Audio bars will be dynamically added --> </div> </header> <section id="lineup"> <h2 class="section-title">Featured Artists</h2> <div class="artist-grid"> <div class="artist-card"> <div class="artist-image-container"> <div class="artist-image" style="background-color: #ff00cc; height: 100%;"></div> </div> <div class="artist-info"> <h3 class="artist-name">Neon Pulse</h3> <p class="artist-genre">Electro Pop</p> </div> </div> <div class="artist-card"> <div class="artist-image-container"> <div class="artist-image" style="background-color: #00ccff; height: 100%;"></div> </div> <div class="artist-info"> <h3 class="artist-name">Vapor Wave</h3> <p class="artist-genre">Synth Wave</p> </div> </div> <div class="artist-card"> <div class="artist-image-container"> <div class="artist-image" style="background-color: #ff6600; height: 100%;"></div> </div> <div class="artist-info"> <h3 class="artist-name">Echo Rhythm</h3> <p class="artist-genre">Alt Rock</p> </div> </div> <div class="artist-card"> <div class="artist-image-container"> <div class="artist-image" style="background-color: #00ffcc; height: 100%;"></div> </div> <div class="artist-info"> <h3 class="artist-name">Beat Matrix</h3> <p class="artist-genre">EDM</p> </div> </div> </div> </section> <section id="schedule"> <h2 class="section-title">Festival Schedule</h2> <div class="schedule-container"> <div class="schedule-day"> <h3 class="day-title">Day 1 - July 15</h3> <div class="schedule-item"> <span class="schedule-time">2:00 PM</span> <span class="schedule-artist">Lunar Drive</span> <span class="schedule-stage">Nova Stage</span> </div> <div class="schedule-item"> <span class="schedule-time">4:30 PM</span> <span class="schedule-artist">Echo Rhythm</span> <span class="schedule-stage">Pulse Arena</span> </div> <div class="schedule-item"> <span class="schedule-time">7:00 PM</span> <span class="schedule-artist">Vapor Wave</span> <span class="schedule-stage">Nova Stage</span> </div> <div class="schedule-item"> <span class="schedule-time">9:30 PM</span> <span class="schedule-artist">Neon Pulse</span> <span class="schedule-stage">Pulse Arena</span> </div> </div> <div class="schedule-day"> <h3 class="day-title">Day 2 - July 16</h3> <div class="schedule-item"> <span class="schedule-time">2:00 PM</span> <span class="schedule-artist">Quantum Beats</span> <span class="schedule-stage">Pulse Arena</span> </div> <div class="schedule-item"> <span class="schedule-time">4:30 PM</span> <span class="schedule-artist">Beat Matrix</span> <span class="schedule-stage">Nova Stage</span> </div> <div class="schedule-item"> <span class="schedule-time">7:00 PM</span> <span class="schedule-artist">Synthwave Collective</span> <span class="schedule-stage">Pulse Arena</span> </div> <div class="schedule-item"> <span class="schedule-time">9:30 PM</span> <span class="schedule-artist">Aurora Lights</span> <span class="schedule-stage">Nova Stage</span> </div> </div> </div> <div class="music-controls"> <button class="music-button" id="prev-btn"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 20L9 12L19 4V20Z" fill="currentColor"/> <rect x="7" y="4" width="2" height="16" fill="currentColor"/> </svg> </button> <button class="music-button play-button" id="play-btn"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 5V19L19 12L8 5Z" fill="currentColor"/> </svg> </button> <button class="music-button" id="next-btn"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 4L15 12L5 20V4Z" fill="currentColor"/> <rect x="17" y="4" width="2" height="16" fill="currentColor"/> </svg> </button> <div class="music-info"> <div class="music-title">Festival Preview Mix</div> <div class="music-artist">DJ Cosmic Byte</div> </div> </div> </section> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Create audio visualizer bars const visualizer = document.getElementById('visualizer'); const barCount = 30; for (let i = 0; i < barCount; i++) { const bar = document.createElement('div'); bar.classList.add('bar'); // Generate random heights and animation durations const minHeight = 5 + Math.random() * 15; const maxHeight = minHeight + 20 + Math.random() * 40; const animDuration = 0.5 + Math.random() * 1; bar.style.setProperty('--minHeight', `${minHeight}px`); bar.style.setProperty('--maxHeight', `${maxHeight}px`); bar.style.animation = `visualize ${animDuration}s ease-in-out infinite`; bar.style.animationDelay = `${i * (1/barCount)}s`; // Color gradients for bars const hue = (i / barCount) * 180 + 180; bar.style.background = `hsl(${hue}, 100%, 60%)`; visualizer.appendChild(bar); } // Set initial rotation values for light beams const beams = document.querySelectorAll('.beam'); beams.forEach((beam, index) => { const initialRotate = -45 + (index * 30); beam.style.setProperty('--initRotate', `${initialRotate}deg`); }); // Interactive particle effect on button click const ticketsBtn = document.getElementById('tickets-btn'); ticketsBtn.addEventListener('click', function(e) { createParticles(e.clientX, e.clientY); // Pulse the glow title const glowTitle = document.querySelector('.glow-title'); glowTitle.style.animation = 'none'; glowTitle.offsetHeight; // Trigger reflow glowTitle.style.animation = 'pulse 2s infinite alternate'; }); // Play button toggle const playBtn = document.getElementById('play-btn'); let isPlaying = false; playBtn.addEventListener('click', function() { isPlaying = !isPlaying; if (isPlaying) { playBtn.innerHTML = ` <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect x="6" y="4" width="4" height="16" fill="currentColor"/> <rect x="14" y="4" width="4" height="16" fill="currentColor"/> </svg> `; // Intensify visualizer animation const bars = document.querySelectorAll('.bar'); bars.forEach(bar => { const currentMax = parseInt(bar.style.getPropertyValue('--maxHeight')); bar.style.setProperty('--maxHeight', `${currentMax * 1.5}px`); }); // Make light beams more active beams.forEach(beam => { beam.style.animationDuration = '5s'; }); } else { playBtn.innerHTML = ` <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 5V19L19 12L8 5Z" fill="currentColor"/> </svg> `; // Return visualizer to normal const bars = document.querySelectorAll('.bar'); bars.forEach(bar => { const currentMax = parseInt(bar.style.getPropertyValue('--maxHeight')); bar.style.setProperty('--maxHeight', `${currentMax / 1.5}px`); }); // Return light beams to normal beams.forEach(beam => { beam.style.animationDuration = '8s'; }); } }); // Particle effect function function createParticles(x, y) { const particleCount = 30; for (let i = 0; i < particleCount; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); // Random size between 5 and 15 const size = 5 + Math.random() * 10; // Random color const colors = ['var(--primary)', 'var(--secondary)', 'var(--accent1)', 'var(--accent2)']; const color = colors[Math.floor(Math.random() * colors.length)]; // Random movement const moveX = (Math.random() - 0.5) * 200; const moveY = (Math.random() - 0.5) * 200; // Set CSS variables for animation particle.style.setProperty('--moveX', `${moveX}px`); particle.style.setProperty('--moveY', `${moveY}px`); // Set styles particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.backgroundColor = color; particle.style.left = `${x}px`; particle.style.top = `${y}px`; particle.style.boxShadow = `0 0 ${size}px ${color}`; // Add animation particle.style.animation = `float ${1 + Math.random() * 2}s forwards`; document.body.appendChild(particle); // Remove particles after animation completes setTimeout(() => { particle.remove(); }, 3000); } } // Artist cards hover effect - changes background color of title const artistCards = document.querySelectorAll('.artist-card'); artistCards.forEach(card => { card.addEventListener('mouseenter', () => { const title = document.querySelector('.glow-title'); const artistColor = card.querySelector('.artist-image').style.backgroundColor; title.style.textShadow = ` 0 0 10px ${artistColor}, 0 0 20px ${artistColor}, 0 0 40px ${artistColor}, 0 0 80px ${artistColor} `; }); card.addEventListener('mouseleave', () => { const title = document.querySelector('.glow-title'); title.style.textShadow = ''; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ethereal Art Portfolio</title> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Raleway:wght@300;400;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --pastel-pink: #ffb6c1; --pastel-purple: #c8a2c8; --pastel-blue: #a2c8c8; --pastel-yellow: #f8e8a0; --pastel-mint: #a0f8c3; --text-color: #2a2a2a; --bg-color: #fefcf9; } body { font-family: 'Raleway', sans-serif; background-color: var(--bg-color); color: var(--text-color); overflow-x: hidden; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .container { width: 100%; max-width: 700px; padding: 1.5rem; display: flex; flex-direction: column; align-items: center; height: 700px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--pastel-purple) var(--bg-color); } .container::-webkit-scrollbar { width: 6px; } .container::-webkit-scrollbar-track { background: var(--bg-color); } .container::-webkit-scrollbar-thumb { background-color: var(--pastel-purple); border-radius: 20px; } .header { margin-bottom: 2.5rem; width: 100%; text-align: center; } .glow-text { font-family: 'Playfair Display', serif; font-size: 3rem; font-weight: 700; letter-spacing: 2px; background: linear-gradient(120deg, var(--pastel-pink), var(--pastel-purple), var(--pastel-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; display: inline-block; margin-bottom: 1rem; text-shadow: 0 0 10px rgba(255, 182, 193, 0.3); transition: all 0.5s ease; } .glow-text::after { content: attr(data-text); position: absolute; left: 0; top: 0; z-index: -1; background: linear-gradient(120deg, var(--pastel-pink), var(--pastel-purple), var(--pastel-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: blur(10px); opacity: 0; transition: opacity 0.8s ease, filter 0.8s ease; } .glow-text:hover::after { opacity: 0.7; filter: blur(15px); } .subtitle { font-size: 1.1rem; font-weight: 300; margin-bottom: 1rem; color: #666; max-width: 80%; margin: 0 auto; line-height: 1.6; } .categories { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 1.5rem 0; } .category { padding: 0.5rem 1.2rem; border-radius: 30px; background: linear-gradient(120deg, var(--pastel-pink), var(--pastel-purple)); color: white; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; } .category:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(200, 162, 200, 0.4); } .category::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(120deg, var(--pastel-purple), var(--pastel-blue)); opacity: 0; transition: opacity 0.5s ease; } .category:hover::before { opacity: 1; } .category span { position: relative; z-index: 1; } .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; width: 100%; padding: 0.5rem; } .portfolio-item { position: relative; border-radius: 12px; overflow: hidden; cursor: pointer; aspect-ratio: 3/4; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .portfolio-item:hover { transform: scale(1.03); } .portfolio-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .portfolio-item:hover img { transform: scale(1.1); } .portfolio-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; opacity: 0; transition: opacity 0.5s ease; } .portfolio-item:hover .portfolio-overlay { opacity: 1; } .portfolio-title { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: white; margin-bottom: 0.5rem; position: relative; transform: translateY(20px); opacity: 0; transition: transform 0.5s ease, opacity 0.5s ease; transition-delay: 0.1s; } .portfolio-description { font-size: 0.85rem; color: rgba(255, 255, 255, 0.8); transform: translateY(20px); opacity: 0; transition: transform 0.5s ease, opacity 0.5s ease; transition-delay: 0.2s; } .portfolio-item:hover .portfolio-title, .portfolio-item:hover .portfolio-description { transform: translateY(0); opacity: 1; } .hand-drawn { position: relative; display: inline-block; } .hand-drawn::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--pastel-pink), var(--pastel-purple), var(--pastel-blue)); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease; } .hand-drawn:hover::after { transform: scaleX(1); } .footer { margin-top: 2rem; text-align: center; padding: 1rem 0; width: 100%; } .contact-text { font-size: 1rem; color: #666; margin-bottom: 1rem; } .social-links { display: flex; justify-content: center; gap: 1.5rem; margin-top: 1rem; } .social-icon { font-size: 1.5rem; color: var(--text-color); transition: transform 0.3s ease, color 0.3s ease; position: relative; } .social-icon:hover { transform: translateY(-5px); } .social-icon::before { content: ''; position: absolute; width: 100%; height: 100%; background: linear-gradient(120deg, var(--pastel-pink), var(--pastel-purple)); border-radius: 50%; z-index: -1; opacity: 0; transform: scale(0); transition: transform 0.5s ease, opacity 0.5s ease; } .social-icon:hover::before { opacity: 0.2; transform: scale(1.5); } .scroll-icon { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); font-size: 1.5rem; color: var(--pastel-purple); animation: bounce 2s infinite; opacity: 0.7; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); } 40% { transform: translateY(-10px) translateX(-50%); } 60% { transform: translateY(-5px) translateX(-50%); } } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; } .modal.open { opacity: 1; pointer-events: auto; } .modal-content { width: 90%; max-width: 600px; max-height: 80vh; background-color: white; border-radius: 12px; overflow: hidden; position: relative; transform: translateY(20px); opacity: 0; transition: transform 0.5s ease, opacity 0.5s ease; } .modal.open .modal-content { transform: translateY(0); opacity: 1; } .modal-image { width: 100%; height: auto; max-height: 400px; object-fit: cover; } .modal-details { padding: 2rem; } .modal-title { font-family: 'Playfair Display', serif; font-size: 1.8rem; margin-bottom: 1rem; background: linear-gradient(120deg, var(--pastel-pink), var(--pastel-purple), var(--pastel-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; } .modal-description { font-size: 1rem; line-height: 1.6; margin-bottom: 1.5rem; color: #444; } .modal-close { position: absolute; top: 1rem; right: 1rem; font-size: 1.5rem; color: white; background: none; border: none; cursor: pointer; z-index: 10; transition: transform 0.3s ease; } .modal-close:hover { transform: rotate(90deg); } @media (max-width: 600px) { .glow-text { font-size: 2.2rem; } .subtitle { font-size: 0.95rem; } .portfolio-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; } .modal-details { padding: 1.5rem; } .modal-title { font-size: 1.5rem; } } /* Art-themed cursor */ .custom-cursor { position: fixed; width: 20px; height: 20px; border-radius: 50%; background-color: rgba(200, 162, 200, 0.3); pointer-events: none; mix-blend-mode: difference; z-index: 9999; transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s, background-color 0.3s; } .custom-cursor.hover { width: 50px; height: 50px; background-color: rgba(255, 182, 193, 0.2); } </style> </head> <body> <div class="custom-cursor"></div> <div class="container"> <header class="header"> <h1 class="glow-text" data-text="Lumina Art">Lumina Art</h1> <p class="subtitle">Exploring the boundaries between light and color through a visual journey that balances ethereal concepts with tangible emotions.</p> <div class="categories"> <div class="category"><span>Mixed Media</span></div> <div class="category"><span>Digital Art</span></div> <div class="category"><span>Illustration</span></div> <div class="category"><span>Painting</span></div> </div> </header> <div class="portfolio-grid"> <div class="portfolio-item" data-title="Nebula Dreams" data-description="A mixed media piece exploring the luminescent qualities of cosmic phenomena, using watercolor and digital enhancement to create depth."> <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&q=80&w=600" alt="Nebula Dreams"> <div class="portfolio-overlay"> <h3 class="portfolio-title">Nebula Dreams</h3> <p class="portfolio-description">Mixed Media, 2023</p> </div> </div> <div class="portfolio-item" data-title="Prismatic Whispers" data-description="This digital artwork examines how light fractures through different mediums, creating a symphony of colors that speak to emotional resonance."> <img src="https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?auto=format&fit=crop&q=80&w=600" alt="Prismatic Whispers"> <div class="portfolio-overlay"> <h3 class="portfolio-title">Prismatic Whispers</h3> <p class="portfolio-description">Digital Art, 2023</p> </div> </div> <div class="portfolio-item" data-title="Ephemeral Bloom" data-description="Watercolor technique meets contemporary motifs in this series of botanical illustrations that capture the fragile beauty of transitional moments."> <img src="https://images.unsplash.com/photo-1579783900882-c0d3dad7b119?auto=format&fit=crop&q=80&w=600" alt="Ephemeral Bloom"> <div class="portfolio-overlay"> <h3 class="portfolio-title">Ephemeral Bloom</h3> <p class="portfolio-description">Illustration, 2022</p> </div> </div> <div class="portfolio-item" data-title="Chromatic Symphony" data-description="An exploration of how color harmonies can evoke specific emotional responses, drawing inspiration from musical composition structure."> <img src="https://images.unsplash.com/photo-1549490349-8643362247b5?auto=format&fit=crop&q=80&w=600" alt="Chromatic Symphony"> <div class="portfolio-overlay"> <h3 class="portfolio-title">Chromatic Symphony</h3> <p class="portfolio-description">Painting, 2023</p> </div> </div> <div class="portfolio-item" data-title="Lucid Memories" data-description="This series captures the ethereal quality of remembered moments, using soft focus techniques and gradient color treatments to mirror cognitive processes."> <img src="https://images.unsplash.com/photo-1600359746599-74a2413737a3?auto=format&fit=crop&q=80&w=600" alt="Lucid Memories"> <div class="portfolio-overlay"> <h3 class="portfolio-title">Lucid Memories</h3> <p class="portfolio-description">Mixed Media, 2022</p> </div> </div> <div class="portfolio-item" data-title="Gossamer Threads" data-description="A delicate exploration of connection and separation through abstract line work and transparent color layering, inspired by human relationships."> <img src="https://images.unsplash.com/photo-1604076913837-52ab5629fba9?auto=format&fit=crop&q=80&w=600" alt="Gossamer Threads"> <div class="portfolio-overlay"> <h3 class="portfolio-title">Gossamer Threads</h3> <p class="portfolio-description">Digital Art, 2023</p> </div> </div> </div> <footer class="footer"> <p class="contact-text">Interested in commissioning artwork or collaborating on a project?</p> <div class="social-links"> <div class="social-icon"> <span class="hand-drawn">Ig</span> </div> <div class="social-icon"> <span class="hand-drawn">Be</span> </div> <div class="social-icon"> <span class="hand-drawn">Tw</span> </div> <div class="social-icon"> <span class="hand-drawn">Dr</span> </div> </div> </footer> </div> <div class="modal"> <button class="modal-close">×</button> <div class="modal-content"> <img class="modal-image" src="" alt=""> <div class="modal-details"> <h2 class="modal-title"></h2> <p class="modal-description"></p> </div> </div> </div> <script> // Custom cursor const cursor = document.querySelector('.custom-cursor'); const hoverElements = document.querySelectorAll('.portfolio-item, .category, .social-icon, .glow-text, .hand-drawn'); document.addEventListener('mousemove', (e) => { cursor.style.left = `${e.clientX}px`; cursor.style.top = `${e.clientY}px`; }); hoverElements.forEach(element => { element.addEventListener('mouseenter', () => { cursor.classList.add('hover'); }); element.addEventListener('mouseleave', () => { cursor.classList.remove('hover'); }); }); // Modal functionality const portfolioItems = document.querySelectorAll('.portfolio-item'); const modal = document.querySelector('.modal'); const modalClose = document.querySelector('.modal-close'); const modalImage = document.querySelector('.modal-image'); const modalTitle = document.querySelector('.modal-title'); const modalDescription = document.querySelector('.modal-description'); portfolioItems.forEach(item => { item.addEventListener('click', () => { const image = item.querySelector('img'); const title = item.getAttribute('data-title'); const description = item.getAttribute('data-description'); modalImage.src = image.src; modalImage.alt = image.alt; modalTitle.textContent = title; modalDescription.textContent = description; modal.classList.add('open'); document.body.style.overflow = 'hidden'; }); }); modalClose.addEventListener('click', () => { modal.classList.remove('open'); document.body.style.overflow = 'auto'; }); modal.addEventListener('click', (e) => { if (e.target === modal) { modal.classList.remove('open'); document.body.style.overflow = 'auto'; } }); // Text animation for the main title const glowText = document.querySelector('.glow-text'); const originalText = glowText.textContent; let charIndex = 0; function typeText() { if (charIndex < originalText.length) { glowText.textContent = originalText.substring(0, charIndex + 1); charIndex++; setTimeout(typeText, 150); } else { setTimeout(() => { charIndex = 0; glowText.textContent = ''; typeText(); }, 5000); } } // Uncomment to enable typing animation // typeText(); // Category hover effect document.querySelectorAll('.category').forEach(category => { category.addEventListener('mouseenter', function() { let originalBackground = this.style.background; this.style.background = `linear-gradient(120deg, var(--pastel-blue), var(--pastel-purple))`; setTimeout(() => { this.style.background = originalBackground; }, 500); }); }); // Initialize with fade-in document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.portfolio-item, .glow-text, .subtitle, .category').forEach((el, index) => { setTimeout(() => { el.style.opacity = '0'; el.style.transform = 'translateY(20px)'; setTimeout(() => { el.style.transition = 'opacity 0.8s ease, transform 0.8s ease'; el.style.opacity = '1'; el.style.transform = 'translateY(0)'; }, 100); }, index * 100); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Educational Glow Platform</title> <style> :root { --primary: #4285F4; /* Google blue */ --secondary: #0F9D58; /* Google green */ --accent: #F4B400; /* Google yellow */ --danger: #DB4437; /* Google red */ --light: #E8F0FE; --dark: #202124; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); padding: 20px; overflow-x: hidden; } .container { width: 100%; max-width: 650px; background-color: white; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; position: relative; z-index: 1; } .header { background: var(--light); padding: 25px; text-align: center; position: relative; } .header h1 { font-size: 2.2rem; color: var(--dark); margin-bottom: 10px; position: relative; display: inline-block; } .header h1::after { content: ""; position: absolute; bottom: -8px; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 3px; } .header p { color: #5f6368; font-size: 1.1rem; } .content { padding: 30px; } .subjects { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 20px; } .glow-text { font-size: 1.4rem; font-weight: 600; padding: 15px 20px; border-radius: 12px; transition: all 0.3s ease; cursor: pointer; text-align: center; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: 100px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); } .glow-text::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); transform: translateX(-100%); transition: transform 0.4s ease; } .glow-text:hover::before { transform: translateX(0); } .math { color: var(--primary); background-color: rgba(66, 133, 244, 0.1); text-shadow: 0 0 8px rgba(66, 133, 244, 0.2); } .math:hover { color: white; background-color: var(--primary); text-shadow: 0 0 15px rgba(66, 133, 244, 0.8); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(66, 133, 244, 0.3); } .science { color: var(--secondary); background-color: rgba(15, 157, 88, 0.1); text-shadow: 0 0 8px rgba(15, 157, 88, 0.2); } .science:hover { color: white; background-color: var(--secondary); text-shadow: 0 0 15px rgba(15, 157, 88, 0.8); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(15, 157, 88, 0.3); } .literature { color: var(--accent); background-color: rgba(244, 180, 0, 0.1); text-shadow: 0 0 8px rgba(244, 180, 0, 0.2); } .literature:hover { color: white; background-color: var(--accent); text-shadow: 0 0 15px rgba(244, 180, 0, 0.8); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(244, 180, 0, 0.3); } .history { color: var(--danger); background-color: rgba(219, 68, 55, 0.1); text-shadow: 0 0 8px rgba(219, 68, 55, 0.2); } .history:hover { color: white; background-color: var(--danger); text-shadow: 0 0 15px rgba(219, 68, 55, 0.8); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(219, 68, 55, 0.3); } .featured { margin-top: 30px; } .featured h2 { font-size: 1.5rem; color: var(--dark); margin-bottom: 15px; position: relative; display: inline-block; } .featured h2::after { content: ""; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--primary), transparent); border-radius: 2px; } .featured-card { background: white; border-radius: 12px; padding: 20px; margin-top: 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); border-left: 4px solid var(--primary); position: relative; overflow: hidden; } .featured-card h3 { font-size: 1.2rem; color: var(--primary); margin-bottom: 10px; transition: all 0.3s ease; text-shadow: 0 0 5px rgba(66, 133, 244, 0.1); } .featured-card:hover h3 { transform: translateX(5px); text-shadow: 0 0 8px rgba(66, 133, 244, 0.4); } .featured-card p { color: #5f6368; line-height: 1.5; } .featured-card .badge { position: absolute; top: 15px; right: 15px; background: var(--light); color: var(--primary); padding: 5px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .featured-card:hover .badge { background: var(--primary); color: white; box-shadow: 0 2px 8px rgba(66, 133, 244, 0.4); } .progress-container { margin-top: 40px; } .progress-container h2 { font-size: 1.5rem; color: var(--dark); margin-bottom: 15px; position: relative; display: inline-block; } .progress-container h2::after { content: ""; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--secondary), transparent); border-radius: 2px; } .progress-bar { width: 100%; height: 18px; background: var(--light); border-radius: 10px; margin: 10px 0; position: relative; overflow: hidden; } .progress-text { display: flex; justify-content: space-between; font-size: 0.9rem; color: #5f6368; } .progress { position: absolute; top: 0; left: 0; height: 100%; border-radius: 10px; transition: width 1s cubic-bezier(0.65, 0, 0.35, 1); } .math-progress { background: linear-gradient(90deg, var(--primary), rgba(66, 133, 244, 0.7)); box-shadow: 0 0 10px rgba(66, 133, 244, 0.5); width: 0; } .science-progress { background: linear-gradient(90deg, var(--secondary), rgba(15, 157, 88, 0.7)); box-shadow: 0 0 10px rgba(15, 157, 88, 0.5); width: 0; } .literature-progress { background: linear-gradient(90deg, var(--accent), rgba(244, 180, 0, 0.7)); box-shadow: 0 0 10px rgba(244, 180, 0, 0.5); width: 0; } .history-progress { background: linear-gradient(90deg, var(--danger), rgba(219, 68, 55, 0.7)); box-shadow: 0 0 10px rgba(219, 68, 55, 0.5); width: 0; } .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; } .particle { position: absolute; border-radius: 50%; opacity: 0.5; pointer-events: none; } @media (max-width: 600px) { .header h1 { font-size: 1.8rem; } .header p { font-size: 1rem; } .content { padding: 20px; } .subjects { grid-template-columns: 1fr; } .glow-text { font-size: 1.2rem; min-height: 80px; } } /* Animation for shake effect */ @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } } .shake { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; } </style> </head> <body> <div class="container"> <div class="header"> <h1>Luminous Learning</h1> <p>Illuminate your educational journey with interactive content</p> </div> <div class="content"> <div class="subjects"> <div class="glow-text math" data-subject="math"> Algebra & Calculus <span class="sub-text"></span> </div> <div class="glow-text science" data-subject="science"> Chemistry & Physics <span class="sub-text"></span> </div> <div class="glow-text literature" data-subject="literature"> World Literature <span class="sub-text"></span> </div> <div class="glow-text history" data-subject="history"> Ancient Civilizations <span class="sub-text"></span> </div> </div> <div class="featured"> <h2>Today's Featured Lesson</h2> <div class="featured-card"> <h3>Quadratic Equations Made Simple</h3> <div class="badge">Math</div> <p>Master the art of solving quadratic equations using the quadratic formula, factoring, and completing the square. Includes interactive examples and step-by-step visualizations.</p> </div> </div> <div class="progress-container"> <h2>Your Learning Progress</h2> <div class="progress-text"> <span>Algebra & Calculus</span> <span class="percentage">0%</span> </div> <div class="progress-bar"> <div class="progress math-progress" data-target="75"></div> </div> <div class="progress-text"> <span>Chemistry & Physics</span> <span class="percentage">0%</span> </div> <div class="progress-bar"> <div class="progress science-progress" data-target="60"></div> </div> <div class="progress-text"> <span>World Literature</span> <span class="percentage">0%</span> </div> <div class="progress-bar"> <div class="progress literature-progress" data-target="90"></div> </div> <div class="progress-text"> <span>Ancient Civilizations</span> <span class="percentage">0%</span> </div> <div class="progress-bar"> <div class="progress history-progress" data-target="45"></div> </div> </div> </div> <div class="particles"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Subject hover effects with dynamic content const subjects = document.querySelectorAll('.glow-text'); const subjectContent = { math: "Master key concepts with interactive visualizations", science: "Explore natural phenomena through experiments", literature: "Analyze classic and contemporary texts", history: "Discover the stories that shaped our world" }; subjects.forEach(subject => { const subText = subject.querySelector('.sub-text'); const subjectType = subject.dataset.subject; subject.addEventListener('mouseenter', () => { subText.textContent = subjectContent[subjectType]; subText.style.opacity = '1'; subText.style.fontSize = '0.8rem'; subText.style.marginTop = '8px'; subText.style.fontWeight = '400'; subject.style.height = 'auto'; }); subject.addEventListener('mouseleave', () => { subText.style.opacity = '0'; subText.style.fontSize = '0'; subText.style.marginTop = '0'; subject.style.height = null; }); subject.addEventListener('click', function() { this.classList.add('shake'); setTimeout(() => { this.classList.remove('shake'); }, 500); // Update featured content based on clicked subject const featuredTitle = document.querySelector('.featured-card h3'); const featuredBadge = document.querySelector('.featured-card .badge'); const featuredContent = document.querySelector('.featured-card p'); switch(subjectType) { case 'math': featuredTitle.textContent = 'Quadratic Equations Made Simple'; featuredBadge.textContent = 'Math'; featuredBadge.style.background = 'rgba(66, 133, 244, 0.1)'; featuredBadge.style.color = 'var(--primary)'; featuredContent.textContent = 'Master the art of solving quadratic equations using the quadratic formula, factoring, and completing the square. Includes interactive examples and step-by-step visualizations.'; break; case 'science': featuredTitle.textContent = 'Chemical Reactions in Daily Life'; featuredBadge.textContent = 'Science'; featuredBadge.style.background = 'rgba(15, 157, 88, 0.1)'; featuredBadge.style.color = 'var(--secondary)'; featuredContent.textContent = 'Discover how chemistry shapes our everyday experiences, from cooking to cleaning. Learn about oxidation, reduction, and catalysts through practical demonstrations.'; break; case 'literature': featuredTitle.textContent = 'Symbolism in Modern Poetry'; featuredBadge.textContent = 'Literature'; featuredBadge.style.background = 'rgba(244, 180, 0, 0.1)'; featuredBadge.style.color = 'var(--accent)'; featuredContent.textContent = 'Decode the intricate symbolism used by contemporary poets to convey deeper meanings. Analyze works by Amanda Gorman, Ocean Vuong, and other prominent voices.'; break; case 'history': featuredTitle.textContent = 'The Rise and Fall of the Roman Empire'; featuredBadge.textContent = 'History'; featuredBadge.style.background = 'rgba(219, 68, 55, 0.1)'; featuredBadge.style.color = 'var(--danger)'; featuredContent.textContent = 'Trace the journey of Rome from a small city-state to a vast empire and understand the factors that contributed to its eventual collapse. Includes interactive timeline and maps.'; break; } }); }); // Animated progress bars setTimeout(() => { const progressBars = document.querySelectorAll('.progress'); const percentageTexts = document.querySelectorAll('.percentage'); progressBars.forEach((progressBar, index) => { const target = progressBar.getAttribute('data-target'); progressBar.style.width = target + '%'; // Animate percentage text let startPercentage = 0; const duration = 1500; // ms const interval = 10; // ms const step = parseInt(target) / (duration / interval); const updatePercentage = () => { startPercentage += step; if(startPercentage > parseInt(target)) { startPercentage = parseInt(target); clearInterval(timer); } percentageTexts[index].textContent = Math.round(startPercentage) + '%'; }; const timer = setInterval(updatePercentage, interval); }); }, 500); // Create background particles const particlesContainer = document.querySelector('.particles'); const colors = ['#4285F4', '#0F9D58', '#F4B400', '#DB4437']; for(let i = 0; i < 50; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); // Random properties const size = Math.random() * 10 + 5; const color = colors[Math.floor(Math.random() * colors.length)]; const left = Math.random() * 100; const top = Math.random() * 100; const duration = Math.random() * 20 + 10; const delay = Math.random() * 5; // Style the particle particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.backgroundColor = color; particle.style.left = `${left}%`; particle.style.top = `${top}%`; particle.style.opacity = '0.2'; // Add animation particle.style.animation = `float ${duration}s ease-in-out ${delay}s infinite`; // Add keyframes dynamically const keyframes = ` @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.2; } 50% { transform: translate(${Math.random() * 30 - 15}px, ${Math.random() * 30 - 15}px) scale(1.2); opacity: 0.5; } } `; const styleSheet = document.createElement('style'); styleSheet.type = 'text/css'; styleSheet.innerText = keyframes; document.head.appendChild(styleSheet); particlesContainer.appendChild(particle); } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LUMIÈRE - Fine Jewelry</title> <style> @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500&display=swap'); :root { --gold: #d4af37; --light-gold: #f8e9c0; --dark-gold: #8c7223; --cream: #f9f7f2; --charcoal: #333; --transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Montserrat', sans-serif; background-color: #0c0c0e; color: var(--cream); overflow-x: hidden; line-height: 1.6; height: 700px; width: 700px; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; } .container { width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; position: relative; overflow: hidden; } /* Luxury metallic gradient background */ .bg-gradient { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 30% 40%, rgba(20, 20, 22, 0.8), rgba(8, 8, 10, 1)), url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDEwIDAgTCAwIDAgTCAwIDEwIiBmaWxsPSJub25lIiBzdHJva2U9InJnYmEoMjEyLCAxNzUsIDU1LCAwLjA1KSIgc3Ryb2tlLXdpZHRoPSIwLjUiPjwvcGF0aD48L3BhdHRlcm4+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JpZCkiPjwvcmVjdD48L3N2Zz4='); z-index: -1; } /* Header section */ header { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid rgba(212, 175, 55, 0.2); } .logo { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 24px; letter-spacing: 3px; color: var(--cream); position: relative; transition: var(--transition); } .logo:after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); transition: var(--transition); opacity: 0; } .logo:hover:after { opacity: 1; } nav ul { display: flex; list-style: none; } nav ul li { margin-left: 25px; } nav ul li a { color: var(--cream); text-decoration: none; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; position: relative; transition: var(--transition); } nav ul li a:after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 1px; background: var(--gold); transition: var(--transition); } nav ul li a:hover { color: var(--gold); } nav ul li a:hover:after { width: 100%; } /* Hero section */ .hero { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; flex: 1; padding: 40px 20px; position: relative; } h1 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 3.5rem; margin-bottom: 20px; letter-spacing: 4px; line-height: 1.1; position: relative; color: transparent; background: linear-gradient(90deg, rgba(212,175,55,0.8), rgba(248,233,192,1), rgba(212,175,55,0.8)); -webkit-background-clip: text; background-clip: text; /* Glow effect */ text-shadow: 0 0 15px rgba(212, 175, 55, 0.3); animation: titleGlow 8s infinite alternate; } @keyframes titleGlow { 0%, 100% { text-shadow: 0 0 10px rgba(212, 175, 55, 0.2); } 50% { text-shadow: 0 0 20px rgba(212, 175, 55, 0.4), 0 0 40px rgba(212, 175, 55, 0.1); } } .subtitle { font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 0.9rem; letter-spacing: 2px; text-transform: uppercase; color: rgba(248, 233, 192, 0.8); margin-bottom: 40px; } .cta-button { display: inline-block; margin-top: 30px; padding: 12px 30px; border: 1px solid var(--gold); background-color: transparent; color: var(--gold); text-decoration: none; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; transition: var(--transition); position: relative; overflow: hidden; z-index: 1; } .cta-button:before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent); transition: var(--transition); z-index: -1; } .cta-button:hover { color: var(--cream); border-color: var(--light-gold); } .cta-button:hover:before { left: 100%; } /* Features section */ .features { display: flex; justify-content: space-between; margin-top: 20px; margin-bottom: 40px; } .feature { text-align: center; padding: 15px; width: 30%; position: relative; transition: var(--transition); } .feature:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid transparent; background: linear-gradient(135deg, transparent 97%, var(--gold)) top left/100% 1px no-repeat, linear-gradient(225deg, var(--gold) 3%, transparent) top right/1px 100% no-repeat, linear-gradient(315deg, transparent 97%, var(--gold)) bottom right/100% 1px no-repeat, linear-gradient(45deg, var(--gold) 3%, transparent) bottom left/1px 100% no-repeat; opacity: 0; transition: opacity 0.5s ease; } .feature:hover:before { opacity: 1; } .feature-icon { color: var(--gold); font-size: 24px; margin-bottom: 15px; } .feature h3 { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 18px; margin-bottom: 10px; color: var(--light-gold); } .feature p { font-size: 13px; color: rgba(249, 247, 242, 0.7); } /* Floating element */ .floating-element { position: absolute; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle at center, rgba(212, 175, 55, 0.1), transparent 70%); filter: blur(20px); animation: float 15s infinite ease-in-out; pointer-events: none; z-index: -1; } @keyframes float { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(50px, -30px); } 50% { transform: translate(100px, 20px); } 75% { transform: translate(30px, 50px); } } /* Footer */ footer { border-top: 1px solid rgba(212, 175, 55, 0.2); padding: 20px 0; text-align: center; font-size: 12px; color: rgba(249, 247, 242, 0.5); letter-spacing: 1px; position: relative; } .product-image-container { position: relative; margin: 30px auto; width: 250px; height: 250px; display: flex; justify-content: center; align-items: center; } .product-image { width: 100%; height: 100%; background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUwIiBoZWlnaHQ9IjI1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxjaXJjbGUgZmlsbD0iIzBDMEMwRSIgY3g9IjEyNSIgY3k9IjEyNSIgcj0iMTI1Ii8+PGNpcmNsZSBzdHJva2U9IiNENEFGMzciIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWRhc2hhcnJheT0iMywyIiBvcGFjaXR5PSIuNSIgY3g9IjEyNSIgY3k9IjEyNSIgcj0iMTAwIi8+PHBhdGggZD0iTTEzNSw3NSBDMTY1LDc1IDE5MCwxMDAgMTkwLDEzMCBDMTkwLDE2MCAxNjUsMTg1IDEzNSwxODUgQzEwNSwxODUgODAsMTYwIDgwLDEzMCBDODAsMTAwIDEwNSw3NSAxMzUsNzUgWiIgc3Ryb2tlPSIjRDRBRjM3IiBzdHJva2Utd2lkdGg9IjEuNSIgb3BhY2l0eT0iLjciLz48Y2lyY2xlIGZpbGw9IiNENEFGMzciIGZpbGwtb3BhY2l0eT0iLjMiIGN4PSIxMjUiIGN5PSIxMjUiIHI9IjM1Ii8+PGNpcmNsZSBzdHJva2U9IiNEOEM3ODAiIHN0cm9rZS13aWR0aD0iMiIgY3g9IjEyNSIgY3k9IjEyNSIgcj0iMTUiLz48L2c+PC9zdmc+') no-repeat center center; position: relative; transition: var(--transition); } .product-image:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at center, rgba(212, 175, 55, 0.3), transparent 70%); filter: blur(10px); opacity: 0; transition: opacity 0.8s ease; } .product-image-container:hover .product-image { transform: scale(1.05); } .product-image-container:hover .product-image:before { opacity: 1; } /* Responsive styles */ @media (max-width: 600px) { h1 { font-size: 2.5rem; } .subtitle { font-size: 0.8rem; } nav ul li { margin-left: 15px; } nav ul li a { font-size: 10px; } .features { flex-direction: column; align-items: center; } .feature { width: 80%; margin-bottom: 20px; } .product-image-container { width: 200px; height: 200px; } .logo { font-size: 20px; } } /* Cursor effect */ .custom-cursor { position: fixed; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--gold); pointer-events: none; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s ease, transform 0.1s ease; z-index: 9999; } .custom-cursor-follower { position: fixed; width: 8px; height: 8px; border-radius: 50%; background-color: var(--gold); pointer-events: none; transform: translate(-50%, -50%); opacity: 0; z-index: 9999; } body:hover .custom-cursor, body:hover .custom-cursor-follower { opacity: 1; } </style> </head> <body> <div class="container"> <div class="bg-gradient"></div> <div class="floating-element"></div> <header> <div class="logo">LUMIÈRE</div> <nav> <ul> <li><a href="#collection">Collection</a></li> <li><a href="#atelier">Atelier</a></li> <li><a href="#heritage">Heritage</a></li> </ul> </nav> </header> <section class="hero"> <h1>Artistry in Gold<br>Legacy in Brilliance</h1> <p class="subtitle">Handcrafted fine jewelry since 1887</p> <div class="product-image-container"> <div class="product-image"></div> </div> <a href="#exclusive" class="cta-button">Discover Collection</a> </section> <section class="features"> <div class="feature"> <div class="feature-icon">✦</div> <h3>Master Craftsmanship</h3> <p>Each piece meticulously crafted by our artisans with techniques passed through generations.</p> </div> <div class="feature"> <div class="feature-icon">✧</div> <h3>Ethical Sourcing</h3> <p>Responsibly sourced precious metals and conflict-free diamonds of exceptional clarity.</p> </div> <div class="feature"> <div class="feature-icon">✦</div> <h3>Bespoke Service</h3> <p>Private appointments with our designers to create your personalized heirloom piece.</p> </div> </section> <footer> <p>© 2023 LUMIÈRE • PARIS • LONDON • NEW YORK</p> </footer> </div> <div class="custom-cursor"></div> <div class="custom-cursor-follower"></div> <script> // Custom cursor effect const cursor = document.querySelector('.custom-cursor'); const cursorFollower = document.querySelector('.custom-cursor-follower'); document.addEventListener('mousemove', (e) => { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; // Delayed follower effect setTimeout(() => { cursorFollower.style.left = e.clientX + 'px'; cursorFollower.style.top = e.clientY + 'px'; }, 70); }); document.addEventListener('mousedown', () => { cursor.style.transform = 'translate(-50%, -50%) scale(0.8)'; cursorFollower.style.transform = 'translate(-50%, -50%) scale(0.6)'; }); document.addEventListener('mouseup', () => { cursor.style.transform = 'translate(-50%, -50%) scale(1)'; cursorFollower.style.transform = 'translate(-50%, -50%) scale(1)'; }); // Add hover effect to elements const hoverElements = document.querySelectorAll('a, .feature, .product-image'); hoverElements.forEach(element => { element.addEventListener('mouseenter', () => { cursor.style.transform = 'translate(-50%, -50%) scale(1.5)'; cursor.style.borderColor = 'rgba(212, 175, 55, 0.5)'; cursorFollower.style.opacity = '0.5'; }); element.addEventListener('mouseleave', () => { cursor.style.transform = 'translate(-50%, -50%) scale(1)'; cursor.style.borderColor = 'var(--gold)'; cursorFollower.style.opacity = '1'; }); }); // Glow animation for the title const title = document.querySelector('h1'); function animateGlow() { const intensity = Math.sin(Date.now() / 1000) * 0.1 + 0.3; title.style.textShadow = `0 0 10px rgba(212, 175, 55, ${intensity}), 0 0 30px rgba(212, 175, 55, ${intensity/3})`; requestAnimationFrame(animateGlow); } animateGlow(); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Corporate Dashboard</title> <style> :root { --primary: #2c3e50; --secondary: #34495e; --accent: #3498db; --accent-glow: rgba(52, 152, 219, 0.3); --success: #27ae60; --warning: #f39c12; --danger: #e74c3c; --light: #ecf0f1; --gray: #95a5a6; --dark: #1a252f; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: var(--dark); color: var(--light); height: 100vh; width: 100%; display: flex; flex-direction: column; overflow-x: hidden; } .dashboard { max-width: 700px; width: 100%; height: 700px; margin: 0 auto; padding: 20px; display: grid; grid-template-rows: auto 1fr auto; gap: 20px; overflow-y: auto; } header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 15px; border-bottom: 1px solid rgba(236, 240, 241, 0.1); } .logo { font-size: 24px; font-weight: 700; color: var(--light); display: flex; align-items: center; gap: 10px; } .logo-icon { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--accent), var(--primary)); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 15px var(--accent-glow); } .date-time { font-size: 14px; color: var(--gray); } nav { display: flex; gap: 15px; margin-top: 20px; } .nav-item { padding: 8px 15px; border-radius: 6px; cursor: pointer; transition: all 0.3s ease; font-size: 14px; position: relative; } .nav-item:hover, .nav-item.active { background-color: rgba(52, 152, 219, 0.1); } .nav-item.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); } main { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto auto 1fr; gap: 20px; overflow-y: auto; } .metric-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; } .metric-card { background: var(--secondary); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .metric-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .metric-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; } .metric-card.revenue::before { background: var(--success); } .metric-card.users::before { background: var(--accent); } .metric-card.conversion::before { background: var(--warning); } .metric-label { font-size: 14px; color: var(--gray); display: flex; align-items: center; gap: 6px; } .metric-icon { font-size: 16px; } .metric-value { font-size: 24px; font-weight: 700; display: flex; align-items: baseline; gap: 5px; } .critical-metric { text-shadow: 0 0 10px var(--accent-glow); } .metric-percentage { font-size: 14px; padding: 2px 8px; border-radius: 10px; background: rgba(39, 174, 96, 0.1); color: var(--success); } .negative { background: rgba(231, 76, 60, 0.1); color: var(--danger); } .chart-container { background: var(--secondary); border-radius: 12px; padding: 20px; position: relative; overflow: hidden; } .chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .chart-title { font-size: 16px; font-weight: 600; } .period-selector { display: flex; gap: 10px; font-size: 12px; } .period-option { padding: 4px 8px; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; } .period-option:hover, .period-option.active { background: rgba(52, 152, 219, 0.2); color: var(--accent); } .chart { height: 180px; width: 100%; } .alerts-section, .tasks-section { background: var(--secondary); border-radius: 12px; padding: 20px; position: relative; overflow: hidden; } .section-header { margin-bottom: 15px; font-size: 16px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; } .view-all { font-size: 12px; color: var(--accent); cursor: pointer; transition: all 0.3s ease; } .view-all:hover { text-decoration: underline; text-shadow: 0 0 5px var(--accent-glow); } .alerts-list, .tasks-list { display: flex; flex-direction: column; gap: 10px; max-height: 180px; overflow-y: auto; } .alert-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 6px; background: rgba(26, 37, 47, 0.5); transition: all 0.3s ease; } .alert-item:hover { background: rgba(26, 37, 47, 0.8); } .alert-icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; } .alert-critical { background: rgba(231, 76, 60, 0.2); color: var(--danger); } .alert-warning { background: rgba(243, 156, 18, 0.2); color: var(--warning); } .alert-info { background: rgba(52, 152, 219, 0.2); color: var(--accent); } .alert-content { flex: 1; } .alert-title { font-size: 14px; font-weight: 500; margin-bottom: 2px; } .alert-critical .alert-title { animation: pulse 2s infinite; } @keyframes pulse { 0% { text-shadow: 0 0 5px rgba(231, 76, 60, 0.3); } 50% { text-shadow: 0 0 15px rgba(231, 76, 60, 0.6); } 100% { text-shadow: 0 0 5px rgba(231, 76, 60, 0.3); } } .alert-time { font-size: 12px; color: var(--gray); } .task-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 6px; background: rgba(26, 37, 47, 0.5); transition: all 0.3s ease; } .task-item:hover { background: rgba(26, 37, 47, 0.8); } .task-checkbox { appearance: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--gray); cursor: pointer; position: relative; transition: all 0.3s ease; } .task-checkbox:checked { background: var(--accent); border-color: var(--accent); } .task-checkbox:checked::before { content: '✓'; position: absolute; color: var(--light); font-size: 12px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .task-content { flex: 1; } .task-title { font-size: 14px; font-weight: 500; margin-bottom: 2px; transition: all 0.3s ease; } .task-checkbox:checked + .task-content .task-title { text-decoration: line-through; color: var(--gray); } .task-due { font-size: 12px; color: var(--gray); } .task-priority { font-size: 12px; padding: 2px 8px; border-radius: 10px; } .priority-high { background: rgba(231, 76, 60, 0.1); color: var(--danger); } .priority-medium { background: rgba(243, 156, 18, 0.1); color: var(--warning); } .priority-low { background: rgba(39, 174, 96, 0.1); color: var(--success); } footer { display: flex; justify-content: space-between; align-items: center; padding-top: 15px; border-top: 1px solid rgba(236, 240, 241, 0.1); font-size: 12px; color: var(--gray); } .quick-actions { display: flex; gap: 15px; } .action-btn { background: var(--primary); color: var(--light); border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 5px; transition: all 0.3s ease; } .action-btn:hover { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); } .user-info { display: flex; align-items: center; gap: 10px; } .user-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--light); } /* Responsive adjustments */ @media (max-width: 600px) { .metric-grid { grid-template-columns: 1fr; } main { grid-template-columns: 1fr; } .chart-container, .alerts-section, .tasks-section { grid-column: 1 / -1; } } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--dark); } ::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* Tooltip styles */ [data-tooltip] { position: relative; cursor: pointer; } [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); padding: 5px 10px; background: var(--dark); color: var(--light); border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 10; } [data-tooltip]:hover::after { opacity: 1; visibility: visible; } /* Animated glow effect for critical metrics */ .glow-text { animation: glow 2s infinite alternate; } @keyframes glow { from { text-shadow: 0 0 5px var(--accent-glow); } to { text-shadow: 0 0 15px var(--accent-glow), 0 0 20px var(--accent-glow); } } </style> </head> <body> <div class="dashboard"> <header> <div> <div class="logo"> <div class="logo-icon">Q</div> QuantumMetrics </div> <div class="date-time" id="datetime">Tuesday, May 28, 2023 - 09:32 AM</div> </div> </header> <nav> <div class="nav-item active">Overview</div> <div class="nav-item">Financial</div> <div class="nav-item">Operations</div> <div class="nav-item">Marketing</div> <div class="nav-item">HR</div> </nav> <main> <div class="metric-grid"> <div class="metric-card revenue"> <div class="metric-label"> <i class="metric-icon">💰</i> Quarterly Revenue </div> <div class="metric-value"> <span class="critical-metric glow-text">$3.72M</span> <span class="metric-percentage">+12.8%</span> </div> </div> <div class="metric-card users"> <div class="metric-label"> <i class="metric-icon">👥</i> Active Users </div> <div class="metric-value"> <span>162,845</span> <span class="metric-percentage">+7.2%</span> </div> </div> <div class="metric-card conversion"> <div class="metric-label"> <i class="metric-icon">📈</i> Conversion Rate </div> <div class="metric-value"> <span class="critical-metric">4.8%</span> <span class="metric-percentage negative">-0.5%</span> </div> </div> </div> <div class="chart-container"> <div class="chart-header"> <div class="chart-title">Sales Performance</div> <div class="period-selector"> <div class="period-option">Day</div> <div class="period-option">Week</div> <div class="period-option active">Month</div> <div class="period-option">Quarter</div> </div> </div> <canvas id="salesChart" class="chart"></canvas> </div> <div class="alerts-section"> <div class="section-header"> <span>Alerts & Notifications</span> <span class="view-all">View All</span> </div> <div class="alerts-list"> <div class="alert-item"> <div class="alert-icon alert-critical">!</div> <div class="alert-content"> <div class="alert-title">Server load above 85%</div> <div class="alert-time">32 minutes ago</div> </div> </div> <div class="alert-item"> <div class="alert-icon alert-warning">⚠️</div> <div class="alert-content"> <div class="alert-title">NPS dropped below target</div> <div class="alert-time">2 hours ago</div> </div> </div> <div class="alert-item"> <div class="alert-icon alert-info">i</div> <div class="alert-content"> <div class="alert-title">New marketing campaign live</div> <div class="alert-time">Yesterday at 3:45 PM</div> </div> </div> </div> </div> <div class="tasks-section"> <div class="section-header"> <span>Priority Tasks</span> <span class="view-all">View All</span> </div> <div class="tasks-list"> <div class="task-item"> <input type="checkbox" class="task-checkbox"> <div class="task-content"> <div class="task-title">Analyze Q2 marketing metrics</div> <div class="task-due">Due Today</div> </div> <div class="task-priority priority-high">High</div> </div> <div class="task-item"> <input type="checkbox" class="task-checkbox"> <div class="task-content"> <div class="task-title">Review conversion funnel issues</div> <div class="task-due">Due Tomorrow</div> </div> <div class="task-priority priority-high">High</div> </div> <div class="task-item"> <input type="checkbox" class="task-checkbox" checked> <div class="task-content"> <div class="task-title">Approve Q3 budget forecasts</div> <div class="task-due">Completed</div> </div> <div class="task-priority priority-medium">Medium</div> </div> </div> </div> </main> <footer> <div class="quick-actions"> <button class="action-btn" data-tooltip="Generate Performance Report"> <i>📊</i> Report </button> <button class="action-btn" data-tooltip="Schedule Team Meeting"> <i>📅</i> Schedule </button> </div> <div class="user-info"> <span>Rebecca Warren</span> <div class="user-avatar">RW</div> </div> </footer> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> // Update date and time function updateDateTime() { const now = new Date(); const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' }; document.getElementById('datetime').textContent = now.toLocaleDateString('en-US', options); } updateDateTime(); setInterval(updateDateTime, 60000); // Initialize Sales Chart document.addEventListener('DOMContentLoaded', function() { const ctx = document.getElementById('salesChart').getContext('2d'); // Create gradient for chart const gradient = ctx.createLinearGradient(0, 0, 0, 400); gradient.addColorStop(0, 'rgba(52, 152, 219, 0.5)'); gradient.addColorStop(1, 'rgba(52, 152, 219, 0.0)'); const salesChart = new Chart(ctx, { type: 'line', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], datasets: [{ label: 'Sales ($M)', data: [1.2, 1.3, 1.1, 1.7, 1.5, 1.9, 2.1, 2.3, 2.8, 3.1, 3.4, 3.7], borderColor: '#3498db', backgroundColor: gradient, borderWidth: 2, pointBackgroundColor: '#3498db', pointBorderColor: '#ecf0f1', pointRadius: 4, pointHoverRadius: 6, tension: 0.4, fill: true }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: { backgroundColor: '#2c3e50', titleColor: '#ecf0f1', bodyColor: '#ecf0f1', borderColor: '#3498db', borderWidth: 1, displayColors: false, callbacks: { label: function(context) { return `$${context.raw}M`; } } } }, scales: { x: { grid: { display: false, drawBorder: false }, ticks: { color: '#95a5a6' } }, y: { grid: { color: 'rgba(149, 165, 166, 0.1)', drawBorder: false }, ticks: { color: '#95a5a6', callback: function(value) { return `$${value}M`; } } } } } }); // Interactive elements const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(item => { item.addEventListener('click', function() { navItems.forEach(i => i.classList.remove('active')); this.classList.add('active'); }); }); const periodOptions = document.querySelectorAll('.period-option'); periodOptions.forEach(option => { option.addEventListener('click', function() { periodOptions.forEach(o => o.classList.remove('active')); this.classList.add('active'); // Update chart data based on selected period (simplified) const period = this.textContent.toLowerCase(); let newData; switch(period) { case 'day': newData = [2.8, 3.1, 3.4, 3.7, 3.5, 3.8, 3.9]; salesChart.data.labels = ['9AM', '11AM', '1PM', '3PM', '5PM', '7PM', '9PM']; break; case 'week': newData = [3.2, 3.4, 3.6, 3.5, 3.7, 3.8, 3.9]; salesChart.data.labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; break; case 'month': newData = [1.2, 1.3, 1.1, 1.7, 1.5, 1.9, 2.1, 2.3, 2.8, 3.1, 3.4, 3.7]; salesChart.data.labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; break; case 'quarter': newData = [2.4, 5.5, 8.3, 11.2]; salesChart.data.labels = ['Q1', 'Q2', 'Q3', 'Q4']; break; } salesChart.data.datasets[0].data = newData; salesChart.update(); }); }); // Task checkboxes const taskCheckboxes = document.querySelectorAll('.task-checkbox'); taskCheckboxes.forEach(checkbox => { checkbox.addEventListener('change', function() { const taskTitle = this.nextElementSibling.querySelector('.task-title'); const taskDue = this.nextElementSibling.querySelector('.task-due'); if (this.checked) { taskDue.textContent = 'Completed'; } else { taskDue.textContent = 'Due Today'; } }); }); // Pulse animation for critical metrics function pulseEffect() { const criticalMetrics = document.querySelectorAll('.critical-metric'); criticalMetrics.forEach(metric => { metric.classList.toggle('glow-text'); }); } setInterval(pulseEffect, 2000); // Alert hover effect const alertItems = document.querySelectorAll('.alert-item'); alertItems.forEach(item => { item.addEventListener('mouseenter', function() { this.style.transform = 'translateX(5px)'; }); item.addEventListener('mouseleave', function() { this.style.transform = 'translateX(0)'; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>RETROWAVE ARCADE</title> <style> :root { --neon-pink: #ff00ff; --neon-blue: #00ffff; --neon-green: #00ff00; --neon-yellow: #ffff00; --neon-purple: #9900ff; --dark-purple: #1a0033; --bg-color: #0a0015; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Courier New', monospace; } body { background-color: var(--bg-color); color: white; width: 100%; height: 100vh; overflow-x: hidden; background-image: radial-gradient(circle at 10% 20%, rgba(255, 0, 255, 0.1) 0%, transparent 20%), radial-gradient(circle at 90% 80%, rgba(0, 255, 255, 0.1) 0%, transparent 20%), linear-gradient(to bottom, var(--bg-color), #000); } .container { max-width: 700px; height: 700px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--neon-purple) var(--dark-purple); } .container::-webkit-scrollbar { width: 8px; } .container::-webkit-scrollbar-track { background: var(--dark-purple); } .container::-webkit-scrollbar-thumb { background-color: var(--neon-purple); border-radius: 10px; } .header { text-align: center; margin-bottom: 30px; } .logo { font-size: 3.5rem; font-weight: bold; letter-spacing: 2px; margin-bottom: 10px; position: relative; text-transform: uppercase; } .neon-text { color: white; text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink), 0 0 30px var(--neon-pink), 0 0 40px var(--neon-pink); animation: neonFlicker 3s infinite alternate; } .blue-text { color: white; text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue), 0 0 30px var(--neon-blue), 0 0 40px var(--neon-blue); animation: neonFlicker 2.5s infinite alternate; } .green-text { color: white; text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px var(--neon-green), 0 0 20px var(--neon-green), 0 0 30px var(--neon-green), 0 0 40px var(--neon-green); animation: neonFlicker 3.2s infinite alternate; } .yellow-text { color: white; text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px var(--neon-yellow), 0 0 20px var(--neon-yellow), 0 0 30px var(--neon-yellow), 0 0 40px var(--neon-yellow); animation: neonFlicker 2.8s infinite alternate; } .purple-text { color: white; text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple), 0 0 30px var(--neon-purple), 0 0 40px var(--neon-purple); animation: neonFlicker 3.5s infinite alternate; } .subtitle { font-size: 1rem; margin-bottom: 20px; opacity: 0.8; } .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 30px; } @media (max-width: 480px) { .grid { grid-template-columns: 1fr; } .logo { font-size: 2.5rem; } } .game-card { background: rgba(26, 0, 51, 0.5); border: 2px solid var(--neon-blue); border-radius: 5px; padding: 15px; text-align: center; transition: all 0.3s ease; box-shadow: 0 0 10px rgba(0, 255, 255, 0.3); cursor: pointer; position: relative; overflow: hidden; } .game-card:hover { transform: translateY(-5px); box-shadow: 0 0 15px rgba(0, 255, 255, 0.5), 0 0 30px rgba(0, 255, 255, 0.3); } .game-card:hover h3 { animation: strobeEffect 0.1s infinite; } .game-card:hover::before { content: ''; position: absolute; top: 0; left: -100%; width: 200%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.2), transparent ); animation: scanline 1.5s infinite; } .game-card h3 { font-size: 1.2rem; margin-bottom: 10px; font-weight: bold; text-transform: uppercase; } .game-card .pixel-art { width: 90%; height: 120px; margin: 0 auto 15px; background-size: contain; background-repeat: no-repeat; background-position: center; image-rendering: pixelated; } .game-card p { font-size: 0.9rem; margin-bottom: 15px; } .game-card .price { font-size: 1.1rem; font-weight: bold; } .cta-section { margin-top: 20px; text-align: center; padding: 30px; background: rgba(26, 0, 51, 0.5); border: 2px solid var(--neon-pink); border-radius: 5px; position: relative; overflow: hidden; } .cta-section h2 { margin-bottom: 20px; font-size: 1.8rem; text-transform: uppercase; } .cta-section p { margin-bottom: 25px; line-height: 1.5; } .cta-button { display: inline-block; padding: 12px 30px; background: transparent; color: white; border: 2px solid var(--neon-green); border-radius: 5px; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease; text-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green); box-shadow: 0 0 10px rgba(0, 255, 0, 0.5); } .cta-button:hover { background-color: rgba(0, 255, 0, 0.2); box-shadow: 0 0 20px rgba(0, 255, 0, 0.7), 0 0 40px rgba(0, 255, 0, 0.4); animation: buttonPulse 1s infinite alternate; } .game-highlight { display: flex; flex-direction: column; align-items: center; margin: 30px 0; position: relative; } .retro-marquee { font-size: 1.5rem; white-space: nowrap; overflow: hidden; width: 100%; margin-bottom: 20px; } .marquee-content { display: inline-block; padding-right: 2em; animation: marquee 20s linear infinite; } .game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; margin-top: 20px; } .mini-game { aspect-ratio: 1; background-color: rgba(26, 0, 51, 0.7); border: 1px solid var(--neon-yellow); border-radius: 3px; display: flex; justify-content: center; align-items: center; font-size: 0.8rem; cursor: pointer; transition: all 0.2s; } .mini-game:hover { transform: scale(1.05); box-shadow: 0 0 15px var(--neon-yellow); animation: strobeEffect 0.12s infinite; } .footer { text-align: center; margin-top: 30px; padding: 20px 0; font-size: 0.8rem; opacity: 0.7; border-top: 1px solid rgba(255, 0, 255, 0.3); } .footer p { margin-bottom: 10px; } .social-icons { display: flex; justify-content: center; gap: 15px; margin-top: 10px; } .social-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--neon-blue); border-radius: 50%; transition: all 0.3s; } .social-icon:hover { transform: scale(1.2); box-shadow: 0 0 10px var(--neon-blue); } /* Grid Scanner Effect */ .grid-scanner { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--neon-blue), transparent); animation: gridScan 3s linear infinite; opacity: 0.7; z-index: 1; } /* Animations */ @keyframes neonFlicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 0.99; } 20%, 24%, 55% { opacity: 0.5; } } @keyframes strobeEffect { 0% { opacity: 1; } 49% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } } @keyframes scanline { 0% { left: -100%; } 100% { left: 100%; } } @keyframes buttonPulse { from { transform: scale(1); } to { transform: scale(1.05); } } @keyframes gridScan { 0% { top: 0; } 100% { top: 100%; } } @keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } /* Retro computer typewriter effect */ .typewriter { overflow: hidden; white-space: nowrap; margin: 0 auto; letter-spacing: 2px; animation: typing 3.5s steps(40, end); } @keyframes typing { from { width: 0 } to { width: 100% } } /* Pixel drawing styles */ .pixel-pacman { background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1,5 A4,4 0 1,0 9,5 L5,5 L5,1 Z' fill='%23ffff00'/%3E%3Ccircle cx='7' cy='3' r='0.5' fill='%23000'/%3E%3C/svg%3E"); } .pixel-invader { background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1,2 h1 v1 h1 v1 h4 v-1 h1 v-1 h1 v2 h-1 v1 h-1 v1 h-1 v-1 h-2 v1 h-1 v-1 h-1 v-1 h-1 Z' fill='%2300ff00'/%3E%3C/svg%3E"); } .pixel-tetris { background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2,2 h2 v2 h2 v2 h2 v2 h-2 v-2 h-2 v-2 h-2 Z' fill='%23ff00ff'/%3E%3C/svg%3E"); } .pixel-frogger { background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3,2 h4 v1 h1 v2 h-1 v1 h-1 v1 h-2 v-1 h-1 v-1 h-1 v-2 h1 Z' fill='%2300ffff'/%3E%3Ccircle cx='4' cy='3' r='0.5' fill='%23000'/%3E%3Ccircle cx='6' cy='3' r='0.5' fill='%23000'/%3E%3C/svg%3E"); } /* CRT screen effect */ .crt-effect { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%); background-size: 100% 4px; z-index: 10; pointer-events: none; opacity: 0.15; } .crt-effect::before { content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(18, 16, 16, 0.1); z-index: 11; } /* Joystick navigation */ .joystick-nav { position: fixed; bottom: 20px; right: 20px; width: 70px; height: 70px; background: url("data:image/svg+xml,%3Csvg width='70' height='70' viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7' cy='7' r='6' stroke='%23ff00ff' stroke-width='0.5' fill='%23000' opacity='0.7'/%3E%3Ccircle cx='7' cy='7' r='2' fill='%23ff00ff'/%3E%3Cpath d='M7,3 v-1 M7,11 v1 M3,7 h-1 M11,7 h1' stroke='%23ff00ff' stroke-width='0.7'/%3E%3C/svg%3E") no-repeat; opacity: 0.7; cursor: pointer; z-index: 100; transition: all 0.3s; } .joystick-nav:hover { opacity: 1; transform: scale(1.1); } /* Pixel coin animation */ .pixel-coin { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='4' fill='%23ffff00'/%3E%3Ccircle cx='5' cy='5' r='2' fill='%23ff9900'/%3E%3C/svg%3E") no-repeat; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotateY(0deg); width: 20px; } 25% { width: 18px; } 50% { transform: rotateY(180deg); width: 5px; } 75% { width: 18px; } 100% { transform: rotateY(360deg); width: 20px; } } </style> </head> <body> <div class="container"> <div class="header"> <h1 class="logo"> <span class="neon-text">RETRO</span> <span class="blue-text">WAVE</span> <span class="green-text">ARCADE</span> </h1> <p class="subtitle typewriter">> PRESS START TO ENTER THE NOSTALGIA ZONE</p> </div> <div class="game-highlight"> <div class="retro-marquee"> <div class="marquee-content"> <span class="purple-text">★</span> <span class="neon-text">NEW GAMES WEEKLY</span> <span class="purple-text">★</span> <span class="blue-text">HIGH SCORE TOURNAMENTS</span> <span class="purple-text">★</span> <span class="yellow-text">JOIN THE PIXEL REVOLUTION</span> <span class="purple-text">★</span> </div> </div> <div class="grid-scanner"></div> </div> <div class="grid"> <div class="game-card"> <div class="pixel-art pixel-pacman"></div> <h3 class="yellow-text">Pac-Attack</h3> <p>Navigate maze-like levels while avoiding neon ghosts. Power up with pixel pellets!</p> <div class="price green-text">25¢ PER PLAY</div> <div class="pixel-coin"></div> </div> <div class="game-card"> <div class="pixel-art pixel-invader"></div> <h3 class="green-text">Cosmic Invaders</h3> <p>Defend Earth from waves of descending aliens. Unlock secret weapon upgrades!</p> <div class="price green-text">50¢ PER PLAY</div> </div> <div class="game-card"> <div class="pixel-art pixel-tetris"></div> <h3 class="neon-text">Neon Blocks</h3> <p>Stack falling tetrominoes in this addictive puzzle classic with a synthwave twist.</p> <div class="price green-text">25¢ PER PLAY</div> </div> <div class="game-card"> <div class="pixel-art pixel-frogger"></div> <h3 class="blue-text">Cyber Hopper</h3> <p>Navigate through neon traffic and hazardous terrain to reach the digital sanctuary.</p> <div class="price green-text">25¢ PER PLAY</div> </div> </div> <div class="cta-section"> <h2 class="purple-text">JOIN THE ARCADE CLUB</h2> <p>Sign up today for unlimited gameplay weekends, exclusive midnight tournaments, and first access to our monthly retro game drops. Real arcade cabinets, real nostalgia.</p> <button class="cta-button" id="joinButton">INSERT COIN</button> </div> <div class="game-highlight"> <h2 class="blue-text">WEEKLY TOURNAMENTS</h2> <div class="game-grid"> <div class="mini-game yellow-text">MON<br>PAC-ATTACK</div> <div class="mini-game green-text">TUE<br>COSMIC</div> <div class="mini-game neon-text">WED<br>BLOCKS</div> <div class="mini-game blue-text">THU<br>HOPPER</div> <div class="mini-game purple-text">FRI<br>GAUNTLET</div> <div class="mini-game green-text">SAT-SUN<br>ALL GAMES</div> </div> </div> <div class="footer"> <p class="blue-text">© 2023 RETROWAVE ARCADE - WHERE PIXELS NEVER DIE</p> <p>1984 Synth Avenue, Downtown Neonville</p> <div class="social-icons"> <div class="social-icon">T</div> <div class="social-icon">F</div> <div class="social-icon">I</div> <div class="social-icon">D</div> </div> </div> </div> <div class="crt-effect"></div> <div class="joystick-nav" id="joystick"></div> <script> // Flicker effect function for neon text with randomness function randomFlicker() { const neonElements = document.querySelectorAll('.neon-text, .blue-text, .green-text, .yellow-text, .purple-text'); neonElements.forEach(el => { if (Math.random() < 0.02) { // 2% chance to flicker each check el.style.opacity = Math.random() * 0.5 + 0.5; // Random opacity between 0.5 and 1 setTimeout(() => { el.style.opacity = 1; // Restore full opacity }, Math.random() * 100 + 50); // Random duration } }); } // Call the flicker effect periodically setInterval(randomFlicker, 100); // Game cards hover effect with sound simulation const gameCards = document.querySelectorAll('.game-card'); gameCards.forEach(card => { card.addEventListener('mouseenter', () => { // Simulate arcade sound with vibration if available if (navigator.vibrate) { navigator.vibrate(30); } // Add scanline animation dynamically const scanline = document.createElement('div'); scanline.classList.add('grid-scanner'); card.appendChild(scanline); }); card.addEventListener('mouseleave', () => { // Remove any scanlines when mouse leaves const scanlines = card.querySelectorAll('.grid-scanner'); scanlines.forEach(line => line.remove()); }); }); // CTA button interaction const ctaButton = document.getElementById('joinButton'); ctaButton.addEventListener('mouseenter', () => { ctaButton.innerText = ">> READY <<"; }); ctaButton.addEventListener('mouseleave', () => { ctaButton.innerText = "INSERT COIN"; }); ctaButton.addEventListener('click', () => { ctaButton.innerText = "CREDIT: 1"; ctaButton.classList.add('green-text'); setTimeout(() => { ctaButton.innerText = "THANKS PLAYER 1!"; if (navigator.vibrate) { navigator.vibrate([50, 30, 50]); } }, 500); setTimeout(() => { ctaButton.innerText = "INSERT COIN"; ctaButton.classList.remove('green-text'); }, 2500); }); // Joystick navigation const joystick = document.getElementById('joystick'); let isDragging = false; let initialY; joystick.addEventListener('mousedown', (e) => { isDragging = true; initialY = e.clientY; joystick.style.transition = 'none'; }); document.addEventListener('mousemove', (e) => { if (!isDragging) return; const deltaY = initialY - e.clientY; if (Math.abs(deltaY) > 50) { const container = document.querySelector('.container'); const scrollAmount = deltaY > 0 ? 100 : -100; container.scrollBy(0, scrollAmount); initialY = e.clientY; if (navigator.vibrate) { navigator.vibrate(15); } } }); document.addEventListener('mouseup', () => { isDragging = false; joystick.style.transition = 'all 0.3s'; }); // Mini-game interaction const miniGames = document.querySelectorAll('.mini-game'); miniGames.forEach(game => { game.addEventListener('click', () => { game.style.transform = 'scale(0.95)'; setTimeout(() => { game.style.transform = 'scale(1.05)'; }, 100); if (navigator.vibrate) { navigator.vibrate(25); } }); }); // Random "glitch" effect on page elements function randomGlitch() { if (Math.random() < 0.05) { // 5% chance to trigger const elements = [ ...document.querySelectorAll('h1, h2, h3'), ...document.querySelectorAll('.game-card'), ...document.querySelectorAll('.cta-section') ]; const target = elements[Math.floor(Math.random() * elements.length)]; // Apply a quick transform target.style.transform = `translateX(${Math.random() * 5 - 2.5}px)`; // Create a css text shadow if it's text if (target.tagName.match(/H[1-3]/)) { const originalShadow = target.style.textShadow; target.style.textShadow = `${Math.random() * 10 - 5}px ${Math.random() * 10 - 5}px ${Math.random() * 20}px rgba(255,0,255,0.8)`; setTimeout(() => { target.style.textShadow = originalShadow; target.style.transform = ''; }, 150); } else { setTimeout(() => { target.style.transform = ''; }, 150); } } } // Run random glitch effect setInterval(randomGlitch, 2000); </script> </body> </html>
