{% extends "layout.html" %}

{% set title = 'Billing ' %}

{% block content %}

<div class="cover-img cover" style="background-image: url('_assets/img/slide.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <div class="vcenter">
                    <div class="cover-content ">
                        <h2 class="text-upper">Profile</h2>
                        <p class="mtmd">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam eum iste nihil nulla sit. Autem cupiditate debitis est excepturi exercitationem fugiat iusto laboriosam, laborum non quae quaerat quia recusandae rerum?</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Profile</li>
        </ol>
    </nav>

    <div class="profile sec-pad">
        <div class="row">
            <div class="col-lg-10 col-lg-offset-1">
                <nav role="navigation">
                    <a href="profile.html" class="text-capitalize">profile</a>
                    <a href="billing.html" class="active text-capitalize">billing information</a>
                    <a href="profile-cart.html" class="text-capitalize">cart</a>
                    <a href="saved.html" class="text-capitalize">saved items</a>
                    <a href="order-history.html" class="text-capitalize">order history</a>
                    <a href="manage-account.html" class="text-capitalize">manage account</a>
                </nav>
                <div class="profile-content">
                    <form action="">
                        <div class="payment-selection mbxxlg">
                            <div class="row">
                                <div class="col-sm-12">
                                    <input type="text" class="mbmd" placeholder="Street Address">
                                </div>
                                <div class="col-sm-12">
                                    <input type="text" class="mbmd" placeholder="City/Town">
                                </div>
                                <div class="col-sm-12">
                                    <input type="text" class="mbmd" placeholder="postcode">
                                </div>
                                <div class="col-sm-12">
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <div class="select-custom mbmd">
                                                <select name="state" id="state">
                                                    <option>State</option>
                                                    <option value="">option 1</option>
                                                    <option value="">option 2</option>
                                                    <option value="">option 3</option>
                                                    <option value="">option 4</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="select-custom mbmd">
                                                <select name="country" id="country">
                                                    <option>Country</option>
                                                    <option value="">option 1</option>
                                                    <option value="">option 2</option>
                                                    <option value="">option 3</option>
                                                    <option value="">option 4</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="radio-custom mbmd">
                                        <input type="radio" name="payment" value="" id="paypal" class="form-checkbox pull-left">
                                        <label for="paypal" class="pull-left">Paypal</label>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="radio-custom mbmd">
                                        <input type="radio" name="payment" value="" id="credit" class="form-checkbox pull-left">
                                        <label for="credit" class="pull-left">Credit Card</label>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="radio-custom mbmd">
                                        <input type="radio" name="payment" value="" id="physical" class="form-checkbox pull-left">
                                        <label for="physical" class="pull-left">Physical Credit Card</label>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <div class="select-custom mbmd">
                                        <select name="card-type" id="card-type">
                                            <option>Card Type</option>
                                            <option value="">option 1</option>
                                            <option value="">option 2</option>
                                            <option value="">option 3</option>
                                            <option value="">option 4</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <input type="text" class="mbmd" placeholder="Card Number">
                                </div>
                                <div class="col-sm-3">
                                    <input type="text" class="mbmd" placeholder="Security Code">
                                </div>
                                <div class="col-sm-6">
                                    <input type="text" class="mbmd" placeholder="Name on Card">
                                </div>
                                <div class="col-sm-6">
                                    <input type="text" class="mbmd" placeholder="Expiration Date">
                                </div>
                            </div>
                            <button class="btn-primary nextBtn btn-lg mtxxlg pull-right" type="button" >Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>


{% endblock content %}