index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Brainster Library</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">
</head>
<body>
        <!-- Sticky Navbar -->
        <nav class="bg-gray-800 text-white p-4 sticky top-0 z-50">
            <div class="container mx-auto flex justify-between items-center">
                <!-- Logo Placeholder -->
                <div>
                    <img src="./images/Logo.png" alt="Logo" class="h-8">
                </div>
    
                <!-- Login Button -->
                <div>
                    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                        Login
                    </button>
                </div>
            </div>
        </nav>

        <section class="hero-background h-screen flex items-center justify-center">
            <h1 class="text-white text-4xl md:text-6xl font-bold text-center">Embark on a Journey in Every Page</h1>
        </section>
</body>
</html>