<!DOCTYPE html>
<html lang="en">

<?php include './partials/head.php' ?>

<body>

    <!-- start page-wrapper -->
    <div class="page-wrappers">
        <!-- start preloader -->
        <?php include './partials/preloader.php' ?>
        <!-- end preloader -->
        <!-- Start header -->
        <?php
        $HeaderStyle = 'wpo-header-style-1';
        ?>
        <?php include './partials/header.php' ?>
        <!-- end of header -->
        <!-- start of hero -->
        <?php
        $mainTitle = 'Checkout';
        $Title = 'Home';
        $Title2 = 'Checkout';
        ?>
        <?php include './partials/page-header.php' ?>
        <!-- end of hero slider -->

        <!-- wpo-checkout-area start-->
        <div class="wpo-checkout-area section-padding">
            <div class="container">
                <form>
                    <div class="checkout-wrap">
                        <div class="row">
                            <div class="col-lg-8 col-12">
                                <div class="caupon-wrap s1">
                                    <div class="coupon coupon-active">
                                        <label id="toggle1">Have a coupon ? Click here to enter your code.</label>
                                    </div>
                                    <div class="create-account">
                                        <span>If you have coupon code,please apply it</span>
                                        <div class="input-wrap">
                                            <input type="password">
                                            <button>Apply</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="caupon-wrap s2">
                                    <div class="biling-item">
                                        <div class="coupon coupon-3">
                                            <label id="toggle2">Billing Address</label>
                                        </div>
                                        <div class="billing-adress" id="open2">
                                            <div class="contact-form form-style">
                                                <div class="row">
                                                    <div class="col-lg-6 col-md-12 col-12">
                                                        <label for="fname1">First Name</label>
                                                        <input type="text" placeholder="" id="fname1" name="fname">
                                                    </div>
                                                    <div class="col-lg-6 col-md-12 col-12">
                                                        <label for="fname2">Last Name</label>
                                                        <input type="text" placeholder="" id="fname2" name="fname">
                                                    </div>
                                                    <div class="col-lg-6 col-md-12 col-12">
                                                        <label for="Country">Country</label>
                                                        <select name="address" id="Country" class="form-control">
                                                            <option disabled="" selected="">United State</option>
                                                            <option>Bangladesh</option>
                                                            <option>India</option>
                                                            <option>Srilanka</option>
                                                            <option>Pakisthan</option>
                                                            <option>Afgansthan</option>
                                                        </select>
                                                    </div>
                                                    <div class="col-lg-6 col-md-12 col-12">
                                                        <label for="City">Dristrict</label>
                                                        <input type="text" placeholder="" id="City" name="City">
                                                    </div>
                                                    <div class="col-lg-12 col-md-12 col-12">
                                                        <label for="Adress">Address</label>
                                                        <input type="text" placeholder="" id="Adress" name="Adress">
                                                    </div>
                                                    <div class="col-lg-6 col-md-12 col-12">
                                                        <label for="Post2">Post Code</label>
                                                        <input type="text" placeholder="" id="Post2" name="Post">
                                                    </div>
                                                    <div class="col-lg-6 col-md-12 col-12">
                                                        <label for="email4">Email Adress</label>
                                                        <input type="text" placeholder="" id="email4" name="email">
                                                    </div>
                                                    <div class="col-lg-12 col-md-12 col-12">
                                                        <label for="email2">Phone No.</label>
                                                        <input type="text" placeholder="" id="email2" name="email">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="biling-item-2">
                                                <input id="toggle3" type="checkbox">
                                                <label class="fontsize" for="toggle3">Ship to a different
                                                    address?</label>
                                                <div class="billing-adress" id="open3">
                                                    <div class="contact-form form-style">
                                                        <div class="row">
                                                            <div class="col-lg-6 col-md-12 col-12">
                                                                <label for="fname4">First Name</label>
                                                                <input type="text" placeholder="" id="fname4"
                                                                    name="fname">
                                                            </div>
                                                            <div class="col-lg-6 col-md-12 col-12">
                                                                <label for="fname3">Last Name</label>
                                                                <input type="text" placeholder="" id="fname3"
                                                                    name="fname">
                                                            </div>
                                                            <div class="col-lg-6 col-md-12 col-12">
                                                                <label for="Country2">Country</label>
                                                                <select name="address" id="Country2"
                                                                    class="form-control">
                                                                    <option disabled="" selected="">United State
                                                                    </option>
                                                                    <option>Bangladesh</option>
                                                                    <option>India</option>
                                                                    <option>Srilanka</option>
                                                                    <option>Pakisthan</option>
                                                                    <option>Afgansthan</option>
                                                                </select>
                                                            </div>
                                                            <div class="col-lg-6 col-md-12 col-12">
                                                                <label for="City2">Dristrict</label>
                                                                <input type="text" placeholder="" id="City2"
                                                                    name="City">
                                                            </div>
                                                            <div class="col-lg-12 col-md-12 col-12">
                                                                <label for="Adress2">Address</label>
                                                                <input type="text" placeholder="" id="Adress2"
                                                                    name="Adress">
                                                            </div>
                                                            <div class="col-lg-6 col-md-12 col-12">
                                                                <label for="Post">Post Code</label>
                                                                <input type="text" placeholder="" id="Post" name="Post">
                                                            </div>
                                                            <div class="col-lg-6 col-md-12 col-12">
                                                                <label for="emails">Email Adress</label>
                                                                <input type="text" placeholder="" id="emails"
                                                                    name="email">
                                                            </div>
                                                            <div class="col-lg-12 col-md-12 col-12">
                                                                <label for="emaild">Phone No.</label>
                                                                <input type="text" placeholder="" id="emaild"
                                                                    name="email">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="note-area">
                                                    <p>Order Notes </p>
                                                    <textarea name="massage"
                                                        placeholder="Note about your order"></textarea>
                                                </div>
                                                <div class="submit-btn-area">
                                                    <ul>
                                                        <li><button class="theme-btn-s4" type="submit">Save &
                                                                continue</button></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="caupon-wrap s3">
                                    <div class="payment-area">
                                        <div class="row">
                                            <div class="col-12">
                                                <div class="coupon coupon-3">
                                                    <label id="toggle4">Payment Method</label>
                                                </div>
                                                <div class="payment-option" id="open4">
                                                    <div class="payment-select">
                                                        <ul>
                                                            <li class="addToggle">
                                                                <input id="add" type="radio" name="payment"
                                                                    checked="checked" value="30">
                                                                <label for="add">Payment By Card</label>
                                                            </li>
                                                            <li class="removeToggle">
                                                                <input id="remove" type="radio" name="payment"
                                                                    value="30">
                                                                <label for="remove">Cash On delivery</label>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    <div id="open5" class="payment-name active">
                                                        <ul>
                                                            <li class="visa"><input id="1" type="radio" name="size"
                                                                    value="30">
                                                                <label for="1"><img
                                                                        src="assets/images/checkout/img-1.png"
                                                                        alt=""></label>
                                                            </li>
                                                            <li class="mas"><input id="2" type="radio" name="size"
                                                                    value="30">
                                                                <label for="2"><img
                                                                        src="assets/images/checkout/img-2.png"
                                                                        alt=""></label>
                                                            </li>
                                                            <li class="ski"><input id="3" type="radio" name="size"
                                                                    value="30">
                                                                <label for="3"><img
                                                                        src="assets/images/checkout/img-3.png"
                                                                        alt=""></label>
                                                            </li>
                                                            <li class="pay"><input id="4" type="radio" name="size"
                                                                    value="30">
                                                                <label for="4"><img
                                                                        src="assets/images/checkout/img-4.png"
                                                                        alt=""></label>
                                                            </li>
                                                        </ul>
                                                        <div class="contact-form form-style">
                                                            <div class="row">
                                                                <div class="col-lg-6 col-md-12 col-12">
                                                                    <label for="holder">Card holder Name</label>
                                                                    <input type="text" placeholder="" id="holder"
                                                                        name="name">
                                                                </div>
                                                                <div class="col-lg-6 col-md-12 col-12">
                                                                    <label for="card">Card Number</label>
                                                                    <input type="text" placeholder="" id="card"
                                                                        name="card">
                                                                </div>
                                                                <div class="col-lg-6 col-md-12 col-12">
                                                                    <label for="CVV">CVV</label>
                                                                    <input type="text" placeholder="" id="CVV"
                                                                        name="CVV">
                                                                </div>
                                                                <div class="col-lg-6 col-md-12 col-12">
                                                                    <label for="date">Expire Date</label>
                                                                    <input type="text" placeholder="" id="date"
                                                                        name="date">
                                                                </div>
                                                                <div class="col-lg-12 col-md-12 col-12">
                                                                    <div class="submit-btn-area text-center">
                                                                        <button class="theme-btn-s4" type="submit">Place
                                                                            Order</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-12">
                                <div class="cout-order-area">
                                    <div class="oreder-item ">
                                        <ul>
                                            <li class="o-header">Your Order<span>( 6 )</span></li>
                                            <li>Product 1 X 1<span>50</span></li>
                                            <li>Product 2 X 1<span>50</span></li>
                                            <li>Product 3 X 2<span>100</span></li>
                                            <li>Product 4 X 1<span>50</span></li>
                                            <li class="o-middle">Product 5 X 1<span>50</span></li>
                                            <li class="s-total">Sub Total<span>400</span></li>
                                            <li>( + ) VAT<span>100</span></li>
                                            <li>( + ) Eco Tax <span>100</span></li>
                                            <li>( - ) Discount Price<span>100</span></li>
                                            <li class="o-bottom">Total price <span>500</span></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- wpo-checkout-area end-->

        <!-- start wpo-partners-section -->
        <section class="wpo-partners-section section-padding pt-0">
            <h2 class="hidden">Partners</h2>
            <div class="container">
                <div class="row">
                    <div class="col col-xs-12">
                        <div class="partner-grids partners-slider owl-carousel">
                            <div class="grid">
                                <img src="assets/images/partners/1.png" alt>
                            </div>
                            <div class="grid">
                                <img src="assets/images/partners/2.png" alt>
                            </div>
                            <div class="grid">
                                <img src="assets/images/partners/3.png" alt>
                            </div>
                            <div class="grid">
                                <img src="assets/images/partners/4.png" alt>
                            </div>
                            <div class="grid">
                                <img src="assets/images/partners/5.png" alt>
                            </div>
                        </div>
                    </div>
                </div>
            </div> <!-- end container -->
        </section>
        <!-- end wpo-partners-section-->

        <!-- start of wpo-site-footer-section -->
        <?php
        $FooterStyle = 'wpo-site-footer';
        ?>
        <?php include './partials/footer.php' ?>
        <!-- end of wpo-site-footer-section -->

    </div>
    <!-- end of page-wrapper -->

    <?php include './partials/script.php' ?>
</body>

</html>