@extends('front.layout.app')
@section('content')

    <section class="innerBanner step-pages">
        <div class="container">
            <div class="row">
                <div class="col-md-12 text-center">
                    <div class="mainContent">
                        <h1>PAYMENT</h1>
                    </div>
                </div>
            </div>
        </div>
        <img src="images/innerbanimg.png" class="img-fluid mainImg" alt="">
    </section>


    <!-- Begin: Step 2 -->
    <div class="checkOutStyle">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <form class="row formStyle">
                        <div class="col-md-12 mb-4 text-center">
                            <figure class="paymnt-img"><img src="{{asset('assets/images/card-img.png')}}" alt=""></figure>
                        </div>
                        <div class="col-md-6">
                            <label>card number</label>
                            <input type="text" class="form-control" placeholder="card number">
                        </div>
                        <div class="col-md-6">
                            <label>name on card</label>
                            <input type="text" class="form-control" placeholder="card title">
                        </div>
                        <div class="col-md-4">
                            <label>expiration date</label>
                            <input type="text" class="form-control" placeholder="mm/yy">
                        </div>
                        <div class="col-md-2">
                            <label>cvv</label>
                            <input type="text" class="form-control">
                        </div>
                        <div class="col-md-6">
                            <div class="checkbox mt-4">
                                <input type="checkbox" id="box-2">
                                <label for="box-2">
                                    <h5>save card</h5>information is encrypted and securely stored.
                                </label>
                            </div>
                        </div>
                        <div class="col-md-12 mt-4">
                            <button class="themeBtn border-0 btn-block">Place Order</button>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
    <!-- END: Step 2 -->
@endsection