<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Check Out</title>
    <link rel="stylesheet" href="./assets/css/style.css">
    <link rel="stylesheet" href="./assets/css/all.min.css">
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/fontawesome.min.css">
    <link rel="shortcut icon" href="./assets/images/nav-logo.png" type="image/x-icon">
</head>

<body>
    <!-- navbar here -->
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container-fluid res-nav">
            <a class="navbar-brand nav-logo" href="./index.php">
                <img src="./assets/images/nav-logo.png" alt="Logo">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse nav-gap" id="navbarNav">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link" href="./index.php">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./about.php">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./menu.php">Menu</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="./contact.php">Contact</a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link" href="./feedback.php">Feedback</a>
                    </li>
                </ul>
                <button class="nav-btn" type="button"><i class="fa-solid fa-cart-shopping"></i> | <i
                        class="fa-solid fa-user"></i></button>
            </div>
        </div>
    </nav>
    <!-- navbar here -->

    <!-- order now button -->
    <div class="order">
        <button>Your Order</button>
    </div>
    <!-- order now button -->

    <!-- order section here  -->
    <div class="order-box">
        <div class="box-content">
            <h1>3 WINGS, PIZZA PUFF (with fries & can pop)</h1>
            <p>Nothing on top</p>
            <p>Nothing on fries</p>
            <p>LP + M On Fries</p>
            <a href="#">Edit</a>
            <a href="#">remove</a>
        </div>
        <div class="box-price">
            <p>$17.98</p>
        </div>
    </div>

    <div class="order-box">
        <div class="box-content">
            <h1>3 WINGS, PIZZA PUFF (with fries & can pop)</h1>
            <p>Mild Sauce on top</p>
            <p>Extra Mild on top</p>
            <p>Ketchup on top</p>
            <p>Nothing on fries</p>
            <p>Pepper On Fries</p>
            <a href="#">Edit</a>
            <a href="#">remove</a>
        </div>
        <div class="box-price">
            <p>$9.99</p>
        </div>
    </div>

    <div class="order-box">
        <div class="box-content">
            <h1>3 WINGS, PIZZA PUFF (with fries & can pop)</h1>
            <p>Nothing on top</p>
            <p>LP + M on top</p>
            <p>Pepper on top</p>
            <p>Mild Sauce On Fries</p>
            <p>Pepper On Fries</p>
            <p>LP + M On Fries</p>
            <a href="#">Edit</a>
            <a href="#">remove</a>
        </div>
        <div class="box-price">
            <p>$8.99</p>
        </div>
    </div>

    <div class="order-box2">
        <h1>Need anything else?</h1>
        <div class="order-images-col">
            <div class="order-img">
                <img src="./assets/images/fries-kabab.png" alt="">
            </div>
            <div class="order-img">
                <img src="./assets/images/fish.png" alt="">
            </div>
            <div class="order-img">
                <img src="./assets/images/pasta.png" alt="">
            </div>
        </div>
    </div>
    <!-- order section here  -->

    <!-- total section here  -->
    <div class="subtotal">
        <div class="subtotal-con">
            <p>Subtotal</p>
        </div>
        <div class="subtotal-price">
            <p>$11.49</p>
        </div>
    </div>

    <div class="subtotal">
        <div class="subtotal-con">
            <p>Tax</p>
        </div>
        <div class="subtotal-price">
            <p>$1.23</p>
        </div>
    </div>

    <div class="checkout-button">
        <button><span>Check Out</span> <span>$0.00</span></button>
    </div>
    <!-- total section here  -->

    <!-- footer here  -->
    <footer>
        <div class="footer-logo">
            <img src="./assets/images/Footer.png">
        </div>

        <form class="footer-content footer-form">
            <h3>Sign up for Pita Inn promos, news and more delivered straight to your inbox.</h3>
            <input type="email" placeholder="Email Address" required>
            <button>Subscribe</button>
        </form>

        <div class="footer-content">
            <ul>
                <li><a href="#">ORDER NOW</a></li>
                <li><a href="#">BUY A GIFT CARD</a></li>
                <li><a href="#">FIND OUR HUMMUS</a></li>
            </ul>
        </div>

        <div class="footer-content">
            <p><a href="#"><i class="fa-brands fa-instagram"></i></a> <a href="#"><i
                        class="fa-brands fa-facebook"></i></a></p>
            <h3>Star Gyros 2024 
                Site by BatesMeron</h3>
        </div>
    </footer>
    <!-- footer here  -->

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

</body>

</html>