Headers are the first impression users get when they visit a website, making them a crucial element of web design. A well-crafted header can captivate visitors and set the tone for the entire user experience.
In this article, we will explore 10 header examples that showcase a variety of styles and functionalities. These examples will provide inspiration and insights for creating your own stunning headers.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Designers and developers love Subframe for its drag-and-drop interface and intuitive, responsive canvas. Create pixel-perfect headers effortlessly, ensuring a stunning UI every time.
Ready to elevate your design game? Start for free today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Unlock the power of Subframe to design stunning UIs with ease. Our drag-and-drop editor and beautifully crafted components make creating pixel-perfect headers and interfaces a breeze.
Experience unparalleled efficiency and start creating immediately. Start for free today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Nexus Dynamics - Intelligent Enterprise Solutions</title> <style> :root { --primary: #2c3e50; --secondary: #34495e; --accent: #3498db; --accent-hover: #2980b9; --light: #ecf0f1; --neutral: #95a5a6; --white: #ffffff; --transition: 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif; } body { background-color: var(--light); color: var(--primary); overflow-x: hidden; max-width: 700px; margin: 0 auto; height: 100vh; display: flex; flex-direction: column; } header { background-color: var(--white); padding: 0; width: 100%; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; border-bottom: 1px solid rgba(0, 0, 0, 0.05); transition: box-shadow var(--transition), transform var(--transition); } .header-container { max-width: 700px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; } .scrolled { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .header-hidden { transform: translateY(-100%); } .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--primary); position: relative; } .logo-symbol { height: 32px; width: 32px; background-color: var(--accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .logo-symbol:before { content: ''; position: absolute; width: 16px; height: 16px; background-color: var(--white); border-radius: 50%; transform: translate(-4px, -4px); transition: transform var(--transition); } .logo:hover .logo-symbol:before { transform: translate(-2px, -2px); } .logo-text { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.5px; } .logo-text span { color: var(--accent); font-weight: 800; } nav { display: flex; align-items: center; } .desktop-nav { display: flex; gap: 2rem; list-style: none; } @media (max-width: 768px) { .desktop-nav { display: none; } } .nav-link { text-decoration: none; color: var(--secondary); font-weight: 500; font-size: 0.95rem; position: relative; padding: 0.5rem 0; transition: color var(--transition); } .nav-link:hover { color: var(--accent); } .nav-link:after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background-color: var(--accent); transition: width var(--transition); } .nav-link:hover:after { width: 100%; } .nav-link.active { color: var(--accent); } .nav-link.active:after { width: 100%; } .nav-action { background-color: var(--accent); color: var(--white); border: none; border-radius: 4px; padding: 0.6rem 1.2rem; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: background-color var(--transition), transform var(--transition); margin-left: 1.5rem; } .nav-action:hover { background-color: var(--accent-hover); transform: translateY(-2px); } .mobile-menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; } @media (max-width: 768px) { .mobile-menu-toggle { display: flex; align-items: center; justify-content: center; } .nav-action { margin-left: 1rem; padding: 0.5rem 1rem; font-size: 0.85rem; } } .hamburger { width: 24px; height: 20px; position: relative; transform: rotate(0deg); transition: .5s ease-in-out; cursor: pointer; } .hamburger span { display: block; position: absolute; height: 2px; width: 100%; background: var(--primary); border-radius: 2px; opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out; } .hamburger span:nth-child(1) { top: 0px; } .hamburger span:nth-child(2), .hamburger span:nth-child(3) { top: 8px; } .hamburger span:nth-child(4) { top: 16px; } .mobile-menu-open .hamburger span:nth-child(1) { top: 8px; width: 0%; left: 50%; } .mobile-menu-open .hamburger span:nth-child(2) { transform: rotate(45deg); } .mobile-menu-open .hamburger span:nth-child(3) { transform: rotate(-45deg); } .mobile-menu-open .hamburger span:nth-child(4) { top: 8px; width: 0%; left: 50%; } .mobile-menu { position: absolute; top: 100%; left: 0; right: 0; background-color: var(--white); padding: 1rem; display: none; flex-direction: column; gap: 1rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transform: translateY(-10px); opacity: 0; transition: transform var(--transition), opacity var(--transition); max-width: 700px; margin: 0 auto; } .mobile-menu.show { display: flex; transform: translateY(0); opacity: 1; } .mobile-nav-link { text-decoration: none; color: var(--secondary); font-weight: 500; font-size: 1rem; padding: 0.75rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.05); transition: color var(--transition); } .mobile-nav-link:hover { color: var(--accent); } .mobile-nav-link.active { color: var(--accent); } /* Content for demo purposes */ main { margin-top: 80px; padding: 2rem 1.5rem; flex: 1; } .content-section { margin-bottom: 2rem; } h1 { font-size: 2.5rem; margin-bottom: 1rem; font-weight: 800; letter-spacing: -1px; color: var(--primary); } h1 span { color: var(--accent); } p { line-height: 1.6; margin-bottom: 1.5rem; color: var(--secondary); } .cta-group { display: flex; gap: 1rem; margin-top: 2rem; } .cta-primary { background-color: var(--accent); color: var(--white); border: none; border-radius: 4px; padding: 0.8rem 1.5rem; font-weight: 600; font-size: 1rem; cursor: pointer; transition: background-color var(--transition), transform var(--transition); } .cta-primary:hover { background-color: var(--accent-hover); transform: translateY(-2px); } .cta-secondary { background-color: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 0.8rem 1.5rem; font-weight: 600; font-size: 1rem; cursor: pointer; transition: background-color var(--transition), color var(--transition), transform var(--transition); } .cta-secondary:hover { background-color: var(--accent); color: var(--white); transform: translateY(-2px); } @media (max-width: 600px) { .cta-group { flex-direction: column; } } /* Header notification */ .header-notification { background-color: var(--accent); color: var(--white); text-align: center; padding: 0.5rem 1rem; font-size: 0.85rem; position: relative; overflow: hidden; } .header-notification:before { content: ''; position: absolute; top: 0; left: -50%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(255,255,255,0.3), transparent); animation: shimmer 2s infinite; } @keyframes shimmer { 100% { left: 150%; } } .notification-content { display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .notification-content svg { width: 16px; height: 16px; } .notification-cta { font-weight: 700; text-decoration: underline; cursor: pointer; margin-left: 4px; } </style> </head> <body> <header id="site-header"> <div class="header-notification"> <div class="notification-content"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9z" clip-rule="evenodd" /> </svg> <span>New enterprise solution launches June 15th <span class="notification-cta">Learn more</span></span> </div> </div> <div class="header-container"> <a href="#" class="logo"> <div class="logo-symbol"></div> <div class="logo-text">Nexus<span>Dynamics</span></div> </a> <nav> <ul class="desktop-nav"> <li><a href="#" class="nav-link active">Solutions</a></li> <li><a href="#" class="nav-link">Industries</a></li> <li><a href="#" class="nav-link">Resources</a></li> <li><a href="#" class="nav-link">Company</a></li> </ul> <button class="mobile-menu-toggle" id="mobile-menu-toggle"> <div class="hamburger"> <span></span> <span></span> <span></span> <span></span> </div> </button> <button class="nav-action">Get Demo</button> </nav> </div> <div class="mobile-menu" id="mobile-menu"> <a href="#" class="mobile-nav-link active">Solutions</a> <a href="#" class="mobile-nav-link">Industries</a> <a href="#" class="mobile-nav-link">Resources</a> <a href="#" class="mobile-nav-link">Company</a> </div> </header> <main> <section class="content-section"> <h1>Enterprise <span>Intelligence</span><br>Redefined</h1> <p>Nexus Dynamics provides data-driven solutions that transform business operations with actionable insights. Our integrated platform merges AI analytics with enterprise workflows to optimize decision-making at every level.</p> <div class="cta-group"> <button class="cta-primary">Schedule Consultation</button> <button class="cta-secondary">View Solutions</button> </div> </section> </main> <script> // Sticky header behavior let lastScrollTop = 0; const header = document.getElementById('site-header'); const scrollThreshold = 50; window.addEventListener('scroll', () => { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; // Add box shadow when scrolled if (scrollTop > 10) { header.classList.add('scrolled'); } else { header.classList.remove('scrolled'); } // Hide header when scrolling down, show when scrolling up if (scrollTop > scrollThreshold) { if (scrollTop > lastScrollTop && scrollTop > 100) { header.classList.add('header-hidden'); } else { header.classList.remove('header-hidden'); } } lastScrollTop = scrollTop; }); // Mobile menu toggle const mobileMenuToggle = document.getElementById('mobile-menu-toggle'); const mobileMenu = document.getElementById('mobile-menu'); mobileMenuToggle.addEventListener('click', () => { mobileMenu.classList.toggle('show'); mobileMenuToggle.parentElement.classList.toggle('mobile-menu-open'); }); // Add active class to nav links const navLinks = document.querySelectorAll('.nav-link, .mobile-nav-link'); navLinks.forEach(link => { link.addEventListener('click', (e) => { e.preventDefault(); // Remove active class from all links navLinks.forEach(item => { item.classList.remove('active'); }); // Add active class to clicked link and its mobile/desktop counterpart const linkText = link.textContent; navLinks.forEach(item => { if (item.textContent === linkText) { item.classList.add('active'); } }); // Close mobile menu if open mobileMenu.classList.remove('show'); mobileMenuToggle.parentElement.classList.remove('mobile-menu-open'); }); }); // Prevent actual form submission document.querySelectorAll('button').forEach(button => { button.addEventListener('click', (e) => { e.preventDefault(); }); }); // Notification CTA document.querySelector('.notification-cta').addEventListener('click', (e) => { e.preventDefault(); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Viridis - Sustainable Home Goods</title> <style> :root { --primary: #2e7d32; --secondary: #ff6d00; --light: #f5f5f5; --dark: #263238; --accent: #ffeb3b; --error: #f44336; --success: #4caf50; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #f9f9f9; color: var(--dark); max-width: 700px; margin: 0 auto; overflow-x: hidden; } .header { background-color: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); position: relative; z-index: 100; } .top-bar { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .logo { display: flex; align-items: center; font-weight: 700; font-size: 24px; color: var(--primary); text-decoration: none; position: relative; } .logo span { color: var(--secondary); } .logo::after { content: ''; position: absolute; width: 8px; height: 8px; background-color: var(--accent); border-radius: 50%; bottom: 7px; right: -10px; } .icons-group { display: flex; gap: 15px; align-items: center; } .icon-btn { background: none; border: none; cursor: pointer; position: relative; color: var(--dark); transition: all 0.2s ease; } .icon-btn:hover { color: var(--primary); transform: translateY(-2px); } .cart-count { position: absolute; top: -5px; right: -5px; background-color: var(--secondary); color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; display: flex; align-items: center; justify-content: center; font-weight: bold; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .cart-btn:hover .cart-count { transform: scale(1.2); } .main-nav { padding: 0 20px; } .nav-list { display: flex; list-style: none; gap: 25px; } .nav-item { position: relative; } .nav-link { display: block; padding: 15px 0; text-decoration: none; color: var(--dark); font-weight: 500; font-size: 15px; transition: color 0.2s ease; } .nav-link:hover { color: var(--primary); } .nav-link.active { color: var(--primary); } .nav-link.active::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: var(--primary); border-radius: 2px 2px 0 0; } .search-container { padding: 20px; transition: all 0.3s ease; } .search-form { display: flex; gap: 10px; } .search-input { flex: 1; padding: 12px 15px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 15px; transition: all 0.2s ease; } .search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.2); } .search-btn { background-color: var(--primary); color: white; border: none; border-radius: 8px; padding: 0 20px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 8px; } .search-btn:hover { background-color: #1b5e20; transform: translateY(-1px); } .search-btn:active { transform: translateY(1px); } .promo-banner { background: linear-gradient(135deg, var(--secondary), #ff9800); color: white; padding: 15px 20px; border-radius: 12px; margin: 0 20px 20px; display: flex; justify-content: space-between; align-items: center; overflow: hidden; position: relative; z-index: 1; box-shadow: 0 4px 15px rgba(255, 109, 0, 0.25); } .promo-banner::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E"); z-index: -1; } .promo-content { flex: 1; } .promo-title { font-weight: 700; font-size: 18px; margin-bottom: 5px; } .promo-text { font-size: 14px; opacity: 0.9; } .promo-btn { background-color: white; color: var(--secondary); border: none; border-radius: 6px; padding: 8px 16px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s ease; margin-left: 15px; } .promo-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } .mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 5px; } .mobile-menu-icon { display: block; position: relative; width: 24px; height: 18px; } .mobile-menu-icon span { position: absolute; left: 0; width: 100%; height: 2px; background-color: var(--dark); transition: all 0.3s ease; } .mobile-menu-icon span:nth-child(1) { top: 0; } .mobile-menu-icon span:nth-child(2) { top: 8px; } .mobile-menu-icon span:nth-child(3) { top: 16px; } .mobile-menu-open .mobile-menu-icon span:nth-child(1) { transform: rotate(45deg); top: 8px; } .mobile-menu-open .mobile-menu-icon span:nth-child(2) { opacity: 0; } .mobile-menu-open .mobile-menu-icon span:nth-child(3) { transform: rotate(-45deg); top: 8px; } /* Featured products preview */ .featured-preview { display: flex; gap: 15px; padding: 0 20px 20px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; } .featured-preview::-webkit-scrollbar { display: none; } .featured-item { flex: 0 0 auto; width: 120px; background-color: white; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: all 0.3s ease; position: relative; } .featured-item:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); } .featured-item img { width: 100%; height: 90px; object-fit: cover; } .featured-badge { position: absolute; top: 8px; right: 8px; background-color: var(--primary); color: white; font-size: 10px; font-weight: bold; padding: 3px 6px; border-radius: 4px; } .featured-details { padding: 8px; } .featured-title { font-size: 12px; font-weight: 500; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .featured-price { display: flex; justify-content: space-between; align-items: center; } .featured-current { font-size: 13px; font-weight: 700; color: var(--primary); } .featured-previous { font-size: 10px; text-decoration: line-through; color: #9e9e9e; } @media (max-width: 700px) { .main-nav { display: none; padding: 0; background-color: white; position: absolute; width: 100%; left: 0; top: 100%; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); z-index: 100; } .main-nav.active { display: block; } .nav-list { flex-direction: column; gap: 0; } .nav-link { padding: 15px 20px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .nav-link.active::after { display: none; } .mobile-menu-btn { display: block; } .search-container { padding: 15px; } .promo-banner { flex-direction: column; align-items: flex-start; gap: 10px; margin: 0 15px 15px; } .promo-btn { margin-left: 0; align-self: flex-start; } .featured-preview { padding: 0 15px 15px; } } /* Animations */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .pulse { animation: pulse 2s infinite; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .fadeInDown { animation: fadeInDown 0.5s ease-out; } /* Dropdown effect */ .nav-item.has-dropdown { position: relative; } .dropdown { position: absolute; top: 100%; left: 0; width: 200px; background-color: white; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); padding: 10px 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; z-index: 200; } .nav-item.has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-item { padding: 8px 15px; display: block; text-decoration: none; color: var(--dark); font-size: 14px; transition: all 0.2s ease; } .dropdown-item:hover { background-color: rgba(46, 125, 50, 0.1); color: var(--primary); padding-left: 20px; } /* Search suggestions */ .search-suggestions { position: absolute; top: calc(100% + 5px); left: 20px; right: 20px; background-color: white; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); z-index: 300; max-height: 250px; overflow-y: auto; display: none; } .search-suggestions.active { display: block; animation: fadeInDown 0.3s ease-out; } .suggestion-item { padding: 12px 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 10px; } .suggestion-item:last-child { border-bottom: none; } .suggestion-item:hover { background-color: rgba(46, 125, 50, 0.05); } .suggestion-icon { color: #9e9e9e; font-size: 14px; } .suggestion-text { font-size: 14px; flex: 1; } .suggestion-category { font-size: 12px; color: var(--primary); background-color: rgba(46, 125, 50, 0.1); padding: 3px 6px; border-radius: 4px; } </style> </head> <body> <header class="header"> <div class="top-bar"> <button class="mobile-menu-btn" id="mobileMenuBtn"> <div class="mobile-menu-icon"> <span></span> <span></span> <span></span> </div> </button> <a href="#" class="logo">Viridis<span>.</span></a> <div class="icons-group"> <button class="icon-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> <circle cx="12" cy="7" r="4"></circle> </svg> </button> <button class="icon-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path> </svg> </button> <button class="icon-btn cart-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="8" cy="21" r="1"></circle> <circle cx="19" cy="21" r="1"></circle> <path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"></path> </svg> <span class="cart-count">3</span> </button> </div> </div> <nav class="main-nav" id="mainNav"> <ul class="nav-list"> <li class="nav-item"><a href="#" class="nav-link active">Home</a></li> <li class="nav-item has-dropdown"> <a href="#" class="nav-link">Categories</a> <div class="dropdown"> <a href="#" class="dropdown-item">Kitchen & Dining</a> <a href="#" class="dropdown-item">Bathroom</a> <a href="#" class="dropdown-item">Living Room</a> <a href="#" class="dropdown-item">Bedroom</a> <a href="#" class="dropdown-item">Garden & Outdoor</a> </div> </li> <li class="nav-item"><a href="#" class="nav-link">New Arrivals</a></li> <li class="nav-item"><a href="#" class="nav-link">Eco-Friendly</a></li> <li class="nav-item"><a href="#" class="nav-link">Deals</a></li> </ul> </nav> <div class="search-container"> <form class="search-form" id="searchForm"> <input type="text" class="search-input" id="searchInput" placeholder="Search eco-friendly products..." autocomplete="off"> <button type="button" class="search-btn"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="11" cy="11" r="8"></circle> <line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> Search </button> </form> <div class="search-suggestions" id="searchSuggestions"> <div class="suggestion-item"> <span class="suggestion-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="11" cy="11" r="8"></circle> <line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </span> <span class="suggestion-text">Bamboo kitchen utensils</span> <span class="suggestion-category">Kitchen</span> </div> <div class="suggestion-item"> <span class="suggestion-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="11" cy="11" r="8"></circle> <line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </span> <span class="suggestion-text">Organic cotton towels</span> <span class="suggestion-category">Bathroom</span> </div> <div class="suggestion-item"> <span class="suggestion-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="11" cy="11" r="8"></circle> <line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </span> <span class="suggestion-text">Recycled glass vases</span> <span class="suggestion-category">Decor</span> </div> <div class="suggestion-item"> <span class="suggestion-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="11" cy="11" r="8"></circle> <line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </span> <span class="suggestion-text">Solar-powered garden lights</span> <span class="suggestion-category">Outdoor</span> </div> </div> </div> <div class="promo-banner"> <div class="promo-content"> <h3 class="promo-title">Eco Week: 25% Off All Bamboo Products</h3> <p class="promo-text">Sustainable living made affordable with our biggest sale of the season</p> </div> <button class="promo-btn pulse">Shop Now</button> </div> <div class="featured-preview"> <div class="featured-item"> <span class="featured-badge">New</span> <img src="https://images.unsplash.com/photo-1596162954151-cdcb4c0f70a8?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Bamboo Cutlery Set"> <div class="featured-details"> <h4 class="featured-title">Bamboo Cutlery Set</h4> <div class="featured-price"> <span class="featured-current">$18.99</span> <span class="featured-previous">$24.99</span> </div> </div> </div> <div class="featured-item"> <span class="featured-badge">Sale</span> <img src="https://images.unsplash.com/photo-1540932239986-30128078f3c5?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Wool Throw Blanket"> <div class="featured-details"> <h4 class="featured-title">Wool Throw Blanket</h4> <div class="featured-price"> <span class="featured-current">$39.50</span> <span class="featured-previous">$59.99</span> </div> </div> </div> <div class="featured-item"> <img src="https://images.unsplash.com/photo-1602143407151-7111542de6e8?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Ceramic Planter"> <div class="featured-details"> <h4 class="featured-title">Ceramic Planter</h4> <div class="featured-price"> <span class="featured-current">$22.99</span> <span class="featured-previous">$29.99</span> </div> </div> </div> <div class="featured-item"> <span class="featured-badge">Best</span> <img src="https://images.unsplash.com/photo-1619596662481-085e45d69762?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Recycled Glass Jars"> <div class="featured-details"> <h4 class="featured-title">Recycled Glass Jars</h4> <div class="featured-price"> <span class="featured-current">$15.75</span> <span class="featured-previous">$19.99</span> </div> </div> </div> <div class="featured-item"> <img src="https://images.unsplash.com/photo-1587817023466-ffc935a9cd8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Hemp Table Runner"> <div class="featured-details"> <h4 class="featured-title">Hemp Table Runner</h4> <div class="featured-price"> <span class="featured-current">$28.50</span> <span class="featured-previous">$34.99</span> </div> </div> </div> </div> </header> <script> // Mobile menu toggle const mobileMenuBtn = document.getElementById('mobileMenuBtn'); const mainNav = document.getElementById('mainNav'); mobileMenuBtn.addEventListener('click', () => { mobileMenuBtn.classList.toggle('mobile-menu-open'); mainNav.classList.toggle('active'); }); // Search suggestions const searchInput = document.getElementById('searchInput'); const searchSuggestions = document.getElementById('searchSuggestions'); searchInput.addEventListener('focus', () => { searchSuggestions.classList.add('active'); }); searchInput.addEventListener('blur', () => { // Small delay to allow clicking on suggestions setTimeout(() => { searchSuggestions.classList.remove('active'); }, 150); }); // Handle search form submission const searchForm = document.getElementById('searchForm'); searchForm.addEventListener('submit', (e) => { e.preventDefault(); const query = searchInput.value.trim(); if (query) { // Console log the search instead of submitting console.log('Searching for:', query); // In a real app, this would navigate to a search results page // window.location.href = `/search?q=${encodeURIComponent(query)}`; // Clear the input searchInput.value = ''; } }); // Handle suggestion clicks const suggestionItems = document.querySelectorAll('.suggestion-item'); suggestionItems.forEach(item => { item.addEventListener('click', () => { const suggestionText = item.querySelector('.suggestion-text').textContent; searchInput.value = suggestionText; searchSuggestions.classList.remove('active'); // Focus on the search input searchInput.focus(); }); }); // Cart animation const cartBtn = document.querySelector('.cart-btn'); cartBtn.addEventListener('click', () => { const cartCount = cartBtn.querySelector('.cart-count'); cartCount.style.transform = 'scale(1.3)'; setTimeout(() => { cartCount.style.transform = ''; }, 300); }); // Promo banner can be closed const promoBanner = document.querySelector('.promo-banner'); const promoBtn = document.querySelector('.promo-btn'); promoBtn.addEventListener('click', () => { // In a real app, this would navigate to a promotions page console.log('Navigating to promotion page'); }); // Featured items hover effect const featuredItems = document.querySelectorAll('.featured-item'); featuredItems.forEach(item => { item.addEventListener('mouseenter', () => { item.style.transform = 'translateY(-5px)'; item.style.boxShadow = '0 6px 12px rgba(0, 0, 0, 0.1)'; }); item.addEventListener('mouseleave', () => { item.style.transform = ''; item.style.boxShadow = ''; }); item.addEventListener('click', () => { // In a real app, this would navigate to a product page console.log('Viewing product:', item.querySelector('.featured-title').textContent); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>The Global Dispatch</title> <style> :root { --primary-dark: #121212; --secondary-dark: #1f1f1f; --text-dark: #ffffff; --accent-dark: #ff4757; --bg-dark: #121212; --primary-light: #ffffff; --secondary-light: #f5f5f5; --text-light: #121212; --accent-light: #ff4757; --bg-light: #ffffff; --transition-speed: 0.3s; --border-radius: 4px; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } body { width: 100%; height: 100%; max-width: 700px; max-height: 700px; overflow-x: hidden; transition: background-color var(--transition-speed), color var(--transition-speed); } body.dark-mode { background-color: var(--bg-dark); color: var(--text-dark); } body.light-mode { background-color: var(--bg-light); color: var(--text-light); } .header { position: relative; width: 100%; padding: 15px 20px; transition: background-color var(--transition-speed); } .header.dark-mode { background-color: var(--primary-dark); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .header.light-mode { background-color: var(--primary-light); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .logo { display: flex; align-items: center; } .logo h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; margin-right: 5px; position: relative; } .logo-highlight { color: var(--accent-dark); } .live-indicator { display: flex; align-items: center; background: rgba(255, 71, 87, 0.15); border-radius: 20px; padding: 5px 10px; font-size: 12px; font-weight: 600; margin-left: 15px; } .pulse { width: 8px; height: 8px; background-color: var(--accent-dark); border-radius: 50%; margin-right: 6px; position: relative; } .pulse::after { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background-color: rgba(255, 71, 87, 0.6); animation: pulse 2s infinite; top: 0; left: 0; } @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3); opacity: 0; } } .toggle-container { display: flex; align-items: center; } .mode-toggle { position: relative; width: 46px; height: 24px; border-radius: 12px; cursor: pointer; transition: background-color var(--transition-speed); } .mode-toggle.dark-mode { background-color: var(--secondary-dark); } .mode-toggle.light-mode { background-color: var(--secondary-light); } .toggle-switch { position: absolute; width: 20px; height: 20px; border-radius: 50%; top: 2px; left: 2px; transition: transform var(--transition-speed), background-color var(--transition-speed); display: flex; align-items: center; justify-content: center; font-size: 12px; } .toggle-switch.dark-mode { transform: translateX(22px); background-color: var(--primary-dark); color: var(--text-dark); } .toggle-switch.light-mode { transform: translateX(0); background-color: var(--primary-light); color: var(--text-light); } .breaking-news { display: flex; align-items: center; overflow: hidden; margin: 10px 0; border-radius: var(--border-radius); position: relative; height: 36px; transition: background-color var(--transition-speed); } .breaking-news.dark-mode { background-color: var(--secondary-dark); } .breaking-news.light-mode { background-color: var(--secondary-light); } .breaking-label { background-color: var(--accent-dark); color: white; padding: 8px 12px; font-weight: 700; font-size: 14px; text-transform: uppercase; height: 100%; display: flex; align-items: center; animation: glow 2s infinite alternate; white-space: nowrap; z-index: 1; } @keyframes glow { from { box-shadow: 0 0 5px rgba(255, 71, 87, 0.5); } to { box-shadow: 0 0 15px rgba(255, 71, 87, 0.8); } } .breaking-news-content { overflow: hidden; padding: 0 15px; flex-grow: 1; } .news-ticker { white-space: nowrap; display: inline-block; animation: ticker 20s linear infinite; padding-right: 50px; font-weight: 500; } .news-ticker span { margin-right: 40px; position: relative; } .news-ticker span::after { content: '•'; position: absolute; right: -24px; color: var(--accent-dark); } @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .nav-category { display: flex; justify-content: space-between; margin-top: 15px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; position: relative; padding-bottom: 5px; } .nav-category::-webkit-scrollbar { display: none; } .nav-category::after { content: ''; position: absolute; top: 0; right: 0; width: 30px; height: 100%; background: linear-gradient(to right, transparent, var(--bg-light)); pointer-events: none; } .dark-mode .nav-category::after { background: linear-gradient(to right, transparent, var(--bg-dark)); } .category { padding: 8px 15px; margin-right: 10px; white-space: nowrap; border-radius: 20px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all var(--transition-speed); } .category.dark-mode { background-color: var(--secondary-dark); } .category.light-mode { background-color: var(--secondary-light); } .category.active { background-color: var(--accent-dark); color: white; } .category:hover:not(.active) { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .search-bar { margin-top: 15px; display: flex; position: relative; } .search-input { flex-grow: 1; padding: 10px 15px; padding-left: 40px; border: none; border-radius: var(--border-radius); font-size: 14px; transition: background-color var(--transition-speed), color var(--transition-speed); } .search-input.dark-mode { background-color: var(--secondary-dark); color: var(--text-dark); } .search-input.light-mode { background-color: var(--secondary-light); color: var(--text-light); } .search-input:focus { outline: none; box-shadow: 0 0 0 2px var(--accent-dark); } .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #888; font-size: 16px; } .news-preview { margin-top: 20px; padding: 15px; border-radius: var(--border-radius); transition: background-color var(--transition-speed); display: flex; flex-direction: column; gap: 10px; } .news-preview.dark-mode { background-color: var(--secondary-dark); } .news-preview.light-mode { background-color: var(--secondary-light); } .preview-title { font-size: 18px; font-weight: 700; margin-bottom: 5px; } .preview-meta { display: flex; font-size: 12px; color: #888; gap: 10px; margin-bottom: 10px; } .preview-meta span { display: flex; align-items: center; gap: 4px; } .preview-text { font-size: 14px; line-height: 1.4; } /* Responsive */ @media (max-width: 500px) { .logo h1 { font-size: 20px; } .live-indicator { font-size: 10px; padding: 4px 8px; } .breaking-label { font-size: 12px; padding: 6px 10px; } .category { padding: 6px 12px; font-size: 12px; } } </style> </head> <body class="light-mode"> <header class="header light-mode"> <div class="top-bar"> <div class="logo"> <h1>Global<span class="logo-highlight">Dispatch</span></h1> <div class="live-indicator"> <div class="pulse"></div> LIVE UPDATES </div> </div> <div class="toggle-container"> <div class="mode-toggle light-mode" id="modeToggle"> <div class="toggle-switch light-mode" id="toggleSwitch"> <i class="toggle-icon">☀️</i> </div> </div> </div> </div> <div class="breaking-news light-mode"> <div class="breaking-label"> BREAKING </div> <div class="breaking-news-content"> <div class="news-ticker"> <span>UN Climate Summit reaches historic agreement to limit global warming</span> <span>Major tech companies announce joint AI safety initiative</span> <span>Stock markets rally as Fed signals potential rate cut</span> <span>Scientists discover breakthrough treatment for antibiotic resistance</span> </div> </div> </div> <div class="search-bar"> <div class="search-icon">🔍</div> <input type="text" class="search-input light-mode" placeholder="Search for news, topics, locations..."> </div> <div class="nav-category"> <div class="category light-mode active">Headlines</div> <div class="category light-mode">Politics</div> <div class="category light-mode">Business</div> <div class="category light-mode">Technology</div> <div class="category light-mode">Science</div> <div class="category light-mode">Health</div> <div class="category light-mode">Climate</div> <div class="category light-mode">Sports</div> <div class="category light-mode">Entertainment</div> </div> </header> <div class="news-preview light-mode"> <div class="preview-title">Quantum Computing Breakthrough Promises Faster Drug Discovery</div> <div class="preview-meta"> <span>🕒 4 minutes ago</span> <span>📝 Science & Tech</span> <span>👁️ 1.2K views</span> </div> <div class="preview-text"> Researchers at MIT have demonstrated how a new quantum algorithm can accelerate molecular simulations by 200x, potentially revolutionizing pharmaceutical research and cutting drug development timelines from years to months. </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const body = document.body; const header = document.querySelector('.header'); const modeToggle = document.getElementById('modeToggle'); const toggleSwitch = document.getElementById('toggleSwitch'); const breakingNews = document.querySelector('.breaking-news'); const searchInput = document.querySelector('.search-input'); const categories = document.querySelectorAll('.category'); const newsPreview = document.querySelector('.news-preview'); // Mode toggle functionality modeToggle.addEventListener('click', function() { const isDarkMode = body.classList.contains('dark-mode'); if (isDarkMode) { body.classList.remove('dark-mode'); body.classList.add('light-mode'); header.classList.remove('dark-mode'); header.classList.add('light-mode'); modeToggle.classList.remove('dark-mode'); modeToggle.classList.add('light-mode'); toggleSwitch.classList.remove('dark-mode'); toggleSwitch.classList.add('light-mode'); toggleSwitch.innerHTML = '<i class="toggle-icon">☀️</i>'; breakingNews.classList.remove('dark-mode'); breakingNews.classList.add('light-mode'); searchInput.classList.remove('dark-mode'); searchInput.classList.add('light-mode'); newsPreview.classList.remove('dark-mode'); newsPreview.classList.add('light-mode'); categories.forEach(category => { if (!category.classList.contains('active')) { category.classList.remove('dark-mode'); category.classList.add('light-mode'); } }); } else { body.classList.remove('light-mode'); body.classList.add('dark-mode'); header.classList.remove('light-mode'); header.classList.add('dark-mode'); modeToggle.classList.remove('light-mode'); modeToggle.classList.add('dark-mode'); toggleSwitch.classList.remove('light-mode'); toggleSwitch.classList.add('dark-mode'); toggleSwitch.innerHTML = '<i class="toggle-icon">🌙</i>'; breakingNews.classList.remove('light-mode'); breakingNews.classList.add('dark-mode'); searchInput.classList.remove('light-mode'); searchInput.classList.add('dark-mode'); newsPreview.classList.remove('light-mode'); newsPreview.classList.add('dark-mode'); categories.forEach(category => { if (!category.classList.contains('active')) { category.classList.remove('light-mode'); category.classList.add('dark-mode'); } }); } }); // Category selection categories.forEach(category => { category.addEventListener('click', function() { categories.forEach(c => { c.classList.remove('active'); if (body.classList.contains('dark-mode')) { c.classList.add('dark-mode'); c.classList.remove('light-mode'); } else { c.classList.add('light-mode'); c.classList.remove('dark-mode'); } }); this.classList.add('active'); this.classList.remove('dark-mode'); this.classList.remove('light-mode'); }); }); // Simulate breaking news update let breakingNewsItems = [ "UN Climate Summit reaches historic agreement to limit global warming", "Major tech companies announce joint AI safety initiative", "Stock markets rally as Fed signals potential rate cut", "Scientists discover breakthrough treatment for antibiotic resistance", "Global peace talks show progress in resolving Middle East conflict", "New renewable energy project breaks efficiency records" ]; setInterval(() => { const ticker = document.querySelector('.news-ticker'); const firstItem = breakingNewsItems.shift(); breakingNewsItems.push(firstItem); ticker.style.animation = 'none'; ticker.offsetHeight; // Trigger reflow ticker.innerHTML = breakingNewsItems.map(item => `<span>${item}</span>`).join(''); ticker.style.animation = 'ticker 20s linear infinite'; }, 10000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wanderlust Chronicles | Travel Blog</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body, html { height: 100%; font-family: 'Playfair Display', Georgia, serif; color: #333; scroll-behavior: smooth; overflow-x: hidden; } .header-container { position: relative; height: 100vh; max-height: 700px; width: 100%; max-width: 700px; margin: 0 auto; overflow: hidden; } .header-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80'); background-size: cover; background-position: center; transform: scale(1.1); transition: transform 0.5s ease-out; z-index: -1; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(53, 40, 30, 0.7)); } nav { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 5%; display: flex; justify-content: space-between; align-items: center; z-index: 100; transition: all 0.4s ease; } .nav-scrolled { background-color: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 12px 5%; } .logo { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 28px; color: #fff; text-decoration: none; letter-spacing: 1px; transition: color 0.4s ease; display: flex; align-items: center; } .nav-scrolled .logo { color: #35281e; } .logo-icon { margin-right: 8px; font-size: 26px; } .menu { display: flex; list-style: none; } .menu li { margin-left: 30px; } .menu a { color: #fff; text-decoration: none; font-size: 16px; font-weight: 500; letter-spacing: 0.5px; transition: color 0.4s ease; position: relative; } .nav-scrolled .menu a { color: #35281e; } .menu a::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px; background-color: #e67e22; transition: width 0.3s ease; } .menu a:hover::after { width: 100%; } .header-content { position: absolute; top: 50%; left: 5%; transform: translateY(-50%); width: 90%; text-align: left; color: #fff; opacity: 0; animation: fadeIn 1.2s ease forwards; animation-delay: 0.5s; } .header-content h1 { font-size: 4.5rem; font-weight: 700; line-height: 1.1; margin-bottom: 15px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } .header-content p { font-size: 1.2rem; line-height: 1.6; margin-bottom: 25px; max-width: 600px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .header-content .subtitle { font-family: 'Lora', serif; font-size: 1.3rem; font-style: italic; margin-bottom: 5px; color: #e67e22; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .cta-button { display: inline-block; padding: 12px 30px; background-color: #e67e22; color: #fff; font-family: 'Lora', serif; font-size: 16px; text-decoration: none; border-radius: 3px; transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; border: none; cursor: pointer; outline: none; } .cta-button::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); transition: all 0.4s ease; z-index: -1; } .cta-button:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(230, 126, 34, 0.3); } .cta-button:hover::before { left: 100%; } .scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; color: #fff; font-size: 12px; letter-spacing: 1px; opacity: 0; animation: fadeIn 1s ease forwards; animation-delay: 1.5s; } .scroll-indicator span { margin-bottom: 8px; } .scroll-arrow { width: 25px; height: 25px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); animation: scrollBounce 2s infinite; } .destination-tag { position: absolute; bottom: 30px; right: 30px; background: rgba(255, 255, 255, 0.85); padding: 10px 15px; border-radius: 4px; font-family: 'Lora', serif; font-style: italic; color: #35281e; font-size: 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); backdrop-filter: blur(4px); opacity: 0; transform: translateY(20px); animation: fadeInUp 0.8s ease forwards; animation-delay: 1.2s; } .destination-tag i { color: #e67e22; margin-right: 5px; } .location-dot { position: absolute; top: 40%; left: 70%; width: 12px; height: 12px; background-color: #e67e22; border-radius: 50%; box-shadow: 0 0 0 rgba(230, 126, 34, 0.6); animation: pulse 2s infinite; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes scrollBounce { 0%, 20%, 50%, 80%, 100% { transform: rotate(45deg) translateY(0); } 40% { transform: rotate(45deg) translateY(10px); } 60% { transform: rotate(45deg) translateY(5px); } } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.6); } 70% { box-shadow: 0 0 0 10px rgba(230, 126, 34, 0); } 100% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0); } } .content-section { min-height: 100vh; padding: 60px 20px; max-width: 700px; margin: 0 auto; } /* Media Queries */ @media (max-width: 768px) { .header-content h1 { font-size: 3rem; } .header-content .subtitle { font-size: 1.1rem; } .header-content p { font-size: 1rem; } .menu { display: none; } } @media (max-width: 480px) { .header-content h1 { font-size: 2.5rem; } .header-content { left: 10%; width: 80%; } .destination-tag { right: 15px; bottom: 15px; padding: 8px 12px; font-size: 12px; } } </style> </head> <body> <div class="header-container"> <div class="header-bg" id="parallax-bg"></div> <div class="overlay"></div> <nav id="navbar"> <a href="#" class="logo"> <span class="logo-icon">✈</span> Wanderlust Chronicles </a> <ul class="menu"> <li><a href="#">Destinations</a></li> <li><a href="#">Stories</a></li> <li><a href="#">Photography</a></li> <li><a href="#">About</a></li> </ul> </nav> <div class="header-content"> <div class="subtitle">Discover The World's Hidden Gems</div> <h1>Where Mountains Kiss The Sky</h1> <p>Journey through the untamed wilderness of Patagonia, where ancient glaciers carve valleys between towering peaks, and condors soar on thermal winds above emerald forests.</p> <button class="cta-button">Explore This Journey</button> </div> <div class="scroll-indicator"> <span>SCROLL DOWN</span> <div class="scroll-arrow"></div> </div> <div class="destination-tag"> <i>📍</i> Torres del Paine, Patagonia </div> <div class="location-dot"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Parallax effect on scroll const parallaxBg = document.getElementById('parallax-bg'); const navbar = document.getElementById('navbar'); let lastScrollY = 0; window.addEventListener('scroll', function() { const scrollY = window.scrollY; // Parallax effect if (scrollY <= window.innerHeight) { parallaxBg.style.transform = `scale(1.1) translateY(${scrollY * 0.4}px)`; } // Navbar color change on scroll if (scrollY > 50) { navbar.classList.add('nav-scrolled'); } else { navbar.classList.remove('nav-scrolled'); } lastScrollY = scrollY; }); // Handle the CTA button click (prevent default behavior for embed) const ctaButton = document.querySelector('.cta-button'); ctaButton.addEventListener('click', function(e) { e.preventDefault(); // For demo purposes, let's add a small animation when clicked this.textContent = "Journey Begins Soon..."; this.style.backgroundColor = "#d35400"; setTimeout(() => { this.textContent = "Explore This Journey"; this.style.backgroundColor = "#e67e22"; }, 2000); }); // Smooth scrolling for the scroll indicator const scrollIndicator = document.querySelector('.scroll-indicator'); scrollIndicator.addEventListener('click', function() { window.scrollTo({ top: window.innerHeight, behavior: 'smooth' }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } :root { --color-bg: #fcfcfc; --color-text: #212121; --color-accent: #FF6B6B; --color-secondary: #4ECDC4; --color-tertiary: #FFE66D; --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } body { background-color: var(--color-bg); color: var(--color-text); overflow-x: hidden; max-width: 700px; height: 700px; margin: 0 auto; } .portfolio-header { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; padding: 2rem; overflow: hidden; } .nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; position: relative; z-index: 10; } .logo { font-weight: 800; font-size: 1.5rem; position: relative; } .logo::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 100%; height: 3px; background-color: var(--color-accent); transform: scaleX(0); transform-origin: right; transition: var(--transition); } .logo:hover::after { transform: scaleX(1); transform-origin: left; } .nav-links { display: flex; gap: 1.5rem; } .nav-link { text-decoration: none; color: var(--color-text); font-weight: 500; position: relative; transition: var(--transition); } .nav-link::before { content: ''; position: absolute; width: 0; height: 6px; bottom: -2px; left: 0; background-color: var(--color-secondary); z-index: -1; transition: var(--transition); opacity: 0.7; } .nav-link:hover { transform: translateY(-2px); } .nav-link:hover::before { width: 100%; } .hero { margin-top: 1rem; margin-bottom: 2rem; position: relative; z-index: 5; } .title { font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 900; line-height: 1.1; margin-bottom: 1rem; transition: var(--transition); position: relative; } .title span { position: relative; display: inline-block; } .title span::after { content: ''; position: absolute; bottom: 5px; left: 0; width: 100%; height: 10px; background-color: var(--color-tertiary); z-index: -1; transform: scaleX(0); transform-origin: right; transition: var(--transition); } .portfolio-header:hover .title span::after { transform: scaleX(1); transform-origin: left; } .tagline { font-size: 1.1rem; line-height: 1.6; max-width: 80%; margin-bottom: 2rem; opacity: 0.85; } .thumbnails { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .thumbnail { position: relative; aspect-ratio: 1/1; overflow: hidden; border-radius: 8px; cursor: pointer; transition: var(--transition); } .thumbnail::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 70%); opacity: 0; transition: var(--transition); z-index: 1; } .thumbnail:hover::before { opacity: 1; } .thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); filter: grayscale(20%); } .thumbnail:hover img { transform: scale(1.1); filter: grayscale(0%); } .thumbnail-label { position: absolute; bottom: 0; left: 0; width: 100%; padding: 0.8rem; color: white; font-weight: 600; opacity: 0; transform: translateY(20px); transition: var(--transition); z-index: 2; } .thumbnail-title { font-size: 0.85rem; margin-bottom: 4px; } .thumbnail-category { font-size: 0.7rem; opacity: 0.8; } .thumbnail:hover .thumbnail-label { opacity: 1; transform: translateY(0); } .hand-drawn-icon { width: 50px; height: 50px; position: absolute; opacity: 0.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.1)); transition: var(--transition); } .icon-1 { top: 10%; right: 15%; transform: rotate(15deg); } .icon-2 { bottom: 20%; left: 10%; transform: rotate(-10deg); } .icon-3 { top: 30%; left: 20%; transform: rotate(-5deg); } @media (max-width: 600px) { .portfolio-header { padding: 1.5rem; } .nav-links { gap: 1rem; } .tagline { max-width: 100%; } .thumbnails { grid-template-columns: repeat(2, 1fr); } .title { font-size: 2.2rem; } } @media (max-width: 400px) { .nav { flex-direction: column; align-items: flex-start; gap: 1rem; } .thumbnails { grid-template-columns: 1fr 1fr; gap: 0.8rem; } } .cursor-dot { position: fixed; width: 8px; height: 8px; background-color: var(--color-accent); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); z-index: 999; } .cursor-outline { position: fixed; width: 40px; height: 40px; border: 2px solid var(--color-accent); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); z-index: 998; opacity: 0.5; } .scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; opacity: 0.6; transition: var(--transition); } .scroll-indicator:hover { opacity: 1; } .scroll-text { font-size: 0.7rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; } .scroll-icon { width: 20px; height: 30px; border: 2px solid var(--color-text); border-radius: 10px; position: relative; } .scroll-icon::before { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background-color: var(--color-text); border-radius: 50%; animation: scrollAnimation 1.5s infinite; } @keyframes scrollAnimation { 0% { transform: translateX(-50%) translateY(0); opacity: 1; } 100% { transform: translateX(-50%) translateY(10px); opacity: 0; } } .dark-mode-toggle { position: fixed; top: 20px; right: 20px; width: 24px; height: 24px; cursor: pointer; z-index: 20; } .dark-mode-toggle svg { width: 100%; height: 100%; transition: var(--transition); } .dark-mode-toggle:hover svg { transform: rotate(45deg); } .theme-dark { --color-bg: #121212; --color-text: #f5f5f5; } </style> </head> <body> <div class="cursor-dot"></div> <div class="cursor-outline"></div> <div class="portfolio-header"> <div class="nav"> <div class="logo">JUNE KIM</div> <div class="nav-links"> <a href="#" class="nav-link">Work</a> <a href="#" class="nav-link">About</a> <a href="#" class="nav-link">Process</a> <a href="#" class="nav-link">Contact</a> </div> </div> <div class="hero"> <h1 class="title">Visual <span>storyteller</span> & interface designer</h1> <p class="tagline">Crafting intuitive digital experiences that bridge the gap between functionality and emotion. Based in Seoul, working worldwide.</p> </div> <div class="thumbnails"> <div class="thumbnail"> <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Project 1"> <div class="thumbnail-label"> <div class="thumbnail-title">Nebula App</div> <div class="thumbnail-category">UI/UX Design</div> </div> </div> <div class="thumbnail"> <img src="https://images.unsplash.com/photo-1558655146-d09347e92766?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Project 2"> <div class="thumbnail-label"> <div class="thumbnail-title">Pulse Branding</div> <div class="thumbnail-category">Identity</div> </div> </div> <div class="thumbnail"> <img src="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Project 3"> <div class="thumbnail-label"> <div class="thumbnail-title">Eco Portal</div> <div class="thumbnail-category">Web Design</div> </div> </div> <div class="thumbnail"> <img src="https://images.unsplash.com/photo-1638803040283-7a5ffd48dad5?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Project 4"> <div class="thumbnail-label"> <div class="thumbnail-title">Sora Magazine</div> <div class="thumbnail-category">Editorial</div> </div> </div> </div> <svg class="hand-drawn-icon icon-1" viewBox="0 0 50 50"> <path d="M10,25 C10,15 25,5 40,15" stroke="var(--color-accent)" stroke-width="2" fill="none" /> <path d="M35,15 L40,15 L38,9" stroke="var(--color-accent)" stroke-width="2" fill="none" /> </svg> <svg class="hand-drawn-icon icon-2" viewBox="0 0 50 50"> <circle cx="25" cy="25" r="15" stroke="var(--color-secondary)" stroke-width="2" fill="none" stroke-dasharray="3,3" /> <path d="M20,20 L30,30 M20,30 L30,20" stroke="var(--color-secondary)" stroke-width="2" fill="none" /> </svg> <svg class="hand-drawn-icon icon-3" viewBox="0 0 50 50"> <path d="M15,25 Q25,10 35,25 T45,25" stroke="var(--color-tertiary)" stroke-width="2" fill="none" /> <circle cx="15" cy="25" r="3" fill="var(--color-tertiary)" /> <circle cx="45" cy="25" r="3" fill="var(--color-tertiary)" /> </svg> <div class="scroll-indicator"> <div class="scroll-text">Scroll to explore</div> <div class="scroll-icon"></div> </div> <div class="dark-mode-toggle"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--color-text)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="5"></circle> <line x1="12" y1="1" x2="12" y2="3"></line> <line x1="12" y1="21" x2="12" y2="23"></line> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line> <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line> <line x1="1" y1="12" x2="3" y2="12"></line> <line x1="21" y1="12" x2="23" y2="12"></line> <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line> <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line> </svg> </div> </div> <script> document.addEventListener('DOMContentLoaded', () => { // Custom cursor const cursorDot = document.querySelector('.cursor-dot'); const cursorOutline = document.querySelector('.cursor-outline'); document.addEventListener('mousemove', (e) => { const posX = e.clientX; const posY = e.clientY; cursorDot.style.left = `${posX}px`; cursorDot.style.top = `${posY}px`; // Delayed cursor outline position with smooth animation cursorOutline.animate({ left: `${posX}px`, top: `${posY}px` }, { duration: 500, fill: 'forwards' }); }); // Magnetic effect on links const navLinks = document.querySelectorAll('.nav-link'); navLinks.forEach(link => { link.addEventListener('mouseover', () => { cursorOutline.style.width = '50px'; cursorOutline.style.height = '50px'; cursorOutline.style.opacity = '1'; }); link.addEventListener('mouseout', () => { cursorOutline.style.width = '40px'; cursorOutline.style.height = '40px'; cursorOutline.style.opacity = '0.5'; }); }); // Dark mode toggle const darkModeToggle = document.querySelector('.dark-mode-toggle'); darkModeToggle.addEventListener('click', () => { document.body.classList.toggle('theme-dark'); // Change icon based on theme if (document.body.classList.contains('theme-dark')) { darkModeToggle.innerHTML = ` <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--color-text)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path> </svg> `; } else { darkModeToggle.innerHTML = ` <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--color-text)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="5"></circle> <line x1="12" y1="1" x2="12" y2="3"></line> <line x1="12" y1="21" x2="12" y2="23"></line> <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line> <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line> <line x1="1" y1="12" x2="3" y2="12"></line> <line x1="21" y1="12" x2="23" y2="12"></line> <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line> <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line> </svg> `; } }); // Thumbnail hover effect enhancement const thumbnails = document.querySelectorAll('.thumbnail'); thumbnails.forEach(thumbnail => { thumbnail.addEventListener('mousemove', (e) => { const rect = thumbnail.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2; const moveX = (x - centerX) / 20; const moveY = (y - centerY) / 20; thumbnail.style.transform = `perspective(600px) rotateX(${-moveY}deg) rotateY(${moveX}deg) scale(1.05)`; }); thumbnail.addEventListener('mouseleave', () => { thumbnail.style.transform = ''; }); }); // Text reveal animation on load const title = document.querySelector('.title'); const tagline = document.querySelector('.tagline'); const navLinks = document.querySelectorAll('.nav-link'); const thumbnails = document.querySelectorAll('.thumbnail'); setTimeout(() => { title.style.opacity = '1'; title.style.transform = 'translateY(0)'; setTimeout(() => { tagline.style.opacity = '1'; tagline.style.transform = 'translateY(0)'; navLinks.forEach((link, index) => { setTimeout(() => { link.style.opacity = '1'; link.style.transform = 'translateY(0)'; }, 100 * index); }); thumbnails.forEach((thumb, index) => { setTimeout(() => { thumb.style.opacity = '1'; thumb.style.transform = 'translateY(0)'; }, 150 * index); }); }, 300); }, 300); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QuantumLeap Tech</title> <style> :root { --primary-gradient: linear-gradient(135deg, #2E3BFF 0%, #00C6FF 50%, #9D00FF 100%); --secondary-gradient: linear-gradient(135deg, #FF2EED 0%, #00FFE0 100%); --dark-color: #0A1128; --light-color: #F7F9FC; --accent-color: #00FFD1; --transition-speed: 0.3s; --font-main: 'Manrope', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-main); } @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap'); body { background-color: var(--dark-color); color: var(--light-color); overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .header-container { width: 100%; max-width: 700px; padding: 24px; position: relative; overflow: hidden; border-radius: 20px; background-color: var(--dark-color); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); } .background-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(10, 17, 40, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 17, 40, 0.2) 1px, transparent 1px); background-size: 20px 20px; z-index: 0; opacity: 0.5; } .nav-container { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 10; padding: 10px 0; } .logo { display: flex; align-items: center; transition: transform var(--transition-speed); } .logo:hover { transform: scale(1.05); } .logo-text { font-weight: 800; font-size: 24px; letter-spacing: -0.5px; margin-left: 10px; background: var(--secondary-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .logo-icon { width: 40px; height: 40px; background: var(--primary-gradient); border-radius: 12px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .logo-icon::before { content: ''; position: absolute; width: 20px; height: 20px; background-color: rgba(255, 255, 255, 0.9); border-radius: 50%; transform: scale(0); transition: transform 0.5s ease-out; } .logo:hover .logo-icon::before { transform: scale(3); opacity: 0; } .logo-icon svg { width: 24px; height: 24px; fill: white; z-index: 1; } .hamburger { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; transition: all var(--transition-speed); position: relative; z-index: 100; } .hamburger:hover { background: rgba(255, 255, 255, 0.2); } .hamburger-line { width: 20px; height: 2px; background-color: var(--light-color); margin: 2px 0; transition: all var(--transition-speed); } .hamburger.active .hamburger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); } .hamburger.active .hamburger-line:nth-child(2) { opacity: 0; } .hamburger.active .hamburger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .nav-menu { position: absolute; top: 80px; right: 0; background: rgba(10, 17, 40, 0.95); backdrop-filter: blur(10px); width: 250px; padding: 20px; border-radius: 16px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); opacity: 0; transform: translateY(-20px); pointer-events: none; transition: all var(--transition-speed); z-index: 50; border: 1px solid rgba(255, 255, 255, 0.1); } .nav-menu.active { opacity: 1; transform: translateY(0); pointer-events: all; } .nav-link { display: block; padding: 12px 16px; margin: 8px 0; color: var(--light-color); text-decoration: none; font-weight: 500; border-radius: 8px; transition: all var(--transition-speed); position: relative; overflow: hidden; } .nav-link:hover { background: rgba(255, 255, 255, 0.1); padding-left: 24px; } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 16px; width: 0; height: 2px; background: var(--accent-color); transition: width var(--transition-speed); } .nav-link:hover::after { width: calc(100% - 32px); } .hero-content { margin-top: 50px; position: relative; z-index: 10; } .hero-pill { display: inline-block; background: rgba(255, 255, 255, 0.1); border-radius: 30px; padding: 8px 16px; font-size: 14px; font-weight: 600; margin-bottom: 20px; border: 1px solid rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } .hero-pill::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--primary-gradient); opacity: 0.3; transition: transform 0.5s ease; } .hero-pill:hover::before { transform: translateX(100%); } .hero-title { font-size: 52px; font-weight: 800; line-height: 1.1; margin-bottom: 16px; background: var(--primary-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -1px; } .hero-subtitle { font-size: 18px; line-height: 1.6; margin-bottom: 40px; font-weight: 400; color: rgba(255, 255, 255, 0.8); max-width: 500px; } .cta-container { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; } .cta-button { padding: 14px 32px; background: var(--primary-gradient); border: none; border-radius: 12px; color: var(--light-color); font-weight: 600; font-size: 16px; cursor: pointer; transition: all var(--transition-speed); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .cta-button::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--secondary-gradient); opacity: 0; transition: opacity var(--transition-speed); } .cta-button:hover::before { opacity: 1; } .cta-button span { position: relative; z-index: 1; } .cta-button svg { width: 20px; height: 20px; margin-left: 8px; position: relative; z-index: 1; transition: transform var(--transition-speed); } .cta-button:hover svg { transform: translateX(4px); } .cta-secondary { padding: 14px 32px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; color: var(--light-color); font-weight: 600; font-size: 16px; cursor: pointer; transition: all var(--transition-speed); } .cta-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.4); } .animated-shape { position: absolute; z-index: 1; border-radius: 50%; filter: blur(40px); opacity: 0.3; animation: float 12s infinite ease-in-out; } .shape-1 { width: 200px; height: 200px; background: #2E3BFF; top: -100px; right: -50px; animation-delay: 0s; } .shape-2 { width: 180px; height: 180px; background: #9D00FF; bottom: -80px; left: -60px; animation-delay: -3s; } .shape-3 { width: 120px; height: 120px; background: #00FFD1; top: 40%; right: -30px; animation-delay: -6s; } @keyframes float { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-20px, 20px); } 50% { transform: translate(10px, -15px); } 75% { transform: translate(15px, 10px); } } @media (max-width: 600px) { .hero-title { font-size: 36px; } .hero-subtitle { font-size: 16px; } .cta-container { flex-direction: column; align-items: stretch; } .cta-button, .cta-secondary { width: 100%; } } /* Particles */ .particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; } .particle { position: absolute; border-radius: 50%; background: var(--accent-color); opacity: 0.6; pointer-events: none; } </style> </head> <body> <div class="header-container"> <div class="background-grid"></div> <div class="animated-shape shape-1"></div> <div class="animated-shape shape-2"></div> <div class="animated-shape shape-3"></div> <div class="particles" id="particles"></div> <header class="nav-container"> <a href="#" class="logo"> <div class="logo-icon"> <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2L2 7L12 12L22 7L12 2Z"/> <path d="M2 17L12 22L22 17V7L12 12L2 7V17Z"/> <path d="M6 10.6V15.5"/> <path d="M18 10.6V15.5"/> </svg> </div> <span class="logo-text">QuantumLeap</span> </a> <div class="hamburger" id="hamburger"> <div class="hamburger-line"></div> <div class="hamburger-line"></div> <div class="hamburger-line"></div> </div> <nav class="nav-menu" id="nav-menu"> <a href="#" class="nav-link">Solutions</a> <a href="#" class="nav-link">Technology</a> <a href="#" class="nav-link">About Us</a> <a href="#" class="nav-link">Careers</a> <a href="#" class="nav-link">Contact</a> </nav> </header> <div class="hero-content"> <div class="hero-pill">Just Released: Neural Interface 3.0</div> <h1 class="hero-title">Pioneering the Future of Neural Computing</h1> <p class="hero-subtitle">Our quantum-neural networks process data 157x faster than traditional systems, giving your AI the edge in complex decision-making environments.</p> <div class="cta-container"> <button class="cta-button"> <span>Request Access</span> <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> <button class="cta-secondary">See Demos</button> </div> </div> </div> <script> // Menu toggle functionality const hamburger = document.getElementById('hamburger'); const navMenu = document.getElementById('nav-menu'); hamburger.addEventListener('click', () => { hamburger.classList.toggle('active'); navMenu.classList.toggle('active'); }); // Particle effect const particlesContainer = document.getElementById('particles'); const particleCount = 30; for (let i = 0; i < particleCount; i++) { createParticle(); } function createParticle() { const particle = document.createElement('div'); particle.classList.add('particle'); // Random size between 1-4px const size = Math.random() * 3 + 1; particle.style.width = `${size}px`; particle.style.height = `${size}px`; // Random position const posX = Math.random() * 100; const posY = Math.random() * 100; particle.style.left = `${posX}%`; particle.style.top = `${posY}%`; // Random opacity particle.style.opacity = Math.random() * 0.5 + 0.1; // Random animation duration and delay const duration = Math.random() * 30 + 10; const delay = Math.random() * 10; particle.style.animation = `float ${duration}s infinite ease-in-out ${delay}s`; particlesContainer.appendChild(particle); } // Hover effect on CTA button const ctaButton = document.querySelector('.cta-button'); ctaButton.addEventListener('mouseenter', (e) => { const x = e.clientX - e.target.getBoundingClientRect().left; const y = e.clientY - e.target.getBoundingClientRect().top; const ripple = document.createElement('span'); ripple.style.position = 'absolute'; ripple.style.width = '1px'; ripple.style.height = '1px'; ripple.style.borderRadius = '50%'; ripple.style.transform = 'scale(0)'; ripple.style.background = 'rgba(255, 255, 255, 0.4)'; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; ripple.style.animation = 'ripple 0.8s ease-out'; ctaButton.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 800); }); // Add hover animations to the logo const logo = document.querySelector('.logo'); logo.addEventListener('mouseenter', () => { // Add your custom hover animation logic here const logoIcon = document.querySelector('.logo-icon'); logoIcon.style.transform = 'rotate(5deg)'; setTimeout(() => { logoIcon.style.transform = ''; }, 300); }); // Add keyframe for ripple effect const style = document.createElement('style'); style.textContent = ` @keyframes ripple { to { transform: scale(100); opacity: 0; } } `; document.head.appendChild(style); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> :root { --primary: #4a6fa5; --secondary: #6b9ac4; --accent: #f4a261; --light: #f0f5ff; --dark: #2d3b4e; --success: #57cc99; --text: #333333; --shadow: 0 4px 15px rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Nunito', 'Segoe UI', sans-serif; } body { background-color: #f8f9fa; color: var(--text); font-size: 16px; line-height: 1.6; overflow-x: hidden; height: 100vh; width: 100%; display: flex; flex-direction: column; } .header { background: linear-gradient(145deg, var(--primary), var(--secondary)); padding: 1.2rem; position: relative; z-index: 100; box-shadow: var(--shadow); display: flex; flex-direction: column; width: 100%; } .header-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .logo { display: flex; align-items: center; } .logo-icon { font-size: 1.8rem; color: var(--light); margin-right: 0.5rem; } .logo-text { color: white; font-weight: 700; font-size: 1.4rem; letter-spacing: 0.5px; } .user-controls { display: flex; gap: 1rem; align-items: center; } .user-icon, .notifications { background-color: rgba(255, 255, 255, 0.2); border-radius: 50%; width: 2.2rem; height: 2.2rem; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; position: relative; transition: var(--transition); } .user-icon:hover, .notifications:hover { background-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); } .nav-badge { position: absolute; top: -3px; right: -5px; background-color: var(--accent); color: white; border-radius: 50%; width: 18px; height: 18px; font-size: 0.7rem; display: flex; align-items: center; justify-content: center; font-weight: bold; } .search-container { position: relative; width: 100%; max-width: 500px; margin: 0 auto; } .search-input { width: 100%; padding: 0.8rem 1rem 0.8rem 3rem; border: none; border-radius: 50px; background-color: rgba(255, 255, 255, 0.9); font-size: 0.95rem; transition: var(--transition); outline: none; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .search-input:focus { background-color: white; box-shadow: 0 3px 15px rgba(0, 0, 0, 0.15); } .search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--primary); font-size: 1.2rem; } .header-nav { margin-top: 1.2rem; display: flex; gap: 0.5rem; justify-content: space-between; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 0.5rem; } .header-nav::-webkit-scrollbar { display: none; } .nav-item { position: relative; color: rgba(255, 255, 255, 0.85); font-weight: 600; padding: 0.6rem 1rem; cursor: pointer; border-radius: 5px; white-space: nowrap; transition: var(--transition); display: flex; align-items: center; gap: 0.3rem; } .nav-item:hover { background-color: rgba(255, 255, 255, 0.15); color: white; } .nav-item.active { background-color: rgba(255, 255, 255, 0.2); color: white; } .nav-item-arrow { font-size: 0.8rem; transition: var(--transition); } .nav-item:hover .nav-item-arrow { transform: rotate(180deg); } .dropdown-menu { position: absolute; top: 110%; left: 0; background-color: white; border-radius: 8px; width: max-content; min-width: 220px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: var(--transition); z-index: 101; padding: 0.8rem 0; } .nav-item:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-item { padding: 0.6rem 1.2rem; color: var(--text); display: flex; align-items: center; gap: 0.5rem; transition: var(--transition); } .dropdown-item:hover { background-color: var(--light); color: var(--primary); } .dropdown-icon { color: var(--primary); font-size: 1rem; opacity: 0.8; } .search-suggestions { position: absolute; top: 110%; left: 0; width: 100%; background-color: white; border-radius: 10px; box-shadow: var(--shadow); z-index: 100; max-height: 300px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: var(--transition); } .search-input:focus + .search-icon + .search-suggestions { opacity: 1; visibility: visible; transform: translateY(0); } .suggestion { padding: 0.8rem 1.2rem; display: flex; align-items: center; gap: 0.8rem; cursor: pointer; transition: var(--transition); border-bottom: 1px solid #f0f0f0; } .suggestion:hover { background-color: var(--light); } .suggestion-icon { color: var(--primary); font-size: 1.2rem; opacity: 0.7; } .suggestion-content { flex: 1; } .suggestion-title { font-weight: 600; color: var(--dark); margin-bottom: 0.2rem; } .suggestion-desc { font-size: 0.8rem; color: #666; } .suggestion-meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; margin-top: 0.3rem; } .meta-tag { background-color: #eef2ff; color: var(--primary); padding: 0.2rem 0.5rem; border-radius: 3px; font-weight: 600; } .meta-stat { color: #888; display: flex; align-items: center; gap: 0.2rem; } .trending-searches { display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; padding: 0 1rem; } .trend-tag { background-color: rgba(255, 255, 255, 0.2); color: white; padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.8rem; cursor: pointer; transition: var(--transition); display: flex; align-items: center; gap: 0.3rem; } .trend-tag:hover { background-color: rgba(255, 255, 255, 0.3); transform: translateY(-2px); } .trend-icon { font-size: 0.7rem; } .content { flex: 1; padding: 2rem; background-color: #f8f9fa; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #888; } .content h2 { color: var(--dark); margin-bottom: 1rem; } .mobile-toggle { display: none; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; } @media (max-width: 768px) { .header-top { margin-bottom: 0.8rem; } .mobile-toggle { display: block; } .header-nav { position: absolute; top: 100%; left: 0; width: 100%; flex-direction: column; background-color: var(--secondary); padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; margin-top: 0; z-index: 99; } .header-nav.active { max-height: 400px; padding: 0.5rem; box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); } .nav-item { padding: 0.8rem; width: 100%; } .nav-item:hover .dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; margin-top: 0.5rem; width: 100%; } .dropdown-menu { width: 100%; margin-top: 0.5rem; } .search-container { max-width: 100%; width: calc(100% - 3rem); } .trending-searches { margin-top: 0.8rem; justify-content: center; } .search-suggestions { max-height: 250px; } } /* Animations */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-5px); } 100% { transform: translateY(0px); } } .pulse { animation: pulse 2s infinite; } .float { animation: float 3s ease-in-out infinite; } /* Accessibility focus states */ a:focus, button:focus, input:focus { outline: 2px solid var(--accent); outline-offset: 2px; } /* Tooltip */ [data-tooltip] { position: relative; } [data-tooltip]:after { content: attr(data-tooltip); position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); background-color: var(--dark); color: white; padding: 0.4rem 0.8rem; border-radius: 4px; font-size: 0.75rem; white-space: nowrap; opacity: 0; visibility: hidden; transition: var(--transition); z-index: 10; } [data-tooltip]:hover:after { opacity: 1; visibility: visible; } </style> </head> <body> <header class="header"> <div class="header-top"> <div class="logo"> <div class="logo-icon">📚</div> <div class="logo-text">MasterMinds</div> </div> <div class="search-container"> <input type="text" class="search-input" placeholder="Search courses, topics, or educators..." aria-label="Search"> <div class="search-icon">🔍</div> <div class="search-suggestions"> <div class="suggestion"> <div class="suggestion-icon">📘</div> <div class="suggestion-content"> <div class="suggestion-title">Data Science Fundamentals</div> <div class="suggestion-desc">Master Python, statistics and machine learning basics</div> <div class="suggestion-meta"> <span class="meta-tag">Certificate</span> <span class="meta-stat">⭐ 4.9</span> <span class="meta-stat">👥 12.4k enrolled</span> </div> </div> </div> <div class="suggestion"> <div class="suggestion-icon">🎨</div> <div class="suggestion-content"> <div class="suggestion-title">UX/UI Design Principles</div> <div class="suggestion-desc">Learn user-centered design and prototyping</div> <div class="suggestion-meta"> <span class="meta-tag">Popular</span> <span class="meta-stat">⭐ 4.8</span> <span class="meta-stat">👥 8.7k enrolled</span> </div> </div> </div> <div class="suggestion"> <div class="suggestion-icon">💻</div> <div class="suggestion-content"> <div class="suggestion-title">Full-Stack Web Development</div> <div class="suggestion-desc">Create responsive websites with HTML, CSS and JavaScript</div> <div class="suggestion-meta"> <span class="meta-tag">Bestseller</span> <span class="meta-stat">⭐ 4.7</span> <span class="meta-stat">👥 15.2k enrolled</span> </div> </div> </div> <div class="suggestion"> <div class="suggestion-icon">🧠</div> <div class="suggestion-content"> <div class="suggestion-title">Dr. Sarah Chen</div> <div class="suggestion-desc">Cognitive science educator with 15+ courses</div> <div class="suggestion-meta"> <span class="meta-tag">Instructor</span> <span class="meta-stat">🏆 Top Rated</span> </div> </div> </div> </div> </div> <div class="user-controls"> <div class="notifications" data-tooltip="Notifications"> <i>🔔</i> <span class="nav-badge">3</span> </div> <div class="user-icon" data-tooltip="My Account"> <i>👤</i> </div> <button class="mobile-toggle" aria-label="Toggle navigation menu"> <i>☰</i> </button> </div> </div> <div class="trending-searches"> <div class="trend-tag"><span class="trend-icon">🔥</span> Data Science</div> <div class="trend-tag"><span class="trend-icon">📈</span> Digital Marketing</div> <div class="trend-tag"><span class="trend-icon">🧠</span> AI Fundamentals</div> <div class="trend-tag"><span class="trend-icon">🌱</span> Sustainable Design</div> </div> <nav class="header-nav"> <div class="nav-item active"> <span>Home</span> </div> <div class="nav-item"> <span>Explore</span> <span class="nav-item-arrow">▼</span> <div class="dropdown-menu"> <div class="dropdown-item"> <span class="dropdown-icon">🔍</span> <span>Browse All Categories</span> </div> <div class="dropdown-item"> <span class="dropdown-icon">🏆</span> <span>Top-Rated Courses</span> </div> <div class="dropdown-item"> <span class="dropdown-icon">🆕</span> <span>New Releases</span> </div> <div class="dropdown-item"> <span class="dropdown-icon">💰</span> <span>Free Courses</span> </div> </div> </div> <div class="nav-item"> <span>Categories</span> <span class="nav-item-arrow">▼</span> <div class="dropdown-menu"> <div class="dropdown-item"> <span class="dropdown-icon">💻</span> <span>Technology</span> </div> <div class="dropdown-item"> <span class="dropdown-icon">📊</span> <span>Business</span> </div> <div class="dropdown-item"> <span class="dropdown-icon">🎨</span> <span>Creative Arts</span> </div> <div class="dropdown-item"> <span class="dropdown-icon">🧠</span> <span>Personal Growth</span> </div> <div class="dropdown-item"> <span class="dropdown-icon">🔬</span> <span>Science</span> </div> <div class="dropdown-item"> <span class="dropdown-icon">🌎</span> <span>Languages</span> </div> </div> </div> <div class="nav-item"> <span>Learning Paths</span> <span class="nav-item-arrow">▼</span> <div class="dropdown-menu"> <div class="dropdown-item"> <span class="dropdown-icon">📱</span> <span>Mobile Development</span> </div> <div class="dropdown-item"> <span class="dropdown-icon">🤖</span> <span>AI & Machine Learning</span> </div> <div class="dropdown-item"> <span class="dropdown-icon">🔒</span> <span>Cybersecurity</span> </div> <div class="dropdown-item"> <span class="dropdown-icon">📊</span> <span>Data Analytics</span> </div> </div> </div> <div class="nav-item"> <span>Resources</span> <span class="nav-item-arrow">▼</span> <div class="dropdown-menu"> <div class="dropdown-item"> <span class="dropdown-icon">📚</span> <span>Learning Library</span> </div> <div class="dropdown-item"> <span class="dropdown-icon">📝</span> <span>Practice Tests</span> </div> <div class="dropdown-item"> <span class="dropdown-icon">📋</span> <span>Code Challenges</span> </div> <div class="dropdown-item"> <span class="dropdown-icon">🗂️</span> <span>Study Guides</span> </div> </div> </div> <div class="nav-item"> <span>Community</span> <span class="nav-item-arrow">▼</span> <div class="dropdown-menu"> <div class="dropdown-item"> <span class="dropdown-icon">💬</span> <span>Discussion Forums</span> </div> <div class="dropdown-item"> <span class="dropdown-icon">👥</span> <span>Study Groups</span> </div> <div class="dropdown-item"> <span class="dropdown-icon">🎯</span> <span>Events & Webinars</span> </div> <div class="dropdown-item"> <span class="dropdown-icon">🏆</span> <span>Challenges</span> </div> </div> </div> <div class="nav-item pulse"> <span>For Teachers</span> </div> </nav> </header> <div class="content"> <h2>Educational Platform Navigation</h2> <p>This is an accessibility-focused header for online learning.</p> <p>Try interacting with the navigation elements, search, and dropdown menus.</p> </div> <script> // Mobile menu toggle document.querySelector('.mobile-toggle').addEventListener('click', function() { document.querySelector('.header-nav').classList.toggle('active'); }); // Search functionality with live suggestions const searchInput = document.querySelector('.search-input'); const trendTags = document.querySelectorAll('.trend-tag'); // When a trending tag is clicked, fill the search input with its text trendTags.forEach(tag => { tag.addEventListener('click', function() { searchInput.value = this.textContent.trim().replace(/[🔥📈🧠🌱]/g, '').trim(); searchInput.focus(); }); }); // Prevent form submission searchInput.addEventListener('keydown', function(e) { if (e.key === 'Enter') { e.preventDefault(); // Focus the first suggestion instead document.querySelector('.suggestion')?.click(); } }); // Make suggestions clickable document.querySelectorAll('.suggestion').forEach(suggestion => { suggestion.addEventListener('click', function() { const title = this.querySelector('.suggestion-title').textContent; searchInput.value = title; // Hide suggestions by blurring the input searchInput.blur(); }); }); // Accessibility: make sure dropdown menus are accessible via keyboard document.querySelectorAll('.nav-item').forEach(item => { item.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.classList.toggle('focus'); // If it has a dropdown, show it const dropdown = this.querySelector('.dropdown-menu'); if (dropdown) { dropdown.style.opacity = dropdown.style.opacity === '1' ? '0' : '1'; dropdown.style.visibility = dropdown.style.visibility === 'visible' ? 'hidden' : 'visible'; } } }); }); // Add tab index for accessibility document.querySelectorAll('.nav-item, .dropdown-item, .trend-tag').forEach(item => { item.setAttribute('tabindex', '0'); }); // Close mobile menu when clicking outside document.addEventListener('click', function(e) { const headerNav = document.querySelector('.header-nav'); const mobileToggle = document.querySelector('.mobile-toggle'); if (headerNav.classList.contains('active') && !headerNav.contains(e.target) && e.target !== mobileToggle) { headerNav.classList.remove('active'); } }); // Enhance with keyboard accessibility document.addEventListener('keyup', function(e) { if (e.key === 'Escape') { // Close dropdown menus document.querySelectorAll('.nav-item.focus').forEach(item => { item.classList.remove('focus'); const dropdown = item.querySelector('.dropdown-menu'); if (dropdown) { dropdown.style.opacity = '0'; dropdown.style.visibility = 'hidden'; } }); // Close mobile menu document.querySelector('.header-nav').classList.remove('active'); // Blur search input searchInput.blur(); } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>DataForge SaaS Header</title> <style> :root { --primary: #3B4252; --secondary: #4C566A; --accent: #5E81AC; --accent-hover: #81A1C1; --text: #ECEFF4; --text-muted: #D8DEE9; --success: #A3BE8C; --warning: #EBCB8B; --danger: #BF616A; --shadow: rgba(76, 86, 106, 0.2); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif; } body { background-color: #F8F9FB; display: flex; flex-direction: column; min-height: 100vh; max-width: 700px; margin: 0 auto; padding: 0 1rem; } .header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; width: 100%; background-color: white; border-radius: 12px; box-shadow: 0 4px 12px var(--shadow); margin-top: 1rem; position: relative; transition: all 0.3s ease; } .logo { display: flex; align-items: center; padding-left: 1.5rem; } .logo-icon { height: 30px; width: 30px; background-color: var(--accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; margin-right: 0.75rem; position: relative; overflow: hidden; } .logo-icon:before { content: ""; position: absolute; width: 16px; height: 16px; background-color: rgba(255, 255, 255, 0.15); border-radius: 50%; top: -8px; right: -8px; } .logo-icon:after { content: ""; position: absolute; width: 10px; height: 10px; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; bottom: -5px; left: -5px; } .logo-text { font-size: 18px; font-weight: 600; color: var(--primary); } .nav-container { display: flex; align-items: center; } .nav-menu { display: flex; list-style: none; gap: 1.5rem; margin-right: 2rem; } .nav-link { color: var(--secondary); text-decoration: none; font-weight: 500; font-size: 14px; transition: all 0.2s ease; position: relative; padding: 0.5rem 0; } .nav-link:hover { color: var(--accent); } .nav-link:after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background-color: var(--accent); transition: width 0.3s ease; } .nav-link:hover:after { width: 100%; } .active { color: var(--accent); position: relative; } .active:after { content: ''; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: var(--accent); } .icon-btn { background: none; border: none; cursor: pointer; padding: 0.5rem; display: flex; align-items: center; justify-content: center; color: var(--secondary); border-radius: 8px; transition: all 0.2s ease; } .icon-btn:hover { background-color: rgba(94, 129, 172, 0.1); color: var(--accent); } .notification-btn { margin-right: 1rem; position: relative; } .notification-count { position: absolute; top: -2px; right: -2px; background-color: var(--accent); color: white; font-size: 10px; font-weight: bold; height: 16px; width: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .user-menu { position: relative; margin-right: 1.5rem; } .user-button { display: flex; align-items: center; background: none; border: none; cursor: pointer; gap: 0.5rem; padding: 0.5rem; border-radius: 8px; transition: all 0.2s ease; } .user-button:hover { background-color: rgba(94, 129, 172, 0.1); } .avatar { width: 32px; height: 32px; border-radius: 50%; background-color: var(--accent); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 14px; } .user-info { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .user-name { font-size: 14px; font-weight: 500; color: var(--primary); } .user-role { font-size: 12px; color: var(--secondary); } .dropdown-icon { color: var(--secondary); transition: transform 0.3s ease; } .rotate-icon { transform: rotate(180deg); } .dropdown-menu { position: absolute; top: calc(100% + 0.5rem); right: 0; background-color: white; border-radius: 8px; box-shadow: 0 4px 12px var(--shadow); width: 200px; overflow: hidden; z-index: 100; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: all 0.3s ease; } .dropdown-menu.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .dropdown-item { padding: 0.75rem 1rem; color: var(--secondary); display: flex; align-items: center; gap: 0.75rem; text-decoration: none; transition: all 0.2s ease; } .dropdown-item:hover { background-color: rgba(94, 129, 172, 0.1); color: var(--accent); } .dropdown-item.danger:hover { color: var(--danger); } .dropdown-divider { height: 1px; background-color: rgba(94, 129, 172, 0.1); margin: 0.5rem 0; } .cta-button { background-color: var(--accent); color: white; border: none; border-radius: 8px; padding: 0.5rem 1rem; font-weight: 500; font-size: 14px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 4px rgba(94, 129, 172, 0.2); margin-left: 1rem; } .cta-button:hover { background-color: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(94, 129, 172, 0.3); } .search-container { position: relative; margin-left: 1.5rem; } .search-input { border: 1px solid rgba(94, 129, 172, 0.2); border-radius: 8px; padding: 0.5rem 1rem 0.5rem 2.5rem; font-size: 14px; color: var(--secondary); width: 240px; transition: all 0.3s ease; background-color: rgba(94, 129, 172, 0.05); } .search-input:focus { outline: none; border-color: var(--accent); background-color: white; width: 280px; box-shadow: 0 2px 8px rgba(94, 129, 172, 0.1); } .search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--secondary); } /* Mobile adjustments */ .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; margin-right: 0.5rem; } @media (max-width: 768px) { .header { padding: 0.75rem 0; } .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background-color: white; border-radius: 0 0 12px 12px; box-shadow: 0 4px 12px var(--shadow); padding: 1rem 0; gap: 0; z-index: 50; } .nav-menu.show { display: flex; } .nav-menu li { width: 100%; } .nav-link { display: block; padding: 0.75rem 1.5rem; } .nav-link:after { display: none; } .menu-toggle { display: block; } .search-container { display: none; } .user-info { display: none; } .notification-btn { margin-right: 0.5rem; } .logo { padding-left: 1rem; } .user-menu { margin-right: 1rem; } } @media (max-width: 480px) { .search-input { width: 160px; } .search-input:focus { width: 190px; } .user-menu { margin-right: 0.5rem; } } /* Animation for the dropdown */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(94, 129, 172, 0.4); } 70% { box-shadow: 0 0 0 6px rgba(94, 129, 172, 0); } 100% { box-shadow: 0 0 0 0 rgba(94, 129, 172, 0); } } /* Demo content below header */ .content { margin-top: 2rem; padding: 2rem; background-color: white; border-radius: 12px; box-shadow: 0 4px 12px var(--shadow); } .content h2 { color: var(--primary); margin-bottom: 1rem; } .content p { color: var(--secondary); line-height: 1.6; } .status-badge { display: inline-flex; align-items: center; padding: 0.25rem 0.5rem; border-radius: 16px; font-size: 12px; font-weight: 500; margin-left: 0.5rem; background-color: rgba(163, 190, 140, 0.2); color: var(--success); } .status-badge.premium::before { content: "✦"; margin-right: 4px; } </style> </head> <body> <header class="header"> <div class="logo"> <div class="logo-icon">DF</div> <div class="logo-text">DataForge</div> </div> <div class="search-container"> <div class="search-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="11" cy="11" r="8"></circle> <line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </div> <input type="text" class="search-input" placeholder="Search dashboards, reports, users..."> </div> <button class="menu-toggle" id="menuToggle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="3" y1="12" x2="21" y2="12"></line> <line x1="3" y1="6" x2="21" y2="6"></line> <line x1="3" y1="18" x2="21" y2="18"></line> </svg> </button> <div class="nav-container"> <ul class="nav-menu" id="navMenu"> <li><a href="#" class="nav-link active">Dashboard</a></li> <li><a href="#" class="nav-link">Analytics</a></li> <li><a href="#" class="nav-link">Data Sources</a></li> <li><a href="#" class="nav-link">Workflows</a></li> <li><a href="#" class="nav-link">Team</a></li> </ul> <button class="icon-btn notification-btn"> <div class="notification-count">3</div> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path> <path d="M13.73 21a2 2 0 0 1-3.46 0"></path> </svg> </button> <div class="user-menu"> <button class="user-button" id="userMenuToggle"> <div class="avatar">SK</div> <div class="user-info"> <div class="user-name">Sarah Kim</div> <div class="user-role">Data Analyst <span class="status-badge premium">Premium</span></div> </div> <div class="dropdown-icon" id="dropdownIcon"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polyline points="6 9 12 15 18 9"></polyline> </svg> </div> </button> <div class="dropdown-menu" id="userDropdown"> <a href="#" class="dropdown-item"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path> <circle cx="12" cy="7" r="4"></circle> </svg> My Profile </a> <a href="#" class="dropdown-item"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path> </svg> Activity Log </a> <a href="#" class="dropdown-item"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="3"></circle> <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path> </svg> Account Settings </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path> </svg> Help Center </a> <a href="#" class="dropdown-item danger"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path> <polyline points="16 17 21 12 16 7"></polyline> <line x1="21" y1="12" x2="9" y2="12"></line> </svg> Log Out </a> </div> </div> <button class="cta-button">New Analysis</button> </div> </header> <div class="content"> <h2>Welcome to your DataForge dashboard</h2> <p>Access your data pipelines, analytics, and custom reports from this central hub. Use the navigation above to explore your data ecosystem.</p> </div> <script> // User dropdown functionality const userMenuToggle = document.getElementById('userMenuToggle'); const userDropdown = document.getElementById('userDropdown'); const dropdownIcon = document.getElementById('dropdownIcon'); userMenuToggle.addEventListener('click', () => { userDropdown.classList.toggle('show'); dropdownIcon.classList.toggle('rotate-icon'); // Add pulse animation to avatar on dropdown open if (userDropdown.classList.contains('show')) { document.querySelector('.avatar').style.animation = 'pulse 1.5s'; } else { document.querySelector('.avatar').style.animation = 'none'; } }); // Close dropdown when clicking outside document.addEventListener('click', (event) => { if (!userMenuToggle.contains(event.target) && !userDropdown.contains(event.target)) { userDropdown.classList.remove('show'); dropdownIcon.classList.remove('rotate-icon'); } }); // Mobile menu toggle const menuToggle = document.getElementById('menuToggle'); const navMenu = document.getElementById('navMenu'); menuToggle.addEventListener('click', () => { navMenu.classList.toggle('show'); }); // Notification button effect const notificationBtn = document.querySelector('.notification-btn'); notificationBtn.addEventListener('click', () => { notificationBtn.classList.add('clicked'); // Create and append notification panel (for demo purposes) const notifPanel = document.createElement('div'); notifPanel.style.position = 'absolute'; notifPanel.style.top = 'calc(100% + 12px)'; notifPanel.style.right = '0'; notifPanel.style.width = '300px'; notifPanel.style.backgroundColor = 'white'; notifPanel.style.borderRadius = '8px'; notifPanel.style.boxShadow = '0 4px 12px rgba(76, 86, 106, 0.2)'; notifPanel.style.padding = '1rem'; notifPanel.style.zIndex = '100'; notifPanel.style.opacity = '0'; notifPanel.style.transform = 'translateY(-10px)'; notifPanel.style.transition = 'all 0.3s ease'; // Add notification content notifPanel.innerHTML = ` <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;"> <h3 style="color: #3B4252; font-size: 14px;">Notifications</h3> <button style="background: none; border: none; color: #5E81AC; font-size: 12px; cursor: pointer;">Mark all as read</button> </div> <div style="display: flex; align-items: flex-start; padding: 10px; border-radius: 6px; background-color: rgba(94, 129, 172, 0.1); margin-bottom: 8px;"> <div style="background-color: #A3BE8C; height: 8px; width: 8px; border-radius: 50%; margin-top: 6px; margin-right: 10px;"></div> <div> <p style="margin: 0; font-size: 13px; color: #3B4252;">Data pipeline completed successfully</p> <p style="margin: 0; font-size: 11px; color: #4C566A;">Sales data transformation - 10 min ago</p> </div> </div> <div style="display: flex; align-items: flex-start; padding: 10px; border-radius: 6px; background-color: rgba(94, 129, 172, 0.1); margin-bottom: 8px;"> <div style="background-color: #EBCB8B; height: 8px; width: 8px; border-radius: 50%; margin-top: 6px; margin-right: 10px;"></div> <div> <p style="margin: 0; font-size: 13px; color: #3B4252;">API rate limit at 80% capacity</p> <p style="margin: 0; font-size: 11px; color: #4C566A;">Marketing data source - 45 min ago</p> </div> </div> <div style="display: flex; align-items: flex-start; padding: 10px; border-radius: 6px; background-color: rgba(94, 129, 172, 0.1);"> <div style="background-color: #BF616A; height: 8px; width: 8px; border-radius: 50%; margin-top: 6px; margin-right: 10px;"></div> <div> <p style="margin: 0; font-size: 13px; color: #3B4252;">Team member request pending approval</p> <p style="margin: 0; font-size: 11px; color: #4C566A;">Alex Wang ([email protected]) - 2 hours ago</p> </div> </div> <button style="width: 100%; padding: 8px; border: none; background: none; text-align: center; color: #5E81AC; margin-top: 12px; font-size: 13px; cursor: pointer;">View all notifications</button> `; // Add to DOM if (!document.querySelector('.notif-panel')) { notificationBtn.style.position = 'relative'; notificationBtn.appendChild(notifPanel); notifPanel.classList.add('notif-panel'); // Animate in setTimeout(() => { notifPanel.style.opacity = '1'; notifPanel.style.transform = 'translateY(0)'; }, 50); // Auto close after interaction elsewhere document.addEventListener('click', function closeNotif(e) { if (!notifPanel.contains(e.target) && !notificationBtn.contains(e.target) || notifPanel.contains(e.target) && e.target.tagName === 'BUTTON') { notifPanel.style.opacity = '0'; notifPanel.style.transform = 'translateY(-10px)'; setTimeout(() => { notifPanel.remove(); }, 300); document.removeEventListener('click', closeNotif); } }); } }); // Add ripple effect to CTA button const ctaButton = document.querySelector('.cta-button'); ctaButton.addEventListener('click', function(e) { const ripple = document.createElement('span'); ripple.classList.add('ripple'); ripple.style.position = 'absolute'; ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.7)'; ripple.style.borderRadius = '50%'; ripple.style.pointerEvents = 'none'; ripple.style.width = '100px'; ripple.style.height = '100px'; ripple.style.transform = 'translate(-50%, -50%) scale(0)'; ripple.style.animation = 'ripple 0.6s linear'; const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 600); }); // Add ripple animation style const style = document.createElement('style'); style.textContent = ` @keyframes ripple { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } } .cta-button { position: relative; overflow: hidden; } `; document.head.appendChild(style); // Add hover effects for nav links const navLinks = document.querySelectorAll('.nav-link:not(.active)'); navLinks.forEach(link => { link.addEventListener('mouseenter', function() { this.style.transition = 'color 0.2s ease'; }); }); // Simulate loading state on search const searchInput = document.querySelector('.search-input'); searchInput.addEventListener('keydown', function(e) { if (e.key === 'Enter') { const searchIcon = document.querySelector('.search-icon'); const originalIcon = searchIcon.innerHTML; // Replace with loading spinner searchIcon.innerHTML = ` <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="search-spinner"> <circle cx="12" cy="12" r="10"></circle> <path d="M12 6v6l4 2"></path> </svg> `; const spinner = document.querySelector('.search-spinner'); spinner.style.animation = 'spin 0.8s linear infinite'; // Add spin animation const spinStyle = document.createElement('style'); spinStyle.textContent = ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } `; document.head.appendChild(spinStyle); // Reset after "search" setTimeout(() => { searchIcon.innerHTML = originalIcon; }, 1200); } }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Emberleaf Bistro</title> <style> :root { --primary: #c2652b; --secondary: #3b2313; --accent: #e9a056; --light: #fdf6eb; --dark: #241506; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } body { background-color: var(--light); color: var(--dark); width: 100%; height: 100vh; overflow-x: hidden; } .container { max-width: 700px; margin: 0 auto; padding: 0 20px; position: relative; } .header { background-color: var(--secondary); color: var(--light); width: 100%; position: relative; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); padding-bottom: 10px; overflow: hidden; } .logo-container { display: flex; justify-content: center; padding: 15px 0; position: relative; z-index: 10; } .logo { font-family: 'Playfair Display', serif; font-size: 2.5rem; font-weight: 700; color: var(--accent); letter-spacing: 1px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); position: relative; transition: transform 0.3s ease; } .logo:hover { transform: scale(1.05); } .logo::after { content: ""; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background-color: var(--accent); transition: width 0.3s ease; } .logo:hover::after { width: 100%; } .tagline { text-align: center; font-style: italic; font-size: 1rem; margin-top: -5px; margin-bottom: 10px; color: var(--light); opacity: 0.9; } .image-carousel { width: 100%; height: 250px; position: relative; overflow: hidden; margin-bottom: 20px; } .carousel-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; background-size: cover; background-position: center; display: flex; align-items: flex-end; } .carousel-slide.active { opacity: 1; } .dish-info { background: rgba(59, 35, 19, 0.8); padding: 10px 15px; width: 100%; transform: translateY(100%); transition: transform 0.3s ease-in-out; display: flex; justify-content: space-between; align-items: center; } .carousel-slide.active .dish-info { transform: translateY(0); } .dish-name { font-size: 1.2rem; font-weight: 600; color: var(--accent); } .dish-description { font-size: 0.9rem; color: var(--light); margin-right: 10px; } .nav { display: flex; justify-content: center; flex-wrap: wrap; margin-bottom: 15px; } .nav-item { margin: 0 15px; position: relative; cursor: pointer; color: var(--light); text-decoration: none; font-weight: 500; font-size: 1rem; transition: color 0.3s ease; } .nav-item:hover { color: var(--accent); } .nav-item::after { content: ""; position: absolute; bottom: -3px; left: 0; width: 0; height: 2px; background-color: var(--accent); transition: width 0.3s ease; } .nav-item:hover::after { width: 100%; } .specials-dropdown { position: relative; } .specials-content { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background-color: var(--secondary); min-width: 220px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); z-index: 100; padding: 15px; border-radius: 5px; border-top: 2px solid var(--accent); margin-top: 5px; } .specials-dropdown:hover .specials-content { display: block; animation: fadeIn 0.3s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } .special-item { margin-bottom: 12px; border-bottom: 1px dotted rgba(233, 160, 86, 0.3); padding-bottom: 8px; } .special-item:last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; } .special-name { color: var(--accent); font-weight: 600; font-size: 0.95rem; margin-bottom: 3px; } .special-price { color: var(--light); font-size: 0.9rem; opacity: 0.9; } .cta-container { display: flex; justify-content: center; gap: 20px; margin-top: 20px; } .cta-button { background-color: var(--primary); color: var(--light); border: none; padding: 12px 20px; border-radius: 30px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; } .cta-button:before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: var(--accent); transition: width 0.3s ease; z-index: -1; } .cta-button:hover:before { width: 100%; } .cta-button:hover { box-shadow: 0 5px 15px rgba(194, 101, 43, 0.4); transform: translateY(-2px); } .cta-icon { font-size: 1.1rem; } .daily-special-highlight { position: absolute; top: 20px; right: 20px; background-color: var(--accent); color: var(--dark); padding: 8px 15px; border-radius: 20px; font-weight: 600; font-size: 0.85rem; transform: rotate(5deg); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); z-index: 10; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: rotate(5deg) scale(1); } 50% { transform: rotate(5deg) scale(1.05); } 100% { transform: rotate(5deg) scale(1); } } @media (max-width: 600px) { .logo { font-size: 2rem; } .image-carousel { height: 200px; } .nav { flex-direction: column; align-items: center; gap: 15px; } .cta-container { flex-direction: column; gap: 10px; align-items: center; } .daily-special-highlight { top: 10px; right: 10px; font-size: 0.75rem; padding: 6px 12px; } .dish-info { flex-direction: column; align-items: flex-start; } .dish-name { margin-bottom: 5px; } } /* Font awesome icons */ .fas { font-family: 'Font Awesome'; font-weight: 900; } .fa-calendar-alt:before { content: "📅"; } .fa-utensils:before { content: "🍽️"; } .fa-fire:before { content: "🔥"; } </style> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet"> </head> <body> <header class="header"> <div class="container"> <div class="logo-container"> <h1 class="logo">Emberleaf Bistro</h1> </div> <p class="tagline">Farm-to-Table Cuisine • Est. 2010</p> <div class="daily-special-highlight"> <span class="fas fa-fire"></span> Chef's Special Today </div> <div class="image-carousel"> <div class="carousel-slide active" style="background-image: url('https://images.unsplash.com/photo-1576866209830-589e1bfbaa4d?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80')"> <div class="dish-info"> <div> <div class="dish-name">Seared Maple Glazed Salmon</div> <div class="dish-description">Locally sourced salmon with organic maple glaze</div> </div> </div> </div> <div class="carousel-slide" style="background-image: url('https://images.unsplash.com/photo-1600891964599-f61f26847b1c?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80')"> <div class="dish-info"> <div> <div class="dish-name">Wild Mushroom Risotto</div> <div class="dish-description">Creamy Arborio rice with seasonal forest mushrooms</div> </div> </div> </div> <div class="carousel-slide" style="background-image: url('https://images.unsplash.com/photo-1601063476524-f21b2c3dfe3f?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80')"> <div class="dish-info"> <div> <div class="dish-name">Herb-Crusted Rack of Lamb</div> <div class="dish-description">Grass-fed lamb with rosemary and thyme crust</div> </div> </div> </div> </div> <nav class="nav"> <a href="#" class="nav-item">Home</a> <a href="#" class="nav-item">About</a> <div class="nav-item specials-dropdown"> Daily Specials <div class="specials-content"> <div class="special-item"> <div class="special-name">Tuesday: Truffle Pasta</div> <div class="special-price">$24 • Limited Availability</div> </div> <div class="special-item"> <div class="special-name">Wednesday: Seafood Bouillabaisse</div> <div class="special-price">$32 • Chef's Signature</div> </div> <div class="special-item"> <div class="special-name">Thursday: Prime Rib Night</div> <div class="special-price">$38 • With Wine Pairing</div> </div> <div class="special-item"> <div class="special-name">Friday: Ember-Grilled Octopus</div> <div class="special-price">$28 • Seasonal Catch</div> </div> </div> </div> <a href="#" class="nav-item">Contact</a> </nav> <div class="cta-container"> <button class="cta-button reserve-btn"> <span class="fas fa-calendar-alt cta-icon"></span> Reserve a Table </button> <button class="cta-button menu-btn"> <span class="fas fa-utensils cta-icon"></span> View Full Menu </button> </div> </div> </header> <script> // Image carousel functionality const carouselSlides = document.querySelectorAll('.carousel-slide'); let currentSlide = 0; function nextSlide() { carouselSlides[currentSlide].classList.remove('active'); currentSlide = (currentSlide + 1) % carouselSlides.length; carouselSlides[currentSlide].classList.add('active'); } // Change slide every 5 seconds setInterval(nextSlide, 5000); // CTA Button interactions document.querySelector('.reserve-btn').addEventListener('click', function(e) { e.preventDefault(); // In a real implementation, this would open a reservation modal or form this.innerHTML = '<span class="fas fa-calendar-alt cta-icon"></span> Table Reserved!'; setTimeout(() => { this.innerHTML = '<span class="fas fa-calendar-alt cta-icon"></span> Reserve a Table'; }, 2000); }); document.querySelector('.menu-btn').addEventListener('click', function(e) { e.preventDefault(); // In a real implementation, this would navigate to the menu page this.innerHTML = '<span class="fas fa-utensils cta-icon"></span> Opening Menu...'; setTimeout(() => { this.innerHTML = '<span class="fas fa-utensils cta-icon"></span> View Full Menu'; }, 2000); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>EarthGuard Alliance - Protecting Our Planet's Future</title> <style> :root { --primary-color: #5d9b84; --secondary-color: #f3e7dd; --accent-color: #e2856e; --text-color: #414141; --light-color: #fcfcfc; --shadow-color: rgba(0, 0, 0, 0.1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: var(--light-color); color: var(--text-color); overflow-x: hidden; width: 100%; height: 100%; } .container { max-width: 700px; margin: 0 auto; position: relative; } .header { position: relative; overflow: hidden; background-color: var(--secondary-color); border-radius: 0 0 20px 20px; box-shadow: 0 4px 15px var(--shadow-color); } .nav-container { background: linear-gradient(90deg, rgba(93, 155, 132, 0.95) 0%, rgba(93, 155, 132, 0.8) 100%); padding: 15px 25px; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 10; } .logo { display: flex; align-items: center; gap: 10px; color: var(--light-color); text-decoration: none; transition: transform 0.3s ease; } .logo:hover { transform: scale(1.05); } .logo-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; } .logo-text { font-size: 1.2rem; font-weight: 600; letter-spacing: 0.5px; } .hamburger { display: none; cursor: pointer; background: none; border: none; color: var(--light-color); font-size: 1.5rem; } .nav-links { display: flex; gap: 20px; } .nav-link { color: var(--light-color); text-decoration: none; font-size: 0.9rem; position: relative; padding: 5px 0; font-weight: 500; opacity: 0.9; transition: all 0.3s ease; } .nav-link:hover { opacity: 1; } .nav-link::after { content: ''; position: absolute; width: 0%; height: 2px; bottom: 0; left: 0; background-color: var(--light-color); transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } .hero { padding: 30px 25px 50px; display: flex; flex-direction: column; align-items: flex-start; position: relative; z-index: 2; } .campaign-badge { background-color: var(--light-color); color: var(--primary-color); padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; margin-bottom: 15px; display: inline-flex; align-items: center; gap: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); animation: pulse 2s infinite ease-in-out; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .hero-title { font-size: 2.3rem; line-height: 1.2; color: var(--text-color); margin-bottom: 15px; font-weight: 700; } .hero-title span { color: var(--primary-color); position: relative; } .hero-title span::after { content: ''; position: absolute; width: 100%; height: 8px; bottom: 5px; left: 0; background-color: rgba(226, 133, 110, 0.3); z-index: -1; } .hero-description { font-size: 1rem; line-height: 1.6; margin-bottom: 25px; max-width: 500px; opacity: 0.9; } .cta-container { display: flex; gap: 15px; margin-top: 10px; flex-wrap: wrap; } .cta-primary { background-color: var(--accent-color); color: white; border: none; padding: 12px 25px; border-radius: 30px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 15px rgba(226, 133, 110, 0.3); } .cta-primary:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(226, 133, 110, 0.4); } .cta-secondary { background-color: transparent; color: var(--primary-color); border: 1px solid var(--primary-color); padding: 12px 25px; border-radius: 30px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .cta-secondary:hover { background-color: rgba(93, 155, 132, 0.1); transform: translateY(-3px); } .wave-decoration { position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; fill: var(--light-color); } .pattern-bg { position: absolute; top: 0; right: 0; height: 100%; width: 300px; opacity: 0.07; z-index: 1; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%235d9b84' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .floating-impact { position: absolute; top: 25px; right: 25px; background-color: white; border-radius: 12px; padding: 15px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); animation: float 5s ease-in-out infinite; z-index: 2; max-width: 150px; display: flex; flex-direction: column; align-items: center; } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .impact-icon { background-color: rgba(93, 155, 132, 0.1); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: 10px; color: var(--primary-color); } .impact-text { font-size: 0.8rem; text-align: center; font-weight: 600; color: var(--primary-color); } .impact-number { font-size: 1.2rem; font-weight: 700; color: var(--accent-color); } .mobile-nav { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--primary-color); z-index: 100; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; transform: translateX(100%); transition: transform 0.4s ease-in-out; } .mobile-nav.active { transform: translateX(0); } .close-nav { position: absolute; top: 25px; right: 25px; background: none; border: none; font-size: 1.5rem; color: var(--light-color); cursor: pointer; } .mobile-nav .nav-link { font-size: 1.2rem; padding: 10px; } @media (max-width: 700px) { .nav-links { display: none; } .hamburger { display: block; } .hero-title { font-size: 1.8rem; } .floating-impact { display: none; } .hero { padding: 20px 20px 40px; } } @media (max-width: 400px) { .logo-text { font-size: 1rem; } .logo-icon { width: 32px; height: 32px; } .cta-container { flex-direction: column; width: 100%; } .cta-primary, .cta-secondary { width: 100%; text-align: center; justify-content: center; } } .donation-progress { width: 100%; height: 8px; background-color: rgba(255, 255, 255, 0.3); border-radius: 4px; margin-top: 15px; position: relative; overflow: hidden; } .donation-bar { position: absolute; top: 0; left: 0; height: 100%; width: 65%; background-color: var(--accent-color); border-radius: 4px; } .donation-text { display: flex; justify-content: space-between; margin-top: 5px; font-size: 0.7rem; font-weight: 600; color: var(--text-color); } /* Loading animation for links */ .nav-link.loading::after { width: 20%; animation: loadingBar 1.5s ease infinite; } @keyframes loadingBar { 0% { width: 0%; left: 0; } 50% { width: 30%; } 100% { width: 0%; left: 100%; } } </style> </head> <body> <div class="container"> <header class="header"> <div class="nav-container"> <a href="#" class="logo"> <div class="logo-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 1.5C6.20156 1.5 1.5 6.20156 1.5 12C1.5 17.7984 6.20156 22.5 12 22.5C17.7984 22.5 22.5 17.7984 22.5 12C22.5 6.20156 17.7984 1.5 12 1.5Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 7.5V12" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16.5 10.5L12 12L13.5 16.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6.75 7.5H17.25" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="logo-text">EarthGuard Alliance</div> </a> <button class="hamburger" id="hamburger"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3 12H21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3 6H21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3 18H21" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> <nav class="nav-links"> <a href="#" class="nav-link">Our Mission</a> <a href="#" class="nav-link">Programs</a> <a href="#" class="nav-link">Volunteer</a> <a href="#" class="nav-link">About Us</a> </nav> </div> <div class="hero"> <div class="campaign-badge"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2L14.4 8.09L21 9.4L16.5 14.14L17.97 21L12 17.77L6.03 21L7.5 14.14L3 9.4L9.6 8.09L12 2Z" fill="#5d9b84"/> </svg> New Campaign </div> <h1 class="hero-title">Restoring <span>Coral Reefs</span> in the Pacific</h1> <p class="hero-description">Join our mission to rehabilitate damaged coral ecosystems affected by climate change. Your support helps us plant 500 new coral colonies this month.</p> <div class="cta-container"> <button class="cta-primary"> <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="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 6V12L16 14" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> Donate Now </button> <button class="cta-secondary">Learn More</button> </div> <div class="donation-progress"> <div class="donation-bar"></div> </div> <div class="donation-text"> <span>$32,450 raised</span> <span>Goal: $50,000</span> </div> </div> <div class="pattern-bg"></div> <div class="floating-impact"> <div class="impact-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M3 22V12C3 10.9 3.9 10 5 10H19C20.1 10 21 10.9 21 12V22" stroke="#5d9b84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M1 22H23" stroke="#5d9b84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M15 10V6C15 4.9 14.1 4 13 4H11C9.9 4 9 4.9 9 6V10" stroke="#5d9b84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <div class="impact-text">Coral colonies planted</div> <div class="impact-number">1,234</div> </div> <svg class="wave-decoration" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"> <path fill-opacity="1" d="M0,192L48,176C96,160,192,128,288,122.7C384,117,480,139,576,149.3C672,160,768,160,864,138.7C960,117,1056,75,1152,74.7C1248,75,1344,117,1392,138.7L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path> </svg> </header> </div> <div class="mobile-nav" id="mobile-nav"> <button class="close-nav" id="close-nav"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M18 6L6 18" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6 6L18 18" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> <a href="#" class="nav-link">Our Mission</a> <a href="#" class="nav-link">Programs</a> <a href="#" class="nav-link">Volunteer</a> <a href="#" class="nav-link">About Us</a> </div> <script> document.addEventListener('DOMContentLoaded', function() { const hamburger = document.getElementById('hamburger'); const mobileNav = document.getElementById('mobile-nav'); const closeNav = document.getElementById('close-nav'); const navLinks = document.querySelectorAll('.nav-link'); const ctaButtons = document.querySelectorAll('.cta-primary, .cta-secondary'); // Hamburger menu functionality hamburger.addEventListener('click', function() { mobileNav.classList.add('active'); }); closeNav.addEventListener('click', function() { mobileNav.classList.remove('active'); }); // Link click simulation navLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); // Reset all links navLinks.forEach(l => l.classList.remove('loading')); // Add loading animation to clicked link this.classList.add('loading'); // Close mobile menu if open mobileNav.classList.remove('active'); // Simulate page change after delay setTimeout(() => { this.classList.remove('loading'); }, 1500); }); }); // CTA button animations ctaButtons.forEach(button => { button.addEventListener('click', function() { this.style.transform = 'scale(0.95)'; setTimeout(() => { this.style.transform = ''; }, 200); }); }); // Donation bar animation const donationBar = document.querySelector('.donation-bar'); // Animate the donation bar on load setTimeout(() => { donationBar.style.transition = 'width 1.5s ease-in-out'; donationBar.style.width = '65%'; }, 500); }); </script> </body> </html>
