<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="css/homepage.css">
    <link rel="stylesheet" href="css/nav.css">
    <title>Homepage</title>

</head>
<body>
    

    <!-- -------------------nav-bar-------------------------- -->
 <nav class="container">
     
        <img class="logo" src="/images/logo.png" alt="">
     
        <ul class="menu">
            <li><a href="/home">Home</a></li>
            <li><a href="/menu">Menu</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>

    <ul class="icon">
        <li><a href="/cart"><span class="material-icons">shopping_cart</span></a></li>
        <li><a href="/logout"><span class="material-icons">logout</span></a></li>  
        </ul>
     
    <button class="hamburger" id="hamburger">
        <i class='bx bx-menu btn-open'></i>
      </button>

 </nav>



 <!-- ---------------------------hero-section----------------------------- -->

 <section class="hero container">
     <div class="text">
        Be the Fastest<br>
        in <span class="red">Delivering</span><br>
        Your <span class="red">Food</span>
        <p>Our job is filling your tummy with delicious food<br>
            with fast and free delivery!</p>
        <a href="/menu" class="btn">Get Started</a>
     </div>
 
     <img src="/images/model.svg" alt="" class="model">

 </section>

 <!-- ------------------------------design-------------------------- -->

 <section class="design container">
    Your Favourite food<br> 
    Delivery Partner
   <div class="skill">
     <div class="order">
        <img src="./images/order1.svg" alt=""><br>
        Easy To Order
     </div>
     <div class="order">
        <img src="./images/order2.svg" alt=""><br>
        Fastest Delivery
    </div>
    <div class="order">
        <img src="./images/order3.svg" alt=""><br>
        Best Design
     </div>
    </div>
 </section>

 <!-- ------------------------footer---------------------- -->

 <footer class="container">

    <ul class="social">
        <li><a href="#"><i class='bx bxl-facebook-circle' ></i></a></li>
        <li><a href="#"><i class='bx bxl-youtube'></i></a></li>
        <li><a href="#"><i class='bx bxl-twitter' ></i></a></i></li>
        <li><a href="#"><i class='bx bxl-instagram' ></i></a></li>
    </ul>

    <div class="logos">
        <img class="logo" src="/images/logo.png" alt="">
    </div>
 </footer>

</body>
</html>