<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h3>***Demo for checkout page like eBay by [Link]-Amin***</h3>
<div id="wrap">
<div id="grid">
<div class="column column1">
<div class="step" id="step1">
<div class="number">
<span>1</span>
</div>
<div class="title">
<h1>Email Address</h1>
</div>
<div class="modify">
<i class="fa fa-plus-circle"></i>
</div>
</div>
<div class="content" id="email">
<form class="go-right">
<div>
<input type="email" name="email" value="" id="email-address" placeholder="Email Address"
data-trigger="change" data-validation-minlength="1" data-type="email" data-required="true" data-
error-message="Enter a valid email address."/><label for="email">Email Address</label>
</div>
<button class="login">Login</button>
<button class="create">Create Account</button>
</form>
<a class="continue" href="#">Continue</a>
</div>
<div class="step" id="step2">
<div class="number">
<span>2</span>
</div>
<div class="title">
<h1>Billing Information</h1>
</div>
</div>
<div class="content" id="address">
<form class="go-right">
<div>
<input type="name" name="first_name" value="" id="first_name" placeholder="First Name"
data-trigger="change" data-validation-minlength="1" data-type="name" data-required="true" data-
error-message="Enter Your First Name"/><label for="first_name">First Name</label>
</div>
<div>
<input type="name" name="last_name" value="" id="last_name" placeholder="Last Name"
data-trigger="change" data-validation-minlength="1" data-type="name" data-required="true" data-
error-message="Enter Your Last Name"/><label for="last_name">Last Name</label>
</div>
<div>
<input type="phone" name="telephone" value="" id="telephone" placeholder="Phone(+88)-
555-5555" data-trigger="change" data-validation-minlength="1" data-type="number" data-
required="true" data-error-message="Enter Your Telephone Number"/><label
for="telephone">Telephone</label>
</div>
<div>
<input type="text" name="company" value="" id="company" placeholder="Company" data-
trigger="change" data-validation-minlength="1" data-type="name" data-required="false"/>
<label for="Company">Company</label>
</div>
<div>
<input type="text" name="address" value="" id="address" placeholder="Address" data-
trigger="change" data-validation-minlength="1" data-type="text" data-required="true" data-error-
message="Enter Your Billing Address"/><label for="Address">Address</label>
</div>
<div>
<input type="text" name="city" value="" id="city" placeholder="City" data-trigger="change"
data-validation-minlength="1" data-type="text" data-required="true" data-error-message="Enter
Your Billing City"/><label for="city">City</label>
</div>
<div>
<div class="state_options">
<div class="select">
<select id="state">
<option value = "1">Uttara</option>
<option value = "2">Nawabgonj</option>
<option value = "3">Dohar</option>
<option value = "4">Mirpur</option>
</select>
</div>
<label class="state" for="state">State</label>
</div>
</div>
<div>
<input type="text" name="zip" value="" id="zip" placeholder="Zip Code" data-
trigger="change" data-validation-minlength="1" data-type="text" data-required="true" data-error-
message="Enter Your Billing Zip Code"/><label for="zip">Zip Code</label>
</div>
<div>
<div class="country_options">
<div class="select">
<select id="country">
<option value = "1">Bangladesh</option>
<option value = "2">India</option>
<option value = "3">Australia</option>
<option value = "4">You can add more by editing</option>
</select>
</div>
<label class="country" for="country">Country</label>
</div>
</div>
<div>
<input type="checkbox"/>
<label class="same" for="same_as_shipping">Same As Shipping
Address</label><span></span>
</div>
</form>
<a class="continue" href="#">Continue</a>
</div>
</div>
<div class="column column2">
<div class="step" id="step3">
<div class="number">
<span>3</span>
</div>
<div class="title">
<h1>Shipping Information</h1>
</div>
<div class="modify">
<i class="fa fa-plus-circle"></i>
</div>
</div>
<div class="content" id="shipping">
<form action="" method="" name="">
<div>
<input type="radio" id="shipping_1" value="1"/><label for="shipping_1"> Standard Shipping
<span class="price">Free!</span></label>
</div>
<p>
<input type="radio" id="shipping_2" value="2"/><label for="shipping_2"> Express Shipping
<span class="price">$8.00</span></label>
</p>
<p>
<input type="radio" id="shipping_3" value="3"/><label for="shipping_3"> Overnight Shipping
<span class="price">$12.00</span></label>
</p>
</form>
<a class="continue" href="#">Continue</a>
</div>
<div class="step" id="step4">
<div class="number">
<span>4</span>
</div>
<div class="title">
<h1>Payment Information</h1>
</div>
<div class="modify">
<i class="fa fa-plus-circle"></i>
</div>
</div>
<div class="content" id="payment">
<div class="left">
<form class="go-right">
<div>
<input type="text" name="card_number" value="" id="card_number" placeholder="xxxx-xxxx-
xxxx-xxxx" data-trigger="change" data-validation-minlength="1" data-type="name" data-
required="true" data-error-message="Enter Your Credit Card Number"/><label
for="card_number">Card Number</label>
</div>
<div>
<div class="expiry">
<div class="month_select">
<select name="exp_month" value="" id="exp_month" placeholder="" data-
trigger="change" data-type="name" data-required="true" data-error-message="Enter Your Credit
Card Expiration Date">
<option value = "1">01 (Jan)</option>
<option value = "2">02 (Feb)</option>
<option value = "3">03 (Mar)</option>
<option value = "4">04 (Apr)</option>
<option value = "5">05 (May)</option>
<option value = "6">06 (Jun)</option>
<option value = "7">07 (Jul)</option>
<option value = "8">08 (Aug)</option>
<option value = "9">09 (Sep)</option>
<option value = "10">10 (Oct)</option>
<option value = "11">11 (Nov)</option>
<option value = "12">12 (Dec)</option>
</select>
</div>
<div class="year_select">
<select name="exp_year" value="" id="exp_year" placeholder="" data-trigger="change"
data-type="name" data-required="true" data-error-message="Enter Your Credit Card Expiration
Date">
<option value = "1">14 </option>
<option value = "2">15 (Feb)</option>
<option value = "3">16 (Mar)</option>
<option value = "4">17 (Apr)</option>
<option value = "5">18 (May)</option>
<option value = "6">19 (Jun)</option>
<option value = "7">20 (Jul)</option>
<option value = "8">22 (Aug)</option>
<option value = "9">23 (Sep)</option>
<option value = "10">24 (Oct)</option>
<option value = "11">25 (Nov)</option>
<option value = "12">26 (Dec)</option>
</select>
</div>
<label class="exp_date" for="Exp_Date">Exp Date</label>
</div>
</div>
<div class="sec_num">
<div>
<input type="text" name="ccv" value="" id="ccv" placeholder="123" data-
trigger="change" data-validation-minlength="3" data-type="name" data-required="true" data-error-
message="Enter Your Card Security Code"/><label for="ccv">Security Code</label>
</div>
</div>
</form>
</div>
<div class="right">
<div class="accepted">
<span><img src="[Link]
<span><img src="[Link]
<span><img src="[Link]
<span><img src="[Link]
<span><img src="[Link]
<span><img src="[Link]
</div>
<div class="secured">
<img class="lock" src="[Link]
<p class="security info">What, well you mean like a date? Doc? Am I to understand you're still
hanging around with Doctor Emmett Brown, McFly? Tardy slip for you, Miss Parker. And one for you
McFly I believe that makes four in a row.</p>
</div>
</div>
<a class="continue" href="#">Continue</a>
</div>
</div>
<div class="column column3">
<div class="step" id="step5">
<div class="number">
<span>5</span>
</div>
<div class="title">
<h1>Finalize Order</h1>
</div>
<div class="modify">
<i class="fa fa-plus-circle"></i>
</div>
</div>
<div class="content" id="final_products">
<div class="left" id="ordered">
<div class="products">
<div class="product_image">
<img src="[Link]
</div>
<div class="product_details">
<span class="product_name">Mans shoes</span>
<span class="quantity">1</span>
<span class="price">$45.00</span>
</div>
</div>
<div class="totals">
<span class="subtitle">Subtotal <span id="sub_price">$45.00</span></span>
<span class="subtitle">Tax <span id="sub_tax">$2.00</span></span>
<span class="subtitle">Shipping <span id="sub_ship">$4.00</span></span>
</div>
<div class="final">
<span class="title">Total <span id="calculated_total">$51.00</span></span>
</div>
</div>
<div class="right" id="reviewed">
<div class="billing">
<span class="title">Billing:</span>
<div class="address_reviewed">
<span class="name">[Link]-Amin</span>
<span class="address">123 Street</span>
<span class="location">Uttara,Dhaka-1230</span>
<span class="phone">(+88)01888563996</span>
</div>
</div>
<div class="shipping">
<span class="title">Shipping:</span>
<div class="address_reviewed">
<span class="name">[Link]-Amin</span>
<span class="address">123 Street</span>
<span class="location">Uttara,Dhaka-1230</span>
<span class="phone">(+88)01888563996</span>
</div>
</div>
<div class="payment">
<span class="title">Payment:</span>
<div class="payment_reviewed">
<span class="method">Visa</span>
<span class="number_hidden">xxxx-xxxx-xxxx-1111</span>
</div>
</div>
<div id="complete">
<a class="big_button" id="complete" href="#">Complete Order</a>
<span class="sub">By selecting this button you agree to the purchase and subsequent payment
for this order.</span>
</div>
</div>
</div>
</div>
</body>
</html>
