Scribd
Upload
77 views

HTML of Checkout

The document shows the steps and information needed for a checkout process similar to eBay. It includes sections for entering email, billing information, shipping information, payment details, and order review.

Uploaded by

robin hossain
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
77 views

HTML of Checkout

The document shows the steps and information needed for a checkout process similar to eBay. It includes sections for entering email, billing information, shipping information, payment details, and order review.

Uploaded by

robin hossain
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

<!

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="style.css">

</head>

<body>

<h3>***Demo for checkout page like eBay by Md.Al-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="https://i.imgur.com/Z5HVIOt.png"></span>

<span><img src="https://i.imgur.com/Le0Vvgx.png"></span>

<span><img src="https://i.imgur.com/D2eQTim.png"></span>

<span><img src="https://i.imgur.com/Pu4e7AT.png"></span>

<span><img src="https://i.imgur.com/ewMjaHv.png"></span>

<span><img src="https://i.imgur.com/3LmmFFV.png"></span>
</div>

<div class="secured">

<img class="lock" src="https://i.imgur.com/hHuibOR.png">

<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="https://i.imgur.com/rfoB6mh.jpg"/>

</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">MD.Al-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">MD.Al-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>

You might also like