<title>Starbucks Coffee Company</title>

    <ul class="navbar-nav-left">
      <li>
        <a href="#">Menu</a>
      </li>
      <li>
        <a href="#">Rewards</a>
      </li>
      <li>
        <a href="#">Gift Cards</a>
      </li>
    </ul>

    <ul class="navbar-nav-right">
      <li>
        <a href="#">
          <img src="location_pin_002.jpg" alt="" />
          <span>Find a store</span>
        </a>
      </li>
      <li><button class="btn btn-dark-outline">Sign in</button></li>
      <li><button class="btn btn-dark">Join now</button></li>
    </ul>

    <!-- Hamburger Menu -->
    <button type="button" class="hamburger" id="menu-btn">
      <span class="hamburger-top"></span>
      <span class="hamburger-middle"></span>
      <span class="hamburger-bottom"></span>
    </button>
  </div>
</nav>

<!-- Mobile Menu -->
<div class="mobile-menu hidden" id="menu">
  <ul>
    <li>
      <a href="#">Menu</a>
    </li>
    <li>
      <a href="#">Rewards</a>
    </li>
    <li>
      <a href="#">Gift Cards</a>
    </li>
  </ul>

  <div class="mobile-menu-bottom">
    <button class="btn btn-dark-outline">Sign in</button>
    <button class="btn btn-dark">Join now</button>
    <div>
      <a href="#">
        <img src="img/marker.svg" alt="" />
        <span>Find a store</span>
      </a>
    </div>
  </div>
</div>

<!-- Box A -->
<section class="box box-a bg-primary text-center py-md">
  <div class="box-inner">
    <h2 class="text-xl">Jingle all the way to free favorites</h2>
    <p class="text-md">
      Join Starbucks® Rewards for delicious deals & exclusive offers.
      <a href="#">Learn more</a>
    </p>
  </div>
</section>

<!-- Box B -->
<section class="box box-b bg-secondary grid-col-2">
  <img src="Starbucks_GoldStatus_07-1200x675-800x450.jpg">
  <div class="box-text">
    <h2 class="text-xl">New to the nice list</h2>
    <p class="text-md">
      For a nondairy twist on a holiday cookie classic, try the new Iced
      Sugar Cookie Almondmilk Latte.
    </p>
    <a href="#" class="btn btn-light-outline">Order Now</a>
  </div>
</section>

<!-- Box C -->
<section class="box box-c bg-secondary grid-col-2 grid-reversed">
  <img src="starbuck1.jpg">
  <div class="box-text">
    <h2 class="text-xl">Merry moment</h2>
    <p class="text-md">
      Treat yourself to a festive Sugar Plum Cheese Danish with a nicely
      spiced sugar-plum spread.
    </p>
    <a href="#" class="btn btn-light-outline">Order Now</a>
  </div>
</section>

<!-- Box D -->
<section class="box box-d bg-primary grid-col-2">
  <img src="starbucks2.jpg" alt="starbucks2" />
  <div class="box-text">
    <h2 class="text-xl">Starbucks Thanksgiving Blend</h2>
    <p class="text-md">
      This elegant dark roast returns, showcasing flavors from some of the
      world’s major coffee-growing regions.
    </p>
    <a href="#" class="btn btn-light-outline">Order Now</a>
  </div>
</section>

<!-- Box E -->
<section class="box box-e bg-secondary grid-col-2 grid-reversed">
  <img src="starbucks3.jpg" alt="starbucks3" />
  <div class="box-text">
    <h2 class="text-md">Fighting hunger this holiday</h2>
    <p class="text-sm">
      Hunger is affecting millions of people across America this holiday
      season. Join us in our commitment to hunger relief and help feed
      neighbors in need.
    </p>
    <a href="#" class="btn btn-light-outline">Order Now</a>
  </div>
</section>

<!-- Box F -->
<section class="box box-f grid-col-2">
  <div>
    <img src="" alt="" />
    <div class="bg-extra py-lg">
      <div class="box-text">
        <h2 class="text-md">Let the holiday cheer come to you</h2>
        <p class="text-sm">
          Make the moment merry. Order Starbucks® holiday favorites on Uber
          Eats.*
        </p>
        <a href="#" class="btn btn-dark-outline">Order Now</a>
      </div>
    </div>
  </div>
  <div>
    <img src="" alt="" />
    <div class="bg-primary py-lg">
      <div class="box-text">
        <h2 class="text-md">Loved Passing on Netflix?</h2>
        <p class="text-sm">
          Our new social series about film adaptations kicks off with the
          actors and directors who brought the book to life.
        </p>
        <a href="#" class="btn btn-light-outline">Order Now</a>
      </div>
    </div>
  </div>
</section>

<div class="divider"></div>

<footer class="footer">
  <div class="footer-container">
    <div class="social">
      <a href="https://spotify.com">
        <img src="spotify-xxl.png" alt="" />
      </a>
      <a href="https://facebook.com">
        <img src="Facebook+Icon+Black.png" alt="" />
      </a>
      <a href="https://pinterest.com">
        <img src="pinterest-logo-icon-3193.png" alt="" />
      </a>
      <a href="https://instagram.com">
        <img src="mrG45j-instagram-black-logo-free-download.png" alt="" />
      </a>
      <a href="https://youtube.com">
        <img src="pngegg.png" alt="" />
      </a>
      <a href="https://twitter.com">
        <img src="Black-icon-Twitter-logo-transparent-PNG.png" alt="" />
      </a>
    </div>
    <p>© 2023 Starbucks Coffee Company. All rights reserved.</p>
  </div>
</footer>