Ghost buttons have become a popular design trend, offering a minimalist and elegant touch to user interfaces. These transparent buttons, often outlined with a thin border, seamlessly blend into the background while still being functional and eye-catching.
In this article, we will explore 10 stunning examples of ghost buttons that showcase their versatility and aesthetic appeal. From e-commerce sites to personal portfolios, these examples highlight how ghost buttons can enhance the overall user experience.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers love Subframe for its drag-and-drop interface and intuitive, responsive canvas. Create pixel-perfect ghost buttons effortlessly, ensuring your UI is both stunning and functional.
Join the community of satisfied users and elevate your design game. Start for free today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Ready to elevate your UI design game? With Subframe, you can create pixel-perfect interfaces, including stunning ghost buttons, in minutes. Our drag-and-drop editor ensures efficiency and precision.
Don't wait! Start for free and begin designing immediately. Join the community of satisfied users today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nexus Enterprise Solutions</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; } body { background-color: #fafafa; color: #333; overflow-x: hidden; max-width: 700px; height: 700px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; } header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; } .logo { font-weight: 700; font-size: 1.8rem; letter-spacing: -0.5px; color: #222; } nav ul { display: flex; list-style: none; gap: 30px; } nav a { text-decoration: none; color: #555; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.3px; transition: color 0.3s ease; } nav a:hover { color: #000; } main { flex: 1; display: flex; flex-direction: column; justify-content: center; } h1 { font-size: 2.8rem; line-height: 1.2; margin-bottom: 20px; font-weight: 700; letter-spacing: -1px; color: #222; } p { font-size: 1rem; line-height: 1.7; color: #555; margin-bottom: 40px; max-width: 600px; } .ghost-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 50px; } .ghost-button { position: relative; display: flex; align-items: center; justify-content: center; padding: 16px 20px; color: #333; background-color: transparent; border: 1px solid #d0d0d0; border-radius: 4px; font-size: 0.9rem; font-weight: 500; text-decoration: none; text-align: center; overflow: hidden; transition: all 0.35s ease; cursor: pointer; } .ghost-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(240, 240, 240, 0.5); transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1); z-index: -1; } .ghost-button:hover { color: #000; border-color: #999; } .ghost-button:hover::before { transform: translateX(0); } .button-icon { display: inline-block; opacity: 0; margin-left: 0; transition: all 0.3s ease; } .ghost-button:hover .button-icon { opacity: 1; margin-left: 8px; } .features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; margin-top: 30px; } .feature { position: relative; padding: 25px; border: 1px solid #eaeaea; border-radius: 6px; background-color: transparent; transition: all 0.3s ease; } .feature:hover { border-color: #ccc; transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); } .feature-title { font-size: 1.1rem; margin-bottom: 12px; font-weight: 600; color: #222; } .feature-description { font-size: 0.9rem; line-height: 1.6; color: #666; margin-bottom: 0; } .feature-icon { position: absolute; top: 20px; right: 20px; font-size: 1.3rem; color: #ddd; transition: color 0.3s ease; } .feature:hover .feature-icon { color: #999; } footer { margin-top: 40px; font-size: 0.8rem; color: #888; text-align: center; } @media (max-width: 600px) { header { flex-direction: column; align-items: flex-start; gap: 15px; } nav ul { gap: 15px; } h1 { font-size: 2.2rem; } .ghost-buttons { grid-template-columns: 1fr; } .features { grid-template-columns: 1fr; } } /* Cursor animation */ .custom-cursor { position: fixed; width: 40px; height: 40px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; transition: width 0.2s, height 0.2s, background-color 0.2s; z-index: 9999; mix-blend-mode: difference; display: none; } .cursor-active { width: 30px; height: 30px; background-color: rgba(0, 0, 0, 0.05); } @media (min-width: 768px) { .custom-cursor { display: block; } } </style> </head> <body> <div class="custom-cursor"></div> <header> <div class="logo">Nexus</div> <nav> <ul> <li><a href="#" class="nav-link">Solutions</a></li> <li><a href="#" class="nav-link">About</a></li> <li><a href="#" class="nav-link">Contact</a></li> </ul> </nav> </header> <main> <h1>Enterprise solutions with clarity in mind</h1> <p>We help businesses transform digital operations through simplified interfaces and optimized workflows. Our minimalist approach focuses on what matters most: results.</p> <div class="ghost-buttons"> <a href="#" class="ghost-button"> Our Services <span class="button-icon">→</span> </a> <a href="#" class="ghost-button"> Case Studies <span class="button-icon">→</span> </a> <a href="#" class="ghost-button"> Get in Touch <span class="button-icon">→</span> </a> </div> <div class="features"> <div class="feature"> <h3 class="feature-title">Digital Strategy</h3> <p class="feature-description">Forward-thinking approaches to business transformation with minimalist implementations.</p> <div class="feature-icon">⟐</div> </div> <div class="feature"> <h3 class="feature-title">UX Architecture</h3> <p class="feature-description">Streamlined interfaces that eliminate complexity and enhance user engagement.</p> <div class="feature-icon">◎</div> </div> <div class="feature"> <h3 class="feature-title">Process Optimization</h3> <p class="feature-description">Identifying and removing unnecessary steps in your business workflows.</p> <div class="feature-icon">⌬</div> </div> <div class="feature"> <h3 class="feature-title">Technical Simplicity</h3> <p class="feature-description">Elegant solutions that reduce maintenance costs and operational complexity.</p> <div class="feature-icon">⎔</div> </div> </div> </main> <footer> <p>© 2023 Nexus Enterprise Solutions. Minimal by design.</p> </footer> <script> document.addEventListener('DOMContentLoaded', function() { // Custom cursor animation const cursor = document.querySelector('.custom-cursor'); document.addEventListener('mousemove', (e) => { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; }); const interactiveElements = document.querySelectorAll('a, .ghost-button, .feature'); interactiveElements.forEach(element => { element.addEventListener('mouseenter', () => { cursor.classList.add('cursor-active'); }); element.addEventListener('mouseleave', () => { cursor.classList.remove('cursor-active'); }); }); // Ghost button interactions const ghostButtons = document.querySelectorAll('.ghost-button'); ghostButtons.forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); // Create ripple effect const ripple = document.createElement('span'); ripple.style.position = 'absolute'; ripple.style.background = 'rgba(200, 200, 200, 0.3)'; ripple.style.borderRadius = '50%'; ripple.style.pointerEvents = 'none'; const rect = this.getBoundingClientRect(); const size = Math.max(rect.width, rect.height) * 2; ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${e.clientX - rect.left - size/2}px`; ripple.style.top = `${e.clientY - rect.top - size/2}px`; ripple.style.transform = 'scale(0)'; ripple.style.transition = 'transform 0.6s, opacity 0.6s'; this.appendChild(ripple); setTimeout(() => { ripple.style.transform = 'scale(1)'; ripple.style.opacity = '0'; setTimeout(() => { ripple.remove(); }, 600); }, 10); }); }); // Feature hover effects const features = document.querySelectorAll('.feature'); features.forEach(feature => { feature.addEventListener('mouseenter', function() { const icon = this.querySelector('.feature-icon'); icon.style.transform = 'rotate(45deg)'; icon.style.transition = 'transform 0.3s ease'; }); feature.addEventListener('mouseleave', function() { const icon = this.querySelector('.feature-icon'); icon.style.transform = 'rotate(0deg)'; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Ghost Button Portfolio</title> <style> :root { --pastel-pink: #ffd1dc; --pastel-blue: #d1e8ff; --pastel-green: #d1ffdc; --pastel-yellow: #fff3d1; --pastel-lavender: #e0d1ff; --dark-text: #333; --light-text: #fff; --transition-speed: 0.3s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } body { background-color: #fcfcfc; color: var(--dark-text); display: flex; flex-direction: column; align-items: center; justify-content: center; height: 700px; width: 700px; overflow: hidden; position: relative; } .portfolio-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; width: 100%; max-width: 700px; position: relative; z-index: 1; } .header { text-align: center; margin-bottom: 2rem; animation: fadeInDown 1s ease-out; } .header h1 { font-size: 2.5rem; font-weight: 300; letter-spacing: 3px; margin-bottom: 0.5rem; position: relative; display: inline-block; } .header h1::after { content: ''; position: absolute; width: 50%; height: 1px; bottom: -5px; left: 25%; background: var(--pastel-lavender); animation: lineGrow 1.5s ease-out forwards; } .header p { font-size: 1rem; font-weight: 300; letter-spacing: 1px; opacity: 0.8; } .ghost-button-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; width: 100%; max-width: 600px; margin-top: 1rem; } .ghost-button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid; padding: 1.5rem; text-align: center; cursor: pointer; transition: all var(--transition-speed) ease; overflow: hidden; height: 180px; border-radius: 3px; text-decoration: none; color: var(--dark-text); } .ghost-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity var(--transition-speed) ease; z-index: -1; } .ghost-button:hover::before { opacity: 0.2; } .ghost-button:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .ghost-button h3 { font-size: 1.2rem; font-weight: 400; letter-spacing: 2px; margin-bottom: 0.5rem; transition: transform var(--transition-speed) ease; } .ghost-button p { font-size: 0.8rem; font-weight: 300; opacity: 0.7; transition: opacity var(--transition-speed) ease; } .ghost-button:hover h3 { transform: translateY(-3px); } .ghost-button:hover p { opacity: 1; } .button-1 { border-color: var(--pastel-pink); } .button-1::before { background-color: var(--pastel-pink); } .button-2 { border-color: var(--pastel-blue); } .button-2::before { background-color: var(--pastel-blue); } .button-3 { border-color: var(--pastel-green); } .button-3::before { background-color: var(--pastel-green); } .button-4 { border-color: var(--pastel-lavender); } .button-4::before { background-color: var(--pastel-lavender); } .icon { font-size: 1.8rem; margin-bottom: 0.5rem; transition: transform var(--transition-speed) ease; } .ghost-button:hover .icon { transform: scale(1.1) rotate(5deg); } .button-animation { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: -2; pointer-events: none; } .floating-dots { position: absolute; width: 700px; height: 700px; top: 0; left: 0; z-index: 0; pointer-events: none; opacity: 0.5; } .dot { position: absolute; width: 4px; height: 4px; border-radius: 50%; opacity: 0.3; animation: float 20s infinite linear; } @keyframes float { 0% { transform: translateY(0) translateX(0); opacity: 0.3; } 50% { opacity: 0.8; } 100% { transform: translateY(-100px) translateX(100px); opacity: 0.3; } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes lineGrow { from { width: 0; left: 50%; } to { width: 50%; left: 25%; } } .contact-footer { margin-top: 2rem; text-align: center; font-size: 0.9rem; animation: fadeInUp 1s ease-out; opacity: 0.8; } .contact-footer p { margin-bottom: 0.5rem; } .social-icons { display: flex; justify-content: center; gap: 1rem; margin-top: 0.5rem; } .social-icon { width: 32px; height: 32px; border: 1px solid var(--pastel-lavender); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all var(--transition-speed) ease; cursor: pointer; font-size: 0.9rem; } .social-icon:hover { background-color: var(--pastel-lavender); transform: translateY(-3px); } @media (max-width: 600px) { .ghost-button-grid { grid-template-columns: 1fr; } .header h1 { font-size: 2rem; } .portfolio-container { padding: 1rem; } } </style> </head> <body> <div class="floating-dots" id="floating-dots"></div> <div class="portfolio-container"> <div class="header"> <h1>ELSA DESIGN STUDIO</h1> <p>Exploring the balance between form and function</p> </div> <div class="ghost-button-grid"> <a href="#" class="ghost-button button-1"> <div class="icon">✎</div> <h3>TYPOGRAPHY</h3> <p>Experiments with elegant letterforms and responsive type systems</p> </a> <a href="#" class="ghost-button button-2"> <div class="icon">◇</div> <h3>MINIMALISM</h3> <p>Refined, purposeful design systems with subtle visual hierarchy</p> </a> <a href="#" class="ghost-button button-3"> <div class="icon">△</div> <h3>INTERACTIONS</h3> <p>Delicate microinteractions that engage without overwhelming</p> </a> <a href="#" class="ghost-button button-4"> <div class="icon">○</div> <h3>COLOR THEORY</h3> <p>Harmonious pastel palettes that evoke emotion and connection</p> </a> </div> <div class="contact-footer"> <p>Let's collaborate on your next creative project</p> <div class="social-icons"> <div class="social-icon">✉</div> <div class="social-icon">ℹ</div> <div class="social-icon">♪</div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Create floating dots const dotsContainer = document.getElementById('floating-dots'); const colors = [ 'rgba(255, 209, 220, 0.8)', // pastel pink 'rgba(209, 232, 255, 0.8)', // pastel blue 'rgba(209, 255, 220, 0.8)', // pastel green 'rgba(255, 243, 209, 0.8)', // pastel yellow 'rgba(224, 209, 255, 0.8)' // pastel lavender ]; for (let i = 0; i < 30; i++) { const dot = document.createElement('div'); dot.classList.add('dot'); dot.style.left = `${Math.random() * 100}%`; dot.style.top = `${Math.random() * 100}%`; dot.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; dot.style.animationDuration = `${15 + Math.random() * 15}s`; dot.style.animationDelay = `${Math.random() * 5}s`; dotsContainer.appendChild(dot); } // Add advanced button interactions const buttons = document.querySelectorAll('.ghost-button'); buttons.forEach(button => { button.addEventListener('mousemove', function(e) { const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; // Calculate angle for subtle gradient tilt effect const angle = Math.atan2(y - rect.height / 2, x - rect.width / 2) * (180 / Math.PI); this.style.backgroundImage = `radial-gradient(circle at ${x}px ${y}px, rgba(255,255,255,0.1), transparent)`; }); button.addEventListener('mouseleave', function() { this.style.backgroundImage = 'none'; }); // Prevent actual navigation button.addEventListener('click', function(e) { e.preventDefault(); // Flash effect const flash = document.createElement('div'); flash.style.position = 'absolute'; flash.style.top = '0'; flash.style.left = '0'; flash.style.width = '100%'; flash.style.height = '100%'; flash.style.backgroundColor = 'rgba(255, 255, 255, 0.3)'; flash.style.opacity = '0'; flash.style.transition = 'opacity 0.3s ease'; flash.style.zIndex = '-1'; this.appendChild(flash); // Trigger reflow void flash.offsetWidth; flash.style.opacity = '1'; setTimeout(() => { flash.style.opacity = '0'; setTimeout(() => { flash.remove(); }, 300); }, 300); }); }); // Social icons interaction const socialIcons = document.querySelectorAll('.social-icon'); socialIcons.forEach(icon => { icon.addEventListener('click', function(e) { e.preventDefault(); this.style.transform = 'translateY(-5px) scale(1.1)'; setTimeout(() => { this.style.transform = ''; }, 300); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary: #2EF7AF; --secondary: #F72EE2; --tertiary: #2EA9F7; --background: #121212; --text: #FFFFFF; --text-secondary: #CCCCCC; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { background-color: var(--background); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; padding: 0 20px; overflow-x: hidden; max-width: 700px; margin: 0 auto; } header { width: 100%; padding: 24px 0; display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 24px; font-weight: 800; background: linear-gradient(90deg, var(--primary), var(--tertiary)); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: -0.5px; } .profile { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--tertiary)); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: hidden; } .profile::after { content: ''; position: absolute; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.1); transform: translateY(100%); transition: transform 0.3s ease; } .profile:hover::after { transform: translateY(0); } .profile-initial { color: var(--background); font-weight: 600; font-size: 20px; } .hero { width: 100%; text-align: center; padding: 20px 0 40px; } h1 { font-size: 32px; font-weight: 800; margin-bottom: 16px; line-height: 1.2; } .highlight { color: var(--primary); } p { font-size: 16px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 32px; max-width: 600px; } .ghost-button-container { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; margin-bottom: 40px; } @media (max-width: 500px) { .ghost-button-container { grid-template-columns: 1fr; } } .ghost-button { position: relative; padding: 16px 24px; border: 2px solid; border-radius: 12px; background: transparent; color: var(--text); font-weight: 600; font-size: 16px; text-align: center; cursor: pointer; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 120px; -webkit-tap-highlight-color: transparent; outline: none; } .ghost-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s ease; z-index: -1; } .ghost-button:hover::before { opacity: 1; } .ghost-button:active { transform: scale(0.96); } .ghost-button svg { width: 24px; height: 24px; transition: transform 0.3s ease; } .ghost-button:hover svg { transform: translateY(-3px); } .ghost-button-title { font-size: 18px; font-weight: 700; } .ghost-button-subtitle { font-size: 14px; opacity: 0.8; } .primary { border-color: var(--primary); box-shadow: 0 0 20px rgba(46, 247, 175, 0.2); } .primary:hover { box-shadow: 0 0 30px rgba(46, 247, 175, 0.3); } .secondary { border-color: var(--secondary); box-shadow: 0 0 20px rgba(247, 46, 226, 0.2); } .secondary:hover { box-shadow: 0 0 30px rgba(247, 46, 226, 0.3); } .tertiary { border-color: var(--tertiary); box-shadow: 0 0 20px rgba(46, 169, 247, 0.2); } .tertiary:hover { box-shadow: 0 0 30px rgba(46, 169, 247, 0.3); } .accent { border-color: #F7B42E; box-shadow: 0 0 20px rgba(247, 180, 46, 0.2); } .accent:hover { box-shadow: 0 0 30px rgba(247, 180, 46, 0.3); } .current-stats { width: 100%; background: rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 24px; margin-bottom: 40px; position: relative; overflow: hidden; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 500px) { .stats-grid { grid-template-columns: 1fr 1fr; } } .stat-item { display: flex; flex-direction: column; align-items: center; text-align: center; } .stat-value { font-size: 28px; font-weight: 700; margin-bottom: 4px; background: linear-gradient(90deg, var(--primary), var(--tertiary)); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat-label { font-size: 14px; color: var(--text-secondary); } .pulse { position: absolute; width: 100px; height: 100px; border-radius: 50%; background: var(--primary); opacity: 0; transform: translate(-50%, -50%); pointer-events: none; animation: pulse 1s ease-out; } @keyframes pulse { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.7; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } } .accessibility-indicator { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.7); color: white; padding: 8px 16px; border-radius: 20px; font-size: 14px; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } </style> </head> <body> <header> <div class="logo">PULSEFIT</div> <div class="profile" id="profile"> <span class="profile-initial">A</span> </div> </header> <section class="hero"> <h1>Track Your <span class="highlight">Fitness Journey</span> in Real-Time</h1> <p>Our state-of-the-art fitness tracking keeps you motivated with instant feedback and performance analysis. Choose your action to get started.</p> </section> <div class="ghost-button-container"> <button class="ghost-button primary" id="startWorkout"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16 8L21 12L16 16V8Z" fill="#2EF7AF"/> <path d="M3 8H11V16H3V8Z" fill="#2EF7AF"/> </svg> <span class="ghost-button-title">Start Workout</span> <span class="ghost-button-subtitle">Track in real-time</span> </button> <button class="ghost-button secondary" id="findRoutine"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="#F72EE2" stroke-width="2"/> <path d="M21 21L16.65 16.65" stroke="#F72EE2" stroke-width="2" stroke-linecap="round"/> </svg> <span class="ghost-button-title">Find Routine</span> <span class="ghost-button-subtitle">Personalized for you</span> </button> <button class="ghost-button tertiary" id="viewProgress"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21 7V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V7C3 4 4.5 2 8 2H16C19.5 2 21 4 21 7Z" stroke="#2EA9F7" stroke-width="2"/> <path d="M8 10L10 12L15 7" stroke="#2EA9F7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <span class="ghost-button-title">View Progress</span> <span class="ghost-button-subtitle">See your achievements</span> </button> <button class="ghost-button accent" id="joinChallenge"> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17 18.4301H13L8.54999 21.39C7.88999 21.83 7 21.3601 7 20.5601V18.4301C4 18.4301 2 16.4301 2 13.4301V7.42999C2 4.42999 4 2.42999 7 2.42999H17C20 2.42999 22 4.42999 22 7.42999V13.4301C22 16.4301 20 18.4301 17 18.4301Z" stroke="#F7B42E" stroke-width="2"/> <path d="M12 11.36V11.15C12 10.47 12.42 10.11 12.84 9.82001C13.25 9.54001 13.66 9.18002 13.66 8.52002C13.66 7.60002 12.92 6.85999 12 6.85999C11.08 6.85999 10.34 7.60002 10.34 8.52002" stroke="#F7B42E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M11.9951 13.75H12.0049" stroke="#F7B42E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <span class="ghost-button-title">Join Challenge</span> <span class="ghost-button-subtitle">Compete & improve</span> </button> </div> <section class="current-stats"> <h2 style="margin-bottom: 20px;">This Week's Activity</h2> <div class="stats-grid"> <div class="stat-item"> <div class="stat-value">4.2</div> <div class="stat-label">Workouts</div> </div> <div class="stat-item"> <div class="stat-value">18.5</div> <div class="stat-label">Miles</div> </div> <div class="stat-item"> <div class="stat-value">2340</div> <div class="stat-label">Calories</div> </div> <div class="stat-item"> <div class="stat-value">142</div> <div class="stat-label">Avg. HR</div> </div> <div class="stat-item"> <div class="stat-value">3h 15m</div> <div class="stat-label">Active Time</div> </div> <div class="stat-item"> <div class="stat-value">87%</div> <div class="stat-label">Goal Progress</div> </div> </div> </section> <div class="accessibility-indicator" id="accessibilityIndicator"></div> <script> // Create pulse effect on button press const buttons = document.querySelectorAll('.ghost-button'); buttons.forEach(button => { button.addEventListener('click', function(e) { // Create pulse element const pulse = document.createElement('span'); pulse.classList.add('pulse'); // Position pulse at click point const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; pulse.style.left = x + 'px'; pulse.style.top = y + 'px'; // Add color based on button class if (this.classList.contains('primary')) { pulse.style.background = 'var(--primary)'; } else if (this.classList.contains('secondary')) { pulse.style.background = 'var(--secondary)'; } else if (this.classList.contains('tertiary')) { pulse.style.background = 'var(--tertiary)'; } else if (this.classList.contains('accent')) { pulse.style.background = '#F7B42E'; } // Add pulse to button this.appendChild(pulse); // Show accessibility feedback showAccessibilityFeedback(this.querySelector('.ghost-button-title').textContent + ' selected'); // Remove pulse after animation completes setTimeout(() => { pulse.remove(); }, 1000); }); // Keyboard accessibility button.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.click(); } }); }); // Profile animation const profile = document.getElementById('profile'); profile.addEventListener('click', function() { this.classList.add('active'); showAccessibilityFeedback('Profile selected'); setTimeout(() => { this.classList.remove('active'); }, 300); }); // Function to show accessibility feedback function showAccessibilityFeedback(message) { const indicator = document.getElementById('accessibilityIndicator'); indicator.textContent = message; indicator.style.opacity = '1'; setTimeout(() => { indicator.style.opacity = '0'; }, 2000); } // Button-specific functionality document.getElementById('startWorkout').addEventListener('click', function() { // In a real app, this would start the workout tracking console.log('Starting workout...'); }); document.getElementById('findRoutine').addEventListener('click', function() { // In a real app, this would open the routine finder console.log('Finding routine...'); }); document.getElementById('viewProgress').addEventListener('click', function() { // In a real app, this would show progress charts console.log('Viewing progress...'); }); document.getElementById('joinChallenge').addEventListener('click', function() { // In a real app, this would show available challenges console.log('Joining challenge...'); }); // Add keyboard focus styles document.addEventListener('keydown', function(e) { if (e.key === 'Tab') { document.body.classList.add('keyboard-navigation'); } }); document.addEventListener('mousedown', function() { document.body.classList.remove('keyboard-navigation'); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } body { background-color: #f8f9fa; color: #212529; overflow-x: hidden; height: 700px; max-height: 700px; } .container { max-width: 700px; height: 700px; margin: 0 auto; padding: 0; position: relative; overflow: hidden; } .hero { height: 100%; width: 100%; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .product-image { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: 0.9; transition: transform 1.4s ease-in-out; } .content-wrapper { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(5px); padding: 3rem; border-radius: 3px; max-width: 550px; z-index: 2; transform: translateY(20px); opacity: 0; animation: fadeIn 0.8s ease-out forwards 0.3s; } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } h1 { font-size: 2.2rem; font-weight: 300; margin-bottom: 1rem; letter-spacing: 2px; color: #252422; } h1 span { font-weight: 600; position: relative; } h1 span::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 1px; background-color: #b8a794; } p { font-size: 1rem; line-height: 1.6; margin-bottom: 2rem; color: #555; font-weight: 400; } .button-group { display: flex; gap: 1.5rem; flex-wrap: wrap; } .ghost-btn { display: inline-block; padding: 0.8rem 1.8rem; border: 1px solid #252422; border-radius: 0; font-size: 0.9rem; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: #252422; background: transparent; cursor: pointer; position: relative; overflow: hidden; transition: color 0.3s ease; z-index: 1; text-decoration: none; } .ghost-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: #252422; transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); z-index: -1; } .ghost-btn:hover { color: #fff; } .ghost-btn:hover::before { transform: translateX(100%); } .ghost-btn.secondary { border-color: #b8a794; color: #b8a794; } .ghost-btn.secondary::before { background: #b8a794; } .product-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; } .indicator { width: 6px; height: 6px; border-radius: 50%; background: rgba(184, 167, 148, 0.3); cursor: pointer; transition: all 0.3s ease; } .indicator.active { background: #b8a794; transform: scale(1.5); } .product-title { position: absolute; top: 2rem; left: 2rem; font-size: 1.2rem; font-weight: 500; letter-spacing: 3px; color: #252422; z-index: 10; opacity: 0; animation: fadeSlideRight 0.8s ease-out forwards; } @keyframes fadeSlideRight { to { opacity: 1; transform: translateX(0); } } .scroll-indicator { position: absolute; bottom: 1.5rem; right: 2rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; color: #252422; opacity: 0.7; animation: pulse 2s infinite; } @keyframes pulse { 0% { opacity: 0.7; } 50% { opacity: 0.4; } 100% { opacity: 0.7; } } .scroll-indicator::after { content: ''; display: block; width: 30px; height: 1px; background-color: #252422; } @media (max-width: 700px) { .content-wrapper { padding: 2rem; max-width: 90%; margin: 0 1rem; } h1 { font-size: 1.8rem; } .button-group { flex-direction: column; gap: 1rem; } .ghost-btn { width: 100%; text-align: center; } .product-title { top: 1rem; left: 1rem; font-size: 1rem; } } @media (max-width: 500px) { .content-wrapper { padding: 1.5rem; } h1 { font-size: 1.5rem; } p { font-size: 0.9rem; } } </style> </head> <body> <div class="container"> <div class="hero"> <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1899&q=80" alt="Premium Timepiece" class="product-image"> <div class="product-title">HORLOGER</div> <div class="content-wrapper"> <h1>The art of <span>precision</span></h1> <p>Introducing our new Obsidian Collection. Crafted with Swiss precision and Italian design sensibilities, these timepieces aren't just about telling time—they're about making time stand still. Each watch features hand-polished details and mechanical movements that are engineered to last generations.</p> <div class="button-group"> <a href="#" class="ghost-btn" id="shop-btn">Discover Collection</a> <a href="#" class="ghost-btn secondary" id="details-btn">View Details</a> </div> </div> <div class="product-indicator"> <div class="indicator active" data-index="0"></div> <div class="indicator" data-index="1"></div> <div class="indicator" data-index="2"></div> </div> <div class="scroll-indicator">Explore</div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Product image carousel const images = [ 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1899&q=80', 'https://images.unsplash.com/photo-1548169874-53e85f753f1e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1890&q=80', 'https://images.unsplash.com/photo-1524805444758-089113d48a6d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1888&q=80' ]; const productImage = document.querySelector('.product-image'); const indicators = document.querySelectorAll('.indicator'); indicators.forEach(indicator => { indicator.addEventListener('click', function() { const index = this.getAttribute('data-index'); // Update image productImage.style.opacity = "0"; setTimeout(() => { productImage.src = images[index]; productImage.style.opacity = "0.9"; }, 300); // Update indicators document.querySelector('.indicator.active').classList.remove('active'); this.classList.add('active'); }); }); // Button hover effect enhancement const ghostBtns = document.querySelectorAll('.ghost-btn'); ghostBtns.forEach(btn => { btn.addEventListener('mouseenter', function() { this.style.transition = 'color 0.3s ease'; }); btn.addEventListener('mouseleave', function() { this.style.transition = 'color 0.3s ease'; }); }); // Prevent default on button clicks to avoid page refresh const allButtons = document.querySelectorAll('a, button'); allButtons.forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); // Button click animation this.style.transform = 'scale(0.98)'; setTimeout(() => { this.style.transform = 'scale(1)'; }, 100); }); }); // Subtle image parallax effect on mouse move const hero = document.querySelector('.hero'); hero.addEventListener('mousemove', function(e) { const moveX = (e.clientX / window.innerWidth - 0.5) * 20; const moveY = (e.clientY / window.innerHeight - 0.5) * 20; productImage.style.transform = `translate(${moveX}px, ${moveY}px) scale(1.05)`; }); hero.addEventListener('mouseleave', function() { productImage.style.transform = 'translate(0, 0) scale(1)'; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Neon Ghost Interface</title> <style> :root { --primary-neon: #00f3ff; --secondary-neon: #ff00f7; --tertiary-neon: #00ff8d; --dark-bg: #0a0a14; --darker-bg: #05050a; --text-color: #e0e0ff; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Rajdhani', 'Orbitron', sans-serif; } body { background-color: var(--dark-bg); color: var(--text-color); height: 700px; width: 700px; max-width: 100%; display: flex; flex-direction: column; overflow: hidden; perspective: 1000px; } .container { padding: 20px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; position: relative; } .hud-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; background: radial-gradient(circle at 10% 10%, rgba(0, 243, 255, 0.03) 0%, transparent 70%), radial-gradient(circle at 90% 90%, rgba(255, 0, 247, 0.03) 0%, transparent 70%); border: 1px solid rgba(0, 243, 255, 0.1); box-shadow: 0 0 30px rgba(0, 243, 255, 0.05) inset; } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 1px solid rgba(0, 243, 255, 0.2); padding-bottom: 15px; position: relative; } .header::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 20%; height: 1px; background: linear-gradient(90deg, var(--primary-neon), transparent); } .logo { font-size: 24px; font-weight: bold; text-transform: uppercase; letter-spacing: 3px; background: linear-gradient(to right, var(--primary-neon), var(--secondary-neon)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 10px rgba(0, 243, 255, 0.5); } .user-info { display: flex; align-items: center; gap: 15px; } .avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-neon), var(--secondary-neon)); display: flex; align-items: center; justify-content: center; font-weight: bold; position: relative; overflow: hidden; } .avatar::before { content: ''; position: absolute; top: 1px; left: 1px; right: 1px; bottom: 1px; background: var(--darker-bg); border-radius: 50%; z-index: 1; } .avatar-text { position: relative; z-index: 2; color: var(--primary-neon); font-size: 18px; } .level { font-size: 14px; color: var(--tertiary-neon); } .button-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; flex-grow: 1; margin-bottom: 30px; } .ghost-button { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: transparent; border: 1px solid rgba(0, 243, 255, 0.3); color: var(--text-color); cursor: pointer; padding: 15px; text-transform: uppercase; letter-spacing: 2px; font-size: 16px; transition: all 0.3s ease; border-radius: 3px; text-align: center; font-weight: 500; } .ghost-button:hover { border-color: var(--primary-neon); box-shadow: 0 0 15px rgba(0, 243, 255, 0.4), 0 0 30px rgba(0, 243, 255, 0.1) inset; text-shadow: 0 0 5px var(--primary-neon); } .ghost-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, transparent, rgba(0, 243, 255, 0.05), transparent); transform: translateX(-100%); transition: transform 0.6s ease; } .ghost-button:hover::before { transform: translateX(100%); } .ghost-button.active { background-color: rgba(0, 243, 255, 0.1); border-color: var(--primary-neon); box-shadow: 0 0 15px rgba(0, 243, 255, 0.3), 0 0 30px rgba(0, 243, 255, 0.2) inset; } .ghost-button .icon { margin-bottom: 10px; font-size: 24px; transition: all 0.3s ease; } .ghost-button:hover .icon { transform: scale(1.1); color: var(--primary-neon); } .ghost-button:nth-child(2), .ghost-button:nth-child(4) { border-color: rgba(255, 0, 247, 0.3); } .ghost-button:nth-child(2):hover, .ghost-button:nth-child(4):hover { border-color: var(--secondary-neon); box-shadow: 0 0 15px rgba(255, 0, 247, 0.4), 0 0 30px rgba(255, 0, 247, 0.1) inset; text-shadow: 0 0 5px var(--secondary-neon); } .ghost-button:nth-child(2):hover .icon, .ghost-button:nth-child(4):hover .icon { color: var(--secondary-neon); } .ghost-button:nth-child(3) { border-color: rgba(0, 255, 141, 0.3); } .ghost-button:nth-child(3):hover { border-color: var(--tertiary-neon); box-shadow: 0 0 15px rgba(0, 255, 141, 0.4), 0 0 30px rgba(0, 255, 141, 0.1) inset; text-shadow: 0 0 5px var(--tertiary-neon); } .ghost-button:nth-child(3):hover .icon { color: var(--tertiary-neon); } .description { font-size: 12px; opacity: 0.7; margin-top: 5px; font-weight: 300; transition: opacity 0.3s ease; } .ghost-button:hover .description { opacity: 1; } .footer { display: flex; justify-content: space-between; padding: 15px 0; border-top: 1px solid rgba(0, 243, 255, 0.1); font-size: 12px; position: relative; } .footer::before { content: ''; position: absolute; top: -1px; right: 0; width: 30%; height: 1px; background: linear-gradient(90deg, transparent, var(--secondary-neon)); } .system-stats { display: flex; gap: 15px; } .stat { display: flex; align-items: center; gap: 5px; } .stat-icon { color: var(--primary-neon); } .stat:nth-child(2) .stat-icon { color: var(--secondary-neon); } .stat:nth-child(3) .stat-icon { color: var(--tertiary-neon); } .version { opacity: 0.7; } .pulse { animation: pulse 1.5s infinite alternate ease-in-out; } @keyframes pulse { 0% { opacity: 0.7; } 100% { opacity: 1; } } .ping { position: relative; } .ping::after { content: ''; position: absolute; top: 50%; right: -15px; width: 6px; height: 6px; background-color: var(--tertiary-neon); border-radius: 50%; transform: translateY(-50%); animation: ping 1s infinite; } @keyframes ping { 0% { transform: translateY(-50%) scale(1); opacity: 1; } 100% { transform: translateY(-50%) scale(2); opacity: 0; } } .hex-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(rgba(0, 243, 255, 0.1) 1px, transparent 1px); background-size: 25px 25px; opacity: 0.2; pointer-events: none; z-index: -1; } .responsive-info { display: none; text-align: center; margin-top: 20px; font-size: 14px; color: var(--primary-neon); } @media (max-width: 600px) { .button-grid { grid-template-columns: 1fr; } .responsive-info { display: block; } .header { flex-direction: column; align-items: flex-start; gap: 15px; } .user-info { width: 100%; justify-content: space-between; } .system-stats { flex-direction: column; gap: 5px; } .footer { flex-direction: column; gap: 10px; } } .notification { position: fixed; bottom: 25px; right: 25px; background: rgba(10, 10, 20, 0.8); backdrop-filter: blur(10px); border: 1px solid var(--primary-neon); padding: 15px 20px; border-radius: 3px; transform: translateX(200%); transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); z-index: 100; display: flex; align-items: center; gap: 10px; box-shadow: 0 0 20px rgba(0, 243, 255, 0.2); max-width: 300px; } .notification.active { transform: translateX(0); } .notification-icon { color: var(--primary-neon); font-size: 20px; } .notification-text { font-size: 14px; } .scan-line { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, transparent, var(--primary-neon), transparent); animation: scan 3s linear infinite; opacity: 0.5; z-index: 5; } @keyframes scan { 0% { transform: translateY(-100%); } 100% { transform: translateY(700px); } } .circular-loader { width: 20px; height: 20px; border: 2px solid transparent; border-top-color: var(--primary-neon); border-radius: 50%; animation: spin 1s linear infinite; margin-left: auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div class="container"> <div class="hud-overlay"></div> <div class="hex-pattern"></div> <div class="scan-line"></div> <header class="header"> <div class="logo">NEXUS-LINK</div> <div class="user-info"> <div class="avatar"> <span class="avatar-text">V</span> </div> <div> <div>VoidRunner</div> <div class="level">Level 42 • Elite</div> </div> <div class="circular-loader"></div> </div> </header> <main class="button-grid"> <button class="ghost-button" data-action="loadout"> <div class="icon">⚔️</div> <div>Combat Suite</div> <div class="description">Optimize weapon loadouts and combat augments</div> </button> <button class="ghost-button" data-action="neural"> <div class="icon">🧠</div> <div>Neural Link</div> <div class="description">Configure neural interface sensitivity and response</div> </button> <button class="ghost-button" data-action="mech"> <div class="icon">🤖</div> <div>Mech Systems</div> <div class="description">Adjust exoskeleton assist and power distribution</div> </button> <button class="ghost-button" data-action="faction"> <div class="icon">👥</div> <div>Faction Hub</div> <div class="description">Access shadow network and encrypted comms</div> </button> </main> <footer class="footer"> <div class="system-stats"> <div class="stat"> <span class="stat-icon">●</span> <span>LATENCY: 12ms</span> </div> <div class="stat pulse"> <span class="stat-icon">●</span> <span>SHIELD: 92%</span> </div> <div class="stat ping"> <span class="stat-icon">●</span> <span>SYNC</span> </div> </div> <div class="version">NEXUS SHELL v3.4.2 // RUNTIME ACTIVE</div> </footer> <div class="notification" id="notification"> <div class="notification-icon">⚡</div> <div class="notification-text">System message here</div> </div> <div class="responsive-info pulse">OPTIMIZED FOR HYPERGRID DISPLAY</div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const buttons = document.querySelectorAll('.ghost-button'); const notification = document.getElementById('notification'); // Messages for each button const messages = { loadout: "Combat Suite online. Kinetic dampeners calibrated. Ready for weapons integration.", neural: "Neural interface active. Synapse response optimized at 98.7% efficiency.", mech: "Mech systems engaged. Power distribution rebalanced for maximum combat potential.", faction: "Encrypted faction channel established. Shadow network protocols active." }; buttons.forEach(button => { button.addEventListener('click', function() { // Remove active class from all buttons buttons.forEach(b => b.classList.remove('active')); // Add active class to clicked button this.classList.add('active'); // Show notification with appropriate message const action = this.getAttribute('data-action'); showNotification(messages[action] || "System activated"); // Add sound effect playSound(action); // Add subtle screen effect addScreenEffect(); }); // Add hover sound effect button.addEventListener('mouseenter', function() { playHoverSound(); }); }); function showNotification(message) { const notificationText = notification.querySelector('.notification-text'); notificationText.textContent = message; notification.classList.add('active'); setTimeout(() => { notification.classList.remove('active'); }, 3000); } function playSound(action) { // In a real implementation, this would play sounds // console.log('Playing sound for:', action); } function playHoverSound() { // In a real implementation, this would play a hover sound // console.log('Playing hover sound'); } function addScreenEffect() { const screen = document.createElement('div'); screen.style.position = 'fixed'; screen.style.top = '0'; screen.style.left = '0'; screen.style.width = '100%'; screen.style.height = '100%'; screen.style.backgroundColor = 'rgba(0, 243, 255, 0.1)'; screen.style.pointerEvents = 'none'; screen.style.zIndex = '20'; document.body.appendChild(screen); setTimeout(() => { screen.remove(); }, 150); } // Random system message every 15 seconds const systemMessages = [ "Proximity sensor activated. Unknown signature detected.", "System update available. Performance boost: +12%.", "Energy reserves at optimal levels. Combat readiness: 100%.", "Automatic shield recalibration complete.", "Weather conditions affecting sensor range. Compensating." ]; function showRandomMessage() { const randomIndex = Math.floor(Math.random() * systemMessages.length); showNotification(systemMessages[randomIndex]); } // Show initial notification after 3 seconds setTimeout(() => { showNotification("Nexus-Link interface activated. Welcome back, VoidRunner."); }, 1500); // Periodic system messages (disabled to avoid annoyance) // setInterval(showRandomMessage, 15000); // Simulate button press for demo purposes setTimeout(() => { const randomButton = buttons[Math.floor(Math.random() * buttons.length)]; randomButton.click(); }, 5000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nexus Innovate</title> <style> :root { --primary-color: #1a1a1a; --accent-color: #00d4ff; --background-color: #ffffff; --text-color: #333333; --transition-speed: 0.3s; } * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { background-color: var(--background-color); color: var(--text-color); height: 100%; width: 100%; overflow-x: hidden; line-height: 1.6; } .container { max-width: 700px; margin: 0 auto; padding: 20px; height: 700px; display: flex; flex-direction: column; } header { padding: 20px 0; display: flex; justify-content: space-between; align-items: center; } .logo { font-weight: 700; font-size: 24px; color: var(--primary-color); text-decoration: none; position: relative; display: inline-block; } .logo::after { content: ''; position: absolute; width: 8px; height: 8px; background-color: var(--accent-color); border-radius: 50%; bottom: 5px; right: -12px; } .hero { display: flex; flex-direction: column; justify-content: center; margin: 40px 0; flex-grow: 1; } h1 { font-size: 3rem; font-weight: 800; margin-bottom: 20px; line-height: 1.2; } h1 span { color: var(--accent-color); position: relative; } h1 span::after { content: ''; position: absolute; width: 100%; height: 4px; background-color: var(--accent-color); bottom: 0; left: 0; transform: scaleX(0.3); transition: transform var(--transition-speed) ease; } h1:hover span::after { transform: scaleX(1); } p { font-size: 1.1rem; margin-bottom: 30px; max-width: 600px; } .button-container { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; } .ghost-button { display: inline-block; position: relative; padding: 12px 28px; color: var(--primary-color); background: transparent; border: 1.5px solid var(--primary-color); font-size: 1rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: all var(--transition-speed) ease; overflow: hidden; z-index: 1; } .ghost-button::after { content: ''; position: absolute; width: 100%; height: 2px; background-color: var(--primary-color); bottom: 0; left: 0; transform: scaleX(0); transform-origin: right; transition: transform var(--transition-speed) ease; } .ghost-button:hover::after { transform: scaleX(1); transform-origin: left; } .ghost-button.accent { color: var(--accent-color); border-color: var(--accent-color); } .ghost-button.accent::after { background-color: var(--accent-color); } .ghost-button.filled { color: var(--background-color); background-color: var(--primary-color); border-color: var(--primary-color); } .ghost-button.filled::after { background-color: var(--accent-color); height: 100%; z-index: -1; transform: scaleX(0); } .ghost-button.filled:hover { color: var(--primary-color); border-color: var(--accent-color); } .ghost-button.filled:hover::after { transform: scaleX(1); } .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; margin: 30px 0; } .feature { position: relative; padding: 20px; border: 1px solid transparent; transition: all var(--transition-speed) ease; } .feature:hover { border-color: var(--primary-color); } .feature-icon { color: var(--accent-color); font-size: 1.5rem; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; } .feature-icon::before { content: ''; width: 8px; height: 8px; background-color: var(--accent-color); display: inline-block; } .feature h3 { margin-bottom: 10px; font-size: 1.2rem; } .feature p { font-size: 0.9rem; margin-bottom: 0; } footer { margin-top: auto; padding-top: 20px; border-top: 1px solid #eaeaea; text-align: center; font-size: 0.9rem; color: #666; } .cursor-follower { position: fixed; width: 20px; height: 20px; background-color: rgba(0, 212, 255, 0.2); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s, background-color 0.3s; mix-blend-mode: exclusion; } @media (max-width: 600px) { h1 { font-size: 2.2rem; } .button-container { flex-direction: column; gap: 15px; } .ghost-button { width: 100%; text-align: center; } .features { grid-template-columns: 1fr; } } </style> </head> <body> <div class="cursor-follower"></div> <div class="container"> <header> <a href="#" class="logo">Nexus</a> </header> <main> <section class="hero"> <h1>We build <span>tomorrow's</span> digital interfaces</h1> <p>Nexus delivers cutting-edge software solutions that transform how businesses operate in the digital landscape. Our minimalist approach focuses on what matters: performance, usability, and innovation.</p> <div class="button-container"> <a href="#" class="ghost-button filled">See our work</a> <a href="#" class="ghost-button accent">Contact us</a> <a href="#" class="ghost-button">Our process</a> </div> </section> <section class="features"> <div class="feature"> <div class="feature-icon">AI Integration</div> <h3>Smart Solutions</h3> <p>Implementing machine learning models that adapt to your business needs and grow with your data.</p> </div> <div class="feature"> <div class="feature-icon">Cloud Architecture</div> <h3>Scalable Systems</h3> <p>Building resilient infrastructure that scales with your customer base without compromise.</p> </div> <div class="feature"> <div class="feature-icon">UX Design</div> <h3>Human-Centered</h3> <p>Creating interfaces that feel intuitive and deliver exceptional user experiences every time.</p> </div> </section> </main> <footer> <p>© 2023 Nexus Innovate — Building the digital future.</p> </footer> </div> <script> document.addEventListener('DOMContentLoaded', function() { const cursor = document.querySelector('.cursor-follower'); const buttons = document.querySelectorAll('.ghost-button'); // Custom cursor movement document.addEventListener('mousemove', function(e) { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; }); // Hover effects for buttons buttons.forEach(button => { button.addEventListener('mouseenter', function() { cursor.style.width = '50px'; cursor.style.height = '50px'; button.style.transform = 'translateY(-2px)'; }); button.addEventListener('mouseleave', function() { cursor.style.width = '20px'; cursor.style.height = '20px'; button.style.transform = 'translateY(0)'; }); // Prevent default behavior for links button.addEventListener('click', function(e) { e.preventDefault(); const buttonText = this.textContent.trim(); // Add ripple effect on click const ripple = document.createElement('span'); ripple.classList.add('ripple'); this.appendChild(ripple); // Animation for button click this.style.transform = 'scale(0.98)'; setTimeout(() => { this.style.transform = 'scale(1)'; }, 200); // Feedback on what was clicked console.log(`Button clicked: ${buttonText}`); }); }); // Animated underline for logo const logo = document.querySelector('.logo'); logo.addEventListener('mouseenter', function() { logo.style.color = 'var(--accent-color)'; }); logo.addEventListener('mouseleave', function() { logo.style.color = 'var(--primary-color)'; }); // Feature hover effects const features = document.querySelectorAll('.feature'); features.forEach(feature => { feature.addEventListener('mouseenter', function() { this.style.backgroundColor = 'rgba(0, 212, 255, 0.05)'; }); feature.addEventListener('mouseleave', function() { this.style.backgroundColor = 'transparent'; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>EarthGuardians - Protecting Our Planet Together</title> <style> @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&family=Cormorant+Garamond:wght@400;500;600&display=swap'); :root { --sage: #c9d7c2; --sage-dark: #a0b99a; --lilac: #e2d9e7; --lilac-dark: #cebfd5; --sky: #d0e1e8; --sky-dark: #b0cfd8; --sand: #eae3d9; --sand-dark: #d8cec1; --main-text: #4a4a4a; --light-text: #777777; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Montserrat', sans-serif; color: var(--main-text); background-color: #fafafa; line-height: 1.6; max-width: 700px; height: 700px; overflow: auto; margin: 0 auto; position: relative; } .container { padding: 2.5rem 1.5rem; max-width: 650px; margin: 0 auto; } header { text-align: center; margin-bottom: 2rem; position: relative; } h1 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 2.5rem; margin-bottom: 0.5rem; color: #3c3c3c; } .tagline { font-weight: 300; font-size: 1rem; color: var(--light-text); margin-bottom: 1.5rem; } .leaf-icon { position: absolute; width: 30px; height: 30px; top: 10px; left: calc(50% - 100px); opacity: 0.6; animation: floatLeaf 3s ease-in-out infinite; } @keyframes floatLeaf { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(5deg); } } .mission { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; text-align: center; margin-bottom: 2.5rem; max-width: 85%; margin-left: auto; margin-right: auto; color: #595959; font-style: italic; line-height: 1.7; } .buttons-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 2.5rem; } .ghost-button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 120px; border-radius: 8px; text-decoration: none; padding: 1.2rem 1rem; overflow: hidden; transition: all 0.4s ease; cursor: pointer; text-align: center; } .ghost-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; transform: scaleY(0); transform-origin: bottom; transition: transform 0.5s ease-out; z-index: -1; } .ghost-button:hover::before { transform: scaleY(1); } .ghost-button.sage { border: 2px solid var(--sage); color: #5e7158; } .ghost-button.sage::before { background-color: var(--sage); } .ghost-button.lilac { border: 2px solid var(--lilac); color: #7a678a; } .ghost-button.lilac::before { background-color: var(--lilac); } .ghost-button.sky { border: 2px solid var(--sky); color: #5a7d89; } .ghost-button.sky::before { background-color: var(--sky); } .ghost-button.sand { border: 2px solid var(--sand); color: #8a7c6a; } .ghost-button.sand::before { background-color: var(--sand); } .button-title { font-weight: 500; font-size: 1.1rem; margin-bottom: 0.5rem; z-index: 1; transition: color 0.3s ease; } .button-desc { font-size: 0.8rem; font-weight: 300; z-index: 1; transition: color 0.3s ease; } .impact-section { text-align: center; margin-bottom: 2rem; } .impact-title { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; margin-bottom: 1.5rem; font-weight: 500; } .impact-grid { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 1.5rem; } .impact-item { flex: 0 0 calc(33.333% - 1.5rem); text-align: center; transition: transform 0.3s ease; } .impact-item:hover { transform: translateY(-5px); } .impact-number { font-weight: 600; font-size: 2rem; color: #3c3c3c; opacity: 0; animation: fadeNumber 1.5s forwards; } @keyframes fadeNumber { 0% { opacity: 0; } 100% { opacity: 1; } } .impact-label { font-size: 0.9rem; color: var(--light-text); } .special-message { padding: 1.5rem; border-radius: 8px; background-color: rgba(201, 215, 194, 0.15); position: relative; overflow: hidden; margin-bottom: 2rem; } .special-message::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(201, 215, 194, 0.2), rgba(226, 217, 231, 0.2), rgba(208, 225, 232, 0.2)); background-size: 200% 200%; animation: gradient 12s ease infinite; z-index: -1; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .special-message-title { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; margin-bottom: 0.5rem; color: #3c3c3c; } .special-message-text { font-size: 0.9rem; line-height: 1.7; } .newsletter { margin-top: 2rem; } .newsletter-title { font-size: 1.1rem; margin-bottom: 0.8rem; text-align: center; } .newsletter-form { display: flex; gap: 0.5rem; } .newsletter-input { flex: 1; padding: 0.8rem 1rem; border: 1px solid #e0e0e0; border-radius: 4px; font-family: 'Montserrat', sans-serif; font-size: 0.9rem; transition: border-color 0.3s ease; } .newsletter-input:focus { outline: none; border-color: var(--sage); } .newsletter-button { padding: 0.8rem 1.2rem; background-color: transparent; border: 2px solid var(--sage); color: #5e7158; border-radius: 4px; font-family: 'Montserrat', sans-serif; font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .newsletter-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: var(--sage); transition: left 0.3s ease; z-index: -1; } .newsletter-button:hover::before { left: 0; } .newsletter-message { margin-top: 0.8rem; font-size: 0.85rem; color: var(--sage-dark); text-align: center; opacity: 0; transition: opacity 0.3s ease; } footer { text-align: center; padding: 1rem 0; margin-top: 1.5rem; font-size: 0.8rem; color: var(--light-text); } @media (max-width: 550px) { .buttons-container { grid-template-columns: 1fr; gap: 1rem; } .ghost-button { height: 100px; } .impact-item { flex: 0 0 calc(50% - 1rem); } .newsletter-form { flex-direction: column; } h1 { font-size: 2rem; } .leaf-icon { left: calc(50% - 80px); } } /* Animation pulse for hover on impact items */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .impact-item:hover .impact-number { animation: pulse 1.5s infinite; } /* Ripple effect for buttons */ .ghost-button .ripple { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.7); transform: scale(0); animation: ripple 0.6s linear; } @keyframes ripple { to { transform: scale(2.5); opacity: 0; } } </style> </head> <body> <div class="container"> <header> <svg class="leaf-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#c9d7c2"> <path d="M17,8C8,10,5.9,16.17,3.82,21.34L5.71,22l1-2.3C9,14,12,12,22,8.35L17,8z M14.22,15a3.32,3.32,0,0,1-.66.6,4.33,4.33,0,0,1-1.93.89,5.67,5.67,0,0,1-1.81,0A5.21,5.21,0,0,1,8,15.87a4.82,4.82,0,0,1-1.3-1,4.4,4.4,0,0,0,2.17.53,3.3,3.3,0,0,0,2.22-.77,3.14,3.14,0,0,0,.92-1.59,3.6,3.6,0,0,0,0-1.75,3.43,3.43,0,0,0-.7-1.35A3.63,3.63,0,0,1,13,11.62a4.44,4.44,0,0,1,.09,2.53A4.5,4.5,0,0,1,14.22,15Z"/> </svg> <h1>EarthGuardians</h1> <p class="tagline">Protecting Our Planet Together</p> </header> <p class="mission"> Every small act of kindness towards our planet creates ripples of change. Together, we can restore balance and nurture the only home we share. </p> <div class="buttons-container"> <div class="ghost-button sage"> <span class="button-title">Plant Trees</span> <span class="button-desc">Help us restore native forests</span> </div> <div class="ghost-button lilac"> <span class="button-title">Ocean Cleanup</span> <span class="button-desc">Join efforts to clear plastic waste</span> </div> <div class="ghost-button sky"> <span class="button-title">Volunteer</span> <span class="button-desc">Lend your hands to local projects</span> </div> <div class="ghost-button sand"> <span class="button-title">Make a Donation</span> <span class="button-desc">Support our conservation efforts</span> </div> </div> <div class="impact-section"> <h2 class="impact-title">Our Impact Together</h2> <div class="impact-grid"> <div class="impact-item"> <div class="impact-number" data-count="97342">0</div> <div class="impact-label">Trees Planted</div> </div> <div class="impact-item"> <div class="impact-number" data-count="246">0</div> <div class="impact-label">Tons of Plastic Collected</div> </div> <div class="impact-item"> <div class="impact-number" data-count="12853">0</div> <div class="impact-label">Volunteer Hours</div> </div> </div> </div> <div class="special-message"> <h3 class="special-message-title">Why Your Support Matters</h3> <p class="special-message-text"> Our work relies entirely on compassionate individuals like you. With 94% of donations going directly to field work, your contribution creates meaningful change in vulnerable ecosystems. We operate with complete transparency, sharing every project's outcomes and financial details with our supporters. </p> </div> <div class="newsletter"> <h3 class="newsletter-title">Join Our Community</h3> <form class="newsletter-form" id="newsletter-form"> <input type="email" class="newsletter-input" placeholder="Your email address" required> <button type="submit" class="newsletter-button">Subscribe</button> </form> <p class="newsletter-message" id="newsletter-message">Thank you for joining our mission! We'll be in touch soon.</p> </div> </div> <footer> EarthGuardians © 2023 | A non-profit dedicated to environmental restoration and conservation </footer> <script> // Ghost button ripple effect document.querySelectorAll('.ghost-button').forEach(button => { button.addEventListener('click', function(e) { const ripple = document.createElement('span'); ripple.classList.add('ripple'); this.appendChild(ripple); const x = e.clientX - e.target.getBoundingClientRect().left; const y = e.clientY - e.target.getBoundingClientRect().top; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; setTimeout(() => { ripple.remove(); }, 600); }); }); // Animated counter for impact numbers function animateCounter(el) { const target = parseInt(el.getAttribute('data-count')); const duration = 2000; const step = target / duration * 10; let current = 0; const timer = setInterval(() => { current += step; el.textContent = Math.floor(current).toLocaleString(); if (current >= target) { el.textContent = target.toLocaleString(); clearInterval(timer); } }, 10); } // Initialize counters when they come into view const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { animateCounter(entry.target); observer.unobserve(entry.target); } }); }, { threshold: 0.5 }); document.querySelectorAll('.impact-number').forEach(counter => { observer.observe(counter); }); // Newsletter form handling document.getElementById('newsletter-form').addEventListener('submit', function(e) { e.preventDefault(); const messageEl = document.getElementById('newsletter-message'); const input = this.querySelector('input'); // Simulate form submission messageEl.style.opacity = 1; input.value = ''; setTimeout(() => { messageEl.style.opacity = 0; }, 5000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Academic Resource Navigator</title> <style> :root { --primary: #4B6584; --secondary: #778CA3; --accent: #485563; --background: #F7F9FC; --text: #2C3A47; --success: #58B19F; --warning: #F9CA24; --error: #EB4D4B; --border-radius: 4px; --transition: all 0.3s ease; --outline-width: 2px; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { background-color: var(--background); color: var(--text); padding: 1.5rem; display: flex; flex-direction: column; height: 100vh; max-height: 700px; max-width: 700px; margin: 0 auto; transition: var(--transition); } header { margin-bottom: 2rem; } h1 { font-size: 1.75rem; line-height: 1.3; font-weight: 600; color: var(--primary); margin-bottom: 0.75rem; } h2 { font-size: 1.25rem; font-weight: 500; color: var(--secondary); margin-bottom: 1.5rem; } p { font-size: 0.95rem; line-height: 1.6; color: var(--text); margin-bottom: 1rem; } main { flex: 1; display: flex; flex-direction: column; gap: 1.5rem; } .btn-section { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 500px) { .btn-section { grid-template-columns: 1fr; } } .ghost-btn { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; background: transparent; color: var(--primary); border: var(--outline-width) solid var(--primary); border-radius: var(--border-radius); padding: 0.75rem 1.25rem; font-size: 0.95rem; font-weight: 500; text-decoration: none; cursor: pointer; transition: var(--transition); overflow: hidden; z-index: 1; } .ghost-btn::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background-color: rgba(75, 101, 132, 0.08); transition: var(--transition); z-index: -1; } .ghost-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); } .ghost-btn:hover::after { height: 100%; } .ghost-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(75, 101, 132, 0.3); } .ghost-btn:active { transform: translateY(0); } .ghost-btn .icon { margin-right: 0.75rem; transition: var(--transition); } .ghost-btn:hover .icon { transform: translateX(3px); } .ghost-btn span.underline { position: relative; display: inline-block; } .ghost-btn span.underline::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background-color: var(--primary); transition: var(--transition); } .ghost-btn:hover span.underline::after { width: 100%; } .secondary { color: var(--secondary); border-color: var(--secondary); } .secondary::after { background-color: rgba(119, 140, 163, 0.08); } .secondary:focus { box-shadow: 0 0 0 3px rgba(119, 140, 163, 0.3); } .secondary span.underline::after { background-color: var(--secondary); } .accent { color: var(--accent); border-color: var(--accent); } .accent::after { background-color: rgba(72, 85, 99, 0.08); } .accent:focus { box-shadow: 0 0 0 3px rgba(72, 85, 99, 0.3); } .accent span.underline::after { background-color: var(--accent); } .featured-section { background-color: white; border-radius: 8px; padding: 1.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); margin-bottom: 1.5rem; } .featured-section h3 { color: var(--primary); margin-bottom: 1rem; font-size: 1.1rem; font-weight: 500; } .resources { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; } .resource-card { background-color: white; border-radius: var(--border-radius); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); padding: 1rem; transition: var(--transition); display: flex; flex-direction: column; cursor: pointer; } .resource-card:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); } .resource-card h4 { font-size: 1rem; font-weight: 500; margin-bottom: 0.5rem; color: var(--primary); } .resource-card p { font-size: 0.85rem; color: var(--text); margin-bottom: 0.75rem; flex: 1; } .tag { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 20px; font-size: 0.7rem; background-color: rgba(75, 101, 132, 0.1); color: var(--primary); } .ghost-btn-sm { display: inline-flex; align-items: center; padding: 0.4rem 0.7rem; font-size: 0.8rem; margin-top: 0.5rem; } footer { margin-top: 2rem; font-size: 0.85rem; color: var(--secondary); text-align: center; } /* Skeleton loading animation */ @keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } } .shimmer { background: linear-gradient(to right, #f6f7f8 8%, #edeef1 18%, #f6f7f8 33%); background-size: 800px 104px; animation: shimmer 2s infinite linear; } /* Tooltip */ .tooltip { position: relative; display: inline-block; } .tooltip .tooltip-text { visibility: hidden; width: 200px; background-color: var(--text); color: white; text-align: center; border-radius: var(--border-radius); padding: 0.5rem; position: absolute; z-index: 1; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; font-size: 0.8rem; } .tooltip .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--text) transparent transparent transparent; } .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; } /* Theme selector */ .theme-selector { position: absolute; top: 1rem; right: 1rem; display: flex; gap: 0.5rem; } .theme-option { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: var(--transition); } .theme-option:hover, .theme-option.active { transform: scale(1.1); border-color: white; box-shadow: 0 0 0 2px var(--primary); } .theme-option.light { background-color: #F7F9FC; } .theme-option.sepia { background-color: #FEF8EC; } .theme-option.dark { background-color: #293241; } /* Dark theme */ body.dark-theme { --primary: #8EBBFF; --secondary: #A2B2C8; --accent: #6D98BA; --background: #1A2130; --text: #ECF0F3; } body.dark-theme .resource-card, body.dark-theme .featured-section { background-color: #232D3F; } /* Sepia theme */ body.sepia-theme { --primary: #9A6E31; --secondary: #7C6240; --accent: #A87747; --background: #FEF8EC; --text: #4B3621; } /* Custom scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--background); } ::-webkit-scrollbar-thumb { background: var(--secondary); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary); } /* Accessibility focus indicator */ *:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; } </style> </head> <body> <div class="theme-selector"> <div class="theme-option light active" title="Light theme"></div> <div class="theme-option sepia" title="Sepia theme"></div> <div class="theme-option dark" title="Dark theme"></div> </div> <header> <h1>Academic Resource Navigator</h1> <p>Access curated educational materials designed to enhance scholarly research and learning across disciplines.</p> </header> <main> <div class="featured-section"> <h3>Current Semester Resources</h3> <div class="btn-section"> <button class="ghost-btn" id="syllabusBtn"> <svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V5H19V19Z" fill="currentColor"/> <path d="M7 7H17V9H7V7ZM7 11H17V13H7V11ZM7 15H13V17H7V15Z" fill="currentColor"/> </svg> <span class="underline">Course Syllabi</span> </button> <button class="ghost-btn secondary" id="assignmentBtn"> <svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M7 15H17V17H7V15ZM7 11H17V13H7V11ZM7 7H17V9H7V7ZM19 3H14.82C14.4 1.84 13.3 1 12 1C10.7 1 9.6 1.84 9.18 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM12 3C12.55 3 13 3.45 13 4C13 4.55 12.55 5 12 5C11.45 5 11 4.55 11 4C11 3.45 11.45 3 12 3ZM19 19H5V5H19V19Z" fill="currentColor"/> </svg> <span class="underline">Assignment Portal</span> </button> <button class="ghost-btn accent" id="calendarBtn"> <svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 4H18V2H16V4H8V2H6V4H5C3.89 4 3.01 4.9 3.01 6L3 20C3 21.1 3.89 22 5 22H19C20.1 22 21 21.1 21 20V6C21 4.9 20.1 4 19 4ZM19 20H5V10H19V20ZM19 8H5V6H19V8ZM12 13H17V18H12V13Z" fill="currentColor"/> </svg> <span class="underline">Academic Calendar</span> </button> <button class="ghost-btn secondary" id="libraryBtn"> <svg class="icon" width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21 5C19.89 4.65 18.67 4.5 17.5 4.5C15.55 4.5 13.45 4.9 12 6C10.55 4.9 8.45 4.5 6.5 4.5C4.55 4.5 2.45 4.9 1 6V20.65C1 20.9 1.25 21.15 1.5 21.15C1.6 21.15 1.65 21.1 1.75 21.1C3.1 20.45 5.05 20 6.5 20C8.45 20 10.55 20.4 12 21.5C13.35 20.65 15.8 20 17.5 20C19.15 20 20.85 20.3 22.25 21.05C22.35 21.1 22.4 21.1 22.5 21.1C22.75 21.1 23 20.85 23 20.6V6C22.4 5.55 21.75 5.25 21 5ZM21 18.5C19.9 18.15 18.7 18 17.5 18C15.8 18 13.35 18.65 12 19.5V8C13.35 7.15 15.8 6.5 17.5 6.5C18.7 6.5 19.9 6.65 21 7V18.5Z" fill="currentColor"/> <path d="M17.5 10.5C18.38 10.5 19.23 10.59 20 10.76V9.24C19.21 9.09 18.36 9 17.5 9C15.8 9 14.26 9.29 13 9.83V11.49C14.13 10.85 15.7 10.5 17.5 10.5Z" fill="currentColor"/> <path d="M13 12.49V14.15C14.13 13.51 15.7 13.16 17.5 13.16C18.38 13.16 19.23 13.25 20 13.42V11.9C19.21 11.75 18.36 11.66 17.5 11.66C15.8 11.66 14.26 11.96 13 12.49Z" fill="currentColor"/> <path d="M17.5 14.33C15.8 14.33 14.26 14.63 13 15.16V16.82C14.13 16.18 15.7 15.83 17.5 15.83C18.38 15.83 19.23 15.92 20 16.09V14.57C19.21 14.41 18.36 14.33 17.5 14.33Z" fill="currentColor"/> </svg> <span class="underline">Digital Library</span> </button> </div> </div> <h2>Research & Collaboration Tools</h2> <div class="resources"> <div class="resource-card" id="card1"> <h4>Citation Manager</h4> <p>Generate and manage APA, MLA, Chicago, and other academic citation formats automatically.</p> <span class="tag">Research</span> <button class="ghost-btn ghost-btn-sm"> <span class="underline">Open Tool</span> </button> </div> <div class="resource-card" id="card2"> <h4>Study Group Hub</h4> <p>Create or join virtual study groups organized by course, discipline, or research interest.</p> <span class="tag">Collaboration</span> <button class="ghost-btn ghost-btn-sm secondary"> <span class="underline">Find Groups</span> </button> </div> <div class="resource-card" id="card3"> <h4>Academic Writing Lab</h4> <p>Access grammar, structure, and style tools tailored for scholarly writing standards.</p> <span class="tag">Writing</span> <button class="ghost-btn ghost-btn-sm accent"> <span class="underline">Start Writing</span> </button> </div> </div> </main> <footer> <div class="tooltip"> <p>© 2023 Academic Resource Navigator • <span style="text-decoration: underline; cursor: pointer;">Accessibility Statement</span></p> <span class="tooltip-text">Our platform is designed to meet WCAG 2.1 AA standards for accessibility, with keyboard navigation and screen reader compatibility.</span> </div> </footer> <script> // Ghost Button Effects and Interactions const ghostButtons = document.querySelectorAll('.ghost-btn'); ghostButtons.forEach(button => { button.addEventListener('mouseenter', () => { button.style.transition = 'all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)'; }); button.addEventListener('click', (e) => { e.preventDefault(); // Create ripple effect const ripple = document.createElement('span'); ripple.classList.add('ripple'); ripple.style.position = 'absolute'; ripple.style.borderRadius = '50%'; ripple.style.transform = 'scale(0)'; ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.3)'; ripple.style.width = '100px'; ripple.style.height = '100px'; ripple.style.left = e.offsetX - 50 + 'px'; ripple.style.top = e.offsetY - 50 + 'px'; ripple.style.animation = 'ripple 0.8s linear'; ripple.style.opacity = '0'; button.appendChild(ripple); // Create loading state for button const originalText = button.innerHTML; const width = button.offsetWidth; button.style.width = width + 'px'; const loadingText = document.createElement('span'); loadingText.innerHTML = 'Loading...'; loadingText.style.opacity = '0'; loadingText.style.position = 'absolute'; loadingText.style.left = '50%'; loadingText.style.transform = 'translateX(-50%)'; setTimeout(() => { button.innerHTML = ''; button.appendChild(loadingText); setTimeout(() => { loadingText.style.transition = 'opacity 0.3s ease'; loadingText.style.opacity = '1'; setTimeout(() => { loadingText.style.opacity = '0'; setTimeout(() => { button.innerHTML = originalText; button.style.width = 'auto'; }, 300); }, 1200); }, 10); }, 800); setTimeout(() => { ripple.remove(); }, 800); }); }); // Resource Card Interactions const resourceCards = document.querySelectorAll('.resource-card'); resourceCards.forEach(card => { card.addEventListener('click', function() { this.style.transition = 'all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)'; // Create a subtle pulse effect this.animate([ { transform: 'scale(1)' }, { transform: 'scale(1.02)' }, { transform: 'scale(1)' } ], { duration: 600, easing: 'ease-in-out' }); }); }); // Theme Selector Functionality const themeOptions = document.querySelectorAll('.theme-option'); const body = document.body; themeOptions.forEach(option => { option.addEventListener('click', function() { // Remove active class from all options themeOptions.forEach(opt => opt.classList.remove('active')); // Add active class to clicked option this.classList.add('active'); // Apply selected theme if (this.classList.contains('light')) { body.classList.remove('dark-theme', 'sepia-theme'); } else if (this.classList.contains('sepia')) { body.classList.remove('dark-theme'); body.classList.add('sepia-theme'); } else if (this.classList.contains('dark')) { body.classList.remove('sepia-theme'); body.classList.add('dark-theme'); } }); }); // Keyboard Navigation document.addEventListener('keydown', function(e) { if (e.key === 'Tab') { document.body.classList.add('keyboard-navigation'); } }); document.addEventListener('mousedown', function() { document.body.classList.remove('keyboard-navigation'); }); // Initialize page with subtle animation document.addEventListener('DOMContentLoaded', function() { const header = document.querySelector('header'); const main = document.querySelector('main'); const footer = document.querySelector('footer'); header.style.opacity = '0'; main.style.opacity = '0'; footer.style.opacity = '0'; header.style.transform = 'translateY(-10px)'; main.style.transform = 'translateY(-10px)'; footer.style.transform = 'translateY(-10px)'; header.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; main.style.transition = 'opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s'; footer.style.transition = 'opacity 0.5s ease 0.4s, transform 0.5s ease 0.4s'; setTimeout(() => { header.style.opacity = '1'; header.style.transform = 'translateY(0)'; setTimeout(() => { main.style.opacity = '1'; main.style.transform = 'translateY(0)'; setTimeout(() => { footer.style.opacity = '1'; footer.style.transform = 'translateY(0)'; }, 200); }, 200); }, 100); }); // Create accessibility keyboard shortcuts document.addEventListener('keydown', function(e) { // ALT + number shortcuts for navigation if (e.altKey) { switch (e.key) { case '1': document.getElementById('syllabusBtn').click(); break; case '2': document.getElementById('assignmentBtn').click(); break; case '3': document.getElementById('calendarBtn').click(); break; case '4': document.getElementById('libraryBtn').click(); break; } } }); // Add keypress event to resource cards resourceCards.forEach(card => { card.tabIndex = 0; card.addEventListener('keypress', function(e) { if (e.key === 'Enter' || e.key === ' ') { this.querySelector('.ghost-btn-sm').click(); } }); }); // Add ripple animation style const style = document.createElement('style'); style.textContent = ` @keyframes ripple { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(4); opacity: 0; } } `; document.head.appendChild(style); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Typography-Focused Blog Navigation</title> <style> @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Source+Sans+Pro:wght@300;400;600&display=swap'); :root { --primary-color: #3a3a3a; --secondary-color: #f8f4f1; --accent-color: #e7c9a9; --text-color: #2a2a2a; --light-text: #6a6a6a; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Source Sans Pro', sans-serif; background-color: var(--secondary-color); color: var(--text-color); line-height: 1.6; width: 100%; max-width: 700px; height: 100%; max-height: 700px; overflow-y: auto; padding: 2rem; } .blog-container { display: grid; grid-template-columns: 1fr; gap: 3rem; } .blog-header { border-bottom: 1px solid var(--accent-color); padding-bottom: 1.5rem; margin-bottom: 2rem; } .blog-title { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 700; color: var(--primary-color); margin-bottom: 0.5rem; } .blog-subtitle { font-family: 'Source Sans Pro', sans-serif; font-weight: 300; color: var(--light-text); font-size: 1rem; } .article { margin-bottom: 2.5rem; position: relative; transition: transform 0.3s ease; } .article-header { margin-bottom: 0.8rem; } .article-title { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 700; color: var(--primary-color); margin-bottom: 0.4rem; } .article-meta { font-size: 0.875rem; color: var(--light-text); margin-bottom: 1rem; } .article-excerpt { font-size: 1rem; margin-bottom: 1.5rem; position: relative; overflow: hidden; line-height: 1.7; } .ghost-button { display: inline-block; padding: 0.6rem 0; font-family: 'Source Sans Pro', sans-serif; font-weight: 600; font-size: 0.9rem; color: var(--primary-color); text-decoration: none; letter-spacing: 0.03em; text-transform: uppercase; background: transparent; border: none; border-bottom: 1px solid var(--accent-color); cursor: pointer; position: relative; transition: all 0.3s ease; overflow: hidden; } .ghost-button::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--accent-color); transform: scaleX(0); transform-origin: right; transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1); } .ghost-button:hover { color: var(--primary-color); transform: translateY(-2px) scale(1.02); } .ghost-button:hover::after { transform: scaleX(1); transform-origin: left; } .ghost-button .arrow { display: inline-block; margin-left: 0.3rem; transition: transform 0.3s ease; } .ghost-button:hover .arrow { transform: translateX(5px); } .line-decoration { width: 30px; height: 3px; background-color: var(--accent-color); margin: 0.8rem 0; } .expanded-content { max-height: 0; overflow: hidden; transition: max-height 0.6s cubic-bezier(0.86, 0, 0.07, 1); } .expanded { max-height: 1000px; } .article-image { width: 100%; height: 200px; object-fit: cover; margin-bottom: 1.2rem; border-radius: 3px; filter: grayscale(20%); transition: filter 0.3s ease; } .article:hover .article-image { filter: grayscale(0%); } .hidden { display: none; } .fade-in { animation: fadeIn 0.5s ease-in; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 600px) { body { padding: 1.5rem; } .blog-title { font-size: 2rem; } .article-title { font-size: 1.5rem; } } </style> </head> <body> <div class="blog-container"> <header class="blog-header"> <h1 class="blog-title">The Typography Journal</h1> <p class="blog-subtitle">Exploring the art and science of readable content</p> </header> <article class="article"> <header class="article-header"> <h2 class="article-title">The White Space Revolution</h2> <div class="article-meta">By Sophia Loren • June 12, 2023 • 6 min read</div> <div class="line-decoration"></div> </header> <img src="https://images.unsplash.com/photo-1618004912476-29818d81ae2e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Minimalist white space design" class="article-image"> <div class="article-excerpt"> <p>Negative space isn't merely empty—it's an active design element that creates rhythm and balance. Modern blogs are embracing generous margins and line spacing, allowing typography to breathe and readers to focus.</p> <div class="expanded-content" id="content-1"> <p>White space serves as both frame and foundation, lending power to the words it surrounds. The most effective editorial designs understand that text density directly impacts comprehension and recall. When paragraphs have room to exist as distinct thoughts, readers process information more effectively and engage more deeply with the content.</p> <p>This shift toward airier layouts represents more than aesthetic preference—it acknowledges fundamental principles of cognitive psychology. Our eyes need rest between information processing, and strategic white space provides exactly that.</p> </div> </div> <button class="ghost-button" data-content="content-1"> Read More <span class="arrow">→</span> </button> </article> <article class="article"> <header class="article-header"> <h2 class="article-title">Variable Fonts: The Future of Responsive Typography</h2> <div class="article-meta">By Marcus Chen • May 28, 2023 • 4 min read</div> <div class="line-decoration"></div> </header> <img src="https://images.unsplash.com/photo-1516131206008-dd041a9764fd?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Variable font demonstration" class="article-image"> <div class="article-excerpt"> <p>Variable fonts represent the most significant advancement in digital typography since webfonts themselves. With a single file containing infinite variations along multiple axes, designers can fine-tune weight, width, and optical size without loading additional resources.</p> <div class="expanded-content" id="content-2"> <p>The implications for responsive design are profound. Type can now adapt fluidly to viewport size, screen resolution, and even ambient light conditions. Text remains crisp and properly proportioned regardless of display context, ensuring optimal readability across devices.</p> <p>Performance benefits compound these advantages—variable fonts significantly reduce load times compared to traditional font families with multiple weight files. This creates a win-win scenario where aesthetic flexibility and technical efficiency enhance each other rather than trading off.</p> </div> </div> <button class="ghost-button" data-content="content-2"> Read More <span class="arrow">→</span> </button> </article> <article class="article"> <header class="article-header"> <h2 class="article-title">The Return of Serifed Body Text</h2> <div class="article-meta">By Eleanor Parish • April 15, 2023 • 5 min read</div> <div class="line-decoration"></div> </header> <img src="https://images.unsplash.com/photo-1507842217343-583bb7270b66?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Book with serifed typography" class="article-image"> <div class="article-excerpt"> <p>After years of sans-serif dominance in digital environments, we're witnessing a renaissance of serifed typefaces in long-form content. This shift challenges the conventional wisdom that serifs impair screen readability—modern high-resolution displays now render these subtle details with print-like clarity.</p> <div class="expanded-content" id="content-3"> <p>The character and warmth of well-designed serif fonts create a more immersive reading experience, particularly for narrative content. Research increasingly suggests that the distinctive letterforms may actually aid in character recognition and reading flow, contradicting earlier digital design dogma.</p> <p>Publications embracing this trend report longer average reading times and higher content completion rates. The subtle authority conveyed by these typefaces appears to enhance perceived credibility—a crucial advantage in today's information landscape.</p> </div> </div> <button class="ghost-button" data-content="content-3"> Read More <span class="arrow">→</span> </button> </article> </div> <script> document.addEventListener('DOMContentLoaded', function() { const readMoreButtons = document.querySelectorAll('.ghost-button'); readMoreButtons.forEach(button => { button.addEventListener('click', function() { const contentId = this.getAttribute('data-content'); const content = document.getElementById(contentId); if (content.classList.contains('expanded')) { // Collapse content.classList.remove('expanded'); setTimeout(() => { this.innerHTML = 'Read More <span class="arrow">→</span>'; }, 400); } else { // Expand content.classList.add('expanded'); content.classList.add('fade-in'); setTimeout(() => { this.innerHTML = 'Read Less <span class="arrow">↑</span>'; }, 400); } }); // Add hover effect animation button.addEventListener('mouseenter', function() { const article = this.closest('.article'); if (article) { article.style.transform = 'translateY(-3px)'; } }); button.addEventListener('mouseleave', function() { const article = this.closest('.article'); if (article) { article.style.transform = 'translateY(0)'; } }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pulse Events - Event Management Portal</title> <style> :root { --primary-color: #17171a; --accent-color: #ff3e5f; --secondary-color: #3e64ff; --neutral-color: #f5f5f7; --text-color: #2d2d2d; --shadow-color: rgba(0, 0, 0, 0.05); --success-color: #34c759; --danger-color: #ff3b30; --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-primary); background-color: var(--neutral-color); color: var(--text-color); line-height: 1.5; display: flex; justify-content: center; align-items: center; min-height: 100vh; overflow-x: hidden; padding: 1rem; } .container { max-width: 700px; width: 100%; margin: 0 auto; background-color: white; border-radius: 16px; box-shadow: 0 10px 40px var(--shadow-color); overflow: hidden; height: 100%; max-height: 700px; display: flex; flex-direction: column; } .header { padding: 1.5rem 2rem; background-color: var(--primary-color); color: white; position: relative; overflow: hidden; } .logo { display: flex; align-items: center; margin-bottom: 1rem; } .logo-icon { width: 32px; height: 32px; margin-right: 0.75rem; background-color: var(--accent-color); border-radius: 8px; position: relative; display: flex; align-items: center; justify-content: center; } .logo-icon::before, .logo-icon::after { content: ''; position: absolute; background-color: white; } .logo-icon::before { width: 16px; height: 3px; border-radius: 2px; } .logo-icon::after { width: 3px; height: 16px; border-radius: 2px; } .logo-text { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.5px; } .header h1 { font-size: 2rem; font-weight: 800; margin-bottom: 0.5rem; letter-spacing: -0.5px; } .header p { font-size: 0.95rem; opacity: 0.8; max-width: 90%; } .circles { position: absolute; top: -5rem; right: -5rem; width: 15rem; height: 15rem; z-index: 0; opacity: 0.1; } .circles::before, .circles::after { content: ''; position: absolute; border-radius: 50%; border: 2px solid white; } .circles::before { width: 100%; height: 100%; } .circles::after { width: 70%; height: 70%; top: 15%; left: 15%; } .content { padding: 2rem; overflow-y: auto; flex-grow: 1; } .event-list { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2rem; } .event-card { background-color: white; border-radius: 12px; box-shadow: 0 4px 12px var(--shadow-color); padding: 1.25rem; transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid rgba(0, 0, 0, 0.06); position: relative; overflow: hidden; } .event-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px var(--shadow-color); } .event-status { position: absolute; top: 1.25rem; right: 1.25rem; font-size: 0.75rem; padding: 0.25rem 0.75rem; border-radius: 50px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; } .status-upcoming { background-color: rgba(62, 100, 255, 0.1); color: var(--secondary-color); } .status-urgent { background-color: rgba(255, 62, 95, 0.1); color: var(--accent-color); animation: pulse 2s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } } .event-date { font-size: 0.85rem; font-weight: 600; color: var(--secondary-color); margin-bottom: 0.5rem; display: flex; align-items: center; } .event-date svg { margin-right: 0.5rem; } .event-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; color: var(--primary-color); } .event-location { font-size: 0.9rem; margin-bottom: 1rem; color: #666; display: flex; align-items: center; } .event-location svg { margin-right: 0.5rem; flex-shrink: 0; } .ghost-btn { background-color: transparent; border: 2px solid; border-radius: 8px; padding: 0.5rem 1.25rem; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; position: relative; overflow: hidden; outline: none; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.5px; } .ghost-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background-color: currentColor; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0.08; transition: width 0.4s ease, height 0.4s ease; } .ghost-btn:hover::before { width: 150%; height: 150%; } .ghost-btn svg { margin-right: 0.5rem; } .btn-primary { color: var(--accent-color); border-color: var(--accent-color); } .btn-primary:active { background-color: rgba(255, 62, 95, 0.1); } .btn-secondary { color: var(--secondary-color); border-color: var(--secondary-color); } .btn-secondary:active { background-color: rgba(62, 100, 255, 0.1); } .event-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; } .add-event { position: sticky; bottom: 0; background-color: white; padding: 1.5rem 2rem; border-top: 1px solid rgba(0, 0, 0, 0.06); display: flex; align-items: center; justify-content: space-between; } .add-event .ghost-btn { box-shadow: 0 4px 12px rgba(255, 62, 95, 0.15); } .feedback-badge { position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-100px); padding: 0.75rem 1.25rem; background-color: var(--primary-color); color: white; border-radius: 8px; font-weight: 600; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); z-index: 1000; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; align-items: center; } .feedback-badge.show { transform: translateX(-50%) translateY(0); } .feedback-badge.success { background-color: var(--success-color); } .feedback-badge.error { background-color: var(--danger-color); } .feedback-badge svg { margin-right: 0.5rem; } @media (max-width: 600px) { .header { padding: 1.25rem 1.5rem; } .content, .add-event { padding: 1.5rem; } .header h1 { font-size: 1.75rem; } .event-actions { flex-wrap: wrap; } .ghost-btn { flex: 1; min-width: calc(50% - 0.375rem); } } .loading-circle { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 50%; border-right-color: transparent; animation: spin 0.75s linear infinite; margin-right: 0.5rem; } @keyframes spin { to { transform: rotate(360deg); } } </style> </head> <body> <div id="feedback" class="feedback-badge"></div> <div class="container"> <header class="header"> <div class="circles"></div> <div class="logo"> <div class="logo-icon"></div> <div class="logo-text">Pulse Events</div> </div> <h1>Your upcoming events</h1> <p>Manage RSVPs, schedules and event planning in one place</p> </header> <main class="content"> <div class="event-list"> <div class="event-card"> <span class="event-status status-urgent">Today</span> <div class="event-date"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 2V5M16 2V5M3.5 9.09H20.5M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M15.6949 13.7H15.7039M15.6949 16.7H15.7039M11.9949 13.7H12.0049M11.9949 16.7H12.0049M8.29492 13.7H8.30492M8.29492 16.7H8.30492" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> June 24, 2023 • 6:00 PM - 9:00 PM </div> <h3 class="event-title">Tech Innovation Summit 2023</h3> <div class="event-location"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 13.4299C13.7231 13.4299 15.12 12.0331 15.12 10.3099C15.12 8.58681 13.7231 7.18994 12 7.18994C10.2769 7.18994 8.88 8.58681 8.88 10.3099C8.88 12.0331 10.2769 13.4299 12 13.4299Z" stroke="currentColor" stroke-width="1.5"/> <path d="M3.62001 8.49C5.59001 -0.169998 18.42 -0.159997 20.38 8.5C21.53 13.58 18.37 17.88 15.6 20.54C13.59 22.48 10.41 22.48 8.39001 20.54C5.63001 17.88 2.47001 13.57 3.62001 8.49Z" stroke="currentColor" stroke-width="1.5"/> </svg> Metropolitan Conference Center, East Hall B </div> <div class="event-actions"> <button class="ghost-btn btn-primary" id="rsvp-btn-1"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M7.75 12L10.58 14.83L16.25 9.17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> RSVP NOW </button> <button class="ghost-btn btn-secondary" id="details-btn-1"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 2V5M16 2V5M3.5 9.09H20.5M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> DETAILS </button> </div> </div> <div class="event-card"> <span class="event-status status-upcoming">Upcoming</span> <div class="event-date"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 2V5M16 2V5M3.5 9.09H20.5M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M15.6949 13.7H15.7039M15.6949 16.7H15.7039M11.9949 13.7H12.0049M11.9949 16.7H12.0049M8.29492 13.7H8.30492M8.29492 16.7H8.30492" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> July 3, 2023 • 2:00 PM - 4:30 PM </div> <h3 class="event-title">Product Launch: NextGen Series</h3> <div class="event-location"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 13.4299C13.7231 13.4299 15.12 12.0331 15.12 10.3099C15.12 8.58681 13.7231 7.18994 12 7.18994C10.2769 7.18994 8.88 8.58681 8.88 10.3099C8.88 12.0331 10.2769 13.4299 12 13.4299Z" stroke="currentColor" stroke-width="1.5"/> <path d="M3.62001 8.49C5.59001 -0.169998 18.42 -0.159997 20.38 8.5C21.53 13.58 18.37 17.88 15.6 20.54C13.59 22.48 10.41 22.48 8.39001 20.54C5.63001 17.88 2.47001 13.57 3.62001 8.49Z" stroke="currentColor" stroke-width="1.5"/> </svg> Marina Galleria, Exhibition Room A </div> <div class="event-actions"> <button class="ghost-btn btn-primary" id="rsvp-btn-2"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M7.75 12L10.58 14.83L16.25 9.17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> RSVP NOW </button> <button class="ghost-btn btn-secondary" id="details-btn-2"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 2V5M16 2V5M3.5 9.09H20.5M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> DETAILS </button> </div> </div> <div class="event-card"> <span class="event-status status-upcoming">Upcoming</span> <div class="event-date"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 2V5M16 2V5M3.5 9.09H20.5M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M15.6949 13.7H15.7039M15.6949 16.7H15.7039M11.9949 13.7H12.0049M11.9949 16.7H12.0049M8.29492 13.7H8.30492M8.29492 16.7H8.30492" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> July 15, 2023 • 9:00 AM - 5:00 PM </div> <h3 class="event-title">Annual Stakeholders Meeting</h3> <div class="event-location"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 13.4299C13.7231 13.4299 15.12 12.0331 15.12 10.3099C15.12 8.58681 13.7231 7.18994 12 7.18994C10.2769 7.18994 8.88 8.58681 8.88 10.3099C8.88 12.0331 10.2769 13.4299 12 13.4299Z" stroke="currentColor" stroke-width="1.5"/> <path d="M3.62001 8.49C5.59001 -0.169998 18.42 -0.159997 20.38 8.5C21.53 13.58 18.37 17.88 15.6 20.54C13.59 22.48 10.41 22.48 8.39001 20.54C5.63001 17.88 2.47001 13.57 3.62001 8.49Z" stroke="currentColor" stroke-width="1.5"/> </svg> Skyline Corporate Tower, 20th Floor </div> <div class="event-actions"> <button class="ghost-btn btn-primary" id="rsvp-btn-3"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M7.75 12L10.58 14.83L16.25 9.17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> RSVP NOW </button> <button class="ghost-btn btn-secondary" id="details-btn-3"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M8 2V5M16 2V5M3.5 9.09H20.5M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> DETAILS </button> </div> </div> </div> </main> <div class="add-event"> <p><strong>Want to host an event?</strong> Create and manage your own.</p> <button class="ghost-btn btn-primary" id="create-event-btn"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M6 12H18M12 18V6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> CREATE EVENT </button> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const feedbackEl = document.getElementById('feedback'); const rsvpButtons = document.querySelectorAll('[id^="rsvp-btn-"]'); const detailButtons = document.querySelectorAll('[id^="details-btn-"]'); const createEventBtn = document.getElementById('create-event-btn'); // Function to show feedback function showFeedback(message, type = 'success') { const icon = type === 'success' ? '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.75 12L10.58 14.83L16.25 9.17" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>' : '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.17 14.83L14.83 9.17M14.83 14.83L9.17 9.17" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>'; feedbackEl.innerHTML = icon + message; feedbackEl.className = `feedback-badge ${type}`; feedbackEl.classList.add('show'); setTimeout(() => { feedbackEl.classList.remove('show'); }, 3000); } // Handle RSVP clicks rsvpButtons.forEach(button => { button.addEventListener('click', function(e) { const buttonText = e.currentTarget.innerHTML; const buttonId = e.currentTarget.id; const eventNumber = buttonId.split('-')[2]; // Show loading state e.currentTarget.innerHTML = '<span class="loading-circle"></span>Processing...'; e.currentTarget.disabled = true; // Simulate API call setTimeout(() => { e.currentTarget.innerHTML = buttonText; e.currentTarget.disabled = false; showFeedback('Your RSVP has been confirmed!', 'success'); // Change button appearance after RSVP e.currentTarget.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M7.75 12L10.58 14.83L16.25 9.17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg>RSVP CONFIRMED`; e.currentTarget.classList.add('confirmed'); }, 1500); }); }); // Handle details clicks detailButtons.forEach(button => { button.addEventListener('click', function(e) { const eventNumber = e.currentTarget.id.split('-')[2]; const eventTitles = [ "Tech Innovation Summit 2023", "Product Launch: NextGen Series", "Annual Stakeholders Meeting" ]; showFeedback(`Event details for "${eventTitles[eventNumber-1]}" opened`, 'success'); }); }); // Handle create event click createEventBtn.addEventListener('click', function(e) { const buttonText = e.currentTarget.innerHTML; // Show loading state e.currentTarget.innerHTML = '<span class="loading-circle"></span>Loading...'; e.currentTarget.disabled = true; // Simulate API call setTimeout(() => { e.currentTarget.innerHTML = buttonText; e.currentTarget.disabled = false; showFeedback('Event creation form loaded', 'success'); }, 1000); }); // Add hover effect to ghost buttons const ghostButtons = document.querySelectorAll('.ghost-btn'); ghostButtons.forEach(btn => { btn.addEventListener('mouseenter', function() { const rect = this.getBoundingClientRect(); this.style.setProperty('--hover-x', `${rect.width / 2}px`); this.style.setProperty('--hover-y', `${rect.height / 2}px`); }); }); }); </script> </body> </html>
