mirror of
https://github.com/CoolnsX/my-website.git
synced 2025-12-20 07:15:19 +05:30
110 lines
4.1 KiB
HTML
110 lines
4.1 KiB
HTML
<!doctype html>
|
|
<html lang="en" class="dark scroll-smooth">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>{% block title %}{% endblock title %} - Coolans</title>
|
|
<link
|
|
rel="stylesheet"
|
|
href="{{ get_url(path='main.css') | safe }}"
|
|
/>
|
|
<script>
|
|
// Mobile menu toggle
|
|
function toggleMobileMenu() {
|
|
const menu = document.getElementById("mobile-menu");
|
|
menu.classList.toggle("hidden");
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body
|
|
class="min-h-screen flex flex-col bg-black text-white relative transition-colors duration-300"
|
|
>
|
|
<!-- Blurred Background Image -->
|
|
<div
|
|
class="fixed inset-0 -z-10 bg-[url('/assets/background.webp')] bg-cover bg-center blur-md"
|
|
></div>
|
|
<div class="fixed inset-0 bg-black/70 -z-5"></div>
|
|
|
|
<!-- Top Navigation -->
|
|
<nav class="sticky top-0 z-50 bg-transparent backdrop-blur-none py-4">
|
|
<div
|
|
class="container mx-auto px-4 flex justify-between items-center"
|
|
>
|
|
<!-- Logo Island -->
|
|
<div
|
|
class="px-6 py-3 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md"
|
|
>
|
|
<a href="/" class="text-xl font-bold text-white">Coolans</a>
|
|
</div>
|
|
|
|
<!-- Mobile menu button -->
|
|
<button
|
|
class="md:hidden px-3 py-2 rounded-lg text-gray-300 bg-gray-900/80 border border-gray-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
|
|
aria-label="Toggle menu"
|
|
onclick="toggleMobileMenu()"
|
|
>
|
|
<svg
|
|
class="w-6 h-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Nav Links Island -->
|
|
<ul
|
|
id="mobile-menu"
|
|
class="hidden md:flex md:static absolute right-4 top-full mt-2 md:mt-0 px-6 py-3 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md space-x-6 md:space-x-6 flex-col md:flex-row text-gray-300 md:items-center"
|
|
>
|
|
|
|
<li>
|
|
<a
|
|
href="/"
|
|
class="hover:text-blue-400 block py-2 md:py-0"
|
|
>Home</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="/blog"
|
|
class="hover:text-blue-400 block py-2 md:py-0"
|
|
>Blogs</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content Section -->
|
|
<main class="flex-grow section py-10 relative z-10 rounded-2xl">
|
|
<div
|
|
class="container mx-auto px-4"
|
|
>
|
|
<div
|
|
class="px-6 py-4 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md text-center text-sm"
|
|
>
|
|
{% block content %}{% endblock content %}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="w-full py-10 relative z-10">
|
|
<div class="container mx-auto px-4">
|
|
<div
|
|
class="px-6 py-4 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md text-center text-sm text-gray-400"
|
|
>
|
|
© {{ now() | date(format="%Y") }} Coolans. All rights
|
|
reserved.
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
</html>
|