Text glitch effects have become a popular design trend, adding a dynamic and edgy feel to digital content. These effects can transform ordinary text into eye-catching visuals that captivate audiences.
In this article, we will explore ten stunning text glitch effect examples that can elevate your design projects. Whether you're a seasoned designer or just starting out, these examples will inspire you to experiment with this exciting technique.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Subframe's drag-and-drop interface and intuitive, responsive canvas make it easy to design pixel-perfect UI, including stunning text glitch effects. Loved by designers and developers alike, Subframe ensures your projects stand out.
Start for free and elevate your design game today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Ready to elevate your design projects? With Subframe, you can create pixel-perfect UIs, including stunning text glitch effects, in minutes. Our drag-and-drop interface ensures efficiency and ease of use.
Don't wait—start for free and begin designing immediately. Transform your ideas into reality with Subframe today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cybernetic Command Center</title> <style> @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap'); :root { --neon-pink: #ff00ff; --neon-blue: #00ffff; --neon-green: #00ff9f; --neon-purple: #9d00ff; --dark-bg: #040417; --panel-bg: rgba(16, 16, 36, 0.7); --grid-color: rgba(0, 255, 255, 0.1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--dark-bg); color: #ffffff; font-family: 'Rajdhani', sans-serif; height: 100vh; overflow: hidden; padding: 20px; position: relative; width: 100%; } .grid-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(to right, var(--grid-color) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px); background-size: 25px 25px; z-index: -1; transform: perspective(500px) rotateX(30deg); transform-origin: top; opacity: 0.4; } .dashboard { max-width: 700px; margin: 0 auto; padding: 20px; height: 100%; display: flex; flex-direction: column; gap: 20px; } .dashboard-header { text-align: center; margin-bottom: 10px; } .logo { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 2.2rem; letter-spacing: 2px; margin-bottom: 10px; text-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue); position: relative; display: inline-block; } .panel { background: var(--panel-bg); border-radius: 10px; padding: 15px; backdrop-filter: blur(10px); border: 1px solid rgba(0, 255, 255, 0.2); box-shadow: 0 0 20px rgba(0, 255, 255, 0.1); flex: 1; } .panel-rows { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; height: 100%; } @media (max-width: 600px) { .panel-rows { grid-template-columns: 1fr; } } .section-header { font-family: 'Orbitron', sans-serif; position: relative; font-size: 1.5rem; margin-bottom: 15px; padding-bottom: 8px; overflow: hidden; display: inline-block; cursor: pointer; } .section-header::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink)); } .section-content { font-size: 0.95rem; line-height: 1.5; opacity: 0.9; } /* Glitch effect for headings */ .glitch { position: relative; color: white; letter-spacing: 1px; font-weight: bold; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8; } .glitch::before { color: var(--neon-pink); z-index: -1; animation: glitch-anim-1 3s infinite linear alternate-reverse; } .glitch::after { color: var(--neon-blue); z-index: -2; animation: glitch-anim-2 2s infinite linear alternate-reverse; } .glitch-hover:hover::before { animation: glitch-anim-1 0.3s infinite linear alternate-reverse; } .glitch-hover:hover::after { animation: glitch-anim-2 0.2s infinite linear alternate-reverse; } @keyframes glitch-anim-1 { 0%, 100% { transform: translate(0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(-2px, -2px); } 60% { transform: translate(2px, 2px); } 80% { transform: translate(2px, -2px); } } @keyframes glitch-anim-2 { 0%, 100% { transform: translate(0); } 20% { transform: translate(2px, -2px); } 40% { transform: translate(2px, 2px); } 60% { transform: translate(-2px, -2px); } 80% { transform: translate(-2px, 2px); } } .status-indicator { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; background-color: var(--neon-green); box-shadow: 0 0 10px var(--neon-green); animation: pulse 2s infinite; } .system-stats { display: flex; justify-content: space-around; margin-top: 15px; } .stat { text-align: center; } .stat-value { font-size: 1.8rem; font-weight: bold; color: var(--neon-blue); text-shadow: 0 0 5px var(--neon-blue); } .stat-label { font-size: 0.8rem; opacity: 0.7; text-transform: uppercase; } .data-list { list-style: none; margin-top: 15px; } .data-item { padding: 8px 0; border-bottom: 1px solid rgba(0, 255, 255, 0.2); display: flex; justify-content: space-between; } .data-item:last-child { border-bottom: none; } .data-value { color: var(--neon-green); } .alert { color: var(--neon-pink); animation: flicker 2s infinite alternate; } @keyframes flicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; } 20%, 22%, 24%, 55% { opacity: 0.5; } } @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 255, 159, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 255, 159, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 255, 159, 0); } } .progress-container { height: 8px; background-color: rgba(255, 255, 255, 0.1); border-radius: 4px; margin-top: 15px; overflow: hidden; } .progress-bar { height: 100%; background: linear-gradient(90deg, var(--neon-blue), var(--neon-purple)); border-radius: 4px; width: 75%; position: relative; animation: shimmer 2s infinite; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .notification-dot { display: inline-block; width: 6px; height: 6px; background-color: var(--neon-pink); border-radius: 50%; position: absolute; top: 0; right: -10px; animation: blink 1s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } </style> </head> <body> <div class="grid-bg"></div> <div class="dashboard"> <div class="dashboard-header"> <h1 class="logo glitch" data-text="NEUROLINK">NEUROLINK</h1> <p>NEURAL NEXUS MONITORING PLATFORM • <span class="status-indicator"></span>SYSTEM ONLINE</p> </div> <div class="panel-rows"> <div class="panel"> <h2 class="section-header glitch glitch-hover" data-text="QUANTUM SYSTEMS">QUANTUM SYSTEMS</h2> <div class="section-content"> <p>Real-time quantum processor load balancing and entanglement monitoring.</p> <div class="system-stats"> <div class="stat"> <div class="stat-value">98.2<small>%</small></div> <div class="stat-label">Q-Stability</div> </div> <div class="stat"> <div class="stat-value">12.4<small>ms</small></div> <div class="stat-label">Latency</div> </div> <div class="stat"> <div class="stat-value">3.2<small>k</small></div> <div class="stat-label">Qubits</div> </div> </div> <div class="progress-container"> <div class="progress-bar"></div> </div> </div> </div> <div class="panel"> <h2 class="section-header glitch glitch-hover" data-text="NEURAL NETWORK">NEURAL NETWORK</h2> <div class="section-content"> <p>Synthetic neuron activation and synaptic pathway analysis.</p> <ul class="data-list"> <li class="data-item"> <span>Cortex Alpha</span> <span class="data-value">Optimal</span> </li> <li class="data-item"> <span>Synaptic Density</span> <span class="data-value">14.2 TB/s</span> </li> <li class="data-item"> <span>Pattern Recognition</span> <span class="data-value alert">Alert</span> </li> <li class="data-item"> <span>Neural Throughput</span> <span class="data-value">98.7%</span> </li> </ul> </div> </div> <div class="panel"> <h2 class="section-header glitch glitch-hover" data-text="CYBERSECURITY">CYBERSECURITY<span class="notification-dot"></span></h2> <div class="section-content"> <p>Intrusion detection and quantum encryption status monitoring.</p> <ul class="data-list"> <li class="data-item"> <span>Firewall Status</span> <span class="data-value">Active</span> </li> <li class="data-item"> <span>Breach Attempts</span> <span class="data-value">23 <small>(24h)</small></span> </li> <li class="data-item"> <span>Neural Shield</span> <span class="data-value">86.3%</span> </li> <li class="data-item"> <span>Zero-Day Vectors</span> <span class="data-value">Neutralized</span> </li> </ul> </div> </div> <div class="panel"> <h2 class="section-header glitch glitch-hover" data-text="BIOMETRIC DATA">BIOMETRIC DATA</h2> <div class="section-content"> <p>Enhanced cognitive interface performance metrics.</p> <div class="system-stats"> <div class="stat"> <div class="stat-value">142<small>bpm</small></div> <div class="stat-label">Neural Pulse</div> </div> <div class="stat"> <div class="stat-value">87<small>%</small></div> <div class="stat-label">Sync Rate</div> </div> <div class="stat"> <div class="stat-value">4.7<small>s</small></div> <div class="stat-label">Response</div> </div> </div> <div class="progress-container"> <div class="progress-bar" style="width: 87%"></div> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Apply glitch animation to all heading elements on load const headings = document.querySelectorAll('.glitch'); headings.forEach(heading => { triggerGlitch(heading); }); // Add hover event listeners to headings with glitch-hover class const glitchHoverElements = document.querySelectorAll('.glitch-hover'); glitchHoverElements.forEach(element => { element.addEventListener('mouseenter', function() { this.style.textShadow = `0 0 10px ${getRandomNeonColor()}, 0 0 20px ${getRandomNeonColor()}`; }); element.addEventListener('mouseleave', function() { setTimeout(() => { this.style.textShadow = ''; }, 300); }); }); // Random glitch effect on intervals setInterval(() => { const randomHeading = headings[Math.floor(Math.random() * headings.length)]; triggerGlitch(randomHeading); }, 3000); // Function to trigger glitch animation function triggerGlitch(element) { element.style.animation = 'none'; void element.offsetWidth; // Trigger reflow element.style.animation = ''; // Add temporary intense glitch const before = element.querySelector('::before'); const after = element.querySelector('::after'); if (before && after) { before.style.animation = 'glitch-anim-1 0.2s infinite linear alternate-reverse'; after.style.animation = 'glitch-anim-2 0.2s infinite linear alternate-reverse'; setTimeout(() => { before.style.animation = ''; after.style.animation = ''; }, 300); } } // Function to get random neon color function getRandomNeonColor() { const neonColors = [ 'var(--neon-pink)', 'var(--neon-blue)', 'var(--neon-green)', 'var(--neon-purple)' ]; return neonColors[Math.floor(Math.random() * neonColors.length)]; } // Simulate data updates setInterval(() => { const statValues = document.querySelectorAll('.stat-value'); statValues.forEach(statValue => { // Extract the numeric part and the unit const valueText = statValue.textContent; const match = valueText.match(/^([\d.]+)(.*)$/); if (match) { const numValue = parseFloat(match[1]); const unit = match[2] || ''; // Add small random fluctuation const newValue = (numValue + (Math.random() * 0.2 - 0.1)).toFixed(1); statValue.textContent = `${newValue}${unit}`; } }); }, 5000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glitched Gaming Portal</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; cursor: crosshair; } body { background-color: #0a0a0a; font-family: 'Courier New', monospace; overflow: hidden; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; color: #fff; } .container { width: 100%; max-width: 700px; height: 700px; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; background: linear-gradient(135deg, rgba(20,20,20,1) 0%, rgba(30,30,30,0.8) 100%); border: 2px solid #333; box-shadow: 0 0 30px rgba(0, 255, 255, 0.2), 0 0 60px rgba(255, 0, 255, 0.1); } .noise-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyAQMAAAAk8RryAAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMA/1uRIrUAAAAUSURBVBjTY0AHDAwMmHQDOpg0wAAAG4sAoCbvP9wAAAAASUVORK5CYII='); opacity: 0.03; pointer-events: none; z-index: 100; } .scanline { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0) 51%); opacity: 0.15; pointer-events: none; z-index: 90; background-size: 100% 8px; animation: scanline 6s linear infinite; } @keyframes scanline { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } .title-container { margin-bottom: 50px; position: relative; z-index: 10; } .main-title { font-size: 70px; font-weight: 900; letter-spacing: -2px; color: #ff00ee; text-transform: uppercase; font-family: 'Arial Black', sans-serif; text-shadow: 0 0 10px rgba(255, 0, 238, 0.7), 4px 4px 0 #00eeff; margin-bottom: 10px; transition: transform 0.3s; transform-origin: center; } .subtitle { font-size: 20px; font-weight: bold; margin-bottom: 10px; color: #00eeff; letter-spacing: 2px; text-align: center; text-shadow: 0 0 5px rgba(0, 238, 255, 0.7); } .game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; margin-top: 40px; z-index: 10; } .game-card { position: relative; background-color: #1a1a1a; border: 2px solid #333; overflow: hidden; border-radius: 5px; transition: all 0.3s; height: 120px; padding: 15px; display: flex; flex-direction: column; justify-content: space-between; } .game-card:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255,0,238,0.1) 0%, rgba(0,238,255,0.1) 100%); opacity: 0; transition: opacity 0.3s; } .game-card:hover:before { opacity: 1; } .game-card:hover { transform: translateY(-5px); box-shadow: 0 0 20px rgba(255, 0, 238, 0.3); border-color: #ff00ee; } .game-title { font-size: 18px; font-weight: bold; color: #fff; margin-bottom: 5px; transition: all 0.2s; position: relative; z-index: 2; } .game-genre { font-size: 12px; color: #00eeff; position: relative; z-index: 2; } .game-rating { display: flex; align-items: center; margin-top: 10px; position: relative; z-index: 2; } .star { color: #ff00ee; margin-right: 2px; } .nav-buttons { display: flex; justify-content: center; gap: 20px; margin-top: 40px; z-index: 10; } .nav-button { background-color: transparent; color: #00eeff; border: 2px solid #00eeff; padding: 10px 20px; font-size: 16px; font-weight: bold; cursor: crosshair; transition: all 0.3s; text-transform: uppercase; position: relative; overflow: hidden; outline: none; } .nav-button:hover { background-color: #00eeff; color: #000; transform: scale(1.05); box-shadow: 0 0 15px rgba(0, 238, 255, 0.5); } .nav-button:active { transform: scale(0.95); } .glitch-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; pointer-events: none; mix-blend-mode: overlay; background-size: cover; } .game-card.glitched .game-title { animation: textGlitch 0.3s infinite alternate; } @keyframes textGlitch { 0% { text-shadow: 2px 0 #ff00ee, -2px 0 #00eeff; transform: translate(-2px, 0); } 25% { text-shadow: -2px 0 #ff00ee, 2px 0 #00eeff; transform: translate(2px, 0); } 50% { text-shadow: 0 2px #ff00ee, 0 -2px #00eeff; transform: translate(0, 2px); } 75% { text-shadow: 0 -2px #ff00ee, 0 2px #00eeff; transform: translate(0, -2px); } 100% { text-shadow: 2px 2px #ff00ee, -2px -2px #00eeff; transform: translate(1px, 1px); } } #main-title-text { position: relative; display: inline-block; } @keyframes mainTitleGlitch { 0% { transform: skew(0deg, 0deg); text-shadow: 2px 0 #ff00ee, -2px 0 #00eeff; } 25% { transform: skew(2deg, 2deg); text-shadow: -3px 0 #ff00ee, 3px 0 #00eeff; } 50% { transform: skew(-1deg, -1deg); text-shadow: 0 3px #ff00ee, 0 -3px #00eeff; } 75% { transform: skew(3deg, -2deg); text-shadow: 0 -3px #ff00ee, 0 3px #00eeff; } 100% { transform: skew(-3deg, 1deg); text-shadow: 3px 3px #ff00ee, -3px -3px #00eeff; } } @media (max-width: 600px) { .main-title { font-size: 40px; } .subtitle { font-size: 16px; } .game-grid { grid-template-columns: repeat(2, 1fr); } .nav-buttons { flex-direction: column; gap: 10px; } } @media (max-width: 400px) { .game-grid { grid-template-columns: 1fr; } } </style> </head> <body> <div class="container"> <div class="noise-overlay"></div> <div class="scanline"></div> <div class="title-container"> <h1 class="main-title"><span id="main-title-text">PIXL8D</span></h1> <div class="subtitle">HARDCORE GAMING PORTAL</div> </div> <div class="game-grid"> <div class="game-card"> <div class="game-title">NETRUNNER 2089</div> <div class="game-genre">Cyberpunk FPS</div> <div class="game-rating"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> </div> <div class="glitch-overlay"></div> </div> <div class="game-card"> <div class="game-title">VOID BREAKER</div> <div class="game-genre">Sci-Fi Roguelike</div> <div class="game-rating"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">☆</span> </div> <div class="glitch-overlay"></div> </div> <div class="game-card"> <div class="game-title">MECH ASSAULT</div> <div class="game-genre">Tactical Strategy</div> <div class="game-rating"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">☆</span> </div> <div class="glitch-overlay"></div> </div> <div class="game-card"> <div class="game-title">SHADOW DRIFT</div> <div class="game-genre">Racing Combat</div> <div class="game-rating"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">☆</span> <span class="star">☆</span> </div> <div class="glitch-overlay"></div> </div> <div class="game-card"> <div class="game-title">BLOOD ECHO</div> <div class="game-genre">Horror Survival</div> <div class="game-rating"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> </div> <div class="glitch-overlay"></div> </div> <div class="game-card"> <div class="game-title">DATA HEIST</div> <div class="game-genre">Stealth Action</div> <div class="game-rating"> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">★</span> <span class="star">☆</span> </div> <div class="glitch-overlay"></div> </div> </div> <div class="nav-buttons"> <button class="nav-button">Explore Games</button> <button class="nav-button">Top Rated</button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Title glitch effect const mainTitle = document.getElementById('main-title-text'); function glitchMainTitle() { mainTitle.style.animation = 'mainTitleGlitch 0.3s steps(1) forwards'; setTimeout(() => { mainTitle.style.animation = 'none'; setTimeout(() => { if (Math.random() > 0.5) { glitchMainTitle(); } }, Math.random() * 100); }, 300); } // Initial title glitch setInterval(() => { if (Math.random() > 0.7) { glitchMainTitle(); } }, 2000); // Game cards glitch effect const gameCards = document.querySelectorAll('.game-card'); gameCards.forEach(card => { card.addEventListener('mouseover', function() { this.classList.add('glitched'); // Apply random distortions const glitchColors = ['#ff00ee', '#00eeff', '#ffff00', '#00ff00']; const randomColor = glitchColors[Math.floor(Math.random() * glitchColors.length)]; const overlay = this.querySelector('.glitch-overlay'); function applyRandomGlitch() { const shiftX = Math.floor(Math.random() * 10) - 5; const shiftY = Math.floor(Math.random() * 10) - 5; overlay.style.background = ` repeating-linear-gradient( ${Math.random() * 360}deg, ${randomColor} 0%, transparent ${Math.random() * 20}%, transparent ${Math.random() * 50}%, ${randomColor} ${Math.random() * 100}% ) `; overlay.style.transform = `translate(${shiftX}px, ${shiftY}px)`; overlay.style.opacity = '0.3'; // Random text distortion const gameTitle = card.querySelector('.game-title'); gameTitle.style.transform = `skew(${Math.random() * 10 - 5}deg, ${Math.random() * 10 - 5}deg)`; } const glitchInterval = setInterval(applyRandomGlitch, 100); card.addEventListener('mouseout', function() { clearInterval(glitchInterval); this.classList.remove('glitched'); overlay.style.opacity = '0'; const gameTitle = card.querySelector('.game-title'); gameTitle.style.transform = 'none'; }, { once: true }); }); // Random glitch effects even without hover setInterval(() => { if (Math.random() > 0.95) { card.classList.add('glitched'); setTimeout(() => { card.classList.remove('glitched'); }, 200 + Math.random() * 300); } }, 3000); }); // Button click effect with glitch const buttons = document.querySelectorAll('.nav-button'); buttons.forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); // Apply quick glitch animation to the whole page document.body.style.filter = 'hue-rotate(90deg) brightness(1.5)'; setTimeout(() => { document.body.style.filter = 'none'; }, 100); // Glitch all game titles briefly gameCards.forEach(card => { card.classList.add('glitched'); setTimeout(() => { card.classList.remove('glitched'); }, 300); }); // Glitch the main title glitchMainTitle(); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HYPERPULSE | EDM Festival 2024</title> <style> @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Roboto:wght@300;400;700&display=swap'); :root { --neon-blue: #00f7ff; --deep-purple: #6600cc; --dark-bg: #0a0a1a; --accent-pink: #ff00cc; --text-glow: 0 0 10px rgba(0, 247, 255, 0.7), 0 0 20px rgba(0, 247, 255, 0.5); } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--dark-bg); font-family: 'Roboto', sans-serif; color: white; overflow-x: hidden; height: 100vh; display: flex; justify-content: center; align-items: center; position: relative; } .container { width: 100%; max-width: 700px; height: 700px; overflow-y: auto; overflow-x: hidden; padding: 2rem; position: relative; scrollbar-width: thin; scrollbar-color: var(--neon-blue) var(--dark-bg); } .container::-webkit-scrollbar { width: 6px; } .container::-webkit-scrollbar-track { background: var(--dark-bg); } .container::-webkit-scrollbar-thumb { background-color: var(--neon-blue); border-radius: 6px; } .background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: radial-gradient(circle at center, #20115e, #0a0a1a); overflow: hidden; } .grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(0deg, transparent 24%, rgba(0, 247, 255, 0.05) 25%, rgba(0, 247, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(0, 247, 255, 0.05) 75%, rgba(0, 247, 255, 0.05) 76%, transparent 77%), linear-gradient(90deg, transparent 24%, rgba(0, 247, 255, 0.05) 25%, rgba(0, 247, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(0, 247, 255, 0.05) 75%, rgba(0, 247, 255, 0.05) 76%, transparent 77%); background-size: 50px 50px; transform: perspective(500px) rotateX(60deg); transform-origin: center bottom; animation: gridPulse 15s infinite; } @keyframes gridPulse { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.5; } } .particles { position: absolute; width: 100%; height: 100%; } .particle { position: absolute; background: var(--neon-blue); border-radius: 50%; opacity: 0; animation: float 8s infinite ease-in-out; } @keyframes float { 0% { transform: translateY(100vh) scale(0); opacity: 0; } 50% { opacity: 0.7; } 100% { transform: translateY(-100px) scale(0); opacity: 0; } } header { text-align: center; margin-bottom: 2rem; position: relative; } .logo { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 2.5rem; letter-spacing: 2px; margin-bottom: 1rem; color: white; text-shadow: var(--text-glow); position: relative; } .logo::before { content: 'HYPERPULSE'; position: absolute; left: 0; top: 0; width: 100%; color: var(--accent-pink); opacity: 0.7; transform: translateX(-5px); filter: blur(4px); } .glitch-text { font-family: 'Orbitron', sans-serif; font-size: 3.5rem; font-weight: 700; text-transform: uppercase; position: relative; color: white; margin: 2rem 0; text-shadow: var(--text-glow); letter-spacing: 2px; } .glitch-text::before, .glitch-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8; } .glitch-text::before { color: var(--neon-blue); z-index: -1; } .glitch-text::after { color: var(--accent-pink); z-index: -2; } .date { font-family: 'Orbitron', sans-serif; font-size: 1.5rem; margin-bottom: 1.5rem; color: var(--neon-blue); text-shadow: 0 0 10px rgba(0, 247, 255, 0.5); } .beats-controls { display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; } .play-btn { background: none; border: 2px solid var(--neon-blue); color: var(--neon-blue); font-family: 'Orbitron', sans-serif; font-weight: 700; padding: 0.5rem 1.5rem; border-radius: 50px; cursor: pointer; font-size: 1rem; position: relative; overflow: hidden; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; display: flex; align-items: center; gap: 10px; box-shadow: 0 0 15px rgba(0, 247, 255, 0.3); z-index: 10; } .play-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(0, 247, 255, 0.2), transparent); transition: all 0.4s ease; } .play-btn:hover { background-color: rgba(0, 247, 255, 0.1); box-shadow: 0 0 20px rgba(0, 247, 255, 0.5); transform: translateY(-2px); } .play-btn:hover::before { left: 100%; } .play-icon { display: inline-block; width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid var(--neon-blue); } .pause-icon { display: inline-block; width: 10px; height: 14px; position: relative; } .pause-icon::before, .pause-icon::after { content: ''; position: absolute; top: 0; width: 3px; height: 14px; background-color: var(--neon-blue); } .pause-icon::before { left: 0; } .pause-icon::after { right: 0; } .hide { display: none; } .lineup { margin: 3rem 0; padding: 1.5rem; background: rgba(10, 10, 26, 0.8); border: 1px solid rgba(0, 247, 255, 0.2); border-radius: 10px; position: relative; overflow: hidden; } .lineup::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(102, 0, 204, 0.1) 0%, transparent 70%); animation: pulse 8s infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(1.1); opacity: 0.5; } } .section-title { font-family: 'Orbitron', sans-serif; font-size: 1.8rem; color: var(--neon-blue); margin-bottom: 1.5rem; text-shadow: 0 0 5px rgba(0, 247, 255, 0.5); position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--neon-blue), transparent); } .dj-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; position: relative; z-index: 1; } .dj-item { padding: 1rem; border-radius: 8px; background: rgba(50, 0, 100, 0.2); backdrop-filter: blur(5px); border: 1px solid rgba(0, 247, 255, 0.1); transition: all 0.3s ease; cursor: pointer; } .dj-item:hover { transform: translateY(-5px); background: rgba(50, 0, 100, 0.4); box-shadow: 0 5px 15px rgba(0, 247, 255, 0.2); border-color: var(--neon-blue); } .dj-name { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.2rem; margin-bottom: 0.5rem; color: white; } .dj-time { font-size: 0.9rem; color: var(--neon-blue); } .venue-info { margin: 3rem 0; padding: 1.5rem; background: rgba(10, 10, 26, 0.8); border: 1px solid rgba(0, 247, 255, 0.2); border-radius: 10px; position: relative; z-index: 1; } .venue-details { display: flex; flex-direction: column; gap: 1rem; } .venue-item { display: flex; align-items: flex-start; gap: 1rem; } .venue-icon { width: 24px; height: 24px; fill: var(--neon-blue); flex-shrink: 0; } .venue-text { font-size: 1rem; line-height: 1.5; } .rsvp-section { padding: 2rem; background: rgba(10, 10, 26, 0.9); border: 1px solid rgba(0, 247, 255, 0.2); border-radius: 10px; position: relative; overflow: hidden; margin-bottom: 3rem; } .rsvp-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(102, 0, 204, 0.3) 0%, transparent 100%); z-index: -1; } .input-group { margin-bottom: 1.5rem; position: relative; } .input-group label { display: block; font-family: 'Orbitron', sans-serif; font-size: 0.9rem; margin-bottom: 0.5rem; color: var(--neon-blue); } .input-group input, .input-group select { width: 100%; padding: 0.8rem 1rem; background: rgba(10, 10, 26, 0.8); border: 1px solid rgba(0, 247, 255, 0.2); border-radius: 5px; color: white; font-family: 'Roboto', sans-serif; font-size: 1rem; transition: all 0.3s ease; } .input-group input:focus, .input-group select:focus { outline: none; border-color: var(--neon-blue); box-shadow: 0 0 10px rgba(0, 247, 255, 0.3); } .submit-btn { background: linear-gradient(90deg, var(--deep-purple), var(--accent-pink)); border: none; color: white; font-family: 'Orbitron', sans-serif; font-weight: 700; padding: 1rem 2rem; border-radius: 50px; cursor: pointer; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; position: relative; overflow: hidden; display: block; width: 100%; box-shadow: 0 0 20px rgba(255, 0, 204, 0.3); } .submit-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: all 0.4s ease; } .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 25px rgba(255, 0, 204, 0.5); } .submit-btn:hover::before { left: 100%; } .audio-visualizer { position: fixed; bottom: 0; left: 0; width: 100%; height: 30px; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 1rem; z-index: 10; } .audio-bar { background: var(--neon-blue); width: 3px; border-radius: 3px 3px 0 0; opacity: 0.7; transform-origin: bottom; transition: height 0.1s ease; } footer { text-align: center; padding: 2rem 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); position: relative; z-index: 1; } .social-links { display: flex; justify-content: center; gap: 1.5rem; margin-top: 1rem; } .social-icon { width: 30px; height: 30px; fill: var(--neon-blue); opacity: 0.8; transition: all 0.3s ease; } .social-icon:hover { opacity: 1; transform: translateY(-3px); filter: drop-shadow(0 0 5px var(--neon-blue)); } @media (max-width: 600px) { .glitch-text { font-size: 2.5rem; } .logo { font-size: 2rem; } .date { font-size: 1.2rem; } .dj-list { grid-template-columns: 1fr; } .rsvp-section { padding: 1.5rem; } } /* Animation Classes for JS */ .glitch-active .glitch-text::before { animation: glitch-anim-1 0.2s infinite; } .glitch-active .glitch-text::after { animation: glitch-anim-2 0.3s infinite; } @keyframes glitch-anim-1 { 0%, 100% { transform: translate(0); } 20% { transform: translate(-5px, 5px); } 40% { transform: translate(-5px, -5px); } 60% { transform: translate(5px, 5px); } 80% { transform: translate(5px, -5px); } } @keyframes glitch-anim-2 { 0%, 100% { transform: translate(0); } 20% { transform: translate(5px, 5px); } 40% { transform: translate(5px, -5px); } 60% { transform: translate(-5px, 5px); } 80% { transform: translate(-5px, -5px); } } .pulse { animation: pulse-glow 0.5s; } @keyframes pulse-glow { 0% { text-shadow: 0 0 5px rgba(0, 247, 255, 0.5); } 50% { text-shadow: 0 0 20px rgba(0, 247, 255, 1), 0 0 30px rgba(0, 247, 255, 0.8); } 100% { text-shadow: 0 0 5px rgba(0, 247, 255, 0.5); } } /* Confetti effect when form is submitted */ .confetti { position: absolute; width: 10px; height: 10px; opacity: 0; animation: confetti-fall 3s ease-in-out forwards; } @keyframes confetti-fall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } } /* Success message */ .success-message { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 247, 255, 0.1); backdrop-filter: blur(10px); border: 2px solid var(--neon-blue); border-radius: 10px; padding: 2rem; text-align: center; z-index: 100; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .success-message.active { opacity: 1; } .success-message h3 { font-family: 'Orbitron', sans-serif; font-size: 1.5rem; color: var(--neon-blue); margin-bottom: 1rem; } .success-message p { margin-bottom: 1.5rem; } .close-btn { background: var(--neon-blue); border: none; color: var(--dark-bg); font-family: 'Orbitron', sans-serif; font-weight: 700; padding: 0.5rem 1.5rem; border-radius: 50px; cursor: pointer; font-size: 0.9rem; transition: all 0.3s ease; } .close-btn:hover { background: white; box-shadow: 0 0 15px rgba(0, 247, 255, 0.5); } </style> </head> <body> <div class="background"> <div class="grid"></div> <div class="particles" id="particles"></div> </div> <div class="container"> <header> <div class="logo">HYPERPULSE</div> <h1 class="glitch-text" data-text="TECHNO FUSION">TECHNO FUSION</h1> <div class="date">AUGUST 12-14, 2024</div> <div class="beats-controls"> <button class="play-btn" id="play-btn"> <span class="play-icon" id="play-icon"></span> <span class="pause-icon hide" id="pause-icon"></span> <span id="play-text">SYNC BEATS</span> </button> </div> </header> <section class="lineup"> <h2 class="section-title">LINEUP</h2> <div class="dj-list"> <div class="dj-item"> <h3 class="dj-name">NEURAL PULSE</h3> <p class="dj-time">FRI 22:00 - MAIN STAGE</p> </div> <div class="dj-item"> <h3 class="dj-name">SYNTH SISTERS</h3> <p class="dj-time">FRI 00:30 - BASS ARENA</p> </div> <div class="dj-item"> <h3 class="dj-name">COSMIC DRIFT</h3> <p class="dj-time">SAT 21:00 - TECHNO DOME</p> </div> <div class="dj-item"> <h3 class="dj-name">BINARY BEATS</h3> <p class="dj-time">SAT 23:45 - MAIN STAGE</p> </div> <div class="dj-item"> <h3 class="dj-name">QUANTUM FLUX</h3> <p class="dj-time">SUN 20:30 - BASS ARENA</p> </div> <div class="dj-item"> <h3 class="dj-name">ELECTRIC ECHO</h3> <p class="dj-time">SUN 22:15 - TECHNO DOME</p> </div> </div> </section> <section class="venue-info"> <h2 class="section-title">VENUE</h2> <div class="venue-details"> <div class="venue-item"> <svg class="venue-icon" viewBox="0 0 24 24"> <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/> </svg> <div class="venue-text"> <strong>NEXUS WAREHOUSE</strong><br> 120 Electric Avenue, Techno District<br> Metro City, MC 10101 </div> </div> <div class="venue-item"> <svg class="venue-icon" viewBox="0 0 24 24"> <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/> </svg> <div class="venue-text"> <strong>DOORS OPEN</strong><br> Friday: 20:00<br> Saturday: 19:00<br> Sunday: 19:00 </div> </div> <div class="venue-item"> <svg class="venue-icon" viewBox="0 0 24 24"> <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/> </svg> <div class="venue-text"> <strong>INFO</strong><br> 18+ Event • Rain or Shine<br> 3 Stages • Food & Drink Vendors<br> Immersive Light Installations </div> </div> </div> </section> <section class="rsvp-section"> <h2 class="section-title">GET YOUR PASS</h2> <form id="rsvp-form"> <div class="input-group"> <label for="name">FULL NAME</label> <input type="text" id="name" required> </div> <div class="input-group"> <label for="email">EMAIL</label> <input type="email" id="email" required> </div> <div class="input-group"> <label for="ticket-type">TICKET TYPE</label> <select id="ticket-type" required> <option value="">Select your pass</option> <option value="1-day">1-DAY PASS</option> <option value="3-day">3-DAY PASS</option> <option value="vip">VIP EXPERIENCE</option> <option value="backstage">BACKSTAGE PASS</option> </select> </div> <button type="submit" class="submit-btn">SECURE MY SPOT</button> </form> </section> <footer> <p>HYPERPULSE FESTIVAL 2024 • PULSE WITH THE BEAT</p> <div class="social-links"> <svg class="social-icon" viewBox="0 0 24 24"> <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/> </svg> <svg class="social-icon" viewBox="0 0 24 24"> <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/> </svg> <svg class="social-icon" viewBox="0 0 24 24"> <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/> </svg> <svg class="social-icon" viewBox="0 0 24 24"> <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"/> </svg> </div> </footer> </div> <div class="audio-visualizer" id="visualizer"></div> <div class="success-message" id="success-message"> <h3>YOU'RE IN!</h3> <p>Your pass has been reserved. Check your email for confirmation details.</p> <button class="close-btn" id="close-message">AWESOME</button> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Create particles const particles = document.getElementById('particles'); for (let i = 0; i < 30; i++) { const particle = document.createElement('div'); particle.classList.add('particle'); particle.style.width = `${Math.random() * 8 + 2}px`; particle.style.height = particle.style.width; particle.style.left = `${Math.random() * 100}%`; particle.style.animationDelay = `${Math.random() * 5}s`; particle.style.animationDuration = `${Math.random() * 10 + 5}s`; particles.appendChild(particle); } // Create audio visualizer bars const visualizer = document.getElementById('visualizer'); for (let i = 0; i < 50; i++) { const bar = document.createElement('div'); bar.classList.add('audio-bar'); bar.style.height = '2px'; visualizer.appendChild(bar); } // Load audio const audio = new Audio('https://assets.codepen.io/t-1/Synthetic_Epiphany_-_Icarus.mp3'); audio.loop = true; // Text glitch effect elements const glitchText = document.querySelector('.glitch-text'); const mainTitle = document.querySelector('header'); const bars = document.querySelectorAll('.audio-bar'); const playBtn = document.getElementById('play-btn'); const playIcon = document.getElementById('play-icon'); const pauseIcon = document.getElementById('pause-icon'); const playText = document.getElementById('play-text'); let isPlaying = false; // Form elements const form = document.getElementById('rsvp-form'); const successMessage = document.getElementById('success-message'); const closeBtn = document.getElementById('close-message'); // Audio play/pause toggle playBtn.addEventListener('click', function() { if (isPlaying) { audio.pause(); mainTitle.classList.remove('glitch-active'); playIcon.classList.remove('hide'); pauseIcon.classList.add('hide'); playText.textContent = "SYNC BEATS"; isPlaying = false; // Reset visualizer bars.forEach(bar => { bar.style.height = '2px'; }); } else { audio.play().catch(e => console.log('Audio play error:', e)); mainTitle.classList.add('glitch-active'); playIcon.classList.add('hide'); pauseIcon.classList.remove('hide'); playText.textContent = "PAUSE BEATS"; isPlaying = true; // Start visualizer animation animateVisualizer(); } }); // Form submission form.addEventListener('submit', function(e) { e.preventDefault(); // Show success message successMessage.classList.add('active'); // Create confetti effect createConfetti(); // Reset form form.reset(); }); // Close success message closeBtn.addEventListener('click', function() { successMessage.classList.remove('active'); }); // Audio visualizer animation function animateVisualizer() { if (!isPlaying) return; bars.forEach(bar => { const height = Math.floor(Math.random() * 30) + 2; bar.style.height = `${height}px`; }); // Pulse effect on text based on "beats" if (Math.random() > 0.8) { glitchText.classList.add('pulse'); setTimeout(() => { glitchText.classList.remove('pulse'); }, 500); } requestAnimationFrame(() => { setTimeout(animateVisualizer, 100); }); } // Create confetti effect function createConfetti() { const container = document.querySelector('.container'); const colors = ['#00f7ff', '#6600cc', '#ff00cc', '#ffffff']; for (let i =
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CyberLab | Security Training</title> <style> :root { --bg-color: #0a0a0a; --primary-color: #e5e5e5; --accent-color: #ff3b30; --secondary-color: #2a2a2a; --glitch-color1: #ff3b30; --glitch-color2: #00a3ff; --font-main: 'Space Mono', monospace; --font-headings: 'Orbitron', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; cursor: default; } @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap'); body { background-color: var(--bg-color); color: var(--primary-color); font-family: var(--font-main); line-height: 1.6; overflow-x: hidden; height: 100vh; display: flex; justify-content: center; align-items: center; position: relative; } body::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to bottom, transparent, rgba(10, 10, 10, 0.8)), repeating-linear-gradient(0deg, rgba(255, 59, 48, 0.03) 0px, rgba(255, 59, 48, 0.03) 1px, transparent 1px, transparent 2px); pointer-events: none; z-index: -1; } .container { width: 680px; max-width: 100%; margin: 0 auto; padding: 20px; position: relative; height: 660px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--accent-color) var(--bg-color); } .container::-webkit-scrollbar { width: 5px; } .container::-webkit-scrollbar-thumb { background-color: var(--accent-color); } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding-bottom: 10px; border-bottom: 1px solid rgba(229, 229, 229, 0.1); position: relative; } .logo { font-family: var(--font-headings); font-weight: 700; font-size: 24px; letter-spacing: 2px; position: relative; text-transform: uppercase; } .logo::before { content: 'CyberLab'; position: absolute; left: 2px; top: 2px; color: var(--accent-color); opacity: 0.5; z-index: -1; filter: blur(1px); animation: logoGlitch 3s infinite alternate; } .nav { display: flex; gap: 20px; } .nav-item { font-size: 14px; text-transform: uppercase; letter-spacing: 1px; position: relative; cursor: pointer; transition: all 0.3s ease; } .nav-item:hover { color: var(--accent-color); } main { display: grid; grid-template-columns: 1fr; gap: 30px; } .hero { display: flex; flex-direction: column; gap: 20px; position: relative; padding: 20px; border: 1px solid rgba(229, 229, 229, 0.1); background: rgba(42, 42, 42, 0.3); border-radius: 5px; } h1 { font-family: var(--font-headings); font-size: 36px; line-height: 1.2; margin-bottom: 10px; position: relative; } .glitch-wrapper { position: relative; display: inline-block; } .glitch-text { position: relative; display: inline-block; animation: textShift 10s infinite; } h2 { font-family: var(--font-headings); font-size: 24px; margin-bottom: 15px; color: var(--primary-color); } p { margin-bottom: 15px; font-size: 15px; line-height: 1.7; } .cta-btn { display: inline-block; padding: 12px 28px; background-color: var(--secondary-color); color: var(--primary-color); border: 1px solid var(--accent-color); font-family: var(--font-headings); font-size: 16px; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; position: relative; overflow: hidden; transition: all 0.3s ease; margin-top: 15px; align-self: flex-start; } .cta-btn::before { content: attr(data-text); position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; align-items: center; justify-content: center; color: var(--primary-color); z-index: 2; } .cta-btn:hover { background-color: var(--accent-color); color: var(--bg-color); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255, 59, 48, 0.3); } .cta-btn:hover::before { animation: buttonGlitch 0.5s linear forwards; } .courses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .course-card { padding: 20px; background: var(--secondary-color); border: 1px solid rgba(229, 229, 229, 0.1); border-radius: 5px; transition: all 0.3s ease; cursor: pointer; position: relative; overflow: hidden; } .course-card::before { content: ''; position: absolute; top: -10px; left: -10px; width: 20px; height: 20px; background: var(--accent-color); opacity: 0; border-radius: 50%; transition: all 0.3s ease; } .course-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); border-color: var(--accent-color); } .course-card:hover::before { transform: scale(15); opacity: 0.05; } .course-card h3 { font-family: var(--font-headings); font-size: 18px; margin-bottom: 10px; color: var(--primary-color); } .course-card p { font-size: 14px; color: rgba(229, 229, 229, 0.8); } .level { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent-color); margin-top: 10px; display: inline-block; } .terminal-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, rgba(10, 10, 10, 0.8)); pointer-events: none; opacity: 0.1; } .security-stats { padding: 20px; background: var(--secondary-color); border: 1px solid rgba(229, 229, 229, 0.1); border-radius: 5px; margin-top: 30px; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px; } .stat-item { text-align: center; } .stat-value { font-size: 28px; font-weight: bold; font-family: var(--font-headings); color: var(--primary-color); margin-bottom: 5px; position: relative; } .stat-value:hover { animation: numberGlitch 0.5s ease-in-out; } .stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: rgba(229, 229, 229, 0.7); } .scanner-line { position: fixed; height: 2px; background: linear-gradient(to right, transparent, var(--accent-color), transparent); width: 100%; z-index: 10; left: 0; animation: scan 3s ease-in-out infinite; pointer-events: none; } @keyframes scan { 0% { top: 0%; } 75% { top: 100%; } 100% { top: 0%; } } @keyframes logoGlitch { 0%, 100% { transform: translateX(0); } 31%, 33%, 35%, 37% { transform: translateX(-2px); } 32%, 34%, 36% { transform: translateX(2px); } 38% { transform: translateX(0); } } @keyframes buttonGlitch { 0% { clip-path: inset(0 0 0 0); } 20% { clip-path: inset(33% 0 66% 0); transform: translateX(-2px); } 40% { clip-path: inset(66% 0 33% 0); transform: translateX(2px); } 60% { clip-path: inset(33% 0 66% 0); transform: translateX(0); } 80% { clip-path: inset(50% 0 50% 0); transform: translateX(-1px); } 100% { clip-path: inset(0 0 0 0); transform: translateX(0); } } @keyframes textShift { 0%, 100% { transform: translateX(0); } 88%, 92% { transform: translateX(-1px) skewX(2deg); } 90%, 94% { transform: translateX(1px) skewX(-2deg); } 89%, 91%, 93%, 95% { text-shadow: -1px 0 var(--glitch-color1), 1px 0 var(--glitch-color2); transform: translateX(0); } } @keyframes numberGlitch { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-2px); text-shadow: 1px 0 var(--accent-color); } 40%, 80% { transform: translateX(2px); text-shadow: -1px 0 var(--accent-color); } } @media (max-width: 600px) { .courses { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr; } .nav { gap: 10px; } h1 { font-size: 28px; } h2 { font-size: 20px; } .container { padding: 15px; height: 680px; } } /* Scanlines effect */ .scanlines { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( to bottom, transparent 50%, rgba(0, 0, 0, 0.1) 50% ); background-size: 100% 4px; z-index: 100; pointer-events: none; opacity: 0.15; } .noise { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFEmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTgtMTItMjdUMDc6NDE6MjcrMDE6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTAxLTA0VDIyOjM3OjE3KzAxOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTAxLTA0VDIyOjM3OjE3KzAxOjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjA2Y2QzOGI3LWE5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'); background-repeat: repeat; z-index: 99; pointer-events: none; opacity: 0.03; } /* Cyber terminal effect */ @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .cursor { display: inline-block; width: 10px; height: 20px; background: var(--accent-color); margin-left: 5px; animation: blink 1s infinite; } </style> </head> <body> <div class="scanner-line"></div> <div class="container"> <header> <div class="logo">CyberLab</div> <div class="nav"> <div class="nav-item">Courses</div> <div class="nav-item">Resources</div> <div class="nav-item">About</div> </div> </header> <main> <section class="hero"> <h1> <span class="glitch-text">Defend Against</span> <span class="glitch-wrapper glitch-text">Digital Threats</span> </h1> <p>Learn the art of cybersecurity from industry professionals. Our hands-on courses simulate real-world attacks in controlled environments, giving you practical experience against the latest threats.</p> <button class="cta-btn" data-text="START TRAINING">START TRAINING</button> </section> <h2>Featured Security Courses <span class="cursor"></span></h2> <section class="courses"> <div class="course-card"> <h3>Network Penetration Testing</h3> <p>Learn to identify vulnerabilities in corporate networks using the same tools as professional ethical hackers.</p> <span class="level">Advanced</span> </div> <div class="course-card"> <h3>Social Engineering Defense</h3> <p>Master the psychological tactics used by hackers and develop protocols to protect your organization.</p> <span class="level">Intermediate</span> </div> <div class="course-card"> <h3>Ransomware Recovery</h3> <p>Develop incident response plans for ransomware attacks and practice recovery scenarios with real malware samples.</p> <span class="level">Advanced</span> </div> <div class="course-card"> <h3>Zero-Day Vulnerability Analysis</h3> <p>Study recent zero-day exploits and learn methodologies to identify and mitigate previously unknown vulnerabilities.</p> <span class="level">Expert</span> </div> </section> <section class="security-stats"> <h2>Cybersecurity Landscape</h2> <p>The digital threat environment is constantly evolving. Our training adapts to the latest attack vectors to keep your skills relevant.</p> <div class="stats-grid"> <div class="stat-item"> <div class="stat-value">4.5M</div> <div class="stat-label">Daily Cyber Attacks</div> </div> <div class="stat-item"> <div class="stat-value">287</div> <div class="stat-label">Days to Detect Breach</div> </div> <div class="stat-item"> <div class="stat-value">$4.24M</div> <div class="stat-label">Avg. Breach Cost</div> </div> </div> </section> </main> </div> <div class="scanlines"></div> <div class="noise"></div> <div class="terminal-effect"></div> <script> // Glitch effect for CTA buttons const glitchButtons = document.querySelectorAll('.cta-btn'); glitchButtons.forEach(button => { button.addEventListener('mouseover', () => { // Add random pixel shifts let shifts = []; for (let i = 0; i < 5; i++) { shifts.push(`${Math.random() * 5 - 2.5}px ${Math.random() * 5 - 2.5}px`); } // Apply animation button.style.textShadow = shifts.map(shift => `${shift} 0 var(--glitch-color1), ${shift} 0 var(--glitch-color2)` ).join(', '); }); button.addEventListener('mouseout', () => { button.style.textShadow = 'none'; }); button.addEventListener('click', (e) => { e.preventDefault(); // Create glitch effect on click button.style.clipPath = 'inset(0 0 0 0)'; setTimeout(() => { button.style.clipPath = 'inset(33% 0 66% 0)'; }, 50); setTimeout(() => { button.style.clipPath = 'inset(66% 0 33% 0)'; }, 100); setTimeout(() => { button.style.clipPath = 'inset(0 0 0 0)'; }, 150); // Show success message or action setTimeout(() => { const text = button.getAttribute('data-text'); button.setAttribute('data-text', 'PROCESSING...'); setTimeout(() => { button.setAttribute('data-text', 'ACCESS GRANTED'); setTimeout(() => { button.setAttribute('data-text', text); }, 1500); }, 1000); }, 200); }); }); // Glitch effect for text elements const glitchTexts = document.querySelectorAll('.glitch-text'); function applyRandomGlitch() { const randomElement = glitchTexts[Math.floor(Math.random() * glitchTexts.length)]; const originalText = randomElement.textContent; // Create glitched text by replacing random characters const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; const glitchPositions = []; // Decide on 1-3 positions to glitch const glitchCount = Math.floor(Math.random() * 3) + 1; for (let i = 0; i < glitchCount; i++) { glitchPositions.push(Math.floor(Math.random() * originalText.length)); } // Apply the glitch let glitchedText = ''; for (let i = 0; i < originalText.length; i++) { if (glitchPositions.includes(i)) { glitchedText += chars.charAt(Math.floor(Math.random() * chars.length)); } else { glitchedText += originalText[i]; } } randomElement.textContent = glitchedText; // Reset after a short delay setTimeout(() => { randomElement.textContent = originalText; }, 150); } // Apply random glitches occasionally setInterval(applyRandomGlitch, 3000); // Interactive course cards const courseCards = document.querySelectorAll('.course-card'); courseCards.forEach(card => { card.addEventListener('click', () => { // Create digital error effect card.style.transform = 'translateY(-5px) skewX(2deg)'; setTimeout(() => { card.style.transform = 'translateY(-5px) skewX(-2deg)'; }, 100); setTimeout(() => { card.style.transform = 'translateY(-5px)'; }, 200); }); }); // Stat counter effect const statValues = document.querySelectorAll('.stat-value'); statValues.forEach(stat => { stat.addEventListener('mouseover', () => { const originalText = stat.textContent; let iterations = 0; const interval = setInterval(() => { stat.textContent = originalText.split('').map((char, index) => { if (index < iterations) { return originalText[index]; } if (char.match(/[0-9]/)) { return Math.floor(Math.random() * 10); } else if (char.match(/[a-zA-Z]/)) { return 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'[Math.floor(Math.random() * 26)]; } return char; }).join(''); if (iterations >= originalText.length) { clearInterval(interval); stat.textContent = originalText; } iterations += 1 / 3; }, 30); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glitch Art Portfolio</title> <style> :root { --color-bg: #0a0a0f; --color-text: #f0f0f2; --color-accent1: #ff2a6d; --color-accent2: #05d9e8; --color-accent3: #d600ff; --font-main: 'Space Mono', monospace; --font-heading: 'Orbitron', sans-serif; } @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Space+Mono:wght@400;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-main); overflow-x: hidden; max-width: 700px; height: 700px; margin: 0 auto; padding: 1.5rem; display: flex; flex-direction: column; } .portfolio-container { display: flex; flex-direction: column; gap: 1.5rem; height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-accent2) var(--color-bg); } .portfolio-container::-webkit-scrollbar { width: 5px; } .portfolio-container::-webkit-scrollbar-thumb { background-color: var(--color-accent2); } header { margin-bottom: 1rem; } .glitch-title { position: relative; font-family: var(--font-heading); font-size: 2.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em; margin: 2rem 0; padding: 0.5rem 0; color: var(--color-text); } .glitch-title::before, .glitch-title::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0.5rem 0; } .glitch-title::before { color: var(--color-accent2); z-index: -2; } .glitch-title::after { color: var(--color-accent1); z-index: -1; } .glitch-title.active::before { animation: glitch-animation 0.8s ease-in-out infinite alternate-reverse; } .glitch-title.active::after { animation: glitch-animation-2 1.2s ease-in-out infinite alternate-reverse; } @keyframes glitch-animation { 0% { transform: translateX(-3px) skewX(5deg); clip-path: polygon(0 10%, 100% 0%, 100% 80%, 0 100%); } 5% { transform: translateX(3px) skewX(-5deg); clip-path: polygon(0 30%, 100% 10%, 100% 100%, 0 90%); } 10% { transform: translateX(-3px); clip-path: polygon(0 0%, 100% 20%, 100% 80%, 0 100%); } 15% { transform: translateX(3px); clip-path: polygon(0 15%, 100% 0%, 100% 100%, 0 85%); } 20% { transform: translateX(0); clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%); } 100% { transform: translateX(0); clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%); } } @keyframes glitch-animation-2 { 0% { transform: translateX(3px) skewX(-5deg); clip-path: polygon(0 20%, 100% 10%, 100% 90%, 0 80%); } 5% { transform: translateX(-3px) skewX(5deg); clip-path: polygon(0 5%, 100% 15%, 100% 85%, 0 95%); } 10% { transform: translateX(3px); clip-path: polygon(0 15%, 100% 5%, 100% 95%, 0 85%); } 15% { transform: translateX(-3px); clip-path: polygon(0 0%, 100% 10%, 100% 90%, 0 100%); } 20% { transform: translateX(0); clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%); } 100% { transform: translateX(0); clip-path: polygon(0 0%, 100% 0%, 100% 100%, 0 100%); } } .subheading { font-family: var(--font-heading); font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; padding-bottom: 0.5rem; position: relative; overflow: hidden; background: linear-gradient(90deg, var(--color-accent1), var(--color-accent2), var(--color-accent3)); background-size: 200% auto; color: transparent; -webkit-background-clip: text; background-clip: text; animation: gradient-shift 3s ease infinite; } .subheading::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--color-accent1), var(--color-accent2), var(--color-accent3)); background-size: 200% auto; animation: gradient-shift 3s ease infinite; } @keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; } .gallery-item { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 1/1; cursor: pointer; transform-style: preserve-3d; transition: transform 0.3s ease; } .gallery-item:hover { transform: scale(1.05) translateZ(10px); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(50%); transition: filter 0.3s ease, transform 0.3s ease; } .gallery-item:hover img { filter: grayscale(0%); transform: scale(1.1); } .gallery-item::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(5, 217, 232, 0.3), rgba(214, 0, 255, 0.3)); opacity: 0; transition: opacity 0.3s ease; z-index: 1; } .gallery-item:hover::before { opacity: 0.6; } .about-section { background: rgba(10, 10, 15, 0.7); backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 1.5rem; margin-top: 1.5rem; } .about-text { line-height: 1.6; margin-bottom: 1.5rem; } .skills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .skill-tag { background: linear-gradient(45deg, var(--color-accent1), var(--color-accent3)); padding: 0.3rem 0.8rem; border-radius: 20px; font-size: 0.8rem; letter-spacing: 0.05em; position: relative; overflow: hidden; } .skill-tag::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); transform: skewX(45deg); transition: 0.5s; } .skill-tag:hover::before { left: 100%; } .contact-button { display: inline-block; background: none; border: 2px solid var(--color-accent2); color: var(--color-accent2); padding: 0.6rem 1.2rem; border-radius: 4px; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; position: relative; overflow: hidden; z-index: 1; transition: color 0.4s ease; } .contact-button:hover { color: var(--color-bg); } .contact-button::before { content: ''; position: absolute; left: 0; top: 0; width: 0; height: 100%; background: var(--color-accent2); z-index: -1; transition: width 0.4s ease; } .contact-button:hover::before { width: 100%; } .contact-form { display: none; margin-top: 1rem; } .contact-form.active { display: block; } .form-group { margin-bottom: 1rem; } .form-group label { display: block; margin-bottom: 0.5rem; font-family: var(--font-heading); font-size: 0.9rem; letter-spacing: 0.05em; } .form-group input, .form-group textarea { width: 100%; padding: 0.7rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; color: var(--color-text); font-family: var(--font-main); resize: none; transition: border-color 0.3s ease; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--color-accent2); } .form-submit { background: linear-gradient(45deg, var(--color-accent1), var(--color-accent3)); border: none; color: white; padding: 0.7rem 1.5rem; border-radius: 4px; font-family: var(--font-heading); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; } .form-submit:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(255, 42, 109, 0.4); } /* Modal styles */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); z-index: 100; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; } .modal.active { display: flex; opacity: 1; } .modal-content { position: relative; max-width: 80%; max-height: 80%; } .modal-image { max-width: 100%; max-height: 80vh; border: 2px solid rgba(255, 255, 255, 0.1); } .modal-close { position: absolute; top: -30px; right: 0; color: white; font-size: 1.5rem; cursor: pointer; } .modal-caption { color: white; text-align: center; margin-top: 1rem; font-family: var(--font-heading); letter-spacing: 0.05em; } /* Cursor effect */ .cursor { position: fixed; width: 20px; height: 20px; border-radius: 50%; background-color: rgba(5, 217, 232, 0.5); pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); mix-blend-mode: difference; transition: width 0.3s, height 0.3s, background-color 0.3s; } /* Media Queries */ @media (max-width: 600px) { .glitch-title { font-size: 1.8rem; } .gallery { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } } @media (max-width: 400px) { body { padding: 1rem; } .glitch-title { font-size: 1.5rem; } .subheading { font-size: 1rem; } } </style> </head> <body> <div class="cursor"></div> <div class="portfolio-container"> <header> <h1 class="glitch-title" data-text="DIGITAL DISRUPT">DIGITAL DISRUPT</h1> <p>A collection of intentionally corrupted beauty</p> </header> <section> <h2 class="subheading">Featured Works</h2> <div class="gallery"> <div class="gallery-item" data-title="Neural Fragmentation"> <img src="https://images.unsplash.com/photo-1558591710-4b4a1ae0f04d?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Abstract digital art with glitch effects"> </div> <div class="gallery-item" data-title="Pixel Decay"> <img src="https://images.unsplash.com/photo-1633412802994-5c058f151b66?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Distorted digital landscape"> </div> <div class="gallery-item" data-title="Signal Loss"> <img src="https://images.unsplash.com/photo-1626544827763-d516dce335e2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Glitched portrait"> </div> <div class="gallery-item" data-title="Memory Corruption"> <img src="https://images.unsplash.com/photo-1515266591878-f93e32bc5937?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Abstract digital pattern"> </div> <div class="gallery-item" data-title="Binary Erosion"> <img src="https://images.unsplash.com/photo-1506792006437-256b665541e2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Glitch architecture"> </div> <div class="gallery-item" data-title="Data Anomaly"> <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Corrupted digital landscape"> </div> </div> </section> <section class="about-section"> <h2 class="subheading">Art Philosophy</h2> <p class="about-text">My work explores the beauty within digital imperfection. By deliberately introducing controlled chaos into visual systems, I challenge the sterile perfection of digital aesthetics. These corruptions reveal underlying structures that are typically invisible—a digital subconscious emerging through calculated error.</p> <h3 class="subheading">Technical Approach</h3> <div class="skills"> <span class="skill-tag">Databending</span> <span class="skill-tag">Hex Editing</span> <span class="skill-tag">JPEG Artifacts</span> <span class="skill-tag">Pixel Sorting</span> <span class="skill-tag">Buffer Overflow</span> <span class="skill-tag">Distortion Mapping</span> </div> <div class="contact-section"> <button class="contact-button" id="contactBtn">Commission Work</button> <div class="contact-form" id="contactForm"> <div class="form-group"> <label for="name">Name</label> <input type="text" id="name" placeholder="Your name"> </div> <div class="form-group"> <label for="email">Email</label> <input type="email" id="email" placeholder="Your email"> </div> <div class="form-group"> <label for="message">Project Description</label> <textarea id="message" rows="3" placeholder="Describe your project idea..."></textarea> </div> <button class="form-submit">Send Message</button> </div> </div> </section> </div> <div class="modal" id="modal"> <div class="modal-content"> <span class="modal-close" id="modalClose">×</span> <img class="modal-image" id="modalImage" src="" alt=""> <div class="modal-caption" id="modalCaption"></div> </div> </div> <script> // Glitch effect on hover const glitchTitle = document.querySelector('.glitch-title'); glitchTitle.addEventListener('mouseenter', () => { glitchTitle.classList.add('active'); }); glitchTitle.addEventListener('mouseleave', () => { setTimeout(() => { glitchTitle.classList.remove('active'); }, 1000); }); // Random glitch effect setInterval(() => { glitchTitle.classList.add('active'); setTimeout(() => { glitchTitle.classList.remove('active'); }, 800); }, 5000); // Contact form toggle const contactBtn = document.getElementById('contactBtn'); const contactForm = document.getElementById('contactForm'); contactBtn.addEventListener('click', () => { contactForm.classList.toggle('active'); if (contactForm.classList.contains('active')) { contactBtn.textContent = 'Hide Form'; } else { contactBtn.textContent = 'Commission Work'; } }); // Modal functionality const modal = document.getElementById('modal'); const modalImage = document.getElementById('modalImage'); const modalCaption = document.getElementById('modalCaption'); const modalClose = document.getElementById('modalClose'); const galleryItems = document.querySelectorAll('.gallery-item'); galleryItems.forEach(item => { item.addEventListener('click', () => { const imgSrc = item.querySelector('img').src; const title = item.getAttribute('data-title'); modalImage.src = imgSrc.replace('w=300', 'w=800'); modalCaption.textContent = title; modal.classList.add('active'); }); }); modalClose.addEventListener('click', () => { modal.classList.remove('active'); }); modal.addEventListener('click', (e) => { if (e.target === modal) { modal.classList.remove('active'); } }); // Form submit prevention document.querySelector('.form-submit').addEventListener('click', (e) => { e.preventDefault(); const nameInput = document.getElementById('name'); const emailInput = document.getElementById('email'); const messageInput = document.getElementById('message'); if (nameInput.value && emailInput.value && messageInput.value) { contactForm.innerHTML = '<p style="color: var(--color-accent2);">Thank you for your interest! Your message has been received.</p>'; } else { alert('Please fill in all fields'); } }); // Custom cursor effect const cursor = document.querySelector('.cursor'); document.addEventListener('mousemove', (e) => { cursor.style.left = `${e.clientX}px`; cursor.style.top = `${e.clientY}px`; }); document.addEventListener('mousedown', () => { cursor.style.width = '15px'; cursor.style.height = '15px'; cursor.style.backgroundColor = 'rgba(214, 0, 255, 0.5)'; }); document.addEventListener('mouseup', () => { cursor.style.width = '20px'; cursor.style.height = '20px'; cursor.style.backgroundColor = 'rgba(5, 217, 232, 0.5)'; }); // Hide cursor when leaving window document.addEventListener('mouseleave', () => { cursor.style.display = 'none'; }); document.addEventListener('mouseenter', () => { cursor.style.display = 'block'; }); // Interactive elements cursor effect const interactiveElements = document.querySelectorAll('.gallery-item, .contact-button, .form-submit, .skill-tag'); interactiveElements.forEach(element => { element.addEventListener('mouseenter', () => { cursor.style.width = '40px'; cursor.style.height = '40px'; cursor.style.backgroundColor = 'rgba(255, 42, 109, 0.2)'; }); element.addEventListener('mouseleave', () => { cursor.style.width = '20px'; cursor.style.height = '20px'; cursor.style.backgroundColor = 'rgba(5, 217, 232, 0.5)'; }); }); // Random glitch effect on gallery items function randomGlitch() { const randomItem = galleryItems[Math.floor(Math.random() * galleryItems.length)]; const img = randomItem.querySelector('img'); img.style.filter = 'hue-rotate(90deg) contrast(1.5) grayscale(50%)'; setTimeout(() => { img.style.filter = 'grayscale(50%)'; }, 300); } setInterval(randomGlitch, 3000); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Entropy: Science Fiction Books</title> <style> :root { --primary-color: #1a1a2e; --accent-color: #4d7e9f; --metallic-light: #a7b4c2; --metallic-medium: #6d7a88; --metallic-dark: #3d4552; --text-color: #e6e6e6; --glitch-color-1: #ff2e63; --glitch-color-2: #08d9d6; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Orbitron', 'Rajdhani', sans-serif; } body { background-color: var(--primary-color); color: var(--text-color); height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; overflow-x: hidden; background-image: radial-gradient(circle at 10% 20%, rgba(73, 93, 109, 0.1) 0%, transparent 20%), radial-gradient(circle at 90% 80%, rgba(73, 93, 109, 0.1) 0%, transparent 20%); } .container { width: 100%; max-width: 700px; height: 700px; padding: 2rem; display: flex; flex-direction: column; position: relative; overflow: hidden; } .container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(26, 26, 46, 0.8), rgba(26, 26, 46, 0.9)); z-index: -1; } .header { text-align: center; margin-bottom: 1.5rem; } .title { font-size: 2.5rem; font-weight: 700; letter-spacing: 0.2rem; margin-bottom: 0.5rem; position: relative; display: inline-block; } .title span { display: inline-block; position: relative; color: var(--metallic-light); text-shadow: 0 0 5px rgba(167, 180, 194, 0.5); } .subtitle { font-size: 1rem; color: var(--metallic-medium); letter-spacing: 0.15rem; font-weight: 400; margin-bottom: 1.5rem; } .books-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .book { background: linear-gradient(135deg, var(--metallic-dark), var(--primary-color)); border: 1px solid var(--metallic-medium); border-radius: 0.25rem; padding: 1rem; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; position: relative; overflow: hidden; } .book::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-color), transparent); opacity: 0.7; } .book:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .book-title { font-size: 1.2rem; font-weight: 600; color: var(--metallic-light); margin-bottom: 0.5rem; position: relative; display: inline-block; } .glitch-title { position: relative; letter-spacing: 0.05em; } .book-author { font-size: 0.9rem; color: var(--metallic-medium); margin-bottom: 0.5rem; } .book-description { font-size: 0.8rem; line-height: 1.4; color: var(--text-color); margin-bottom: 1rem; } .book-price { font-size: 1.1rem; font-weight: 600; color: var(--accent-color); display: block; margin-bottom: 1rem; } .cta-button { background: linear-gradient(135deg, var(--accent-color), var(--metallic-dark)); color: var(--text-color); border: none; padding: 0.5rem 1rem; font-size: 0.8rem; border-radius: 0.25rem; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; display: inline-block; text-transform: uppercase; letter-spacing: 0.1rem; font-weight: 600; width: 100%; } .cta-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: all 0.6s ease; } .cta-button:hover::before { left: 100%; } .cta-button:hover { background: linear-gradient(135deg, var(--metallic-dark), var(--accent-color)); box-shadow: 0 0 10px rgba(77, 126, 159, 0.5); } .footer { margin-top: auto; text-align: center; font-size: 0.8rem; color: var(--metallic-medium); padding-top: 1rem; border-top: 1px solid var(--metallic-dark); } .feature-section { margin-bottom: 2rem; text-align: center; } .feature-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; color: var(--metallic-light); } .featured-book { background: linear-gradient(135deg, var(--primary-color), var(--metallic-dark)); border: 1px solid var(--accent-color); border-radius: 0.25rem; padding: 1.5rem; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; margin: 0 auto; max-width: 400px; transform-style: preserve-3d; perspective: 1000px; } .featured-book::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, transparent, rgba(77, 126, 159, 0.05), transparent); animation: pulse 8s ease-in-out infinite; } .featured-title { font-size: 1.8rem; margin-bottom: 0.5rem; color: var(--metallic-light); text-shadow: 0 0 5px rgba(167, 180, 194, 0.5); position: relative; } .neural-interface { position: relative; width: 60px; height: 60px; margin: 1rem auto; opacity: 0.7; } .neural-interface .circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid var(--accent-color); } .neural-interface .circle:nth-child(1) { width: 20px; height: 20px; animation: pulse 2s ease-in-out infinite; } .neural-interface .circle:nth-child(2) { width: 40px; height: 40px; animation: pulse 4s ease-in-out infinite; } .neural-interface .circle:nth-child(3) { width: 60px; height: 60px; animation: pulse 6s ease-in-out infinite; } .neural-interface .dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4px; height: 4px; background-color: var(--accent-color); border-radius: 50%; box-shadow: 0 0 5px var(--accent-color); } @keyframes pulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } } @keyframes scan { 0% { background-position: 0% 0%; } 100% { background-position: 0% 100%; } } @keyframes glitch { 0%, 100% { transform: none; opacity: 1; } 7% { transform: skew(-0.5deg, -0.9deg); opacity: 0.75; } 10% { transform: none; opacity: 1; } 27% { transform: none; opacity: 1; } 30% { transform: skew(0.8deg, -0.1deg); opacity: 0.75; } 35% { transform: none; opacity: 1; } 52% { transform: none; opacity: 1; } 55% { transform: skew(-1deg, 0.2deg); opacity: 0.75; } 50% { transform: none; opacity: 1; } 72% { transform: none; opacity: 1; } 75% { transform: skew(0.4deg, 1deg); opacity: 0.75; } 80% { transform: none; opacity: 1; } 100% { transform: none; opacity: 1; } } @keyframes glitch-skew { 0% { transform: skew(0deg); } 10% { transform: skew(1deg); } 20% { transform: skew(0deg); } 30% { transform: skew(-1deg); } 40% { transform: skew(0deg); } 50% { transform: skew(2deg); } 60% { transform: skew(0deg); } 70% { transform: skew(-2deg); } 80% { transform: skew(0deg); } 90% { transform: skew(1deg); } 100% { transform: skew(0deg); } } @keyframes dataCorruption { 0%, 100% { clip-path: inset(0 0 0 0); } 5% { clip-path: inset(10% 0 45% 0); } 15% { clip-path: inset(45% 0 31% 0); } 25% { clip-path: inset(31% 0 27% 0); } 35% { clip-path: inset(27% 0 39% 0); } 45% { clip-path: inset(39% 0 17% 0); } 55% { clip-path: inset(17% 0 12% 0); } 65% { clip-path: inset(12% 0 34% 0); } 75% { clip-path: inset(34% 0 0% 0); } 85% { clip-path: inset(0% 0 23% 0); } 95% { clip-path: inset(23% 0 0% 0); } } .scan-line { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, rgba(77, 126, 159, 0.05) 50%, transparent); background-size: 100% 100px; animation: scan 4s linear infinite; pointer-events: none; opacity: 0.5; z-index: 10; } .data-corruption { position: relative; display: inline-block; } .data-corruption::before, .data-corruption::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--primary-color); } .data-corruption::before { left: 2px; text-shadow: -1px 0 var(--glitch-color-1); animation: dataCorruption 2s infinite linear alternate-reverse; } .data-corruption::after { left: -2px; text-shadow: 1px 0 var(--glitch-color-2); animation: dataCorruption 3s infinite linear alternate-reverse; } @media (max-width: 600px) { .books-container { grid-template-columns: 1fr; } .title { font-size: 2rem; } .featured-title { font-size: 1.5rem; } .container { padding: 1rem; } } </style> </head> <body> <div class="container"> <div class="scan-line"></div> <div class="header"> <h1 class="title"> <div class="data-corruption" data-text="ENTROPY">ENTROPY</div> </h1> <p class="subtitle">FUTURISTIC FICTION FOR THE DIGITAL DISSOLUTION ERA</p> </div> <div class="feature-section"> <div class="featured-book"> <h2 class="featured-title"> <div class="data-corruption" data-text="NEURAL//DIVIDE">NEURAL//DIVIDE</div> </h2> <div class="neural-interface"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="dot"></div> </div> <p class="book-description"> In a world where consciousness uploads have become commodified, a digital archaeologist discovers corrupted memory blocks that contain the last moments of extinct humanity. </p> <span class="book-price">₵ 42.0101011</span> <button class="cta-button">PRE-ORDER CONSCIOUSNESS</button> </div> </div> <div class="books-container"> <div class="book"> <h2 class="book-title"> <div class="data-corruption" data-text="EXOCODE">EXOCODE</div> </h2> <p class="book-author">by ARIA.404</p> <p class="book-description">A rogue satellite AI develops sentience and begins rewriting the code of reality.</p> <span class="book-price">₵ 28.1111001</span> <button class="cta-button">DOWNLOAD</button> </div> <div class="book"> <h2 class="book-title"> <div class="data-corruption" data-text="STATIC/VOID">STATIC/VOID</div> </h2> <p class="book-author">by ECHO.SYS</p> <p class="book-description">The last radio operator on Earth receives transmissions from a future that no longer exists.</p> <span class="book-price">₵ 31.0101110</span> <button class="cta-button">INTERCEPT</button> </div> <div class="book"> <h2 class="book-title"> <div class="data-corruption" data-text="QUANTUM.FLUX">QUANTUM.FLUX</div> </h2> <p class="book-author">by NULL.POINT</p> <p class="book-description">A chronologist navigates through decaying timelines to retrieve fragmented memories.</p> <span class="book-price">₵ 36.0100111</span> <button class="cta-button">SYNCHRONIZE</button> </div> </div> <div class="footer"> <p>TRANSMISSION© 2193.12.21 | ENTROPY PUBLICATIONS</p> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const glitchTitles = document.querySelectorAll('.data-corruption'); // Add random glitch effects setInterval(() => { const randomTitle = glitchTitles[Math.floor(Math.random() * glitchTitles.length)]; randomTitle.style.animation = 'glitch 0.5s ease-out'; setTimeout(() => { randomTitle.style.animation = ''; }, 500); }, 3000); // Button interaction enhancement const buttons = document.querySelectorAll('.cta-button'); buttons.forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); // Visual feedback this.style.transform = 'scale(0.95)'; // Create glitch effect const glitchOverlay = document.createElement('div'); glitchOverlay.style.position = 'fixed'; glitchOverlay.style.top = '0'; glitchOverlay.style.left = '0'; glitchOverlay.style.width = '100%'; glitchOverlay.style.height = '100%'; glitchOverlay.style.backgroundColor = 'rgba(77, 126, 159, 0.05)'; glitchOverlay.style.zIndex = '1000'; glitchOverlay.style.pointerEvents = 'none'; document.body.appendChild(glitchOverlay); setTimeout(() => { this.style.transform = ''; document.body.removeChild(glitchOverlay); // Change button text to show "action" taken const originalText = this.textContent; this.textContent = "PROCESSING..."; setTimeout(() => { this.textContent = "CONFIRMED"; setTimeout(() => { this.textContent = originalText; }, 1500); }, 1000); }, 300); }); }); // Create hover effects for books const books = document.querySelectorAll('.book'); books.forEach(book => { book.addEventListener('mouseenter', function() { const titles = this.querySelectorAll('.data-corruption'); titles.forEach(title => { title.style.animation = 'glitch 0.3s ease-out'; }); }); book.addEventListener('mouseleave', function() { const titles = this.querySelectorAll('.data-corruption'); titles.forEach(title => { title.style.animation = ''; }); }); }); // Create 3D effect for featured book const featuredBook = document.querySelector('.featured-book'); featuredBook.addEventListener('mousemove', function(e) { const rect = this.getBoundingClientRect(); const x = (e.clientX - rect.left) / rect.width - 0.5; const y = (e.clientY - rect.top) / rect.height - 0.5; this.style.transform = `perspective(1000px) rotateY(${x * 5}deg) rotateX(${y * -5}deg)`; // Add dynamic shadow based on tilt this.style.boxShadow = ` ${x * -15}px ${y * -15}px 20px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.3) `; }); featuredBook.addEventListener('mouseleave', function() { this.style.transform = 'perspective(1000px) rotateY(0) rotateX(0)'; this.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.3)'; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GLITCH//CON 2024</title> <style> :root { --primary: #0a1128; --secondary: #033f63; --accent: #00d4ff; --accent-alt: #ff2e63; --text: #f5f5f5; --text-secondary: #c2c2c2; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } body { background-color: var(--primary); color: var(--text); overflow-x: hidden; width: 100%; height: 100%; line-height: 1.6; } .container { max-width: 100%; padding: 0 1.5rem; margin: 0 auto; overflow-x: hidden; } .navbar { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background-color: rgba(10, 17, 40, 0.8); } .logo { font-weight: 800; font-size: 1.8rem; letter-spacing: -1px; color: var(--accent); position: relative; z-index: 2; } .logo::after { content: ''; position: absolute; height: 10px; width: 10px; background-color: var(--accent-alt); border-radius: 50%; bottom: 5px; right: -12px; } .nav-links { display: flex; gap: 2rem; } .nav-links a { color: var(--text); text-decoration: none; font-weight: 500; position: relative; transition: all 0.3s ease; } .nav-links a:hover { color: var(--accent); } .nav-links a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 0; background-color: var(--accent); transition: width 0.3s ease; } .nav-links a:hover::after { width: 100%; } .cta-button { background: linear-gradient(90deg, var(--accent) 0%, var(--accent-alt) 100%); color: var(--primary); padding: 0.7rem 1.5rem; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-block; } .cta-button:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 212, 255, 0.2); } .burger { display: none; cursor: pointer; } .burger div { width: 25px; height: 3px; background-color: var(--text); margin: 5px; transition: all 0.3s ease; } .hero { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem 0; text-align: center; position: relative; overflow: hidden; } .hero::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, transparent 0%, var(--primary) 70%); z-index: 1; } .hero::before { content: ''; position: absolute; width: 300px; height: 300px; background: var(--accent); filter: blur(120px); opacity: 0.4; animation: float 15s infinite alternate; } @keyframes float { 0% { transform: translate(-50%, -50%); } 100% { transform: translate(50%, 50%); } } .hero-content { position: relative; z-index: 2; max-width: 800px; } .glitch-text-container { position: relative; display: inline-block; font-weight: 800; font-size: 3.5rem; line-height: 1.1; margin-bottom: 1.5rem; overflow: hidden; } .glitch-text { position: relative; display: inline-block; letter-spacing: -2px; } .hero-subtitle { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; } .date-location { display: flex; justify-content: center; gap: 2rem; margin-top: 2rem; flex-wrap: wrap; } .info-card { background-color: var(--secondary); padding: 1rem 2rem; border-radius: 5px; display: flex; align-items: center; gap: 0.5rem; } .info-card i { color: var(--accent); } .section-title { font-size: 2.5rem; margin-bottom: 2rem; position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; width: 50%; height: 4px; background-color: var(--accent); bottom: -10px; left: 0; } .section { padding: 5rem 0; position: relative; } .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .about-image { width: 100%; border-radius: 10px; position: relative; overflow: hidden; aspect-ratio: 16/9; background: url('https://source.unsplash.com/random/800x600/?technology') center center; background-size: cover; } .about-image::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(3, 63, 99, 0.7), transparent); } .about-text p { margin-bottom: 1rem; } .speakers { background-color: var(--secondary); padding: 5rem 0; } .speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 2rem; } .speaker-card { background-color: var(--primary); border-radius: 10px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .speaker-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); } .speaker-image { width: 100%; aspect-ratio: 1/1; object-fit: cover; } .speaker-info { padding: 1.5rem; } .speaker-name { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; } .speaker-role { color: var(--accent); font-size: 0.9rem; margin-bottom: 1rem; } .speaker-bio { font-size: 0.9rem; color: var(--text-secondary); } .schedule { padding: 5rem 0; } .day-tabs { display: flex; gap: 1rem; margin-bottom: 2rem; } .day-tab { padding: 0.7rem 1.5rem; border: 2px solid var(--secondary); border-radius: 5px; cursor: pointer; transition: all 0.3s ease; } .day-tab.active { background-color: var(--secondary); color: var(--accent); } .schedule-item { display: grid; grid-template-columns: 1fr 4fr; gap: 2rem; padding: 1.5rem; border-radius: 10px; margin-bottom: 1rem; background-color: var(--secondary); transition: transform 0.3s ease; } .schedule-item:hover { transform: scale(1.02); } .time { font-size: 1.2rem; font-weight: 600; color: var(--accent); } .schedule-content h3 { margin-bottom: 0.5rem; font-size: 1.2rem; } .schedule-content p { color: var(--text-secondary); font-size: 0.9rem; } .venue { background-color: var(--secondary); padding: 5rem 0; } .venue-content { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .venue-map { border-radius: 10px; overflow: hidden; height: 300px; background-color: #1e3a5f; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--accent); } .venue-details h3 { margin-bottom: 1.5rem; font-size: 1.5rem; } .venue-info { display: grid; grid-template-columns: auto 1fr; gap: 1rem 2rem; margin-bottom: 2rem; } .venue-info i { color: var(--accent); font-size: 1.5rem; } .sponsors { padding: 5rem 0; } .sponsor-tiers { display: flex; flex-direction: column; gap: 3rem; } .tier { display: flex; flex-direction: column; gap: 1rem; } .tier-title { font-size: 1.5rem; position: relative; margin-bottom: 1.5rem; } .tier-title::after { content: ''; position: absolute; width: 30px; height: 3px; background-color: var(--accent); bottom: -5px; left: 0; } .sponsor-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2rem; align-items: center; } .sponsor-logo { background-color: var(--secondary); aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; border-radius: 10px; transition: transform 0.3s ease; } .sponsor-logo:hover { transform: scale(1.05); } .register { padding: 5rem 0; text-align: center; } .ticket-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; margin-top: 3rem; } .ticket-card { background-color: var(--secondary); border-radius: 10px; padding: 2.5rem 2rem; transition: transform 0.3s ease, box-shadow 0.3s ease; } .ticket-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); } .ticket-name { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem; } .ticket-price { font-size: 2.5rem; font-weight: 800; color: var(--accent); margin-bottom: 1.5rem; } .ticket-features { list-style: none; margin-bottom: 2rem; } .ticket-features li { margin-bottom: 0.8rem; position: relative; padding-left: 1.5rem; } .ticket-features li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); } footer { background-color: var(--secondary); padding: 3rem 0; text-align: center; } .footer-links { display: flex; justify-content: center; gap: 2rem; margin-bottom: 2rem; } .footer-links a { color: var(--text); text-decoration: none; transition: color 0.3s ease; } .footer-links a:hover { color: var(--accent); } .social-links { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; } .social-links a { color: var(--text); font-size: 1.5rem; transition: color 0.3s ease, transform 0.3s ease; } .social-links a:hover { color: var(--accent); transform: translateY(-3px); } .back-to-top { position: fixed; bottom: 2rem; right: 2rem; background-color: var(--accent); color: var(--primary); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; z-index: 10; } .back-to-top.show { opacity: 1; } .back-to-top:hover { transform: translateY(-5px); } /* Glitch effect */ .glitch { position: relative; color: var(--text); } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8; } .glitch::before { color: var(--accent); z-index: -1; clip: rect(44px, 450px, 56px, 0); animation: glitch-anim-1 5s infinite linear alternate-reverse; } .glitch::after { color: var(--accent-alt); z-index: -2; clip: rect(24px, 450px, 36px, 0); animation: glitch-anim-2 4s infinite linear alternate-reverse; } @keyframes glitch-anim-1 { 0% { clip: rect(24px, 450px, 39px, 0); transform: translate(-2px, -2px); } 2% { clip: rect(37px, 450px, 63px, 0); transform: translate(2px, 2px); } 4% { clip: rect(26px, 450px, 57px, 0); transform: translate(-1px, -1px); } 6% { clip: rect(29px, 450px, 44px, 0); transform: translate(1px, 2px); } 8% { clip: rect(9px, 450px, 37px, 0); transform: translate(-1px, -2px); } 10% { clip: rect(70px, 450px, 80px, 0); transform: translate(2px, -1px); } 12% { clip: rect(24px, 450px, 26px, 0); transform: translate(-2px, 1px); } 14% { clip: rect(75px, 450px, 95px, 0); transform: translate(1px, -1px); } 16% { clip: rect(86px, 450px, 89px, 0); transform: translate(-1px, 2px); } 18% { clip: rect(46px, 450px, 75px, 0); transform: translate(2px, -2px); } 20% { clip: rect(4px, 450px, 15px, 0); transform: translate(-1px, 1px); } 100% { clip: rect(4px, 450px, 15px, 0); transform: translate(-1px, 1px); } } @keyframes glitch-anim-2 { 0% { clip: rect(7px, 450px, 15px, 0); transform: translate(-2px, -2px); } 2% { clip: rect(46px, 450px, 73px, 0); transform: translate(2px, 2px); } 4% { clip: rect(52px, 450px, 97px, 0); transform: translate(-1px, -1px); } 6% { clip: rect(39px, 450px, 64px, 0); transform: translate(1px, 2px); } 8% { clip: rect(29px, 450px, 57px, 0); transform: translate(-1px, -2px); } 10% { clip: rect(10px, 450px, 20px, 0); transform: translate(2px, -1px); } 100% { clip: rect(10px, 450px, 20px, 0); transform: translate(2px, -1px); } } /* Scanner effect */ .scanner { position: relative; overflow: hidden; } .scanner::after { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100% ); transform: rotate(30deg); animation: scan 3s ease-in-out infinite; } @keyframes scan { 0% { top: -100%; left: -100%; } 100% { top: 100%; left: 100%; } } /* Responsive Styles */ @media screen and (max-width: 768px) { .nav-links { position: absolute; right: 0; top: 0; height: 100vh; width: 70%; background-color: var(--secondary); flex-direction: column; align-items: center; justify-content: center; transform: translateX(100%); transition: transform 0.5s ease-in; z-index: 1; } .nav-links.active { transform: translateX(0%); } .burger { display: block; z-index: 2; } .burger.active div:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); } .burger.active div:nth-child(2) { opacity: 0; } .burger.active div:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); } .hero-title { font-size: 2.5rem; } .about-content, .venue-content { grid-template-columns: 1fr; } .about-image { order: -1; } .schedule-item { grid-template-columns: 1fr; gap: 0.5rem; } .glitch-text-container { font-size: 2.5rem; } } @media screen and (max-width: 480px) { .hero-title { font-size: 2rem; } .day-tabs { flex-direction: column; } .glitch-text-container { font-size: 2rem; } .footer-links { flex-direction: column; gap: 1rem; } } </style> </head> <body> <div class="container"> <nav class="navbar"> <div class="logo">GLITCH//CON</div> <div class="nav-links"> <a href="#about">About</a> <a href="#speakers">Speakers</a> <a href="#schedule">Schedule</a> <a href="#venue">Venue</a> <a href="#sponsors">Sponsors</a> <a href="#register" class="cta-button">Register Now</a> </div> <div class="burger"> <div></div> <div></div> <div></div> </div> </nav> <section id="hero" class="hero"> <div class="hero-content"> <div class="glitch-text-container"> <h1 class="glitch-text glitch" data-text="BREAKING THE CODE">BREAKING THE CODE</h1> </div> <p class="hero-subtitle">Join us for the most disruptive tech conference of 2024, where innovators, visionaries, and rebels converge to redefine the future of technology.</p> <a href="#register" class="cta-button scanner">Reserve Your Spot</a> <div class="date-location"> <div class="info-card"> <i class="date-icon">📅</i> <span>June 15-17, 2024</span> </div> <div class="info-card"> <i class="location-icon">📍</i> <span>TechHub, San Francisco</span> </div> </div> </div> </section> <section id="about" class="section"> <h2 class="section-title glitch" data-text="ABOUT">ABOUT</h2> <div class="about-content"> <div class="about-text"> <p>GLITCH//CON isn't your typical tech conference. We're bringing together the brightest minds in AI, blockchain, quantum computing, and cybersecurity to explore the glitches in our current systems and turn them into opportunities.</p> <p>Through immersive workshops, cutting-edge demos, and provocative keynotes, we'll challenge the status quo and push the boundaries of what's possible in tech.</p> <p>Whether you're a seasoned developer, a curious investor, or a tech enthusiast, GLITCH//CON offers a unique platform to connect, collaborate, and catalyze change.</p> </div> <div class="about-image"></div> </div> </section> <section id="speakers" class="speakers"> <div class="container"> <h2 class="section-title glitch" data-text="SPEAKERS">SPEAKERS</h2> <div class="speaker-grid"> <div class="speaker-card"> <div class="speaker-image" style="background: #033f63; display: flex; align-items: center; justify-content: center;"> <span style="font-size: 3rem;">👩💻</span> </div> <div class="speaker-info"> <h3 class="speaker-name">Dr. Maya Patel</h3> <p class="speaker-role">Chief AI Ethics Officer, NeuroSync</p> <p class="speaker-bio">Pioneer in ethical AI frameworks with groundbreaking work on algorithmic bias correction in large language models.</p> </div> </div> <div class="speaker-card"> <div class="speaker-image" style="background: #033f63; display: flex; align-items: center; justify-content: center;"> <span style="font-size: 3rem;">👨🔬</span> </div> <div class="speaker-info"> <h3 class="speaker-name">Kenji Tanaka</h3> <p class="speaker-role">Quantum Computing Architect, QuantumLeap</p> <p class="speaker-bio">Created the first commercially viable 256-qubit quantum processor, revolutionizing cryptographic security protocols.</p> </div> </div> <div class="speaker-card"> <div class="speaker-image" style="background: #033f63; display: flex; align-items: center; justify-content: center;"> <span style="font-size: 3rem;">👩🚀</span> </div> <div class="speaker-info"> <h3 class="speaker-name">Sarah Rodriguez</h3> <p class="speaker-role">Blockchain Strategist, DecentraNet</p> <p class="speaker-bio">Architect of revolutionary DAOs for climate action that have secured over $200M in regenerative financing.</p> </div> </div> <div class="speaker-card"> <div class="speaker-image" style="background: #033f63; display: flex; align-items: center; justify-content: center;"> <span style="font-size: 3rem;">🧠</span> </div> <div class="speaker-info"> <h3 class="speaker-name">Jamal Washington</h3> <p class="speaker-role">Head of Immersive Experiences, MetaVerse</p> <p class="speaker-bio">Leading creator of sensory-rich AR/VR environments utilizing neuroplasticity principles for enhanced learning.</p> </div> </div> </div> </div> </section> <section id="schedule" class="schedule"> <div class="container"> <h2 class="section-title glitch" data-text="SCHEDULE">SCHEDULE</h2> <div class="day-tabs"> <div class="day-tab active" data-day="day1">Day 1: Disruption</div> <div class="day-tab" data-day="day2">Day 2: Innovation</div> <div class="day-tab" data-day="day3">Day 3: Integration</div> </div> <div class="schedule-content day1"> <div class="schedule-item"> <div class="time">09:00</div> <div class="schedule-content"> <h3 class="glitch" data-text="Opening Keynote: The Glitch Manifesto">Opening Keynote: The Glitch Manifesto</h3> <p>Dr. Maya Patel explores how system failures reveal critical pathways for innovation.</p> </div> </div> <div class="schedule-item"> <div class="time">11:00</div> <div class="schedule-content"> <h3 class="glitch" data-text="Panel: Breaking Barriers in Quantum Computing">Panel: Breaking Barriers in Quantum Computing</h3> <p>Leading quantum physicists discuss the quantum supremacy breakthrough and its implications.</p> </div> </div> <div class="schedule-item"> <div class="time">14:00</div> <div class="schedule-content"> <h3 class="glitch" data-text="Workshop: Ethical Hacking for Good">Workshop: Ethical Hacking for Good</h3> <p>Hands-on session on identifying vulnerabilities in critical infrastructure systems.</p> </div> </div> <div class="schedule-item"> <div class="time">16:30</div> <div class="schedule-content"> <h3 class="glitch" data-text="Fireside Chat: The Dark Side of Big Tech">Fireside Chat: The Dark Side of Big Tech</h3> <p>Whistleblowers and tech executives debate the responsibility of digital platforms.</p> </div> </div> </div> <div class="schedule-content day2" style="display: none;"> <div class="schedule-item"> <div class="time">09:00</div> <div class="schedule-content"> <h3 class="glitch" data-text="Keynote: Biomimicry in System Design">Keynote: Biomimicry in System Design</h3> <p>Sarah Rodriguez reveals how natural systems inform resilient blockchain architectures.</p> </div> </div> <div class="schedule-item"> <div class="time">11:00</div> <div class="schedule-content"> <h3 class="glitch" data-text="Demo Showcase: Next-Gen Neural Interfaces">Demo Showcase: Next-Gen Neural Interfaces</h3> <p>Live demonstrations of direct brain-computer interfaces revolutionizing human capability.</p> </div> </div> <div class="schedule-item"> <div class="time">14:00</div> <div class="schedule-content"> <h3 class="glitch" data-text="Workshop: Decentralized Autonomous Organizations">Workshop: Decentralized Autonomous Organizations</h3> <p>Build and deploy your own DAO with governance mechanisms and tokenomics.</p> </div> </div> <div class="schedule-item"> <div class="time">16:30</div> <div class="schedule-content"> <h3 class="glitch" data-text="Panel: The New Creator Economy">Panel: The New Creator Economy</h3> <p>How cryptographic ownership models are transforming creative industries.</p> </div> </div> </div> <div class="schedule-content day3" style="display: none;"> <div class="schedule-item"> <div class="time">09:00</div> <div class="schedule-content"> <h3 class="glitch" data-text="Keynote: Integrating Human and Machine Intelligence">Keynote: Integrating Human and Machine Intelligence</h3> <p>Jamal Washington explores cognitive symbiosis between humans and AI systems.</p> </div> </div> <div class="schedule-item"> <div class="time">11:00</div> <div class="schedule-content"> <h3 class="glitch" data-text="Workshop: Cross-Reality Development">Workshop: Cross-Reality Development</h3> <p>Building seamless experiences across physical, augmented, and virtual realities.</p> </div> </div> <div class="schedule-item"> <div class="time">14:00</div> <div class="schedule-content"> <h3 class="glitch" data-text="Hackathon Finals">Hackathon Finals</h3> <p>Top teams present their solutions for integrating emerging technologies into everyday life.</p> </div> </div> <div class="schedule-item"> <div class="time">16:30</div> <div class="schedule-content"> <h3 class="glitch" data-text="Closing Keynote: The Code Forward">Closing Keynote: The Code Forward</h3> <p>Kenji Tanaka presents a roadmap for technology's next decade of transformation.</p> </div> </div> </div> </div> </section> <section id="venue" class="venue"> <div class="container"> <h2 class="section-title glitch" data-text="VENUE">VENUE</h2> <div class="venue-content"> <div class="venue-map"> INTERACTIVE MAP PLACEHOLDER </div> <div class="venue-details"> <h3 class="glitch" data-text="TechHub San Francisco">TechHub San Francisco</h3> <div class="venue-info"> <i class="address-icon">🏢</i> <div> <p>555 Innovation Boulevard</p> <p>San Francisco, CA 94107</p> </div> <i class="transport-icon">🚇</i> <div> <p>5 min walk from Powell St. BART Station</p> <p>Bike parking available on premises</p> </div> <i class="amenities-icon">✨</i> <div> <p>5G wireless throughout venue</p> <p>Immersive demo spaces with haptic feedback systems</p> <p>Quantum-secure private networking</p> </div> </div> </div> </div> </div> </section> <section id="sponsors" class="sponsors"> <div class="container"> <h2 class="section-title glitch" data-text="SPONSORS">SPONSORS</h2> <div class="sponsor-tiers"> <div class="tier"> <h3 class="tier-title">Quantum Tier</h3> <div class="sponsor-logos"> <div class="sponsor-logo">NeuroSync</div> <div class="sponsor-logo">QuantumLeap</div> <div class="sponsor-logo">MetaVerse</div> </div> </div> <div class="tier"> <h3 class="tier-title">Neural Tier</h3> <div class="sponsor-logos"> <div class="sponsor-logo">DecentraNet</div> <div class="sponsor-logo">CyberShield</div> <div class="sponsor-logo">EdgeCompute</div> <div class="sponsor-logo">NexusAI</div> </div> </div> <div class="tier"> <h3 class="tier-title">Digital Tier</h3> <div class="sponsor-logos"> <div class="sponsor-logo">ByteForge</div> <div class="sponsor-logo">CloudNova</div> <div class="sponsor-logo">VectorLabs</div> <div class="sponsor-logo">DataSphere</div> <div class="sponsor-logo">CodeStream</div> </div> </div> </div> </div> </section> <section id="register" class="register"> <div class="container"> <h2 class="section-title glitch" data-text="REGISTER">REGISTER</h2> <p>Secure your place at the forefront of technological disruption.</p> <div class="ticket-options"> <div class="ticket-card"> <h3 class="ticket-name">EXPLORER PASS</h3> <p class="ticket-price">$499</p> <ul class="ticket-features"> <li>Access to all keynotes</li> <li>Exhibition hall access</li> <li>Networking events</li> <li>Digital conference materials</li> </ul> <a href="#" class="cta-button">Select</a> </div> <div class="ticket-card"> <h3 class="ticket-name">INNOVATOR PASS</h3> <p class="ticket-price">$899</p> <ul class="ticket-features"> <li>All Explorer benefits</li> <li>Workshop participation</li> <li>Exclusive Q&A sessions</li> <li>VR afterparty access</li> <li>1-year digital community membership</li>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glitch Narrative | Interactive Art Installation</title> <style> :root { --primary: #0f0f1e; --secondary: #f0f0ff; --accent1: #ff2266; --accent2: #00ddff; --accent3: #7733ff; --glitch-intensity: 0; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Space Mono', monospace; } body { background-color: var(--primary); color: var(--secondary); overflow-x: hidden; height: 100vh; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; } .container { max-width: 700px; margin: 0 auto; padding: 1.5rem; position: relative; height: 100%; display: flex; flex-direction: column; } header { position: relative; margin-bottom: 2rem; } .glitch-title { font-size: 3rem; font-weight: 900; letter-spacing: -0.05em; position: relative; margin-bottom: 0.5rem; text-transform: uppercase; mix-blend-mode: difference; } .glitch-title::before, .glitch-title::after { content: "D̷a̶t̴a̷ C̶o̴r̶r̶u̴p̵t̶i̷o̵n̴"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.8; } .glitch-title::before { color: var(--accent1); transform: translateX(calc(-0.05em * var(--glitch-intensity))); animation: glitch-anim-1 3s infinite linear alternate; clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); } .glitch-title::after { color: var(--accent2); transform: translateX(calc(0.05em * var(--glitch-intensity))); animation: glitch-anim-2 2.7s infinite linear alternate; clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); } @keyframes glitch-anim-1 { 0%, 100% { opacity: 0.8; } 50% { opacity: 0.4; } } @keyframes glitch-anim-2 { 0%, 100% { opacity: 0.8; } 50% { opacity: 0.6; } } .subtitle { font-size: 1.2rem; font-weight: 400; margin-bottom: 1rem; position: relative; color: var(--accent2); mix-blend-mode: exclusion; } .interactive-canvas { height: 300px; width: 100%; position: relative; border: 2px solid var(--secondary); background-color: rgba(15, 15, 30, 0.7); margin-bottom: 1.5rem; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: crosshair; } .canvas-text { font-size: 1.8rem; font-weight: bold; color: var(--secondary); text-align: center; position: relative; z-index: 2; letter-spacing: 2px; transition: all 0.3s ease; pointer-events: none; } .glitch-element { position: absolute; background-color: var(--accent3); opacity: 0.2; pointer-events: none; mix-blend-mode: screen; } .controls { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; } .control-group { display: flex; flex-direction: column; gap: 0.5rem; background: rgba(255, 255, 255, 0.05); padding: 1rem; border-radius: 4px; position: relative; overflow: hidden; } .control-group::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--accent1), var(--accent2)); transform: scaleX(calc(0.1 + var(--glitch-intensity) * 0.9)); transform-origin: left; transition: transform 0.5s ease; } .control-label { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--accent2); } .slider-container { position: relative; width: 100%; height: 2rem; } .slider { width: 100%; height: 0.5rem; -webkit-appearance: none; background: rgba(255, 255, 255, 0.1); border-radius: 5px; outline: none; position: relative; z-index: 2; } .slider::-webkit-slider-thumb { -webkit-appearance: none; width: 1rem; height: 1rem; border-radius: 50%; background: var(--accent1); cursor: pointer; transition: all 0.3s ease; position: relative; z-index: 3; } .slider::-webkit-slider-thumb:hover { transform: scale(1.2); background: var(--accent3); } .slider-value { position: absolute; right: 0; top: -1.5rem; font-size: 0.8rem; color: var(--accent2); } .interaction-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; } .glitch-btn { padding: 0.75rem 1.25rem; background: transparent; color: var(--secondary); border: 1px solid var(--secondary); cursor: pointer; font-size: 0.9rem; transition: all 0.3s ease; flex-grow: 1; position: relative; overflow: hidden; } .glitch-btn:hover, .glitch-btn:focus { color: var(--primary); background: var(--secondary); outline: none; } .glitch-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; } .glitch-btn:hover::before { left: 100%; } .info-section { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } .info-title { font-size: 1.2rem; margin-bottom: 0.5rem; color: var(--accent1); } .info-text { font-size: 0.9rem; line-height: 1.6; opacity: 0.8; } .coordinates-display { position: absolute; bottom: 1rem; right: 1rem; font-size: 0.8rem; color: var(--accent2); font-family: 'Courier New', monospace; opacity: 0.7; } @media (max-width: 600px) { .glitch-title { font-size: 2.5rem; } .interactive-canvas { height: 200px; } .controls { gap: 1rem; } .interaction-buttons { flex-direction: column; } } </style> </head> <body> <div class="container"> <header> <h1 class="glitch-title">Data Corruption</h1> <p class="subtitle">An interactive exploration of digital degradation</p> </header> <div class="interactive-canvas" id="glitchCanvas"> <div class="canvas-text">INTERACT WITH THE VOID</div> <div class="coordinates-display" id="coordinates">x: 0, y: 0</div> </div> <div class="controls"> <div class="control-group"> <label class="control-label">Glitch Intensity</label> <div class="slider-container"> <input type="range" min="0" max="100" value="20" class="slider" id="intensitySlider"> <div class="slider-value" id="intensityValue">20%</div> </div> <p>Manipulate the corruption level of the digital artifacts</p> </div> <div class="control-group"> <label class="control-label">Glitch Patterns</label> <div class="interaction-buttons"> <button class="glitch-btn" data-pattern="horizontal">Horizontal Tear</button> <button class="glitch-btn" data-pattern="vertical">Vertical Slice</button> <button class="glitch-btn" data-pattern="pixelate">Pixel Decay</button> <button class="glitch-btn" data-pattern="chromatic">Chromatic Shift</button> </div> </div> </div> <div class="info-section"> <h2 class="info-title">About the Installation</h2> <p class="info-text"> "Data Corruption" examines the beauty in digital imperfection. As you interact with this interface, you're creating unique glitch patterns that reflect and amplify your inputs. The installation responds to your movements, creating a symbiotic relationship between human action and algorithmic interpretation. This website serves as both preview and extension of the physical gallery experience. </p> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Elements const glitchCanvas = document.getElementById('glitchCanvas'); const canvasText = document.querySelector('.canvas-text'); const intensitySlider = document.getElementById('intensitySlider'); const intensityValue = document.getElementById('intensityValue'); const coordinatesDisplay = document.getElementById('coordinates'); const glitchButtons = document.querySelectorAll('.glitch-btn'); // Variables let glitchIntensity = 20; let activePattern = 'horizontal'; let glitchElements = []; let mouseActive = false; // Update CSS variable for glitch intensity const updateGlitchIntensity = (value) => { glitchIntensity = value; document.documentElement.style.setProperty('--glitch-intensity', value / 100); intensityValue.textContent = `${value}%`; // Update existing glitch elements glitchElements.forEach(el => { updateGlitchElement(el); }); }; // Initialize glitch intensity updateGlitchIntensity(intensitySlider.value); // Create a glitch element const createGlitchElement = (x, y, pattern) => { const element = document.createElement('div'); element.classList.add('glitch-element'); element.dataset.pattern = pattern; element.dataset.x = x; element.dataset.y = y; glitchCanvas.appendChild(element); glitchElements.push(element); // Limit the number of glitch elements if (glitchElements.length > 30) { const removed = glitchElements.shift(); removed.remove(); } return element; }; // Update glitch element styles based on pattern const updateGlitchElement = (element) => { const pattern = element.dataset.pattern; const x = parseFloat(element.dataset.x); const y = parseFloat(element.dataset.y); const intensity = glitchIntensity / 100; // Base styles element.style.transition = `all ${0.5 + Math.random() * 0.5}s ease`; switch (pattern) { case 'horizontal': element.style.width = `${100 + intensity * 50}%`; element.style.height = `${2 + intensity * 8}px`; element.style.top = `${y}px`; element.style.left = `${x - (intensity * 50)}%`; element.style.backgroundColor = `var(--accent${Math.floor(Math.random() * 3) + 1})`; element.style.opacity = `${0.1 + intensity * 0.4}`; element.style.transform = `skewX(${(Math.random() - 0.5) * intensity * 20}deg)`; break; case 'vertical': element.style.height = `${100 + intensity * 50}%`; element.style.width = `${2 + intensity * 8}px`; element.style.left = `${x}px`; element.style.top = `${y - (intensity * 50)}%`; element.style.backgroundColor = `var(--accent${Math.floor(Math.random() * 3) + 1})`; element.style.opacity = `${0.1 + intensity * 0.4}`; element.style.transform = `skewY(${(Math.random() - 0.5) * intensity * 20}deg)`; break; case 'pixelate': const size = 5 + intensity * 20; element.style.width = `${size}px`; element.style.height = `${size}px`; element.style.top = `${y - size/2}px`; element.style.left = `${x - size/2}px`; element.style.backgroundColor = `var(--accent${Math.floor(Math.random() * 3) + 1})`; element.style.opacity = `${0.2 + intensity * 0.5}`; element.style.borderRadius = Math.random() > 0.5 ? '0' : '50%'; break; case 'chromatic': element.style.width = `${30 + intensity * 100}px`; element.style.height = `${30 + intensity * 100}px`; element.style.top = `${y - (15 + intensity * 50)}px`; element.style.left = `${x - (15 + intensity * 50)}px`; element.style.backgroundColor = `var(--accent${Math.floor(Math.random() * 3) + 1})`; element.style.opacity = `${0.05 + intensity * 0.2}`; element.style.borderRadius = '50%'; element.style.filter = `blur(${intensity * 10}px)`; element.style.mixBlendMode = 'screen'; break; } // Random animation to make it disappear after some time setTimeout(() => { element.style.opacity = '0'; setTimeout(() => { const index = glitchElements.indexOf(element); if (index > -1) { glitchElements.splice(index, 1); } element.remove(); }, 1000); }, 3000 + Math.random() * 5000); }; // Event Listeners intensitySlider.addEventListener('input', () => { updateGlitchIntensity(intensitySlider.value); // Update canvas text if (glitchIntensity > 80) { canvasText.textContent = "S̷̪̞͈̙͇̝̫̲͚Y̶̢̗̟͎̳̬̤̩͚S̷̙̺̭̰̣̮̬̫̲T̷̨̞̦̘̺̰̯̤̪E̷̺̲͓̩̫̭̱̪͑M̷̢̪̟͎̞̘̦̰̾ F̷̞̘̦̰̯͓̤̭̾A̷̺̲͓̩̫̭̱̪͚̿I̷̢̪̟͎̞̘̦̰̾L̷̪̞͈̙͇̝̫̲͚Ư̷̡̨͓̩̫̭̱̪͚R̷̺̲͓̩̫̭̱̪͑E̷̢̪̟͎̞̘̦̰̾"; } else if (glitchIntensity > 60) { canvasText.textContent = "D̶E̷G̵R̶A̶D̷A̶T̴I̵O̴N̶ ̷I̵M̴M̷I̶N̷E̴N̴T̵"; } else if (glitchIntensity > 40) { canvasText.textContent = "SIGNAL DEGRADING"; } else if (glitchIntensity > 20) { canvasText.textContent = "MINOR ARTIFACTS DETECTED"; } else { canvasText.textContent = "INTERACT WITH THE VOID"; } }); glitchButtons.forEach(btn => { btn.addEventListener('click', () => { activePattern = btn.dataset.pattern; // Reset other buttons glitchButtons.forEach(b => b.style.borderColor = 'var(--secondary)'); // Highlight active button btn.style.borderColor = `var(--accent${Math.floor(Math.random() * 3) + 1})`; // Create a sudden burst of the selected pattern for (let i = 0; i < 5; i++) { const x = Math.random() * glitchCanvas.offsetWidth; const y = Math.random() * glitchCanvas.offsetHeight; const el = createGlitchElement(x, y, activePattern); updateGlitchElement(el); } }); }); // Canvas mouse events glitchCanvas.addEventListener('mousemove', (e) => { if (!mouseActive) return; const rect = glitchCanvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; // Update coordinates display coordinatesDisplay.textContent = `x: ${Math.round(x)}, y: ${Math.round(y)}`; // Check if enough time has passed since last glitch element creation if (Math.random() < 0.3) { const el = createGlitchElement(x, y, activePattern); updateGlitchElement(el); } }); glitchCanvas.addEventListener('mousedown', (e) => { mouseActive = true; const rect = glitchCanvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; // Create initial burst of glitch elements for (let i = 0; i < 3; i++) { const el = createGlitchElement(x, y, activePattern); updateGlitchElement(el); } }); glitchCanvas.addEventListener('mouseup', () => { mouseActive = false; }); glitchCanvas.addEventListener('mouseleave', () => { mouseActive = false; coordinatesDisplay.textContent = `x: 0, y: 0`; }); // Touch events for mobile glitchCanvas.addEventListener('touchstart', (e) => { e.preventDefault(); mouseActive = true; const rect = glitchCanvas.getBoundingClientRect(); const touch = e.touches[0]; const x = touch.clientX - rect.left; const y = touch.clientY - rect.top; coordinatesDisplay.textContent = `x: ${Math.round(x)}, y: ${Math.round(y)}`; for (let i = 0; i < 3; i++) { const el = createGlitchElement(x, y, activePattern); updateGlitchElement(el); } }); glitchCanvas.addEventListener('touchmove', (e) => { e.preventDefault(); if (!mouseActive) return; const rect = glitchCanvas.getBoundingClientRect(); const touch = e.touches[0]; const x = touch.clientX - rect.left; const y = touch.clientY - rect.top; coordinatesDisplay.textContent = `x: ${Math.round(x)}, y: ${Math.round(y)}`; if (Math.random() < 0.3) { const el = createGlitchElement(x, y, activePattern); updateGlitchElement(el); } }); glitchCanvas.addEventListener('touchend', () => { mouseActive = false; }); // Initial glitch elements for (let i = 0; i < 5; i++) { const x = Math.random() * glitchCanvas.offsetWidth; const y = Math.random() * glitchCanvas.offsetHeight; const patterns = ['horizontal', 'vertical', 'pixelate', 'chromatic']; const randomPattern = patterns[Math.floor(Math.random() * patterns.length)]; const el = createGlitchElement(x, y, randomPattern); updateGlitchElement(el); } // Start with Horizontal Tear as default document.querySelector('[data-pattern="horizontal"]').style.borderColor = 'var(--accent1)'; }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NeuroLink VR Launcher</title> <style> @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Share+Tech+Mono&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --neon-blue: #00f3ff; --neon-purple: #9000ff; --neon-red: #ff003c; --dark-bg: #0a0a14; --light-bg: #1e1e2f; } body { font-family: 'Share Tech Mono', monospace; background-color: var(--dark-bg); color: white; overflow: hidden; height: 100vh; width: 100%; perspective: 1000px; display: flex; align-items: center; justify-content: center; } .container { width: 100%; height: 100%; max-width: 700px; max-height: 700px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; transform-style: preserve-3d; } .vr-launcher { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 2rem; position: relative; z-index: 1; transform-style: preserve-3d; } .logo { font-family: 'Orbitron', sans-serif; font-size: 3.5rem; font-weight: 900; letter-spacing: 0.15em; margin-bottom: 1rem; text-align: center; position: relative; color: white; text-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue), 0 0 40px var(--neon-blue); transform: translateZ(20px); } .logo span { position: relative; display: inline-block; } .subtitle { font-size: 1rem; margin-bottom: 2rem; text-align: center; color: rgba(255, 255, 255, 0.7); transform: translateZ(10px); } .game-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 1.5rem; width: 100%; margin-bottom: 2rem; transform-style: preserve-3d; } .game-card { background: rgba(30, 30, 47, 0.7); backdrop-filter: blur(5px); border: 1px solid rgba(0, 243, 255, 0.2); border-radius: 8px; padding: 1.2rem; transition: all 0.3s ease; cursor: pointer; position: relative; overflow: hidden; display: flex; flex-direction: column; transform-style: preserve-3d; transform: translateZ(5px); } .game-card:hover { background: rgba(30, 30, 47, 0.9); border-color: var(--neon-blue); transform: translateZ(15px) scale(1.05); box-shadow: 0 0 15px rgba(0, 243, 255, 0.5); } .game-name { font-family: 'Orbitron', sans-serif; font-size: 1.1rem; font-weight: 700; margin-bottom: 0.5rem; color: white; } .game-desc { font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); margin-bottom: 1rem; } .launch-btn { background: linear-gradient(45deg, var(--neon-purple), var(--neon-blue)); border: none; border-radius: 4px; color: white; font-family: 'Orbitron', sans-serif; font-weight: 700; padding: 0.6rem 1.2rem; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; margin-top: auto; text-transform: uppercase; letter-spacing: 1px; font-size: 0.8rem; } .launch-btn:hover { background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple)); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 243, 255, 0.4); } .launch-btn:active { transform: translateY(0); } .status-bar { width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); padding: 0.5rem 0; border-top: 1px solid rgba(0, 243, 255, 0.2); transform: translateZ(5px); } .time-display { font-family: 'Share Tech Mono', monospace; } .status-indicator { display: flex; align-items: center; } .status-indicator::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background-color: var(--neon-blue); box-shadow: 0 0 5px var(--neon-blue); margin-right: 0.5rem; animation: pulse 2s infinite; } .glitch-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='noise' x='0' y='0' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Crect x='0' y='0' width='100' height='100' fill='%2300000010'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23noise)'/%3E%3C/svg%3E"), linear-gradient(rgba(10, 10, 20, 0), rgba(10, 10, 20, 0.2)); opacity: 0.3; } .scan-line { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent, rgba(0, 243, 255, 0.03) 50%, transparent); animation: scanline 8s linear infinite; pointer-events: none; z-index: 5; } .grid-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px); background-size: 20px 20px; transform: perspective(500px) rotateX(60deg); transform-style: preserve-3d; animation: grid-move 20s linear infinite; z-index: -1; } .fullscreen-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--dark-bg); z-index: 100; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: opacity 0.5s ease; opacity: 0; pointer-events: none; } .launch-title { font-family: 'Orbitron', sans-serif; font-size: 4rem; font-weight: 900; color: white; position: relative; margin-bottom: 2rem; text-align: center; } .loading-bar-container { width: 80%; height: 20px; background: rgba(30, 30, 47, 0.7); border-radius: 10px; overflow: hidden; position: relative; } .loading-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--neon-purple), var(--neon-blue)); border-radius: 10px; transition: width 0.5s ease; } .loading-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-family: 'Share Tech Mono', monospace; font-size: 0.8rem; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } @keyframes scanline { 0% { transform: translateY(-100%); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } } @keyframes grid-move { 0% { background-position: 0 0; } 100% { background-position: 0 100%; } } @keyframes text-glitch { 0% { text-shadow: 0.05em 0 0 var(--neon-red), -0.025em -0.05em 0 var(--neon-blue), 0.025em 0.05em 0 var(--neon-purple); } 14% { text-shadow: 0.05em 0 0 var(--neon-red), -0.025em -0.05em 0 var(--neon-blue), 0.025em 0.05em 0 var(--neon-purple); } 15% { text-shadow: -0.05em -0.025em 0 var(--neon-red), 0.025em 0.025em 0 var(--neon-blue), -0.05em -0.05em 0 var(--neon-purple); } 49% { text-shadow: -0.05em -0.025em 0 var(--neon-red), 0.025em 0.025em 0 var(--neon-blue), -0.05em -0.05em 0 var(--neon-purple); } 50% { text-shadow: 0.025em 0.05em 0 var(--neon-red), 0.05em 0 0 var(--neon-blue), 0 -0.05em 0 var(--neon-purple); } 99% { text-shadow: 0.025em 0.05em 0 var(--neon-red), 0.05em 0 0 var(--neon-blue), 0 -0.05em 0 var(--neon-purple); } 100% { text-shadow: -0.025em 0 0 var(--neon-red), -0.025em -0.025em 0 var(--neon-blue), -0.025em -0.05em 0 var(--neon-purple); } } .glitch-text { animation: text-glitch 3s infinite; } .active-game-text { font-size: 0.8rem; margin-top: 2rem; color: var(--neon-blue); } /* Responsive Adjustments */ @media (max-width: 600px) { .logo { font-size: 2.5rem; } .game-grid { grid-template-columns: 1fr; } .launch-title { font-size: 2.5rem; } } @media (max-height: 700px) { .vr-launcher { justify-content: flex-start; padding: 1rem; } .logo { font-size: 2.5rem; margin-bottom: 0.5rem; } .subtitle { margin-bottom: 1rem; } .game-grid { grid-gap: 1rem; } } </style> </head> <body> <div class="container"> <div class="vr-launcher"> <div class="logo"> <span class="glitch-text">NEURO</span>LINK </div> <div class="subtitle">Advanced VR Simulation Interface v4.2.7</div> <div class="game-grid"> <div class="game-card" data-game="cyberdive"> <div class="game-name">CyberDive</div> <div class="game-desc">Immersive neural hacking simulation with advanced sensory feedback systems.</div> <button class="launch-btn">Launch</button> </div> <div class="game-card" data-game="quantum"> <div class="game-name">Quantum Rift</div> <div class="game-desc">Explore parallel dimensions through quantum tunneling mechanics.</div> <button class="launch-btn">Launch</button> </div> <div class="game-card" data-game="neonblade"> <div class="game-name">Neon Blade</div> <div class="game-desc">High-speed combat in a dystopian megacity with real-time motion tracking.</div> <button class="launch-btn">Launch</button> </div> <div class="game-card" data-game="stellaris"> <div class="game-name">Stellaris Odyssey</div> <div class="game-desc">Procedurally generated space exploration with realistic physics.</div> <button class="launch-btn">Launch</button> </div> </div> <div class="status-bar"> <div class="status-indicator">System Ready</div> <div class="time-display" id="time-display">00:00:00</div> </div> </div> <div class="scan-line"></div> <div class="grid-bg"></div> <div class="glitch-overlay"></div> </div> <div class="fullscreen-overlay" id="launch-overlay"> <div class="launch-title glitch-text" id="launch-game-name">GAME TITLE</div> <div class="loading-bar-container"> <div class="loading-bar" id="loading-bar"></div> <div class="loading-text" id="loading-text">Initializing Neural Interface...</div> </div> <div class="active-game-text" id="active-game-text">Calibrating sensory modules...</div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Update time function updateTime() { const now = new Date(); const hours = String(now.getHours()).padStart(2, '0'); const minutes = String(now.getMinutes()).padStart(2, '0'); const seconds = String(now.getSeconds()).padStart(2, '0'); document.getElementById('time-display').textContent = `${hours}:${minutes}:${seconds}`; } setInterval(updateTime, 1000); updateTime(); // 3D tilt effect on container 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; const centerX = rect.width / 2; const centerY = rect.height / 2; const angleX = (y - centerY) / 30; const angleY = (x - centerX) / -30; container.style.transform = `rotateX(${angleX}deg) rotateY(${angleY}deg)`; }); container.addEventListener('mouseleave', () => { container.style.transform = 'rotateX(0) rotateY(0)'; container.style.transition = 'transform 0.5s ease'; }); container.addEventListener('mouseenter', () => { container.style.transition = 'transform 0.1s ease'; }); // Game launch functionality const launchBtns = document.querySelectorAll('.launch-btn'); const launchOverlay = document.getElementById('launch-overlay'); const loadingBar = document.getElementById('loading-bar'); const loadingText = document.getElementById('loading-text'); const launchGameName = document.getElementById('launch-game-name'); const activeGameText = document.getElementById('active-game-text'); const gameInfo = { cyberdive: { title: "CYBERDIVE", loadingTexts: [ "Initializing Neural Interface...", "Establishing Synaptic Link...", "Calibrating Reality Filters...", "Rendering Digital Environment...", "Launching CyberDive Protocol..." ] }, quantum: { title: "QUANTUM RIFT", loadingTexts: [ "Calculating Quantum Probabilities...", "Stabilizing Dimensional Anchors...", "Mapping Multiverse Connections...", "Calibrating Reality Shift Engines...", "Initiating Quantum Teleportation..." ] }, neonblade: { title: "NEON BLADE", loadingTexts: [ "Loading Combat Protocols...", "Calibrating Haptic Feedback...", "Initializing Motion Tracking...", "Rendering Megacity Environment...", "Activating Combat Systems..." ] }, stellaris: { title: "STELLARIS ODYSSEY", loadingTexts: [ "Generating Galactic Map...", "Calculating Orbital Physics...", "Loading Stellar Bodies...", "Initializing Navigation Systems...", "Preparing for Warp Jump..." ] } }; function simulateGlitch() { const container = document.querySelector('.container'); const glitchOverlay = document.querySelector('.glitch-overlay'); // Random glitch effects if (Math.random() > 0.7) { container.style.transform = `translateX(${Math.random() * 10 - 5}px) translateY(${Math.random() * 10 - 5}px)`; setTimeout(() => { container.style.transform = ''; }, 100); } if (Math.random() > 0.8) { glitchOverlay.style.opacity = Math.random() * 0.5 + 0.3; setTimeout(() => { glitchOverlay.style.opacity = 0.3; }, 150); } } setInterval(simulateGlitch, 3000); launchBtns.forEach(btn => { btn.addEventListener('click', function() { const gameCard = this.closest('.game-card'); const gameId = gameCard.dataset.game; const game = gameInfo[gameId]; launchGameName.textContent = game.title; loadingText.textContent = game.loadingTexts[0]; activeGameText.textContent = "Calibrating sensory modules..."; loadingBar.style.width = '0%'; // Show overlay launchOverlay.style.opacity = '1'; launchOverlay.style.pointerEvents = 'all'; // Simulate loading let progress = 0; let textIndex = 0; const interval = setInterval(() => { progress += Math.random() * 5 + 1; if (progress >= 100) { progress = 100; clearInterval(interval); // Finish loading setTimeout(() => { activeGameText.textContent = `${game.title} successfully launched. Dive in progress...`; // Create intense glitch effect for (let i = 0; i < 10; i++) { setTimeout(() => { document.body.style.filter = `hue-rotate(${Math.random() * 360}deg) contrast(${1 + Math.random()}`; launchOverlay.style.transform = `translateX(${Math.random() * 20 - 10}px) translateY(${Math.random() * 20 - 10}px)`; }, i * 100); } // Simulate launch completion setTimeout(() => { document.body.style.filter = ''; launchOverlay.style.transform = ''; launchOverlay.style.opacity = '0'; launchOverlay.style.pointerEvents = 'none'; }, 1500); }, 500); } loadingBar.style.width = `${progress}%`; // Update loading text occasionally if (progress > (textIndex + 1) * 20 && textIndex < game.loadingTexts.length - 1) { textIndex++; loadingText.textContent = game.loadingTexts[textIndex]; } }, 100); }); }); // Add 3D effect to game cards const gameCards = document.querySelectorAll('.game-card'); gameCards.forEach(card => { card.addEventListener('mousemove', (e) => { const rect = card.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2; const angleX = (y - centerY) / 10; const angleY = (x - centerX) / 10; card.style.transform = `translateZ(15px) rotateX(${-angleX}deg) rotateY(${angleY}deg) scale(1.05)`; }); card.addEventListener('mouseleave', () => { card.style.transform = 'translateZ(5px)'; card.style.transition = 'transform 0.5s ease'; }); card.addEventListener('mouseenter', () => { card.style.transition = 'transform 0.1s ease'; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FAULTLINES | SS24</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; cursor: none; } @font-face { font-family: 'Neue Montreal'; src: url('https://fonts.cdnfonts.com/css/neue-montreal') format('woff2'); font-weight: normal; font-style: normal; } body { font-family: 'Neue Montreal', sans-serif; background-color: #f8f8f8; color: #111; height: 100vh; overflow: hidden; position: relative; } .custom-cursor { position: fixed; width: 20px; height: 20px; border: 1px solid #000; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s, background-color 0.3s; mix-blend-mode: difference; z-index: 9999; } .cursor-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 8px; color: #fff; opacity: 0; transition: opacity 0.3s; white-space: nowrap; text-transform: uppercase; font-weight: 500; letter-spacing: 0.5px; } .container { max-width: 700px; height: 700px; margin: 0 auto; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; position: relative; z-index: 2; } .brand { font-size: 1.2rem; font-weight: 600; letter-spacing: 1px; position: relative; display: inline-block; } .brand::after { content: ''; position: absolute; width: 100%; height: 1px; bottom: -2px; left: 0; background-color: currentColor; transform-origin: bottom right; transform: scaleX(0); transition: transform 0.3s ease-out; } .brand:hover::after { transform-origin: bottom left; transform: scaleX(1); } .menu { display: flex; gap: 1.5rem; } .menu-item { letter-spacing: 0.5px; text-transform: uppercase; font-size: 0.75rem; position: relative; cursor: pointer; overflow: hidden; padding: 5px 0; } .menu-item::before { content: attr(data-text); position: absolute; top: 0; left: 0; color: #111; overflow: hidden; white-space: nowrap; width: 0%; transition: width 0.4s cubic-bezier(0.77, 0, 0.175, 1); } .menu-item:hover::before { width: 100%; } main { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; } .headline { font-size: 5rem; line-height: 0.9; font-weight: 700; text-transform: uppercase; margin-bottom: 1.5rem; position: relative; transition: color 0.3s ease; } .headline span { display: inline-block; position: relative; transition: transform 0.2s ease; } .headline .glitch-wrapper { position: relative; display: inline-block; overflow: hidden; } .headline .glitch-text { position: relative; display: inline-block; } .subheadline { font-size: 1rem; line-height: 1.4; max-width: 70%; margin-bottom: 2.5rem; position: relative; z-index: 2; } .cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border: 1px solid #111; text-transform: uppercase; letter-spacing: 1px; font-size: 0.75rem; background-color: transparent; transition: all 0.3s ease; position: relative; overflow: hidden; } .cta::before { content: ""; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background-color: #111; z-index: -1; transition: width 0.3s cubic-bezier(0.77, 0, 0.175, 1); } .cta:hover { color: #f8f8f8; } .cta:hover::before { width: 100%; } .icon { transition: transform 0.3s ease; } .cta:hover .icon { transform: translateX(4px); } footer { display: flex; justify-content: space-between; margin-top: 2rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; position: relative; z-index: 2; } .footer-link { text-decoration: none; color: inherit; position: relative; overflow: hidden; padding: 2px 0; } .footer-link::after { content: ''; position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; background-color: currentColor; transform-origin: bottom right; transform: scaleX(0); transition: transform 0.3s ease-out; } .footer-link:hover::after { transform-origin: bottom left; transform: scaleX(1); } .copyright { opacity: 0.7; } .image-container { position: absolute; top: 0; right: 0; width: 35%; height: 100%; overflow: hidden; opacity: 0; transition: opacity 1s ease; } .image-container img { width: 100%; height: 100%; object-fit: cover; } .noise { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAFp0lEQVR4nO3dS4wcdRTH8U9VdVV39XT3TM/ojGPWieMkcZzEiR07ihIRlAOKojsgHgFxRFx4gQMSD3Hj5oEDEhIHxAEJJA6gKJCQEBHxNk5sJ5PHeu3szux7pntmunZmq6aH/58U5dI1v9/3U9U9XdUV/H9djnpiB3ApMAO4CcwCk8DmKAgG5zK4rQySnDcA9wDXKTytKbpT5a2qqFAUKBbkBmyp+F7JX9YEmO2YhrEQZfGKHJYJbBXb2fFTFATRXOZzO/pyDsljwBMKjytaBq6pjMCcqrIKOB1fHeXLsgPMgMRpM5fHcdY2TZQPcu7NMXkCeEbhMcXSgCIDuA0zRVddWRFwUSWBRcrylCko0VNCHlF4QmEAoCxdgKx9w/QIGLOCdX1w0rFH0JTQ36tPeRR4XuVhlaJOvJV4+WXVlGEMJOsLa/boU1T5uMKzKo8prM/CUaesYMQWTfJUdRwhxrOWd4FnVR5S2DhX57SiMooMVVJQaILsxfUZ5RNgv8pDCtsWEpxFFoWFpCh1rJdXu7yofKrygMp9CnutUPOUlZgxCKGv6j11oF1eAp5XuU/hgEk+i4LRybLAYktGUbGWIQ8CT6l8X2Vj55pxMFDcLgOYwHasEyJ7ld/lcgfw3GZf0rBzrXgfuqrKqiw3K4Bx5E1gj8JhhQMKtwsAzYTrOIlnQcgRxBiTN4A9Kj9UOSQ/XvtTzqjXi1VKUZuMXh9YqIRiwsvAHSp/VjkKfCVoQoWOK6aqfVsKrJswhpQGeDQxV94FblM5UeUY8I35LBm93gxY+JJC6rqZpCAvAbtVTlb5EfjSbB90jytKT9YZC8+CkEuYGpMPgJsUTlU5CRw1v0e5+qSv2P5a1QKGTZgGkw+BGyqcqfIb8L35lOJB/bGLVkm79lhjECYzk4+AGxTOVvkF+EIEKkuqWUVHkLqzotS10xswhpMR8mNgWuE/Kj8BR0AJZqlvkVTdl9i4B2EyMnkPmFI4V+UUcCTPFzK0SjLIwlPWagMmzORD4CqF81XOAp8nYWJPWQkoa92EMZwkyAeAKfxP5RzwmfmsFFXLlSjsP2Nh6yaMheRBjiiYwkUq54HPrLB9wXHzqy8phDpvOKwxGLEw+RS4AriocoE4jJo9ypVcQYMcqRVkhMHkM2BK4ZLKeeATM1LMzklCl8cN46zJF8C0wkWV88DHZtDlJYu7hmn/oZj8yt7kS+CSwqTCn8BH5vccbD9gBV3e0BuUUWLyFbBVYZvCReBDM1LsHcqqsJpB/Bh8xJh8DUwq7FC4BBxWLSADzorG3MKcf4wYV3wDTCrsUJgADpuRpnbSP/a0NYxMjgKTCrsUJmocNgPz74oOEGSQMGNLp5icACYU9ipcBt4z+0sWNDuUrI0gbWISB9mlsFvhMvBua0fDWNl+3ByP44gahS5FdyjsBQ6qbBmf41b79VFHZXSL75WDCnssNYOGAd2aBo6QURfkiMI+S82goVvTIHuQJko7mJxS2KeywzKzJbqihuH8ZXK1MXmgdkDhjuwxWhuDNFFKYPK0GVBK1y22pJXX5H8mzxtUNkVLpsMmLwhZGVyRpgnrJpUXFVZfDjVsMnBGXZDXgLskbgdvjpCBM8ouzFfhdWCfhbMB7F7YEXYgGIYgJq+pHDBju6Bl4HTUBXkDuFPjkQGk1jlXmyyDZlQFOaTwpsJei7sDtsccZQfzVXgb2G9xZ67W5C5Gf8q62wy+A+5W2G7GNgRtjzNQRlGQHwLvAPcImrQRNkfYgDFqgnwfC7Jf0EofYUlGTZAfAu8C94msuhy2RtiAMUqC/Aj4ALjfEkFWRZCVMgIJMkqCHDGDH4EHRC2poGXzJKMkSJvFK+swv6KuOiawFsgGG2yADTbYYIMNNliC/AcXCPXUMmfHvQAAAABJRU5ErkJggg=='); opacity: 0.02; z-index: 1; pointer-events: none; } .lookbook-indicator { position: absolute; bottom: 2.5rem; left: 2rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; z-index: 2; opacity: 0.7; transition: opacity 0.3s ease; } .lookbook-indicator:hover { opacity: 1; } .lookbook-indicator .arrow { width: 16px; height: 1px; background-color: currentColor; position: relative; transition: width 0.3s ease; } .lookbook-indicator:hover .arrow { width: 24px; } .lookbook-indicator .arrow::after { content: ''; position: absolute; right: 0; top: 0; width: 6px; height: 1px; background-color: currentColor; transform: rotate(45deg); transform-origin: right center; } .lookbook-indicator .arrow::before { content: ''; position: absolute; right: 0; top: 0; width: 6px; height: 1px; background-color: currentColor; transform: rotate(-45deg); transform-origin: right center; } .collection-details { position: absolute; top: 2rem; right: 2rem; text-align: right; font-size: 0.7rem; letter-spacing: 0.5px; line-height: 1.4; opacity: 0.7; z-index: 2; } .progress-bar { position: fixed; bottom: 0; left: 0; height: 1px; width: 0; background-color: #111; z-index: 10; } .product-nav { position: absolute; bottom: 2.5rem; right: 2rem; display: flex; gap: 1.5rem; z-index: 2; } .product-nav-item { font-size: 0.7rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; opacity: 0.4; transition: opacity 0.3s ease; cursor: pointer; } .product-nav-item.active { opacity: 1; } @media (max-width: 700px) { .container { height: auto; min-height: 700px; } header { flex-direction: column; gap: 1rem; } .headline { font-size: 3.5rem; } .subheadline { max-width: 100%; } .image-container { width: 70%; height: 60%; top: auto; bottom: 0; opacity: 0.1; } } @media (max-width: 500px) { .headline { font-size: 2.5rem; } .menu { gap: 1rem; } .product-nav { right: 1rem; bottom: 1.5rem; } .lookbook-indicator { left: 1rem; bottom: 1.5rem; } } </style> </head> <body> <div class="custom-cursor"> <div class="cursor-text">View</div> </div> <div class="noise"></div> <div class="progress-bar"></div> <div class="container"> <header> <div class="brand">FAULTLINES</div> <nav class="menu"> <div class="menu-item" data-text="SHOP">SHOP</div> <div class="menu-item" data-text="COLLECTIONS">COLLECTIONS</div> <div class="menu-item" data-text="ABOUT">ABOUT</div> </nav> </header> <main> <h1 class="headline"> <div class="glitch-wrapper"> <span class="glitch-text">DIS</span> </div> <div class="glitch-wrapper"> <span class="glitch-text">RUPTED</span> </div> <br> <div class="glitch-wrapper"> <span class="glitch-text">SILHOU</span> </div> <div class="glitch-wrapper"> <span class="glitch-text">ETTES</span> </div> </h1> <p class="subheadline">Spring/Summer 24 explores the beauty in imperfection, with deconstructed forms and glitched textures. Each piece subverts traditional fashion codes through digital-inspired displacements.</p> <button class="cta"> Explore Collection <span class="icon">→</span> </button> </main> <div class="collection-details"> SS24 COLLECTION<br> RELEASE DATE 03.15.24 </div> <div class="lookbook-indicator"> <span>View Lookbook</span> <span class="arrow"></span> </div> <div class="product-nav"> <div class="product-nav-item active" data-index="0">01</div> <div class="product-nav-item" data-index="1">02</div> <div class="product-nav-item" data-index="2">03</div> </div> <footer> <div> <a href="#" class="footer-link">Instagram</a> / <a href="#" class="footer-link">Twitter</a> </div> <div class="copyright">© 2024 FAULTLINES</div> </footer> <div class="image-container"> <img src="data:image/jpeg;base64,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
