Собираем лендинг ресторана

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
 
<nav class="navbar" aria-label="Главное меню">
  <div class="container">
    <div class="navbar-brand">
      <a class="navbar-item has-text-weight-bold" href="#">Trattoria Oliva</a>
      <a role="button" class="navbar-burger" aria-label="Открыть меню" aria-expanded="false" data-target="nav">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
    <div class="navbar-menu" id="nav">
      <div class="navbar-end">
        <a class="navbar-item" href="#menu">Меню</a>
        <a class="navbar-item" href="#booking">Бронирование</a>
      </div>
    </div>
  </div>
</nav>
 
<section class="hero is-primary is-medium">
  <div class="hero-body">
    <div class="container has-text-centered">
      <h1 class="title is-1">Trattoria Oliva</h1>
      <p class="subtitle">Паста ручной работы и хлеб из собственной печи</p>
      <a class="button is-dark is-medium" href="#booking">Забронировать стол</a>
    </div>
  </div>
</section>
 
<section class="section">
  <div class="container">
    <div class="columns has-text-centered">
      <div class="column">
        <p class="title is-4">С 2012 года</p>
        <p>Готовим по рецептам из Тосканы.</p>
      </div>
      <div class="column">
        <p class="title is-4">Свежая паста</p>
        <p>Раскатываем тесто каждое утро.</p>
      </div>
      <div class="column">
        <p class="title is-4">Терраса</p>
        <p>Летом — 12 столов на улице.</p>
      </div>
    </div>
  </div>
</section>
 
<section class="section has-background-light" id="menu">
  <div class="container">
    <h2 class="title">Меню</h2>
    <div class="grid is-col-min-10">
      <div class="cell card">
        <div class="card-image">
          <figure class="image is-16by9"><img src="/media/photo-800x500.jpg" alt="Карбонара"></figure>
        </div>
        <div class="card-content">
          <p class="title is-5">Карбонара <span class="tag is-warning">Хит</span></p>
          <p>€12</p>
        </div>
      </div>
      <div class="cell card">
        <div class="card-image">
          <figure class="image is-16by9"><img src="/media/photo-800x500.jpg" alt="Ризотто"></figure>
        </div>
        <div class="card-content">
          <p class="title is-5">Ризотто</p>
          <p>€14</p>
        </div>
      </div>
      <div class="cell card">
        <div class="card-image">
          <figure class="image is-16by9"><img src="/media/photo-800x500.jpg" alt="Тирамису"></figure>
        </div>
        <div class="card-content">
          <p class="title is-5">Тирамису</p>
          <p>€7</p>
        </div>
      </div>
    </div>
  </div>
</section>
 
<section class="section" id="booking">
  <div class="container is-max-tablet">
    <div class="box">
      <h2 class="title is-4">Бронирование</h2>
      <div class="columns">
        <div class="column field">
          <label class="label" for="b-name">Имя</label>
          <div class="control"><input class="input" id="b-name" placeholder="Анна"></div>
        </div>
        <div class="column field">
          <label class="label" for="b-date">Дата</label>
          <div class="control"><input class="input" id="b-date" type="date"></div>
        </div>
      </div>
      <button class="button is-primary is-fullwidth">Забронировать</button>
    </div>
  </div>
</section>
 
<footer class="footer">
  <p class="has-text-centered">Trattoria Oliva · Ул. Садовая, 12 · ежедневно 12:00–23:00</p>
</footer>
 
<script>
  document.querySelectorAll('.navbar-burger').forEach((burger) => {
    burger.addEventListener('click', () => {
      const isOpen = burger.classList.toggle('is-active');
      document.getElementById(burger.dataset.target).classList.toggle('is-active', isOpen);
      burger.setAttribute('aria-expanded', String(isOpen));
    });
  });
</script>