458 lines
20 KiB
HTML
458 lines
20 KiB
HTML
<!-- /*
|
||
* Bootstrap 5
|
||
* Template Name: Furni
|
||
* Template Author: Untree.co
|
||
* Template URI: https://untree.co/
|
||
* License: https://creativecommons.org/licenses/by/3.0/
|
||
*/ -->
|
||
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
<meta name="author" content="Untree.co">
|
||
<link rel="shortcut icon" href="favicon.png">
|
||
|
||
<meta name="description" content="" />
|
||
<meta name="keywords" content="bootstrap, bootstrap4" />
|
||
|
||
<!-- Bootstrap CSS -->
|
||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
|
||
<link href="css/tiny-slider.css" rel="stylesheet">
|
||
<link href="css/style.css" rel="stylesheet">
|
||
<title>Furni Free Bootstrap 5 Template for Furniture and Interior Design Websites by Untree.co </title>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<!-- Start Header/Navigation -->
|
||
<nav class="custom-navbar navbar navbar navbar-expand-md navbar-dark bg-dark" arial-label="Furni navigation bar">
|
||
|
||
<div class="container">
|
||
<a class="navbar-brand" href="index.html">Furni<span>.</span></a>
|
||
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsFurni" aria-controls="navbarsFurni" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
|
||
<div class="collapse navbar-collapse" id="navbarsFurni">
|
||
<ul class="custom-navbar-nav navbar-nav ms-auto mb-2 mb-md-0">
|
||
<li class="nav-item ">
|
||
<a class="nav-link" href="index.html">Home</a>
|
||
</li>
|
||
<li><a class="nav-link" href="shop.html">Shop</a></li>
|
||
<li><a class="nav-link" href="about.html">About us</a></li>
|
||
<li><a class="nav-link" href="services.html">Services</a></li>
|
||
<li><a class="nav-link" href="blog.html">Blog</a></li>
|
||
<li><a class="nav-link" href="contact.html">Contact us</a></li>
|
||
</ul>
|
||
|
||
<ul class="custom-navbar-cta navbar-nav mb-2 mb-md-0 ms-5">
|
||
<li><a class="nav-link" href="#"><img src="images/user.svg"></a></li>
|
||
<li><a class="nav-link" href="cart.html"><img src="images/cart.svg"></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
</nav>
|
||
<!-- End Header/Navigation -->
|
||
|
||
<!-- Start Hero Section -->
|
||
<div class="hero">
|
||
<div class="container">
|
||
<div class="row justify-content-between">
|
||
<div class="col-lg-5">
|
||
<div class="intro-excerpt">
|
||
<h1>Checkout</h1>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-7">
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Hero Section -->
|
||
|
||
<div class="untree_co-section">
|
||
<div class="container">
|
||
<div class="row mb-5">
|
||
<div class="col-md-12">
|
||
<div class="border p-4 rounded" role="alert">
|
||
Returning customer? <a href="#">Click here</a> to login
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6 mb-5 mb-md-0">
|
||
<h2 class="h3 mb-3 text-black">Billing Details</h2>
|
||
<div class="p-3 p-lg-5 border bg-white">
|
||
<div class="form-group">
|
||
<label for="c_country" class="text-black">Country <span class="text-danger">*</span></label>
|
||
<select id="c_country" class="form-control">
|
||
<option value="1">Select a country</option>
|
||
<option value="2">bangladesh</option>
|
||
<option value="3">Algeria</option>
|
||
<option value="4">Afghanistan</option>
|
||
<option value="5">Ghana</option>
|
||
<option value="6">Albania</option>
|
||
<option value="7">Bahrain</option>
|
||
<option value="8">Colombia</option>
|
||
<option value="9">Dominican Republic</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group row">
|
||
<div class="col-md-6">
|
||
<label for="c_fname" class="text-black">First Name <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_fname" name="c_fname">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="c_lname" class="text-black">Last Name <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_lname" name="c_lname">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group row">
|
||
<div class="col-md-12">
|
||
<label for="c_companyname" class="text-black">Company Name </label>
|
||
<input type="text" class="form-control" id="c_companyname" name="c_companyname">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group row">
|
||
<div class="col-md-12">
|
||
<label for="c_address" class="text-black">Address <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_address" name="c_address" placeholder="Street address">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group mt-3">
|
||
<input type="text" class="form-control" placeholder="Apartment, suite, unit etc. (optional)">
|
||
</div>
|
||
|
||
<div class="form-group row">
|
||
<div class="col-md-6">
|
||
<label for="c_state_country" class="text-black">State / Country <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_state_country" name="c_state_country">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="c_postal_zip" class="text-black">Posta / Zip <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_postal_zip" name="c_postal_zip">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group row mb-5">
|
||
<div class="col-md-6">
|
||
<label for="c_email_address" class="text-black">Email Address <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_email_address" name="c_email_address">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="c_phone" class="text-black">Phone <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_phone" name="c_phone" placeholder="Phone Number">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="c_create_account" class="text-black" data-bs-toggle="collapse" href="#create_an_account" role="button" aria-expanded="false" aria-controls="create_an_account"><input type="checkbox" value="1" id="c_create_account"> Create an account?</label>
|
||
<div class="collapse" id="create_an_account">
|
||
<div class="py-2 mb-4">
|
||
<p class="mb-3">Create an account by entering the information below. If you are a returning customer please login at the top of the page.</p>
|
||
<div class="form-group">
|
||
<label for="c_account_password" class="text-black">Account Password</label>
|
||
<input type="email" class="form-control" id="c_account_password" name="c_account_password" placeholder="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="form-group">
|
||
<label for="c_ship_different_address" class="text-black" data-bs-toggle="collapse" href="#ship_different_address" role="button" aria-expanded="false" aria-controls="ship_different_address"><input type="checkbox" value="1" id="c_ship_different_address"> Ship To A Different Address?</label>
|
||
<div class="collapse" id="ship_different_address">
|
||
<div class="py-2">
|
||
|
||
<div class="form-group">
|
||
<label for="c_diff_country" class="text-black">Country <span class="text-danger">*</span></label>
|
||
<select id="c_diff_country" class="form-control">
|
||
<option value="1">Select a country</option>
|
||
<option value="2">bangladesh</option>
|
||
<option value="3">Algeria</option>
|
||
<option value="4">Afghanistan</option>
|
||
<option value="5">Ghana</option>
|
||
<option value="6">Albania</option>
|
||
<option value="7">Bahrain</option>
|
||
<option value="8">Colombia</option>
|
||
<option value="9">Dominican Republic</option>
|
||
</select>
|
||
</div>
|
||
|
||
|
||
<div class="form-group row">
|
||
<div class="col-md-6">
|
||
<label for="c_diff_fname" class="text-black">First Name <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_diff_fname" name="c_diff_fname">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="c_diff_lname" class="text-black">Last Name <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_diff_lname" name="c_diff_lname">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group row">
|
||
<div class="col-md-12">
|
||
<label for="c_diff_companyname" class="text-black">Company Name </label>
|
||
<input type="text" class="form-control" id="c_diff_companyname" name="c_diff_companyname">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group row mb-3">
|
||
<div class="col-md-12">
|
||
<label for="c_diff_address" class="text-black">Address <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_diff_address" name="c_diff_address" placeholder="Street address">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<input type="text" class="form-control" placeholder="Apartment, suite, unit etc. (optional)">
|
||
</div>
|
||
|
||
<div class="form-group row">
|
||
<div class="col-md-6">
|
||
<label for="c_diff_state_country" class="text-black">State / Country <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_diff_state_country" name="c_diff_state_country">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="c_diff_postal_zip" class="text-black">Posta / Zip <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_diff_postal_zip" name="c_diff_postal_zip">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group row mb-5">
|
||
<div class="col-md-6">
|
||
<label for="c_diff_email_address" class="text-black">Email Address <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_diff_email_address" name="c_diff_email_address">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<label for="c_diff_phone" class="text-black">Phone <span class="text-danger">*</span></label>
|
||
<input type="text" class="form-control" id="c_diff_phone" name="c_diff_phone" placeholder="Phone Number">
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="c_order_notes" class="text-black">Order Notes</label>
|
||
<textarea name="c_order_notes" id="c_order_notes" cols="30" rows="5" class="form-control" placeholder="Write your notes here..."></textarea>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
|
||
<div class="row mb-5">
|
||
<div class="col-md-12">
|
||
<h2 class="h3 mb-3 text-black">Coupon Code</h2>
|
||
<div class="p-3 p-lg-5 border bg-white">
|
||
|
||
<label for="c_code" class="text-black mb-3">Enter your coupon code if you have one</label>
|
||
<div class="input-group w-75 couponcode-wrap">
|
||
<input type="text" class="form-control me-2" id="c_code" placeholder="Coupon Code" aria-label="Coupon Code" aria-describedby="button-addon2">
|
||
<div class="input-group-append">
|
||
<button class="btn btn-black btn-sm" type="button" id="button-addon2">Apply</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row mb-5">
|
||
<div class="col-md-12">
|
||
<h2 class="h3 mb-3 text-black">Your Order</h2>
|
||
<div class="p-3 p-lg-5 border bg-white">
|
||
<table class="table site-block-order-table mb-5">
|
||
<thead>
|
||
<th>Product</th>
|
||
<th>Total</th>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Top Up T-Shirt <strong class="mx-2">x</strong> 1</td>
|
||
<td>$250.00</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Polo Shirt <strong class="mx-2">x</strong> 1</td>
|
||
<td>$100.00</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-black font-weight-bold"><strong>Cart Subtotal</strong></td>
|
||
<td class="text-black">$350.00</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="text-black font-weight-bold"><strong>Order Total</strong></td>
|
||
<td class="text-black font-weight-bold"><strong>$350.00</strong></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
|
||
<div class="border p-3 mb-3">
|
||
<h3 class="h6 mb-0"><a class="d-block" data-bs-toggle="collapse" href="#collapsebank" role="button" aria-expanded="false" aria-controls="collapsebank">Direct Bank Transfer</a></h3>
|
||
|
||
<div class="collapse" id="collapsebank">
|
||
<div class="py-2">
|
||
<p class="mb-0">Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border p-3 mb-3">
|
||
<h3 class="h6 mb-0"><a class="d-block" data-bs-toggle="collapse" href="#collapsecheque" role="button" aria-expanded="false" aria-controls="collapsecheque">Cheque Payment</a></h3>
|
||
|
||
<div class="collapse" id="collapsecheque">
|
||
<div class="py-2">
|
||
<p class="mb-0">Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="border p-3 mb-5">
|
||
<h3 class="h6 mb-0"><a class="d-block" data-bs-toggle="collapse" href="#collapsepaypal" role="button" aria-expanded="false" aria-controls="collapsepaypal">Paypal</a></h3>
|
||
|
||
<div class="collapse" id="collapsepaypal">
|
||
<div class="py-2">
|
||
<p class="mb-0">Make your payment directly into our bank account. Please use your Order ID as the payment reference. Your order won’t be shipped until the funds have cleared in our account.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<button class="btn btn-black btn-lg py-3 btn-block" onclick="window.location='thankyou.html'">Place Order</button>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<!-- </form> -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Start Footer Section -->
|
||
<footer class="footer-section">
|
||
<div class="container relative">
|
||
|
||
<div class="sofa-img">
|
||
<img src="images/sofa.png" alt="Image" class="img-fluid">
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-8">
|
||
<div class="subscription-form">
|
||
<h3 class="d-flex align-items-center"><span class="me-1"><img src="images/envelope-outline.svg" alt="Image" class="img-fluid"></span><span>Subscribe to Newsletter</span></h3>
|
||
|
||
<form action="#" class="row g-3">
|
||
<div class="col-auto">
|
||
<input type="text" class="form-control" placeholder="Enter your name">
|
||
</div>
|
||
<div class="col-auto">
|
||
<input type="email" class="form-control" placeholder="Enter your email">
|
||
</div>
|
||
<div class="col-auto">
|
||
<button class="btn btn-primary">
|
||
<span class="fa fa-paper-plane"></span>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row g-5 mb-5">
|
||
<div class="col-lg-4">
|
||
<div class="mb-4 footer-logo-wrap"><a href="#" class="footer-logo">Furni<span>.</span></a></div>
|
||
<p class="mb-4">Donec facilisis quam ut purus rutrum lobortis. Donec vitae odio quis nisl dapibus malesuada. Nullam ac aliquet velit. Aliquam vulputate velit imperdiet dolor tempor tristique. Pellentesque habitant</p>
|
||
|
||
<ul class="list-unstyled custom-social">
|
||
<li><a href="#"><span class="fa fa-brands fa-facebook-f"></span></a></li>
|
||
<li><a href="#"><span class="fa fa-brands fa-twitter"></span></a></li>
|
||
<li><a href="#"><span class="fa fa-brands fa-instagram"></span></a></li>
|
||
<li><a href="#"><span class="fa fa-brands fa-linkedin"></span></a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="col-lg-8">
|
||
<div class="row links-wrap">
|
||
<div class="col-6 col-sm-6 col-md-3">
|
||
<ul class="list-unstyled">
|
||
<li><a href="#">About us</a></li>
|
||
<li><a href="#">Services</a></li>
|
||
<li><a href="#">Blog</a></li>
|
||
<li><a href="#">Contact us</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="col-6 col-sm-6 col-md-3">
|
||
<ul class="list-unstyled">
|
||
<li><a href="#">Support</a></li>
|
||
<li><a href="#">Knowledge base</a></li>
|
||
<li><a href="#">Live chat</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="col-6 col-sm-6 col-md-3">
|
||
<ul class="list-unstyled">
|
||
<li><a href="#">Jobs</a></li>
|
||
<li><a href="#">Our team</a></li>
|
||
<li><a href="#">Leadership</a></li>
|
||
<li><a href="#">Privacy Policy</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="col-6 col-sm-6 col-md-3">
|
||
<ul class="list-unstyled">
|
||
<li><a href="#">Nordic Chair</a></li>
|
||
<li><a href="#">Kruzo Aero</a></li>
|
||
<li><a href="#">Ergonomic Chair</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="border-top copyright">
|
||
<div class="row pt-4">
|
||
<div class="col-lg-6">
|
||
<p class="mb-2 text-center text-lg-start">Copyright ©<script>document.write(new Date().getFullYear());</script>. All Rights Reserved. — Designed with love by <a href="https://untree.co">Untree.co</a> Distributed By <a hreff="https://themewagon.com">ThemeWagon</a> <!-- License information: https://untree.co/license/ -->
|
||
</p>
|
||
</div>
|
||
|
||
<div class="col-lg-6 text-center text-lg-end">
|
||
<ul class="list-unstyled d-inline-flex ms-auto">
|
||
<li class="me-4"><a href="#">Terms & Conditions</a></li>
|
||
<li><a href="#">Privacy Policy</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</footer>
|
||
<!-- End Footer Section -->
|
||
|
||
|
||
<script src="js/bootstrap.bundle.min.js"></script>
|
||
<script src="js/tiny-slider.js"></script>
|
||
<script src="js/custom.js"></script>
|
||
</body>
|
||
|
||
</html>
|