রেস্পন্সিভ চেকআউট ফর্ম কিভাবে করবেন?
ফর্ম কি এটা আমরা সবাই জানি। তবে যারা কখনো ই-কমার্স সাইট ভিজিট করেনি ওরা হয়তো চেকআউট ফর্ম সম্পর্কে তেমন কিছু জানতে পারে না। প্রায় সকল ই-কমার্স সাইটে চেকআউট ফর্ম থাকে। ওয়েবসাইটের কন্টেন্ট অথবা পলিসি অনুযায়ী চেকআউট ফর্মের ডিজাইন বা ফর্ম ভিন্ন ভিন্ন হতে পারে। আমি এখানে যে ডিজাইন'টা দেখালাম এটা'কে ভাল করে বুঝে নিতে পারলে যে কোন ধরনের চেকআউট ফর্ম ডিজাইন করতে পারবেন। একটি চেকআউট ফর্মে অনেক কন্টেন্ট থাকে। তাই কোড কিছুটা বেশি হয়েছে বলে সিএসএস গুলো আলাদা আলাদা ফাইলে করে দেখিয়েছি। যাতে বুঝতে আপনাদের অসুবিদা না হয়। ফলাফল এর নিচে সকল সিএসএস ফাইল গুলো দিয়েছি। আরো বিস্তারিত জানতে ভিডিও টিউটোরিয়াল'টি দেখুন।
বিস্তারিত ভিডিও সহ দেখুন
কোড উদাহরণ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="cart_style.css">
<link rel="stylesheet" href="table.css">
</head>
<body>
<h2>Responsive Checkout Form</h2>
<div class="main_container">
<div class="row">
<div class="form_container">
<div class="content">
<form action="#">
<div class="row">
<div class="billing_area">
<h3>Billing Address</h3>
<br>
<label for="full_name"><i class="fa fa-user"></i> Full Name</label>
<input type="text" id="full_name" placeholder="Your Full Name">
<label for="email"><i class="fa fa-envelope"></i> Email</label>
<input type="text" id="email" placeholder="Your Email">
<label for="address"><i class="fa fa-address-card-o"></i> Address</label>
<input type="text" id="address" placeholder="Your Address">
<label for="city"><i class="fa fa-institution"></i> City</label>
<input type="text" id="city" placeholder="Your City Name">
<div class="row">
<div class="fifty_percent">
<label for="state">State</label>
<input type="text" id="state" placeholder="Your State">
</div>
<div class="fifty_percent">
<label for="zip_code">Zip</label>
<input type="text" id="zip_code" placeholder="Your Zip Code">
</div>
</div>
</div>
<div class="payment_area">
<h3>Payment Details</h3>
<br>
<p>Accepted Cards</p>
<div class="some_cort">
<i class="fa fa-cc-visa" style="color:navy;"></i>
<i class="fa fa-cc-mastercard" style="color:red;"></i>
<i class="fa fa-cc-amex" style="color:blue;"></i>
<i class="fa fa-cc-discover" style="color:orange;"></i>
</div>
<label for="cart-name">Name on Card</label>
<input type="text" id="cart-name" placeholder="Cart Name">
<br>
<label for="cart_no">Credit card number</label>
<input type="text" id="cart_no" placeholder="1212-2323-3434-4545">
<label for="expiry_month">Expiry Month</label>
<input type="text" id="expiry_month" placeholder="December">
<div class="row">
<div class="fifty_percent">
<label for="expiry_year"> Expiry Year</label>
<input type="text" id="expiry_year" placeholder="2018">
</div>
<div class="fifty_percent">
<label for="cvv">CVV</label>
<input type="text" id="cvv" placeholder="326">
</div>
</div>
</div>
</div>
<label>
<input type="checkbox"><span class="checkbox_text"> Shipping address is the same as my billing address</span>
<br>
<input type="checkbox"><span class="checkbox_text"> Save this information for next time</span>
</label>
<input class="submit" type="submit" value="Continue To Checkout">
</form>
</div>
</div>
<div class="cart_area">
<div class="content">
<div class="cart_top">
<h4>Cart</h4>
<div class="register">
<a href="#">Register</a>
<a href="#">Sign-In</a>
</div>
<div class="subtotal">
<div class="total_items">
<span>Totla Items:-</span><i class="fa fa-shopping-cart"></i>
<span class="item">3</span>
</div>
<div class="total"><span class="stotal">Subtotal:-</span> <span style="color:red;"> ৳193459</span></div>
</div>
</div>
<table>
<tr>
<td class="thumb" rowspan="4"><img src="img1.jpg"></td>
<td class="close_icon"><img title="Remove" class="close" src="close.png"></td>
</tr>
<tr class="product_name">
<td colspan="2">Xiaomi Redmi Note 7 Back Camera lens Protector</td>
</tr>
<tr>
<td style="float:left;">
Qty
<select>
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
x
<td style="float:left;margin-top:-7px;line-height:20px;padding:0 5px;">৳59
<br><s>৳250</s></td>
<td class="discount">76% OFF</td>
</tr>
</table>
<table>
<tr>
<td class="thumb" rowspan="4"><img src="img2.jpg"></td>
<td class="close_icon"><img title="Remove" class="close" src="close.png"></td>
</tr>
<tr class="product_name">
<td colspan="2">NAVIFORCE NF9024 - Black Stainless Steel Wrist Watch for Men</td>
</tr>
<tr>
<td style="float:left;">
Qty
<select>
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
x
<td style="float:left;margin-top:-7px;line-height:20px;padding:0 5px;">৳1450
<br><s>৳3500</s></td>
<td class="discount">59% OFF</td>
</tr>
</table>
<table>
<tr>
<td class="thumb" rowspan="4"><img src="img3.jpg"></td>
<td class="close_icon"><img title="Remove" class="close" src="close.png"></td>
</tr>
<tr class="product_name">
<td colspan="2">Suzuki Gixxer 2016 (Single Disc) - Blue</td>
</tr>
<tr>
<td style="float:left;">
Qty
<select>
<option value="1" selected="">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
x
<td style="float:left;margin-top:-7px;line-height:20px;padding:0 5px;">৳191,950
<br><s>৳209,950</s></td>
<td class="discount">9% OFF</td>
</tr>
</table>
<div class="order">
<span style="float:left;">Total</span> <span style="float:right;">৳193459</span>
</div>
<div class="order redeem">
<input type="text" placeholder="Promo Code"><a href="#">Redeem</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
ফলাফল
Keep Your Ads Here...
ঐতিহাসিক কালার থিওরি
বিস্তারিত দেখুন
এইচটিএমএল আইকন
বিস্তারিত দেখুন
ওয়েবের যত ফন্টস
বিস্তারিত দেখুন
সিএসএস এনিমেশন
বিস্তারিত দেখুন
হরেক রকম মেনু
বিস্তারিত দেখুন
রকমারি বাটন
বিস্তারিত দেখুন