Scribd
Upload
96 views10 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
96 views10 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
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