|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Animated Responsive Navigation</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(-10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
|
|
|
@keyframes slideIn { |
|
|
from { transform: translateX(100%); } |
|
|
to { transform: translateX(0); } |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
|
|
|
.nav-item { |
|
|
position: relative; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-item::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background: linear-gradient(90deg, #3b82f6, #8b5cf6); |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-item:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.mobile-menu { |
|
|
animation: slideIn 0.5s forwards; |
|
|
} |
|
|
|
|
|
.mobile-menu.closing { |
|
|
animation: slideIn 0.5s reverse forwards; |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
animation: fadeIn 0.5s ease-out forwards; |
|
|
animation-delay: calc(var(--order) * 0.1s); |
|
|
} |
|
|
|
|
|
.logo { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100 font-sans"> |
|
|
|
|
|
<nav class="bg-white shadow-lg fixed w-full z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4"> |
|
|
<div class="flex justify-between items-center h-16"> |
|
|
|
|
|
<div class="flex-shrink-0 flex items-center logo"> |
|
|
<i class="fas fa-rocket text-indigo-600 text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold text-gray-900">CosmoNav</span> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#home" class="nav-item text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium nav-link" style="--order: 1">Home</a> |
|
|
<a href="#features" class="nav-item text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium nav-link" style="--order: 2">Features</a> |
|
|
<a href="#pricing" class="nav-item text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium nav-link" style="--order: 3">Pricing</a> |
|
|
<a href="#about" class="nav-item text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium nav-link" style="--order: 4">About</a> |
|
|
<a href="#contact" class="nav-item text-gray-900 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium nav-link" style="--order: 5">Contact</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:hidden flex items-center"> |
|
|
<button id="mobile-menu-button" class="text-gray-900 hover:text-indigo-600 focus:outline-none"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="mobile-menu hidden md:hidden absolute top-16 left-0 right-0 bg-white shadow-lg rounded-b-lg overflow-hidden"> |
|
|
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 flex flex-col"> |
|
|
<a href="#home" class="nav-item text-gray-900 hover:text-indigo-600 block px-3 py-2 rounded-md text-base font-medium mobile-nav-link" style="--order: 1">Home</a> |
|
|
<a href="#features" class="nav-item text-gray-900 hover:text-indigo-600 block px-3 py-2 rounded-md text-base font-medium mobile-nav-link" style="--order: 2">Features</a> |
|
|
<a href="#pricing" class="nav-item text-gray-900 hover:text-indigo-600 block px-3 py-2 rounded-md text-base font-medium mobile-nav-link" style="--order: 3">Pricing</a> |
|
|
<a href="#about" class="nav-item text-gray-900 hover:text-indigo-600 block px-3 py-2 rounded-md text-base font-medium mobile-nav-link" style="--order: 4">About</a> |
|
|
<a href="#contact" class="nav-item text-gray-900 hover:text-indigo-600 block px-3 py-2 rounded-md text-base font-medium mobile-nav-link" style="--order: 5">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="pt-16 px-4"> |
|
|
<section id="home" class="min-h-screen flex items-center justify-center bg-gradient-to-r from-indigo-100 to-purple-100"> |
|
|
<div class="text-center"> |
|
|
<h1 class="text-5xl font-bold text-gray-900 mb-6">Welcome to CosmoNav</h1> |
|
|
<p class="text-xl text-gray-700 mb-8">Experience the future of navigation with our animated menu</p> |
|
|
<button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg"> |
|
|
Get Started |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<section id="features" class="min-h-screen flex items-center justify-center bg-white"> |
|
|
<div class="text-center"> |
|
|
<h2 class="text-4xl font-bold text-gray-900 mb-12">Features</h2> |
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="feature-card p-6 rounded-lg bg-gray-50 hover:bg-indigo-50 transition-all duration-300 transform hover:-translate-y-2"> |
|
|
<i class="fas fa-bolt text-indigo-600 text-4xl mb-4"></i> |
|
|
<h3 class="text-xl font-semibold mb-2">Lightning Fast</h3> |
|
|
<p class="text-gray-600">Optimized animations for smooth performance on all devices.</p> |
|
|
</div> |
|
|
<div class="feature-card p-6 rounded-lg bg-gray-50 hover:bg-indigo-50 transition-all duration-300 transform hover:-translate-y-2"> |
|
|
<i class="fas fa-mobile-alt text-indigo-600 text-4xl mb-4"></i> |
|
|
<h3 class="text-xl font-semibold mb-2">Fully Responsive</h3> |
|
|
<p class="text-gray-600">Looks great on phones, tablets, and desktop computers.</p> |
|
|
</div> |
|
|
<div class="feature-card p-6 rounded-lg bg-gray-50 hover:bg-indigo-50 transition-all duration-300 transform hover:-translate-y-2"> |
|
|
<i class="fas fa-paint-brush text-indigo-600 text-4xl mb-4"></i> |
|
|
<h3 class="text-xl font-semibold mb-2">Beautiful Animations</h3> |
|
|
<p class="text-gray-600">Subtle but impressive animations that delight users.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button'); |
|
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
let isMenuOpen = false; |
|
|
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
if (isMenuOpen) { |
|
|
|
|
|
mobileMenu.classList.add('closing'); |
|
|
setTimeout(() => { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
mobileMenu.classList.remove('closing'); |
|
|
}, 500); |
|
|
} else { |
|
|
|
|
|
mobileMenu.classList.remove('hidden'); |
|
|
|
|
|
const links = document.querySelectorAll('.mobile-nav-link'); |
|
|
links.forEach(link => { |
|
|
link.style.animation = 'none'; |
|
|
setTimeout(() => { |
|
|
link.style.animation = ''; |
|
|
}, 10); |
|
|
}); |
|
|
} |
|
|
isMenuOpen = !isMenuOpen; |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const targetId = this.getAttribute('href'); |
|
|
const targetElement = document.querySelector(targetId); |
|
|
|
|
|
if (targetElement) { |
|
|
|
|
|
if (isMenuOpen) { |
|
|
mobileMenu.classList.add('closing'); |
|
|
setTimeout(() => { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
mobileMenu.classList.remove('closing'); |
|
|
isMenuOpen = false; |
|
|
}, 500); |
|
|
} |
|
|
|
|
|
|
|
|
window.scrollTo({ |
|
|
top: targetElement.offsetTop - 60, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const featureCards = document.querySelectorAll('.feature-card'); |
|
|
|
|
|
const observer = new IntersectionObserver((entries) => { |
|
|
entries.forEach(entry => { |
|
|
if (entry.isIntersecting) { |
|
|
entry.target.style.opacity = '1'; |
|
|
entry.target.style.transform = 'translateY(0)'; |
|
|
} |
|
|
}); |
|
|
}, { threshold: 0.1 }); |
|
|
|
|
|
featureCards.forEach(card => { |
|
|
card.style.opacity = '0'; |
|
|
card.style.transform = 'translateY(20px)'; |
|
|
card.style.transition = 'all 0.5s ease-out'; |
|
|
observer.observe(card); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Spiketop/menu-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
