<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NickelBurger</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: Arial, sans-serif;
    }

    body {
      background: #111;
      color: #fff;
    }

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 50px;
      background: #000;
    }

    header h1 {
      color: #f4b400;
    }

    nav a {
      margin-left: 20px;
      text-decoration: none;
      color: #fff;
      transition: 0.3s;
    }

    nav a:hover {
      color: #f4b400;
    }

    .hero {
      height: 90vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1550547660-d9450f859349') center/cover;
    }

    .hero h2 {
      font-size: 3rem;
      margin-bottom: 20px;
    }

    .hero button {
      padding: 15px 30px;
      background: #f4b400;
      border: none;
      cursor: pointer;
      font-size: 1rem;
      border-radius: 5px;
      transition: 0.3s;
    }

    .hero button:hover {
      background: #ffcc33;
    }

    .menu {
      padding: 50px;
      text-align: center;
    }

    .menu h2 {
      margin-bottom: 30px;
      color: #f4b400;
    }

    .menu-items {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
    }

    .card {
      background: #222;
      padding: 20px;
      border-radius: 10px;
      transition: 0.3s;
    }

    .card:hover {
      transform: translateY(-5px);
    }

    .card img {
      width: 100%;
      border-radius: 10px;
    }

    .card h3 {
      margin: 15px 0;
    }

    .card p {
      font-size: 0.9rem;
      color: #ccc;
    }

    footer {
      text-align: center;
      padding: 20px;
      background: #000;
      margin-top: 40px;
      font-size: 0.8rem;
    }
  </style>
</head>
<body>

  <header>
    <h1>NickelBurger</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#menu">Menu</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <section class="hero">
    <div>
      <h2>Real Burger Experience</h2>
      <button>View Menu</button>
    </div>
  </section>

  <section class="menu" id="menu">
    <h2>Popular Burgers</h2>
    <div class="menu-items">
      <div class="card">
        <img src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd" alt="Burger">
        <h3>Classic Burger</h3>
        <p>Juicy beef, fresh vegetables, and our signature sauce.</p>
      </div>

      <div class="card">
        <img src="https://images.unsplash.com/photo-1553979459-d2229ba7433b" alt="Burger">
        <h3>Cheese Burger</h3>
        <p>Loaded with melted cheddar cheese for perfect flavor.</p>
      </div>

      <div class="card">
        <img src="https://images.unsplash.com/photo-1606755962773-d324e2d53b52" alt="Burger">
        <h3>Double Burger</h3>
        <p>Twice the meat, twice the taste!</p>
      </div>
    </div>
  </section>

  <footer>
    © 2026 NickelBurger - All rights reserved.
  </footer>

<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9e7d55de2c0a1dcf',t:'MTc3NTQ0MjI1Nw=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>

