---
title: Pay
slug: pay
---
{% extends "layouts/fluid.html" %}

{% block page %}
<ol class="breadcrumb m-b-0">
	<li><a href="#">Home</a></li>
	<li class="active">Pay</li>
</ol>
<h4  class="page-heading center">Make Payment</h4>
<div class="row">
	<div class="col-md-6 col-md-offset-3">
		<div class="card">
			<div class="card-body">
				<ul class="list-group m-b-0">
					<li class="list-group-item">
						<div class="media">
							<div class="media-left">
								<span class="btn btn-default btn-circle"><i class="material-icons">credit_card</i></span>
							</div>
							<div class="media-body media-middle">
								<p class="m-b-0">**** **** **** 2422</p>
								<small class="text-muted">Updated on 12/02/2016</small>
							</div>
							<div class="media-right media-middle">
								<a href="#" class="btn btn-primary btn-sm">Pay Now</a>
							</div>
						</div>
					</li>
					<li class="list-group-item">
						<div class="media">
							<div class="media-left">
								<span class="btn btn-white btn-circle"><i class="material-icons">credit_card</i></span>
							</div>
							<div class="media-body media-middle">
								<p class="m-b-0">**** **** **** 6321</p>
								<small class="text-muted">Updated on 11/01/2016</small>
							</div>
							<div class="media-right media-middle">
								<a href="#" class="btn btn-primary btn-sm">Pay Now</a>
							</div>
						</div>
					</li>
					<li class="list-group-item">
							<div class="media">
							<div class="media-left">
								<span class="btn btn-white btn-circle">
									<i class="fa fa-paypal"></i>
								</span>
							</div>
							<div class="media-body media-middle">
								PayPal
							</div>
							<div class="media-right media-middle">
								<a href="#" class="btn btn-default btn-sm">Pay Now</a>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>

		<p class="text-muted center">or</p>
		<div class="card">
			<form action="#" class="form-horizontal">
				<div class="card-block">
					<div class="form-group">
						<label>Card Number:</label>
						<input type="text" class="form-control" placeholder="XXXX XXXX XXXX XXXX XXXX">
					</div>
					<div class="form-group row">
						<label for="" class="form-control-label col-md-4">CVC:</label>
						<div class="col-md-8">
							<input type="text" class="form-control" placeholder="123" style="width:80px"> 	
						</div>
					</div>
					<div class="form-group row">
						<label for="" class="form-control-label col-md-4">Expires:</label>
						<div class="col-md-8">
							<div class="row">
								<div class="col-md-6">
									<select class="c-select form-control">
										<option value="1">January</option>
										<option value="2">February</option>
										<option value="3">March</option>
										<option value="4">April</option>
										<option value="5">May</option>
										<option value="6">June</option>
										<option value="7">July</option>
										<option value="8">August</option>
										<option value="9">September</option>
										<option value="10">October</option>
										<option value="11">Novemeber</option>
										<option value="12">December</option>
									</select>
								</div>
								<div class="col-md-6">
									<select class="c-select form-control">
										<option value="1" selected>2016</option>
										<option value="2">2017</option>
										<option value="3">2018</option>
										<option value="3">2019</option>
										<option value="3">2020</option>
										<option value="3">2021</option>
										<option value="3">2022</option>
										<option value="3">2023</option>
									</select>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="card-footer center">
					<button type="submit" class="btn btn-success btn-rounded">Make Payment</button>
				</div>
			</form>
		</div>
	</div>
</div>
{% endblock %}

{% block vendor_styling %}
	<!-- Vendor CSS -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.5.0/css/font-awesome.min.css">
{% endblock %}