Fullscreen menus are a powerful tool in web design, offering a seamless and immersive user experience. They can transform the way users navigate a website, making it both intuitive and visually appealing.
In this article, we will explore 10 stunning fullscreen menu examples that showcase creativity and functionality. These examples will inspire you to elevate your own web design projects.
CODE1
Here's the code:
CODETEXT1
CODE2
Here's the code:
CODETEXT2
CODE3
Here's the code:
CODETEXT3
CODE4
Here's the code:
CODETEXT4
CODE5
Here's the code:
CODETEXT5
Subframe's drag-and-drop interface and intuitive, responsive canvas make designing pixel-perfect fullscreen menus a breeze. Loved by designers and developers alike, it ensures your UI is both stunning and functional.
Start for free and elevate your web design projects today!
CODE6
Here's the code:
CODETEXT6
CODE7
Here's the code:
CODETEXT7
CODE8
Here's the code:
CODETEXT8
CODE9
Here's the code:
CODETEXT9
CODE10
Here's the code:
CODETEXT10
Ready to transform your web design projects? With Subframe, you can create pixel-perfect UIs, including stunning fullscreen menus, in minutes. Our drag-and-drop editor ensures efficiency and precision.
Start for free and begin designing immediately. Elevate your UI game today!
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lucent Shop - Minimalist E-commerce</title> <style> :root { --primary-color: #f0f0f0; --accent-1: #f5e1e5; /* Soft pink */ --accent-2: #e1ecf5; /* Soft blue */ --accent-3: #e5f5e1; /* Soft green */ --accent-4: #f5eee1; /* Soft peach */ --text-color: #333; --transition-speed: 0.4s; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Helvetica Neue', Arial, sans-serif; } body { background-color: #fff; color: var(--text-color); overflow-x: hidden; max-width: 700px; height: 700px; margin: 0 auto; } .container { height: 100%; display: flex; flex-direction: column; } header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; background-color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); z-index: 10; } .logo { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.5px; } .logo span { font-weight: 300; } .menu-toggle { background: none; border: none; cursor: pointer; width: 30px; height: 20px; position: relative; z-index: 100; } .menu-toggle span { display: block; width: 30px; height: 2px; background-color: var(--text-color); margin-bottom: 6px; transition: transform var(--transition-speed), opacity var(--transition-speed); } .menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .fullscreen-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: white; display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--transition-speed) ease-in-out; z-index: 90; overflow-y: auto; } .fullscreen-menu.active { transform: translateX(0); } .menu-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-bottom: 1px solid #f0f0f0; } .menu-content { display: flex; flex-direction: column; flex-grow: 1; padding: 1rem; } .menu-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 1rem; } .category { display: flex; flex-direction: column; align-items: center; border-radius: 8px; padding: 1.5rem; transition: transform 0.3s, box-shadow 0.3s; cursor: pointer; position: relative; overflow: hidden; } .category-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; border-radius: 50%; transition: transform 0.3s ease, background-color 0.3s ease; } .category-icon svg { width: 24px; height: 24px; transition: transform 0.3s; } .category h3 { font-weight: 500; margin-bottom: 0.5rem; font-size: 1rem; } .category p { font-size: 0.875rem; color: #666; text-align: center; line-height: 1.4; opacity: 0; height: 0; transition: opacity 0.3s, height 0.3s; } .category:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); } .category:hover .category-icon { transform: scale(1.1); } .category:hover p { opacity: 1; height: auto; } .category::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background-color: transparent; transition: background-color 0.3s; } .category:hover::after { background-color: currentColor; } .category-summer { background-color: var(--accent-4); color: #d48c53; } .category-essentials { background-color: var(--accent-2); color: #5a89b8; } .category-sustainable { background-color: var(--accent-3); color: #6ab06a; } .category-collections { background-color: var(--accent-1); color: #c76f84; } .quick-links { display: flex; flex-wrap: wrap; margin-top: 2rem; padding: 1rem 0; border-top: 1px solid #f0f0f0; } .quick-links a { color: var(--text-color); text-decoration: none; margin-right: 1.5rem; margin-bottom: 0.75rem; font-size: 0.9rem; position: relative; transition: color 0.3s; } .quick-links a::after { content: ''; position: absolute; width: 0; height: 1px; bottom: -2px; left: 0; background-color: currentColor; transition: width 0.3s; } .quick-links a:hover::after { width: 100%; } .main-content { padding: 2rem 1.5rem; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background-color: var(--primary-color); } .main-content h1 { font-size: 1.8rem; font-weight: 300; margin-bottom: 1rem; opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s forwards 0.2s; } .main-content p { max-width: 500px; margin-bottom: 2rem; line-height: 1.6; color: #555; opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s forwards 0.4s; } .explore-btn { background-color: white; color: var(--text-color); border: none; padding: 0.75rem 2rem; font-size: 0.9rem; border-radius: 30px; cursor: pointer; transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); opacity: 0; transform: translateY(20px); animation: fadeUp 0.8s forwards 0.6s; } .explore-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } /* Search and recommendations section */ .search-container { margin: 1rem 0; width: 100%; opacity: 0; animation: fadeIn 0.5s forwards; } .search-box { width: 100%; padding: 0.8rem 1rem; border: 1px solid #eee; border-radius: 4px; font-size: 0.9rem; transition: border-color 0.3s, box-shadow 0.3s; } .search-box:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(225, 236, 245, 0.5); } .trending-tags { display: flex; flex-wrap: wrap; margin-top: 0.75rem; } .tag { font-size: 0.8rem; background-color: #f9f9f9; padding: 0.3rem 0.8rem; border-radius: 20px; margin-right: 0.5rem; margin-bottom: 0.5rem; cursor: pointer; transition: background-color 0.3s, transform 0.3s; } .tag:hover { background-color: var(--accent-2); transform: translateY(-2px); } /* Animations */ @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { to { opacity: 1; } } /* Pulse effect for the accent color circles */ .accent-circle { position: absolute; border-radius: 50%; opacity: 0.2; z-index: -1; animation: pulse 8s infinite alternate ease-in-out; } .circle-1 { width: 150px; height: 150px; background-color: var(--accent-1); top: 20%; left: 10%; animation-delay: 0s; } .circle-2 { width: 100px; height: 100px; background-color: var(--accent-2); bottom: 30%; right: 15%; animation-delay: 2s; } .circle-3 { width: 180px; height: 180px; background-color: var(--accent-3); bottom: 10%; left: 20%; animation-delay: 4s; } @keyframes pulse { 0% { transform: scale(1); opacity: 0.1; } 50% { transform: scale(1.1); opacity: 0.2; } 100% { transform: scale(1); opacity: 0.1; } } /* Responsive design */ @media (max-width: 576px) { .menu-categories { grid-template-columns: 1fr; } .main-content h1 { font-size: 1.5rem; } .main-content p { font-size: 0.9rem; } .quick-links { justify-content: center; } .quick-links a { margin: 0 0.7rem 0.7rem; } } </style> </head> <body> <div class="container"> <header> <div class="logo">lucent<span>shop</span></div> <button class="menu-toggle"> <span></span> <span></span> <span></span> </button> </header> <div class="main-content"> <div class="accent-circle circle-1"></div> <div class="accent-circle circle-2"></div> <div class="accent-circle circle-3"></div> <h1>Simplicity meets style in every product</h1> <p>Carefully curated collections that blend minimalist design with practical function—discover pieces that elevate your everyday life.</p> <button class="explore-btn" id="open-menu">Explore Categories</button> </div> <div class="fullscreen-menu"> <div class="menu-header"> <div class="logo">lucent<span>shop</span></div> <button class="menu-toggle active"> <span></span> <span></span> <span></span> </button> </div> <div class="menu-content"> <div class="search-container"> <input type="text" class="search-box" placeholder="What are you looking for today?"> <div class="trending-tags"> <div class="tag">Summer essentials</div> <div class="tag">Home office</div> <div class="tag">Sustainable picks</div> <div class="tag">New arrivals</div> <div class="tag">Gift ideas</div> </div> </div> <div class="menu-categories"> <div class="category category-summer"> <div class="category-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" 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> <h3>Summer Edit</h3> <p>Lightweight essentials for warmer days — breathable fabrics in cool-toned palettes.</p> </div> <div class="category category-essentials"> <div class="category-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect> <line x1="3" y1="9" x2="21" y2="9"></line> <line x1="9" y1="21" x2="9" y2="9"></line> </svg> </div> <h3>Daily Essentials</h3> <p>Functional basics with thoughtful details — timeless pieces for your everyday rotation.</p> </div> <div class="category category-sustainable"> <div class="category-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path> </svg> </div> <h3>Sustainable Living</h3> <p>Eco-conscious goods crafted from responsibly sourced materials — better choices for our planet.</p> </div> <div class="category category-collections"> <div class="category-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon> </svg> </div> <h3>Curated Collections</h3> <p>Limited edition pieces in cohesive themes — discover our specially curated seasonal collections.</p> </div> </div> <div class="quick-links"> <a href="#">New Arrivals</a> <a href="#">Bestsellers</a> <a href="#">Holiday Gift Guide</a> <a href="#">Home & Living</a> <a href="#">Apparel</a> <a href="#">Accessories</a> <a href="#">Sale</a> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const menuToggle = document.querySelectorAll('.menu-toggle'); const fullscreenMenu = document.querySelector('.fullscreen-menu'); const exploreBtn = document.getElementById('open-menu'); // Toggle menu function function toggleMenu() { fullscreenMenu.classList.toggle('active'); menuToggle.forEach(toggle => { toggle.classList.toggle('active'); }); // Prevent body scrolling when menu is open document.body.style.overflow = fullscreenMenu.classList.contains('active') ? 'hidden' : ''; // Animate menu items when menu opens if (fullscreenMenu.classList.contains('active')) { // Reset animation for search container const searchContainer = document.querySelector('.search-container'); searchContainer.style.animation = 'none'; searchContainer.offsetHeight; // Trigger reflow searchContainer.style.animation = 'fadeIn 0.5s forwards'; // Animate categories with staggered delay const categories = document.querySelectorAll('.category'); categories.forEach((category, index) => { category.style.opacity = '0'; category.style.transform = 'translateY(20px)'; setTimeout(() => { category.style.transition = 'opacity 0.5s, transform 0.5s'; category.style.opacity = '1'; category.style.transform = 'translateY(0)'; }, 100 + (index * 100)); }); } } // Menu toggle click event menuToggle.forEach(toggle => { toggle.addEventListener('click', toggleMenu); }); // Explore button click event exploreBtn.addEventListener('click', function() { fullscreenMenu.classList.add('active'); menuToggle.forEach(toggle => { toggle.classList.add('active'); }); document.body.style.overflow = 'hidden'; // Trigger animations const searchContainer = document.querySelector('.search-container'); searchContainer.style.animation = 'fadeIn 0.5s forwards'; const categories = document.querySelectorAll('.category'); categories.forEach((category, index) => { category.style.opacity = '0'; category.style.transform = 'translateY(20px)'; setTimeout(() => { category.style.transition = 'opacity 0.5s, transform 0.5s'; category.style.opacity = '1'; category.style.transform = 'translateY(0)'; }, 100 + (index * 100)); }); }); // Category hover effects const categories = document.querySelectorAll('.category'); categories.forEach(category => { category.addEventListener('mouseenter', function() { const icon = this.querySelector('.category-icon svg'); icon.style.transform = 'scale(1.2) rotate(5deg)'; }); category.addEventListener('mouseleave', function() { const icon = this.querySelector('.category-icon svg'); icon.style.transform = 'scale(1) rotate(0)'; }); }); // Handle tag clicks const tags = document.querySelectorAll('.tag'); tags.forEach(tag => { tag.addEventListener('click', function() { const searchBox = document.querySelector('.search-box'); searchBox.value = this.textContent; searchBox.focus(); }); }); // Prevent default form submission behavior document.addEventListener('submit', function(e) { e.preventDefault(); return false; }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>NexusCorp Fullscreen Menu</title> <style> :root { --primary-color: #222; --secondary-color: #444; --light-color: #f5f5f5; --accent-color: #4C6EF5; --text-color: #eee; --transition-speed: 0.4s; --transition-easing: cubic-bezier(0.25, 1, 0.5, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background-color: #fff; color: var(--text-color); height: 100vh; overflow-x: hidden; } .page-wrapper { position: relative; height: 100%; width: 100%; overflow: hidden; } .menu-trigger { position: fixed; top: 20px; right: 20px; z-index: 1000; width: 50px; height: 50px; border-radius: 50%; background: var(--primary-color); display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); transition: transform 0.3s var(--transition-easing); } .menu-trigger:hover { transform: scale(1.05); } .hamburger { width: 24px; height: 18px; position: relative; transition: 0.5s ease-in-out; } .hamburger span { display: block; position: absolute; height: 2px; width: 100%; background: var(--light-color); border-radius: 2px; opacity: 1; left: 0; transform: rotate(0deg); transition: 0.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; } .menu-open .hamburger span:nth-child(1) { top: 8px; width: 0%; left: 50%; } .menu-open .hamburger span:nth-child(2) { transform: rotate(45deg); } .menu-open .hamburger span:nth-child(3) { transform: rotate(-45deg); } .menu-open .hamburger span:nth-child(4) { top: 8px; width: 0%; left: 50%; } .content { padding: 20px; color: #333; position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; transition: all 0.5s var(--transition-easing); } .content-inner { max-width: 600px; } .content h1 { font-size: 3rem; margin-bottom: 20px; position: relative; color: var(--primary-color); } .content h1:after { content: ''; position: absolute; width: 80px; height: 4px; background-color: var(--accent-color); bottom: -10px; left: 50%; transform: translateX(-50%); } .content p { font-size: 1.1rem; line-height: 1.6; margin-bottom: 30px; color: var(--secondary-color); } .cta-button { display: inline-block; padding: 12px 30px; background-color: var(--accent-color); color: white; text-decoration: none; border-radius: 4px; font-weight: 600; transition: all 0.3s var(--transition-easing); border: none; cursor: pointer; box-shadow: 0 4px 6px rgba(76, 110, 245, 0.3); } .cta-button:hover { background-color: #3c5cd4; transform: translateY(-2px); box-shadow: 0 6px 10px rgba(76, 110, 245, 0.4); } .menu-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--primary-color); z-index: 100; visibility: hidden; opacity: 0; transition: all 0.5s var(--transition-easing); display: flex; justify-content: center; align-items: center; overflow: hidden; } .menu-open .menu-overlay { visibility: visible; opacity: 1; } .menu-container { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 40px; width: 90%; max-width: 1000px; opacity: 0; transform: translateY(40px); transition: all 0.7s var(--transition-easing); transition-delay: 0.1s; position: relative; } .menu-open .menu-container { opacity: 1; transform: translateY(0); } .menu-section { display: flex; flex-direction: column; } .menu-section h3 { color: var(--light-color); font-size: 1.8rem; margin-bottom: 20px; font-weight: 600; position: relative; padding-bottom: 10px; } .menu-section h3:after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; background-color: var(--accent-color); } .menu-items { list-style: none; padding: 0; } .menu-items li { margin-bottom: 12px; } .menu-items a { color: var(--text-color); text-decoration: none; font-size: 1.2rem; transition: all 0.3s var(--transition-easing); padding: 8px 0; display: inline-block; position: relative; } .menu-items a:hover { color: var(--accent-color); } .menu-items a:after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--accent-color); transition: width 0.3s var(--transition-easing); } .menu-items a:hover:after { width: 100%; } .has-submenu { position: relative; cursor: pointer; } .has-submenu::before { content: '+'; position: absolute; right: -20px; top: 8px; font-size: 1.2rem; transition: transform 0.3s var(--transition-easing); } .has-submenu.open::before { transform: rotate(45deg); } .submenu { list-style: none; margin-left: 20px; max-height: 0; overflow: hidden; transition: max-height 0.5s var(--transition-easing); } .submenu.open { max-height: 300px; } .submenu li { margin-bottom: 8px; } .submenu a { font-size: 1rem; color: #bbb; } .menu-footer { grid-column: span 2; margin-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; } .social-links { display: flex; gap: 15px; } .social-links a { width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); display: flex; justify-content: center; align-items: center; color: var(--text-color); text-decoration: none; transition: all 0.3s var(--transition-easing); } .social-links a:hover { background-color: var(--accent-color); transform: translateY(-3px); } .contact-info { color: var(--text-color); font-size: 0.9rem; } @media (max-width: 768px) { .menu-container { grid-template-columns: 1fr; grid-gap: 20px; } .menu-footer { grid-column: span 1; flex-direction: column; gap: 20px; align-items: flex-start; } .content h1 { font-size: 2.2rem; } .content p { font-size: 1rem; } } .menu-accent { position: absolute; width: 300px; height: 300px; border-radius: 50%; background-color: var(--accent-color); opacity: 0.05; top: -150px; right: -150px; z-index: -1; } .menu-accent:nth-child(2) { width: 200px; height: 200px; bottom: -100px; left: -100px; top: auto; right: auto; } .menu-background-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.03; background-size: 40px 40px; background-image: linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px); } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { animation: fadeInUp 0.6s var(--transition-easing) forwards; } .fade-in-up:nth-child(1) { animation-delay: 0.1s; } .fade-in-up:nth-child(2) { animation-delay: 0.2s; } .fade-in-up:nth-child(3) { animation-delay: 0.3s; } .fade-in-up:nth-child(4) { animation-delay: 0.4s; } /* Logo styles */ .logo { display: flex; align-items: center; font-weight: 700; font-size: 1.5rem; color: var(--accent-color); text-decoration: none; position: fixed; top: 20px; left: 20px; z-index: 1000; } .logo-icon { width: 28px; height: 28px; margin-right: 8px; position: relative; } .logo-icon::before, .logo-icon::after { content: ''; position: absolute; background-color: var(--accent-color); } .logo-icon::before { width: 100%; height: 12px; top: 0; border-radius: 4px; } .logo-icon::after { width: 12px; height: 12px; bottom: 0; right: 0; border-radius: 50%; } .logo-text { letter-spacing: 1px; } </style> </head> <body> <div class="page-wrapper"> <a href="#" class="logo"> <div class="logo-icon"></div> <div class="logo-text">NexusCorp</div> </a> <div class="menu-trigger"> <div class="hamburger"> <span></span> <span></span> <span></span> <span></span> </div> </div> <div class="content"> <div class="content-inner"> <h1 class="fade-in-up">Strategic Innovation for Tomorrow's Challenges</h1> <p class="fade-in-up">NexusCorp delivers enterprise-grade solutions that transform how businesses operate in today's digital landscape. Our expertise spans data analytics, cloud architecture, and strategic digital transformation.</p> <button class="cta-button fade-in-up">Explore Our Services</button> </div> </div> <div class="menu-overlay"> <div class="menu-accent"></div> <div class="menu-accent"></div> <div class="menu-background-grid"></div> <div class="menu-container"> <div class="menu-section"> <h3>Company</h3> <ul class="menu-items"> <li><a href="#">About NexusCorp</a></li> <li><a href="#">Our Leadership Team</a></li> <li><a href="#">Global Presence</a></li> <li><a href="#">Sustainability Initiatives</a></li> <li><a href="#" class="has-submenu">Careers</a> <ul class="submenu"> <li><a href="#">Current Openings</a></li> <li><a href="#">Benefits & Culture</a></li> <li><a href="#">Professional Development</a></li> </ul> </li> <li><a href="#">Investor Relations</a></li> </ul> </div> <div class="menu-section"> <h3>Solutions</h3> <ul class="menu-items"> <li><a href="#" class="has-submenu">Enterprise Platforms</a> <ul class="submenu"> <li><a href="#">Data Processing Framework</a></li> <li><a href="#">Integrated Business Suite</a></li> <li><a href="#">Security Infrastructure</a></li> </ul> </li> <li><a href="#" class="has-submenu">Industry Solutions</a> <ul class="submenu"> <li><a href="#">Financial Services</a></li> <li><a href="#">Healthcare Innovation</a></li> <li><a href="#">Manufacturing Excellence</a></li> <li><a href="#">Retail Transformation</a></li> </ul> </li> <li><a href="#">Strategic Consulting</a></li> <li><a href="#">Cloud Infrastructure</a></li> <li><a href="#">AI & Machine Learning</a></li> </ul> </div> <div class="menu-section"> <h3>Resources</h3> <ul class="menu-items"> <li><a href="#">Case Studies</a></li> <li><a href="#">White Papers</a></li> <li><a href="#">Knowledge Center</a></li> <li><a href="#">Technical Documentation</a></li> <li><a href="#">Events & Webinars</a></li> </ul> </div> <div class="menu-section"> <h3>Support</h3> <ul class="menu-items"> <li><a href="#">Client Portal</a></li> <li><a href="#">Technical Support</a></li> <li><a href="#">Implementation Guides</a></li> <li><a href="#">Training Programs</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <div class="menu-footer"> <div class="social-links"> <a href="#"><i class="fab fa-linkedin">in</i></a> <a href="#"><i class="fab fa-twitter">t</i></a> <a href="#"><i class="fab fa-github">g</i></a> <a href="#"><i class="fab fa-youtube">y</i></a> </div> <div class="contact-info"> <p>Global Headquarters: 1250 Technology Plaza, Suite 500</p> <p>[email protected] | +1 (888) 555-0123</p> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const menuTrigger = document.querySelector('.menu-trigger'); const pageWrapper = document.querySelector('.page-wrapper'); const hasSubmenuItems = document.querySelectorAll('.has-submenu'); // Toggle menu open/close menuTrigger.addEventListener('click', function() { pageWrapper.classList.toggle('menu-open'); document.body.classList.toggle('no-scroll'); }); // Handle submenu toggles hasSubmenuItems.forEach(item => { item.addEventListener('click', function(e) { e.preventDefault(); // Toggle the open class on the clicked item this.classList.toggle('open'); // Toggle the corresponding submenu const submenu = this.nextElementSibling; submenu.classList.toggle('open'); }); }); // Close menu when clicking on menu links (except ones with submenus) const menuLinks = document.querySelectorAll('.menu-items a:not(.has-submenu)'); menuLinks.forEach(link => { link.addEventListener('click', function(e) { e.preventDefault(); pageWrapper.classList.remove('menu-open'); document.body.classList.remove('no-scroll'); }); }); // Button click handler const ctaButton = document.querySelector('.cta-button'); ctaButton.addEventListener('click', function() { // Instead of redirecting, open the menu to showcase services pageWrapper.classList.add('menu-open'); document.body.classList.add('no-scroll'); }); // Apply sequential fade-in animations on page load const fadeElements = document.querySelectorAll('.fade-in-up'); fadeElements.forEach((el, index) => { el.style.opacity = '0'; setTimeout(() => { el.style.opacity = '1'; el.style.transform = 'translateY(0)'; }, 100 * (index + 1)); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wanderlust - Travel & Tourism Portal</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Montserrat', sans-serif; } body { overflow-x: hidden; background-color: #f5f5f5; width: 100%; height: 100vh; } .container { position: relative; width: 100%; height: 100vh; max-width: 700px; max-height: 700px; margin: 0 auto; overflow: hidden; } .menu-toggle { position: fixed; top: 20px; right: 20px; width: 50px; height: 50px; background-color: rgba(255, 255, 255, 0.8); border-radius: 50%; z-index: 1000; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, background-color 0.3s ease; } .menu-toggle:hover { transform: scale(1.1); background-color: rgba(255, 255, 255, 1); } .menu-toggle span { display: block; width: 25px; height: 2px; background-color: #333; transition: all 0.3s ease; position: relative; } .menu-toggle span::before, .menu-toggle span::after { content: ''; position: absolute; width: 100%; height: 2px; background-color: #333; transition: all 0.3s ease; } .menu-toggle span::before { transform: translateY(-8px); } .menu-toggle span::after { transform: translateY(8px); } .menu-toggle.active span { background-color: transparent; } .menu-toggle.active span::before { transform: translateY(0) rotate(45deg); } .menu-toggle.active span::after { transform: translateY(0) rotate(-45deg); } .fullscreen-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.95); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 999; opacity: 0; visibility: hidden; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .fullscreen-menu.active { opacity: 1; visibility: visible; } .menu-destinations { display: flex; flex-wrap: wrap; justify-content: center; max-width: 90%; padding: 20px; } .destination-item { width: 240px; height: 180px; margin: 10px; position: relative; overflow: hidden; border-radius: 12px; cursor: pointer; transform: translateY(50px); opacity: 0; transition: all 0.5s ease, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .fullscreen-menu.active .destination-item { opacity: 1; transform: translateY(0); } .destination-item:nth-child(1) { transition-delay: 0.1s; } .destination-item:nth-child(2) { transition-delay: 0.2s; } .destination-item:nth-child(3) { transition-delay: 0.3s; } .destination-item:nth-child(4) { transition-delay: 0.4s; } .destination-item:nth-child(5) { transition-delay: 0.5s; } .destination-item:nth-child(6) { transition-delay: 0.6s; } .destination-bg { position: absolute; width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 0.5s ease; } .destination-item:hover .destination-bg { transform: scale(1.1); } .destination-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); color: white; transform: translateY(20px); opacity: 0.8; transition: all 0.3s ease; } .destination-item:hover .destination-overlay { transform: translateY(0); opacity: 1; } .destination-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 5px; } .destination-desc { font-size: 0.8rem; max-height: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.4s ease; opacity: 0; } .destination-item:hover .destination-desc { max-height: 60px; opacity: 1; } .hero-section { position: relative; width: 100%; height: 100%; overflow: hidden; } .background-slider { position: absolute; top: 0; left: 0; width: 300%; height: 100%; display: flex; transition: transform 20s ease-in-out; } .slide { width: calc(100% / 3); height: 100%; background-size: cover; background-position: center; } .slide-1 { background-image: url('https://images.unsplash.com/photo-1504609773096-104ff2c73ba4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); } .slide-2 { background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); } .slide-3 { background-image: url('https://images.unsplash.com/photo-1519451241324-20b4ea2c4220?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); } .hero-content { position: absolute; top: 50%; left: 10%; transform: translateY(-50%); color: white; z-index: 10; max-width: 500px; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); } .hero-title { font-size: 3rem; font-weight: 800; margin-bottom: 20px; opacity: 0; transform: translateY(30px); animation: fadeInUp 1s forwards 0.5s; } .hero-subtitle { font-size: 1.2rem; margin-bottom: 30px; opacity: 0; transform: translateY(30px); animation: fadeInUp 1s forwards 0.8s; } .hero-cta { display: inline-block; padding: 12px 30px; background-color: #FF6B6B; color: white; text-decoration: none; border-radius: 30px; font-weight: 600; letter-spacing: 1px; transition: all 0.3s ease; opacity: 0; transform: translateY(30px); animation: fadeInUp 1s forwards 1.1s; box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4); } .hero-cta:hover { background-color: #ff5252; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(255, 107, 107, 0.6); } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%); } .scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; color: white; opacity: 0; animation: fadeIn 1s forwards 2s; } .scroll-indicator span { font-size: 0.8rem; margin-bottom: 10px; letter-spacing: 2px; text-transform: uppercase; } .scroll-arrow { width: 30px; height: 30px; border: 2px solid white; border-radius: 50%; display: flex; justify-content: center; align-items: center; animation: bounce 2s infinite; } .scroll-arrow::after { content: ''; width: 10px; height: 10px; border-right: 2px solid white; border-bottom: 2px solid white; transform: rotate(45deg) translate(-2px, -2px); } .social-links { position: absolute; bottom: 40px; right: 40px; display: flex; flex-direction: column; z-index: 2; } .social-link { color: white; font-size: 1.2rem; margin-bottom: 15px; opacity: 0.7; transition: all 0.3s ease; } .social-link:hover { opacity: 1; transform: scale(1.2); } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { to { opacity: 1; } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } @media (max-width: 768px) { .hero-title { font-size: 2rem; } .hero-subtitle { font-size: 1rem; } .menu-destinations { max-width: 100%; } .destination-item { width: calc(50% - 20px); height: 150px; } .social-links { right: 20px; bottom: 20px; } } @media (max-width: 480px) { .hero-title { font-size: 1.8rem; } .hero-content { left: 5%; max-width: 90%; } .destination-item { width: 100%; margin: 5px 10px; } } /* Custom scroll styling */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.5); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.8); } /* Cursor styles */ .custom-cursor { position: fixed; width: 20px; height: 20px; border-radius: 50%; background-color: rgba(255, 107, 107, 0.5); pointer-events: none; mix-blend-mode: difference; z-index: 9999; transform: translate(-50%, -50%); transition: transform 0.1s ease, width 0.3s ease, height 0.3s ease; } /* Social icons */ .social-icon { width: 24px; height: 24px; display: block; } </style> </head> <body> <div class="container"> <div class="custom-cursor"></div> <div class="hero-section"> <div class="background-slider"> <div class="slide slide-1"></div> <div class="slide slide-2"></div> <div class="slide slide-3"></div> </div> <div class="overlay"></div> <div class="hero-content"> <h1 class="hero-title">Discover Your Next Adventure</h1> <p class="hero-subtitle">Explore breathtaking landscapes, immerse in vibrant cultures, and create unforgettable memories around the world.</p> <a href="#" class="hero-cta menu-open">Explore Destinations</a> </div> <div class="scroll-indicator"> <span>Scroll to discover</span> <div class="scroll-arrow"></div> </div> <div class="social-links"> <a href="#" class="social-link"> <svg class="social-icon" viewBox="0 0 24 24" fill="#FFFFFF"> <path d="M12 2.04C6.5 2.04 2 6.53 2 12.06C2 17.06 5.66 21.21 10.44 21.96V14.96H7.9V12.06H10.44V9.85C10.44 7.34 11.93 5.96 14.22 5.96C15.31 5.96 16.45 6.15 16.45 6.15V8.62H15.19C13.95 8.62 13.56 9.39 13.56 10.18V12.06H16.34L15.89 14.96H13.56V21.96C18.34 21.21 22 17.06 22 12.06C22 6.53 17.5 2.04 12 2.04Z" /> </svg> </a> <a href="#" class="social-link"> <svg class="social-icon" viewBox="0 0 24 24" fill="#FFFFFF"> <path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" /> </svg> </a> <a href="#" class="social-link"> <svg class="social-icon" viewBox="0 0 24 24" fill="#FFFFFF"> <path d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z" /> </svg> </a> </div> </div> <div class="menu-toggle"> <span></span> </div> <div class="fullscreen-menu"> <div class="menu-destinations"> <div class="destination-item"> <div class="destination-bg" style="background-image: url('https://images.unsplash.com/photo-1542051841857-5f90071e7989?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"></div> <div class="destination-overlay"> <h3 class="destination-title">Tokyo, Japan</h3> <p class="destination-desc">Ultramodern meets traditional in this vibrant metropolis of neon and temples.</p> </div> </div> <div class="destination-item"> <div class="destination-bg" style="background-image: url('https://images.unsplash.com/photo-1516483638261-f4dbaf036963?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"></div> <div class="destination-overlay"> <h3 class="destination-title">Italian Riviera</h3> <p class="destination-desc">Crystal waters and colorful villages clinging to rugged cliffs.</p> </div> </div> <div class="destination-item"> <div class="destination-bg" style="background-image: url('https://images.unsplash.com/photo-1583422409516-2895a77efded?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"></div> <div class="destination-overlay"> <h3 class="destination-title">Santorini, Greece</h3> <p class="destination-desc">Iconic white-washed buildings and breathtaking sunsets over the Aegean.</p> </div> </div> <div class="destination-item"> <div class="destination-bg" style="background-image: url('https://images.unsplash.com/photo-1562832135-14a35d25edef?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"></div> <div class="destination-overlay"> <h3 class="destination-title">Bali, Indonesia</h3> <p class="destination-desc">Spiritual retreats, surf beaches, and rice terraces in a tropical paradise.</p> </div> </div> <div class="destination-item"> <div class="destination-bg" style="background-image: url('https://images.unsplash.com/photo-1471506480208-91b3a4cc78be?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"></div> <div class="destination-overlay"> <h3 class="destination-title">Iceland</h3> <p class="destination-desc">Land of fire and ice, with dramatic landscapes and northern lights.</p> </div> </div> <div class="destination-item"> <div class="destination-bg" style="background-image: url('https://images.unsplash.com/photo-1547448415-e9f5b28e570d?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');"></div> <div class="destination-overlay"> <h3 class="destination-title">New Zealand</h3> <p class="destination-desc">Breathtaking fjords, alpine ranges, and lush forests in Middle Earth.</p> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Menu toggle functionality const menuToggle = document.querySelector('.menu-toggle'); const fullscreenMenu = document.querySelector('.fullscreen-menu'); const menuOpenBtn = document.querySelector('.menu-open'); function toggleMenu() { menuToggle.classList.toggle('active'); fullscreenMenu.classList.toggle('active'); } menuToggle.addEventListener('click', toggleMenu); menuOpenBtn.addEventListener('click', function(e) { e.preventDefault(); toggleMenu(); }); // Background slider animation const backgroundSlider = document.querySelector('.background-slider'); let sliderPosition = 0; function animateSlider() { sliderPosition += 33.33; if (sliderPosition > 66.66) { setTimeout(() => { backgroundSlider.style.transition = 'none'; sliderPosition = 0; backgroundSlider.style.transform = `translateX(-${sliderPosition}%)`; setTimeout(() => { backgroundSlider.style.transition = 'transform 20s ease-in-out'; }, 50); }, 20000); } backgroundSlider.style.transform = `translateX(-${sliderPosition}%)`; } setInterval(animateSlider, 20000); // Parallax effect on scroll window.addEventListener('scroll', function() { const scrolled = window.scrollY; if (scrolled <= window.innerHeight) { const translateY = scrolled * 0.3; backgroundSlider.style.transform = `translateX(-${sliderPosition}%) translateY(-${translateY}px)`; } }); // Custom cursor effect const cursor = document.querySelector('.custom-cursor'); document.addEventListener('mousemove', function(e) { cursor.style.left = e.clientX + 'px'; cursor.style.top = e.clientY + 'px'; }); document.addEventListener('mousedown', function() { cursor.style.transform = 'translate(-50%, -50%) scale(0.7)'; }); document.addEventListener('mouseup', function() { cursor.style.transform = 'translate(-50%, -50%) scale(1)'; }); // Hover effects for destination items const destinationItems = document.querySelectorAll('.destination-item'); destinationItems.forEach(item => { item.addEventListener('mouseenter', function() { cursor.style.width = '40px'; cursor.style.height = '40px'; }); item.addEventListener('mouseleave', function() { cursor.style.width = '20px'; cursor.style.height = '20px'; }); }); // Hover effects for buttons const buttons = document.querySelectorAll('.hero-cta, .menu-toggle, .social-link'); buttons.forEach(button => { button.addEventListener('mouseenter', function() { cursor.style.width = '30px'; cursor.style.height = '30px'; }); button.addEventListener('mouseleave', function() { cursor.style.width = '20px'; cursor.style.height = '20px'; }); }); }); </script> </body> </html>
<html> <head> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Rajdhani", "Orbitron", sans-serif; } :root { --neon-blue: #00fffc; --neon-pink: #ff00ff; --neon-purple: #9d00ff; --bg-color: #0a0a12; --panel-color: rgba(15, 15, 25, 0.8); --text-color: #e0e0ff; } @font-face { font-family: 'Orbitron'; src: url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;800&display=swap'); } @font-face { font-family: 'Rajdhani'; src: url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500;700&display=swap'); } html, body { height: 100%; overflow: hidden; background-color: var(--bg-color); color: var(--text-color); cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%2300fffc" stroke-width="2"><circle cx="12" cy="12" r="5"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/></svg>') 12 12, auto; } #hub-container { position: relative; width: 100%; height: 100%; max-width: 700px; max-height: 700px; margin: 0 auto; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; } .grid-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(rgba(0, 255, 252, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 252, 0.05) 1px, transparent 1px); background-size: 30px 30px; z-index: 1; pointer-events: none; } .noise-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.08; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAABNRJREFUaEPtmttTG1UUxr+zu0lIQkIIl3AptFALbQFbqNraiVZ7s/XBF2d8cKY+9aHt+NCZ+ug/0FfbB8dxRmeqD1qtl9YLthYKFFoLlEsJgQAJ5AbZPWe3CSGBTdjdk+Dw4Mx5yTlnf9/+ztnfWYRI7R/cRVHnEm5JHQRkQbgVy0NKvYctyEMMJEX3HH/66mvUlL+O5bNrqLg9BhMEjz3NtQeW11nkV01N2E7m2VpYeOXOHUQFh7EgOHyMCmHGCPK40IqPn2uhL9cHzwtF2yc3VZBno58Sn5UCpK0PcF6PkCBSoQHm4hoEJ4YGEiMVFEBuyCdwruY9TH75Dc09PTx3C+3eZgC/rnyENIBGNRFpGeBY33vwOp0AAL/Ph7aT72LreqK7J7PydBZcBXioGUbO9/Si5/f+4JtPXThHOtecFiBnZLgFGJGGc04yXqQmC9LaTJ+0tdOBnp7g6+XlF8jFm9dT0nQZhGcZDR+0tf3rDQ6OREWU19bIDaNVYxA+e9AkQO6HDyAD7/0fQPgCDtYKVCAaARmYAJM1rvN2vQBxPxtH9ZtJcKxnKqr8L7QE2dEKxDulH0h4KqU3SEuL8uI7PeEQcVGttLRNJEBa0wGEL+Bw2WsCYhgbQvWHVtJ1kRATNbZtZYAA7K9GsD7vhlBkIfbsHOzPdkJkjCnPiEk6r+PQWR2jQAJ9IzAaPVhcdCIzy4K8HA8E/23Y/jgLi9mE7WAAXnbvuKljUzG2SQM5ePIU8nLzAQDuVy+wdP8eMjLMYXtm9nQ4hNlsghmadGKTQPiwM38Zx3FTG7Ky8hF+Crtdbvxz9w5qDx+ByWRmaxqEL6Dw1TME4mxvx3A3X4CGhoaotQODA2hsbITFYmFrFoQvYD7eJD2PdBw/gWs3bqCgoJDbSrJv3rxJNTU1bLoE4YvXuDAuJQeT9LajpqaWBgeHIEniEqeyokIbJfxVSCsQnsbS0tLVgUlmPGkMwgPCt38oHO1SB2ltJm0BQqcGNrE9PYLIJxVkRQ/XegRjDw9gZ3wfkm8bQlEhCFaBWL4eg8HSAe/vN3YvZZLpEjwLNOmD8NnzgDRIHXivnI97a6XsHMYDEixvVCHnywH9QPgC5uNN2EUbQoF3xYWN62sTngAkdwDrP05h3RWA5LRDssaCGGE2mZGVYWMgZfXV0UH4trNwBCRmcbxTKTcaFZAdPw+HRMgLQMwzUDh7oMEwQ0nPBVDxGsBiAUkFMLxRBOiYm5Ik2MdnYG0sg7WhDMZkJ1/6ICqMJHlhPNaM3KICpZO6iOXJJWz88UAZIGoQgyEbW0trcJw9pIA8EkMgU0+wNe0Or43DQ888Sq4dJk1RNQERynNh/fI6pEBqoiR78fbNCgrYzm4Ydoa/S/YIXAL7+dMfBnYQCZJn49nZ07cVNZLplNk/f40SQZiMYlRwTAskKogrOC7nlfRAooK4DG4ld83R/YxMxyLsIIr39IZYXNxzJHFGohPXWsZdIlc+nlR7MGdNO5C9BDFAEh2Ic+qg30jaqzZsrcJ8I7E2Vtj/aBtJCIpVQ1kN5BBVw7V3qnHrWA3aT5yIbF9hNhZG6tnm9/y8BoqQ3Hkk1QOm+v+h/P4f8PVOxHrwZLgAAAAASUVORK5CYII='); z-index: 2; pointer-events: none; } .logo { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; z-index: 5; position: relative; } .logo-text { font-size: 3rem; font-weight: 800; letter-spacing: 2px; font-family: 'Orbitron', sans-serif; text-transform: uppercase; position: relative; background: linear-gradient(45deg, var(--neon-blue), var(--neon-pink), var(--neon-purple)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 10px rgba(0, 255, 252, 0.5), 0 0 20px rgba(0, 255, 252, 0.3), 0 0 30px rgba(0, 255, 252, 0.1); } .logo-text::before { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: transparent; background: linear-gradient(45deg, var(--neon-blue), var(--neon-pink), var(--neon-purple)); -webkit-background-clip: text; background-clip: text; opacity: 0.5; filter: blur(8px); z-index: -1; } .menu-container { width: 85%; max-width: 600px; background-color: var(--panel-color); border-radius: 8px; padding: 30px; box-shadow: 0 0 20px rgba(0, 255, 252, 0.2), 0 0 40px rgba(0, 255, 252, 0.1); backdrop-filter: blur(5px); border: 1px solid rgba(0, 255, 252, 0.3); z-index: 5; position: relative; } .menu-item { position: relative; margin: 15px 0; overflow: hidden; border-radius: 4px; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .menu-item::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0, 255, 252, 0), rgba(0, 255, 252, 0.2), rgba(0, 255, 252, 0)); transition: left 0.5s ease; z-index: -1; } .menu-item:hover::before { left: 100%; } .menu-item:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 15px rgba(0, 255, 252, 0.3), 0 0 30px rgba(0, 255, 252, 0.1); } .menu-item.active { background-color: rgba(0, 255, 252, 0.1); box-shadow: 0 0 15px rgba(0, 255, 252, 0.4), 0 0 30px rgba(0, 255, 252, 0.2); } .menu-btn { display: block; width: 100%; padding: 15px 20px; background-color: rgba(15, 15, 25, 0.8); color: var(--text-color); border: 1px solid rgba(0, 255, 252, 0.3); font-size: 1.1rem; font-weight: 600; letter-spacing: 1px; text-align: left; cursor: pointer; transition: all 0.3s ease; position: relative; z-index: 1; overflow: hidden; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; } .menu-btn:focus { outline: none; } .btn-icon { position: relative; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; } .btn-icon svg { width: 100%; height: 100%; position: absolute; transition: all 0.3s ease; } .btn-icon .icon-hover { opacity: 0; transform: scale(0.5); } .menu-item:hover .btn-icon .icon-default { opacity: 0; transform: scale(1.5); } .menu-item:hover .btn-icon .icon-hover { opacity: 1; transform: scale(1); } .tag { position: absolute; top: 10px; right: 10px; background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink)); color: black; padding: 3px 8px; border-radius: 50px; font-size: 0.65rem; font-weight: bold; text-transform: uppercase; box-shadow: 0 0 10px rgba(0, 255, 252, 0.5); animation: pulse 2s infinite; } .notification-dot { position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; background-color: var(--neon-pink); border-radius: 50%; box-shadow: 0 0 10px var(--neon-pink); animation: pulse 2s infinite; } .user-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; padding: 10px 15px; background-color: rgba(30, 30, 50, 0.6); border-radius: 6px; border: 1px solid rgba(0, 255, 252, 0.2); } .user-info { display: flex; align-items: center; } .avatar { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; margin-right: 10px; border: 2px solid var(--neon-blue); box-shadow: 0 0 10px rgba(0, 255, 252, 0.5); } .avatar img { width: 100%; height: 100%; object-fit: cover; } .username { font-size: 0.9rem; font-weight: 600; color: var(--text-color); } .user-status { display: flex; align-items: center; } .level { background-color: rgba(0, 255, 252, 0.1); color: var(--neon-blue); padding: 2px 8px; border-radius: 20px; font-size: 0.7rem; margin-right: 10px; border: 1px solid rgba(0, 255, 252, 0.3); } .credits { background-color: rgba(255, 0, 255, 0.1); color: var(--neon-pink); padding: 2px 8px; border-radius: 20px; font-size: 0.7rem; border: 1px solid rgba(255, 0, 255, 0.3); } .footer { display: flex; justify-content: space-between; margin-top: 20px; font-size: 0.8rem; z-index: 5; position: relative; } .social-icons { display: flex; gap: 15px; } .social-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background-color: rgba(30, 30, 50, 0.6); border-radius: 50%; transition: all 0.3s ease; border: 1px solid rgba(0, 255, 252, 0.3); } .social-icon:hover { transform: translateY(-3px); box-shadow: 0 0 15px rgba(0, 255, 252, 0.5); } .social-icon svg { width: 15px; height: 15px; fill: var(--text-color); } #system-message { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: rgba(30, 30, 50, 0.9); padding: 10px 20px; border-radius: 20px; border: 1px solid rgba(0, 255, 252, 0.3); color: var(--text-color); font-size: 0.8rem; opacity: 0; transition: opacity 0.3s ease; z-index: 10; box-shadow: 0 0 15px rgba(0, 255, 252, 0.3); text-align: center; max-width: 80%; pointer-events: none; } .glitch { position: relative; animation: glitch 1s infinite; } @keyframes glitch { 0% { transform: translate(0); text-shadow: 0 0 0 transparent; } 2% { transform: translate(-3px, 2px); text-shadow: 2px 0 var(--neon-pink); } 4% { transform: translate(0); text-shadow: 0 0 0 transparent; } 6% { transform: translate(3px, -2px); text-shadow: -2px 0 var(--neon-blue); } 8% { transform: translate(0); text-shadow: 0 0 0 transparent; } 100% { transform: translate(0); text-shadow: 0 0 0 transparent; } } @keyframes pulse { 0% { opacity: 0.6; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1); } 100% { opacity: 0.6; transform: scale(0.95); } } .hacker-animation { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: hidden; } .code-line { position: absolute; color: var(--neon-blue); font-size: 14px; opacity: 0.15; font-family: monospace; white-space: nowrap; animation: code-fall linear infinite; } @keyframes code-fall { 0% { transform: translateY(-100%); } 100% { transform: translateY(700px); } } .circle-loader { position: absolute; width: 300px; height: 300px; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; } .circle-loader svg { width: 100%; height: 100%; animation: rotate 20s linear infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Responsive styles */ @media screen and (max-width: 560px) { .logo-text { font-size: 2.2rem; } .menu-container { width: 90%; padding: 20px; } .menu-btn { padding: 12px 15px; font-size: 0.9rem; } .user-bar { flex-direction: column; gap: 10px; align-items: flex-start; } .user-status { width: 100%; justify-content: flex-start; } } @media screen and (max-height: 600px) { .logo { margin-bottom: 10px; } .menu-item { margin: 8px 0; } .menu-btn { padding: 10px 15px; } .footer { margin-top: 10px; } } </style> </head> <body> <div id="hub-container"> <div class="grid-overlay"></div> <div class="noise-overlay"></div> <div class="hacker-animation" id="hacker-animation"></div> <div class="circle-loader"> <svg viewBox="0 0 100 100"> <circle cx="50" cy="50" r="48" fill="none" stroke="rgba(0, 255, 252, 0.05)" stroke-width="0.5"></circle> <circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255, 0, 255, 0.05)" stroke-width="0.3"></circle> <circle cx="50" cy="50" r="32" fill="none" stroke="rgba(157, 0, 255, 0.05)" stroke-width="0.2"></circle> <circle cx="50" cy="50" r="25" fill="none" stroke="rgba(0, 255, 252, 0.05)" stroke-width="0.1"></circle> <path d="M50,2 A48,48 0 0,1 98,50" fill="none" stroke="rgba(0, 255, 252, 0.2)" stroke-width="0.5"></path> <path d="M50,10 A40,40 0 0,1 90,50" fill="none" stroke="rgba(255, 0, 255, 0.2)" stroke-width="0.3"></path> </svg> </div> <div class="logo"> <h1 class="logo-text" data-text="NEXUS">NEXUS</h1> </div> <div class="menu-container"> <div class="user-bar"> <div class="user-info"> <div class="avatar"> <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzAwZmZmYyI+PHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTAgM2MyLjY3IDAgOCA1LjMxIDggMTEuNTEgMCAxLjA4LS44NiAxLjQ5LTEuNTMgMS40OS0xLjEyIDAtMi45NC0xLjE0LTUuNTMtMS4xNC0uNDcgMC0uOTQuMDMtMS40Ljk4LS43OCAxLjU1LTEuOTkgMS41NS0yLjU0IDEuNTUtLjg2IDAtMS44Ni0uNDQtMi42My0uOTItLjMzLS4yLS41OC0uMzgtLjgxLS41MS0uMzktLjIxLS43Ni0uNDEtMS4xNC0uNDFoLS4wNGMtLjM3LS4wMS0uODYuMDgtMS4zMy4yMUMzLjY3IDE1IDMgMTMuNjYgMyAxM2MwLTQuOTYgNC40NS05IDktOXptMi4wMS0xLjJjLS4zOC0uMDItLjc3LjA2LTEuMDQuMzFsLTEgLjkyLS45NS0uOTVjLS4yOS0uMy0uNzctLjM4LTEuMTYtLjI0LS40LjE3LS42NS41Ny0uNjUgMS0uMDEgMi45LjM5IDQuOSAxLjAzIDYuOTRjLjE1LjE3LjQyLjE3LjU3IDBsLjE3LS4xN2MuNTktLjU5IDEuNTQtLjU5IDIuMTIgMGwuMTcuMTdjLjE1LjE3LjQyLjE3LjU3IDBsLjE3LS4xNy4wNS0uMDUgMS4wMy02Ljk0YzAtLjQzLS4yNi0uODItLjY1LS45OS0uMTItLjA1LS4yNS0uMDctLjM3LS4wOGwuMDEtLjAxeiIvPjwvc3ZnPg==" alt="Avatar"> </div> <div class="username">CyberVanguard</div> </div> <div class="user-status"> <div class="level">LVL 42</div> <div class="credits">2,750 CREDITS</div> </div> </div> <div class="menu-item"> <button class="menu-btn"> Tournaments <div class="btn-icon"> <svg class="icon-default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#00fffc"> <path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM7 10.82C5.84 10.4 5 9.3 5 8V7h2v3.82zM19 8c0 1.3-.84 2.4-2 2.82V7h2v1z"/> </svg> <svg class="icon-hover" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ff00ff"> <path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM7 10.82C5.84 10.4 5 9.3 5 8V7h2v3.82zM19 8c0 1.3-.84 2.4-2 2.82V7h2v1z"/> </svg> </div> <div class="tag glitch">LIVE</div> </button> </div> <div class="menu-item"> <button class="menu-btn"> Squad Finder <div class="btn-icon"> <svg class="icon-default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#00fffc"> <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/> </svg> <svg class="icon-hover" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ff00ff"> <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/> </svg> </div> </button> </div> <div class="menu-item"> <button class="menu-btn"> Achievements <div class="btn-icon"> <svg class="icon-default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#00fffc"> <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/> </svg> <svg class="icon-hover" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ff00ff"> <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/> </svg> </div> </button> </div> <div class="menu-item"> <button class="menu-btn"> Strategy Labs <div class="btn-icon"> <svg class="icon-default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#00fffc"> <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14h-2V9h-2V7h4v10z"/> </svg> <svg class="icon-hover" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ff00ff"> <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14h-2V9h-2V7h4v10z"/> </svg> </div> <div class="notification-dot"></div> </button> </div> <div class="menu-item"> <button class="menu-btn"> Neural Marketplace <div class="btn-icon"> <svg class="icon-default" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#00fffc"> <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/> </svg> <svg class="icon-hover" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ff00ff"> <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/> </svg> </div> </button> </div> </div> <div class="footer"> <div class="social-icons"> <a href="#" class="social-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M12 2.163c3.204 0 3.584.012 4.85
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Festivo - Event Management Platform</title> <style> @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&display=swap'); :root { --primary: #FF3366; --secondary: #6610F2; --tertiary: #33CCFF; --accent: #FFCC00; --dark: #121212; --light: #F8F9FA; --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Outfit', sans-serif; } body { background-color: var(--light); color: var(--dark); overflow-x: hidden; height: 100vh; width: 100%; } .container { max-width: 700px; height: 700px; margin: 0 auto; overflow: hidden; position: relative; } .menu-toggle { position: fixed; top: 20px; right: 20px; z-index: 1000; background: var(--primary); border: none; width: 60px; height: 60px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(255, 51, 102, 0.3); transition: var(--transition); } .menu-toggle:hover { transform: scale(1.05); box-shadow: 0 6px 25px rgba(255, 51, 102, 0.4); } .menu-toggle span { display: block; width: 24px; height: 3px; background: var(--light); position: relative; transition: var(--transition); } .menu-toggle span:before, .menu-toggle span:after { content: ''; position: absolute; width: 100%; height: 100%; background: var(--light); transition: var(--transition); } .menu-toggle span:before { transform: translateY(-8px); } .menu-toggle span:after { transform: translateY(8px); } .menu-toggle.active span { background: transparent; } .menu-toggle.active span:before { transform: rotate(45deg); } .menu-toggle.active span:after { transform: rotate(-45deg); } .fullscreen-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--dark); display: flex; flex-direction: column; z-index: 999; opacity: 0; visibility: hidden; transform: translateY(-100%); transition: var(--transition); overflow-y: auto; padding: 80px 20px 20px; } .fullscreen-menu.active { opacity: 1; visibility: visible; transform: translateY(0); } .menu-header { text-align: center; margin-bottom: 30px; position: relative; } .menu-title { font-size: 3.5rem; font-weight: 800; color: var(--light); margin-bottom: 10px; background: linear-gradient(45deg, var(--primary), var(--tertiary)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: titleGlow 3s infinite alternate; } @keyframes titleGlow { 0% { text-shadow: 0 0 10px rgba(255, 51, 102, 0.5); } 100% { text-shadow: 0 0 20px rgba(51, 204, 255, 0.8); } } .menu-subtitle { font-size: 1.2rem; color: var(--light); opacity: 0.8; margin-bottom: 20px; } .notification-badge { position: absolute; top: 10px; right: 20px; background: var(--accent); color: var(--dark); padding: 5px 10px; border-radius: 20px; font-weight: 600; font-size: 0.9rem; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .category-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 30px; flex-wrap: wrap; } .category-tab { padding: 10px 20px; background: rgba(255, 255, 255, 0.1); border-radius: 30px; color: var(--light); border: none; cursor: pointer; transition: var(--transition); font-weight: 600; position: relative; overflow: hidden; } .category-tab:before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: var(--transition); } .category-tab:hover:before { left: 100%; } .category-tab.active { background: var(--primary); box-shadow: 0 4px 15px rgba(255, 51, 102, 0.3); } .events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; overflow-y: auto; padding-bottom: 20px; } .event-card { background: rgba(255, 255, 255, 0.05); border-radius: 15px; overflow: hidden; transition: var(--transition); position: relative; height: 250px; display: flex; flex-direction: column; cursor: pointer; transform-origin: center; animation: cardAppear 0.5s forwards; opacity: 0; } @keyframes cardAppear { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .event-card:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); } .event-card:before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; z-index: -1; background: linear-gradient(45deg, var(--primary), var(--secondary), var(--tertiary)); border-radius: 20px; opacity: 0; transition: var(--transition); } .event-card:hover:before { opacity: 1; top: -3px; left: -3px; right: -3px; bottom: -3px; } .event-image { height: 140px; background-size: cover; background-position: center; position: relative; } .event-date { position: absolute; top: 10px; right: 10px; background: var(--accent); color: var(--dark); padding: 5px 10px; border-radius: 5px; font-weight: 600; font-size: 0.8rem; } .event-content { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; } .event-title { font-size: 1.1rem; font-weight: 600; color: var(--light); margin-bottom: 5px; } .event-location { font-size: 0.9rem; color: var(--light); opacity: 0.7; margin-bottom: 10px; display: flex; align-items: center; } .event-location i { margin-right: 5px; color: var(--tertiary); } .event-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; } .event-price { font-weight: 700; color: var(--accent); } .event-attendees { display: flex; align-items: center; font-size: 0.85rem; color: var(--light); opacity: 0.8; } .event-attendees i { margin-right: 5px; color: var(--primary); } .search-box { margin-bottom: 30px; position: relative; } .search-input { width: 100%; padding: 15px 20px; padding-left: 50px; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 30px; color: var(--light); font-size: 1rem; transition: var(--transition); } .search-input:focus { outline: none; background: rgba(255, 255, 255, 0.15); box-shadow: 0 0 0 3px rgba(255, 51, 102, 0.3); } .search-input::placeholder { color: rgba(255, 255, 255, 0.5); } .search-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--primary); font-size: 1.2rem; } .featured-event { background: linear-gradient(45deg, var(--secondary), var(--primary)); border-radius: 15px; padding: 20px; margin-bottom: 30px; display: flex; gap: 20px; position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(102, 16, 242, 0.3); animation: featuredPulse 6s infinite alternate; } @keyframes featuredPulse { 0% { box-shadow: 0 10px 30px rgba(102, 16, 242, 0.3); } 100% { box-shadow: 0 10px 30px rgba(255, 51, 102, 0.5); } } .featured-image { width: 120px; height: 120px; border-radius: 10px; background-size: cover; background-position: center; flex-shrink: 0; } .featured-content { flex-grow: 1; } .featured-label { display: inline-block; background: var(--accent); color: var(--dark); padding: 3px 10px; border-radius: 5px; font-weight: 600; font-size: 0.8rem; margin-bottom: 10px; text-transform: uppercase; } .featured-title { font-size: 1.4rem; font-weight: 700; color: var(--light); margin-bottom: 10px; } .featured-info { display: flex; gap: 15px; margin-bottom: 15px; } .featured-date, .featured-location { display: flex; align-items: center; font-size: 0.9rem; color: var(--light); opacity: 0.8; } .featured-date i, .featured-location i { margin-right: 5px; opacity: 0.9; } .featured-cta { display: inline-block; background: rgba(255, 255, 255, 0.2); color: var(--light); padding: 8px 15px; border-radius: 5px; text-decoration: none; font-weight: 600; transition: var(--transition); } .featured-cta:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); } .featured-pattern { position: absolute; bottom: -20px; right: -20px; width: 150px; height: 150px; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 2px, transparent 2px); background-size: 15px 15px; transform: rotate(20deg); } .loading-spinner { display: flex; justify-content: center; align-items: center; height: 100px; } .spinner { width: 40px; height: 40px; border: 4px solid rgba(255, 255, 255, 0.1); border-radius: 50%; border-top-color: var(--primary); animation: spin 1s infinite linear; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .category-content { display: none; } .category-content.active { display: block; } .empty-state { text-align: center; padding: 30px; color: var(--light); opacity: 0.7; } .empty-state i { font-size: 3rem; margin-bottom: 15px; color: var(--tertiary); } .empty-state p { font-size: 1.1rem; } /* Responsive styles */ @media (max-width: 700px) { .menu-title { font-size: 2.5rem; } .featured-event { flex-direction: column; } .featured-image { width: 100%; height: 150px; } .events-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } @media (max-width: 500px) { .events-grid { grid-template-columns: 1fr; } .category-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 10px; justify-content: flex-start; } .category-tab { white-space: nowrap; } } /* Font Awesome 5 icons (limited set) */ .fas { font-family: sans-serif; } .fa-search:before { content: '🔍'; } .fa-calendar:before { content: '📅'; } .fa-map-marker-alt:before { content: '📍'; } .fa-users:before { content: '👥'; } .fa-ticket-alt:before { content: '🎟️'; } .fa-music:before { content: '🎵'; } .fa-film:before { content: '🎬'; } .fa-utensils:before { content: '🍽️'; } .fa-graduation-cap:before { content: '🎓'; } .fa-heart:before { content: '❤️'; } .fa-calendar-check:before { content: '✅'; } </style> </head> <body> <div class="container"> <button class="menu-toggle"> <span></span> </button> <div class="fullscreen-menu"> <div class="menu-header"> <h1 class="menu-title">Festivo</h1> <p class="menu-subtitle">Where Moments Become Memories</p> <div class="notification-badge">5 New Events Today</div> </div> <div class="search-box"> <i class="fas fa-search search-icon"></i> <input type="text" class="search-input" placeholder="Search events, artists, venues..."> </div> <div class="featured-event"> <div class="featured-image" style="background-image: url('https://images.unsplash.com/photo-1470229722913-7c0e2dbbafd3?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80');"></div> <div class="featured-content"> <span class="featured-label">Featured</span> <h3 class="featured-title">Summer Soundwave Festival</h3> <div class="featured-info"> <div class="featured-date"> <i class="fas fa-calendar"></i> Aug 12-14 </div> <div class="featured-location"> <i class="fas fa-map-marker-alt"></i> Beachfront Arena </div> </div> <a href="#" class="featured-cta">Get Early Access</a> </div> <div class="featured-pattern"></div> </div> <div class="category-tabs"> <button class="category-tab active" data-category="upcoming">Upcoming</button> <button class="category-tab" data-category="music">Music</button> <button class="category-tab" data-category="arts">Arts & Culture</button> <button class="category-tab" data-category="food">Food & Drink</button> <button class="category-tab" data-category="workshops">Workshops</button> </div> <div class="category-content active" id="upcoming"> <div class="events-grid"> <div class="event-card" style="animation-delay: 0.1s;"> <div class="event-image" style="background-image: url('https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80');"> <div class="event-date">Jul 23</div> </div> <div class="event-content"> <h3 class="event-title">Night Glow Party</h3> <div class="event-location"> <i class="fas fa-map-marker-alt"></i> Skyline Rooftop </div> <div class="event-footer"> <div class="event-price">$35</div> <div class="event-attendees"> <i class="fas fa-users"></i> 128 going </div> </div> </div> </div> <div class="event-card" style="animation-delay: 0.2s;"> <div class="event-image" style="background-image: url('https://images.unsplash.com/photo-1505236858219-8359eb29e329?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80');"> <div class="event-date">Jul 27</div> </div> <div class="event-content"> <h3 class="event-title">Culinary Masterclass</h3> <div class="event-location"> <i class="fas fa-map-marker-alt"></i> Urban Kitchen Studio </div> <div class="event-footer"> <div class="event-price">$85</div> <div class="event-attendees"> <i class="fas fa-users"></i> 42 going </div> </div> </div> </div> <div class="event-card" style="animation-delay: 0.3s;"> <div class="event-image" style="background-image: url('https://images.unsplash.com/photo-1531058020387-3be344556be6?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80');"> <div class="event-date">Aug 2</div> </div> <div class="event-content"> <h3 class="event-title">Tech Innovation Summit</h3> <div class="event-location"> <i class="fas fa-map-marker-alt"></i> Convention Center </div> <div class="event-footer"> <div class="event-price">$120</div> <div class="event-attendees"> <i class="fas fa-users"></i> 315 going </div> </div> </div> </div> <div class="event-card" style="animation-delay: 0.4s;"> <div class="event-image" style="background-image: url('https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80');"> <div class="event-date">Aug 5</div> </div> <div class="event-content"> <h3 class="event-title">Yoga & Wellness Retreat</h3> <div class="event-location"> <i class="fas fa-map-marker-alt"></i> Sunset Gardens </div> <div class="event-footer"> <div class="event-price">$65</div> <div class="event-attendees"> <i class="fas fa-users"></i> 87 going </div> </div> </div> </div> </div> </div> <div class="category-content" id="music"> <div class="events-grid"> <div class="event-card"> <div class="event-image" style="background-image: url('https://images.unsplash.com/photo-1501386761578-eac5c94b800a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80');"> <div class="event-date">Jul 29</div> </div> <div class="event-content"> <h3 class="event-title">Acoustic Unplugged Sessions</h3> <div class="event-location"> <i class="fas fa-map-marker-alt"></i> The Velvet Lounge </div> <div class="event-footer"> <div class="event-price">$25</div> <div class="event-attendees"> <i class="fas fa-users"></i> 92 going </div> </div> </div> </div> <div class="event-card"> <div class="event-image" style="background-image: url('https://images.unsplash.com/photo-1514525253161-7a46d19cd819?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80');"> <div class="event-date">Aug 8</div> </div> <div class="event-content"> <h3 class="event-title">Electronic Dance Night</h3> <div class="event-location"> <i class="fas fa-map-marker-alt"></i> Pulse Nightclub </div> <div class="event-footer"> <div class="event-price">$40</div> <div class="event-attendees"> <i class="fas fa-users"></i> 203 going </div> </div> </div> </div> </div> </div> <div class="category-content" id="arts"> <div class="events-grid"> <div class="event-card"> <div class="event-image" style="background-image: url('https://images.unsplash.com/photo-1510012202546-9698eab3a597?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80');"> <div class="event-date">Jul 30</div> </div> <div class="event-content"> <h3 class="event-title">Contemporary Art Exhibition</h3> <div class="event-location"> <i class="fas fa-map-marker-alt"></i> Modern Gallery </div> <div class="event-footer"> <div class="event-price">$15</div> <div class="event-attendees"> <i class="fas fa-users"></i> 76 going </div> </div> </div> </div> </div> </div> <div class="category-content" id="food"> <div class="events-grid"> <div class="event-card"> <div class="event-image" style="background-image: url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80');"> <div class="event-date">Aug 3</div> </div> <div class="event-content"> <h3 class="event-title">International Food Festival</h3> <div class="event-location"> <i class="fas fa-map-marker-alt"></i> Riverfront Plaza </div> <div class="event-footer"> <div class="event-price">$45</div> <div class="event-attendees"> <i class="fas fa-users"></i> 289 going </div> </div> </div> </div> </div> </div> <div class="category-content" id="workshops"> <div class="empty-state"> <i class="fas fa-calendar-check"></i> <p>No scheduled workshops for this week.<br>Check back soon for updates!</p> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Menu toggle functionality const menuToggle = document.querySelector('.menu-toggle'); const fullscreenMenu = document.querySelector('.fullscreen-menu'); menuToggle.addEventListener('click', function() { this.classList.toggle('active'); fullscreenMenu.classList.toggle('active'); }); // Category tabs functionality const categoryTabs = document.querySelectorAll('.category-tab'); const categoryContents = document.querySelectorAll('.category-content'); categoryTabs.forEach(tab => { tab.addEventListener('click', function() { // Remove active class from all tabs categoryTabs.forEach(t => t.classList.remove('active')); // Add active class to clicked tab this.classList.add('active'); // Hide all category contents categoryContents.forEach(content => content.classList.remove('active')); // Show selected category content const category = this.getAttribute('data-category'); document.getElementById(category).classList.add('active'); // Animate cards animateCards(); }); }); // Search input functionality const searchInput = document.querySelector('.search-input'); searchInput.addEventListener('keyup', function(e) { const searchTerm = e.target.value.toLowerCase(); const eventCards = document.querySelectorAll('.event-card'); eventCards.forEach(card => { const title = card.querySelector('.event-title').textContent.toLowerCase(); const location = card.querySelector('.event-location').textContent.toLowerCase(); if (title.includes(searchTerm) || location.includes(searchTerm)) { card.style.display = 'flex'; } else { card.style.display = 'none'; } }); }); // Function to animate event cards on category change function animateCards() { const visibleCards = document.querySelectorAll('.category-content.active .event-card'); visibleCards.forEach((card, index) => { card.style.animationDelay = `${0.1 * index}s`; card.style.animation = 'none'; // Trigger reflow void card.offsetWidth; card.style.animation = 'cardAppear 0.5s forwards'; }); } // Initial animation setTimeout(animateCards, 100); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pulse Social Menu</title> <style> :root { --primary: #6c5ce7; --secondary: #fd79a8; --accent: #00cec9; --dark: #2d3436; --light: #f9f9f9; --success: #55efc4; --overlay: rgba(44, 62, 80, 0.85); } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { min-height: 100vh; background-color: var(--light); display: flex; flex-direction: column; overflow-x: hidden; } .pulse-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); position: fixed; width: 100%; z-index: 100; } .logo { font-weight: 800; font-size: 1.5rem; color: var(--primary); display: flex; align-items: center; gap: 0.5rem; } .logo span { background: var(--primary); color: white; padding: 2px 6px; border-radius: 4px; } .menu-trigger { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; gap: 6px; padding: 5px; z-index: 1000; } .menu-trigger span { width: 30px; height: 3px; background: var(--primary); border-radius: 3px; transition: all 0.3s ease; } .menu-trigger.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .menu-trigger.active span:nth-child(2) { opacity: 0; } .menu-trigger.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } .fullscreen-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--overlay); backdrop-filter: blur(8px); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 99; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; } .fullscreen-menu.active { opacity: 1; visibility: visible; } .menu-content { width: 85%; max-width: 1000px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; padding: 2rem; } .menu-section { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(8px); border-radius: 16px; padding: 2rem; transform: translateY(30px); opacity: 0; transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .menu-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%); pointer-events: none; } .menu-section h2 { font-size: 1.5rem; margin-bottom: 1.5rem; color: white; position: relative; padding-bottom: 0.5rem; } .menu-section h2::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; background: var(--accent); border-radius: 3px; } .menu-links { list-style: none; display: flex; flex-direction: column; gap: 1rem; } .menu-link { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: rgba(255, 255, 255, 0.1); border-radius: 8px; color: white; text-decoration: none; font-weight: 500; transition: all 0.3s ease; overflow: hidden; } .menu-link::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--secondary); transform: scaleY(0); transition: transform 0.3s ease; } .menu-link:hover { background: rgba(255, 255, 255, 0.2); transform: translateX(5px); } .menu-link:hover::before { transform: scaleY(1); } .menu-link i { font-size: 1.2rem; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.2); border-radius: 50%; transition: all 0.3s ease; } .menu-link:hover i { background: var(--secondary); } .menu-link.active { background: rgba(255, 255, 255, 0.2); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .menu-link.active::before { transform: scaleY(1); } .fullscreen-menu.active .menu-section { transform: translateY(0); opacity: 1; } .fullscreen-menu.active .menu-section:nth-child(1) { transition-delay: 0.1s; } .fullscreen-menu.active .menu-section:nth-child(2) { transition-delay: 0.2s; } .fullscreen-menu.active .menu-section:nth-child(3) { transition-delay: 0.3s; } .active-count { background: var(--secondary); color: white; border-radius: 12px; padding: 2px 8px; font-size: 0.75rem; margin-left: auto; } .stat-bubble { position: absolute; right: 1rem; bottom: 1rem; background: rgba(0, 0, 0, 0.3); padding: 0.5rem 1rem; border-radius: 20px; color: white; font-size: 0.8rem; display: flex; align-items: center; gap: 0.5rem; } .stat-bubble i { color: var(--success); } .user-quick-actions { position: absolute; bottom: 2rem; display: flex; gap: 1rem; justify-content: center; width: 100%; } .quick-action { display: flex; flex-direction: column; align-items: center; color: white; text-decoration: none; transition: all 0.3s ease; } .quick-action i { font-size: 1.5rem; background: rgba(255, 255, 255, 0.1); width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: 0.5rem; transition: all 0.3s ease; } .quick-action:nth-child(1) i { color: var(--secondary); } .quick-action:nth-child(2) i { color: var(--accent); } .quick-action:nth-child(3) i { color: var(--success); } .quick-action:hover i { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .quick-action span { font-size: 0.8rem; opacity: 0.8; } .notification-dot { position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; background: #ff0062; border-radius: 50%; border: 2px solid var(--overlay); } .search-container { position: relative; margin-bottom: 1.5rem; } .search-input { width: 100%; padding: 1rem 1rem 1rem 3rem; background: rgba(255, 255, 255, 0.1); border: none; border-radius: 8px; color: white; font-size: 1rem; transition: all 0.3s ease; } .search-input::placeholder { color: rgba(255, 255, 255, 0.6); } .search-input:focus { background: rgba(255, 255, 255, 0.2); outline: none; box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.3); } .search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.6); } .user-profile { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.1); border-radius: 8px; margin-bottom: 1.5rem; } .user-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); } .user-info { flex: 1; } .user-name { color: white; font-weight: 600; font-size: 1rem; } .user-status { display: flex; align-items: center; gap: 0.5rem; color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; } .status-dot { width: 8px; height: 8px; background: var(--success); border-radius: 50%; } .trending-topics { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .topic-tag { background: rgba(255, 255, 255, 0.1); color: white; padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.8rem; transition: all 0.3s ease; } .topic-tag:hover { background: var(--secondary); transform: scale(1.05); } .content-preview { margin-top: 5rem; padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; align-items: center; justify-content: center; text-align: center; } .preview-title { font-size: 2rem; font-weight: 700; color: var(--dark); max-width: 600px; } .preview-description { color: #6c757d; max-width: 600px; line-height: 1.6; } .bounce-animation { animation: bounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } @keyframes bounce { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @media (max-width: 768px) { .menu-content { grid-template-columns: 1fr; gap: 1.5rem; width: 95%; } .menu-section { padding: 1.5rem; } .pulse-header { padding: 1rem; } .logo { font-size: 1.25rem; } .user-quick-actions { position: relative; bottom: 0; margin-top: 2rem; } } /* Custom icons */ .pulse-icon { display: inline-block; width: 24px; height: 24px; position: relative; } .pulse-icon.home::before { content: '⌂'; font-size: 1.3rem; } .pulse-icon.explore::before { content: '🔍'; font-size: 1rem; } .pulse-icon.messages::before { content: '✉'; font-size: 1rem; } .pulse-icon.notifications::before { content: '🔔'; font-size: 1rem; } .pulse-icon.communities::before { content: '👥'; font-size: 1rem; } .pulse-icon.profile::before { content: '👤'; font-size: 1rem; } .pulse-icon.trending::before { content: '📈'; font-size: 1rem; } .pulse-icon.livefeed::before { content: '📡'; font-size: 1rem; } .pulse-icon.bookmarks::before { content: '🔖'; font-size: 1rem; } .pulse-icon.settings::before { content: '⚙️'; font-size: 1rem; } .menu-link i { display: flex; align-items: center; justify-content: center; } /* Loader for fast loading indication */ .loader-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--primary); display: flex; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.5s ease, visibility 0.5s ease; } .loader-overlay.hidden { opacity: 0; visibility: hidden; } .pulse-loader { width: 50px; height: 50px; border-radius: 50%; background: white; position: relative; animation: pulse 1s ease-in-out infinite alternate; } .pulse-loader::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40%; height: 40%; background: var(--primary); border-radius: 50%; } @keyframes pulse { 0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); } 100% { transform: scale(1); box-shadow: 0 0 0 20px rgba(255, 255, 255, 0); } } </style> </head> <body> <div class="loader-overlay"> <div class="pulse-loader"></div> </div> <header class="pulse-header"> <div class="logo"> <span>P</span>ulse </div> <button class="menu-trigger" id="menuTrigger"> <span></span> <span></span> <span></span> </button> </header> <div class="fullscreen-menu" id="fullscreenMenu"> <div class="menu-content"> <div class="menu-section"> <div class="user-profile"> <img src="https://i.pravatar.cc/150?img=32" alt="User Avatar" class="user-avatar"> <div class="user-info"> <div class="user-name">Alex Morgan</div> <div class="user-status"> <span class="status-dot"></span> <span>Online now</span> </div> </div> </div> <h2>Navigation</h2> <ul class="menu-links"> <li> <a href="#" class="menu-link active nav-item"> <i class="pulse-icon home"></i> <span>Home Feed</span> </a> </li> <li> <a href="#" class="menu-link nav-item"> <i class="pulse-icon explore"></i> <span>Explore</span> </a> </li> <li> <a href="#" class="menu-link nav-item"> <i class="pulse-icon messages"></i> <span>Messages</span> <span class="active-count">8</span> </a> </li> <li> <a href="#" class="menu-link nav-item"> <i class="pulse-icon notifications"></i> <span>Notifications</span> <span class="active-count">12</span> </a> </li> <li> <a href="#" class="menu-link nav-item"> <i class="pulse-icon communities"></i> <span>Communities</span> </a> </li> <li> <a href="#" class="menu-link nav-item"> <i class="pulse-icon profile"></i> <span>Profile</span> </a> </li> </ul> <div class="stat-bubble"> <i class="pulse-icon livefeed"></i> <span>358 friends online</span> </div> </div> <div class="menu-section"> <div class="search-container"> <i class="search-icon">🔍</i> <input type="text" class="search-input" placeholder="Search for friends, groups, or content..."> </div> <h2>Discover</h2> <ul class="menu-links"> <li> <a href="#" class="menu-link nav-item"> <i class="pulse-icon trending"></i> <span>Trending Now</span> </a> </li> <li> <a href="#" class="menu-link nav-item"> <i class="pulse-icon livefeed"></i> <span>Live Feeds</span> <span class="active-count">5</span> </a> </li> <li> <a href="#" class="menu-link nav-item"> <i class="pulse-icon bookmarks"></i> <span>Saved Posts</span> </a> </li> <li> <a href="#" class="menu-link nav-item"> <i class="pulse-icon settings"></i> <span>Settings</span> </a> </li> </ul> <h2>Trending Topics</h2> <div class="trending-topics"> <span class="topic-tag">#SummerVibes</span> <span class="topic-tag">#TechTalks</span> <span class="topic-tag">#CreativeMinds</span> <span class="topic-tag">#TravelGoals</span> <span class="topic-tag">#HealthyLife</span> <span class="topic-tag">#MusicFest</span> </div> </div> </div> <div class="user-quick-actions"> <a href="#" class="quick-action"> <i class="pulse-icon messages"></i> <span>Chat</span> <div class="notification-dot"></div> </a> <a href="#" class="quick-action"> <i class="pulse-icon profile"></i> <span>Profile</span> </a> <a href="#" class="quick-action"> <i class="pulse-icon settings"></i> <span>Settings</span> </a> </div> </div> <main class="content-preview"> <h1 class="preview-title">Connect with your world in a single tap</h1> <p class="preview-description">Click the menu button in the top right to access Pulse's social features. A high-performance menu designed for high-volume interactions with optimized loading times.</p> </main> <script> // Wait for content to load window.addEventListener('DOMContentLoaded', () => { // Hide loader after a short delay to demonstrate fast loading setTimeout(() => { document.querySelector('.loader-overlay').classList.add('hidden'); }, 800); const menuTrigger = document.getElementById('menuTrigger'); const fullscreenMenu = document.getElementById('fullscreenMenu'); const navItems = document.querySelectorAll('.nav-item'); // Menu toggle menuTrigger.addEventListener('click', () => { menuTrigger.classList.toggle('active'); fullscreenMenu.classList.toggle('active'); // Disable body scroll when menu is open if (fullscreenMenu.classList.contains('active')) { document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = 'auto'; } }); // Navigation item click handling with bounce animation navItems.forEach(item => { item.addEventListener('click', (e) => { e.preventDefault(); // Remove active class from all items navItems.forEach(nav => nav.classList.remove('active')); // Add active class and bounce animation to clicked item item.classList.add('active', 'bounce-animation'); // Remove animation class after animation completes setTimeout(() => { item.classList.remove('bounce-animation'); }, 500); }); }); // Click outside to close document.addEventListener('click', (e) => { if (fullscreenMenu.classList.contains('active') && !e.target.closest('.menu-content') && !e.target.closest('.menu-trigger')) { menuTrigger.classList.remove('active'); fullscreenMenu.classList.remove('active'); document.body.style.overflow = 'auto'; } }); // Optional: Add intersection observer for performance const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = 1; } }); }, { threshold: 0.1 }); document.querySelectorAll('.menu-section').forEach(section => { observer.observe(section); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Serene - Health & Fitness App</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } :root { --primary: #5B84C4; --primary-light: #80A4D8; --secondary: #9ED8DB; --accent: #F1A9A0; --neutral-light: #F8F7F9; --neutral-dark: #343A40; --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); } body { background: linear-gradient(135deg, var(--secondary) 0%, var(--primary-light) 100%); height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; color: var(--neutral-dark); } .app-container { width: 100%; max-width: 700px; height: 100%; max-height: 700px; background-color: var(--neutral-light); border-radius: 20px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1); overflow: hidden; position: relative; display: flex; flex-direction: column; } .menu-header { padding: 25px; text-align: center; position: relative; } .logo { font-size: 28px; font-weight: 700; letter-spacing: -0.5px; color: var(--primary); margin-bottom: 5px; } .tagline { font-size: 14px; font-weight: 500; opacity: 0.8; letter-spacing: 0.5px; } .profile-section { display: flex; align-items: center; justify-content: center; margin: 10px 0 20px; } .profile-img { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(45deg, var(--primary) 0%, var(--primary-light) 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 24px; font-weight: 600; margin-right: 15px; box-shadow: 0 4px 12px rgba(91, 132, 196, 0.3); transition: var(--transition); } .profile-img:hover { transform: scale(1.05); } .profile-info { text-align: left; } .profile-name { font-weight: 600; font-size: 18px; margin-bottom: 5px; } .streak { display: flex; align-items: center; font-size: 14px; color: var(--accent); font-weight: 500; } .streak-icon { margin-right: 5px; font-size: 16px; } .menu-section { flex: 1; padding: 0 25px; overflow-y: auto; } .menu-section::-webkit-scrollbar { width: 6px; } .menu-section::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: 10px; } .menu-category { margin-bottom: 30px; } .category-title { font-size: 15px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; color: var(--primary); font-weight: 600; opacity: 0.9; } .menu-items { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .menu-item { background: white; padding: 20px; border-radius: 15px; display: flex; flex-direction: column; cursor: pointer; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); position: relative; overflow: hidden; } .menu-item:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); } .menu-item:active { transform: translateY(0); } .menu-item::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(to bottom, var(--primary), var(--secondary)); opacity: 0; transition: var(--transition); } .menu-item:hover::before { opacity: 1; } .item-icon { font-size: 28px; margin-bottom: 15px; color: var(--primary); } .item-title { font-weight: 600; font-size: 16px; margin-bottom: 5px; } .item-desc { font-size: 13px; opacity: 0.7; line-height: 1.4; } .navigation { display: flex; justify-content: space-around; padding: 15px 25px; background: white; border-top: 1px solid rgba(0, 0, 0, 0.05); } .nav-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: var(--transition); position: relative; } .nav-item.active { color: var(--primary); } .nav-icon { font-size: 20px; margin-bottom: 5px; } .nav-label { font-size: 12px; font-weight: 500; } .nav-item::after { content: ''; position: absolute; bottom: -15px; width: 6px; height: 6px; border-radius: 50%; background-color: var(--primary); opacity: 0; transition: var(--transition); } .nav-item.active::after { opacity: 1; } .nav-item:hover { color: var(--primary-light); transform: translateY(-2px); } .blob { position: absolute; width: 200px; height: 200px; background: linear-gradient(45deg, var(--secondary), var(--primary-light)); border-radius: 50%; filter: blur(80px); opacity: 0.1; z-index: -1; transition: var(--transition); } #blob1 { top: -50px; right: -50px; } #blob2 { bottom: -100px; left: -50px; } /* Custom Ripple Effect */ .ripple { position: absolute; border-radius: 50%; background: rgba(91, 132, 196, 0.3); transform: scale(0); animation: ripple 0.8s linear; pointer-events: none; } @keyframes ripple { to { transform: scale(4); opacity: 0; } } /* Status indicator */ .status-chip { display: inline-flex; align-items: center; background: rgba(158, 216, 219, 0.2); color: var(--primary); padding: 5px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; position: absolute; top: 25px; right: 25px; } .status-dot { width: 8px; height: 8px; background-color: var(--accent); border-radius: 50%; margin-right: 5px; animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(241, 169, 160, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(241, 169, 160, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(241, 169, 160, 0); } } /* Progress stats */ .progress-stats { display: flex; justify-content: space-between; margin-bottom: 20px; background-color: white; padding: 15px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); } .stat-item { text-align: center; position: relative; } .stat-value { font-size: 24px; font-weight: 700; color: var(--primary); margin-bottom: 5px; position: relative; } .stat-label { font-size: 12px; color: var(--neutral-dark); opacity: 0.8; } .challenge-banner { background: linear-gradient(135deg, var(--primary-light), var(--primary)); color: white; padding: 15px; border-radius: 15px; margin-bottom: 20px; position: relative; overflow: hidden; transition: var(--transition); cursor: pointer; } .challenge-banner:hover { transform: scale(1.02); } .challenge-title { font-weight: 600; margin-bottom: 5px; font-size: 16px; } .challenge-desc { font-size: 13px; opacity: 0.9; margin-bottom: 10px; } .challenge-btn { display: inline-block; background: white; color: var(--primary); font-size: 12px; font-weight: 600; padding: 5px 15px; border-radius: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: var(--transition); } .challenge-btn:hover { box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); transform: translateY(-2px); } .challenge-decoration { position: absolute; right: -15px; top: -15px; width: 80px; height: 80px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); } .challenge-decoration::before { content: ''; position: absolute; right: 20px; top: 20px; width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); } /* Responsive adjustments */ @media (max-width: 500px) { .menu-items { grid-template-columns: 1fr; } .profile-section { flex-direction: column; text-align: center; } .profile-img { margin-right: 0; margin-bottom: 10px; } .profile-info { text-align: center; } .menu-header { padding: 20px 15px; } .menu-section { padding: 0 15px; } } </style> </head> <body> <div class="app-container"> <div class="menu-header"> <div class="logo">Serene</div> <div class="tagline">Mindful movement, measurable progress</div> <div class="status-chip"> <div class="status-dot"></div> <span>Live session: Vinyasa Flow</span> </div> <div class="profile-section"> <div class="profile-img">AL</div> <div class="profile-info"> <div class="profile-name">Alex Lin</div> <div class="streak"> <span class="streak-icon">🔥</span> 14-day streak </div> </div> </div> <div class="progress-stats"> <div class="stat-item"> <div class="stat-value">82%</div> <div class="stat-label">Weekly Goal</div> </div> <div class="stat-item"> <div class="stat-value">3</div> <div class="stat-label">Workouts</div> </div> <div class="stat-item"> <div class="stat-value">120</div> <div class="stat-label">Minutes</div> </div> </div> </div> <div class="menu-section"> <div class="challenge-banner"> <div class="challenge-title">30-Day Mindful Movement</div> <div class="challenge-desc">Join 1,289 others in our summer challenge</div> <div class="challenge-btn">Join Challenge</div> <div class="challenge-decoration"></div> </div> <div class="menu-category"> <div class="category-title">Your Practice</div> <div class="menu-items"> <div class="menu-item" data-name="workouts"> <div class="item-icon">⚡</div> <div class="item-title">Workouts</div> <div class="item-desc">Access your personalized routines and quick flows</div> </div> <div class="menu-item" data-name="classes"> <div class="item-icon">📊</div> <div class="item-title">Progress</div> <div class="item-desc">Track metrics, milestones and personal bests</div> </div> </div> </div> <div class="menu-category"> <div class="category-title">Discover</div> <div class="menu-items"> <div class="menu-item" data-name="community"> <div class="item-icon">👋</div> <div class="item-title">Community</div> <div class="item-desc">Connect with others on similar journeys</div> </div> <div class="menu-item" data-name="explore"> <div class="item-icon">🧘</div> <div class="item-title">Library</div> <div class="item-desc">Explore new workouts, styles and instructors</div> </div> </div> </div> <div class="menu-category"> <div class="category-title">Tools</div> <div class="menu-items"> <div class="menu-item" data-name="insights"> <div class="item-icon">💤</div> <div class="item-title">Rest & Recovery</div> <div class="item-desc">Sleep tracking and personalized recovery plans</div> </div> <div class="menu-item" data-name="settings"> <div class="item-icon">🥗</div> <div class="item-title">Nutrition</div> <div class="item-desc">Meal planning tailored to your activity level</div> </div> </div> </div> </div> <div class="navigation"> <div class="nav-item active" data-nav="home"> <div class="nav-icon">🏠</div> <div class="nav-label">Home</div> </div> <div class="nav-item" data-nav="calendar"> <div class="nav-icon">📅</div> <div class="nav-label">Calendar</div> </div> <div class="nav-item" data-nav="practice"> <div class="nav-icon">✨</div> <div class="nav-label">Practice</div> </div> <div class="nav-item" data-nav="profile"> <div class="nav-icon">👤</div> <div class="nav-label">Profile</div> </div> </div> <div class="blob" id="blob1"></div> <div class="blob" id="blob2"></div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Ripple effect for clickable elements const clickableElements = document.querySelectorAll('.menu-item, .nav-item, .challenge-banner'); clickableElements.forEach(element => { element.addEventListener('click', function(e) { const rect = this.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; const ripple = document.createElement('span'); ripple.classList.add('ripple'); ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; this.appendChild(ripple); setTimeout(() => { ripple.remove(); }, 800); // Handle navigation item clicks if (element.classList.contains('nav-item')) { document.querySelectorAll('.nav-item').forEach(item => { item.classList.remove('active'); }); element.classList.add('active'); } }); }); // Floating animation for blobs function animateBlob(blobId) { const blob = document.getElementById(blobId); const randomX = Math.random() * 40 - 20; const randomY = Math.random() * 40 - 20; blob.style.transform = `translate(${randomX}px, ${randomY}px)`; setTimeout(() => { animateBlob(blobId); }, 3000); } animateBlob('blob1'); setTimeout(() => { animateBlob('blob2'); }, 1500); // Menu item hover effects const menuItems = document.querySelectorAll('.menu-item'); menuItems.forEach(item => { item.addEventListener('mouseenter', function() { menuItems.forEach(otherItem => { if (otherItem !== item) { otherItem.style.opacity = '0.7'; otherItem.style.transform = 'scale(0.98)'; } }); }); item.addEventListener('mouseleave', function() { menuItems.forEach(otherItem => { otherItem.style.opacity = '1'; otherItem.style.transform = 'scale(1)'; }); }); }); // Challenge banner pulse effect const challengeBanner = document.querySelector('.challenge-banner'); let pulseTimer; function startPulse() { challengeBanner.style.boxShadow = '0 8px 25px rgba(91, 132, 196, 0.3)'; pulseTimer = setTimeout(() => { challengeBanner.style.boxShadow = '0 4px 15px rgba(91, 132, 196, 0.15)'; setTimeout(() => { startPulse(); }, 2000); }, 2000); } startPulse(); // Progress stats animation const statValues = document.querySelectorAll('.stat-value'); statValues.forEach(stat => { stat.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-3px)'; this.style.color = 'var(--accent)'; }); stat.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0)'; this.style.color = 'var(--primary)'; }); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Scholarly Hub - Educational Platform</title> <style> /* Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; transition: all 0.3s ease-in-out; } :root { --slate-dark: #1a2634; --slate-medium: #263545; --slate-light: #334559; --accent-teal: #20c997; --accent-violet: #7952b3; --accent-coral: #ff7070; --text-light: #f8f9fa; --text-muted: #adb5bd; } body { background-color: var(--slate-dark); color: var(--text-light); min-height: 100vh; overflow-x: hidden; display: flex; flex-direction: column; padding: 0; width: 100%; max-width: 100%; } .container { width: 100%; height: 100vh; max-height: 700px; max-width: 700px; margin: 0 auto; position: relative; overflow: hidden; } /* Header Styles */ header { background-color: var(--slate-medium); padding: 1rem 1.5rem; display: flex; justify-content: space-between; align-items: center; border-bottom: 3px solid var(--accent-teal); position: relative; } .logo { display: flex; align-items: center; gap: 0.5rem; } .logo-icon { font-size: 1.5rem; color: var(--accent-teal); } .logo-text { font-weight: 700; font-size: 1.2rem; background: linear-gradient(to right, var(--accent-teal), var(--accent-violet)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Menu Toggle */ .menu-toggle { background: none; border: none; color: var(--text-light); font-size: 1.5rem; cursor: pointer; z-index: 100; } /* Navigation Styles */ .fullscreen-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--slate-dark); z-index: 10; transform: translateY(-100%); transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); display: flex; flex-direction: column; padding: 2rem; } .fullscreen-menu.active { transform: translateY(0); } .menu-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } .menu-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; overflow-y: auto; max-height: calc(100vh - 180px); padding-bottom: 2rem; position: relative; } /* Menu Section Styles */ .menu-section { background-color: var(--slate-medium); border-radius: 0.5rem; padding: 1.5rem; border-left: 4px solid; transition: transform 0.3s ease; position: relative; overflow: hidden; } .menu-section:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .menu-section h2 { font-size: 1.3rem; margin-bottom: 1rem; position: relative; display: inline-block; } .menu-section h2:after { content: ''; position: absolute; bottom: -5px; left: 0; width: 40px; height: 3px; background-color: currentColor; transition: width 0.3s ease; } .menu-section:hover h2:after { width: 100%; } .courses-section { border-left-color: var(--accent-teal); } .courses-section h2 { color: var(--accent-teal); } .resources-section { border-left-color: var(--accent-violet); } .resources-section h2 { color: var(--accent-violet); } .community-section { border-left-color: var(--accent-coral); } .community-section h2 { color: var(--accent-coral); } /* Menu Items */ .menu-items { list-style: none; margin-top: 1rem; } .menu-item { margin-bottom: 1rem; padding: 0.5rem 0; border-radius: 0.25rem; cursor: pointer; position: relative; padding-left: 1.5rem; } .menu-item:before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: currentColor; opacity: 0.6; transition: transform 0.3s ease, opacity 0.3s ease; } .menu-item:hover:before { opacity: 1; transform: translateY(-50%) scale(1.5); } .menu-item .title { font-weight: 600; display: block; } .menu-item .meta { font-size: 0.8rem; color: var(--text-muted); display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; } /* Progress Bar */ .progress-container { height: 4px; width: 100%; background-color: var(--slate-light); border-radius: 2px; margin-top: 0.5rem; overflow: hidden; } .progress-bar { height: 100%; width: 0; border-radius: 2px; transition: width 0.5s ease; } .courses-section .progress-bar { background-color: var(--accent-teal); } .resources-section .progress-bar { background-color: var(--accent-violet); } .community-section .progress-bar { background-color: var(--accent-coral); } /* Badge */ .badge { display: inline-flex; align-items: center; padding: 0.25rem 0.5rem; border-radius: 1rem; font-size: 0.7rem; font-weight: 600; margin-left: 0.5rem; } .badge-new { background-color: var(--accent-teal); color: var(--slate-dark); } .badge-hot { background-color: var(--accent-coral); color: var(--slate-dark); } /* Main Content */ main { padding: 2rem; flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .hero-content { max-width: 600px; margin: 0 auto; } h1 { font-size: 2.5rem; margin-bottom: 1rem; background: linear-gradient(to right, var(--accent-teal), var(--accent-violet)); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.2; } .subtitle { font-size: 1.1rem; margin-bottom: 2rem; color: var(--text-muted); line-height: 1.6; } .cta-button { background-color: var(--accent-teal); color: var(--slate-dark); border: none; padding: 0.75rem 1.5rem; border-radius: 0.25rem; font-weight: 600; font-size: 1rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; position: relative; overflow: hidden; z-index: 1; } .cta-button:before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); transition: transform 0.5s ease; z-index: -1; } .cta-button:hover:before { transform: translateX(100%); } /* Stats */ .stats { display: flex; justify-content: space-around; margin-top: 3rem; width: 100%; max-width: 600px; } .stat-item { text-align: center; } .stat-number { font-size: 1.8rem; font-weight: 700; margin-bottom: 0.25rem; } .courses-stat .stat-number { color: var(--accent-teal); } .students-stat .stat-number { color: var(--accent-violet); } .rating-stat .stat-number { color: var(--accent-coral); } .stat-label { font-size: 0.9rem; color: var(--text-muted); } /* Decorative Elements */ .decoration { position: absolute; border-radius: 50%; opacity: 0.1; z-index: -1; } .decoration-1 { width: 300px; height: 300px; background-color: var(--accent-teal); top: -100px; right: -100px; } .decoration-2 { width: 200px; height: 200px; background-color: var(--accent-violet); bottom: -50px; left: -50px; } /* Responsive Adjustments */ @media screen and (max-width: 700px) { .menu-content { grid-template-columns: 1fr; max-height: calc(100vh - 120px); } h1 { font-size: 1.8rem; } .subtitle { font-size: 0.9rem; } .stats { flex-direction: column; gap: 1.5rem; } .decoration-1 { width: 150px; height: 150px; } .decoration-2 { width: 100px; height: 100px; } } /* Animation Keyframes */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Animation Classes */ .animate-pulse { animation: pulse 2s infinite; } .fade-in { opacity: 0; transform: translateY(10px); animation: fadeIn 0.5s forwards; } /* Canvas background */ #particleCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; } </style> </head> <body> <div class="container"> <canvas id="particleCanvas"></canvas> <div class="decoration decoration-1"></div> <div class="decoration decoration-2"></div> <header> <div class="logo"> <div class="logo-icon">📚</div> <div class="logo-text">ScholarlyHub</div> </div> <button class="menu-toggle" id="menuToggle">☰</button> </header> <div class="fullscreen-menu" id="fullscreenMenu"> <div class="menu-header"> <div class="logo"> <div class="logo-icon">📚</div> <div class="logo-text">ScholarlyHub</div> </div> <button class="menu-toggle" id="closeMenu">✕</button> </div> <div class="menu-content"> <div class="menu-section courses-section"> <h2>Courses</h2> <p>Curated learning paths for academic excellence</p> <ul class="menu-items"> <li class="menu-item"> <span class="title">Advanced Quantum Computing</span> <div class="meta"> <span>Dr. Eliza Harmon</span> <span>12 modules</span> </div> <div class="progress-container"> <div class="progress-bar" style="width: 75%"></div> </div> </li> <li class="menu-item"> <span class="title">Cognitive Neuroscience</span> <span class="badge badge-new">New</span> <div class="meta"> <span>Prof. Marcus Chen</span> <span>8 modules</span> </div> <div class="progress-container"> <div class="progress-bar" style="width: 25%"></div> </div> </li> <li class="menu-item"> <span class="title">Sustainable Urban Design</span> <div class="meta"> <span>Dr. Aria Patel</span> <span>10 modules</span> </div> <div class="progress-container"> <div class="progress-bar" style="width: 40%"></div> </div> </li> </ul> </div> <div class="menu-section resources-section"> <h2>Resources</h2> <p>Comprehensive tools for academic research</p> <ul class="menu-items"> <li class="menu-item"> <span class="title">Research Methodology Library</span> <div class="meta"> <span>280+ peer-reviewed articles</span> </div> </li> <li class="menu-item"> <span class="title">Academic Citation Generator</span> <span class="badge badge-hot">Popular</span> <div class="meta"> <span>APA, MLA, Chicago formats</span> </div> </li> <li class="menu-item"> <span class="title">Statistical Analysis Tools</span> <div class="meta"> <span>16 advanced analytical models</span> </div> </li> </ul> </div> <div class="menu-section community-section"> <h2>Community</h2> <p>Connect with peers and leading academics</p> <ul class="menu-items"> <li class="menu-item"> <span class="title">Research Collaboration Forum</span> <div class="meta"> <span>42 active discussions</span> </div> </li> <li class="menu-item"> <span class="title">Weekly Academic Roundtable</span> <span class="badge badge-new">Today</span> <div class="meta"> <span>18:00 UTC • Virtual Auditorium</span> </div> </li> <li class="menu-item"> <span class="title">Peer Review Network</span> <div class="meta"> <span>127 reviewers across disciplines</span> </div> </li> </ul> </div> </div> </div> <main> <div class="hero-content fade-in"> <h1>Elevate Your Academic Journey</h1> <p class="subtitle">Access world-class courses, collaborate with leading researchers, and leverage advanced academic tools—all designed to propel your scholarly pursuits.</p> <button class="cta-button animate-pulse">Explore Courses <span>→</span></button> </div> <div class="stats"> <div class="stat-item courses-stat fade-in" style="animation-delay: 0.2s;"> <div class="stat-number" id="coursesCount">0</div> <div class="stat-label">Expert-Led Courses</div> </div> <div class="stat-item students-stat fade-in" style="animation-delay: 0.4s;"> <div class="stat-number" id="studentsCount">0</div> <div class="stat-label">Global Scholars</div> </div> <div class="stat-item rating-stat fade-in" style="animation-delay: 0.6s;"> <div class="stat-number" id="ratingCount">0</div> <div class="stat-label">Academic Rating</div> </div> </div> </main> </div> <script> // Menu toggle functionality document.addEventListener('DOMContentLoaded', function() { const menuToggle = document.getElementById('menuToggle'); const closeMenu = document.getElementById('closeMenu'); const fullscreenMenu = document.getElementById('fullscreenMenu'); menuToggle.addEventListener('click', function() { fullscreenMenu.classList.add('active'); }); closeMenu.addEventListener('click', function() { fullscreenMenu.classList.remove('active'); }); // Animated counting for stats function animateCount(element, target, duration) { let start = 0; const increment = target / (duration / 16); function updateCount() { start += increment; if (start >= target) { element.textContent = target; return; } element.textContent = Math.floor(start); requestAnimationFrame(updateCount); } updateCount(); } animateCount(document.getElementById('coursesCount'), 325, 2000); animateCount(document.getElementById('studentsCount'), 54000, 2000); animateCount(document.getElementById('ratingCount'), 4.8, 2000); // Particle background const canvas = document.getElementById('particleCanvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const particles = []; const particleCount = 50; class Particle { constructor() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; this.size = Math.random() * 2 + 0.5; this.speedX = Math.random() * 0.5 - 0.25; this.speedY = Math.random() * 0.5 - 0.25; this.color = this.getRandomColor(); } getRandomColor() { const colors = ['rgba(32, 201, 151, 0.5)', 'rgba(121, 82, 179, 0.5)', 'rgba(255, 112, 112, 0.5)']; return colors[Math.floor(Math.random() * colors.length)]; } update() { this.x += this.speedX; this.y += this.speedY; if (this.x > canvas.width || this.x < 0) { this.speedX = -this.speedX; } if (this.y > canvas.height || this.y < 0) { this.speedY = -this.speedY; } } draw() { ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); } } function init() { for (let i = 0; i < particleCount; i++) { particles.push(new Particle()); } } function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let i = 0; i < particles.length; i++) { particles[i].update(); particles[i].draw(); } requestAnimationFrame(animate); } init(); animate(); // Handle window resize window.addEventListener('resize', function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); // Menu item hover effects const menuItems = document.querySelectorAll('.menu-item'); menuItems.forEach(item => { item.addEventListener('mouseenter', function() { const progressBar = this.querySelector('.progress-bar'); if (progressBar) { progressBar.style.width = `${parseInt(progressBar.style.width) + 5}%`; } }); item.addEventListener('mouseleave', function() { const progressBar = this.querySelector('.progress-bar'); if (progressBar) { progressBar.style.width = `${parseInt(progressBar.style.width) - 5}%`; } }); }); }); </script> </body> </html>
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&family=Montserrat:wght@300;400;500&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } :root { --color-bg: #f7f3eb; --color-text: #2c2c2c; --color-accent: #ad6a52; --color-secondary: #5a7d7c; --color-light: #e8e0d5; --font-primary: 'Cormorant Garamond', serif; --font-secondary: 'Montserrat', sans-serif; } body { font-family: var(--font-secondary); background-color: var(--color-bg); color: var(--color-text); overflow: hidden; height: 100vh; width: 100%; position: relative; } .menu-toggle { position: fixed; top: 20px; right: 20px; width: 40px; height: 40px; background: transparent; border: none; cursor: pointer; z-index: 1000; display: flex; flex-direction: column; justify-content: space-between; padding: 10px 0; } .menu-toggle span { display: block; width: 100%; height: 2px; background-color: var(--color-text); transition: all 0.3s ease; } .menu-toggle.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); background-color: var(--color-bg); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); background-color: var(--color-bg); } .fullscreen-menu { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(44, 44, 44, 0.97); z-index: 990; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); overflow: hidden; } .fullscreen-menu.active { opacity: 1; visibility: visible; } .menu-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.15; } .hand-drawn-element { position: absolute; width: 300px; height: 300px; opacity: 0.07; pointer-events: none; transition: transform 0.5s ease; } .element-1 { top: -50px; right: -50px; transform: rotate(15deg); } .element-2 { bottom: -70px; left: -50px; transform: rotate(-20deg); } .nav-items { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 40px; } .nav-item { position: relative; margin: 10px 0; opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .fullscreen-menu.active .nav-item { opacity: 1; transform: translateY(0); } .fullscreen-menu.active .nav-item:nth-child(1) { transition-delay: 0.1s; } .fullscreen-menu.active .nav-item:nth-child(2) { transition-delay: 0.2s; } .fullscreen-menu.active .nav-item:nth-child(3) { transition-delay: 0.3s; } .fullscreen-menu.active .nav-item:nth-child(4) { transition-delay: 0.4s; } .fullscreen-menu.active .nav-item:nth-child(5) { transition-delay: 0.5s; } .nav-link { font-family: var(--font-primary); font-size: 3rem; color: var(--color-bg); text-decoration: none; position: relative; padding: 5px; letter-spacing: 1px; transition: color 0.3s ease; } .nav-link:hover { color: var(--color-accent); } .nav-link::after { content: ''; position: absolute; width: 0; height: 1px; bottom: 0; left: 0; background-color: var(--color-accent); transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } .portfolio-preview { position: absolute; width: 250px; height: 150px; background-size: cover; background-position: center; border-radius: 3px; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; transform: translateY(10px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); pointer-events: none; z-index: 1000; } .social-links { position: absolute; bottom: 30px; display: flex; gap: 20px; } .social-link { color: var(--color-light); text-decoration: none; font-size: 1.2rem; transition: all 0.3s ease; position: relative; opacity: 0; transform: translateY(20px); } .fullscreen-menu.active .social-link { opacity: 1; transform: translateY(0); } .fullscreen-menu.active .social-link:nth-child(1) { transition-delay: 0.6s; } .fullscreen-menu.active .social-link:nth-child(2) { transition-delay: 0.7s; } .fullscreen-menu.active .social-link:nth-child(3) { transition-delay: 0.8s; } .social-link::before { content: ''; position: absolute; width: 0; height: 2px; bottom: -5px; left: 0; background-color: var(--color-accent); transition: width 0.3s ease; } .social-link:hover { color: var(--color-accent); } .social-link:hover::before { width: 100%; } .main-content { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; text-align: center; position: relative; z-index: 1; } .entry-title { font-family: var(--font-primary); font-size: 3rem; margin-bottom: 20px; letter-spacing: 2px; position: relative; color: var(--color-text); } .entry-subtitle { font-size: 1.2rem; font-weight: 300; margin-bottom: 40px; max-width: 600px; line-height: 1.6; } .brush-stroke { position: absolute; width: 120%; height: 10px; bottom: -5px; left: -10%; background-image: url("data:image/svg+xml,%3Csvg width='200' height='10' viewBox='0 0 200 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5C50 2 150 8 200 5' stroke='%23ad6a52' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: cover; background-repeat: no-repeat; opacity: 0.7; } .cursor { position: fixed; width: 20px; height: 20px; border-radius: 50%; background-color: rgba(173, 106, 82, 0.3); transform: translate(-50%, -50%); pointer-events: none; mix-blend-mode: difference; z-index: 9999; transition: transform 0.2s ease, width 0.2s ease, height 0.2s ease; } .cursor.active { width: 50px; height: 50px; background-color: rgba(173, 106, 82, 0.2); } .explore-btn { margin-top: 20px; padding: 12px 30px; background-color: transparent; border: 1px solid var(--color-accent); color: var(--color-accent); font-family: var(--font-secondary); font-size: 1rem; cursor: pointer; position: relative; overflow: hidden; transition: color 0.3s ease; } .explore-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: var(--color-accent); transition: left 0.3s ease; z-index: -1; } .explore-btn:hover { color: var(--color-bg); } .explore-btn:hover::before { left: 0; } @media (max-width: 768px) { .entry-title { font-size: 2.5rem; } .entry-subtitle { font-size: 1rem; } .nav-link { font-size: 2rem; } .hand-drawn-element { width: 200px; height: 200px; } } @media (max-width: 480px) { .entry-title { font-size: 2rem; } .nav-link { font-size: 1.5rem; } .nav-items { gap: 10px; } .portfolio-preview { display: none; } } </style> </head> <body> <div class="cursor"></div> <div class="main-content"> <h1 class="entry-title"> Lisa Anderson <div class="brush-stroke"></div> </h1> <p class="entry-subtitle">Capturing the overlooked details of everyday life through mixed media illustrations and careful attention to the ephemeral.</p> <button class="explore-btn" id="explore-btn">Explore My Work</button> </div> <button class="menu-toggle" id="menu-toggle"> <span></span> <span></span> <span></span> </button> <div class="fullscreen-menu" id="fullscreen-menu"> <div class="menu-background"> <svg class="hand-drawn-element element-1" viewBox="0 0 100 100"> <path d="M20,50 Q35,20 50,50 T80,50" stroke="var(--color-accent)" stroke-width="1" fill="none" /> <path d="M30,30 Q45,60 60,30 T90,30" stroke="var(--color-accent)" stroke-width="1" fill="none" /> <circle cx="50" cy="50" r="30" stroke="var(--color-accent)" stroke-width="0.5" fill="none" /> <circle cx="50" cy="50" r="20" stroke="var(--color-accent)" stroke-width="0.3" fill="none" /> </svg> <svg class="hand-drawn-element element-2" viewBox="0 0 100 100"> <path d="M10,50 Q40,10 70,50 T100,50" stroke="var(--color-secondary)" stroke-width="1" fill="none" /> <path d="M20,70 Q50,30 80,70" stroke="var(--color-secondary)" stroke-width="1" fill="none" /> <rect x="30" y="30" width="40" height="40" stroke="var(--color-secondary)" stroke-width="0.5" fill="none" rx="5" /> </svg> </div> <nav class="nav-items"> <div class="nav-item"> <a href="#" class="nav-link" data-preview="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80">Illustrations</a> </div> <div class="nav-item"> <a href="#" class="nav-link" data-preview="https://images.unsplash.com/photo-1579783902614-a3fb3927b6a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=745&q=80">Sketchbook</a> </div> <div class="nav-item"> <a href="#" class="nav-link" data-preview="https://images.unsplash.com/photo-1607524815465-3d4a3731909c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=872&q=80">Exhibitions</a> </div> <div class="nav-item"> <a href="#" class="nav-link" data-preview="https://images.unsplash.com/photo-1544731612-de7f96afe55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80">About</a> </div> <div class="nav-item"> <a href="#" class="nav-link" data-preview="https://images.unsplash.com/photo-1594066521341-60d1dde266f6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80">Contact</a> </div> </nav> <div class="portfolio-preview" id="portfolio-preview"></div> <div class="social-links"> <a href="#" class="social-link">Instagram</a> <a href="#" class="social-link">Behance</a> <a href="#" class="social-link">Pinterest</a> </div> </div> <script> const menuToggle = document.getElementById('menu-toggle'); const fullscreenMenu = document.getElementById('fullscreen-menu'); const navLinks = document.querySelectorAll('.nav-link'); const portfolioPreview = document.getElementById('portfolio-preview'); const cursor = document.createElement('div'); const exploreBtn = document.getElementById('explore-btn'); cursor.classList.add('cursor'); document.body.appendChild(cursor); // Cursor movement document.addEventListener('mousemove', (e) => { cursor.style.left = `${e.clientX}px`; cursor.style.top = `${e.clientY}px`; }); document.addEventListener('mousedown', () => { cursor.classList.add('active'); }); document.addEventListener('mouseup', () => { cursor.classList.remove('active'); }); // Menu toggle menuToggle.addEventListener('click', () => { menuToggle.classList.toggle('active'); fullscreenMenu.classList.toggle('active'); document.body.style.overflow = fullscreenMenu.classList.contains('active') ? 'hidden' : 'auto'; }); exploreBtn.addEventListener('click', () => { menuToggle.classList.add('active'); fullscreenMenu.classList.add('active'); document.body.style.overflow = 'hidden'; }); // Portfolio preview on hover navLinks.forEach(link => { link.addEventListener('mouseenter', (e) => { const preview = link.getAttribute('data-preview'); portfolioPreview.style.backgroundImage = `url(${preview})`; portfolioPreview.style.opacity = '1'; portfolioPreview.style.transform = 'translateY(0)'; // Position preview next to cursor const linkRect = link.getBoundingClientRect(); portfolioPreview.style.left = `${linkRect.right + 20}px`; portfolioPreview.style.top = `${linkRect.top - 50}px`; // If preview would go off screen, position it to the left instead const previewRect = portfolioPreview.getBoundingClientRect(); if (previewRect.right > window.innerWidth) { portfolioPreview.style.left = `${linkRect.left - previewRect.width - 20}px`; } }); link.addEventListener('mouseleave', () => { portfolioPreview.style.opacity = '0'; portfolioPreview.style.transform = 'translateY(10px)'; }); // Prevent actual navigation link.addEventListener('click', (e) => { e.preventDefault(); }); }); // Animate hand-drawn elements const handDrawnElements = document.querySelectorAll('.hand-drawn-element'); document.addEventListener('mousemove', (e) => { const mouseX = e.clientX / window.innerWidth; const mouseY = e.clientY / window.innerHeight; handDrawnElements.forEach(element => { const moveX = (mouseX - 0.5) * 20; const moveY = (mouseY - 0.5) * 20; element.style.transform = `translate(${moveX}px, ${moveY}px) rotate(${element.classList.contains('element-1') ? 15 : -20}deg)`; }); }); // Add hover effects to interactive elements const interactiveElements = document.querySelectorAll('.nav-link, .social-link, .explore-btn, .menu-toggle'); interactiveElements.forEach(element => { element.addEventListener('mouseenter', () => { cursor.classList.add('active'); }); element.addEventListener('mouseleave', () => { cursor.classList.remove('active'); }); }); </script> </body> </html>
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Atlas Financial - Menu</title> <style> :root { --primary-color: #1a3a5f; --secondary-color: #3b6b9b; --accent-color: #78c2e5; --text-color: #1f2937; --light-color: #f8fafc; --medium-color: #e2e8f0; --transition-speed: 0.5s; --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-primary); color: var(--text-color); overflow-x: hidden; background-color: var(--light-color); width: 100%; height: 100%; } .container { width: 100%; max-width: 700px; height: 700px; margin: 0 auto; position: relative; overflow: hidden; } .header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; background-color: var(--light-color); border-bottom: 1px solid var(--medium-color); position: relative; z-index: 100; } .logo { display: flex; align-items: center; } .logo-text { font-weight: 700; font-size: 1.5rem; color: var(--primary-color); margin-left: 0.5rem; } .menu-toggle { background: none; border: none; cursor: pointer; width: 2rem; height: 1.5rem; position: relative; z-index: 101; } .menu-toggle span { display: block; width: 100%; height: 2px; background-color: var(--primary-color); position: absolute; transition: all var(--transition-speed) ease; } .menu-toggle span:nth-child(1) { top: 0; } .menu-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); } .menu-toggle span:nth-child(3) { bottom: 0; } .menu-toggle.active span:nth-child(1) { transform: translateY(10px) rotate(45deg); background-color: var(--light-color); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); background-color: var(--light-color); } .fullscreen-menu { position: fixed; top: 0; left: 0; width: 100%; height: 0; background-color: var(--primary-color); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 99; overflow: hidden; transition: height var(--transition-speed) ease-in-out; } .fullscreen-menu.active { height: 100%; } .menu-background { position: absolute; width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); opacity: 0.97; } .menu-pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.05) 1px, transparent 1px), radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.5; } .menu-content { position: relative; z-index: 1; width: 100%; max-width: 700px; padding: 2rem; opacity: 0; transform: translateY(20px); transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease; } .fullscreen-menu.active .menu-content { opacity: 1; transform: translateY(0); } .menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 3rem; } .menu-section { display: flex; flex-direction: column; } .menu-section-title { color: var(--accent-color); font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; } .menu-list { list-style: none; } .menu-item { margin-bottom: 1rem; } .menu-link { color: var(--light-color); text-decoration: none; font-size: 1.25rem; font-weight: 500; display: inline-block; position: relative; transition: color 0.3s ease; } .menu-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0; background-color: var(--accent-color); transition: width 0.3s ease; } .menu-link:hover { color: var(--accent-color); } .menu-link:hover::after { width: 100%; } .menu-footer { margin-top: 3rem; display: flex; justify-content: space-between; align-items: center; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); } .menu-social { display: flex; gap: 1rem; } .social-icon { color: var(--light-color); font-size: 1.25rem; transition: color 0.3s ease; } .social-icon:hover { color: var(--accent-color); } .cta-button { background-color: var(--accent-color); color: var(--primary-color); border: none; padding: 0.75rem 1.5rem; border-radius: 4px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; font-size: 0.875rem; } .cta-button:hover { background-color: var(--light-color); transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .page-content { padding: 2rem; height: calc(100% - 80px); overflow-y: auto; } .hero { margin-bottom: 2rem; } .hero-title { font-size: 2rem; font-weight: 700; color: var(--primary-color); margin-bottom: 1rem; line-height: 1.2; } .hero-subtitle { font-size: 1rem; color: var(--secondary-color); line-height: 1.5; } .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .feature-card { background-color: white; border-radius: 8px; padding: 1.5rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); } .feature-icon { width: 48px; height: 48px; background-color: rgba(120, 194, 229, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: var(--secondary-color); } .feature-title { font-size: 1.25rem; font-weight: 600; color: var(--primary-color); margin-bottom: 0.5rem; } .feature-desc { font-size: 0.875rem; color: var(--text-color); line-height: 1.5; } .stat-item { display: inline-flex; flex-direction: column; align-items: center; margin-right: 2rem; } .stat-value { font-size: 2rem; font-weight: 700; color: var(--primary-color); } .stat-label { font-size: 0.875rem; color: var(--secondary-color); } .market-updates { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--medium-color); } .section-title { font-size: 1.25rem; font-weight: 600; color: var(--primary-color); margin-bottom: 1rem; } .update-ticker { display: flex; overflow-x: hidden; margin: 1rem 0; } .ticker-content { display: flex; animation: ticker 30s linear infinite; } .ticker-item { display: flex; align-items: center; margin-right: 2rem; white-space: nowrap; } .ticker-symbol { font-weight: 600; margin-right: 0.5rem; } .ticker-value { color: #10b981; } .ticker-value.down { color: #ef4444; } @keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } @media (max-width: 640px) { .menu-grid { grid-template-columns: 1fr; gap: 1.5rem; } .feature-grid { grid-template-columns: 1fr; } .menu-footer { flex-direction: column; gap: 1.5rem; } } .market-graph { width: 100%; height: 150px; margin: 1rem 0; position: relative; } .graph-line { position: absolute; height: 2px; bottom: 30%; left: 0; width: 0; background: linear-gradient(90deg, var(--secondary-color) 0%, var(--accent-color) 100%); animation: drawLine 2s ease-out forwards; } .graph-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background-color: var(--accent-color); bottom: calc(30% - 4px); transform: scale(0); animation: popDot 0.3s ease-out forwards; } .graph-dot:nth-child(1) { left: 10%; animation-delay: 0.2s; } .graph-dot:nth-child(2) { left: 30%; bottom: calc(40% - 4px); animation-delay: 0.6s; } .graph-dot:nth-child(3) { left: 50%; bottom: calc(45% - 4px); animation-delay: 1s; } .graph-dot:nth-child(4) { left: 70%; bottom: calc(60% - 4px); animation-delay: 1.4s; } .graph-dot:nth-child(5) { left: 90%; bottom: calc(70% - 4px); animation-delay: 1.8s; } @keyframes drawLine { 0% { width: 0; } 100% { width: 100%; } } @keyframes popDot { 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } </style> </head> <body> <div class="container"> <header class="header"> <div class="logo"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#1a3a5f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2 17L12 22L22 17" stroke="#1a3a5f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2 12L12 17L22 12" stroke="#1a3a5f" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> <span class="logo-text">Atlas Financial</span> </div> <button class="menu-toggle" aria-label="Toggle menu"> <span></span> <span></span> <span></span> </button> </header> <div class="fullscreen-menu"> <div class="menu-background"></div> <div class="menu-pattern"></div> <div class="menu-content"> <div class="menu-grid"> <div class="menu-section"> <h3 class="menu-section-title">Financial Services</h3> <ul class="menu-list"> <li class="menu-item"> <a href="#" class="menu-link">Wealth Management</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Investment Advisory</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Retirement Planning</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Tax Optimization</a> </li> </ul> </div> <div class="menu-section"> <h3 class="menu-section-title">Market Insights</h3> <ul class="menu-list"> <li class="menu-item"> <a href="#" class="menu-link">Economic Forecasts</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Investment Research</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Market Updates</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Quarterly Reports</a> </li> </ul> </div> <div class="menu-section"> <h3 class="menu-section-title">Banking Solutions</h3> <ul class="menu-list"> <li class="menu-item"> <a href="#" class="menu-link">Private Banking</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Institutional Services</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Corporate Financing</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Treasury Management</a> </li> </ul> </div> <div class="menu-section"> <h3 class="menu-section-title">About Atlas</h3> <ul class="menu-list"> <li class="menu-item"> <a href="#" class="menu-link">Our Approach</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Leadership Team</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Client Stories</a> </li> <li class="menu-item"> <a href="#" class="menu-link">Contact Us</a> </li> </ul> </div> </div> <div class="menu-footer"> <div class="menu-social"> <a href="#" class="social-icon" aria-label="LinkedIn"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16 8C17.5913 8 19.1174 8.63214 20.2426 9.75736C21.3679 10.8826 22 12.4087 22 14V21H18V14C18 13.4696 17.7893 12.9609 17.4142 12.5858C17.0391 12.2107 16.5304 12 16 12C15.4696 12 14.9609 12.2107 14.5858 12.5858C14.2107 12.9609 14 13.4696 14 14V21H10V14C10 12.4087 10.6321 10.8826 11.7574 9.75736C12.8826 8.63214 14.4087 8 16 8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M6 9H2V21H6V9Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M4 6C5.10457 6 6 5.10457 6 4C6 2.89543 5.10457 2 4 2C2.89543 2 2 2.89543 2 4C2 5.10457 2.89543 6 4 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </a> <a href="#" class="social-icon" aria-label="Twitter"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M23 3C22.0424 3.67548 20.9821 4.19211 19.86 4.53C19.2577 3.83751 18.4573 3.34669 17.567 3.12393C16.6767 2.90116 15.7395 2.9572 14.8821 3.28445C14.0247 3.61171 13.2884 4.19439 12.773 4.95372C12.2575 5.71304 11.9877 6.61234 12 7.53V8.53C10.2426 8.57557 8.50127 8.18581 6.93101 7.39545C5.36074 6.60508 4.01032 5.43864 3 4C3 4 -1 13 8 17C5.94053 18.398 3.48716 19.0989 1 19C10 24 21 19 21 7.5C20.9991 7.22145 20.9723 6.94359 20.92 6.67C21.9406 5.66349 22.6608 4.39271 23 3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </a> <a href="#" class="social-icon" aria-label="Instagram"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M17 2H7C4.23858 2 2 4.23858 2 7V17C2 19.7614 4.23858 22 7 22H17C19.7614 22 22 19.7614 22 17V7C22 4.23858 19.7614 2 17 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16 11.37C16.1234 12.2022 15.9813 13.0522 15.5938 13.799C15.2063 14.5458 14.5931 15.1514 13.8416 15.5297C13.0901 15.9079 12.2384 16.0396 11.4078 15.9059C10.5771 15.7723 9.80976 15.3801 9.21484 14.7852C8.61991 14.1902 8.22773 13.4229 8.09406 12.5922C7.9604 11.7615 8.09206 10.9099 8.47033 10.1584C8.84861 9.40685 9.45419 8.79374 10.201 8.40624C10.9478 8.01874 11.7978 7.87659 12.63 8C13.4789 8.12588 14.2648 8.52146 14.8717 9.12831C15.4785 9.73515 15.8741 10.5211 16 11.37Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M17.5 6.5H17.51" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </a> </div> <button class="cta-button">Schedule a Consultation</button> </div> </div> </div> <div class="page-content"> <section class="hero"> <h1 class="hero-title">Strategic Financial Solutions for Lasting Security</h1> <p class="hero-subtitle">Atlas Financial delivers sophisticated wealth management strategies designed for high-net-worth individuals and institutions seeking long-term financial stability.</p> </section> <div class="market-graph"> <div class="graph-line"></div> <div class="graph-dot"></div> <div class="graph-dot"></div> <div class="graph-dot"></div> <div class="graph-dot"></div> <div class="graph-dot"></div> </div> <div class="feature-grid"> <div class="feature-card"> <div class="feature-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="#3b6b9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2 17L12 22L22 17" stroke="#3b6b9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M2 12L12 17L22 12" stroke="#3b6b9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <h3 class="feature-title">Portfolio Strategy</h3> <p class="feature-desc">Data-driven asset allocation customized to your risk tolerance and long-term objectives.</p> </div> <div class="feature-card"> <div class="feature-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M21 11.5C21.0034 12.8199 20.6951 14.1219 20.1 15.3C19.3944 16.7118 18.3098 17.8992 16.9674 18.7293C15.6251 19.5594 14.0782 19.9994 12.5 20C11.1801 20.0035 9.87812 19.6951 8.7 19.1L3 21L4.9 15.3C4.30493 14.1219 3.99656 12.8199 4 11.5C4.00061 9.92179 4.44061 8.37488 5.27072 7.03258C6.10083 5.69028 7.28825 4.6056 8.7 3.90003C9.87812 3.30496 11.1801 2.99659 12.5 3.00003H13C15.0843 3.11502 17.053 3.99479 18.5291 5.47089C20.0052 6.94699 20.885 8.91568 21 11V11.5Z" stroke="#3b6b9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <h3 class="feature-title">Advisory Services</h3> <p class="feature-desc">Personalized guidance from certified financial planners with institutional expertise.</p> </div> <div class="feature-card"> <div class="feature-icon"> <svg width="24" height="24" 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="#3b6b9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 16V12" stroke="#3b6b9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M12 8H12.01" stroke="#3b6b9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <h3 class="feature-title">Risk Management</h3> <p class="feature-desc">Sophisticated hedging strategies to protect your assets during market volatility.</p> </div> <div class="feature-card"> <div class="feature-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M19 4H5C3.89543 4 3 4.89543 3 6V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V6C21 4.89543 20.1046 4 19 4Z" stroke="#3b6b9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M16 2V6" stroke="#3b6b9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M8 2V6" stroke="#3b6b9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <path d="M3 10H21" stroke="#3b6b9b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </div> <h3 class="feature-title">Legacy Planning</h3> <p class="feature-desc">Estate and succession strategies designed to preserve wealth across generations.</p> </div> </div> <div class="market-updates"> <h3 class="section-title">Market Updates</h3> <div class="update-ticker"> <div class="ticker-content"> <div class="ticker-item"> <span class="ticker-symbol">S&P 500</span> <span class="ticker-value">+1.2%</span> </div> <div class="ticker-item"> <span class="ticker-symbol">NASDAQ</span> <span class="ticker-value">+0.8%</span> </div> <div class="ticker-item"> <span class="ticker-symbol">DOW</span> <span class="ticker-value down">-0.3%</span> </div> <div class="ticker-item"> <span class="ticker-symbol">FTSE 100</span> <span class="ticker-value">+0.5%</span> </div> <div class="ticker-item"> <span class="ticker-symbol">DAX</span> <span class="ticker-value">+0.7%</span> </div> <div class="ticker-item"> <span class="ticker-symbol">NIKKEI</span> <span class="ticker-value down">-0.2%</span> </div> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { const menuToggle = document.querySelector('.menu-toggle'); const fullscreenMenu = document.querySelector('.fullscreen-menu'); menuToggle.addEventListener('click', function() { this.classList.toggle('active'); fullscreenMenu.classList.toggle('active'); document.body.style.overflow = fullscreenMenu.classList.contains('active') ? 'hidden' : 'auto'; }); // Prevent actual form submissions document.querySelectorAll('button, a').forEach(element => { element.addEventListener('click', function(e) { if (this.type === 'submit' || this.tagName === 'A') { e.preventDefault(); } }); }); // Clone ticker content for infinite loop const tickerContent = document.querySelector('.ticker-content'); const clone = tickerContent.cloneNode(true); document.querySelector('.update-ticker').appendChild(clone); // Feature card hover effect enhancement const featureCards = document.querySelectorAll('.feature-card'); featureCards.forEach(card => { card.addEventListener('mouseenter', function() { featureCards.forEach(c => { if (c !== this) { c.style.opacity = '0.7'; c.style.transform = 'scale(0.98)'; } }); }); card.addEventListener('mouseleave', function() { featureCards.forEach(c => { c.style.opacity = '1'; c.style.transform = ''; }); }); }); // Menu link animation const menuLinks = document.querySelectorAll('.menu-link'); menuLinks.forEach(link => { link.addEventListener('mouseenter', function() { this.style.transition = 'transform 0.3s ease'; this.style.transform = 'translateX(10px)'; }); link.addEventListener('mouseleave', function() { this.style.transform = 'translateX(0)'; }); }); }); </script> </body> </html>
