Posters are a powerful medium for conveying messages, promoting events, and showcasing creativity. In this article, we will explore ten exemplary posters that stand out for their design, impact, and effectiveness.
From minimalist designs to vibrant, eye-catching visuals, these posters demonstrate the diverse approaches to capturing attention and communicating ideas. Let's dive into these inspiring examples and uncover what makes each one unique.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers, elevate your poster creation with Subframe's drag-and-drop interface and intuitive, responsive canvas. Achieve pixel-perfect UI effortlessly, every time.
Loved by creatives across the board, Subframe makes stunning design accessible to all. 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 posters, in minutes. Our drag-and-drop interface ensures efficiency and precision.
Don't wait to bring your creative visions to life. Start for free and begin designing immediately!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ECLIPSE Film Festival 2024</title> <style> @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;700&display=swap'); :root { --primary: #f41b56; --secondary: #3634b9; --dark: #0d0d15; --light: #f3f3f3; --accent: #ffca28; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Montserrat', sans-serif; background-color: var(--dark); color: var(--light); overflow-x: hidden; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .poster-container { position: relative; width: 100%; max-width: 700px; height: 700px; overflow: hidden; background: linear-gradient(135deg, #18181f 0%, #0a0a12 100%); box-shadow: 0 24px 45px rgba(0, 0, 0, 0.5); } .film-strip { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="35" height="200" viewBox="0 0 35 200"><rect x="0" y="0" width="35" height="15" fill="%23000" opacity="0.7"/><rect x="5" y="3" width="5" height="9" rx="2" fill="none" stroke="%23fff" opacity="0.3"/><rect x="25" y="3" width="5" height="9" rx="2" fill="none" stroke="%23fff" opacity="0.3"/></svg>'); background-repeat: repeat-y; opacity: 0.05; animation: filmSlide 30s linear infinite; pointer-events: none; } .film-strip:nth-child(2) { right: 0; left: auto; transform: translateY(100px); animation-duration: 40s; } @keyframes filmSlide { 0% { transform: translateY(0); } 100% { transform: translateY(-200px); } } .header { position: relative; padding: 2rem; text-align: center; z-index: 2; } .festival-name { font-family: 'Bebas Neue', sans-serif; font-size: 5rem; line-height: 0.9; letter-spacing: 3px; margin-bottom: 0.5rem; background: linear-gradient(to right, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 20px rgba(244, 27, 86, 0.3); transform: skew(-5deg); } .tagline { font-size: 1.2rem; font-weight: 300; letter-spacing: 5px; color: var(--light); opacity: 0.8; margin-bottom: 1.5rem; } .dates { font-size: 1.4rem; font-weight: 700; margin-bottom: 1rem; color: var(--accent); } .location { font-size: 1rem; text-transform: uppercase; letter-spacing: 2px; } .content { display: flex; flex-direction: column; align-items: center; padding: 1rem 2rem; z-index: 2; position: relative; } .imagery { position: relative; width: 90%; height: 250px; background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="700" height="250" viewBox="0 0 700 250"><rect width="700" height="250" fill="%23333"/><circle cx="350" cy="125" r="50" fill="%23f41b56" opacity="0.8"/><rect x="250" y="75" width="200" height="2" fill="%23fff" opacity="0.5"/><rect x="250" y="175" width="200" height="2" fill="%23fff" opacity="0.5"/></svg>'); background-size: cover; margin-bottom: 2rem; overflow: hidden; box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5); transform: perspective(1000px) rotateX(5deg); } .imagery::before { content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent); animation: shine 3s infinite; } @keyframes shine { 0% { left: -100%; } 20% { left: 100%; } 100% { left: 100%; } } .categories { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; margin: 1rem 0 2rem; } .category { background-color: rgba(255, 255, 255, 0.1); padding: 0.5rem 1rem; border-radius: 4px; font-size: 0.8rem; transition: all 0.3s ease; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.1); } .category:hover { background-color: var(--primary); transform: translateY(-3px); box-shadow: 0 5px 15px rgba(244, 27, 86, 0.3); } .qr-section { display: flex; justify-content: center; align-items: center; gap: 2rem; width: 100%; margin-top: 1rem; } .qr-code { width: 100px; height: 100px; background-color: white; display: flex; justify-content: center; align-items: center; position: relative; transition: transform 0.3s ease; } .qr-code::before { content: "SCAN ME"; position: absolute; bottom: -25px; font-size: 0.7rem; font-weight: bold; color: var(--accent); } .qr-code:hover { transform: scale(1.1); } .qr-info { flex: 1; font-size: 0.8rem; line-height: 1.4; max-width: 250px; } .highlight { color: var(--primary); font-weight: 700; } .cta-button { position: relative; margin-top: 2rem; padding: 0.8rem 2rem; background: var(--primary); color: white; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; border: none; border-radius: 4px; cursor: pointer; overflow: hidden; transition: all 0.3s ease; z-index: 1; } .cta-button::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--secondary); transition: all 0.4s ease; z-index: -1; } .cta-button:hover::before { left: 0; } .cta-button:hover { box-shadow: 0 5px 20px rgba(54, 52, 185, 0.4); transform: translateY(-2px); } .footer { position: absolute; bottom: 0; width: 100%; padding: 1rem; text-align: center; font-size: 0.8rem; opacity: 0.7; background: rgba(0,0,0,0.3); backdrop-filter: blur(10px); } .social-icons { display: flex; justify-content: center; gap: 1rem; margin-top: 0.5rem; } .social-icon { width: 25px; height: 25px; border-radius: 50%; background-color: rgba(255,255,255,0.1); display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.3s ease; } .social-icon:hover { background-color: var(--primary); transform: translateY(-3px); } .glitch-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(244, 27, 86, 0.05); mix-blend-mode: overlay; pointer-events: none; animation: glitch 5s infinite; opacity: 0; } @keyframes glitch { 0% { opacity: 0; } 10% { opacity: 0.1; transform: translate(5px, 0); } 10.5% { opacity: 0; } 20% { opacity: 0; } 20.5% { opacity: 0.1; transform: translate(-5px, 0); } 21% { opacity: 0; } 50% { opacity: 0; } 50.5% { opacity: 0.1; transform: translate(0, 5px); } 51% { opacity: 0; } 70% { opacity: 0; } 70.5% { opacity: 0.1; transform: translate(0, -5px); } 71% { opacity: 0; } 100% { opacity: 0; } } @media (max-width: 600px) { .festival-name { font-size: 3.5rem; } .tagline { font-size: 1rem; } .dates { font-size: 1.2rem; } .imagery { height: 180px; } .qr-section { flex-direction: column; gap: 2rem; } .qr-code { order: 2; } .qr-info { order: 1; text-align: center; } } </style> </head> <body> <div class="poster-container"> <div class="film-strip"></div> <div class="film-strip"></div> <div class="glitch-effect"></div> <header class="header"> <h1 class="festival-name">ECLIPSE</h1> <p class="tagline">INTERNATIONAL FILM FESTIVAL</p> <p class="dates">OCTOBER 14-21, 2024</p> <p class="location">METROPOLITAN ARTS CENTER • NEW YORK</p> </header> <div class="content"> <div class="imagery" id="imagery"></div> <div class="categories"> <div class="category">ARTHOUSE</div> <div class="category">DOCUMENTARY</div> <div class="category">EXPERIMENTAL</div> <div class="category">SCI-FI</div> <div class="category">NOIR</div> </div> <div class="qr-section"> <div class="qr-code" id="qr-code"> <svg width="80" height="80" viewBox="0 0 80 80"> <rect x="10" y="10" width="60" height="60" fill="black" /> <path d="M20 20h20v20h-20z M40 40h20v20h-20z" fill="white" /> <path d="M40 20h5v5h-5z M50 20h10v10h-10z M65 35h5v10h-5z M20 50h10v10h-10z" fill="white" /> </svg> </div> <div class="qr-info"> Scan to preview our <span class="highlight">exclusive trailer showcase</span> and access early bird tickets for special screenings and director Q&As. </div> </div> <button class="cta-button" id="cta-button">GET TICKETS</button> </div> <footer class="footer"> <p>SPONSORS: FILMCRAFT • CINÉART • VISION MEDIA • FRAMELIGHT</p> <div class="social-icons"> <div class="social-icon"> <svg width="15" height="15" viewBox="0 0 24 24" fill="white"> <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path> </svg> </div> <div class="social-icon"> <svg width="15" height="15" viewBox="0 0 24 24" fill="white"> <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path> </svg> </div> <div class="social-icon"> <svg width="15" height="15" viewBox="0 0 24 24" fill="white"> <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect> <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" fill="black"></path> <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></line> </svg> </div> </div> </footer> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Dynamic imagery with canvas const imagery = document.getElementById('imagery'); const canvas = document.createElement('canvas'); canvas.width = imagery.offsetWidth; canvas.height = imagery.offsetHeight; imagery.appendChild(canvas); const ctx = canvas.getContext('2d'); function drawFrame() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Background gradient const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height); gradient.addColorStop(0, 'rgba(13, 13, 21, 0.8)'); gradient.addColorStop(1, 'rgba(54, 52, 185, 0.3)'); ctx.fillStyle = gradient; ctx.fillRect(0, 0, canvas.width, canvas.height); // Film reel elements ctx.strokeStyle = 'rgba(255, 255, 255, 0.15)'; ctx.lineWidth = 2; // Create filmstrip dots for (let i = 0; i < 15; i++) { ctx.beginPath(); ctx.arc(canvas.width/2 + Math.sin(Date.now()/1000 + i) * 50, i * (canvas.height/15), 3, 0, Math.PI * 2); ctx.fillStyle = i % 3 === 0 ? '#f41b56' : 'rgba(255, 255, 255, 0.5)'; ctx.fill(); } // Abstract film frames ctx.globalAlpha = 0.1 + 0.05 * Math.sin(Date.now()/1000); for (let i = 0; i < 3; i++) { const x = Math.sin(Date.now()/2000 + i) * 50 + canvas.width/2 - 75; const y = i * (canvas.height/3) + 10; ctx.strokeRect(x, y, 150, 60); } ctx.globalAlpha = 1; // Cinematic beam ctx.beginPath(); ctx.moveTo(canvas.width/2, 0); ctx.lineTo(canvas.width/2 + 50 * Math.sin(Date.now()/3000), canvas.height); ctx.lineTo(canvas.width/2 - 50 * Math.sin(Date.now()/3000), canvas.height); ctx.closePath(); const beamGradient = ctx.createLinearGradient(0, 0, 0, canvas.height); beamGradient.addColorStop(0, 'rgba(244, 27, 86, 0.05)'); beamGradient.addColorStop(1, 'rgba(255, 202, 40, 0.15)'); ctx.fillStyle = beamGradient; ctx.fill(); requestAnimationFrame(drawFrame); } drawFrame(); // Interactive QR code const qrCode = document.getElementById('qr-code'); qrCode.addEventListener('mouseover', () => { qrCode.style.backgroundColor = '#ffca28'; }); qrCode.addEventListener('mouseout', () => { qrCode.style.backgroundColor = 'white'; }); // Button interaction const ctaButton = document.getElementById('cta-button'); ctaButton.addEventListener('click', () => { ctaButton.innerText = 'COMING SOON'; ctaButton.style.backgroundColor = '#3634b9'; // Add glitch effect on click const glitchEffect = document.querySelector('.glitch-effect'); glitchEffect.style.opacity = '0.2'; setTimeout(() => { glitchEffect.style.opacity = '0'; }, 1000); }); // Category hover effect const categories = document.querySelectorAll('.category'); categories.forEach(category => { category.addEventListener('mouseover', () => { // Temporarily boost the glitch effect when hovering categories const glitchEffect = document.querySelector('.glitch-effect'); glitchEffect.style.opacity = '0.05'; setTimeout(() => { glitchEffect.style.opacity = '0'; }, 500); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ELECTRO FLUX: Live Concert Experience</title> <style> @import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Bungee+Shade&family=Quicksand:wght@400;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --neon-pink: #ff00ff; --neon-blue: #00ffff; --neon-purple: #9900ff; --neon-green: #39ff14; --dark-bg: #0a0a1a; } body { font-family: 'Quicksand', sans-serif; background: var(--dark-bg); color: white; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; } .poster { width: 100%; max-width: 700px; height: 700px; padding: 2rem; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; } .background-gradient { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(10,10,26,1) 0%, rgba(60,10,90,0.8) 100%); z-index: -2; } .sound-waves { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; display: flex; justify-content: space-around; align-items: center; padding: 0 10%; } .wave { width: 8px; height: 100px; margin: 0 2px; border-radius: 4px; background: var(--neon-blue); animation: wave 1.5s infinite ease-in-out; filter: blur(1px); box-shadow: 0 0 10px var(--neon-blue); opacity: 0.6; } @keyframes wave { 0%, 100% { height: 50px; } 50% { height: 200px; } } .title { font-family: 'Bungee Shade', cursive; font-size: 4.2rem; text-align: center; background: linear-gradient(90deg, var(--neon-pink), var(--neon-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; text-shadow: 0 0 20px rgba(255, 0, 255, 0.5); margin-top: 2rem; transform: skew(-5deg); transition: transform 0.3s ease; z-index: 2; } .title:hover { transform: skew(0deg) scale(1.05); } .subtitle { font-family: 'Audiowide', cursive; font-size: 1.8rem; text-align: center; color: var(--neon-green); text-shadow: 0 0 10px var(--neon-green); margin-top: -0.5rem; letter-spacing: 2px; } .details { text-align: center; margin: 1.5rem 0; z-index: 2; } .date, .venue { font-family: 'Audiowide', cursive; font-size: 1.4rem; margin: 0.5rem 0; text-shadow: 0 0 5px white; } .artists { display: flex; flex-wrap: wrap; justify-content: center; margin: 2rem 0; gap: 1rem; z-index: 2; } .artist { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(5px); border-radius: 12px; padding: 0.8rem 1.2rem; font-size: 1rem; font-weight: bold; color: white; border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; cursor: pointer; } .artist:hover { background: var(--neon-purple); transform: translateY(-5px); box-shadow: 0 5px 15px rgba(153, 0, 255, 0.5); } .listen-btn { font-family: 'Audiowide', cursive; background: linear-gradient(90deg, var(--neon-purple), var(--neon-blue)); border: none; color: white; padding: 1rem 2rem; font-size: 1.2rem; border-radius: 50px; cursor: pointer; margin: 0 auto; display: block; transition: all 0.3s ease; box-shadow: 0 0 15px var(--neon-blue); position: relative; overflow: hidden; z-index: 2; } .listen-btn:hover { transform: scale(1.05); box-shadow: 0 0 25px var(--neon-blue); } .listen-btn:before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: all 0.5s ease; } .listen-btn:hover:before { left: 100%; } .tickets-info { text-align: center; margin-top: 2rem; z-index: 2; } .price { font-family: 'Audiowide', cursive; font-size: 1.8rem; color: var(--neon-green); margin-bottom: 0.5rem; } .qr-code { width: 100px; height: 100px; background: white; margin: 1rem auto; position: relative; border-radius: 10px; display: flex; justify-content: center; align-items: center; transition: transform 0.3s ease; } .qr-code:hover { transform: scale(1.1); } .qr-code img { width: 85%; height: 85%; object-fit: contain; } .qr-code:after { content: "Scan for tickets"; position: absolute; bottom: -25px; font-size: 0.8rem; color: white; width: 100%; text-align: center; } .pulse { position: absolute; width: 100%; height: 100%; border-radius: 10px; box-shadow: 0 0 0 rgba(255, 255, 255, 0.7); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } .footer { font-size: 0.8rem; text-align: center; margin-top: 1rem; opacity: 0.8; z-index: 2; } .playlist-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); width: 80%; max-width: 500px; background: rgba(10, 10, 26, 0.95); backdrop-filter: blur(10px); border-radius: 20px; padding: 2rem; box-shadow: 0 0 30px var(--neon-purple); z-index: 10; opacity: 0; visibility: hidden; transition: all 0.3s ease; border: 1px solid rgba(255, 255, 255, 0.1); } .playlist-modal.active { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .playlist-title { font-family: 'Audiowide', cursive; font-size: 1.5rem; color: white; text-align: center; margin-bottom: 1.5rem; } .playlist-tracks { display: flex; flex-direction: column; gap: 1rem; max-height: 300px; overflow-y: auto; padding-right: 0.5rem; } .track { display: flex; align-items: center; gap: 1rem; background: rgba(255, 255, 255, 0.05); padding: 0.8rem; border-radius: 10px; transition: all 0.2s ease; } .track:hover { background: rgba(255, 255, 255, 0.1); transform: translateX(5px); } .track-icon { width: 30px; height: 30px; background: var(--neon-pink); border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; } .track-details { flex-grow: 1; } .track-name { font-weight: bold; margin-bottom: 0.2rem; } .track-artist { font-size: 0.8rem; opacity: 0.8; } .close-modal { position: absolute; top: 15px; right: 15px; width: 30px; height: 30px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.2s ease; } .close-modal:hover { background: rgba(255, 255, 255, 0.2); transform: rotate(90deg); } .close-modal:before, .close-modal:after { content: ""; position: absolute; width: 15px; height: 2px; background: white; } .close-modal:before { transform: rotate(45deg); } .close-modal:after { transform: rotate(-45deg); } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 5; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .overlay.active { opacity: 1; visibility: visible; } @media (max-width: 700px) { .title { font-size: 3rem; } .subtitle { font-size: 1.3rem; } .date, .venue { font-size: 1.1rem; } .artist { font-size: 0.9rem; padding: 0.6rem 1rem; } .listen-btn { padding: 0.8rem 1.5rem; font-size: 1rem; } .price { font-size: 1.5rem; } .qr-code { width: 80px; height: 80px; } } @media (max-width: 500px) { .title { font-size: 2.5rem; } .poster { padding: 1.5rem; } .artists { gap: 0.5rem; } .artist { padding: 0.5rem 0.8rem; font-size: 0.8rem; } } </style> </head> <body> <div class="poster"> <div class="background-gradient"></div> <div class="sound-waves" id="sound-waves"></div> <div class="title">ELECTRO FLUX</div> <div class="subtitle">LIVE CONCERT EXPERIENCE</div> <div class="details"> <div class="date">SEPTEMBER 17, 2024 • 8:00 PM</div> <div class="venue">NEON DOME ARENA • LA</div> </div> <div class="artists"> <div class="artist">SYNTHETIC PULSE</div> <div class="artist">AURORA BEAT</div> <div class="artist">DIGITAL NOVA</div> <div class="artist">PRISMATIC SOUND</div> <div class="artist">QUANTUM FLUX</div> </div> <button class="listen-btn" id="listen-btn">PREVIEW PLAYLIST</button> <div class="tickets-info"> <div class="price">TICKETS FROM $75</div> <div class="qr-code"> <div class="pulse"></div> <svg viewBox="0 0 100 100"> <path d="M10,10 h20 v20 h-20 z M15,15 h10 v10 h-10 z M40,10 h20 v20 h-20 z M45,15 h10 v10 h-10 z M70,10 h20 v20 h-20 z M75,15 h10 v10 h-10 z M10,40 h20 v20 h-20 z M15,45 h10 v10 h-10 z M40,40 h20 v20 h-20 z M70,40 h20 v20 h-20 z M10,70 h20 v20 h-20 z M40,70 h20 v20 h-20 z M45,75 h10 v10 h-10 z M70,70 h20 v20 h-20 z" fill="black" /> </svg> </div> </div> <div class="footer"> #ElectroFluxLive • Organized by Neon Events Productions </div> </div> <div class="overlay" id="overlay"></div> <div class="playlist-modal" id="playlist-modal"> <div class="close-modal" id="close-modal"></div> <div class="playlist-title">ELECTRO FLUX: OFFICIAL PREVIEW</div> <div class="playlist-tracks"> <div class="track"> <div class="track-icon">▶</div> <div class="track-details"> <div class="track-name">Neon Horizon</div> <div class="track-artist">Synthetic Pulse</div> </div> </div> <div class="track"> <div class="track-icon">▶</div> <div class="track-details"> <div class="track-name">Digital Dreams</div> <div class="track-artist">Aurora Beat</div> </div> </div> <div class="track"> <div class="track-icon">▶</div> <div class="track-details"> <div class="track-name">Electric Pulse</div> <div class="track-artist">Digital Nova</div> </div> </div> <div class="track"> <div class="track-icon">▶</div> <div class="track-details"> <div class="track-name">Spectrum Dance</div> <div class="track-artist">Prismatic Sound</div> </div> </div> <div class="track"> <div class="track-icon">▶</div> <div class="track-details"> <div class="track-name">Quantum Field</div> <div class="track-artist">Quantum Flux</div> </div> </div> <div class="track"> <div class="track-icon">▶</div> <div class="track-details"> <div class="track-name">Neon Lights (Remix)</div> <div class="track-artist">Synthetic Pulse ft. Aurora Beat</div> </div> </div> <div class="track"> <div class="track-icon">▶</div> <div class="track-details"> <div class="track-name">Cybernetic Flow</div> <div class="track-artist">Digital Nova</div> </div> </div> </div> </div> <script> // Generate sound waves document.addEventListener('DOMContentLoaded', function() { const soundWaves = document.getElementById('sound-waves'); // Create 30 wave elements for(let i = 0; i < 30; i++) { const wave = document.createElement('div'); wave.className = 'wave'; wave.style.animationDelay = `${Math.random() * 1.5}s`; wave.style.height = `${Math.random() * 180 + 20}px`; // Randomize color a bit const colorChoice = Math.floor(Math.random() * 4); if (colorChoice === 0) { wave.style.background = 'var(--neon-blue)'; wave.style.boxShadow = '0 0 10px var(--neon-blue)'; } else if (colorChoice === 1) { wave.style.background = 'var(--neon-pink)'; wave.style.boxShadow = '0 0 10px var(--neon-pink)'; } else if (colorChoice === 2) { wave.style.background = 'var(--neon-purple)'; wave.style.boxShadow = '0 0 10px var(--neon-purple)'; } else { wave.style.background = 'var(--neon-green)'; wave.style.boxShadow = '0 0 10px var(--neon-green)'; } soundWaves.appendChild(wave); } // Listen button functionality const listenBtn = document.getElementById('listen-btn'); const playlistModal = document.getElementById('playlist-modal'); const closeModal = document.getElementById('close-modal'); const overlay = document.getElementById('overlay'); listenBtn.addEventListener('click', function() { playlistModal.classList.add('active'); overlay.classList.add('active'); }); closeModal.addEventListener('click', function() { playlistModal.classList.remove('active'); overlay.classList.remove('active'); }); overlay.addEventListener('click', function() { playlistModal.classList.remove('active'); overlay.classList.remove('active'); }); // Track play functionality const tracks = document.querySelectorAll('.track'); tracks.forEach(track => { track.addEventListener('click', function() { // Reset all tracks tracks.forEach(t => { t.style.background = 'rgba(255, 255, 255, 0.05)'; t.querySelector('.track-icon').textContent = '▶'; }); // Highlight this track track.style.background = 'rgba(153, 0, 255, 0.3)'; track.querySelector('.track-icon').textContent = '■'; }); }); // Make QR code interactive const qrCode = document.querySelector('.qr-code'); qrCode.addEventListener('click', function() { alert('QR code would normally open a ticket purchase page'); }); // Make artists interactive const artists = document.querySelectorAll('.artist'); artists.forEach(artist => { artist.addEventListener('mouseenter', function() { // Generate a unique audio-like animation for(let i = 0; i < 5; i++) { const wave = document.querySelectorAll('.wave')[Math.floor(Math.random() * 30)]; wave.style.height = `${Math.random() * 250 + 100}px`; } }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Future Ready Leadership Summit 2024</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Helvetica Neue', Arial, sans-serif; } body { background-color: #f5f5f5; display: flex; justify-content: center; align-items: center; min-height: 700px; width: 100%; overflow: hidden; } .poster { width: 650px; height: 650px; background-color: #ffffff; position: relative; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; display: flex; flex-direction: column; padding: 40px; transition: transform 0.3s ease; } .geometric-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.05; z-index: 0; } .accent-line { position: absolute; width: 3px; height: 100px; background-color: #3A5199; left: 20px; top: 40px; transform: scaleY(0); transform-origin: top; animation: lineGrow 1s ease forwards 0.3s; } @keyframes lineGrow { to { transform: scaleY(1); } } .content { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; } .header { margin-bottom: 30px; } .subtitle { font-size: 14px; color: #3A5199; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; margin-bottom: 5px; opacity: 0; transform: translateY(10px); animation: fadeUp 0.8s ease forwards 0.2s; } .title { font-size: 42px; font-weight: 700; color: #333; line-height: 1.1; margin-bottom: 10px; opacity: 0; transform: translateY(10px); animation: fadeUp 0.8s ease forwards 0.4s; } .tagline { font-size: 18px; color: #555; font-weight: 300; opacity: 0; transform: translateY(10px); animation: fadeUp 0.8s ease forwards 0.6s; } .details { margin-top: 30px; opacity: 0; animation: fadeIn 1s ease forwards 0.8s; } .detail-item { display: flex; align-items: flex-start; margin-bottom: 20px; } .detail-icon { width: 24px; height: 24px; margin-right: 15px; color: #3A5199; } .detail-text { font-size: 16px; color: #333; } .detail-label { font-weight: 600; margin-bottom: 2px; } .detail-value { color: #555; line-height: 1.4; } .speakers { margin-top: 20px; display: flex; flex-wrap: wrap; opacity: 0; animation: fadeIn 1s ease forwards 1s; } .speaker { margin-right: 20px; margin-bottom: 15px; position: relative; transition: transform 0.3s ease; } .speaker:hover { transform: translateY(-3px); } .speaker-img { width: 50px; height: 50px; border-radius: 50%; background-color: #e0e0e0; overflow: hidden; margin-bottom: 5px; } .speaker-name { font-size: 12px; font-weight: 600; max-width: 50px; text-align: center; } .register-btn { align-self: flex-start; margin-top: auto; padding: 15px 30px; background-color: #3A5199; color: white; border: none; font-weight: 600; font-size: 16px; cursor: pointer; transition: all 0.3s ease; border-radius: 3px; letter-spacing: 0.5px; opacity: 0; transform: translateY(10px); animation: fadeUp 0.8s ease forwards 1.2s; position: relative; overflow: hidden; } .register-btn:before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); transition: all 0.4s ease; } .register-btn:hover { background-color: #2A407A; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(58, 81, 153, 0.3); } .register-btn:hover:before { left: 100%; } .footer { margin-top: 30px; font-size: 12px; color: #777; opacity: 0; animation: fadeIn 1s ease forwards 1.4s; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { to { opacity: 1; } } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.75); display: flex; justify-content: center; align-items: center; z-index: 100; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .modal.show { opacity: 1; pointer-events: auto; } .modal-content { background-color: white; padding: 30px; border-radius: 5px; width: 80%; max-width: 500px; transform: translateY(20px); transition: transform 0.3s ease; position: relative; } .modal.show .modal-content { transform: translateY(0); } .close-modal { position: absolute; top: 15px; right: 15px; font-size: 24px; background: none; border: none; cursor: pointer; } .modal-title { font-size: 24px; margin-bottom: 20px; color: #333; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 600; color: #555; } .form-group input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 3px; font-size: 16px; } .submit-btn { background-color: #3A5199; color: white; border: none; padding: 12px 20px; font-size: 16px; border-radius: 3px; cursor: pointer; transition: background-color 0.3s ease; margin-top: 10px; } .submit-btn:hover { background-color: #2A407A; } /* Responsive adjustments */ @media (max-width: 700px) { .poster { width: 90%; height: auto; padding: 30px; } .title { font-size: 32px; } .tagline { font-size: 16px; } .modal-content { width: 90%; } } @media (max-width: 500px) { .poster { padding: 20px; } .title { font-size: 28px; } .details { margin-top: 20px; } .detail-item { margin-bottom: 15px; } .register-btn { padding: 12px 25px; font-size: 14px; } } </style> </head> <body> <div class="poster"> <div class="accent-line"></div> <div class="geometric-pattern" id="geometricPattern"></div> <div class="content"> <div class="header"> <div class="subtitle">Annual Leadership Conference</div> <h1 class="title">Future Ready Leadership Summit 2024</h1> <p class="tagline">Strategic Resilience in an AI-Driven Economy</p> </div> <div class="details"> <div class="detail-item"> <div class="detail-icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /> </svg> </div> <div class="detail-text"> <div class="detail-label">Date & Time</div> <div class="detail-value">October 15-16, 2024 | 9:00 AM - 5:00 PM</div> </div> </div> <div class="detail-item"> <div class="detail-icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /> </svg> </div> <div class="detail-text"> <div class="detail-label">Location</div> <div class="detail-value">Global Business Center<br>200 Innovation Avenue, New York</div> </div> </div> <div class="detail-item"> <div class="detail-icon"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> </svg> </div> <div class="detail-text"> <div class="detail-label">Key Topics</div> <div class="detail-value">AI Integration in Enterprise • Leadership in Digital Transformation • Sustainable Business Models • Future of Work</div> </div> </div> </div> <div class="speakers"> <div class="speaker"> <div class="speaker-img"></div> <div class="speaker-name">Dr. Sarah Chen</div> </div> <div class="speaker"> <div class="speaker-img"></div> <div class="speaker-name">Mark Williams</div> </div> <div class="speaker"> <div class="speaker-img"></div> <div class="speaker-name">Elena Rodriguez</div> </div> <div class="speaker"> <div class="speaker-img"></div> <div class="speaker-name">James Park</div> </div> </div> <button class="register-btn" id="registerBtn">Reserve Your Seat</button> <div class="footer"> Presented by Strategic Business Alliance • www.futureleadershipsummit.com </div> </div> </div> <div class="modal" id="registerModal"> <div class="modal-content"> <button class="close-modal" id="closeModal">×</button> <h2 class="modal-title">Reserve Your Seat</h2> <div class="form-group"> <label for="name">Full Name</label> <input type="text" id="name" placeholder="Enter your full name"> </div> <div class="form-group"> <label for="email">Email Address</label> <input type="email" id="email" placeholder="Enter your email address"> </div> <div class="form-group"> <label for="company">Company</label> <input type="text" id="company" placeholder="Enter your company name"> </div> <button class="submit-btn" id="submitBtn">Submit Registration</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Generate geometric patterns const patternCanvas = document.createElement('canvas'); patternCanvas.width = 700; patternCanvas.height = 700; const ctx = patternCanvas.getContext('2d'); // Draw pattern const drawPattern = () => { ctx.clearRect(0, 0, 700, 700); ctx.strokeStyle = '#3A5199'; ctx.lineWidth = 1; // Draw lines for (let i = 0; i < 20; i++) { // Horizontal lines ctx.beginPath(); ctx.moveTo(0, i * 40); ctx.lineTo(700, i * 40); ctx.stroke(); // Vertical lines ctx.beginPath(); ctx.moveTo(i * 40, 0); ctx.lineTo(i * 40, 700); ctx.stroke(); } // Draw circles for (let i = 0; i < 5; i++) { for (let j = 0; j < 5; j++) { ctx.beginPath(); ctx.arc(i * 150 + 50, j * 150 + 50, 15, 0, Math.PI * 2); ctx.stroke(); } } document.getElementById('geometricPattern').style.backgroundImage = `url(${patternCanvas.toDataURL()})`; }; drawPattern(); // Modal functionality const modal = document.getElementById('registerModal'); const registerBtn = document.getElementById('registerBtn'); const closeModal = document.getElementById('closeModal'); const submitBtn = document.getElementById('submitBtn'); registerBtn.addEventListener('click', function() { modal.classList.add('show'); }); closeModal.addEventListener('click', function() { modal.classList.remove('show'); }); submitBtn.addEventListener('click', function() { const nameInput = document.getElementById('name'); const emailInput = document.getElementById('email'); const companyInput = document.getElementById('company'); if (nameInput.value && emailInput.value && companyInput.value) { // In a real application, this would submit the form // Instead, we'll just show a success message and close the modal alert('Registration successful! Check your email for confirmation.'); nameInput.value = ''; emailInput.value = ''; companyInput.value = ''; modal.classList.remove('show'); } else { alert('Please fill in all required fields.'); } }); // Close modal when clicking outside window.addEventListener('click', function(event) { if (event.target === modal) { modal.classList.remove('show'); } }); // Prevent default form submission behavior document.querySelectorAll('form').forEach(form => { form.addEventListener('submit', e => { e.preventDefault(); }); }); // Add basic animation to speakers document.querySelectorAll('.speaker').forEach((speaker, index) => { speaker.style.animationDelay = `${1.2 + (index * 0.1)}s`; }); // Create simulated speaker images document.querySelectorAll('.speaker-img').forEach((img, index) => { const canvas = document.createElement('canvas'); canvas.width = 50; canvas.height = 50; const ctx = canvas.getContext('2d'); // Draw circle ctx.fillStyle = ['#3A5199', '#507ACC', '#6495ED', '#4169E1'][index % 4]; ctx.beginPath(); ctx.arc(25, 25, 25, 0, Math.PI * 2); ctx.fill(); // Draw face shape ctx.fillStyle = '#FFFFFF'; ctx.beginPath(); ctx.arc(25, 20, 10, 0, Math.PI * 2); ctx.fill(); ctx.beginPath(); ctx.arc(25, 35, 5, 0, Math.PI); ctx.fill(); img.style.backgroundImage = `url(${canvas.toDataURL()})`; img.style.backgroundSize = 'cover'; }); }); </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; } body { font-family: 'Playfair Display', Georgia, serif; background-color: #f8f5e9; color: #2b2014; display: flex; justify-content: center; align-items: center; min-height: 700px; width: 100%; overflow: hidden; perspective: 1000px; } .poster { width: 90%; max-width: 600px; height: auto; aspect-ratio: 5/7; background-color: #f0e6d2; border: 12px solid #4a3c29; position: relative; box-shadow: 0 10px 30px rgba(43, 32, 20, 0.3); overflow: hidden; padding: 40px 30px; transform-style: preserve-3d; transition: transform 0.7s ease-out; } .poster:hover { transform: rotateY(5deg); } .texture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%234a3c29' fill-opacity='0.06' fill-rule='evenodd'/%3E%3C/svg%3E"); mix-blend-mode: multiply; opacity: 0.7; pointer-events: none; } .bookmark { position: absolute; top: -5px; right: 40px; width: 40px; height: 80px; background-color: #8c2e2e; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); transform: translateZ(20px); transition: transform 0.3s ease; } .poster:hover .bookmark { transform: translateZ(30px) translateY(5px); } .new-release { position: absolute; top: 15px; left: -35px; background-color: #8c2e2e; color: #f0e6d2; padding: 5px 40px; font-size: 12px; letter-spacing: 1px; transform: rotate(-45deg); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); z-index: 10; } .content { display: flex; flex-direction: column; height: 100%; position: relative; z-index: 2; } .publisher { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; color: #8c2e2e; opacity: 0.8; } .title { font-size: 3.8rem; line-height: 0.9; margin-bottom: 15px; color: #2b2014; font-weight: 700; letter-spacing: -1px; transform: translateZ(10px); transition: transform 0.5s ease; } .poster:hover .title { transform: translateZ(20px); } .subtitle { font-size: 1.3rem; font-style: italic; margin-bottom: 20px; color: #5a4832; opacity: 0.9; } .author { font-size: 1.5rem; margin-bottom: 30px; font-weight: 600; color: #8c2e2e; } .by { font-style: italic; font-weight: normal; font-size: 1.1rem; color: #5a4832; } .description { font-size: 0.9rem; line-height: 1.5; margin-bottom: 30px; color: #3a2e20; max-width: 90%; } .icon-container { display: flex; flex-direction: column; align-items: center; margin-top: auto; } .icon { width: 60px; height: 60px; margin-bottom: 15px; opacity: 0.7; transition: opacity 0.3s, transform 0.5s; transform-origin: center bottom; } .poster:hover .icon { opacity: 1; transform: translateZ(15px) rotate(-5deg); } .release-date { font-size: 0.9rem; text-align: center; font-style: italic; color: #5a4832; } .ink-spots { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; z-index: 1; opacity: 0.1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='%232b2014' fill-opacity='1'%3E%3Cpath d='M25 25c0 5.523-4.477 10-10 10S5 30.523 5 25s4.477-10 10-10 10 4.477 10 10zM75 25c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10 10 4.477 10 10zM25 75c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10 10 4.477 10 10zM75 75c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10 10 4.477 10 10z'/%3E%3C/g%3E%3C/svg%3E"); } .corner { position: absolute; width: 30px; height: 30px; background-color: transparent; z-index: 3; } .corner-tl { top: 0; left: 0; border-top: 3px solid #5a4832; border-left: 3px solid #5a4832; } .corner-tr { top: 0; right: 0; border-top: 3px solid #5a4832; border-right: 3px solid #5a4832; } .corner-bl { bottom: 0; left: 0; border-bottom: 3px solid #5a4832; border-left: 3px solid #5a4832; } .corner-br { bottom: 0; right: 0; border-bottom: 3px solid #5a4832; border-right: 3px solid #5a4832; } @media (max-width: 600px) { .poster { padding: 30px 20px; } .title { font-size: 2.5rem; } .subtitle { font-size: 1rem; } .author { font-size: 1.2rem; } .description { font-size: 0.8rem; margin-bottom: 20px; } .icon { width: 40px; height: 40px; } .bookmark { right: 30px; width: 30px; height: 60px; } } @keyframes float { 0% { transform: translateZ(15px) translateY(0); } 50% { transform: translateZ(15px) translateY(-5px); } 100% { transform: translateZ(15px) translateY(0); } } </style> </head> <body> <div class="poster"> <div class="texture"></div> <div class="ink-spots"></div> <div class="bookmark"></div> <div class="new-release">NEW RELEASE</div> <div class="corner corner-tl"></div> <div class="corner corner-tr"></div> <div class="corner corner-bl"></div> <div class="corner corner-br"></div> <div class="content"> <div class="publisher">Thornfield Press</div> <h1 class="title">Whispers of Antiquity</h1> <div class="subtitle">A journey through forgotten libraries</div> <div class="author"><span class="by">by</span> Eleanor Blackwood</div> <p class="description">"A masterful blend of historical intrigue and literary exploration. Blackwood's prose transports readers through centuries of lost knowledge and rediscovered manuscripts with the grace of a true bibliophile."</p> <div class="icon-container"> <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="#5a4832" d="M467.14 39.96c-58.08 47.58-124.41 75.92-199.5 85.76-35.68 9.52-67.58 13.26-96.49 11.23-28.91-2.03-55.25-8.32-79.55-18.97-24.3-10.65-45.94-24.63-65.11-42.04C6.33 58.52-6.35 39.9 6.33 30.92c12.68-8.98 38.54 9.52 77.52 25.47 38.98 15.95 85.47 24.94 139.18 23.44 53.71-1.5 114.64-13.25 184.28-42.04 69.64-28.78 75.24-3.32 59.83 2.17zm-115.47 118.7c-32.38 0-61.04 6.3-86.36 18.97-25.33 12.67-48.22 29.84-68.79 51.57-20.57 21.72-36.57 46.36-48.22 74.1-11.65 27.75-17.48 56.53-17.48 86.27 0 29.74 5.83 58.52 17.48 86.27 11.65 27.74 27.65 52.38 48.22 74.1 20.57 21.73 43.46 38.9 68.79 51.57 25.32 12.67 53.98 18.97 86.36 18.97 32.38 0 60.97-6.3 86.27-18.97 25.3-12.67 48.14-29.84 68.67-51.57 20.52-21.72 36.49-46.36 48.12-74.1 11.62-27.75 17.44-56.53 17.44-86.27 0-29.74-5.82-58.52-17.44-86.27-11.63-27.74-27.6-52.38-48.12-74.1-20.53-21.73-43.37-38.9-68.67-51.57-25.3-12.67-53.89-18.97-86.27-18.97zm0 60.7c23.43 0 44.67 4.54 63.87 13.69 19.19 9.15 35.66 21.46 49.59 37.05 13.93 15.59 24.6 33.71 32.23 54.44 7.62 20.72 11.43 42.77 11.43 66.03 0 23.26-3.81 45.31-11.43 66.03-7.63 20.73-18.3 38.85-32.23 54.44-13.93 15.59-30.4 27.9-49.59 37.05-19.2 9.15-40.44 13.69-63.87 13.69-23.43 0-44.77-4.54-64.02-13.69-19.25-9.15-35.74-21.46-49.66-37.05-13.92-15.59-24.59-33.71-32.12-54.44-7.53-20.72-11.32-42.77-11.32-66.03 0-23.26 3.79-45.31 11.32-66.03 7.53-20.73 18.2-38.85 32.12-54.44 13.92-15.59 30.41-27.9 49.66-37.05 19.25-9.15 40.59-13.69 64.02-13.69zm0 280.87c-12.9-25.8-25.8-44.08-38.7-54.98-12.9-10.9-25.05-16.3-36.34-16.3-11.29 0-18.85 7.07-22.89 21.13-4.04 14.06-4.04 28.13 0 42.19 4.04 14.06 9.23 28.12 15.58 42.18 6.36 14.07 11.3 28.13 14.82 42.19 3.53 14.06 4.54 28.12 3.03 42.18-1.51 14.06-7.87 28.13-19.36 42.19 19.35 14.06 38.7 23.43 58.06 27.74 19.35 4.31 37.19 6.56 53.52 6.81 16.33.25 31.15-1.26 44.3-4.54 13.16-3.29 24.2-8.07 33.06-14.31 8.87-6.24 15.32-14.31 19.36-24.21 4.03-9.9 6.05-21.54 6.05-35.13 0-13.59-3.03-27.74-9.08-42.18-6.05-14.45-13.92-29.13-23.64-43.94-9.73-14.82-20.11-29.4-31.15-43.95-11.04-14.56-20.87-28.12-29.48-40.93-8.62-12.82-14.67-24.21-18.2-34.36-3.54-10.15-1.77-17.22 5.3-21.13-21.63 31.3-21.63 61.85 0 91.65 21.62 29.79 21.62 60.34 0 91.65 46.91-93.82 46.91-156.37 0-187.65z"/> </svg> <div class="release-date">Available October 15, 2023</div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const poster = document.querySelector('.poster'); const title = document.querySelector('.title'); const icon = document.querySelector('.icon'); // Parallax effect on mousemove poster.addEventListener('mousemove', (e) => { const xAxis = (window.innerWidth / 2 - e.pageX) / 25; const yAxis = (window.innerHeight / 2 - e.pageY) / 25; poster.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; // Calculate position for elements inside poster based on mouse const titleX = (e.offsetX - poster.offsetWidth / 2) / 40; const titleY = (e.offsetY - poster.offsetHeight / 2) / 40; title.style.transform = `translateZ(25px) translate(${titleX}px, ${titleY}px)`; icon.style.transform = `translateZ(20px) translate(${titleX * 0.5}px, ${titleY * 0.5}px) rotate(${titleX}deg)`; }); // Return to normal when mouse leaves poster.addEventListener('mouseleave', () => { poster.style.transform = 'rotateY(0deg) rotateX(0deg)'; title.style.transform = 'translateZ(10px)'; icon.style.transform = 'translateZ(15px) rotate(0deg)'; // Add floating animation when not being hovered icon.style.animation = 'float 3s ease-in-out infinite'; }); // Stop floating animation when hovering again poster.addEventListener('mouseenter', () => { icon.style.animation = 'none'; }); // Add some random ink blots const inkBlots = () => { const inkSpots = document.querySelector('.ink-spots'); for (let i = 0; i < 5; i++) { const spot = document.createElement('div'); spot.style.position = 'absolute'; spot.style.width = `${Math.random() * 30 + 10}px`; spot.style.height = `${Math.random() * 30 + 10}px`; spot.style.borderRadius = '50%'; spot.style.backgroundColor = '#2b2014'; spot.style.opacity = `${Math.random() * 0.2}`; spot.style.top = `${Math.random() * 100}%`; spot.style.left = `${Math.random() * 100}%`; spot.style.transform = `rotate(${Math.random() * 360}deg) scale(${Math.random() * 0.5 + 0.5})`; inkSpots.appendChild(spot); } }; inkBlots(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Equal Justice Now Poster</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #0a0a0a; color: #f5f5f5; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; padding: 20px; perspective: 1000px; } .poster { width: 100%; max-width: 680px; height: 680px; background-color: #0a0a0a; position: relative; overflow: hidden; border: 2px solid rgba(255, 255, 255, 0.1); box-shadow: 0 0 30px rgba(255, 0, 0, 0.2); transition: transform 0.6s ease-out; transform-style: preserve-3d; } .poster:hover { transform: rotateY(2deg) rotateX(2deg); box-shadow: 0 0 40px rgba(255, 0, 0, 0.4); } .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: repeating-linear-gradient( 45deg, #0a0a0a, #0a0a0a 10px, #0f0f0f 10px, #0f0f0f 20px ); opacity: 0.8; z-index: 1; } .texture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E"); opacity: 0.6; z-index: 2; } .content { position: relative; z-index: 3; padding: 30px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .headline { font-size: 3.8rem; font-weight: 900; line-height: 1; margin-top: 20px; text-transform: uppercase; color: #ff3333; text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.7); letter-spacing: -1px; transform: skew(-5deg); max-width: 95%; transition: all 0.3s ease; } .headline span { display: block; font-size: 1.6rem; color: #fff; margin-top: 5px; font-weight: 700; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7); } .illustration-container { position: relative; height: 55%; display: flex; justify-content: center; align-items: center; overflow: hidden; } .illustration { width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 600' fill='none'%3E%3Cpath d='M400 100C400 100 250 150 150 250C50 350 50 550 50 550' stroke='%23FF3333' stroke-width='8' stroke-linecap='round' stroke-dasharray='15 20'/%3E%3Cpath d='M400 100C400 100 550 150 650 250C750 350 750 550 750 550' stroke='%23FFFFFF' stroke-width='8' stroke-linecap='round' stroke-dasharray='15 20'/%3E%3Ccircle cx='400' cy='100' r='40' fill='%23FF3333'/%3E%3Crect x='370' y='200' width='60' height='100' fill='%23FFFFFF'/%3E%3Ccircle cx='400' cy='350' r='120' fill='none' stroke='%23FFFFFF' stroke-width='8'/%3E%3Cpath d='M330 350H470' stroke='%23FF3333' stroke-width='8'/%3E%3Cpath d='M400 280V420' stroke='%23FF3333' stroke-width='8'/%3E%3C/svg%3E"); background-size: contain; background-position: center; background-repeat: no-repeat; opacity: 0.85; filter: contrast(120%) brightness(110%); mix-blend-mode: screen; transition: all 0.5s ease; } .illustration-container:hover .illustration { filter: contrast(140%) brightness(120%); transform: scale(1.05); } .tagline { font-size: 1.8rem; font-weight: 700; line-height: 1.2; margin: 10px 0 20px; color: #ffffff; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5); max-width: 90%; } .info { display: flex; justify-content: space-between; align-items: flex-end; } .date-location { font-size: 1.3rem; font-weight: 700; line-height: 1.4; color: #ff3333; text-transform: uppercase; } .date-location span { display: block; font-size: 0.9rem; color: #ccc; } .call-to-action { position: relative; padding: 14px 30px; background-color: #ff3333; color: #fff; font-size: 1.2rem; font-weight: 700; text-transform: uppercase; border: none; border-radius: 4px; cursor: pointer; overflow: hidden; transition: all 0.3s ease; transform: skew(-5deg); box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.7); } .call-to-action:hover { background-color: #fff; color: #ff3333; transform: skew(-5deg) scale(1.05); } .call-to-action::before { content: ''; position: absolute; top: -10px; left: -20px; width: 40px; height: 150%; background-color: rgba(255, 255, 255, 0.3); transform: rotate(20deg); transition: all 0.6s ease; } .call-to-action:hover::before { left: 120%; } .hashtag { position: absolute; bottom: 15px; right: 20px; font-size: 1rem; font-weight: 700; color: #fff; opacity: 0.6; transition: all 0.3s ease; } .hashtag:hover { opacity: 1; color: #ff3333; transform: scale(1.05); } .noise { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); opacity: 0.05; pointer-events: none; z-index: 4; mix-blend-mode: overlay; } .stamp { position: absolute; top: 20px; right: 20px; width: 100px; height: 100px; border: 3px solid #ff3333; border-radius: 50%; display: flex; justify-content: center; align-items: center; transform: rotate(12deg); color: #ff3333; font-weight: 900; font-size: 0.9rem; text-align: center; line-height: 1; z-index: 5; text-transform: uppercase; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: rotate(12deg) scale(1); opacity: 1; } 50% { transform: rotate(12deg) scale(1.05); opacity: 0.9; } 100% { transform: rotate(12deg) scale(1); opacity: 1; } } @media (max-width: 600px) { .headline { font-size: 2.8rem; } .headline span { font-size: 1.2rem; } .tagline { font-size: 1.4rem; } .date-location { font-size: 1.1rem; } .call-to-action { padding: 10px 20px; font-size: 1rem; } .stamp { width: 80px; height: 80px; font-size: 0.7rem; } } @media (max-width: 400px) { .content { padding: 20px; } .headline { font-size: 2.4rem; } .tagline { font-size: 1.2rem; } } </style> </head> <body> <div class="poster"> <div class="background"></div> <div class="texture"></div> <div class="content"> <div> <h1 class="headline">EQUAL JUSTICE NOW<span>THE TIME FOR SILENCE IS OVER</span></h1> </div> <div class="illustration-container"> <div class="illustration"></div> </div> <div> <p class="tagline">When the system is broken, we stand together to rebuild it. Justice isn't just a word—it's our demand.</p> <div class="info"> <div class="date-location"> July 17, 2023 • 11AM <span>Civic Center Plaza • All Voices Welcome</span> </div> <button class="call-to-action">Join Us</button> </div> </div> </div> <div class="noise"></div> <div class="stamp">Act Now<br>Before<br>It's Too<br>Late</div> <div class="hashtag">#EqualJusticeNow</div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const poster = document.querySelector('.poster'); const headline = document.querySelector('.headline'); const callToAction = document.querySelector('.call-to-action'); // 3D effect on mouse move poster.addEventListener('mousemove', function(e) { const xAxis = (window.innerWidth / 2 - e.pageX) / 25; const yAxis = (window.innerHeight / 2 - e.pageY) / 25; poster.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`; }); // Reset position on mouse leave poster.addEventListener('mouseleave', function() { poster.style.transform = 'rotateY(0deg) rotateX(0deg)'; }); // Add some randomness to the headline position on load const randomX = Math.random() * 10 - 5; const randomY = Math.random() * 10 - 5; headline.style.transform = `skew(-5deg) translate(${randomX}px, ${randomY}px)`; // Call to action button effect callToAction.addEventListener('click', function(e) { e.preventDefault(); // Create ripple effect const ripple = document.createElement('div'); ripple.style.position = 'absolute'; ripple.style.width = '10px'; ripple.style.height = '10px'; ripple.style.background = 'rgba(255,255,255,0.7)'; ripple.style.borderRadius = '50%'; ripple.style.transform = 'scale(0)'; ripple.style.left = (e.offsetX) + 'px'; ripple.style.top = (e.offsetY) + 'px'; this.appendChild(ripple); // Animate ripple setTimeout(() => { ripple.style.transition = 'all 0.5s ease'; ripple.style.transform = 'scale(30)'; ripple.style.opacity = '0'; setTimeout(() => { ripple.remove(); }, 500); }, 10); // Show message on click const message = document.createElement('div'); message.style.position = 'fixed'; message.style.top = '50%'; message.style.left = '50%'; message.style.transform = 'translate(-50%, -50%)'; message.style.background = '#ff3333'; message.style.color = '#fff'; message.style.padding = '15px 30px'; message.style.borderRadius = '4px'; message.style.fontWeight = 'bold'; message.style.boxShadow = '0 4px 15px rgba(0,0,0,0.3)'; message.style.zIndex = '1000'; message.innerText = 'Thank you for standing with us!'; document.body.appendChild(message); setTimeout(() => { message.style.transition = 'all 0.5s ease'; message.style.opacity = '0'; message.style.transform = 'translate(-50%, -60%)'; setTimeout(() => { message.remove(); }, 500); }, 2000); }); // Make the hand-drawn illustration slightly animated const illustration = document.querySelector('.illustration'); setInterval(() => { const randomScale = 1 + (Math.random() * 0.01); const randomRotate = (Math.random() * 0.5) - 0.25; illustration.style.transform = `scale(${randomScale}) rotate(${randomRotate}deg)`; }, 1000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Environmental Awareness Poster</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body { background-color: #f8f5f0; color: #3a3a3a; display: flex; justify-content: center; align-items: center; min-height: 700px; overflow-x: hidden; } .poster-container { width: 100%; max-width: 700px; height: 700px; position: relative; overflow: hidden; background: linear-gradient(135deg, #e0ead8 0%, #c9ddb9 100%); border-radius: 12px; box-shadow: 0 25px 50px -12px rgba(86, 121, 78, 0.25); } .organic-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23739561' fill-opacity='0.06' fill-rule='evenodd'/%3E%3C/svg%3E"); opacity: 0.6; } .content { position: relative; padding: 40px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; z-index: 2; } .title { font-size: 3.5rem; font-weight: 700; color: #2c4a23; line-height: 1.1; margin-bottom: 24px; opacity: 0; transform: translateY(30px); animation: fadeUp 1s ease forwards 0.2s; } .subtitle { font-size: 1.2rem; color: #4a6741; font-weight: 500; letter-spacing: 0.5px; margin-bottom: 20px; max-width: 90%; opacity: 0; transform: translateY(30px); animation: fadeUp 1s ease forwards 0.4s; } .nature-elements { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; pointer-events: none; z-index: 1; } .leaf { position: absolute; border-radius: 50%; opacity: 0; animation: floatLeaf 20s infinite ease-in-out; } .leaf1 { width: 180px; height: 180px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50,0 C50,50 0,80 0,50 C0,20 20,0 50,0 Z' fill='%2385a675' /%3E%3C/svg%3E") no-repeat; background-size: contain; right: -40px; top: 80px; transform: rotate(45deg); animation-delay: 0s; } .leaf2 { width: 200px; height: 200px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50,0 C80,0 100,20 100,50 C100,80 50,100 50,50 Z' fill='%236c9954' /%3E%3C/svg%3E") no-repeat; background-size: contain; right: 80px; bottom: -60px; transform: rotate(120deg); animation-delay: 2s; } .leaf3 { width: 140px; height: 140px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0,50 C0,20 20,0 50,0 C80,0 100,20 100,50 C70,50 50,70 50,100 C50,70 30,50 0,50 Z' fill='%2379b259' /%3E%3C/svg%3E") no-repeat; background-size: contain; left: -30px; bottom: 30%; transform: rotate(-30deg); animation-delay: 1s; } .water-ripple { position: absolute; bottom: -100px; left: 50%; transform: translateX(-50%); width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(108, 169, 197, 0.1) 0%, rgba(108, 169, 197, 0) 70%); z-index: 1; animation: ripple 8s infinite ease-out; } .cta-section { margin-top: auto; opacity: 0; transform: translateY(30px); animation: fadeUp 1s ease forwards 0.6s; } .eco-facts { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; } .fact-card { background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(5px); border-radius: 8px; padding: 16px; flex: 1; min-width: 120px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); border-left: 3px solid #5a9847; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .fact-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); } .fact-number { font-size: 1.8rem; font-weight: 700; color: #3b7335; } .fact-text { font-size: 0.9rem; color: #4a6741; margin-top: 4px; } .take-action { background-color: #3b7335; color: white; border: none; padding: 18px 32px; font-size: 1rem; font-weight: 600; border-radius: 50px; cursor: pointer; margin-top: 16px; transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; box-shadow: 0 6px 12px rgba(59, 115, 53, 0.2); } .take-action:before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.7s ease; z-index: -1; } .take-action:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(59, 115, 53, 0.25); } .take-action:hover:before { left: 100%; } .interactive-panel { position: fixed; top: 0; right: -400px; width: 400px; height: 100%; background-color: rgba(255, 255, 255, 0.95); padding: 40px 30px; box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15); z-index: 100; transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); overflow-y: auto; } .interactive-panel.active { right: 0; } .close-panel { position: absolute; top: 20px; right: 20px; background: none; border: none; font-size: 1.5rem; color: #3a3a3a; cursor: pointer; } .panel-content { margin-top: 20px; } .panel-title { font-size: 1.5rem; color: #2c4a23; margin-bottom: 16px; border-bottom: 2px solid #5a9847; padding-bottom: 8px; } .panel-text { font-size: 1rem; line-height: 1.6; margin-bottom: 16px; color: #4a4a4a; } .action-list { list-style-type: none; margin: 24px 0; } .action-item { margin-bottom: 12px; display: flex; align-items: flex-start; } .action-item:before { content: "•"; color: #3b7335; font-size: 1.5rem; margin-right: 10px; line-height: 1; } .panel-footer { margin-top: 32px; font-size: 0.9rem; color: #666; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 90; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; } .overlay.active { opacity: 1; visibility: visible; } @keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes floatLeaf { 0% { opacity: 0; transform: translate(0, 0) rotate(0deg); } 10% { opacity: 0.8; } 90% { opacity: 0.8; } 100% { opacity: 0; transform: translate(20px, 20px) rotate(10deg); } } @keyframes ripple { 0% { transform: translateX(-50%) scale(0.3); opacity: 0.5; } 100% { transform: translateX(-50%) scale(1); opacity: 0; } } @media (max-width: 600px) { .content { padding: 30px 20px; } .title { font-size: 2.5rem; } .subtitle { font-size: 1rem; } .interactive-panel { width: 300px; } .eco-facts { flex-direction: column; gap: 12px; } .fact-card { min-width: auto; } } </style> </head> <body> <div class="poster-container"> <div class="organic-pattern"></div> <div class="content"> <div> <h1 class="title">Our Planet<br>Our Responsibility</h1> <p class="subtitle">Small actions today create waves of change for tomorrow's environment. Join the movement.</p> </div> <div class="cta-section"> <div class="eco-facts"> <div class="fact-card" data-fact="plastic"> <div class="fact-number">8M+</div> <div class="fact-text">Tons of plastic enter our oceans annually</div> </div> <div class="fact-card" data-fact="forest"> <div class="fact-number">15B</div> <div class="fact-text">Trees cut down globally each year</div> </div> <div class="fact-card" data-fact="species"> <div class="fact-number">28%</div> <div class="fact-text">Of species face extinction due to human activity</div> </div> </div> <button class="take-action">Take Action Now</button> </div> </div> <div class="nature-elements"> <div class="leaf leaf1"></div> <div class="leaf leaf2"></div> <div class="leaf leaf3"></div> <div class="water-ripple"></div> </div> </div> <div class="overlay"></div> <div class="interactive-panel"> <button class="close-panel">×</button> <div class="panel-content" id="panel-default"> <h2 class="panel-title">Join Our Environmental Movement</h2> <p class="panel-text">Every action counts in the fight to protect our planet. Learn how your daily choices impact the environment and what steps you can take today.</p> <h3 class="panel-title">5 Simple Ways to Help Now</h3> <ul class="action-list"> <li class="action-item">Reduce single-use plastics by carrying reusable bags, bottles, and containers</li> <li class="action-item">Conserve water by fixing leaks and taking shorter showers</li> <li class="action-item">Choose renewable energy sources for your home when possible</li> <li class="action-item">Shop locally to reduce transportation emissions</li> <li class="action-item">Start composting to divert waste from landfills</li> </ul> <p class="panel-footer">Together, we can make a difference. Click on any fact card above to learn more specific information.</p> </div> <div class="panel-content" id="panel-plastic" style="display: none;"> <h2 class="panel-title">Ocean Plastic Crisis</h2> <p class="panel-text">More than 8 million tons of plastic waste enter our oceans every year. At current rates, by 2050, there will be more plastic in the ocean than fish by weight.</p> <p class="panel-text">Plastic never fully biodegrades; it simply breaks down into smaller microplastics that harm marine life and eventually enter our food chain.</p> <h3 class="panel-title">What You Can Do</h3> <ul class="action-list"> <li class="action-item">Refuse single-use plastics like straws, cutlery, and takeout containers</li> <li class="action-item">Participate in local beach and waterway cleanups</li> <li class="action-item">Support legislation that limits plastic production</li> <li class="action-item">Choose products with minimal packaging</li> </ul> </div> <div class="panel-content" id="panel-forest" style="display: none;"> <h2 class="panel-title">Deforestation Crisis</h2> <p class="panel-text">Around 15 billion trees are cut down globally each year. Deforestation contributes to 15% of all greenhouse gas emissions and threatens 80% of Earth's land-dwelling species.</p> <p class="panel-text">Forests are being cleared primarily for agriculture, logging, and urban development, with devastating effects on biodiversity and climate stability.</p> <h3 class="panel-title">What You Can Do</h3> <ul class="action-list"> <li class="action-item">Choose FSC-certified wood and paper products</li> <li class="action-item">Reduce paper usage and recycle what you use</li> <li class="action-item">Support reforestation projects and tree-planting initiatives</li> <li class="action-item">Avoid products containing palm oil from unsustainable sources</li> </ul> </div> <div class="panel-content" id="panel-species" style="display: none;"> <h2 class="panel-title">Species Extinction Crisis</h2> <p class="panel-text">About 28% of assessed species are threatened with extinction due to human activities. We're currently experiencing extinction rates up to 1,000 times higher than natural background rates.</p> <p class="panel-text">Habitat loss, pollution, climate change, and overexploitation are the primary drivers of this unprecedented biodiversity loss.</p> <h3 class="panel-title">What You Can Do</h3> <ul class="action-list"> <li class="action-item">Support wildlife conservation organizations</li> <li class="action-item">Create wildlife-friendly spaces in your yard or community</li> <li class="action-item">Choose sustainably harvested seafood and avoid products from endangered species</li> <li class="action-item">Reduce your carbon footprint to mitigate climate change impacts</li> </ul> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const overlay = document.querySelector('.overlay'); const interactivePanel = document.querySelector('.interactive-panel'); const closePanel = document.querySelector('.close-panel'); const factCards = document.querySelectorAll('.fact-card'); const actionButton = document.querySelector('.take-action'); const panels = { default: document.getElementById('panel-default'), plastic: document.getElementById('panel-plastic'), forest: document.getElementById('panel-forest'), species: document.getElementById('panel-species') }; function showPanel(panelId = 'default') { // Hide all panels Object.values(panels).forEach(panel => { panel.style.display = 'none'; }); // Show selected panel panels[panelId].style.display = 'block'; // Show panel and overlay interactivePanel.classList.add('active'); overlay.classList.add('active'); } function hidePanel() { interactivePanel.classList.remove('active'); overlay.classList.remove('active'); } // Handle fact card clicks factCards.forEach(card => { card.addEventListener('click', () => { const factType = card.dataset.fact; showPanel(factType); }); }); // Take action button actionButton.addEventListener('click', () => { showPanel('default'); }); // Close panel closePanel.addEventListener('click', hidePanel); overlay.addEventListener('click', hidePanel); // Create animated leaves const natureElements = document.querySelector('.nature-elements'); function animateEnvironment() { // Animate existing leaves document.querySelectorAll('.leaf').forEach(leaf => { const rotation = Math.random() * 20 - 10; const x = Math.random() * 30 - 15; const y = Math.random() * 30 - 15; leaf.style.transform = `translate(${x}px, ${y}px) rotate(${rotation}deg)`; leaf.style.opacity = '0.8'; setTimeout(() => { leaf.style.transition = 'transform 15s ease-in-out, opacity 2s ease-in-out'; }, 100); }); } // Initial animation setTimeout(animateEnvironment, 1000); // Repeat animation periodically setInterval(animateEnvironment, 15000); // Add ripple effect function createRipple() { const ripple = document.createElement('div'); ripple.className = 'water-ripple'; natureElements.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 8000); } // Create initial ripple createRipple(); // Create new ripples periodically setInterval(createRipple, 8000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary: #1a2b4d; --secondary: #0072CE; --tertiary: #00BFB3; --light: #EDF2F7; --highlight: #FF5349; --text: #2D3748; --grid-unit: 10px; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; } body { display: flex; justify-content: center; align-items: center; min-height: 700px; background-color: var(--light); color: var(--text); overflow-x: hidden; } .poster-container { width: 100%; max-width: 700px; height: 700px; background-color: white; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); display: grid; grid-template-rows: 120px 1fr 80px; overflow: hidden; position: relative; } .poster-header { background: linear-gradient(110deg, var(--primary), var(--secondary)); padding: 20px; color: white; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } .grid-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: var(--grid-unit) var(--grid-unit); opacity: 0.6; } .conf-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 5px; z-index: 10; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .conf-date { font-size: 1rem; opacity: 0.9; margin-bottom: 2px; z-index: 10; } .conf-location { font-size: 0.9rem; opacity: 0.9; z-index: 10; } .poster-content { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; gap: 20px; padding: 20px; overflow-y: auto; } .section { padding: 15px; background-color: white; border-radius: 4px; box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; position: relative; } .section:hover { transform: translateY(-5px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); } .section-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; color: var(--primary); display: flex; align-items: center; } .section-title::before { content: ''; display: inline-block; width: 15px; height: 3px; background-color: var(--tertiary); margin-right: 10px; transition: width 0.3s ease; } .section:hover .section-title::before { width: 25px; } .section-content { font-size: 0.9rem; line-height: 1.5; } .data-visual { grid-column: span 2; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; padding: 20px; min-height: 200px; } .chart-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .bar-chart { display: flex; align-items: flex-end; justify-content: space-around; width: 100%; height: 100%; padding: 10px; } .bar { background: linear-gradient(to top, var(--tertiary), var(--secondary)); width: 40px; border-radius: 6px 6px 0 0; transition: height 1s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; opacity: 0; animation: barAppear 0.6s forwards; animation-delay: var(--delay); } @keyframes barAppear { from { opacity: 0; height: 0; } to { opacity: 1; height: var(--height); } } .label { position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%); text-align: center; font-size: 0.75rem; font-weight: 500; white-space: nowrap; } .value { position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 0.75rem; font-weight: 700; color: var(--primary); } .poster-footer { background-color: var(--primary); color: white; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; } .contact-info { font-size: 0.8rem; } .social-links { display: flex; gap: 15px; } .social-icon { width: 32px; height: 32px; background-color: rgba(255, 255, 255, 0.2); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 0.8rem; transition: all 0.3s ease; cursor: pointer; } .social-icon:hover { background-color: var(--tertiary); transform: scale(1.1); } .highlight { color: var(--tertiary); font-weight: 600; } .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .tag { background-color: var(--light); color: var(--primary); padding: 4px 8px; border-radius: 12px; font-size: 0.7rem; font-weight: 500; transition: all 0.2s ease; } .tag:hover { background-color: var(--tertiary); color: white; transform: scale(1.05); } .alert-banner { position: fixed; top: -60px; left: 50%; transform: translateX(-50%); background-color: var(--tertiary); color: white; padding: 10px 20px; border-radius: 4px; font-weight: 500; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); transition: top 0.3s ease; z-index: 100; } .alert-banner.show { top: 20px; } @media (max-width: 600px) { .poster-content { grid-template-columns: 1fr; } .data-visual { grid-column: span 1; } .conf-title { font-size: 1.5rem; } .bar { width: 30px; } } .floating-element { position: absolute; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; pointer-events: none; z-index: 5; } .sponsors { display: flex; justify-content: center; align-items: center; gap: 15px; } .sponsor { background-color: rgba(255, 255, 255, 0.8); padding: 3px 8px; border-radius: 3px; font-size: 0.75rem; font-weight: 500; } </style> </head> <body> <div class="alert-banner" id="alertBanner">Your action was successful!</div> <div class="poster-container"> <header class="poster-header"> <div class="grid-pattern"></div> <h1 class="conf-title">QUANTUM COMPUTING FRONTIERS 2023</h1> <p class="conf-date">October 15-17, 2023</p> <p class="conf-location">MIT Quantum Research Center, Cambridge, MA</p> </header> <main class="poster-content"> <div class="section"> <h2 class="section-title">Keynote Speakers</h2> <div class="section-content"> <p>World-renowned experts presenting breakthroughs in quantum computing:</p> <ul style="margin-left: 15px; margin-top: 5px;"> <li><span class="highlight">Dr. Elena Martínez</span> - Topological Quantum Computation</li> <li><span class="highlight">Prof. Hiroshi Takahashi</span> - Quantum Error Correction</li> <li><span class="highlight">Dr. James Wilson</span> - Quantum Machine Learning</li> </ul> <div class="tags"> <span class="tag">Quantum Gates</span> <span class="tag">Qubits</span> <span class="tag">Entanglement</span> </div> </div> </div> <div class="section"> <h2 class="section-title">Conference Tracks</h2> <div class="section-content"> <p>Our conference features four specialized tracks:</p> <ul style="margin-left: 15px; margin-top: 5px;"> <li><span class="highlight">Quantum Hardware Innovations</span></li> <li><span class="highlight">Quantum Algorithms & Software</span></li> <li><span class="highlight">Quantum Communication & Cryptography</span></li> <li><span class="highlight">Quantum Computing Applications</span></li> </ul> <div class="tags"> <span class="tag">Workshops</span> <span class="tag">Panel Discussions</span> <span class="tag">Demos</span> </div> </div> </div> <div class="data-visual section"> <h2 class="section-title">Research Focus Distribution</h2> <div class="chart-container"> <div class="bar-chart" id="researchChart"></div> </div> </div> </main> <footer class="poster-footer"> <div class="contact-info"> <p>Register at: <span class="highlight">quantumfrontiers2023.org</span></p> <div class="sponsors"> <span class="sponsor">IBM Quantum</span> <span class="sponsor">D-Wave</span> <span class="sponsor">Google AI</span> </div> </div> <div class="social-links"> <div class="social-icon" onclick="showAlert('Twitter profile opened')">T</div> <div class="social-icon" onclick="showAlert('LinkedIn profile opened')">in</div> <div class="social-icon" onclick="showAlert('GitHub repository opened')">G</div> </div> </footer> </div> <script> // Create floating elements in header function createFloatingElements() { const header = document.querySelector('.poster-header'); for (let i = 0; i < 15; i++) { const size = Math.random() * 40 + 10; const elem = document.createElement('div'); elem.classList.add('floating-element'); elem.style.width = `${size}px`; elem.style.height = `${size}px`; elem.style.left = `${Math.random() * 100}%`; elem.style.top = `${Math.random() * 100}%`; elem.style.opacity = Math.random() * 0.3 + 0.1; // Create animation const animDuration = Math.random() * 15 + 10; elem.style.animation = `float ${animDuration}s infinite ease-in-out`; // Add keyframes dynamically const keyframes = ` @keyframes float { 0% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(${Math.random() * 20 - 10}px, ${Math.random() * 20 - 10}px) rotate(${Math.random() * 40}deg); } 100% { transform: translate(0, 0) rotate(0deg); } } `; const styleSheet = document.createElement('style'); styleSheet.textContent = keyframes; document.head.appendChild(styleSheet); header.appendChild(elem); } } // Create and animate bar chart data function initBarChart() { const chartData = [ { label: "Quantum Gates", value: 28 }, { label: "Error Correction", value: 24 }, { label: "Algorithms", value: 32 }, { label: "Applications", value: 16 } ]; const chart = document.getElementById('researchChart'); chartData.forEach((item, index) => { const bar = document.createElement('div'); bar.classList.add('bar'); bar.style.setProperty('--height', `${item.value * 3}px`); bar.style.setProperty('--delay', `${index * 0.2}s`); const label = document.createElement('div'); label.classList.add('label'); label.textContent = item.label; const value = document.createElement('div'); value.classList.add('value'); value.textContent = `${item.value}%`; bar.appendChild(label); bar.appendChild(value); chart.appendChild(bar); }); } // Show alert banner function showAlert(message) { const banner = document.getElementById('alertBanner'); banner.textContent = message; banner.classList.add('show'); setTimeout(() => { banner.classList.remove('show'); }, 3000); } // Make sections interactive function initSections() { const sections = document.querySelectorAll('.section'); sections.forEach(section => { section.addEventListener('click', () => { const title = section.querySelector('.section-title').textContent; showAlert(`Exploring: ${title}`); }); }); } // Initialize all components document.addEventListener('DOMContentLoaded', () => { createFloatingElements(); initBarChart(); initSections(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Thunder Sharks Game Day Poster</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@700;800;900&family=Russo+One&display=swap'); body { background-color: #0a0a1a; color: white; height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; perspective: 1000px; } .poster-container { width: 600px; height: 650px; position: relative; transform-style: preserve-3d; transition: transform 0.6s ease-out; } .poster { width: 100%; height: 100%; background: linear-gradient(135deg, #0038b8, #003399); border-radius: 15px; overflow: hidden; position: relative; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); transform-style: preserve-3d; z-index: 1; } .energy-wave { position: absolute; width: 150%; height: 400px; background: linear-gradient(90deg, #00c6ff, #0072ff); top: -150px; left: -50px; border-radius: 50%; transform: skewY(-10deg); animation: waveMove 5s infinite alternate ease-in-out; opacity: 0.6; filter: blur(30px); } @keyframes waveMove { 0% { transform: skewY(-10deg) translateY(-10px); } 100% { transform: skewY(-5deg) translateY(10px); } } .poster-content { padding: 30px; position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; } .team-logo { align-self: center; margin-bottom: 20px; transform-style: preserve-3d; transform: translateZ(30px); transition: transform 0.3s ease; } .logo-container { width: 180px; height: 180px; background: rgba(255, 255, 255, 0.9); border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); position: relative; overflow: hidden; } .logo-container::before { content: ''; position: absolute; width: 200%; height: 200%; background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.8) 50%, transparent 60%); animation: shine 3s infinite; } @keyframes shine { 0% { top: -200%; left: -200%; } 100% { top: 200%; left: 200%; } } .shark-icon { width: 120px; height: 120px; fill: #003399; transform: translateZ(10px); filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.2)); } .team-name { font-family: 'Russo One', sans-serif; font-size: 58px; text-align: center; margin-bottom: 20px; color: #ffffff; text-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 56, 184, 0.5); letter-spacing: 1px; transform: translateZ(20px); transition: transform 0.3s ease; } .team-name span { display: inline-block; animation: pulse 1.5s infinite alternate; animation-delay: calc(var(--i) * 0.1s); } @keyframes pulse { 0% { transform: scale(1); } 100% { transform: scale(1.1); text-shadow: 0 10px 20px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 56, 184, 0.8); } } .event-details { background: rgba(255, 255, 255, 0.9); color: #003399; padding: 20px; border-radius: 12px; text-align: center; margin-bottom: 30px; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); transform: translateZ(15px); transition: transform 0.3s ease; } .vs { font-size: 28px; font-weight: 800; margin: 10px 0; color: #e63946; } .date-time { font-size: 24px; font-weight: 800; margin-top: 15px; color: #003399; } .location { font-size: 20px; margin-top: 5px; color: #003399; } .action-button { background: linear-gradient(135deg, #e63946, #d90429); color: white; border: none; padding: 16px 30px; font-size: 20px; font-weight: 700; border-radius: 40px; cursor: pointer; margin-top: auto; box-shadow: 0 8px 20px rgba(217, 4, 41, 0.4); transition: all 0.3s ease; align-self: center; transform: translateZ(25px); position: relative; overflow: hidden; } .action-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: 0.5s; } .action-button:hover::before { left: 100%; } .action-button:hover { transform: translateZ(25px) scale(1.05); box-shadow: 0 12px 30px rgba(217, 4, 41, 0.6); } .action-button:active { transform: translateZ(25px) scale(0.98); } .particles { position: absolute; width: 100%; height: 100%; top: 0; left: 0; overflow: hidden; z-index: 0; } .particle { position: absolute; width: 6px; height: 6px; background: white; border-radius: 50%; opacity: 0.6; } .splash-circles { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 0; pointer-events: none; } .splash-circle { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(0, 198, 255, 0.2) 0%, rgba(0, 114, 255, 0.1) 70%, transparent 100%); transform: scale(0); opacity: 0; } @keyframes splashEffect { 0% { transform: scale(0); opacity: 0.5; } 100% { transform: scale(1); opacity: 0; } } @media (max-width: 700px) { .poster-container { width: 85%; height: 85vh; } .team-name { font-size: 42px; } .logo-container { width: 150px; height: 150px; } .shark-icon { width: 100px; height: 100px; } .event-details { padding: 15px; } .vs { font-size: 24px; } .date-time { font-size: 20px; } .location { font-size: 16px; } .action-button { padding: 14px 24px; font-size: 18px; } } </style> </head> <body> <div class="poster-container" id="posterContainer"> <div class="poster"> <div class="energy-wave"></div> <div class="particles" id="particles"></div> <div class="splash-circles" id="splashCircles"></div> <div class="poster-content"> <div class="team-logo"> <div class="logo-container"> <svg class="shark-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M437.4,226.5c-3.4-9.6-8.2-20-14.2-30.1c-1.9-3.2-3.9-6.4-6-9.5c-16.4-24.2-39-44.2-67.5-59.4c-7.3-3.9-15-7.3-22.8-10.2c-40.5-14.9-89-17.8-144.5-8.9c-16.2,2.6-30.5,11.2-38.8,23.6c-4.1,6.2-7.9,12.5-11.4,19C110.3,184.3,90.5,220,74.5,261c-11.1,7.4-22.5,13.8-34.2,19c-4.1,1.8-6.7,5.9-6.6,10.4c0.1,4.5,2.9,8.5,7,10.1c15.7,6.1,32.1,9.2,48.8,9.2c18.2,0,36.8-3.8,55.2-11.3l14.5,8.7c34.8,20.9,73.8,29.3,103.8,29.3c21.4,0,39-3.8,49.3-10.6c7-4.6,12.2-10.9,15.6-18.9c16.9-2.4,33.9-6.7,50.8-12.7c3.3-1.2,6.6-2.4,9.9-3.7c29.4-11.7,51.9-26.6,67-44.4c4.7-5.6,5.5-13.5,2-19.9C453.8,217.8,445.4,211.2,437.4,226.5z M341.4,246.4l-22.7,7c-1.2,0.4-2.2,1-3.1,1.7c-0.1,0.1-0.1,0.1-0.2,0.2c-4.6,3.9-10.3,6.4-16.7,6.4c-14.2,0-25.8-11.5-25.8-25.8c0-14.2,11.5-25.8,25.8-25.8c6.9,0,13.1,2.7,17.7,7.1l26.2-11.2c-10.3-12.1-25.7-19.8-42.8-19.8c-31.2,0-56.5,25.3-56.5,56.5s25.3,56.5,56.5,56.5c11.3,0,21.8-3.3,30.6-9c3.7-1.9,7.1-4.2,10.3-6.7l0,0c0.1-0.1,0.2-0.2,0.3-0.3C341.1,282.4,341.3,264.4,341.4,246.4z M240.4,165.1c-0.5-0.2-1-0.5-1.5-0.7c-5.5-2.2-11.5-3.5-17.8-3.5c-25.9,0-46.9,21-46.9,46.9c0,25.9,21,46.9,46.9,46.9c6.3,0,12.3-1.2,17.8-3.5c0.5-0.2,1-0.5,1.5-0.7c15.8-7.1,26.9-22.9,26.9-41.5C267.3,188,256.2,172.2,240.4,165.1z M207.7,191.9c12.9,0,23.5,8.8,26.6,20.8h-53.2C184.2,200.7,194.8,191.9,207.7,191.9z M207.7,224.3c-12.9,0-23.5-8.8-26.6-20.8h53.2C231.2,215.5,220.6,224.3,207.7,224.3z"/> </svg> </div> </div> <h1 class="team-name"> <span style="--i:1">T</span> <span style="--i:2">H</span> <span style="--i:3">U</span> <span style="--i:4">N</span> <span style="--i:5">D</span> <span style="--i:6">E</span> <span style="--i:7">R</span> <span style="--i:8"> </span> <span style="--i:9">S</span> <span style="--i:10">H</span> <span style="--i:11">A</span> <span style="--i:12">R</span> <span style="--i:13">K</span> <span style="--i:14">S</span> </h1> <div class="event-details"> <h3>CHAMPIONSHIP QUARTERFINALS</h3> <div class="vs">THUNDER SHARKS VS LIGHTNING EAGLES</div> <div class="date-time">SATURDAY, DEC 16TH • 7:30 PM</div> <div class="location">OCEANVIEW STADIUM, WEST BAY</div> </div> <button class="action-button" id="ticketButton">GET YOUR TICKETS</button> </div> </div> </div> <script> // Create particles const particles = document.getElementById('particles'); const particleCount = 40; for (let i = 0; i < particleCount; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); // Random position const x = Math.random() * 100; const y = Math.random() * 100; particle.style.left = `${x}%`; particle.style.top = `${y}%`; particle.style.opacity = Math.random() * 0.5 + 0.1; particle.style.width = `${Math.random() * 6 + 2}px`; particle.style.height = particle.style.width; // Animation particle.style.animation = `move ${Math.random() * 30 + 15}s linear infinite`; particle.style.animationDelay = `${Math.random() * 5}s`; // Add keyframes dynamically const keyframes = ` @keyframes move { 0% { transform: translate(0, 0); } 25% { transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px); } 50% { transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px); } 75% { transform: translate(${Math.random() * 100 - 50}px, ${Math.random() * 100 - 50}px); } 100% { transform: translate(0, 0); } } `; const style = document.createElement('style'); style.type = 'text/css'; style.appendChild(document.createTextNode(keyframes)); document.getElementsByTagName('head')[0].appendChild(style); particles.appendChild(particle); } // 3D Tilt effect const posterContainer = document.getElementById('posterContainer'); const maxRotate = 5; document.addEventListener('mousemove', (e) => { const xAxis = (window.innerWidth / 2 - e.pageX) / 25; const yAxis = (window.innerHeight / 2 - e.pageY) / 25; posterContainer.style.transform = `rotateY(${xAxis > maxRotate ? maxRotate : (xAxis < -maxRotate ? -maxRotate : xAxis)}deg) rotateX(${yAxis > maxRotate ? maxRotate : (yAxis < -maxRotate ? -maxRotate : yAxis)}deg)`; }); document.addEventListener('mouseleave', () => { posterContainer.style.transform = 'rotateY(0deg) rotateX(0deg)'; }); // Splash effect const splashCircles = document.getElementById('splashCircles'); const poster = document.querySelector('.poster'); poster.addEventListener('click', createSplash); poster.addEventListener('touchstart', createSplash); function createSplash(e) { const rect = poster.getBoundingClientRect(); // Get coordinates relative to the poster const x = e.clientX - rect.left; const y = e.clientY - rect.top; // Create splash circle const splash = document.createElement('div'); splash.classList.add('splash-circle'); // Set position splash.style.left = `${x}px`; splash.style.top = `${y}px`; // Set size and animation const size = Math.max(rect.width, rect.height) * 2; splash.style.width = `${size}px`; splash.style.height = `${size}px`; splash.style.marginLeft = `-${size/2}px`; splash.style.marginTop = `-${size/2}px`; // Add animation splash.style.animation = 'splashEffect 1s ease-out forwards'; // Add to container splashCircles.appendChild(splash); // Remove after animation setTimeout(() => { splash.remove(); }, 1000); } // Button effects and accessibility const ticketButton = document.getElementById('ticketButton'); ticketButton.addEventListener('click', (e) => { e.preventDefault(); ticketButton.textContent = 'TICKETS COMING SOON'; setTimeout(() => { ticketButton.textContent = 'GET YOUR TICKETS'; }, 2000); }); ticketButton.addEventListener('keypress', (e) => { if (e.key === 'Enter') { e.preventDefault(); ticketButton.click(); } }); // Set tabindex for accessibility ticketButton.setAttribute('tabindex', '0'); ticketButton.setAttribute('aria-label', 'Get tickets for Thunder Sharks game'); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ÉCLAT - Haute Couture Spring 2024</title> <style> @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Montserrat:wght@200;300;400;500&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary-color: #1a1a1a; --secondary-color: #2a2a2a; --text-color: #e0e0e0; --accent-color: #d4af37; /* Gold accent */ --transition-time: 0.4s; } body { font-family: 'Montserrat', sans-serif; background-color: var(--primary-color); color: var(--text-color); width: 100%; height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; } .poster-container { width: 100%; max-width: 700px; height: 700px; position: relative; overflow: hidden; background-color: var(--primary-color); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; } .texture-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgogIDxmaWx0ZXIgaWQ9Im5vaXNlIiB4PSIwIiB5PSIwIj4KICAgIDxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjgiIG51bU9jdGF2ZXM9IjQiIHN0aXRjaFRpbGVzPSJzdGl0Y2giIHJlc3VsdD0ibm9pc2UiLz4KICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9Im1hdHJpeCIgdmFsdWVzPSIwIDAgMCAwIDAgIDAgMCAwIDAgMCAgMCAwIDAgMCAwICAwIDAgMCAwLjAyIDAiLz4KICA8L2ZpbHRlcj4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWx0ZXI9InVybCgjbm9pc2UpIi8+Cjwvc3ZnPg=='); opacity: 0.15; pointer-events: none; z-index: 1; } .gold-line { position: absolute; width: 1px; background: linear-gradient(180deg, transparent, var(--accent-color), transparent); z-index: 2; opacity: 0; transform: translateY(-50%); animation: lineAnimation 8s infinite ease-in-out; } .brand-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 3.8rem; letter-spacing: 1.2rem; text-transform: uppercase; margin-bottom: 0.5rem; color: var(--text-color); position: relative; text-align: center; z-index: 3; } .brand-subtitle { font-family: 'Montserrat', sans-serif; font-weight: 200; font-size: 1rem; letter-spacing: 0.4rem; text-transform: uppercase; color: var(--accent-color); margin-bottom: 3rem; position: relative; z-index: 3; opacity: 0; animation: fadeIn 1.5s 0.8s forwards; } .image-container { width: 60%; height: 40%; position: relative; overflow: hidden; margin: 1rem 0 2rem; z-index: 3; } .model-silhouette { width: 100%; height: 100%; background-color: var(--secondary-color); mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMzAwIj48cGF0aCBkPSJNMTAwLDEwYzAsMCw1MCwzMCw1MCwxMDBjMCw3MC01MCwxNDAtNTAsMTQwcy01MC03MC01MC0xNDBDNTAsNDAsOTkuOSwxMCwxMDAsMTB6Ii8+PC9zdmc+') center/contain no-repeat; -webkit-mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMzAwIj48cGF0aCBkPSJNMTAwLDEwYzAsMCw1MCwzMCw1MCwxMDBjMCw3MC01MCwxNDAtNTAsMTQwcy01MC03MC01MC0xNDBDNTAsNDAsOTkuOSwxMCwxMDAsMTB6Ii8+PC9zdmc+') center/contain no-repeat; position: relative; transform: scale(0.9); transition: transform var(--transition-time); } .image-container:hover .model-silhouette { transform: scale(1); } .gold-accent { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 40%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-color), transparent); z-index: 4; } .event-details { text-align: center; z-index: 3; position: relative; margin-top: 1rem; } .event-date { font-family: 'Montserrat', sans-serif; font-weight: 300; font-size: 1.2rem; letter-spacing: 0.2rem; margin-bottom: 0.5rem; } .event-location { font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: 1.4rem; letter-spacing: 0.1rem; margin-bottom: 1.5rem; } .label { font-family: 'Montserrat', sans-serif; font-weight: 200; font-size: 0.7rem; letter-spacing: 0.1rem; text-transform: uppercase; margin-bottom: 0.2rem; color: var(--accent-color); } .reservation-btn { margin-top: 1.5rem; padding: 0.6rem 2rem; background-color: transparent; color: var(--text-color); border: 1px solid var(--text-color); font-family: 'Montserrat', sans-serif; font-size: 0.8rem; letter-spacing: 0.2rem; text-transform: uppercase; cursor: pointer; transition: all var(--transition-time); position: relative; overflow: hidden; z-index: 4; } .reservation-btn:before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.2), transparent); transition: all 0.6s; z-index: -1; } .reservation-btn:hover { color: var(--accent-color); border-color: var(--accent-color); } .reservation-btn:hover:before { left: 100%; } .designer-name { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 1.2rem; letter-spacing: 0.1rem; position: absolute; bottom: 1rem; color: var(--text-color); opacity: 0.7; z-index: 3; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes lineAnimation { 0%, 100% { height: 30%; top: 35%; opacity: 0.3; } 50% { height: 60%; top: 20%; opacity: 0.6; } } .letter { display: inline-block; opacity: 0; transform: translateY(20px); animation: fadeLetters 1.2s forwards; } @keyframes fadeLetters { to { opacity: 1; transform: translateY(0); } } @media (max-width: 600px) { .brand-title { font-size: 2.5rem; letter-spacing: 0.8rem; } .brand-subtitle { font-size: 0.8rem; letter-spacing: 0.2rem; } .image-container { width: 80%; } .event-date, .event-location { font-size: 1rem; } } </style> </head> <body> <div class="poster-container"> <div class="texture-overlay"></div> <div class="gold-line" style="left: 20%;"></div> <div class="gold-line" style="left: 80%;"></div> <h1 class="brand-title" id="brandTitle">ÉCLAT</h1> <p class="brand-subtitle">HAUTE COUTURE SPRING 2024</p> <div class="image-container"> <div class="model-silhouette"></div> </div> <div class="gold-accent"></div> <div class="event-details"> <p class="label">Unveiling</p> <p class="event-date">APRIL 18-22, 2024</p> <p class="label">At</p> <p class="event-location">PALAIS GALLIERA, PARIS</p> <button class="reservation-btn">SECURE YOUR SEAT</button> </div> <p class="designer-name">ISABELLE MONTCLAIR</p> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Animate title letters const title = document.getElementById('brandTitle'); const text = title.textContent; title.textContent = ''; for (let i = 0; i < text.length; i++) { const span = document.createElement('span'); span.className = 'letter'; span.textContent = text[i]; span.style.animationDelay = `${0.1 + i * 0.1}s`; title.appendChild(span); } // Create dynamic gold lines for (let i = 0; i < 5; i++) { const line = document.createElement('div'); line.className = 'gold-line'; line.style.left = `${20 + i * 15}%`; line.style.animationDelay = `${i * 0.5}s`; document.querySelector('.poster-container').appendChild(line); } // Button interaction const button = document.querySelector('.reservation-btn'); button.addEventListener('click', (e) => { e.preventDefault(); button.textContent = 'REQUEST SENT'; setTimeout(() => { button.textContent = 'SECURE YOUR SEAT'; }, 2000); }); // Detect mouse movement for subtle interactivity const container = document.querySelector('.poster-container'); const silhouette = document.querySelector('.model-silhouette'); container.addEventListener('mousemove', (e) => { const x = e.clientX / window.innerWidth; const y = e.clientY / window.innerHeight; silhouette.style.transform = `scale(0.95) translate(${(x - 0.5) * 10}px, ${(y - 0.5) * 10}px)`; document.querySelectorAll('.gold-line').forEach(line => { line.style.transform = `translateY(-50%) rotate(${(x - 0.5) * 5}deg)`; }); }); container.addEventListener('mouseleave', () => { silhouette.style.transform = 'scale(0.9) translate(0, 0)'; document.querySelectorAll('.gold-line').forEach(line => { line.style.transform = 'translateY(-50%) rotate(0deg)'; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Digital Nexus Campaign</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Codec Pro", Arial, sans-serif; } @font-face { font-family: "Codec Pro"; src: url("https://fonts.cdnfonts.com/css/codec-pro") format("woff2"); font-weight: 400; font-style: normal; } body { background-color: #0a0a14; color: #fff; height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; } .container { width: 100%; max-width: 700px; height: 700px; position: relative; overflow: hidden; background: linear-gradient(145deg, #0f0f1e 0%, #1a1a2e 100%); border-radius: 8px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5); } .glitch-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .glitch-line { position: absolute; width: 100%; height: 2px; background: #0ff; opacity: 0; transform: translateY(-50%); filter: blur(1px); box-shadow: 0 0 10px #0ff, 0 0 20px rgba(0, 255, 255, 0.5); z-index: 10; } .grid { position: absolute; width: 100%; height: 100%; background: linear-gradient(rgba(15, 15, 30, 0.7) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 15, 30, 0.7) 1px, transparent 1px); background-size: 20px 20px; z-index: 0; opacity: 0.3; } .content { position: relative; width: 100%; height: 100%; padding: 40px; display: flex; flex-direction: column; justify-content: space-between; z-index: 2; } .header { text-align: center; margin-bottom: 20px; } .logo { font-size: 1.5rem; font-weight: 700; letter-spacing: 2px; color: #fff; text-transform: uppercase; margin-bottom: 10px; position: relative; text-shadow: 0 0 10px rgba(255, 0, 255, 0.5), 0 0 20px rgba(255, 0, 255, 0.3); } .logo::after { content: "NEXUS"; position: absolute; left: 50%; top: 0; transform: translateX(-50%); color: #f0f; opacity: 0.7; filter: blur(3px); mix-blend-mode: screen; } h1 { font-size: 3.2rem; font-weight: 800; margin: 20px 0; background: linear-gradient(90deg, #0ff, #f0f, #0ff); background-size: 200% auto; color: #fff; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shine 5s linear infinite; text-transform: uppercase; letter-spacing: 1px; transform: perspective(500px) rotateX(10deg); text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } @keyframes shine { to { background-position: 200% center; } } .tagline { font-size: 1.2rem; font-weight: 400; margin-bottom: 30px; color: rgba(255, 255, 255, 0.8); letter-spacing: 0.5px; } .features { display: flex; justify-content: space-between; margin-top: 30px; flex-wrap: wrap; } .feature { width: 28%; text-align: center; padding: 15px; background: rgba(255, 255, 255, 0.05); border-radius: 8px; backdrop-filter: blur(5px); border-top: 1px solid rgba(255, 255, 255, 0.1); border-left: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .feature:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.1); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } .feature-icon { font-size: 2rem; margin-bottom: 10px; color: #0ff; text-shadow: 0 0 10px rgba(0, 255, 255, 0.5); } .feature-title { font-size: 1rem; font-weight: 600; margin-bottom: 5px; color: #fff; } .feature-desc { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); } .cta-section { text-align: center; margin-top: 40px; position: relative; z-index: 3; } .countdown { margin-bottom: 20px; font-size: 1.2rem; color: #f0f; letter-spacing: 2px; text-shadow: 0 0 10px rgba(255, 0, 255, 0.5); } .cta-btn { padding: 12px 35px; font-size: 1.1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; background: linear-gradient(135deg, #0ff, #f0f); border: none; border-radius: 30px; color: #fff; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 255, 255, 0.5); outline: none; } .cta-btn::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); transition: 0.5s; } .cta-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 255, 255, 0.6); } .cta-btn:hover::before { left: 100%; } .cta-btn:active { transform: translateY(1px); } .interactive-element { position: absolute; width: 300px; height: 300px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 0, 255, 0.1) 0%, transparent 70%); border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0.5; filter: blur(20px); } .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .particle { position: absolute; width: 3px; height: 3px; background: #0ff; border-radius: 50%; animation: float 4s linear infinite; filter: blur(1px); opacity: 0.5; } @keyframes float { 0% { transform: translateY(0) rotate(0deg); opacity: 0.5; } 100% { transform: translateY(-100px) rotate(360deg); opacity: 0; } } .footer { position: relative; z-index: 3; font-size: 0.8rem; color: rgba(255, 255, 255, 0.4); text-align: center; padding-top: 20px; } #glitch-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.15; mix-blend-mode: screen; } @media (max-width: 600px) { .content { padding: 25px; } h1 { font-size: 2.2rem; } .tagline { font-size: 1rem; } .features { flex-direction: column; align-items: center; } .feature { width: 90%; margin-bottom: 15px; } .cta-btn { padding: 10px 25px; font-size: 1rem; } } .interactive-cursor { position: fixed; width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 255, 255, 0.3) 0%, transparent 70%); pointer-events: none; transform: translate(-50%, -50%); z-index: 9999; mix-blend-mode: screen; display: none; } </style> </head> <body> <div class="interactive-cursor"></div> <div class="container"> <div class="grid"></div> <canvas id="glitch-canvas"></canvas> <div class="glitch-container"></div> <div class="particles"></div> <div class="interactive-element"></div> <div class="content"> <div class="header"> <div class="logo">DIGITAL NEXUS</div> <h1>HYPER-REALITY 2024</h1> <p class="tagline">Where digital innovation meets immersive experience</p> </div> <div class="features"> <div class="feature"> <div class="feature-icon">⦿</div> <div class="feature-title">Neural Interfaces</div> <div class="feature-desc">Direct brain-to-digital connections revolutionizing user experience</div> </div> <div class="feature"> <div class="feature-icon">⟡</div> <div class="feature-title">Quantum AR</div> <div class="feature-desc">Reality augmentation at quantum processing speeds</div> </div> <div class="feature"> <div class="feature-icon">⧉</div> <div class="feature-title">Holographic AI</div> <div class="feature-desc">Self-learning projections with environmental awareness</div> </div> </div> <div class="cta-section"> <div class="countdown">LAUNCHING IN <span id="countdown-timer">07:14:22</span></div> <button class="cta-btn" id="register-btn">Join The Revolution</button> </div> <div class="footer"> Early access limited to 10,000 participants • #DigitalNexus2024 </div> </div> </div> <script> // Glitch effect function createGlitchLines() { const glitchContainer = document.querySelector('.glitch-container'); const lineCount = 10; for (let i = 0; i < lineCount; i++) { const line = document.createElement('div'); line.classList.add('glitch-line'); glitchContainer.appendChild(line); animateGlitchLine(line); } } function animateGlitchLine(line) { // Random position const yPos = Math.random() * 100; line.style.top = `${yPos}%`; // Random width const width = 50 + Math.random() * 50; line.style.width = `${width}%`; line.style.left = `${Math.random() * (100 - width)}%`; // Random appearance time setTimeout(() => { line.style.opacity = (0.3 + Math.random() * 0.7).toString(); // Random disappearance time setTimeout(() => { line.style.opacity = '0'; // Loop the animation setTimeout(() => { animateGlitchLine(line); }, Math.random() * 5000); }, 100 + Math.random() * 200); }, Math.random() * 5000); } // Interactive cursor function initInteractiveCursor() { const cursor = document.querySelector('.interactive-cursor'); const container = document.querySelector('.container'); container.addEventListener('mousemove', (e) => { const rect = container.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; cursor.style.display = 'block'; cursor.style.left = `${x}px`; cursor.style.top = `${y}px`; }); container.addEventListener('mouseleave', () => { cursor.style.display = 'none'; }); } // Particles function createParticles() { const particlesContainer = document.querySelector('.particles'); const particleCount = 50; for (let i = 0; i < particleCount; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); // Random position particle.style.left = `${Math.random() * 100}%`; particle.style.top = `${Math.random() * 100}%`; // Random size const size = 1 + Math.random() * 3; particle.style.width = `${size}px`; particle.style.height = `${size}px`; // Random color (cyan to magenta) const hue = 180 + Math.random() * 90; particle.style.backgroundColor = `hsl(${hue}, 100%, 70%)`; // Random animation duration const duration = 3 + Math.random() * 7; particle.style.animationDuration = `${duration}s`; // Random delay particle.style.animationDelay = `${Math.random() * 5}s`; particlesContainer.appendChild(particle); } } // Countdown timer function updateCountdown() { const timerElement = document.getElementById('countdown-timer'); let [hours, minutes, seconds] = timerElement.textContent.split(':').map(Number); if (seconds > 0) { seconds--; } else { seconds = 59; if (minutes > 0) { minutes--; } else { minutes = 59; if (hours > 0) { hours--; } else { // Reset to prevent negative values hours = 7; minutes = 14; seconds = 22; } } } timerElement.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; } // Glitch canvas effect function initGlitchCanvas() { const canvas = document.getElementById('glitch-canvas'); const ctx = canvas.getContext('2d'); canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; function drawGlitch() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw random glitch rectangles const glitchCount = Math.floor(Math.random() * 5); for (let i = 0; i < glitchCount; i++) { const x = Math.random() * canvas.width; const y = Math.random() * canvas.height; const width = 20 + Math.random() * 100; const height = 2 + Math.random() * 10; // Random color const r = Math.floor(Math.random() * 255); const g = Math.floor(Math.random() * 255); const b = Math.floor(Math.random() * 255); ctx.fillStyle = `rgba(${r}, ${g}, ${b}, 0.5)`; ctx.fillRect(x, y, width, height); } // Add scan lines for (let y = 0; y < canvas.height; y += 4) { if (Math.random() > 0.97) { ctx.fillStyle = 'rgba(255, 255, 255, 0.1)'; ctx.fillRect(0, y, canvas.width, 1); } } requestAnimationFrame(drawGlitch); } drawGlitch(); } // Button interaction function initButtonInteraction() { const btn = document.getElementById('register-btn'); btn.addEventListener('click', (e) => { const btnRect = btn.getBoundingClientRect(); const ripple = document.createElement('span'); ripple.style.position = 'absolute'; ripple.style.width = '10px'; ripple.style.height = '10px'; ripple.style.borderRadius = '50%'; ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.7)'; ripple.style.transform = 'scale(0)'; ripple.style.animation = 'ripple 0.6s linear'; ripple.style.left = `${e.clientX - btnRect.left}px`; ripple.style.top = `${e.clientY - btnRect.top}px`; btn.appendChild(ripple); // Display success message instead of form submission setTimeout(() => { btn.textContent = "Registration Confirmed"; btn.style.background = "linear-gradient(135deg, #00ff80, #00bfff)"; setTimeout(() => { btn.textContent = "Join The Revolution"; btn.style.background = "linear-gradient(135deg, #0ff, #f0f)"; if (ripple) ripple.remove(); }, 2000); }, 500); }); } // Initialize all effects document.addEventListener('DOMContentLoaded', () => { createGlitchLines(); initInteractiveCursor(); createParticles(); setInterval(updateCountdown, 1000); initGlitchCanvas(); initButtonInteraction(); // Resize canvas on window resize window.addEventListener('resize', () => { const canvas = document.getElementById('glitch-canvas'); canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; }); }); </script> </body> </html>
