BurgerHub - Gourmet Burgers

by oktaviardi pratama

HTML

<!-- Bootstrap 5 CSS CDN -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- 1. NAVBAR -->
    <!-- Sticky top ensures it stays visible while scrolling -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-black sticky-top shadow">
        <div class="container">
            <a class="navbar-brand fw-bold text-warning" href="#">
                🍔 BurgerHub
            </a>
            
            <!-- Mobile Toggle Button -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Navigation Links -->
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" href="#home">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#menu">Menu</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Contact</a>
                    </li>
                </ul>
                <!-- CTA Button in Navbar (Hidden on very small screens, visible on lg) -->
                <div class="d-flex ms-lg-3">
                    <a href="#menu" class="btn btn-warning btn-sm fw-bold">Order Now</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- 2. HERO SECTION -->
    <header id="home" class="hero-section d-flex align-items-center" style="min-height: 80vh;">
        <div class="container text-center text-white">
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <h1 class="display-3 fw-bold mb-3 text-warning">
                  ...

CSS

/* Minimal Custom CSS only for Image Aspect Ratio */
        .hero-section {
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1586190848861-99c9574548e3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');
            background-size: cover;
            background-position: center;
        }
        .card-img-top {
            height: 200px;
            object-fit: cover;
        }

        body {
          color:#fff;
        }