coteburger

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Côté Burger - Le goût à l'état pur</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> <script src="https://unpkg.com/feather-icons"></script> <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600;700&display=swap');

    body {
        font-family: 'Poppins', sans-serif;
        scroll-behavior: smooth;
        background: url('https://huggingface.co/spaces/Felix6969/oopb/resolve/main/images/IMG_2736.jpeg') no-repeat center center fixed;
        background-size: cover;
        color: #fff;
    }
    
    .title-font {
        font-family: 'Space Mono', monospace;
    }
    
    .hero-bg {
        background: url('https://huggingface.co/spaces/Felix6969/oopb/resolve/main/images/IMG_2736.jpeg') no-repeat center center fixed;
        background-size: cover;
        background-position: center;
    }
    
    .menu-item {
        transition: all 0.3s ease;
        background-color: #1a1a1a;
        border: 1px solid #333;
    }
    
    .menu-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(255, 255, 255, 0.1);
        border-color: #fff;
    }
    
    .burger-icon {
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }
</style>

</head> <body class="bg-gray-900 text-white"> <!-- Header --> <header class="bg-black py-6 px-4 md:px-8 border-b border-gray-800"> <div class="container mx-auto flex flex-col md:flex-row items-center justify-between"> <div class="flex items-center justify-between w-full"> <div class="flex items-center"> <div class="burger-icon mr-3"> <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> </svg> </div> <h1 class="title-font text-3xl md:text-4xl font-bold text-white">Cote Burger</h1> </div> <img src="https://huggingface.co/spaces/Felix6969/oopb/resolve/main/images/minimalist_logo.png" alt="Logo" class="h-12 rounded-lg"> </div> </div> </header>

<!-- Navigation -->
<nav class="bg-black py-4 sticky top-0 z-50 shadow-lg border-b border-gray-800">
    <div class="container mx-auto flex flex-col md:flex-row justify-center items-center space-y-2 md:space-y-0 md:space-x-10">
        <a href="#" class="text-white font-bold hover:text-gray-300 transition-colors duration-300 flex items-center">
            <i data-feather="home" class="mr-2"></i> Accueil
        </a>
        <a href="#menu" class="text-white font-bold hover:text-gray-300 transition-colors duration-300 flex items-center">
            <i data-feather="book-open" class="mr-2"></i> Menu
        </a>
        <a href="horaires.html" class="text-white font-bold hover:text-gray-300 transition-colors duration-300 flex items-center">
            <i data-feather="clock" class="mr-2"></i> Horaires
        </a>
    </div>
</nav>

<!-- Hero Section -->
<section class="hero-bg py-12 md:py-16 px-4" id="vanta-bg">
    <div class="text-left pl-8 md:pl-16" data-aos="fade-up" data-aos-duration="1000">
        <h2 class="font-mono text-lg md:text-2xl font-extrabold mb-2 text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-yellow-400 tracking-tight">
            COTE BURGER<br>
        </h2>
        <div class="flex flex-col md:flex-row gap-4 items-center">
            <a href="#menu" class="bg-gradient-to-r from-orange-600 to-orange-400 hover:from-orange-500 hover:to-orange-300 text-white font-bold py-2 px-6 rounded-full inline-flex items-center transition-all duration-300 transform hover:scale-105 shadow-lg text-sm">
                DÉCOUVRIR NOTRE MENU <i data-feather="arrow-down" class="ml-2"></i>
            </a>
            <a href="commander.html" class="bg-gradient-to-r from-orange-600 to-orange-400 hover:from-orange-500 hover:to-orange-300 text-white font-bold py-2 px-6 rounded-full inline-flex items-center transition-all duration-300 transform hover:scale-105 shadow-lg text-sm">
                COMMANDER <i data-feather="shopping-cart" class="ml-2"></i>
            </a>
        </div>
    </div>
</section>

<!-- Menu Section -->
<section class="py-16 px-4 md:px-8" id="menu">
    <div class="container mx-auto">
        <h3 class="title-font text-4xl md:text-5xl text-white font-bold text-center mb-4" data-aos="fade-up">Notre sélection</h3>
        <p class="text-center text-white font-bold mb-12 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
            Tous nos burgers sont préparés avec des ingrédients frais et de qualité supérieure
        </p>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Menu Item 1 -->
            <a href="burgers.html" class="menu-item bg-gray-800 border border-orange-500 rounded-xl p-6" data-aos="fade-up" data-aos-delay="200">
                <div class="mb-4 h-48 overflow-hidden rounded-lg">
                    <img src="https://huggingface.co/spaces/Felix6969/oopb/resolve/main/images/IMG_2739.jpeg" alt="Nos Burgers" class="w-full h-full object-cover">
                </div>
                <h4 class="text-2xl font-bold text-orange-500">Nos Burgers</h4>
            </a>
            
            <!-- Menu Item 2 -->
            <a href="poutines.html" class="menu-item bg-gray-800 border border-orange-500 rounded-xl p-6" data-aos="fade-up" data-aos-delay="300">
                <div class="mb-4 h-48 overflow-hidden rounded-lg">
                    <img src="https://huggingface.co/spaces/Felix6969/oopb/resolve/main/images/IMG_2738.jpeg" alt="Nos Poutines" class="w-full h-full object-cover">
                </div>
                <h4 class="text-2xl font-bold text-orange-500">Nos Poutines</h4>
            </a>
            
        </div>
        
    </div>
</section>

<!-- Footer -->
<footer class="bg-black py-12 px-4 md:px-8 border-t border-gray-800">
    <div class="container mx-auto">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
            <div>
                <h4 class="text-white font-bold mb-4 text-lg">Accessibilité</h4>
                <ul class="space-y-2">
                    <li class="flex items-center text-gray-400">
                        <i data-feather="check-circle" class="mr-2 text-orange-500"></i>
                        Entrée accessible en fauteuil roulant
                    </li>
                    <li class="flex items-center text-gray-400">
                        <i data-feather="check-circle" class="mr-2 text-orange-500"></i>
                        Parking accessible en fauteuil roulant
                    </li>
                </ul>
            </div>
            <div>
                <h4 class="text-white font-bold mb-4 text-lg">Services disponibles</h4>
                <ul class="space-y-2">
                    <li class="flex items-center text-gray-400">
                        <i data-feather="check-circle" class="mr-2 text-orange-500"></i>
                        Livraison sans contact
                    </li>
                    <li class="flex items-center text-gray-400">
                        <i data-feather="check-circle" class="mr-2 text-orange-500"></i>
                        Livraison
                    </li>
                    <li class="flex items-center text-gray-400">
                        <i data-feather="check-circle" class="mr-2 text-orange-500"></i>
                        Vente à emporter
                    </li>
                    <li class="flex items-center text-gray-400">
                        <i data-feather="check-circle" class="mr-2 text-orange-500"></i>
                        Repas sur place
                    </li>
                </ul>
            </div>
        </div>
    </div>
</footer>

<script>
    AOS.init({
        duration: 800,
        once: true
    });
    
    feather.replace();
    
    // Vanta.js background for hero section
    VANTA.GLOBE({
        el: "#vanta-bg",
        mouseControls: true,
        touchControls: true,
        gyroControls: false,
        minHeight: 200.00,
        minWidth: 200.00,
        scale: 1.00,
        scaleMobile: 1.00,
        color: 0xff6600,
        backgroundColor: 0x111111,
        size: 0.8
    });
</script>

</body> </html>