Koko Pizza – Development

<!DOCTYPE html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <title>Koko Pizza</title>
  <!-- Latest compiled CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <!-- Google font - Bebas Neue -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap">
  <!-- Google font - Open Sans -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap">
  <!-- Fontawesome Icons -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
</head>

<body>
  <!-- Style -->
  <style>
    .navbar {
      padding: 40px 80px;
      color: rgb(0, 0, 0);
      border-bottom: 2px solid rgb(0, 0, 0);
    }
    
    .navbar-nav {
     font-family: 'Bebas Neue', serif;
     font-size: 22px;
     }

    h2 {
     font-family: "Bebas Neue", sans-serif;
     font-size: 36px;
     color: white;
     }

    p {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    color: #212121;
    }

   .btn-primary {
    font-family: 'Bebas Neue', serif;
    background: #212121;
    font-size: 18px;
    padding: 10px 30px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    }

  .btn-primary:hover {
    background: #393939;
    color: white;
    }
 </style>
</body>

   <!-- Header -->
<header>
  <nav class="navbar navbar-light navbar-expand-md bg-primary">
    <div class="container-fluid d-flex align-items-center">
      <div class="col-6">
        <img src="https://fannylouisedelhaye.com/wp-content/uploads/2023/02/Group-402.png" height="116" style="padding-left: 40px;">
      </div>
      <div class="col-6">
        <button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navcol-1">
          <span class="visually-hidden">Toggle navigation</span>
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navcol-1">
          <ul class="navbar-nav justify-content-end" style="padding-right: 80px;">
            <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">menu</a></li>
            <li class="nav-item"><a class="nav-link" href="#">about</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Booking</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
</header>

  <!-- Section 1 -->
<section>
  <section style="background: #e25415; border-bottom: 2px solid black;">
    <div class="container py-4 py-xl-5">
      <div class="row gy-4 gy-md-0">
        <div class="col-md-6 text-md-start d-flex justify-content-center align-items-center">
          <div style="max-width: 400px;">
            <h2 class="text-uppercase mt-4 mt-md-0">Authentic neapolitan pizza <br> in the heart of Ghent</h2>
            <p class="my-3">Koko Pizza is your neighborhood pizza place in Patershol and Visserij.<br> We specialize in authentic Neapolitan pizza with classic toppings. Every night, eat in, click and collect, or have it delivered.</p>
          </div>
        </div>
        <div class="col-md-6 text-center">
          <img class="rounded img-fluid w-80 fit-cover" style="min-height: 150px; margin-top: 20px; margin-bottom: 20px;" src="https://fannylouisedelhaye.com/wp-content/uploads/2023/02/Group-352.png">
        </div>
      </div>
    </div>
  </section>
</section>

  <!-- Section 2 -->
<section>
  <section style="background: #ffffff;">
    <div class="container py-4 py-xl-5">
      <div class="row gy-4 gy-md-0">
        <div class="col-md-6 text-center">
          <img class="rounded img-fluid w-80 fit-cover" style="min-height: 150px; margin-top: 20px; margin-bottom: 20px;" src="https://fannylouisedelhaye.com/wp-content/uploads/2023/02/image-20.png">
        </div>
        <div class="col-md-6 d-md-flex align-items-md-center" style="background: url('https://fannylouisedelhaye.com/wp-content/uploads/2023/02/Group-408.png') center right no-repeat;">
          <div class="text-md-start d-flex justify-content-center align-items-center">
            <div style="max-width: 400px;">
              <h2 class="text-uppercase mt-4 mt-md-0" style="color: #0569E9;">Menu</h2>
              <p class="my-3">Our menu is inspired by the historical traditions introduced to Ghent from all over Italy, making it a favorite for pizza fans all around the city. In addition to pizzas, the menu includes a variety of Italian-style appetizers and homemade desserts, as well as various beverages, from regular to intriguing.</p>
              <a class="btn btn-primary btn-lg me-2 d-flex" role="button" href="#">Discover our menu</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</section>
  
  <!-- Section 3 -->
<section>
  <section style="background: #fffff; border-bottom: 2px solid black;">
    <div class="container py-4 py-xl-5">
      <div class="row gy-4 gy-md-0">
        <div class="col-md-6 text-md-start d-flex justify-content-center align-items-center">
          <div style="max-width: 400px;">
            <h2 class="text-uppercase mt-4 mt-md-0" style="color: #0569E9;">Where to Find Us</h2>          
            <img src="https://fannylouisedelhaye.com/wp-content/uploads/2023/02/Group-406.png">
            <p class="my-3">Oude Schaapmarkt 2,<br>9000 Gent</p>     
            <h2 class="text-uppercase mt-4 mt-md-0" style="color: #0569E9;">Opening Time</h2>          
            <img src="https://fannylouisedelhaye.com/wp-content/uploads/2023/02/Group-407.png">
            <p class="my-3">Lunch 12:00 - 15:00<br>Dinner 17:00 - 22:00</p>
          </div>
        </div>
        <div class="col-md-6 text-center">
          <img class="rounded img-fluid w-80 fit-cover" style="min-height: 150px; margin-top: 20px; margin-bottom: 20px;" src="https://fannylouisedelhaye.com/wp-content/uploads/2023/02/Group-399.png">
        </div>
      </div>
    </div>
  </section>
</section>

  <!-- Section 4 --> 
<section>
  <section style="background: #F9DD46; border-bottom: 2px solid black;">
    <div class="container py-4 py-xl-5">
      <div class="row gy-4 gy-md-0">
        <div class="col-md-6 text-md-start d-flex justify-content-center align-items-center">
          <div style="max-width: 400px;">
           <h2 class="text-uppercase mt-4 mt-md-0">Natural Ingredients</h2>
           <p class="my-3">At Koko Pizza, we're passionate about crafting the best organic pizzas for our customers. We believe that quality ingredients make all the difference, and that's why we've made a simple promise: to use only organic multigrain dough, fresh organic vegetables, and premium cheeses in our pizzas. Every day, we bring together these wholesome ingredients to create delicious pies that are both nutritious and satisfying.</p>
          </div>
        </div>
        <div class="col-md-6 text-center">
          <img class="rounded img-fluid w-80 fit-cover" style="min-height: 150px; margin-top: 20px; margin-bottom: 20px;" src="https://fannylouisedelhaye.com/wp-content/uploads/2023/02/Group-410.png">
        </div>
      </div>
    </div>
  </section>
</section>
     
  <!-- Section 5 -->              
  <section>
  <section style="background: #1B6ED8; border-bottom: 2px solid black;">
 <div class="container py-4 py-xl-5">
      <div class="row gy-4 gy-md-0">
        <div class="col-md-12 text-center">
          <div style="max-width: 600px; margin: 0 auto;">
            <h2 class="text-uppercase mt-4 mt-md-0 text-center">Contact us</h2>
            <p class="my-3 text-center">For all your dining needs, give us a call at or easily reach us through our online contact form for a quick response to any inquiries.</p>
          </div>
            <form method="post">
              <div class="form-group">
                <input type="text" class="form-control" id="name" name="name" placeholder="Name">
              </div>
              <div class="form-group">
                <input type="email" class="form-control" id="email" name="email" placeholder="Email">
              </div>
              <div class="form-group">
                <textarea class="form-control" id="message" name="message" rows="6" placeholder="Message"></textarea>
              </div>
              <button type="submit" class="btn btn-primary w-100">Send</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>
</section>
  
  <!-- Footer -->
<footer class="footer" style="background-color: #54743D; padding: 60px 0;">
  <div class="container">
    <div class="row">
      <div class="col-md-3 text-center">
        <img src="https://fannylouisedelhaye.com/wp-content/uploads/2023/02/Group-405.png" alt="" style="display: inline-block;">
      </div>
      <div class="col-md-3 text-center" style="padding-bottom: 20px;">
        <h2 class="text-uppercase mt-4 mt-md-0" style="text-align: center; font-size: 32px";>Follow us</h2>
        <div class="footer-social-links text-center">
          <i class="fab fa-instagram" style="padding: 0 4px; color: #FFFFFF;"></i>
          <i class="fab fa-facebook-square" style="padding: 0 4px; color: #FFFFFF;"></i>
          <i class="fab fa-facebook-messenger" style="padding: 0 4px; color: #FFFFFF;"></i>
        </div>
      </div>
      <div class="col-md-3 text-center">
        <h2 class="text-uppercase mt-4 mt-md-0" style="text-align: center; font-size: 32px";>About us</h2>
        <p class="my-3" style="color: #FFFFFF; text-align: center;">Koko pizza<br>Our ingredients</p>
      </div>
      <div class="col-md-3 text-center">
        <h2 class="text-uppercase mt-4 mt-md-0" style="text-align: center; font-size: 32px";>Legal</h2>
        <p class="my-3" style="color: #FFFFFF; text-align: center;">Privacy policy<br>Terms and Conditions</p>
      </div>
    </div>
  </div>
</footer>

  <script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

/