Horizontal menus are a staple in web design, offering a clean and intuitive way to navigate websites. They provide a streamlined user experience by organizing links in a single, horizontal line.
In this article, we will explore 10 horizontal menu examples that showcase creativity and functionality. These examples will inspire you to enhance your own website's navigation.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers, elevate your horizontal menu designs with Subframe's drag-and-drop interface. Its intuitive, responsive canvas ensures pixel-perfect UI every time, making it a favorite among professionals.
Ready to transform your web design? Start for free today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Unlock the power of Subframe and design stunning UIs, including horizontal menus, with unmatched efficiency. Our drag-and-drop interface ensures pixel-perfect results instantly.
Ready to elevate your web design? Start for free and begin creating right away!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Horizon - Corporate Solutions</title> <style> :root { --primary: #2C3E50; --secondary: #435567; --accent: #1ABC9C; --text: #2C3E50; --light: #ECF0F1; --shadow: rgba(44, 62, 80, 0.15); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f8f9fa; color: var(--text); min-height: 100vh; overflow-x: hidden; display: flex; flex-direction: column; } header { background-color: white; position: sticky; top: 0; width: 100%; box-shadow: 0 2px 15px var(--shadow); z-index: 1000; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .navbar { display: flex; justify-content: space-between; align-items: center; height: 70px; } .logo { font-size: 1.8rem; font-weight: 700; color: var(--primary); text-decoration: none; display: flex; align-items: center; } .logo-icon { margin-right: 10px; position: relative; width: 24px; height: 24px; } .logo-icon::before, .logo-icon::after { content: ''; position: absolute; background-color: var(--primary); } .logo-icon::before { width: 24px; height: 4px; top: 10px; left: 0; } .logo-icon::after { width: 12px; height: 4px; bottom: 0; right: 0; } .menu-toggle { display: none; cursor: pointer; font-size: 1.5rem; } nav ul { display: flex; list-style: none; gap: 3px; } nav li { position: relative; } nav a { text-decoration: none; color: var(--text); font-weight: 500; padding: 10px 18px; display: block; position: relative; transition: color 0.3s ease; font-size: 0.95rem; letter-spacing: 0.3px; } nav a::before { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background-color: var(--accent); transition: width 0.3s ease, left 0.3s ease; } nav a:hover { color: var(--accent); } nav a:hover::before { width: 70%; left: 15%; } nav .active a { color: var(--accent); } nav .active a::before { width: 70%; left: 15%; } .dropdown { position: relative; } .dropdown-content { position: absolute; top: 100%; left: 0; background-color: white; width: 220px; box-shadow: 0 4px 15px var(--shadow); visibility: hidden; opacity: 0; transform: translateY(10px); transition: all 0.3s ease-in-out; border-radius: 4px; overflow: hidden; } .dropdown:hover .dropdown-content { visibility: visible; opacity: 1; transform: translateY(0); } .dropdown-content a { padding: 12px 18px; border-bottom: 1px solid rgba(0,0,0,0.05); } .dropdown-content a:hover { background-color: #f8f9fa; } .dropdown-indicator { margin-left: 5px; transition: transform 0.3s ease; display: inline-block; font-size: 10px; } .dropdown:hover .dropdown-indicator { transform: rotate(180deg); } main { flex: 1; padding: 40px 0; } .hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 50px 20px; } h1 { font-size: 2.8rem; margin-bottom: 20px; font-weight: 700; color: var(--primary); line-height: 1.2; } h1 span { color: var(--accent); } .subtitle { font-size: 1.2rem; margin-bottom: 30px; max-width: 700px; line-height: 1.6; color: var(--secondary); } .btn { background-color: var(--primary); color: white; padding: 12px 28px; border-radius: 4px; text-decoration: none; font-weight: 500; letter-spacing: 0.5px; transition: all 0.3s ease; border: none; cursor: pointer; display: inline-block; font-size: 0.95rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .btn:hover { background-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 8px rgba(0,0,0,0.15); } .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 50px; } .feature-card { background-color: white; border-radius: 8px; padding: 30px; box-shadow: 0 4px 10px var(--shadow); transition: transform 0.3s ease, box-shadow 0.3s ease; } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px var(--shadow); } .feature-icon { font-size: 2rem; margin-bottom: 20px; color: var(--accent); } .feature-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 15px; color: var(--primary); } .feature-desc { font-size: 0.95rem; line-height: 1.6; color: var(--secondary); } @media (max-width: 768px) { .menu-toggle { display: block; } nav { position: fixed; top: 70px; left: 0; width: 100%; background-color: white; box-shadow: 0 4px 10px var(--shadow); transform: translateX(100%); transition: transform 0.3s ease; height: calc(100vh - 70px); overflow-y: auto; } nav.active { transform: translateX(0); } nav ul { flex-direction: column; gap: 0; } nav a { padding: 15px 20px; border-bottom: 1px solid rgba(0,0,0,0.05); } .dropdown-content { position: static; box-shadow: none; width: 100%; display: none; opacity: 1; visibility: visible; transform: none; background-color: #f8f9fa; } .dropdown.open .dropdown-content { display: block; } } @media (max-width: 580px) { h1 { font-size: 2.2rem; } .subtitle { font-size: 1rem; } .features { grid-template-columns: 1fr; } } </style> </head> <body> <header> <div class="container"> <div class="navbar"> <a href="#" class="logo"> <div class="logo-icon"></div> Horizon </a> <div class="menu-toggle" id="menu-toggle"> <i>☰</i> </div> <nav id="main-nav"> <ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="dropdown"> <a href="#">Services <span class="dropdown-indicator">▼</span></a> <div class="dropdown-content"> <a href="#">Strategic Consulting</a> <a href="#">Digital Transformation</a> <a href="#">Market Analysis</a> <a href="#">Financial Advisory</a> </div> </li> <li class="dropdown"> <a href="#">Solutions <span class="dropdown-indicator">▼</span></a> <div class="dropdown-content"> <a href="#">Enterprise Resource Planning</a> <a href="#">Customer Relationship Management</a> <a href="#">Business Intelligence</a> <a href="#">Cloud Infrastructure</a> </div> </li> <li><a href="#">Case Studies</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div> </div> </header> <main> <div class="container"> <div class="hero"> <h1>Streamlined <span>Corporate</span> Solutions</h1> <p class="subtitle">We help enterprises navigate complex business challenges with our innovative approach to digital transformation and strategic consulting.</p> <a href="#" class="btn">Schedule a Consultation</a> </div> <div class="features"> <div class="feature-card"> <div class="feature-icon">⚙️</div> <h3 class="feature-title">Process Optimization</h3> <p class="feature-desc">Streamline your operational workflows and eliminate inefficiencies to achieve maximum productivity and resource allocation.</p> </div> <div class="feature-card"> <div class="feature-icon">📊</div> <h3 class="feature-title">Data-Driven Strategy</h3> <p class="feature-desc">Transform raw data into actionable insights that drive strategic decisions and create sustainable competitive advantages.</p> </div> <div class="feature-card"> <div class="feature-icon">🔄</div> <h3 class="feature-title">Digital Transformation</h3> <p class="feature-desc">Harness cutting-edge technologies to revolutionize your business model and deliver enhanced customer experiences.</p> </div> </div> </div> </main> <script> document.addEventListener('DOMContentLoaded', function() { const menuToggle = document.getElementById('menu-toggle'); const mainNav = document.getElementById('main-nav'); const dropdowns = document.querySelectorAll('.dropdown'); menuToggle.addEventListener('click', function() { mainNav.classList.toggle('active'); this.classList.toggle('active'); }); // For mobile: handle dropdown toggles if (window.innerWidth <= 768) { dropdowns.forEach(dropdown => { const link = dropdown.querySelector('a'); link.addEventListener('click', function(e) { e.preventDefault(); dropdown.classList.toggle('open'); // Close other dropdowns dropdowns.forEach(otherDropdown => { if (otherDropdown !== dropdown) { otherDropdown.classList.remove('open'); } }); }); }); } // Handle menu item hover animation const navItems = document.querySelectorAll('nav a'); navItems.forEach(item => { item.addEventListener('mouseenter', function() { this.style.transition = 'color 0.3s ease'; if (!this.closest('li').classList.contains('active')) { // Subtle scale effect on hover this.style.transform = 'scale(1.05)'; } }); item.addEventListener('mouseleave', function() { this.style.transform = 'scale(1)'; }); }); // Add subtle animation to logo const logo = document.querySelector('.logo'); logo.addEventListener('mouseenter', function() { const logoIcon = this.querySelector('.logo-icon'); logoIcon.style.transition = 'transform 0.3s ease'; logoIcon.style.transform = 'rotate(90deg)'; }); logo.addEventListener('mouseleave', function() { const logoIcon = this.querySelector('.logo-icon'); logoIcon.style.transform = 'rotate(0)'; }); // Feature cards hover effects const featureCards = document.querySelectorAll('.feature-card'); featureCards.forEach(card => { card.addEventListener('mouseenter', function() { const icon = this.querySelector('.feature-icon'); icon.style.transition = 'transform 0.3s ease'; icon.style.transform = 'scale(1.2)'; }); card.addEventListener('mouseleave', function() { const icon = this.querySelector('.feature-icon'); icon.style.transform = 'scale(1)'; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Luxr E-Commerce Menu</title> <style> :root { --primary: #FF4500; --secondary: #2C3E50; --accent-1: #3498DB; --accent-2: #9B59B6; --accent-3: #2ECC71; --light: #ECF0F1; --dark: #1A202C; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f8f9fa; color: var(--dark); font-size: 16px; line-height: 1.6; height: 100vh; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; padding: 20px; } .container { max-width: 100%; margin: 0 auto; width: 100%; } .shop-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; margin-bottom: 0px; position: relative; } .shop-brand { font-size: 2rem; font-weight: 700; color: var(--secondary); letter-spacing: -1px; display: flex; align-items: center; } .shop-brand-dot { color: var(--primary); font-size: 2.5rem; margin-left: 2px; } .header-actions { display: flex; gap: 20px; } .icon-btn { background: none; border: none; font-size: 1.3rem; color: var(--secondary); cursor: pointer; position: relative; transition: transform 0.3s ease, color 0.3s ease; } .icon-btn:hover { color: var(--primary); transform: scale(1.1); } .badge { position: absolute; top: -8px; right: -8px; background-color: var(--primary); color: white; font-size: 0.7rem; font-weight: bold; width: 18px; height: 18px; border-radius: 50%; display: flex; justify-content: center; align-items: center; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.7); } 70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(255, 69, 0, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); } } /* Mega Menu Styling */ .mega-menu-container { position: relative; width: 100%; z-index: 100; background-color: #fff; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05); border-radius: 8px; } .mega-menu { display: flex; justify-content: space-between; list-style: none; padding: 0; position: relative; } .mega-menu-item { position: relative; flex: 1; } .mega-menu-link { display: flex; flex-direction: column; align-items: center; padding: 15px 5px; color: var(--secondary); text-decoration: none; font-weight: 600; font-size: 0.9rem; text-align: center; transition: all 0.3s ease; position: relative; border-bottom: 3px solid transparent; } .mega-menu-link:hover { color: var(--primary); border-bottom: 3px solid var(--primary); } .mega-menu-link i { font-size: 1.5rem; margin-bottom: 5px; } .mega-menu-item.has-dropdown .mega-menu-link::after { content: '▼'; font-size: 0.6rem; margin-left: 5px; transition: transform 0.3s ease; display: inline-block; vertical-align: middle; } .mega-menu-item.has-dropdown:hover .mega-menu-link::after { transform: rotate(180deg); } .category-badge { position: absolute; top: 5px; right: 5px; background: var(--accent-2); color: white; font-size: 0.65rem; padding: 2px 5px; border-radius: 10px; font-weight: bold; animation: bounce 2s infinite; } .sale-badge { background: var(--primary); } .new-badge { background: var(--accent-3); } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } /* Dropdown Styling */ .dropdown-menu { position: absolute; top: 100%; left: 0; width: 680px; max-width: 100vw; background-color: white; border-radius: 8px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); padding: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; z-index: 101; overflow: hidden; } .mega-menu-item:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-title { grid-column: 1 / -1; color: var(--secondary); font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .dropdown-section { display: flex; flex-direction: column; } .dropdown-section h3 { font-size: 0.9rem; color: var(--primary); margin-bottom: 12px; position: relative; font-weight: 600; } .dropdown-section h3::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 30px; height: 2px; background-color: var(--primary); } .dropdown-link { color: var(--dark); text-decoration: none; font-size: 0.9rem; margin: 5px 0; transition: all 0.2s ease; display: flex; align-items: center; } .dropdown-link:hover { color: var(--primary); transform: translateX(5px); } .dropdown-link i { font-size: 0.7rem; margin-right: 5px; color: var(--primary); opacity: 0; transition: opacity 0.2s ease; } .dropdown-link:hover i { opacity: 1; } .promo-section { grid-column: 2 / -1; display: flex; gap: 20px; margin-top: 15px; } .promo-card { background: linear-gradient(135deg, var(--accent-1), var(--accent-2)); color: white; padding: 15px; border-radius: 8px; flex: 1; position: relative; overflow: hidden; transition: transform 0.3s ease; } .promo-card:hover { transform: translateY(-5px); } .promo-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 60%); transform: rotate(30deg); opacity: 0; transition: opacity 0.5s ease; } .promo-card:hover::before { opacity: 1; } .promo-title { font-size: 1rem; font-weight: 700; margin-bottom: 5px; } .promo-desc { font-size: 0.8rem; margin-bottom: 10px; opacity: 0.8; } .promo-link { color: white; text-decoration: none; font-size: 0.8rem; font-weight: 600; display: inline-block; border-bottom: 1px solid white; padding-bottom: 2px; transition: transform 0.2s ease; } .promo-link:hover { transform: translateX(5px); } /* Dropdown for Electronics */ .electronics .dropdown-menu { background-color: #f9f9ff; } .electronics .dropdown-section h3 { color: var(--accent-1); } .electronics .dropdown-section h3::after { background-color: var(--accent-1); } .electronics .dropdown-link:hover { color: var(--accent-1); } .electronics .dropdown-link i { color: var(--accent-1); } /* Dropdown for Fashion */ .fashion .dropdown-menu { background-color: #fff9f9; } .fashion .dropdown-section h3 { color: var(--accent-2); } .fashion .dropdown-section h3::after { background-color: var(--accent-2); } .fashion .dropdown-link:hover { color: var(--accent-2); } .fashion .dropdown-link i { color: var(--accent-2); } /* Dropdown for Home */ .home .dropdown-menu { background-color: #f9fff9; } .home .dropdown-section h3 { color: var(--accent-3); } .home .dropdown-section h3::after { background-color: var(--accent-3); } .home .dropdown-link:hover { color: var(--accent-3); } .home .dropdown-link i { color: var(--accent-3); } .menu-highlight { position: absolute; bottom: 0; height: 3px; width: 0; background-color: var(--primary); transition: all 0.3s ease; border-radius: 5px 5px 0 0; } .content-preview { margin-top: 50px; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); text-align: center; } .content-preview h2 { font-size: 1.5rem; color: var(--secondary); margin-bottom: 15px; } .content-preview p { color: var(--dark); font-size: 0.95rem; line-height: 1.7; max-width: 600px; margin: 0 auto; } @media (max-width: 768px) { .mega-menu { flex-wrap: wrap; } .mega-menu-item { flex: 0 0 33.333%; } .dropdown-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; border-radius: 0; grid-template-columns: 1fr; overflow-y: auto; transform: translateX(100%); } .mega-menu-item:hover .dropdown-menu { transform: translateX(0); } .promo-section { grid-column: 1; flex-direction: column; } .shop-header { flex-direction: column; gap: 10px; } .header-actions { width: 100%; justify-content: space-around; } } @media (max-width: 480px) { .mega-menu-item { flex: 0 0 50%; } .mega-menu-link { font-size: 0.8rem; } .dropdown-title { font-size: 1rem; } .shop-brand { font-size: 1.5rem; } } /* Custom scroll styling */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.05); } ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--secondary); } </style> </head> <body> <div class="container"> <header class="shop-header"> <div class="shop-brand">Luxr<span class="shop-brand-dot">.</span></div> <div class="header-actions"> <button class="icon-btn"> <i class="fas fa-search"></i> </button> <button class="icon-btn"> <i class="fas fa-user"></i> </button> <button class="icon-btn"> <i class="fas fa-heart"></i> <span class="badge">3</span> </button> <button class="icon-btn"> <i class="fas fa-shopping-bag"></i> <span class="badge">2</span> </button> </div> </header> <div class="mega-menu-container"> <ul class="mega-menu"> <li class="mega-menu-item electronics has-dropdown"> <a href="#" class="mega-menu-link"> <i class="fas fa-laptop"></i> Electronics <span class="category-badge new-badge">NEW</span> </a> <div class="dropdown-menu"> <div class="dropdown-title">Shop Electronics</div> <div class="dropdown-section"> <h3>Computing</h3> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Laptops & MacBooks</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Gaming PCs</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Monitors & Displays</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> PC Components</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Storage Solutions</a> </div> <div class="dropdown-section"> <h3>Smart Devices</h3> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Smartphones</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Tablets & E-readers</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Smartwatches</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Smart Home Devices</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Voice Assistants</a> </div> <div class="dropdown-section"> <h3>Entertainment</h3> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> TVs & Projectors</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Gaming Consoles</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Headphones & Audio</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Cameras & Drones</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Streaming Devices</a> </div> <div class="promo-section"> <div class="promo-card"> <div class="promo-title">MacBook Pro M3</div> <div class="promo-desc">Experience revolutionary performance with the latest silicon. Now with 20% performance boost.</div> <a href="#" class="promo-link">Shop Now</a> </div> <div class="promo-card"> <div class="promo-title">Gaming Week</div> <div class="promo-desc">Level up your setup with up to 30% off on gaming peripherals & accessories.</div> <a href="#" class="promo-link">View Deals</a> </div> </div> </div> </li> <li class="mega-menu-item fashion has-dropdown"> <a href="#" class="mega-menu-link"> <i class="fas fa-tshirt"></i> Fashion <span class="category-badge sale-badge">SALE</span> </a> <div class="dropdown-menu"> <div class="dropdown-title">Shop Fashion</div> <div class="dropdown-section"> <h3>Women</h3> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> New Arrivals</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Dresses & Jumpsuits</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Tops & Blouses</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Athleisure</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Footwear</a> </div> <div class="dropdown-section"> <h3>Men</h3> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> New Season</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Shirts & Polos</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Outerwear</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Activewear</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Shoes & Sneakers</a> </div> <div class="dropdown-section"> <h3>Accessories</h3> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Luxury Watches</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Designer Bags</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Jewelry & Sunglasses</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Belts & Wallets</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Scarves & Hats</a> </div> <div class="promo-section"> <div class="promo-card"> <div class="promo-title">Summer Essentials</div> <div class="promo-desc">Discover our curated collection of breathable fabrics perfect for warmer days.</div> <a href="#" class="promo-link">Explore Collection</a> </div> <div class="promo-card"> <div class="promo-title">Designer Edit</div> <div class="promo-desc">Up to 50% off luxury brands including Gucci, Prada, and Saint Laurent.</div> <a href="#" class="promo-link">Shop Sale</a> </div> </div> </div> </li> <li class="mega-menu-item home has-dropdown"> <a href="#" class="mega-menu-link"> <i class="fas fa-home"></i> Home & Living </a> <div class="dropdown-menu"> <div class="dropdown-title">Shop Home & Living</div> <div class="dropdown-section"> <h3>Furniture</h3> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Living Room</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Bedroom</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Kitchen & Dining</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Home Office</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Outdoor</a> </div> <div class="dropdown-section"> <h3>Decor & Textiles</h3> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Wall Art & Mirrors</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Cushions & Throws</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Rugs & Carpets</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Lighting</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Bedding & Bath</a> </div> <div class="dropdown-section"> <h3>Kitchen & Appliances</h3> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Cookware & Bakeware</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Small Appliances</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Tableware & Glassware</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Food Storage</a> <a href="#" class="dropdown-link"><i class="fas fa-chevron-right"></i> Coffee & Tea</a> </div> <div class="promo-section"> <div class="promo-card"> <div class="promo-title">Scandinavian Edit</div> <div class="promo-desc">Minimalist furniture and decor that brings warmth and functionality to any space.</div> <a href="#" class="promo-link">Discover More</a> </div> <div class="promo-card"> <div class="promo-title">Smart Home Essentials</div> <div class="promo-desc">Transform your living space with the latest in intelligent home technology.</div> <a href="#" class="promo-link">Shop Collection</a> </div> </div> </div> </li> <li class="mega-menu-item"> <a href="#" class="mega-menu-link"> <i class="fas fa-dumbbell"></i> Sports </a> </li> <li class="mega-menu-item"> <a href="#" class="mega-menu-link"> <i class="fas fa-gift"></i> Gifts </a> </li> <li class="mega-menu-item"> <a href="#" class="mega-menu-link"> <i class="fas fa-tags"></i> Offers <span class="category-badge">HOT</span> </a> </li> <div class="menu-highlight"></div> </ul> </div> <div class="content-preview"> <h2>Welcome to Luxr</h2> <p>Explore our meticulously curated collection of premium products across electronics, fashion, home & living and more. Hover over the menu categories above to discover our extensive range and exclusive offers.</p> </div> </div> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <script> document.addEventListener('DOMContentLoaded', function() { // Menu highlight animation const menuItems = document.querySelectorAll('.mega-menu-item'); const menuHighlight = document.querySelector('.menu-highlight'); menuItems.forEach(item => { item.addEventListener('mouseenter', function() { const itemRect = this.getBoundingClientRect(); const menuRect = document.querySelector('.mega-menu').getBoundingClientRect(); menuHighlight.style.width = `${itemRect.width}px`; menuHighlight.style.left = `${itemRect.left - menuRect.left}px`; menuHighlight.style.opacity = '1'; }); item.addEventListener('mouseleave', function() { menuHighlight.style.opacity = '0'; }); }); // Provide fallback for FontAwesome if it fails to load setTimeout(function() { const iconCheck = document.querySelector('.fa-search'); if (!iconCheck || getComputedStyle(iconCheck).fontFamily !== 'Font Awesome 5 Free') { const fallbackIcons = { 'fa-search': '🔍', 'fa-user': '👤', 'fa-heart': '❤️', 'fa-shopping-bag': '🛍️', 'fa-laptop': '💻', 'fa-tshirt': '👕', 'fa-home': '🏠', 'fa-dumbbell': '💪', 'fa-gift': '🎁', 'fa-tags': '🏷️', 'fa-chevron-right': '→' }; document.querySelectorAll('[class*="fas fa-"]').forEach(icon => { const classes = Array.from(icon.classList); for (const cls of classes) { if (fallbackIcons[cls]) { icon.textContent = fallbackIcons[cls]; break; } } }); } }, 1000); // Mobile menu handling if (window.innerWidth <= 768) { document.querySelectorAll('.dropdown-menu').forEach(dropdown => { const closeBtn = document.createElement('button'); closeBtn.className = 'close-dropdown'; closeBtn.innerHTML = '×'; closeBtn.style.position = 'absolute'; closeBtn.style.top = '10px'; closeBtn.style.right = '10px'; closeBtn.style.background = 'none'; closeBtn.style.border = 'none'; closeBtn.style.fontSize = '24px'; closeBtn.style.color = '#333'; closeBtn.style.cursor = 'pointer'; dropdown.prepend(closeBtn); closeBtn.addEventListener('click', function(e) { e.stopPropagation(); dropdown.style.transform = 'translateX(100%)'; setTimeout(() => { dropdown.style.opacity = '0'; dropdown.style.visibility = 'hidden'; }, 300); }); }); } // Prevent actual link navigation document.querySelectorAll('a').forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Travel Booking Menu</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } body { background-color: #f5f5f5; display: flex; justify-content: center; align-items: center; min-height: 700px; width: 700px; margin: 0 auto; overflow: hidden; } .container { width: 100%; height: 100%; position: relative; overflow: hidden; } .backdrop { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; background-position: center; transition: opacity 1.2s ease, transform 1.5s ease; opacity: 0; z-index: -1; transform: scale(1.1); } .backdrop.active { opacity: 1; transform: scale(1); } .backdrop::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 100%); } .menu-container { position: relative; z-index: 10; margin-top: 60px; width: 100%; padding: 20px; } .logo { text-align: center; margin-bottom: 40px; transform: translateY(0); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .logo h1 { color: #fff; font-size: 36px; font-weight: 800; letter-spacing: 1px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); margin-bottom: 8px; } .logo p { color: rgba(255, 255, 255, 0.85); font-size: 14px; letter-spacing: 1px; } .menu { display: flex; justify-content: center; list-style: none; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-radius: 15px; padding: 15px 20px; margin-bottom: 40px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); } .menu-item { position: relative; margin: 0 12px; } .menu-link { display: flex; flex-direction: column; align-items: center; color: #fff; text-decoration: none; font-size: 14px; font-weight: 500; padding: 12px 16px; border-radius: 10px; transition: all 0.3s; position: relative; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .menu-link:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-3px); } .menu-link.active { background: rgba(255, 255, 255, 0.25); } .menu-link i { font-size: 24px; margin-bottom: 8px; opacity: 0.9; transition: transform 0.5s; } .menu-link:hover i { transform: translateY(-3px) scale(1.1); } .menu-link::after { content: ''; position: absolute; bottom: 2px; left: 30%; width: 40%; height: 3px; background: #fff; border-radius: 2px; transform: scaleX(0); transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); } .menu-link.active::after { transform: scaleX(1); } .destination-info { color: white; text-align: center; max-width: 80%; margin: 0 auto; padding: 20px; opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s ease; } .destination-info.active { opacity: 1; transform: translateY(0); } .destination-info h2 { font-size: 32px; margin-bottom: 15px; font-weight: 700; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } .destination-info p { font-size: 16px; line-height: 1.6; margin-bottom: 25px; text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); } .explore-btn { display: inline-block; background: linear-gradient(135deg, #ff7e5f, #feb47b); color: white; border: none; padding: 12px 30px; border-radius: 30px; font-weight: 600; font-size: 16px; cursor: pointer; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); transition: all 0.3s; text-decoration: none; position: relative; overflow: hidden; } .explore-btn:hover { transform: translateY(-3px); box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2); } .explore-btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; background: rgba(255, 255, 255, 0.8); opacity: 0; border-radius: 100%; transform: scale(1); transition: all 0.6s; } .explore-btn:active::after { transform: scale(30); opacity: 0; transition: 0s; } /* Custom weather icon */ .weather { position: absolute; top: 20px; right: 20px; display: flex; align-items: center; color: white; font-size: 14px; opacity: 0; transform: translateY(-20px); transition: opacity 0.8s ease, transform 0.8s ease; } .weather.active { opacity: 1; transform: translateY(0); } .weather i { font-size: 24px; margin-right: 8px; } /* Media Queries */ @media (max-width: 600px) { .menu { flex-wrap: wrap; justify-content: center; } .menu-item { margin: 5px; } .menu-link { padding: 10px 12px; font-size: 12px; } .menu-link i { font-size: 20px; } .logo h1 { font-size: 28px; } .destination-info h2 { font-size: 24px; } .destination-info p { font-size: 14px; } } @media (max-width: 400px) { .menu-container { padding: 10px; } .logo { margin-bottom: 20px; } .explore-btn { padding: 10px 20px; font-size: 14px; } } </style> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet"> </head> <body> <div class="container"> <div class="backdrop" id="backdrop"></div> <div class="weather" id="weather"> <i class="fas fa-sun"></i> <span id="temp">28°C</span> </div> <div class="menu-container"> <div class="logo"> <h1>Voyageur</h1> <p>Discover the extraordinary</p> </div> <ul class="menu"> <li class="menu-item"> <a href="#" class="menu-link active" data-destination="beaches"> <i class="fas fa-umbrella-beach"></i> Beaches </a> </li> <li class="menu-item"> <a href="#" class="menu-link" data-destination="mountains"> <i class="fas fa-mountain"></i> Mountains </a> </li> <li class="menu-item"> <a href="#" class="menu-link" data-destination="cities"> <i class="fas fa-city"></i> Cities </a> </li> <li class="menu-item"> <a href="#" class="menu-link" data-destination="countryside"> <i class="fas fa-tree"></i> Countryside </a> </li> <li class="menu-item"> <a href="#" class="menu-link" data-destination="islands"> <i class="fas fa-island-tropical"></i> Islands </a> </li> </ul> <div class="destination-info active" id="beaches-info"> <h2>Tropical Paradise</h2> <p>Feel the soft white sand between your toes as crystal-clear turquoise waters beckon. Bali's beaches offer the perfect blend of relaxation and adventure, from secluded coves to vibrant beach clubs.</p> <a href="#" class="explore-btn">Explore Packages</a> </div> <div class="destination-info" id="mountains-info"> <h2>Alpine Adventures</h2> <p>Journey through majestic Swiss Alps with snow-capped peaks and charming villages. Experience breathtaking trails, luxury chalets, and world-class skiing in Europe's most stunning mountain range.</p> <a href="#" class="explore-btn">Explore Packages</a> </div> <div class="destination-info" id="cities-info"> <h2>Urban Exploration</h2> <p>Discover the architectural wonders and vibrant energy of Tokyo's urban landscape. From ancient temples to futuristic skyscrapers, immerse yourself in a city where tradition meets innovation.</p> <a href="#" class="explore-btn">Explore Packages</a> </div> <div class="destination-info" id="countryside-info"> <h2>Pastoral Retreats</h2> <p>Escape to the rolling hills of Tuscany, where vineyards stretch to the horizon and medieval villages perch on hilltops. Savor farm-to-table cuisine and the unhurried pace of authentic Italian countryside.</p> <a href="#" class="explore-btn">Explore Packages</a> </div> <div class="destination-info" id="islands-info"> <h2>Island Paradise</h2> <p>Experience the untouched beauty of the Maldives with private overwater villas and vibrant coral reefs. Dive into azure waters teeming with marine life and unwind on pristine beaches under swaying palms.</p> <a href="#" class="explore-btn">Explore Packages</a> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const destinations = { beaches: { image: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2073&q=80', weather: '32°C', icon: 'fa-sun' }, mountains: { image: 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80', weather: '12°C', icon: 'fa-cloud-sun' }, cities: { image: 'https://images.unsplash.com/photo-1536098561742-ca998e48cbcc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2036&q=80', weather: '24°C', icon: 'fa-cloud' }, countryside: { image: 'https://images.unsplash.com/photo-1471193945509-9ad0617afabf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80', weather: '22°C', icon: 'fa-sun' }, islands: { image: 'https://images.unsplash.com/photo-1499793983690-e29da59ef1c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80', weather: '29°C', icon: 'fa-sun' } }; const backdrop = document.getElementById('backdrop'); const menuLinks = document.querySelectorAll('.menu-link'); const infoElements = document.querySelectorAll('.destination-info'); const weatherElement = document.getElementById('weather'); const tempElement = document.getElementById('temp'); // Initialize the background backdrop.style.backgroundImage = `url(${destinations.beaches.image})`; backdrop.classList.add('active'); // Add click event listeners to menu items menuLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); const destination = this.getAttribute('data-destination'); // Update active menu item menuLinks.forEach(link => link.classList.remove('active')); this.classList.add('active'); // Update backdrop backdrop.classList.remove('active'); setTimeout(() => { backdrop.style.backgroundImage = `url(${destinations[destination].image})`; backdrop.classList.add('active'); }, 300); // Update info section infoElements.forEach(info => { info.classList.remove('active'); }); document.getElementById(`${destination}-info`).classList.add('active'); // Update weather weatherElement.classList.remove('active'); setTimeout(() => { tempElement.textContent = destinations[destination].weather; weatherElement.querySelector('i').className = `fas ${destinations[destination].icon}`; weatherElement.classList.add('active'); }, 300); }); }); // Set initial weather tempElement.textContent = destinations.beaches.weather; weatherElement.classList.add('active'); // Add hover and click effects for the explore button const exploreButtons = document.querySelectorAll('.explore-btn'); exploreButtons.forEach(button => { button.addEventListener('click', function(e) { e.preventDefault(); const x = e.clientX - e.target.getBoundingClientRect().left; const y = e.clientY - e.target.getBoundingClientRect().top; const ripple = document.createElement('span'); ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); }); // Add subtle parallax effect on mouse move document.addEventListener('mousemove', function(e) { const moveX = (e.clientX - window.innerWidth / 2) * 0.01; const moveY = (e.clientY - window.innerHeight / 2) * 0.01; backdrop.style.transform = `scale(1.05) translate(${moveX}px, ${moveY}px)`; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Global Pulse News Portal</title> <style> :root { --primary: #0a0a0a; --secondary: #f8f8f8; --accent: #ff3b30; --text-primary: #333; --text-secondary: #666; --highlight: #2860e1; --scroll-track: #e0e0e0; --card-bg: #ffffff; --card-shadow: rgba(0, 0, 0, 0.08); --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { background-color: var(--secondary); color: var(--text-primary); overflow-x: hidden; max-width: 700px; margin: 0 auto; height: 100vh; } .news-portal { display: flex; flex-direction: column; height: 100%; max-height: 700px; overflow-y: auto; position: relative; } header { background-color: var(--primary); color: var(--secondary); padding: 1rem; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; } .logo { font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; } .logo span { color: var(--accent); margin-right: 0.3rem; } .logo-dot { display: inline-block; width: 8px; height: 8px; background-color: var(--accent); border-radius: 50%; margin-left: 5px; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } .date-time { font-size: 0.85rem; opacity: 0.8; } .categories-container { width: 100%; overflow: hidden; position: relative; } .categories-scroll { display: flex; overflow-x: auto; scrollbar-width: none; padding-bottom: 5px; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } .categories-scroll::-webkit-scrollbar { display: none; } .nav-controls { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; pointer-events: none; display: flex; justify-content: space-between; padding: 0 10px; } .scroll-btn { background: rgba(255, 255, 255, 0.2); border: none; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: auto; color: white; backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.3s ease; } .categories-container:hover .scroll-btn { opacity: 1; } .category { padding: 0.6rem 1.2rem; margin-right: 0.5rem; background-color: transparent; color: var(--secondary); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 20px; cursor: pointer; transition: var(--transition); white-space: nowrap; font-weight: 500; position: relative; overflow: hidden; } .category::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, var(--highlight), transparent); transform: translateX(-100%); transition: transform 0.3s ease; z-index: -1; opacity: 0.5; } .category:hover::before { transform: translateX(0); } .category.active { background-color: var(--highlight); border-color: var(--highlight); color: white; box-shadow: 0 2px 8px rgba(40, 96, 225, 0.3); } .category.active::before { display: none; } main { flex: 1; overflow-y: auto; padding: 1rem; } .featured { margin-bottom: 1.5rem; } .section-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 3px solid var(--accent); display: inline-block; } .featured-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .featured-main { grid-column: 1 / 3; position: relative; border-radius: 8px; overflow: hidden; height: 200px; box-shadow: 0 4px 12px var(--card-shadow); transition: var(--transition); } .featured-main:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .featured-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .featured-main:hover img { transform: scale(1.05); } .featured-main-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1.5rem 1rem 1rem; background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); color: white; } .featured-main-badge { display: inline-block; background-color: var(--accent); color: white; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: bold; margin-bottom: 0.5rem; text-transform: uppercase; } .featured-main-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; } .featured-side { background-color: var(--card-bg); border-radius: 8px; overflow: hidden; height: 130px; position: relative; box-shadow: 0 2px 8px var(--card-shadow); transition: var(--transition); } .featured-side:hover { transform: translateY(-3px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .featured-side img { width: 100%; height: 65px; object-fit: cover; } .featured-side-content { padding: 0.5rem; } .featured-side-badge { display: inline-block; background-color: var(--highlight); color: white; padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.6rem; font-weight: bold; margin-bottom: 0.2rem; text-transform: uppercase; } .featured-side-title { font-size: 0.85rem; font-weight: 600; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .headlines { margin-bottom: 1.5rem; } .headline-scroll { display: flex; overflow-x: auto; gap: 1rem; padding-bottom: 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; } .headline-scroll::-webkit-scrollbar { display: none; } .headline-card { flex: 0 0 280px; background-color: var(--card-bg); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px var(--card-shadow); transition: var(--transition); position: relative; } .headline-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } .headline-img { height: 140px; overflow: hidden; } .headline-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .headline-card:hover .headline-img img { transform: scale(1.1); } .headline-time { position: absolute; top: 10px; right: 10px; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.7rem; } .headline-content { padding: 1rem; } .headline-badge { display: inline-block; background-color: var(--highlight); color: white; padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.7rem; font-weight: bold; margin-bottom: 0.5rem; text-transform: uppercase; } .headline-title { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .headline-excerpt { font-size: 0.85rem; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; } .breaking-news { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: calc(100% - 2rem); max-width: 660px; background-color: var(--accent); border-radius: 8px; padding: 0.8rem 1rem; color: white; display: flex; align-items: center; box-shadow: 0 4px 15px rgba(255, 59, 48, 0.3); z-index: 10; animation: slideInUp 0.5s ease, pulse-subtle 2s infinite; } @keyframes slideInUp { from { transform: translate(-50%, 100%); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } } @keyframes pulse-subtle { 0% { box-shadow: 0 4px 15px rgba(255, 59, 48, 0.3); } 50% { box-shadow: 0 4px 20px rgba(255, 59, 48, 0.5); } 100% { box-shadow: 0 4px 15px rgba(255, 59, 48, 0.3); } } .breaking-badge { font-weight: 700; margin-right: 0.8rem; background-color: white; color: var(--accent); padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; } .breaking-title { font-weight: 600; flex: 1; margin-right: 0.5rem; } .breaking-close { background: none; border: none; color: white; font-size: 1.2rem; cursor: pointer; padding: 0.2rem; opacity: 0.8; transition: opacity 0.2s ease; } .breaking-close:hover { opacity: 1; } /* Responsive adjustments */ @media (max-width: 600px) { .featured-grid { grid-template-columns: 1fr; } .featured-main { grid-column: 1; height: 180px; } .featured-side { height: 100px; } .featured-side img { height: 50px; } .headline-card { flex: 0 0 250px; } .headline-img { height: 120px; } } @media (max-width: 400px) { .logo { font-size: 1.3rem; } .date-time { font-size: 0.75rem; } .category { padding: 0.5rem 1rem; font-size: 0.9rem; } .featured-main { height: 160px; } .headline-card { flex: 0 0 220px; } } /* Animation for newly loaded content */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.5s ease forwards; } /* Custom scrollbar for the whole portal */ .news-portal::-webkit-scrollbar { width: 6px; } .news-portal::-webkit-scrollbar-track { background: var(--scroll-track); } .news-portal::-webkit-scrollbar-thumb { background: #888; border-radius: 3px; } .news-portal::-webkit-scrollbar-thumb:hover { background: #555; } </style> </head> <body> <div class="news-portal"> <header> <div class="header-top"> <div class="logo"> <span>Global</span>Pulse<div class="logo-dot"></div> </div> <div class="date-time" id="dateTime"></div> </div> <div class="categories-container"> <div class="categories-scroll" id="categoriesScroll"> <button class="category active">Breaking</button> <button class="category">Politics</button> <button class="category">Economy</button> <button class="category">World</button> <button class="category">Climate</button> <button class="category">Technology</button> <button class="category">Science</button> <button class="category">Health</button> <button class="category">Sports</button> <button class="category">Entertainment</button> <button class="category">Education</button> <button class="category">Travel</button> <button class="category">Lifestyle</button> </div> <div class="nav-controls"> <button class="scroll-btn" id="scrollLeft">◀</button> <button class="scroll-btn" id="scrollRight">▶</button> </div> </div> </header> <main> <section class="featured"> <h2 class="section-title">Featured Stories</h2> <div class="featured-grid"> <article class="featured-main"> <img src="https://images.unsplash.com/photo-1557992260-ec58e38d363c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Climate Conference"> <div class="featured-main-content"> <div class="featured-main-badge">Climate</div> <h3 class="featured-main-title">Global Leaders Commit to New Emissions Targets at Climate Summit</h3> </div> </article> <article class="featured-side"> <img src="https://images.unsplash.com/photo-1507679799987-c73779587ccf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80" alt="Economic Forum"> <div class="featured-side-content"> <div class="featured-side-badge">Economy</div> <h3 class="featured-side-title">Markets Rally as Central Banks Signal Policy Shift</h3> </div> </article> <article class="featured-side"> <img src="https://images.unsplash.com/photo-1531297484001-80022131f5a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Tech News"> <div class="featured-side-content"> <div class="featured-side-badge">Technology</div> <h3 class="featured-side-title">Revolutionary AI Breakthrough Transforms Healthcare Diagnostics</h3> </div> </article> </div> </section> <section class="headlines"> <h2 class="section-title">Top Headlines</h2> <div class="headline-scroll" id="headlinesScroll"> <article class="headline-card"> <div class="headline-img"> <img src="https://images.unsplash.com/photo-1573497620053-ea5300f94f21?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Politics"> </div> <div class="headline-time">2 hours ago</div> <div class="headline-content"> <div class="headline-badge">Politics</div> <h3 class="headline-title">Senate Passes Historic Infrastructure Bill After Months of Negotiation</h3> <p class="headline-excerpt">The $1.2 trillion package represents the largest investment in public infrastructure in decades, with funding for roads, bridges, and climate initiatives.</p> </div> </article> <article class="headline-card"> <div class="headline-img"> <img src="https://images.unsplash.com/photo-1532938911079-1b06ac7ceec7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Health"> </div> <div class="headline-time">4 hours ago</div> <div class="headline-content"> <div class="headline-badge">Health</div> <h3 class="headline-title">New Study Reveals Breakthrough in Alzheimer's Treatment Research</h3> <p class="headline-excerpt">Scientists have identified a novel protein pathway that could lead to early intervention therapies, potentially slowing disease progression.</p> </div> </article> <article class="headline-card"> <div class="headline-img"> <img src="https://images.unsplash.com/photo-1551739440-5dd934d3a94a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Sports"> </div> <div class="headline-time">6 hours ago</div> <div class="headline-content"> <div class="headline-badge">Sports</div> <h3 class="headline-title">Underdog Team Stuns Champions in Dramatic Championship Final</h3> <p class="headline-excerpt">In a stunning upset that captivated millions, the underdogs overcame a 15-point deficit in the final quarter to claim their first title in franchise history.</p> </div> </article> <article class="headline-card"> <div class="headline-img"> <img src="https://images.unsplash.com/photo-1540544660406-6a69dacb2804?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1000&q=80" alt="Science"> </div> <div class="headline-time">8 hours ago</div> <div class="headline-content"> <div class="headline-badge">Science</div> <h3 class="headline-title">NASA's New Space Telescope Captures Unprecedented Images of Distant Galaxy Formation</h3> <p class="headline-excerpt">The revolutionary imagery reveals previously unseen details about early universe development, challenging existing cosmological theories.</p> </div> </article> </div> </section> </main> <div class="breaking-news" id="breakingNews"> <div class="breaking-badge">Breaking</div> <div class="breaking-title">Major earthquake strikes Pacific region — Tsunami warnings issued across coastal areas</div> <button class="breaking-close" id="closeBreaking">×</button> </div> </div> <script> // Update date and time function updateDateTime() { const now = new Date(); const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' }; document.getElementById('dateTime').textContent = now.toLocaleDateString('en-US', options); } updateDateTime(); setInterval(updateDateTime, 60000); // Category scroll functionality const categoriesScroll = document.getElementById('categoriesScroll'); const scrollLeftBtn = document.getElementById('scrollLeft'); const scrollRightBtn = document.getElementById('scrollRight'); scrollLeftBtn.addEventListener('click', () => { categoriesScroll.scrollBy({ left: -200, behavior: 'smooth' }); }); scrollRightBtn.addEventListener('click', () => { categoriesScroll.scrollBy({ left: 200, behavior: 'smooth' }); }); // Category selection const categories = document.querySelectorAll('.category'); categories.forEach(category => { category.addEventListener('click', () => { categories.forEach(c => c.classList.remove('active')); category.classList.add('active'); // Simulate content loading with fade-in animation const main = document.querySelector('main'); main.style.opacity = '0'; setTimeout(() => { main.style.opacity = '1'; main.classList.add('fade-in'); setTimeout(() => { main.classList.remove('fade-in'); }, 500); }, 300); }); }); // Breaking news functionality const breakingNews = document.getElementById('breakingNews'); const closeBreaking = document.getElementById('closeBreaking'); closeBreaking.addEventListener('click', () => { breakingNews.style.animation = 'slideInUp 0.5s ease reverse forwards'; setTimeout(() => { breakingNews.style.display = 'none'; }, 500); }); // Auto hide breaking news after 10 seconds setTimeout(() => { breakingNews.style.animation = 'slideInUp 0.5s ease reverse forwards'; setTimeout(() => { breakingNews.style.display = 'none'; }, 500); }, 10000); // Make headlines scroll smoothly on mouse wheel const headlinesScroll = document.getElementById('headlinesScroll'); headlinesScroll.addEventListener('wheel', (e) => { e.preventDefault(); headlinesScroll.scrollLeft += e.deltaY; }); // Automatic category scrolling indication function checkScrollButtons() { const isAtStart = categoriesScroll.scrollLeft === 0; const isAtEnd = categoriesScroll.scrollLeft + categoriesScroll.clientWidth >= categoriesScroll.scrollWidth - 10; scrollLeftBtn.style.opacity = isAtStart ? '0.3' : '1'; scrollRightBtn.style.opacity = isAtEnd ? '0.3' : '1'; } categoriesScroll.addEventListener('scroll', checkScrollButtons); window.addEventListener('resize', checkScrollButtons); checkScrollButtons(); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Social Media Dashboard</title> <style> :root { --primary: #6c5ce7; --secondary: #a29bfe; --background: #f9f9f9; --text-dark: #2d3436; --text-light: #636e72; --success: #00b894; --warning: #fdcb6e; --danger: #ff7675; --card-bg: #ffffff; --hover-bg: #f1f2f6; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--background); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100vh; width: 100%; padding: 20px; color: var(--text-dark); overflow-x: hidden; } .dashboard { width: 100%; max-width: 700px; background-color: var(--card-bg); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); overflow: hidden; } .dashboard-header { padding: 20px 25px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #eee; } .dashboard-title { font-size: 1.5rem; font-weight: 600; color: var(--text-dark); } .user-profile { display: flex; align-items: center; gap: 10px; } .user-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--secondary)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 16px; } .notification-badge { position: relative; cursor: pointer; } .badge { position: absolute; top: -5px; right: -5px; background: var(--danger); color: white; font-size: 10px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; animation: pulse 1.5s infinite; } @keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 118, 117, 0.7); } 70% { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(255, 118, 117, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 118, 117, 0); } } .nav-menu { display: flex; align-items: center; justify-content: space-between; padding: 0 15px; background-color: var(--card-bg); position: relative; height: 60px; overflow-x: auto; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE and Edge */ } .nav-menu::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .menu-items { display: flex; align-items: center; gap: 8px; padding: 0 5px; } .menu-item { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; color: var(--text-light); cursor: pointer; transition: all 0.3s ease; white-space: nowrap; font-weight: 500; } .menu-item:hover { background-color: var(--hover-bg); color: var(--primary); } .menu-item.active { color: var(--primary); background-color: rgba(108, 92, 231, 0.1); transform: scale(1.05); } .menu-item.active::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; background-color: var(--primary); border-radius: 50%; transition: all 0.3s ease; } .menu-item .icon { font-size: 18px; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; transition: all 0.3s ease; } .menu-item.active .icon { transform: scale(1.2); } .indicator { position: absolute; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--secondary)); border-radius: 10px 10px 0 0; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); } .content-area { padding: 20px; height: calc(100% - 150px); overflow-y: auto; } .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 20px; } .stat-card { background-color: var(--card-bg); padding: 15px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; gap: 5px; } .stat-title { font-size: 0.8rem; color: var(--text-light); } .stat-value { font-size: 1.5rem; font-weight: 600; color: var(--text-dark); } .stat-trend { display: flex; align-items: center; gap: 5px; font-size: 0.8rem; } .trend-up { color: var(--success); } .trend-down { color: var(--danger); } .feed-item { display: flex; gap: 15px; margin-bottom: 15px; padding: 15px; background-color: var(--card-bg); border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease; } .feed-item:hover { transform: translateY(-3px); } .feed-avatar { width: 50px; height: 50px; border-radius: 12px; background: linear-gradient(135deg, #74b9ff, #0984e3); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 20px; } .feed-content { flex: 1; } .feed-header { display: flex; justify-content: space-between; margin-bottom: 5px; } .feed-name { font-weight: 600; color: var(--text-dark); } .feed-time { font-size: 0.8rem; color: var(--text-light); } .feed-message { margin-bottom: 10px; color: var(--text-dark); line-height: 1.4; } .feed-actions { display: flex; gap: 15px; } .feed-action { display: flex; align-items: center; gap: 5px; font-size: 0.85rem; color: var(--text-light); cursor: pointer; transition: color 0.3s ease; } .feed-action:hover { color: var(--primary); } .feed-action .icon { font-size: 16px; } .tab-content { display: none; } .tab-content.active { display: block; animation: fadeIn 0.5s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .notification-item { display: flex; gap: 15px; margin-bottom: 15px; padding: 15px; background-color: var(--card-bg); border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: all 0.3s ease; } .notification-item.unread { background-color: rgba(108, 92, 231, 0.05); border-left: 3px solid var(--primary); } .notification-item:hover { transform: translateY(-3px); } .notification-dot { width: 10px; height: 10px; background-color: var(--primary); border-radius: 50%; margin-left: 5px; } @media (max-width: 600px) { .stats-row { grid-template-columns: 1fr; } .menu-item .text { display: none; } .menu-item { padding: 10px; } .menu-items { justify-content: space-around; width: 100%; } .feed-item, .notification-item { flex-direction: column; } .feed-avatar { align-self: flex-start; } } /* Animation for real-time updates */ .live-update { animation: flashUpdate 1.5s ease; } @keyframes flashUpdate { 0% { background-color: rgba(108, 92, 231, 0.2); } 100% { background-color: var(--card-bg); } } </style> </head> <body> <div class="dashboard"> <div class="dashboard-header"> <div class="dashboard-title">Social Pulse</div> <div class="user-profile"> <div class="notification-badge"> <i class="icon">🔔</i> <span class="badge">3</span> </div> <div class="user-avatar">KJ</div> </div> </div> <nav class="nav-menu"> <div class="menu-items"> <div class="menu-item active" data-tab="home"> <span class="icon">📊</span> <span class="text">Dashboard</span> </div> <div class="menu-item" data-tab="feed"> <span class="icon">📱</span> <span class="text">Feed</span> </div> <div class="menu-item" data-tab="notifications"> <span class="icon">🔔</span> <span class="text">Notifications</span> <span class="notification-dot"></span> </div> <div class="menu-item" data-tab="messages"> <span class="icon">💬</span> <span class="text">Messages</span> </div> <div class="menu-item" data-tab="analytics"> <span class="icon">📈</span> <span class="text">Analytics</span> </div> <div class="menu-item" data-tab="settings"> <span class="icon">⚙️</span> <span class="text">Settings</span> </div> </div> <div class="indicator"></div> </nav> <div class="content-area"> <!-- Dashboard Tab --> <div class="tab-content active" id="home"> <div class="stats-row"> <div class="stat-card"> <div class="stat-title">Engagement</div> <div class="stat-value">67.8%</div> <div class="stat-trend trend-up"> <span>↑</span> 12.3% from last week </div> </div> <div class="stat-card"> <div class="stat-title">Impressions</div> <div class="stat-value">24.5K</div> <div class="stat-trend trend-up"> <span>↑</span> 8.7% from last week </div> </div> <div class="stat-card"> <div class="stat-title">Growth Rate</div> <div class="stat-value">5.2%</div> <div class="stat-trend trend-down"> <span>↓</span> 2.1% from last week </div> </div> </div> <h3>Recent Activity</h3> <div class="feed-item"> <div class="feed-avatar">T</div> <div class="feed-content"> <div class="feed-header"> <div class="feed-name">TechConnect</div> <div class="feed-time">Just now</div> </div> <div class="feed-message">Your post "The Future of AR in Social Media" is trending in the #tech community!</div> <div class="feed-actions"> <div class="feed-action"> <span class="icon">👍</span> <span>Like</span> </div> <div class="feed-action"> <span class="icon">💬</span> <span>Comment</span> </div> <div class="feed-action"> <span class="icon">🔄</span> <span>Share</span> </div> </div> </div> </div> <div class="feed-item"> <div class="feed-avatar">C</div> <div class="feed-content"> <div class="feed-header"> <div class="feed-name">CreatorHub</div> <div class="feed-time">2h ago</div> </div> <div class="feed-message">Your story has reached 1,000 views in record time! Your audience engagement is up 23% this week.</div> <div class="feed-actions"> <div class="feed-action"> <span class="icon">👍</span> <span>Like</span> </div> <div class="feed-action"> <span class="icon">💬</span> <span>Comment</span> </div> <div class="feed-action"> <span class="icon">🔄</span> <span>Share</span> </div> </div> </div> </div> </div> <!-- Feed Tab --> <div class="tab-content" id="feed"> <div class="feed-item"> <div class="feed-avatar">M</div> <div class="feed-content"> <div class="feed-header"> <div class="feed-name">Marketing Insider</div> <div class="feed-time">5m ago</div> </div> <div class="feed-message">Just launched our Q3 Social Media Trends Report. Discover which platforms are seeing the highest engagement rates for B2B content this quarter.</div> <div class="feed-actions"> <div class="feed-action"> <span class="icon">👍</span> <span>142</span> </div> <div class="feed-action"> <span class="icon">💬</span> <span>37</span> </div> <div class="feed-action"> <span class="icon">🔄</span> <span>78</span> </div> </div> </div> </div> <div class="feed-item"> <div class="feed-avatar">D</div> <div class="feed-content"> <div class="feed-header"> <div class="feed-name">Digital Nomad Weekly</div> <div class="feed-time">1h ago</div> </div> <div class="feed-message">We're hosting a live workshop on "Creating Viral Short-form Video Content" this Friday at 2 PM EST. Early bird registration ends today!</div> <div class="feed-actions"> <div class="feed-action"> <span class="icon">👍</span> <span>89</span> </div> <div class="feed-action"> <span class="icon">💬</span> <span>23</span> </div> <div class="feed-action"> <span class="icon">🔄</span> <span>41</span> </div> </div> </div> </div> <div class="feed-item"> <div class="feed-avatar">S</div> <div class="feed-content"> <div class="feed-header"> <div class="feed-name">Social Analytics Pro</div> <div class="feed-time">3h ago</div> </div> <div class="feed-message">Instagram just announced major algorithm changes affecting business accounts. Here's what you need to know to maintain your reach.</div> <div class="feed-actions"> <div class="feed-action"> <span class="icon">👍</span> <span>215</span> </div> <div class="feed-action"> <span class="icon">💬</span> <span>76</span> </div> <div class="feed-action"> <span class="icon">🔄</span> <span>152</span> </div> </div> </div> </div> </div> <!-- Notifications Tab --> <div class="tab-content" id="notifications"> <div class="notification-item unread"> <div class="feed-avatar">C</div> <div class="feed-content"> <div class="feed-header"> <div class="feed-name">Content Calendar</div> <div class="feed-time">Just now</div> </div> <div class="feed-message">Reminder: Your scheduled post "7 Ways to Increase Audience Engagement" is set to publish in 30 minutes.</div> </div> </div> <div class="notification-item unread"> <div class="feed-avatar">M</div> <div class="feed-content"> <div class="feed-header"> <div class="feed-name">Mention Alert</div> <div class="feed-time">15m ago</div> </div> <div class="feed-message">@TechInfluencer mentioned you in a post about emerging social media analytics tools.</div> </div> </div> <div class="notification-item"> <div class="feed-avatar">A</div> <div class="feed-content"> <div class="feed-header"> <div class="feed-name">Audience Insights</div> <div class="feed-time">2h ago</div> </div> <div class="feed-message">Your follower demographics report for June is ready to view. Notable increase in 25-34 age segment.</div> </div> </div> <div class="notification-item unread"> <div class="feed-avatar">S</div> <div class="feed-content"> <div class="feed-header"> <div class="feed-name">Security Alert</div> <div class="feed-time">3h ago</div> </div> <div class="feed-message">Unusual login detected from Sydney, Australia. Was this you? Please verify your account security.</div> </div> </div> </div> <!-- Messages Tab --> <div class="tab-content" id="messages"> <div class="notification-item"> <div class="feed-avatar">J</div> <div class="feed-content"> <div class="feed-header"> <div class="feed-name">Jamie from Collab Network</div> <div class="feed-time">22m ago</div> </div> <div class="feed-message">Hi there! I loved your recent campaign for EcoTech. We're looking for creators like you for an upcoming sustainability project. Are you available for a quick chat this week?</div> </div> </div> <div class="notification-item"> <div class="feed-avatar">A</div> <div class="feed-content"> <div class="feed-header"> <div class="feed-name">Analytics Support</div> <div class="feed-time">1h ago</div> </div> <div class="feed-message">I've reviewed your account and identified why your reach metrics dropped last week. It appears to be related to the hashtag clusters you're using. Let me know when you can discuss some recommendations.</div> </div> </div> <div class="notification-item"> <div class="feed-avatar">M</div> <div class="feed-content"> <div class="feed-header"> <div class="feed-name">Marketplace Team</div> <div class="feed-time">5h ago</div> </div> <div class="feed-message">Your application to join our verified creators program has been approved! You now have access to exclusive monetization features and brand partnership opportunities.</div> </div> </div> </div> <!-- Analytics Tab --> <div class="tab-content" id="analytics"> <div class="stats-row"> <div class="stat-card"> <div class="stat-title">Total Followers</div> <div class="stat-value">12.4K</div> <div class="stat-trend trend-up"> <span>↑</span> 342 this month </div> </div> <div class="stat-card"> <div class="stat-title">Avg. Engagement</div> <div class="stat-value">8.3%</div> <div class="stat-trend trend-up"> <span>↑</span> 1.2% from last month </div> </div> <div class="stat-card"> <div class="stat-title">Content Performance</div> <div class="stat-value">A+</div> <div class="stat-trend trend-up"> <span>↑</span> From A last week </div> </div> </div> <h3>Top Performing Content</h3> <div class="feed-item"> <div class="feed-avatar">📊</div> <div class="feed-content"> <div class="feed-header"> <div class="feed-name">Video Tutorial: Social Analytics Explained</div> <div class="feed-time">Posted 3 days ago</div> </div> <div class="feed-message">4,521 views • 2,103 engagements • 347 shares • 8.9% conversion rate</div> </div> </div> <div class="feed-item"> <div class="feed-avatar">📊</div> <div class="feed-content"> <div class="feed-header"> <div class="feed-name">Case Study: Viral Campaign Breakdown</div> <div class="feed-time">Posted 1 week ago</div> </div> <div class="feed-message">3,872 views • 1,925 engagements • 289 shares • 7.5% conversion rate</div> </div> </div> </div> <!-- Settings Tab --> <div class="tab-content" id="settings"> <h3>Notification Preferences</h3> <div class="notification-item"> <div class="feed-avatar">🔔</div> <div class="feed-content"> <div class="feed-header"> <div class="feed-name">Real-time Analytics Alerts</div> </div> <div class="feed-message">Get instant notifications when your content performance changes significantly or when you reach engagement milestones.</div> </div> </div> <div class="notification-item"> <div class="feed-avatar">🔔</div> <div class="feed-content"> <div class="feed-header"> <div class="feed-name">Scheduled Post Reminders</div> </div> <div class="feed-message">Receive notifications 30 minutes before your scheduled content is set to publish.</div> </div> </div> <div class="notification-item"> <div class="feed-avatar">🔔</div> <div class="feed-content"> <div class="feed-header"> <div class="feed-name">Comment & Mention Alerts</div> </div> <div class="feed-message">Get notified when someone comments on your content or mentions your account across platforms.</div> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const menuItems = document.querySelectorAll('.menu-item'); const tabContents = document.querySelectorAll('.tab-content'); const indicator = document.querySelector('.indicator'); // Function to position the indicator function positionIndicator(item) { const rect = item.getBoundingClientRect(); const navRect = document.querySelector('.nav-menu').getBoundingClientRect(); indicator.style.width = `${rect.width}px`; indicator.style.left = `${rect.left - navRect.left}px`; } // Initialize indicator position positionIndicator(document.querySelector('.menu-item.active')); // Tab switching functionality menuItems.forEach(item => { item.addEventListener('click', function() { // Remove active class from all menu items and tabs menuItems.forEach(i => i.classList.remove('active')); tabContents.forEach(t => t.classList.remove('active')); // Add active class to clicked item this.classList.add('active'); // Show corresponding tab content const tabId = this.dataset.tab; document.getElementById(tabId).classList.add('active'); // Position indicator positionIndicator(this); }); // Add hover animations item.addEventListener('mouseenter', function() { if (!this.classList.contains('active')) { this.style.transform = 'scale(1.05)'; } }); item.addEventListener('mouseleave', function() { if (!this.classList.contains('active')) { this.style.transform = 'scale(1)'; } }); }); // Handle window resize window.addEventListener('resize', function() { positionIndicator(document.querySelector('.menu-item.active')); }); // Simulate real-time updates setInterval(function() { const feedItems = document.querySelectorAll('.feed-item'); const randomIndex = Math.floor(Math.random() * feedItems.length); // Add a live update animation to a random feed item feedItems[randomIndex].classList.add('live-update'); // Update a random engagement number const actions = feedItems[randomIndex].querySelectorAll('.feed-action span:not(.icon)'); if (actions.length > 0) { const randomAction = Math.floor(Math.random() * actions.length); const currentValue = parseInt(actions[randomAction].textContent) || 0; actions[randomAction].textContent = currentValue + Math.floor(Math.random() * 5) + 1; } // Remove animation class after animation completes setTimeout(function() { feedItems[randomIndex].classList.remove('live-update'); }, 1500); }, 8000); // Simulate notification badge updates let notificationCount = 3; const badge = document.querySelector('.badge'); document.querySelector('.notification-badge').addEventListener('click', function() { // Switch to notifications tab menuItems.forEach(i => i.classList.remove('active')); tabContents.forEach(t => t.classList.remove('active')); const notificationsTab = document.querySelector('[data-tab="notifications"]'); notificationsTab.classList.add('active'); document.getElementById('notifications').classList.add('active'); positionIndicator(notificationsTab); // Reset notification count notificationCount = 0; badge.textContent = notificationCount; badge.style.display = 'none'; }); // Simulate new notifications arriving setInterval(function() { notificationCount++; badge.textContent = notificationCount; badge.style.display = 'flex'; // Add a new notification at the top if (notificationCount % 3 === 0) { const notificationsTab = document.getElementById('notifications'); const newNotification = document.createElement('div'); newNotification.className = 'notification-item unread'; newNotification.innerHTML = ` <div class="feed-avatar">N</div> <div class="feed-content"> <div class="feed-header"> <div class="feed-name">New Follower Alert</div> <div class="feed-time">Just now</div> </div> <div class="feed-message">@DigitalCreator${Math.floor(Math.random() * 1000)} just followed you! They have 3.2K followers in your niche.</div> </div> `; // Insert at the top notificationsTab.insertBefore(newNotification, notificationsTab.firstChild); // Apply animation newNotification.classList.add('live-update'); setTimeout(function() { newNotification.classList.remove('live-update'); }, 1500); } }, 20000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Event Ticketing Menu</title> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); :root { --primary: #ff3366; --secondary: #3a7bd5; --tertiary: #ffc045; --dark: #1e1e2e; --light: #f8f9fa; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; background-color: var(--light); color: var(--dark); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-height: 100vh; padding: 20px; overflow-x: hidden; } .container { width: 100%; max-width: 700px; padding: 10px; } .header { text-align: center; margin-bottom: 25px; position: relative; } .header h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 10px; background: linear-gradient(45deg, var(--primary), var(--secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; position: relative; display: inline-block; } .header p { font-size: 1rem; color: #555; max-width: 600px; margin: 0 auto; } .event-menu { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 10px; padding: 10px 0; position: relative; -ms-overflow-style: none; scrollbar-width: none; margin-bottom: 20px; } .event-menu::-webkit-scrollbar { display: none; } .menu-item { flex: 0 0 auto; padding: 12px 24px; background-color: #fff; border-radius: 50px; font-weight: 500; cursor: pointer; position: relative; overflow: hidden; transition: var(--transition); white-space: nowrap; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border: 2px solid transparent; z-index: 1; color: var(--dark); } .menu-item:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, var(--primary), var(--secondary)); z-index: -1; transform: scaleX(0); transform-origin: right; transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .menu-item:hover { color: white; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .menu-item:hover:before { transform: scaleX(1); transform-origin: left; } .menu-item.active { background: linear-gradient(45deg, var(--primary), var(--secondary)); color: white; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transform: translateY(-2px); } .events-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-top: 20px; } .event-card { background-color: white; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.05); transition: var(--transition); position: relative; height: 280px; } .event-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); } .event-card:hover .event-image img { transform: scale(1.1); } .event-card:hover .event-date { background: linear-gradient(45deg, var(--primary), var(--secondary)); } .event-image { height: 150px; overflow: hidden; } .event-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .event-date { position: absolute; top: 10px; right: 10px; background-color: var(--primary); color: white; padding: 5px 10px; border-radius: 8px; font-size: 0.8rem; font-weight: 600; transition: var(--transition); } .event-info { padding: 15px; } .event-title { font-size: 1rem; font-weight: 600; margin-bottom: 5px; color: var(--dark); line-height: 1.4; } .event-location { font-size: 0.8rem; color: #777; margin-bottom: 10px; display: flex; align-items: center; } .location-icon { margin-right: 5px; color: var(--primary); } .event-price { display: flex; align-items: center; justify-content: space-between; } .price { font-weight: 600; color: var(--secondary); } .book-btn { padding: 5px 12px; background: linear-gradient(45deg, var(--secondary), var(--primary)); color: white; border: none; border-radius: 5px; font-weight: 500; cursor: pointer; transition: var(--transition); font-size: 0.8rem; } .book-btn:hover { transform: scale(1.05); box-shadow: 0 5px 10px rgba(0,0,0,0.1); } .scroll-indicator { display: flex; justify-content: center; margin-top: 10px; } .dot { width: 8px; height: 8px; border-radius: 50%; background-color: #ddd; margin: 0 5px; transition: var(--transition); } .dot.active { background-color: var(--primary); transform: scale(1.3); } .menu-scroll-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background-color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.1); cursor: pointer; z-index: 10; border: none; transition: var(--transition); } .menu-scroll-btn:hover { background-color: var(--primary); color: white; } .menu-scroll-left { left: 0; } .menu-scroll-right { right: 0; } @media (max-width: 600px) { .header h1 { font-size: 2rem; } .events-container { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .event-card { height: 260px; } } /* Animation keyframes */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse { animation: pulse 2s infinite; } /* Filter indicator */ .filter-count { display: inline-block; background-color: var(--tertiary); color: var(--dark); border-radius: 50%; width: 22px; height: 22px; font-size: 0.7rem; line-height: 22px; text-align: center; margin-left: 8px; font-weight: bold; } /* Backdrop blur for menu */ .event-menu-container { position: relative; width: 100%; padding: 0 5px; } .menu-gradient-left, .menu-gradient-right { position: absolute; top: 0; width: 50px; height: 100%; pointer-events: none; z-index: 5; } .menu-gradient-left { left: 0; background: linear-gradient(to right, var(--light) 0%, rgba(248, 249, 250, 0) 100%); } .menu-gradient-right { right: 0; background: linear-gradient(to left, var(--light) 0%, rgba(248, 249, 250, 0) 100%); } /* Shimmer effect for featured event */ .featured-event { position: relative; overflow: hidden; border-radius: 15px; margin-bottom: 20px; padding: 20px; color: white; height: 150px; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(45deg, #3a7bd5, #ff3366); } .featured-event::before { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent); transform: skewX(-25deg); animation: shimmer 2.5s infinite; } @keyframes shimmer { 100% { left: 200%; } } .featured-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 5px; z-index: 1; } .featured-subtitle { font-size: 0.9rem; margin-bottom: 15px; z-index: 1; } .featured-cta { display: inline-block; background-color: white; color: var(--secondary); padding: 8px 15px; border-radius: 5px; font-weight: 600; font-size: 0.9rem; transition: var(--transition); cursor: pointer; z-index: 1; align-self: flex-start; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .featured-cta:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 8px 20px rgba(0,0,0,0.15); } </style> </head> <body> <div class="container"> <div class="header"> <h1>EventPulse</h1> <p>Discover and book tickets for the most exciting events happening around you</p> </div> <div class="featured-event"> <div class="featured-title">COLDPLAY: Music of the Spheres</div> <div class="featured-subtitle">World Tour 2023 • Final Tickets Available</div> <div class="featured-cta">Get VIP Access</div> </div> <div class="event-menu-container"> <div class="menu-gradient-left"></div> <div class="event-menu" id="eventMenu"> <div class="menu-item active" data-category="all">All Events</div> <div class="menu-item" data-category="concerts">Concerts <span class="filter-count">8</span></div> <div class="menu-item" data-category="festivals">Festivals <span class="filter-count">5</span></div> <div class="menu-item" data-category="theater">Theater <span class="filter-count">6</span></div> <div class="menu-item" data-category="comedy">Comedy <span class="filter-count">4</span></div> <div class="menu-item" data-category="sports">Sports <span class="filter-count">7</span></div> <div class="menu-item" data-category="arts">Arts & Culture <span class="filter-count">3</span></div> <div class="menu-item" data-category="family">Family <span class="filter-count">5</span></div> </div> <div class="menu-gradient-right"></div> <button class="menu-scroll-btn menu-scroll-left" id="scrollLeft">❮</button> <button class="menu-scroll-btn menu-scroll-right" id="scrollRight">❯</button> </div> <div class="scroll-indicator" id="scrollIndicator"> <!-- Dots will be added dynamically --> </div> <div class="events-container" id="eventsContainer"> <div class="event-card" data-category="concerts"> <div class="event-image"> <img src="https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Taylor Swift concert"> </div> <div class="event-date">Nov 12</div> <div class="event-info"> <div class="event-title">Taylor Swift: Eras Tour</div> <div class="event-location"> <span class="location-icon">📍</span>Madison Square Garden </div> <div class="event-price"> <span class="price">$89.99</span> <button class="book-btn">Book Now</button> </div> </div> </div> <div class="event-card" data-category="theater"> <div class="event-image"> <img src="https://images.unsplash.com/photo-1460723237483-7a6dc9d0b212?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Hamilton musical"> </div> <div class="event-date">Nov 18</div> <div class="event-info"> <div class="event-title">Hamilton: The Musical</div> <div class="event-location"> <span class="location-icon">📍</span>Richard Rodgers Theatre </div> <div class="event-price"> <span class="price">$199.00</span> <button class="book-btn">Book Now</button> </div> </div> </div> <div class="event-card" data-category="festivals"> <div class="event-image"> <img src="https://images.unsplash.com/photo-1506157786151-b8491531f063?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Electric Daisy Carnival"> </div> <div class="event-date">Dec 1-3</div> <div class="event-info"> <div class="event-title">Electric Daisy Carnival</div> <div class="event-location"> <span class="location-icon">📍</span>Las Vegas Motor Speedway </div> <div class="event-price"> <span class="price">$349.00</span> <button class="book-btn">Book Now</button> </div> </div> </div> <div class="event-card" data-category="comedy"> <div class="event-image"> <img src="https://images.unsplash.com/photo-1620476214170-1d8080f65cdb?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Dave Chappelle"> </div> <div class="event-date">Nov 15</div> <div class="event-info"> <div class="event-title">Dave Chappelle Live</div> <div class="event-location"> <span class="location-icon">📍</span>Comedy Store LA </div> <div class="event-price"> <span class="price">$79.50</span> <button class="book-btn">Book Now</button> </div> </div> </div> <div class="event-card" data-category="sports"> <div class="event-image"> <img src="https://images.unsplash.com/photo-1530549387789-4c1017266635?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="NBA Game"> </div> <div class="event-date">Nov 20</div> <div class="event-info"> <div class="event-title">Lakers vs. Warriors</div> <div class="event-location"> <span class="location-icon">📍</span>Crypto.com Arena </div> <div class="event-price"> <span class="price">$125.00</span> <button class="book-btn">Book Now</button> </div> </div> </div> <div class="event-card" data-category="arts"> <div class="event-image"> <img src="https://images.unsplash.com/photo-1516450360452-9312f5463805?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Art Exhibition"> </div> <div class="event-date">Nov 25-30</div> <div class="event-info"> <div class="event-title">Modern Art Exhibition</div> <div class="event-location"> <span class="location-icon">📍</span>MoMA </div> <div class="event-price"> <span class="price">$24.50</span> <button class="book-btn">Book Now</button> </div> </div> </div> <div class="event-card" data-category="family"> <div class="event-image"> <img src="https://images.unsplash.com/photo-1560169897-fc0cdbdfa4d5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Disney on Ice"> </div> <div class="event-date">Dec 10</div> <div class="event-info"> <div class="event-title">Disney On Ice: Frozen</div> <div class="event-location"> <span class="location-icon">📍</span>Barclays Center </div> <div class="event-price"> <span class="price">$59.99</span> <button class="book-btn">Book Now</button> </div> </div> </div> <div class="event-card" data-category="concerts"> <div class="event-image"> <img src="https://images.unsplash.com/photo-1524368535928-5b5e00ddc76b?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="The Weeknd"> </div> <div class="event-date">Dec 5</div> <div class="event-info"> <div class="event-title">The Weeknd: After Hours</div> <div class="event-location"> <span class="location-icon">📍</span>Allegiant Stadium </div> <div class="event-price"> <span class="price">$109.50</span> <button class="book-btn">Book Now</button> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Menu scrolling const eventMenu = document.getElementById('eventMenu'); const scrollLeftBtn = document.getElementById('scrollLeft'); const scrollRightBtn = document.getElementById('scrollRight'); const scrollIndicator = document.getElementById('scrollIndicator'); // Category filtering const menuItems = document.querySelectorAll('.menu-item'); const eventCards = document.querySelectorAll('.event-card'); // Initialize active menu item let activeMenuItem = document.querySelector('.menu-item.active'); // Menu scroll buttons event handlers scrollLeftBtn.addEventListener('click', () => { eventMenu.scrollBy({ left: -200, behavior: 'smooth' }); }); scrollRightBtn.addEventListener('click', () => { eventMenu.scrollBy({ left: 200, behavior: 'smooth' }); }); // Create scroll indicator dots const calculateDots = () => { const menuWidth = eventMenu.scrollWidth; const containerWidth = eventMenu.clientWidth; const scrollableWidth = menuWidth - containerWidth; if (scrollableWidth <= 0) { scrollIndicator.style.display = 'none'; scrollLeftBtn.style.display = 'none'; scrollRightBtn.style.display = 'none'; return; } // Clear existing dots scrollIndicator.innerHTML = ''; // Calculate number of dots needed const numDots = Math.ceil(scrollableWidth / (containerWidth * 0.8)) + 1; for (let i = 0; i < numDots; i++) { const dot = document.createElement('div'); dot.classList.add('dot'); if (i === 0) dot.classList.add('active'); scrollIndicator.appendChild(dot); } }; calculateDots(); // Update active dot on scroll eventMenu.addEventListener('scroll', () => { const scrollPosition = eventMenu.scrollLeft; const maxScroll = eventMenu.scrollWidth - eventMenu.clientWidth; const scrollPercentage = scrollPosition / maxScroll; const dots = document.querySelectorAll('.dot'); if (dots.length <= 1) return; const activeDotIndex = Math.min( Math.floor(scrollPercentage * dots.length), dots.length - 1 ); dots.forEach((dot, index) => { dot.classList.toggle('active', index === activeDotIndex); }); }); // Handle window resize window.addEventListener('resize', calculateDots); // Category filter functionality menuItems.forEach(item => { item.addEventListener('click', () => { // Update active class activeMenuItem.classList.remove('active'); item.classList.add('active'); activeMenuItem = item; const category = item.getAttribute('data-category'); // Filter events eventCards.forEach(card => { if (category === 'all' || card.getAttribute('data-category') === category) { card.style.display = 'block'; // Add animation for appearing cards card.style.animation = 'pulse 0.5s'; setTimeout(() => { card.style.animation = ''; }, 500); } else { card.style.display = 'none'; } }); }); }); // Button hover effects const buttons = document.querySelectorAll('.book-btn, .featured-cta'); buttons.forEach(button => { button.addEventListener('mouseover', function() { this.style.transform = 'translateY(-3px) scale(1.05)'; this.style.boxShadow = '0 8px 20px rgba(0,0,0,0.15)'; }); button.addEventListener('mouseout', function() { this.style.transform = ''; this.style.boxShadow = ''; }); // Prevent default behavior to ensure no page redirects button.addEventListener('click', function(e) { e.preventDefault(); // Custom animation on click this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = ''; }, 100); }); }); // Initialize category counts function updateCategoryCounts() { const categories = {}; // Count events per category eventCards.forEach(card => { const category = card.getAttribute('data-category'); categories[category] = (categories[category] || 0) + 1; }); // Update counts in the menu menuItems.forEach(item => { const category = item.getAttribute('data-category'); if (category !== 'all') { const countSpan = item.querySelector('.filter-count'); if (countSpan) { countSpan.textContent = categories[category] || 0; } } }); } updateCategoryCounts(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Portfolio Menu</title> <style> @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Outfit:wght@300;400;500;600&display=swap'); :root { --bg-color: #0a0a0a; --text-color: #f2f2f2; --accent-color: #FF5470; --secondary-color: #61E8E1; --tertiary-color: #F8CD65; --transition-speed: 0.3s; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Outfit', sans-serif; background-color: var(--bg-color); color: var(--text-color); height: 100vh; overflow: hidden; display: flex; flex-direction: column; } .cursor-follower { position: fixed; width: 30px; height: 30px; background-color: rgba(255, 84, 112, 0.5); border-radius: 50%; pointer-events: none; z-index: 9999; mix-blend-mode: difference; transform: translate(-50%, -50%); transition: transform 0.1s ease, width 0.3s ease, height 0.3s ease; } .menu-container { display: flex; flex-direction: column; width: 100%; max-width: 700px; margin: 0 auto; height: 100%; } header { display: flex; justify-content: space-between; align-items: center; padding: 2rem 1rem; } .logo { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; letter-spacing: 1px; position: relative; z-index: 10; } .logo::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--accent-color); transition: width var(--transition-speed) ease; } .logo:hover::after { width: 100%; } .toggle-btn { background: none; border: none; color: var(--text-color); font-size: 1.2rem; cursor: pointer; z-index: 10; transition: transform var(--transition-speed) ease; } .toggle-btn:hover { transform: scale(1.1); } .menu-wrap { position: relative; flex-grow: 1; overflow: hidden; } .primary-menu { display: flex; position: absolute; width: 100%; height: 100%; transform: translateX(0); transition: transform var(--transition-speed) ease; } .menu-active .primary-menu { transform: translateX(-100%); } .menu-item { flex: 1; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; cursor: pointer; transition: flex 0.5s ease; } .menu-item:hover { flex: 1.5; } .menu-item .item-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0.3; transition: opacity var(--transition-speed) ease, transform 0.5s ease; z-index: 1; } .menu-item:hover .item-bg { opacity: 0.5; transform: scale(1.05); } .menu-item h2 { font-family: 'Bebas Neue', sans-serif; font-size: 2.5rem; color: var(--text-color); z-index: 2; transform: translateY(20px); opacity: 0; transition: transform var(--transition-speed) ease, opacity var(--transition-speed) ease; position: relative; } .menu-item h2::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 0; height: 3px; background-color: currentColor; transition: width var(--transition-speed) ease; } .menu-item:hover h2::after { width: 100%; } .menu-item:nth-child(1) { color: var(--accent-color); } .menu-item:nth-child(2) { color: var(--secondary-color); } .menu-item:nth-child(3) { color: var(--tertiary-color); } .menu-item:nth-child(4) { color: #A18AFF; } .menu-items-appear .menu-item h2 { opacity: 1; transform: translateY(0); } .menu-item:nth-child(1) h2 { transition-delay: 0.1s; } .menu-item:nth-child(2) h2 { transition-delay: 0.2s; } .menu-item:nth-child(3) h2 { transition-delay: 0.3s; } .menu-item:nth-child(4) h2 { transition-delay: 0.4s; } .secondary-menu { position: absolute; top: 0; right: -100%; width: 100%; height: 100%; display: flex; flex-direction: column; transition: right var(--transition-speed) ease; padding: 2rem; } .menu-active .secondary-menu { right: 0; } .secondary-menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } .secondary-menu-header h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.8rem; letter-spacing: 1px; } .secondary-menu-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 1rem; } .secondary-item { display: flex; flex-direction: column; padding: 1rem; border-radius: 8px; background-color: rgba(255, 255, 255, 0.05); transition: transform var(--transition-speed) ease, background-color var(--transition-speed) ease; cursor: pointer; overflow: hidden; position: relative; } .secondary-item:hover { transform: translateY(-5px); background-color: rgba(255, 255, 255, 0.1); } .secondary-item::before { content: ''; position: absolute; top: -10px; left: -10px; width: 30px; height: 30px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); transform: scale(0); transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .secondary-item:hover::before { transform: scale(10); opacity: 0; } .secondary-item h4 { font-size: 1.1rem; margin-bottom: 0.5rem; position: relative; z-index: 2; } .secondary-item p { font-size: 0.9rem; opacity: 0.7; line-height: 1.4; position: relative; z-index: 2; } .back-btn { background: none; border: none; color: var(--text-color); font-size: 1rem; cursor: pointer; display: flex; align-items: center; padding: 0.5rem 0; opacity: 0.7; transition: opacity var(--transition-speed) ease; } .back-btn:hover { opacity: 1; } .back-btn span { margin-right: 0.5rem; } .footer { padding: 1.5rem 1rem; display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; } .social-links { display: flex; gap: 1rem; } .social-links a { color: var(--text-color); text-decoration: none; transition: color var(--transition-speed) ease; } .social-links a:hover { color: var(--accent-color); } @media (max-width: 600px) { .primary-menu { flex-direction: column; } .menu-item h2 { font-size: 2rem; } .secondary-menu-items { grid-template-columns: 1fr; } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 84, 112, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(255, 84, 112, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 84, 112, 0); } } .menu-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; transition: opacity 0.3s ease; } .menu-active .menu-indicator { opacity: 0; } .menu-indicator span { width: 8px; height: 8px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.3); transition: background-color 0.3s ease, transform 0.3s ease; } .menu-indicator span.active { background-color: var(--text-color); transform: scale(1.3); } </style> </head> <body> <div class="cursor-follower"></div> <div class="menu-container"> <header> <div class="logo">JULIAN REEF</div> <button class="toggle-btn" id="toggleMenu"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3 12H21M3 6H21M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> </header> <div class="menu-wrap"> <div class="primary-menu"> <div class="menu-item" data-category="projects"> <div class="item-bg" style="background-image: url('https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');"></div> <h2>PROJECTS</h2> </div> <div class="menu-item" data-category="about"> <div class="item-bg" style="background-image: url('https://images.unsplash.com/photo-1543857778-c4a1a3e0b2eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');"></div> <h2>ABOUT</h2> </div> <div class="menu-item" data-category="services"> <div class="item-bg" style="background-image: url('https://images.unsplash.com/photo-1565688534245-05968d0cc801?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');"></div> <h2>SERVICES</h2> </div> <div class="menu-item" data-category="contact"> <div class="item-bg" style="background-image: url('https://images.unsplash.com/photo-1596524430615-b46475ddff6e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');"></div> <h2>CONTACT</h2> </div> </div> <div class="secondary-menu" id="projectsMenu"> <div class="secondary-menu-header"> <h3>PROJECTS</h3> <button class="back-btn" data-menu="projects"> <span>←</span> Back </button> </div> <div class="secondary-menu-items"> <div class="secondary-item"> <h4>Vertex Architecture</h4> <p>Innovative building visualization using parametric design systems for a downtown skyline revitalization.</p> </div> <div class="secondary-item"> <h4>Neon Horizon Brand</h4> <p>Full identity system for a boutique tech startup focused on ambient computing solutions.</p> </div> <div class="secondary-item"> <h4>Lunar Photography</h4> <p>Experimental light painting series exploring urban landscapes through long exposure techniques.</p> </div> <div class="secondary-item"> <h4>Kinetic Typography</h4> <p>Interactive motion design exploring the relationship between sound and visual rhythm.</p> </div> </div> </div> <div class="secondary-menu" id="aboutMenu"> <div class="secondary-menu-header"> <h3>ABOUT</h3> <button class="back-btn" data-menu="about"> <span>←</span> Back </button> </div> <div class="secondary-menu-items"> <div class="secondary-item"> <h4>Background</h4> <p>Designer and creative technologist with 8+ years of experience crafting digital experiences that blend aesthetics with functionality.</p> </div> <div class="secondary-item"> <h4>Approach</h4> <p>Balancing minimalist principles with bold experimentation to create memorable and intuitive user experiences.</p> </div> <div class="secondary-item"> <h4>Education</h4> <p>MFA in Interaction Design from Parsons School of Design with specialized studies in motion and spatial computing.</p> </div> <div class="secondary-item"> <h4>Recognition</h4> <p>Featured in Communication Arts, Awwwards, and recipient of the 2023 Design Innovation Fellowship.</p> </div> </div> </div> <div class="secondary-menu" id="servicesMenu"> <div class="secondary-menu-header"> <h3>SERVICES</h3> <button class="back-btn" data-menu="services"> <span>←</span> Back </button> </div> <div class="secondary-menu-items"> <div class="secondary-item"> <h4>Brand Identity</h4> <p>Comprehensive visual systems built from strategic foundations that create memorable, cohesive brand experiences.</p> </div> <div class="secondary-item"> <h4>Interface Design</h4> <p>Intuitive, research-driven UX/UI solutions for products that prioritize user needs while meeting business objectives.</p> </div> <div class="secondary-item"> <h4>Motion Design</h4> <p>Custom animations and transitions that enhance storytelling and bring interfaces to life with purpose and clarity.</p> </div> <div class="secondary-item"> <h4>Creative Development</h4> <p>Front-end implementation with a focus on performance and creative code that pushes beyond standard interactions.</p> </div> </div> </div> <div class="secondary-menu" id="contactMenu"> <div class="secondary-menu-header"> <h3>CONTACT</h3> <button class="back-btn" data-menu="contact"> <span>←</span> Back </button> </div> <div class="secondary-menu-items"> <div class="secondary-item"> <h4>Email</h4> <p>[email protected]</p> </div> <div class="secondary-item"> <h4>Location</h4> <p>Brooklyn, NY — Available for remote and on-site collaboration worldwide</p> </div> <div class="secondary-item"> <h4>Schedule</h4> <p>Currently booking projects starting from September 2023</p> </div> <div class="secondary-item"> <h4>Availability</h4> <p>Initial consultation calls available Tuesdays and Thursdays, 10am-2pm EST</p> </div> </div> </div> <div class="menu-indicator"> <span class="active"></span> <span></span> <span></span> <span></span> </div> </div> <div class="footer"> <div>© 2023 Julian Reef</div> <div class="social-links"> <a href="#" class="social-link">Dr</a> <a href="#" class="social-link">Tw</a> <a href="#" class="social-link">In</a> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const menuContainer = document.querySelector('.menu-container'); const toggleBtn = document.getElementById('toggleMenu'); const menuItems = document.querySelectorAll('.menu-item'); const backBtns = document.querySelectorAll('.back-btn'); const cursorFollower = document.querySelector('.cursor-follower'); const menuIndicatorDots = document.querySelectorAll('.menu-indicator span'); // Initialize menu setTimeout(() => { document.querySelector('.primary-menu').classList.add('menu-items-appear'); }, 100); // Toggle menu toggleBtn.addEventListener('click', function() { menuContainer.classList.toggle('menu-active'); // Update toggle icon based on menu state if (menuContainer.classList.contains('menu-active')) { this.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'; } else { this.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 12H21M3 6H21M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'; } }); // Menu item click menuItems.forEach((item, index) => { item.addEventListener('click', function() { const category = this.getAttribute('data-category'); menuContainer.classList.add('menu-active'); toggleBtn.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'; // Update menu indicator menuIndicatorDots.forEach((dot, i) => { dot.classList.toggle('active', i === index); }); }); }); // Back button backBtns.forEach(btn => { btn.addEventListener('click', function(e) { e.preventDefault(); menuContainer.classList.remove('menu-active'); toggleBtn.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 12H21M3 6H21M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'; }); }); // Custom cursor follower document.addEventListener('mousemove', function(e) { requestAnimationFrame(() => { cursorFollower.style.left = e.clientX + 'px'; cursorFollower.style.top = e.clientY + 'px'; }); }); document.addEventListener('mousedown', function() { cursorFollower.style.transform = 'translate(-50%, -50%) scale(0.8)'; }); document.addEventListener('mouseup', function() { cursorFollower.style.transform = 'translate(-50%, -50%) scale(1)'; }); // Hover effects for links and buttons const interactiveElements = document.querySelectorAll('a, button, .menu-item, .secondary-item'); interactiveElements.forEach(el => { el.addEventListener('mouseenter', function() { cursorFollower.style.width = '50px'; cursorFollower.style.height = '50px'; cursorFollower.style.mixBlendMode = 'lighten'; }); el.addEventListener('mouseleave', function() { cursorFollower.style.width = '30px'; cursorFollower.style.height = '30px'; cursorFollower.style.mixBlendMode = 'difference'; }); }); // Hide cursor follower on mobile if (window.innerWidth <= 768) { cursorFollower.style.display = 'none'; } }); </script> </body> </html>
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } :root { --primary: #3e63dd; --primary-light: #eef1fc; --secondary: #f97066; --gray-100: #f9fafb; --gray-200: #edf2f7; --gray-300: #e2e8f0; --gray-400: #cbd5e0; --gray-500: #a0aec0; --gray-600: #718096; --gray-700: #4a5568; --gray-800: #2d3748; --gray-900: #1a202c; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } body { background-color: var(--gray-100); height: 700px; width: 700px; display: flex; flex-direction: column; overflow: hidden; } .container { max-width: 700px; margin: 0 auto; padding: 2rem 1.5rem; height: 100%; display: flex; flex-direction: column; } .app-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .app-logo { display: flex; align-items: center; gap: 0.75rem; } .logo-icon { width: 32px; height: 32px; background: linear-gradient(135deg, var(--primary), #7785FF); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; } .logo-text { font-size: 1.25rem; font-weight: 600; color: var(--gray-900); } .user-menu { display: flex; align-items: center; gap: 1rem; } .user-avatar { width: 36px; height: 36px; border-radius: 50%; background-color: var(--primary-light); display: flex; align-items: center; justify-content: center; color: var(--primary); font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s ease; } .user-avatar:hover { transform: scale(1.05); box-shadow: var(--shadow-md); } .notification-badge { position: relative; cursor: pointer; } .notification-badge .badge { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; background-color: var(--secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 10px; font-weight: 600; } .nav-container { position: relative; margin-bottom: 2rem; } .horizontal-menu { display: flex; overflow-x: auto; gap: 0.5rem; padding: 0.25rem; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; position: relative; } .horizontal-menu::-webkit-scrollbar { display: none; } .menu-card { flex: 0 0 auto; min-width: 120px; background: white; border-radius: 12px; padding: 1rem; box-shadow: var(--shadow-sm); cursor: pointer; transition: all 0.3s ease; position: relative; border: 1px solid var(--gray-200); } .menu-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background-color: var(--primary-light); border-color: var(--primary); } .menu-card.active { background-color: var(--primary); color: white; border-color: var(--primary); } .menu-card.active:after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid var(--primary); } .card-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; margin-bottom: 0.75rem; background-color: var(--primary-light); color: var(--primary); transition: all 0.3s ease; } .menu-card.active .card-icon { background-color: rgba(255, 255, 255, 0.2); color: white; } .card-title { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.25rem; } .card-description { font-size: 0.75rem; color: var(--gray-600); line-height: 1.2; } .menu-card.active .card-description { color: rgba(255, 255, 255, 0.8); } .scroll-button { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background-color: white; box-shadow: var(--shadow-md); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10; transition: all 0.2s ease; color: var(--gray-700); } .scroll-button:hover { background-color: var(--primary-light); color: var(--primary); } .scroll-left { left: -8px; } .scroll-right { right: -8px; } .content-area { background-color: white; border-radius: 16px; padding: 1.5rem; box-shadow: var(--shadow); flex-grow: 1; overflow-y: auto; } .content-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .content-title { font-size: 1.25rem; font-weight: 600; color: var(--gray-900); } .analytics-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; } .metric-card { background-color: var(--gray-100); border-radius: 12px; padding: 1rem; transition: all 0.3s ease; } .metric-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .metric-label { font-size: 0.75rem; font-weight: 500; color: var(--gray-600); margin-bottom: 0.5rem; } .metric-value { font-size: 1.5rem; font-weight: 700; color: var(--gray-900); } .metric-trend { font-size: 0.75rem; margin-top: 0.25rem; } .trend-up { color: #38a169; } .trend-down { color: var(--secondary); } .chart-container { height: 200px; margin-bottom: 1.5rem; position: relative; background-color: var(--gray-100); border-radius: 12px; padding: 1rem; } .chart-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; color: var(--gray-600); text-align: center; padding: 1rem; } .action-button { padding: 0.5rem 1rem; border-radius: 8px; font-weight: 500; font-size: 0.875rem; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 0.5rem; } .primary-button { background-color: var(--primary); color: white; border: none; } .primary-button:hover { background-color: #2a4fb9; box-shadow: var(--shadow-md); } .outline-button { background-color: transparent; color: var(--gray-700); border: 1px solid var(--gray-300); } .outline-button:hover { background-color: var(--gray-100); border-color: var(--gray-400); } .no-data-message { text-align: center; padding: 2rem; color: var(--gray-600); } @media (max-width: 600px) { .container { padding: 1rem; } .analytics-overview { grid-template-columns: repeat(2, 1fr); } .menu-card { min-width: 100px; padding: 0.75rem; } .card-title { font-size: 0.8rem; } .card-description { display: none; } } /* Pulse animation for notifications */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .notification-badge .badge { animation: pulse 2s infinite; } /* Shimmer effect for loading state */ .shimmer { background: linear-gradient( 90deg, var(--gray-200) 0%, var(--gray-100) 50%, var(--gray-200) 100% ); background-size: 200% 100%; animation: shimmer 2s infinite; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Progress indicator for active section */ .progress-indicator { height: 3px; background-color: var(--gray-200); border-radius: 3px; margin-top: 0.75rem; overflow: hidden; } .progress-bar { height: 100%; width: 30%; background-color: var(--primary); border-radius: 3px; transition: width 0.5s ease; } /* Tooltip */ .tooltip { position: relative; } .tooltip-text { visibility: hidden; width: 120px; background-color: var(--gray-800); color: white; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 1; bottom: 125%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s; font-size: 0.75rem; } .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; } </style> </head> <body> <div class="container"> <header class="app-header"> <div class="app-logo"> <div class="logo-icon">D</div> <div class="logo-text">DataSphere</div> </div> <div class="user-menu"> <div class="notification-badge tooltip"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /> </svg> <span class="badge">3</span> <span class="tooltip-text">3 new notifications</span> </div> <div class="user-avatar">DR</div> </div> </header> <div class="nav-container"> <button class="scroll-button scroll-left" id="scrollLeft"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /> </svg> </button> <div class="horizontal-menu" id="menu"> <div class="menu-card active" data-section="analytics"> <div class="card-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /> </svg> </div> <div class="card-title">Analytics</div> <div class="card-description">Real-time insights</div> </div> <div class="menu-card" data-section="workflows"> <div class="card-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" /> </svg> </div> <div class="card-title">Workflows</div> <div class="card-description">Automate processes</div> </div> <div class="menu-card" data-section="integrations"> <div class="card-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" /> </svg> </div> <div class="card-title">Integrations</div> <div class="card-description">Connect tools</div> </div> <div class="menu-card" data-section="data-models"> <div class="card-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2 1 3 3 3h10c2 0 3-1 3-3V7c0-2-1-3-3-3H7c-2 0-3 1-3 3z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v18m6-18v18" /> </svg> </div> <div class="card-title">Data Models</div> <div class="card-description">Structure your data</div> </div> <div class="menu-card" data-section="team"> <div class="card-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /> </svg> </div> <div class="card-title">Team</div> <div class="card-description">Manage access</div> </div> <div class="menu-card" data-section="settings"> <div class="card-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> </svg> </div> <div class="card-title">Settings</div> <div class="card-description">Configure platform</div> </div> </div> <button class="scroll-button scroll-right" id="scrollRight"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> </svg> </button> </div> <div class="content-area"> <div class="content-header"> <h2 class="content-title">Analytics Dashboard</h2> <button class="action-button primary-button"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" /> </svg> Export Report </button> </div> <div class="analytics-overview"> <div class="metric-card"> <div class="metric-label">Active Users</div> <div class="metric-value">12,458</div> <div class="metric-trend trend-up">+8.2% from last week</div> </div> <div class="metric-card"> <div class="metric-label">Data Processed</div> <div class="metric-value">258 GB</div> <div class="metric-trend trend-up">+12.5% from last week</div> </div> <div class="metric-card"> <div class="metric-label">API Response Time</div> <div class="metric-value">215 ms</div> <div class="metric-trend trend-down">-5.2% from last week</div> </div> </div> <div class="chart-container" id="chart"> <div class="chart-overlay"> Interactive chart showing daily user activities across your workflows. <br><br> <strong>Click a menu item above to switch context.</strong> </div> </div> <div class="progress-indicator"> <div class="progress-bar" id="progressBar"></div> </div> </div> </div> <script> // Horizontal menu scroll functionality const scrollLeftBtn = document.getElementById('scrollLeft'); const scrollRightBtn = document.getElementById('scrollRight'); const menu = document.getElementById('menu'); scrollLeftBtn.addEventListener('click', () => { menu.scrollBy({ left: -200, behavior: 'smooth' }); }); scrollRightBtn.addEventListener('click', () => { menu.scrollBy({ left: 200, behavior: 'smooth' }); }); // Menu card selection const menuCards = document.querySelectorAll('.menu-card'); const contentTitle = document.querySelector('.content-title'); const progressBar = document.getElementById('progressBar'); menuCards.forEach(card => { card.addEventListener('click', () => { // Remove active class from all cards menuCards.forEach(c => c.classList.remove('active')); // Add active class to clicked card card.classList.add('active'); // Update content based on selected section const section = card.getAttribute('data-section'); updateContent(section); // Animate progress bar animateProgressBar(); }); }); function updateContent(section) { // Map section names to display titles const sectionTitles = { 'analytics': 'Analytics Dashboard', 'workflows': 'Workflow Manager', 'integrations': 'Integration Hub', 'data-models': 'Data Model Builder', 'team': 'Team Collaboration', 'settings': 'Platform Settings' }; // Update content title contentTitle.textContent = sectionTitles[section]; // For demo purposes, we'd normally update the content here // This is a simplified example } function animateProgressBar() { // Reset progress bar progressBar.style.width = '0%'; // Animate progress setTimeout(() => { progressBar.style.width = '30%'; }, 100); setTimeout(() => { progressBar.style.width = '60%'; }, 300); setTimeout(() => { progressBar.style.width = '100%'; }, 500); } // Hover effect enhancement menuCards.forEach(card => { card.addEventListener('mouseenter', () => { if (!card.classList.contains('active')) { card.style.transform = 'translateY(-4px) scale(1.03)'; card.style.zIndex = '1'; } }); card.addEventListener('mouseleave', () => { if (!card.classList.contains('active')) { card.style.transform = ''; card.style.zIndex = ''; } }); }); // Initialize animateProgressBar(); // Simulate chart loading effect const chart = document.getElementById('chart'); chart.classList.add('shimmer'); setTimeout(() => { chart.classList.remove('shimmer'); }, 1500); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MediCare+ Healthcare Services</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } :root { --primary: #4D96FF; --primary-light: #6FB1FF; --secondary: #6BCB77; --accent: #FF7F50; --light: #F9F9F9; --medium: #E8F0FE; --dark: #2C3E50; --text: #333333; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } body { background-color: var(--light); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 20px; width: 100%; max-width: 700px; margin: 0 auto; overflow-x: hidden; } .container { width: 100%; max-width: 700px; padding: 20px; } .logo { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; animation: fadeIn 0.8s ease-in-out; } .logo-icon { width: 40px; height: 40px; background-color: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 18px; } .logo-text { font-size: 24px; font-weight: 600; color: var(--dark); } .logo-text span { color: var(--primary); } nav { width: 100%; background: white; border-radius: 16px; padding: 5px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); margin-bottom: 30px; position: relative; overflow: hidden; } .menu { display: flex; list-style: none; position: relative; width: 100%; justify-content: space-between; } .menu-item { position: relative; z-index: 1; flex: 1; } .menu-link { display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; padding: 15px 0; color: var(--text); font-weight: 500; font-size: 16px; position: relative; transition: var(--transition); text-align: center; gap: 8px; } .menu-link .icon { font-size: 22px; transition: var(--transition); color: var(--dark); height: 24px; } .menu-link .text { font-size: 14px; font-weight: 500; transition: var(--transition); letter-spacing: 0.3px; } .menu-item.active .menu-link .icon, .menu-item.active .menu-link .text { color: var(--primary); font-weight: 600; } .menu-item.active .menu-link::after { content: ""; position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; background-color: var(--primary); border-radius: 50%; transition: var(--transition); } .menu-item:hover .menu-link .icon, .menu-item:hover .menu-link .text { color: var(--primary-light); } .menu-item:focus-within .menu-link { outline: 2px solid var(--primary); border-radius: 8px; } .highlight { position: absolute; height: 100%; top: 0; border-radius: 12px; background-color: var(--medium); z-index: 0; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .content { padding: 20px; background-color: white; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); min-height: 300px; transition: var(--transition); opacity: 0; transform: translateY(20px); } .content.active { opacity: 1; transform: translateY(0); } .content h2 { color: var(--primary); margin-bottom: 15px; font-size: 24px; font-weight: 600; display: flex; align-items: center; gap: 10px; } .content h2 .icon { width: 36px; height: 36px; background-color: var(--medium); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; } .content p { line-height: 1.6; margin-bottom: 15px; color: var(--text); } .content-footer { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--medium); } .action-btn { background-color: var(--primary); color: white; border: none; padding: 10px 20px; border-radius: 8px; font-weight: 500; cursor: pointer; transition: var(--transition); display: inline-flex; align-items: center; gap: 8px; } .action-btn:hover { background-color: var(--primary-light); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(77, 150, 255, 0.3); } .content ul { list-style-type: none; margin: 15px 0; } .content li { margin-bottom: 12px; padding-left: 25px; position: relative; } .content li::before { content: "✓"; color: var(--secondary); position: absolute; left: 0; font-weight: bold; } .accessibility-controls { display: flex; gap: 10px; margin-bottom: 20px; justify-content: flex-end; } .accessibility-btn { background: white; border: 1px solid var(--medium); border-radius: 8px; padding: 8px 12px; cursor: pointer; display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--dark); transition: var(--transition); } .accessibility-btn:hover { background-color: var(--medium); } .high-contrast .menu { background-color: var(--dark); } .high-contrast .menu-link { color: white; } .high-contrast .menu-link .icon, .high-contrast .menu-link .text { color: white; } .high-contrast .menu-item.active .menu-link .icon, .high-contrast .menu-item.active .menu-link .text { color: var(--accent); } .high-contrast .menu-item.active .menu-link::after { background-color: var(--accent); } .high-contrast .highlight { background-color: #444; } .large-text .menu-link .text { font-size: 16px; } .large-text .content p, .large-text .content li { font-size: 18px; } .large-text h2 { font-size: 28px; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @media (max-width: 600px) { .menu-link .text { font-size: 12px; } .menu-link { padding: 10px 0; } .content h2 { font-size: 22px; } } </style> </head> <body> <div class="container"> <div class="logo"> <div class="logo-icon">M+</div> <div class="logo-text">Medi<span>Care+</span></div> </div> <div class="accessibility-controls"> <button id="contrast-toggle" class="accessibility-btn"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6V18Z" fill="currentColor"/> </svg> High Contrast </button> <button id="text-size-toggle" class="accessibility-btn"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 7V4H20V7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9 20H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 4V20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Larger Text </button> </div> <nav> <ul class="menu"> <div class="highlight"></div> <li class="menu-item active" data-target="appointments"> <a href="#" class="menu-link"> <div class="icon">📅</div> <div class="text">Appointments</div> </a> </li> <li class="menu-item" data-target="services"> <a href="#" class="menu-link"> <div class="icon">🏥</div> <div class="text">Services</div> </a> </li> <li class="menu-item" data-target="prescriptions"> <a href="#" class="menu-link"> <div class="icon">💊</div> <div class="text">Prescriptions</div> </a> </li> <li class="menu-item" data-target="records"> <a href="#" class="menu-link"> <div class="icon">📋</div> <div class="text">Records</div> </a> </li> <li class="menu-item" data-target="support"> <a href="#" class="menu-link"> <div class="icon">🤝</div> <div class="text">Support</div> </a> </li> </ul> </nav> <div id="appointments" class="content active"> <h2><span class="icon">📅</span> Upcoming Appointments</h2> <p>Welcome to your appointments portal. You can manage all your healthcare visits in one place.</p> <ul> <li>Dr. Anita Chen - Cardiology | Oct 12, 2023 - 2:30 PM</li> <li>Dr. Robert Williams - Annual Checkup | Oct 18, 2023 - 10:00 AM</li> <li>Physical Therapy - Follow Up | Oct 25, 2023 - 1:15 PM</li> </ul> <p>Need to reschedule? You can modify appointments up to 24 hours in advance without any fee.</p> <div class="content-footer"> <button class="action-btn">Schedule New Appointment</button> </div> </div> <div id="services" class="content"> <h2><span class="icon">🏥</span> Our Services</h2> <p>MediCare+ offers comprehensive healthcare services to address all your medical needs.</p> <ul> <li>Primary Care - Regular checkups and preventive care</li> <li>Specialist Consultations - Expert care in over 20 specialties</li> <li>Diagnostic Services - Lab tests, imaging, and more</li> <li>Preventive Wellness - Vaccinations and health screenings</li> <li>Telehealth Options - Virtual appointments from home</li> </ul> <div class="content-footer"> <button class="action-btn">Explore Services</button> </div> </div> <div id="prescriptions" class="content"> <h2><span class="icon">💊</span> Prescription Management</h2> <p>Keep track of your medications and request refills easily through our patient portal.</p> <ul> <li>Lisinopril 10mg - Refill available in 5 days</li> <li>Metformin 500mg - Refill available now</li> <li>Atorvastatin 20mg - Renewed by Dr. Garcia on 10/02</li> </ul> <p>Set up automatic refills and delivery options for your regular medications.</p> <div class="content-footer"> <button class="action-btn">Request Refill</button> </div> </div> <div id="records" class="content"> <h2><span class="icon">📋</span> Medical Records</h2> <p>Access your complete health history, test results, and visit summaries in one secure location.</p> <ul> <li>Recent Blood Work - Uploaded Oct 2, 2023</li> <li>Vaccination Records - Updated Sep 15, 2023</li> <li>Specialist Visit Notes - Cardiology, Aug 30, 2023</li> <li>Imaging Results - Chest X-ray, Aug 12, 2023</li> </ul> <div class="content-footer"> <button class="action-btn">Download Records</button> </div> </div> <div id="support" class="content"> <h2><span class="icon">🤝</span> Patient Support</h2> <p>We're here to help with any questions or concerns about your healthcare journey.</p> <ul> <li>24/7 Nurse Helpline - Medical questions and triage</li> <li>Billing Assistance - Insurance and payment plans</li> <li>Patient Advocates - Help navigating complex care</li> <li>Technical Support - Help with our digital services</li> </ul> <div class="content-footer"> <button class="action-btn">Contact Support</button> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { const menuItems = document.querySelectorAll('.menu-item'); const contents = document.querySelectorAll('.content'); const highlight = document.querySelector('.highlight'); const contrastToggle = document.getElementById('contrast-toggle'); const textSizeToggle = document.getElementById('text-size-toggle'); // Initial highlight position function setHighlightPosition(item) { const width = item.offsetWidth; const left = item.offsetLeft; highlight.style.width = `${width}px`; highlight.style.transform = `translateX(${left}px)`; } // Set initial highlight position setHighlightPosition(document.querySelector('.menu-item.active')); // Menu item click handling menuItems.forEach(item => { item.addEventListener('click', function(e) { e.preventDefault(); // Update active state menuItems.forEach(mi => mi.classList.remove('active')); this.classList.add('active'); // Move highlight setHighlightPosition(this); // Show corresponding content const targetId = this.getAttribute('data-target'); contents.forEach(content => { content.classList.remove('active'); if (content.id === targetId) { content.classList.add('active'); } }); }); }); // Accessibility toggles contrastToggle.addEventListener('click', () => { document.body.classList.toggle('high-contrast'); if (document.body.classList.contains('high-contrast')) { contrastToggle.innerHTML = ` <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6V18Z" fill="currentColor"/> </svg> Standard Mode `; } else { contrastToggle.innerHTML = ` <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6V18Z" fill="currentColor"/> </svg> High Contrast `; } }); textSizeToggle.addEventListener('click', () => { document.body.classList.toggle('large-text'); if (document.body.classList.contains('large-text')) { textSizeToggle.innerHTML = ` <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 7V4H20V7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9 20H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 4V20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Regular Text `; } else { textSizeToggle.innerHTML = ` <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 7V4H20V7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9 20H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 4V20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Larger Text `; } // Recalculate highlight position when text size changes setTimeout(() => { setHighlightPosition(document.querySelector('.menu-item.active')); }, 10); }); // Add pulse animation to action buttons const actionButtons = document.querySelectorAll('.action-btn'); actionButtons.forEach(btn => { btn.addEventListener('mouseenter', () => { btn.style.animation = 'pulse 0.5s ease-in-out'; }); btn.addEventListener('mouseleave', () => { btn.style.animation = ''; }); }); // Handle window resize window.addEventListener('resize', () => { setHighlightPosition(document.querySelector('.menu-item.active')); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TrustBank Financial Services</title> <style> :root { --primary: #0b4d6c; --primary-light: #1a6080; --accent: #e7be33; --accent-light: #f0d176; --dark: #203141; --light: #f5f7fa; --medium: #e0e5eb; --text: #333b47; --success: #45a878; --warning: #db7c43; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient(145deg, var(--light), #e6eef5); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 20px; overflow-x: hidden; } .container { width: 100%; max-width: 680px; margin: 0 auto; } header { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .logo { display: flex; align-items: center; font-weight: 700; color: var(--primary); font-size: 24px; text-decoration: none; } .logo-icon { margin-right: 10px; position: relative; background: var(--primary); width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(11, 77, 108, 0.15); overflow: hidden; } .logo-icon::before { content: ""; position: absolute; width: 18px; height: 18px; background: var(--accent); border-radius: 50%; transform: translateY(4px); transition: transform 0.3s ease-out; } .logo-icon:hover::before { transform: translateY(-2px); } .logo span { font-weight: 300; color: var(--dark); } .user-actions { display: flex; align-items: center; gap: 8px; } .btn { padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; border: none; outline: none; position: relative; overflow: hidden; display: flex; align-items: center; gap: 6px; } .btn-outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); } .btn-outline:hover { background: rgba(11, 77, 108, 0.1); } .btn-primary { background: var(--primary); color: white; box-shadow: 0 4px 8px rgba(11, 77, 108, 0.2); } .btn-primary:hover { background: var(--primary-light); transform: translateY(-1px); box-shadow: 0 6px 12px rgba(11, 77, 108, 0.25); } .btn-primary:active { transform: translateY(0); box-shadow: 0 2px 4px rgba(11, 77, 108, 0.2); } .btn i { font-size: 16px; } .btn::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: -100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; } .btn:hover::after { left: 100%; } .main-nav { width: 100%; background: white; border-radius: 12px; box-shadow: 0 8px 24px rgba(32, 49, 65, 0.08); padding: 4px; position: relative; display: flex; flex-direction: column; } .nav-wrapper { display: flex; width: 100%; position: relative; z-index: 1; } .indicator { position: absolute; height: 52px; background-color: var(--light); border-radius: 8px; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 0; } .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 8px; text-decoration: none; color: var(--text); position: relative; z-index: 1; cursor: pointer; transition: color 0.3s ease; border-radius: 8px; } .nav-item i { font-size: 20px; margin-bottom: 6px; color: #7b8998; transition: all 0.3s ease; } .nav-item span { font-size: 14px; font-weight: 500; transition: all 0.3s ease; } .nav-item.active { color: var(--primary); } .nav-item.active i { color: var(--primary); } .nav-item.active span { font-weight: 600; } .nav-item::after { content: ""; position: absolute; bottom: 10px; width: 0; height: 3px; background: var(--accent); border-radius: 3px; transition: width 0.3s ease; opacity: 0; } .nav-item.active::after { width: 20px; opacity: 1; } .nav-item:hover { background-color: var(--light); } .nav-item:hover i { transform: translateY(-3px); } /* Mobile menu */ .mobile-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; background: white; border: none; cursor: pointer; box-shadow: 0 2px 8px rgba(32, 49, 65, 0.1); } .submenu-container { margin-top: 8px; width: 100%; background: white; border-radius: 10px; box-shadow: 0 6px 16px rgba(32, 49, 65, 0.06); overflow: hidden; opacity: 0; height: 0; transition: all 0.3s ease; } .submenu { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; padding: 16px; } .submenu-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 12px; background: var(--light); border-radius: 8px; cursor: pointer; transition: all 0.2s ease; } .submenu-item:hover { background: #e8f0f7; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(11, 77, 108, 0.08); } .submenu-item i { font-size: 18px; color: var(--primary); margin-bottom: 8px; } .submenu-item span { font-size: 13px; font-weight: 500; color: var(--text); text-align: center; } .main-content { width: 100%; margin-top: 24px; padding: 20px; background: white; border-radius: 12px; box-shadow: 0 8px 24px rgba(32, 49, 65, 0.08); } .welcome-message { display: flex; align-items: center; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--medium); } .welcome-text h2 { font-size: 20px; margin-bottom: 8px; color: var(--dark); } .welcome-text p { font-size: 14px; color: #7b8998; line-height: 1.5; } .account-overview { margin-top: 20px; } .account-overview h3 { font-size: 16px; margin-bottom: 12px; color: var(--dark); } .account-card { background: linear-gradient(135deg, var(--primary), #0a3a51); border-radius: 12px; padding: 20px; color: white; position: relative; overflow: hidden; box-shadow: 0 8px 16px rgba(11, 77, 108, 0.2); } .account-card::before { content: ""; position: absolute; width: 150px; height: 150px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; top: -75px; right: -75px; } .account-card::after { content: ""; position: absolute; width: 100px; height: 100px; background: rgba(255, 255, 255, 0.05); border-radius: 50%; bottom: -50px; left: 30px; } .account-number { font-size: 14px; opacity: 0.8; margin-bottom: 16px; } .balance { font-size: 28px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; } .balance span { font-size: 16px; opacity: 0.8; margin-right: 4px; } .balance-change { font-size: 14px; background: rgba(255, 255, 255, 0.15); padding: 4px 10px; border-radius: 20px; display: inline-flex; align-items: center; gap: 4px; } .quick-actions { display: flex; gap: 10px; margin-top: 20px; } .action-btn { flex: 1; background: white; border: 1px solid var(--medium); border-radius: 8px; padding: 12px; text-align: center; cursor: pointer; transition: all 0.2s ease; } .action-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(11, 77, 108, 0.1); } .action-btn i { font-size: 20px; color: var(--primary); margin-bottom: 8px; display: block; } .action-btn span { font-size: 13px; font-weight: 500; color: var(--text); } .notification { position: fixed; bottom: 20px; right: 20px; background: white; border-radius: 8px; padding: 16px; box-shadow: 0 4px 20px rgba(32, 49, 65, 0.15); display: flex; align-items: center; gap: 12px; transform: translateX(calc(100% + 40px)); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 100; max-width: 350px; } .notification.show { transform: translateX(0); } .notification-icon { width: 40px; height: 40px; background: rgba(69, 168, 120, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--success); font-size: 20px; flex-shrink: 0; } .notification-content { flex-grow: 1; } .notification-title { font-weight: 600; margin-bottom: 4px; font-size: 15px; color: var(--dark); } .notification-message { font-size: 13px; color: #7b8998; line-height: 1.4; } .notification-close { background: none; border: none; color: #7b8998; cursor: pointer; font-size: 16px; padding: 4px; display: flex; align-items: center; justify-content: center; } @media (max-width: 600px) { .nav-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav-wrapper::-webkit-scrollbar { display: none; } .nav-item { flex: 0 0 auto; min-width: 100px; } .welcome-message { flex-direction: column; align-items: flex-start; gap: 10px; } .quick-actions { flex-wrap: wrap; } .action-btn { flex: 0 0 calc(50% - 5px); } } </style> </head> <body> <div class="container"> <header> <a href="#" class="logo"> <div class="logo-icon"></div> Trust<span>Bank</span> </a> <div class="user-actions"> <button class="btn btn-outline"> <i class="fas fa-search"></i> </button> <button class="btn btn-primary"> <i class="fas fa-lock"></i> Secure Login </button> </div> </header> <nav class="main-nav"> <div class="nav-wrapper"> <div class="indicator"></div> <a class="nav-item active" data-index="0" data-section="accounts"> <i class="fas fa-home"></i> <span>Dashboard</span> </a> <a class="nav-item" data-index="1" data-section="accounts"> <i class="fas fa-credit-card"></i> <span>Accounts</span> </a> <a class="nav-item" data-index="2" data-section="transfer"> <i class="fas fa-exchange-alt"></i> <span>Transfers</span> </a> <a class="nav-item" data-index="3" data-section="investments"> <i class="fas fa-chart-line"></i> <span>Investments</span> </a> <a class="nav-item" data-index="4" data-section="services"> <i class="fas fa-concierge-bell"></i> <span>Services</span> </a> </div> <div id="accountsSubmenu" class="submenu-container"> <div class="submenu"> <div class="submenu-item"> <i class="fas fa-wallet"></i> <span>Current Account</span> </div> <div class="submenu-item"> <i class="fas fa-piggy-bank"></i> <span>Savings</span> </div> <div class="submenu-item"> <i class="fas fa-credit-card"></i> <span>Cards</span> </div> <div class="submenu-item"> <i class="fas fa-file-invoice-dollar"></i> <span>Statements</span> </div> </div> </div> </nav> <div class="main-content"> <div class="welcome-message"> <div class="welcome-text"> <h2>Good afternoon, Alexander</h2> <p>Your finances are secure and optimized. Here's a quick overview of your accounts.</p> </div> </div> <div class="account-overview"> <h3>Primary Checking</h3> <div class="account-card"> <div class="account-number">•••• •••• •••• 4872</div> <div class="balance"><span>$</span>24,631.08</div> <div class="balance-change"> <i class="fas fa-arrow-up"></i> +$1,842.25 this month </div> </div> <div class="quick-actions"> <div class="action-btn" id="transferBtn"> <i class="fas fa-exchange-alt"></i> <span>Transfer</span> </div> <div class="action-btn"> <i class="fas fa-qrcode"></i> <span>Pay</span> </div> <div class="action-btn"> <i class="fas fa-history"></i> <span>History</span> </div> <div class="action-btn"> <i class="fas fa-cog"></i> <span>Settings</span> </div> </div> </div> </div> </div> <div class="notification" id="notification"> <div class="notification-icon"> <i class="fas fa-shield-alt"></i> </div> <div class="notification-content"> <div class="notification-title">Secure Connection Established</div> <div class="notification-message">Your connection to TrustBank is encrypted and secure. All your transactions are protected.</div> </div> <button class="notification-close" id="notificationClose"> <i class="fas fa-times"></i> </button> </div> <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> <script> document.addEventListener("DOMContentLoaded", function() { // Get all navigation items const navItems = document.querySelectorAll('.nav-item'); const indicator = document.querySelector('.indicator'); // Setup the indicator on the active item initially const activeItem = document.querySelector('.nav-item.active'); positionIndicator(activeItem); // Setup the click event handlers navItems.forEach(item => { item.addEventListener('click', function() { // Remove active class from all items navItems.forEach(navItem => navItem.classList.remove('active')); // Add active class to the clicked item this.classList.add('active'); // Move the indicator positionIndicator(this); // Handle submenu display based on the clicked item's data-section attribute const section = this.getAttribute('data-section'); const accountsSubmenu = document.getElementById('accountsSubmenu'); if (section === 'accounts') { accountsSubmenu.style.opacity = '1'; accountsSubmenu.style.height = '100px'; } else { accountsSubmenu.style.opacity = '0'; accountsSubmenu.style.height = '0'; } }); }); // Function to position the indicator function positionIndicator(element) { indicator.style.width = `${element.offsetWidth}px`; indicator.style.left = `${element.offsetLeft}px`; } // Window resize event handler to reposition the indicator window.addEventListener('resize', function() { const activeItem = document.querySelector('.nav-item.active'); positionIndicator(activeItem); }); // Show notification after 2 seconds setTimeout(() => { document.getElementById('notification').classList.add('show'); }, 2000); // Close notification document.getElementById('notificationClose').addEventListener('click', function() { document.getElementById('notification').classList.remove('show'); }); // Transfer button notification document.getElementById('transferBtn').addEventListener('click', function() { const notification = document.getElementById('notification'); document.querySelector('.notification-icon i').className = 'fas fa-sync-alt'; document.querySelector('.notification-icon').style.backgroundColor = 'rgba(11, 77, 108, 0.1)'; document.querySelector('.notification-icon').style.color = '#0b4d6c'; document.querySelector('.notification-title').textContent = 'Transfer Portal'; document.querySelector('.notification-message').textContent = 'Please select a destination account for your transfer. You can transfer between your accounts or to external beneficiaries.'; notification.classList.add('show'); }); }); </script> </body> </html>
