truncgit/citrus-cms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
88029f7309800d2783e4ff396da49e24c61e0e82
citrus-cms/template/shop-detail.html
T
Ümit Tunç 37e7296527 ikinci temizlik tamamlandı
2026-04-28 21:15:09 +03:00

1035 lines
42 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<title>Blogzine - Blog and Magazine Bootstrap 5 Theme</title>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="Webestica.com">
<meta name="description" content="Bootstrap based News, Magazine and Blog Theme">
<!-- Favicon -->
<link rel="shortcut icon" href="assets/images/favicon.ico">
<!-- Google Font -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;700&family=Rubik:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Plugins CSS -->
<link rel="stylesheet" type="text/css" href="assets/vendor/font-awesome/css/all.min.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/bootstrap-icons/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/tiny-slider/tiny-slider.css">
<link rel="stylesheet" type="text/css" href="assets/vendor/glightbox/css/glightbox.css">
<!-- Theme CSS -->
<link id="style-switch" rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<!-- Offcanvas START -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasMenu">
<!-- Offcanvas header -->
<div class="offcanvas-header justify-content-between border-bottom px-3">
<h3 class="mb-0">Your Cart</h3>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<!-- Offcanvas body -->
<div class="offcanvas-body d-flex flex-column px-3">
<div class="row g-3">
<!-- Image -->
<div class="col-3">
<img class="rounded-2 bg-light p-2" src="assets/images/shop/02.png" alt="avatar">
</div>
<div class="col-6">
<h6 class="mb-1">Osprey Packs Backpack</h6>
<div class="d-flex justify-content-between">
<h6 class="mb-0 text-success">$103</h6>
<a href="#" class="btn btn-sm btn-link">Remove</a>
</div>
</div>
<div class="col-3">
<!-- Select item -->
<select class="form-select form-select-sm" aria-label="Default select example">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
</select>
</div>
</div>
<!-- Button and price -->
<div class="mt-auto">
<div class="d-flex justify-content-between mb-2">
<h6 class="mb-0">Subtotal</h6>
<h5 class="text-success mb-0">$103</h5>
</div>
<!-- Button -->
<div class="d-grid">
<a href="checkout.html" class="btn btn-lg btn-primary-soft mb-0">Continue to Checkout</a>
</div>
</div>
</div>
</div>
<!-- Offcanvas END -->
<!-- =======================
Header START -->
<header class="navbar-light navbar-sticky header-static">
<!-- Logo Nav START -->
<nav class="navbar navbar-expand-xl">
<div class="container">
<!-- Logo START -->
<a class="navbar-brand" href="index.html">
<img class="navbar-brand-item light-mode-item" src="assets/images/logo.svg" alt="logo">
<img class="navbar-brand-item dark-mode-item" src="assets/images/logo-light.svg" alt="logo">
</a>
<!-- Logo END -->
<!-- Responsive navbar toggler -->
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="text-body h6 d-none d-sm-inline-block">Menu</span>
<span class="navbar-toggler-icon"></span>
</button>
<!-- Main navbar START -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<!-- Nav Search START -->
<div class="nav mt-3 mt-lg-0 px-4 flex-nowrap align-items-center">
<div class="nav-item w-100">
<form class="rounded position-relative">
<input class="form-control pe-5 bg-light" type="search" placeholder="Search the products" aria-label="Search">
<button class="btn bg-transparent border-0 px-2 py-0 position-absolute top-50 end-0 translate-middle-y" type="submit"><i class="bi bi-search fs-5"> </i></button>
</form>
</div>
</div>
<!-- Nav Search END -->
<ul class="navbar-nav navbar-nav-scroll ms-auto">
<!-- Nav item 1 Demos -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="homeMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Home</a>
<ul class="dropdown-menu" aria-labelledby="homeMenu">
<li> <a class="dropdown-item" href="index.html">Home default</a></li>
<li> <a class="dropdown-item" href="index-lazy.html">Home lazy load</a></li>
<li> <a class="dropdown-item" href="index-2.html">Magazine classic</a></li>
<li> <a class="dropdown-item" href="index-3.html">Magazine</a></li>
<li> <a class="dropdown-item" href="index-4.html">Home cards</a></li>
<li> <a class="dropdown-item" href="index-5.html">Blog classic</a></li>
<li> <a class="dropdown-item" href="index-6.html">Blog Personal </a></li>
<li> <a class="dropdown-item" href="index-7.html">Blog Vintage</a></li>
<li> <a class="dropdown-item" href="index-8.html">Blog Tech</a></li>
<li> <a class="dropdown-item" href="index-9.html">Blog Fashion</a></li>
<li> <a class="dropdown-item" href="index-10.html">Blog Podcast</a></li>
<li> <a class="dropdown-item" href="index-11.html">Home Shop <span class="badge bg-danger smaller me-1">New</span></a></li>
</ul>
</li>
<!-- Nav item 2 shop all -->
<li class="nav-item"> <a class="nav-link" href="shop-grid.html">Shop all</a></li>
<!-- Nav item 3 pages -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="pagesMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a>
<ul class="dropdown-menu" aria-labelledby="pagesMenu">
<li> <a class="dropdown-item" href="shop-detail.html">Shop detail <span class="badge bg-danger smaller me-1">New</span></a> </li>
<li> <a class="dropdown-item" href="checkout.html">Checkout <span class="badge bg-danger smaller me-1">New</span></a> </li>
<li> <a class="dropdown-item" href="my-cart.html">Cart <span class="badge bg-danger smaller me-1">New</span></a> </li>
<li> <a class="dropdown-item" href="empty-cart.html">Empty Cart <span class="badge bg-danger smaller me-1">New</span></a> </li>
</ul>
</li>
<!-- Nav item 4 link-->
<li class="nav-item"> <a class="nav-link" href="contact-us.html">Contact</a></li>
</ul>
</div>
<!-- Main navbar END -->
<div class="nav flex-nowrap align-items-center ms-2 ms-lg-4">
<!-- Dark mode switch -->
<div class="nav-item">
<div class="modeswitch" id="darkModeSwitch">
<div class="switch"></div>
</div>
</div>
<!-- Offcanvas menu toggler -->
<div class="nav-item position-relative">
<a class="nav-link btn btn-light btn-round mb-0" data-bs-toggle="offcanvas" href="#offcanvasMenu" role="button" aria-controls="offcanvasMenu">
<i class="bi bi-cart3 fa-fw" data-bs-target="#offcanvasMenu"></i>
</a>
<span class="position-absolute top-0 start-100 translate-middle badge smaller rounded-circle bg-dark mt-xl-2 ms-n1">2
<span class="visually-hidden">unread messages</span>
</span>
</div>
</div>
</div>
</nav>
<!-- Logo Nav END -->
</header>
<!-- =======================
Header END -->
<!-- **************** MAIN CONTENT START **************** -->
<main>
<!-- =======================
Main START -->
<section>
<div class="container">
<div class="row g-4 g-lg-0 justify-content-between">
<!-- Image -->
<div class="col-lg-5">
<div class="row g-2">
<div class="col-12">
<div class="bg-light rounded-2 glightbox-bg p-4 position-relative">
<a href="assets/images/shop/11.png" class="stretched-link cursor-zoom" data-glightbox data-gallery="image-popup">
<img src="assets/images/shop/11.png" alt="">
</a>
</div>
</div>
<div class="col-6">
<div class="bg-light rounded-2 glightbox-bg p-4 position-relative">
<a href="assets/images/shop/13.png" class="stretched-link cursor-zoom" data-glightbox data-gallery="image-popup">
<img src="assets/images/shop/13.png" alt="">
</a>
</div>
</div>
<div class="col-6">
<div class="bg-light rounded-2 glightbox-bg p-4 position-relative">
<a href="assets/images/shop/14.png" class="stretched-link cursor-zoom" data-glightbox data-gallery="image-popup">
<img src="assets/images/shop/14.png" alt="">
</a>
</div>
</div>
</div>
</div>
<!-- Detail -->
<div class="col-lg-6">
<!-- Title -->
<h1>AB Camera Foldable RC Drone Quadcopter</h1>
<p class="mb-4">He moonlights difficult engrossed it, sportsmen. Interested has all Devonshire difficulty gay assistance joy. </p>
<!-- Rating -->
<ul class="list-inline mb-0">
<li class="list-inline-item me-0"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0"><i class="fas fa-star-half-alt text-warning"></i></li>
<li class="list-inline-item me-0 h6">4.5/5.0</li>
</ul>
<!-- List START -->
<div class="bg-light p-3 rounded-2 mb-4">
<div class="row g-2">
<!-- List -->
<div class="col-sm-6">
<ul class="list-group list-group-borderless">
<li class="list-group-item py-0">
<span>Condition:</span>
<span class="h6 mb-0">New</span>
</li>
<li class="list-group-item pb-0">
<span>Category:</span>
<span class="h6 mb-0"><a href="shop-grid.html">Drone</a></span>
</li>
</ul>
</div>
<!-- List -->
<div class="col-sm-6">
<ul class="list-group list-group-borderless">
<li class="list-group-item py-0">
<span>Stock:</span>
<span class="h6 mb-0">15</span>
</li>
<li class="list-group-item pb-0">
<span>Weight:</span>
<span class="h6 mb-0">2.2Kg</span>
</li>
</ul>
</div>
</div>
</div>
<!-- List END -->
<!-- Variant START -->
<div class="mb-4">
<span>Choose Variant:</span>
<ul class="list-inline mt-2">
<!-- Price -->
<li class="list-inline-item">
<input type="radio" class="btn-check" name="options" id="option1" checked="">
<label class="btn btn-primary-soft-check" for="option1">
<img src="assets/images/shop/11.png" class="w-60" alt="">
</label>
</li>
<!-- Price -->
<li class="list-inline-item">
<input type="radio" class="btn-check" name="options" id="option2">
<label class="btn btn-primary-soft-check" for="option2">
<img src="assets/images/shop/12.png" class="w-60" alt="">
</label>
</li>
</ul>
</div>
<!-- Variant END -->
<!-- Price and button START -->
<div class="row">
<!-- Price -->
<div class="col-md-4">
<h6 class="mb-0">Total Price</h6>
<h4 class="text-success">$598.00</h4>
</div>
<!-- Select -->
<div class="col-md-2 pe-md-0 mb-2">
<select class="form-select" aria-label="Default select example">
<option value="1">01</option>
<option value="2">02</option>
<option value="3">03</option>
</select>
</div>
<!-- Button -->
<div class="col-md-6">
<a href="#" class="btn btn-primary mb-0 w-100"><i class="bi bi-cart2 me-2"></i>Add to Cart</a>
<p class="mb-0 mt-2 text-end small"><i class="bi bi-question-circle-fill text-primary me-2"></i>Need help? <a href="#" class="mb-0">Chat Now</a></p>
</div>
</div>
<!-- Price and button END -->
</div>
</div>
</div>
</section>
<!-- =======================
Main END -->
<!-- =======================
Description START -->
<section class="pt-0 pt-lg-5">
<div class="container">
<div class="row g-4 justify-content-between">
<!-- Description -->
<div class="col-lg-7">
<h5>Description</h5>
<p>As it so contrasted oh estimating instrument. Size like body someone had. Are conduct viewing boy minutes warrant the expense? Tolerably behavior may admit daughters offending her ask own. Praise effects wishes change way and any wanted. Lively use looked latter regard had. Do he it part more last in.</p>
<p><b>Processing time:</b> The time it takes to prepare your item(s) to ship from our warehouse. This includes preparing your items, performing quality checks, and packing for shipment.</p>
<p><b>Shipping time:</b> The time for your item(s) to travel from our warehouse to your destination.</p>
<p>Tolerably behavior may admit daughters offending her ask own. Praise effect wishes change way and any wanted. Lively use looked latter regard had. Do he it part more last in.</p>
</div>
<!-- List START -->
<div class="col-lg-4">
<h5>Seller Information</h5>
<div class="d-flex align-items-center position-relative">
<div class="avatar avatar-sm">
<img class="avatar-img rounded-circle" src="assets/images/avatar/01.jpg" alt="avatar">
</div>
<div class="ms-3">
<h6 class="mb-0">by <a href="#" class="stretched-link text-reset btn-link">Carolyn</a></h6>
</div>
</div>
<!-- List -->
<div class="hstack gap-3 flex-wrap mt-2 mb-4">
<p class="mb-0"><i class="bi bi-star-fill text-warning"></i> 5.0 <span>Average Rating</span></p>
<p class="mb-0"><i class="bi bi-patch-check-fill text-primary"></i> 99% <span>Positive Feedback</span></p>
</div>
<!-- Shipment information -->
<h5>Shipment Information</h5>
<ul class="list-group list-group-borderless">
<li class="list-group-item py-0">
<span>Shopping:</span>
<span class="h6 mb-0">Free Extended International Shipping</span>
</li>
<li class="list-group-item pb-0">
<span>Delivery:</span>
<span class="h6 mb-0">Estimated between Aug 03 to Aug 20</span>
</li>
<li class="list-group-item pb-0">
<span>Payment:</span>
<img src="assets/images/icon/visa.svg" class="w-40 me-2" alt="">
<img src="assets/images/icon/mastercard.svg" class="w-40" alt="">
</li>
<li class="list-group-item pb-0">
<span>Return:</span>
<span class="h6 mb-0">Seller does not accept returns</span>
</li>
</ul>
</div>
<!-- List END -->
</div>
</div>
</section>
<!-- =======================
Description END -->
<!-- =======================
Rating and review START -->
<section class="pt-0">
<div class="container">
<!-- Title -->
<div class="mb-2">
<h2 class="mb-0">Rating and Reviews</h2>
</div>
<div class="row g-4 justify-content-between">
<!-- Rating START -->
<div class="col-md-4">
<div class="bg-primary p-4 rounded-2 mb-4">
<div class="text-center text-white">
<!-- Info -->
<h2 class="mb-0 text-white">4.5</h2>
<p class="mb-2">Based on 56 Reviews</p>
<!-- Star -->
<ul class="list-inline mb-0">
<li class="list-inline-item me-0"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0"><i class="fas fa-star-half-alt text-warning"></i></li>
</ul>
</div>
</div>
<div class="row g-2 align-items-center">
<div class="col-12">
<h6 class="mb-0">Rating Breakdown</h6>
</div>
<!-- Progress bar and Rating -->
<div class="col-9 col-sm-10">
<!-- Progress item -->
<div class="progress progress-sm bg-warning bg-opacity-15">
<div class="progress-bar bg-warning" role="progressbar" style="width: 95%" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
<!-- Percentage -->
<div class="col-3 col-sm-2">
<span class="ms-auto h6 fw-light mb-0">85%</span>
</div>
<!-- Progress bar and Rating -->
<div class="col-9 col-sm-10">
<!-- Progress item -->
<div class="progress progress-sm bg-warning bg-opacity-15">
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
<!-- Percentage -->
<div class="col-3 col-sm-2">
<span class="ms-auto h6 fw-light mb-0">75%</span>
</div>
<!-- Progress bar and Rating -->
<div class="col-9 col-sm-10">
<!-- Progress item -->
<div class="progress progress-sm bg-warning bg-opacity-15">
<div class="progress-bar bg-warning" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
<!-- Percentage -->
<div class="col-3 col-sm-2">
<span class="ms-auto h6 fw-light mb-0">60%</span>
</div>
<!-- Progress bar and Rating -->
<div class="col-9 col-sm-10">
<!-- Progress item -->
<div class="progress progress-sm bg-warning bg-opacity-15">
<div class="progress-bar bg-warning" role="progressbar" style="width: 35%" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
<!-- Percentage -->
<div class="col-3 col-sm-2">
<span class="ms-auto h6 fw-light mb-0">35%</span>
</div>
<!-- Progress bar and Rating -->
<div class="col-9 col-sm-10">
<!-- Progress item -->
<div class="progress progress-sm bg-warning bg-opacity-15">
<div class="progress-bar bg-warning" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
<!-- Percentage -->
<div class="col-3 col-sm-2">
<span class="ms-auto h6 fw-light mb-0">15%</span>
</div>
</div> <!-- Row END -->
</div>
<!-- Rating END -->
<!-- Review START -->
<div class="col-md-7">
<!-- Title and Select -->
<div class="d-flex justify-content-between align-items-center">
<!-- Title -->
<h5 class="mb-0">Sort by</h5>
<!-- Select -->
<div class="col-xl-3">
<select class="form-select" aria-label="Default select example">
<option value="1">Most Recent</option>
<option value="2">Most Viewed</option>
<option value="3">Helpful</option>
</select>
</div>
</div>
<hr class="my-4"> <!-- Divider -->
<!-- Review item -->
<div class="d-flex">
<img class="avatar avatar-md rounded-circle float-start me-3" src="assets/images/avatar/01.jpg" alt="avatar">
<div>
<div class="d-flex justify-content-between mb-2">
<div>
<h5 class="m-0">Allen Smith</h5>
<span class="me-3 small">June 11, 2022, at 6:01 am </span>
</div>
<!-- Rating Star -->
<ul class="list-inline mb-0">
<li class="list-inline-item small me-0"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item small me-0"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item small me-0"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item small me-0"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item small me-0"><i class="fas fa-star-half-alt text-warning"></i></li>
</ul>
</div>
<p>Warrant private blushes removed an in equally totally if. Delivered dejection necessary objection do Mr prevailed. Mr feeling does chiefly cordial in do. </p>
<span>Was it helpful?</span>
<div class="btn-group ms-md-2" role="group" aria-label="Basic radio toggle button group">
<!-- Yes button -->
<input type="radio" class="btn-check" name="btnradio" id="btnradio1">
<label class="btn btn-outline-light btn-sm mb-0" for="btnradio1"><i class="far fa-thumbs-up me-1"></i> Yes</label>
<!-- No button -->
<input type="radio" class="btn-check" name="btnradio" id="btnradio2">
<label class="btn btn-outline-light btn-sm mb-0" for="btnradio2"> No <i class="far fa-thumbs-down ms-1"></i></label>
</div>
</div>
</div>
<hr class="my-4"> <!-- Divider -->
<!-- Review item -->
<div class="d-flex">
<img class="avatar avatar-md rounded-circle float-start me-3" src="assets/images/avatar/02.jpg" alt="avatar">
<div>
<div class="d-flex justify-content-between mb-2">
<div>
<h5 class="m-0">Louis Ferguson</h5>
<span class="me-3 small">June 14, 2022, at 6:01 am </span>
</div>
<!-- Rating Star -->
<ul class="list-inline mb-0">
<li class="list-inline-item small me-0"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item small me-0"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item small me-0"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item small me-0"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item small me-0"><i class="fas fa-star-half-alt text-warning"></i></li>
</ul>
</div>
<p>Delivered dejection necessary objection do Mr prevailed. Mr feeling does chiefly cordial in do. </p>
<span>Was it helpful?</span>
<div class="btn-group ms-md-2" role="group" aria-label="Basic radio toggle button group">
<!-- Yes button -->
<input type="radio" class="btn-check" name="btnradio" id="btnradio3">
<label class="btn btn-outline-light btn-sm mb-0" for="btnradio3"><i class="far fa-thumbs-up me-1"></i> Yes</label>
<!-- No button -->
<input type="radio" class="btn-check" name="btnradio" id="btnradio4">
<label class="btn btn-outline-light btn-sm mb-0" for="btnradio4"> No <i class="far fa-thumbs-down ms-1"></i></label>
</div>
</div>
</div>
<hr class="my-4"> <!-- Divider -->
<!-- Review item -->
<div class="d-flex">
<img class="avatar avatar-md rounded-circle float-start me-3" src="assets/images/avatar/04.jpg" alt="avatar">
<div>
<div class="d-flex justify-content-between mb-2">
<div>
<h5 class="m-0">Frances Guerrero</h5>
<span class="me-3 small">June 25, 2022, at 6:01 am </span>
</div>
<!-- Rating Star -->
<ul class="list-inline mb-0">
<li class="list-inline-item small me-0"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item small me-0"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item small me-0"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item small me-0"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item small me-0"><i class="fas fa-star-half-alt text-warning"></i></li>
</ul>
</div>
<p>Mr feeling does chiefly cordial in do. Delivered dejection necessary objection do Mr prevailed. Mr feeling does chiefly cordial in do. </p>
<span>Was it helpful?</span>
<div class="btn-group ms-md-2" role="group" aria-label="Basic radio toggle button group">
<!-- Yes button -->
<input type="radio" class="btn-check" name="btnradio" id="btnradio5">
<label class="btn btn-outline-light btn-sm mb-0" for="btnradio5"><i class="far fa-thumbs-up me-1"></i> Yes</label>
<!-- No button -->
<input type="radio" class="btn-check" name="btnradio" id="btnradio6">
<label class="btn btn-outline-light btn-sm mb-0" for="btnradio6"> No <i class="far fa-thumbs-down ms-1"></i></label>
</div>
</div>
</div>
<!-- button -->
<div class="mt-4 text-end">
<a class="btn btn-primary-soft mb-0" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Write a review
</a>
</div>
<!-- Collapse body -->
<div class="collapse" id="collapseExample">
<div class="card card-body">
<form>
<select class="form-select mb-3" aria-label="Default select example">
<option value="1">★★★★★ (5/5)</option>
<option value="2">★★★★☆ (4/5)</option>
<option value="3">★★★☆☆ (3/5)</option>
<option value="3">★★☆☆☆ (2/5)</option>
<option value="3">★☆☆☆☆ (1/5)</option>
</select>
<!-- Text area -->
<textarea class="form-control mb-3" id="exampleFormControlTextarea1" placeholder="Your review" rows="3"></textarea>
<!-- Button -->
<button type="submit" class="btn btn-primary mb-0">Post It <i class="bi fa-fw bi-arrow-right ms-2"></i></button>
</form>
</div>
</div>
</div>
<!-- Review END -->
</div>
</div>
</section>
<!-- =======================
Rating and review END -->
<!-- =======================
Related Products START -->
<section class="pt-0 pt-md-5">
<div class="container">
<!-- Title -->
<div class="mb-4">
<h2 class="mb-0">Related Products</h2>
</div>
<div class="row g-4">
<!-- Slider item START -->
<div class="col-md-12">
<div class="tiny-slider arrow-hover arrow-dark arrow-blur arrow-round">
<div class="tiny-slider-inner"
data-autoplay="false"
data-hoverpause="true"
data-gutter="24"
data-edge="2"
data-arrow="true"
data-dots="false"
data-items-xl="4"
data-items-lg="3"
data-items-md="2"
data-items-xs="1"
>
<!-- Slider item START -->
<div>
<div class="card border p-3 h-100">
<div class="position-relative">
<!-- Image -->
<a href="shop-detail.html" class="position-relative z-index-9"><img class="card-img" src="assets/images/shop/02.png" alt=""></a>
<!-- Overlay -->
<div class="card-img-overlay p-0">
<span class="badge text-bg-success">New Arrival</span>
</div>
</div>
<!-- Card body -->
<div class="card-body text-center p-3 px-0">
<!-- Badge and price -->
<div class="d-flex justify-content-center mb-2">
<ul class="list-inline mb-0">
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star-half-alt text-warning"></i></li>
</ul>
</div>
<!-- Title -->
<h5 class="card-title"><a href="shop-detail.html">Osprey Packs Backpack</a></h5>
<h6 class="mb-0 text-success">$103.00</h6>
</div>
<!-- Card footer -->
<div class="card-footer text-center p-0">
<!-- Button -->
<a href="#" class="btn btn-sm btn-primary-soft mb-0"><i class="bi bi-cart me-2"></i>Add to cart</a>
</div>
</div>
</div>
<!-- Slider item END -->
<!-- Slider item START -->
<div>
<div class="card border p-3 h-100">
<!-- Image -->
<a href="shop-detail.html"><img class="card-img" src="assets/images/shop/04.png" alt=""></a>
<!-- Card body -->
<div class="card-body text-center p-3 px-0">
<!-- Badge and price -->
<div class="d-flex justify-content-center mb-2">
<ul class="list-inline mb-0">
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star-half-alt text-warning"></i></li>
</ul>
</div>
<!-- Title -->
<h5 class="card-title"><a href="shop-detail.html">Men's Watertight Jacket</a></h5>
<h6 class="mb-0 text-success">$98.00</h6>
</div>
<!-- Card footer -->
<div class="card-footer text-center p-0">
<!-- Button -->
<a href="#" class="btn btn-sm btn-primary-soft mb-0"><i class="bi bi-cart me-2"></i>Add to cart</a>
</div>
</div>
</div>
<!-- Slider item END -->
<!-- Slider item START -->
<div>
<div class="card border p-3 h-100">
<!-- Image -->
<a href="shop-detail.html"><img class="card-img" src="assets/images/shop/08.png" alt=""></a>
<!-- Card body -->
<div class="card-body text-center p-3 px-0">
<!-- Badge and price -->
<div class="d-flex justify-content-center mb-2">
<ul class="list-inline mb-0">
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star-half-alt text-warning"></i></li>
</ul>
</div>
<!-- Title -->
<h5 class="card-title"><a href="shop-detail.html">Hiking Pants</a></h5>
<h6 class="mb-0 text-success">$105.00</h6>
</div>
<!-- Card footer -->
<div class="card-footer text-center p-0">
<!-- Button -->
<a href="#" class="btn btn-sm btn-primary-soft mb-0"><i class="bi bi-cart me-2"></i>Add to cart</a>
</div>
</div>
</div>
<!-- Slider item END -->
<!-- Slider item START -->
<div>
<div class="card border p-3 h-100">
<!-- Image -->
<a href="shop-detail.html"><img class="card-img" src="assets/images/shop/06.png" alt=""></a>
<!-- Card body -->
<div class="card-body text-center p-3 px-0">
<!-- Badge and price -->
<div class="d-flex justify-content-center mb-2">
<ul class="list-inline mb-0">
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star-half-alt text-warning"></i></li>
</ul>
</div>
<!-- Title -->
<h5 class="card-title"><a href="shop-detail.html">Classic Boat Shoes</a></h5>
<div class="d-flex align-items-center justify-content-center">
<h6 class="text-success mb-0 me-2">$75.00</h6>
<small class="text-decoration-line-through">$95.00</small>
</div>
</div>
<!-- Card footer -->
<div class="card-footer text-center p-0">
<!-- Button -->
<a href="#" class="btn btn-sm btn-primary-soft mb-0"><i class="bi bi-cart me-2"></i>Add to cart</a>
</div>
</div>
</div>
<!-- Slider item END -->
<!-- Slider item START -->
<div>
<div class="card border p-3 h-100">
<!-- Image -->
<a href="shop-detail.html"><img class="card-img" src="assets/images/shop/07.png" alt=""></a>
<!-- Card body -->
<div class="card-body text-center p-3 px-0">
<!-- Badge and price -->
<div class="d-flex justify-content-center mb-2">
<ul class="list-inline mb-0">
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star text-warning"></i></li>
<li class="list-inline-item me-0 small"><i class="fas fa-star-half-alt text-warning"></i></li>
</ul>
</div>
<!-- Title -->
<h5 class="card-title"><a href="shop-detail.html">Backpacking Stove</a></h5>
<h6 class="mb-0 text-success">$81.00</h6>
</div>
<!-- Card footer -->
<div class="card-footer text-center p-0">
<!-- Button -->
<a href="#" class="btn btn-sm btn-primary-soft mb-0"><i class="bi bi-cart me-2"></i>Add to cart</a>
</div>
</div>
</div>
<!-- Slider item END -->
</div>
</div>
</div>
<!-- Slider item END -->
</div>
</div>
</section>
<!-- =======================
Related Products END -->
</main>
<!-- **************** MAIN CONTENT END **************** -->
<!-- =======================
Footer START -->
<footer class="bg-dark pt-5">
<div class="container">
<!-- About and Newsletter START -->
<div class="row pt-3 pb-4">
<div class="col-md-3">
<img src="assets/images/logo-footer.svg" alt="footer logo">
</div>
<div class="col-md-5">
<p class="text-muted">The next-generation blog, news, and magazine theme for you to start sharing your stories today! This Bootstrap 5 based theme is ideal for all types of sites that deliver the news.</p>
</div>
<div class="col-md-4">
<!-- Form -->
<form class="row row-cols-lg-auto g-2 align-items-center justify-content-end">
<div class="col-12">
<input type="email" class="form-control" placeholder="Enter your email address">
</div>
<div class="col-12">
<button type="submit" class="btn btn-primary m-0">Subscribe</button>
</div>
<div class="form-text mt-2">By subscribing you agree to our
<a href="#" class="text-decoration-underline text-reset">Privacy Policy</a>
</div>
</form>
</div>
</div>
<!-- About and Newsletter END -->
<!-- Divider -->
<hr>
<!-- Widgets START -->
<div class="row pt-5">
<!-- Footer Widget -->
<div class="col-md-6 col-lg-3 mb-4">
<h5 class="mb-4 text-white">Recent post</h5>
<!-- Item -->
<div class="mb-4 position-relative">
<div><a href="#" class="badge text-bg-danger mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Business</a></div>
<a href="post-single-3.html" class="btn-link text-white fw-normal">Up-coming business bloggers, you need to watch</a>
<ul class="nav nav-divider align-items-center small mt-2 text-muted">
<li class="nav-item position-relative">
<div class="nav-link">by <a href="#" class="stretched-link text-reset btn-link">Dennis</a>
</div>
</li>
<li class="nav-item">Apr 06, 2022</li>
</ul>
</div>
<!-- Item -->
<div class="mb-4 position-relative">
<div><a href="#" class="badge text-bg-info mb-2"><i class="fas fa-circle me-2 small fw-bold"></i>Marketing</a></div>
<a href="post-single-3.html" class="btn-link text-white fw-normal">How did we get here? The history of the business told through tweets</a>
<ul class="nav nav-divider align-items-center small mt-2 text-muted">
<li class="nav-item position-relative">
<div class="nav-link">by <a href="#" class="stretched-link text-reset btn-link">Larry</a>
</div>
</li>
<li class="nav-item">May 29, 2022</li>
</ul>
</div>
</div>
<!-- Footer Widget -->
<div class="col-md-6 col-lg-3 mb-4">
<h5 class="mb-4 text-white">Navigation</h5>
<div class="row">
<div class="col-6">
<ul class="nav flex-column text-primary-hover">
<li class="nav-item"><a class="nav-link pt-0" href="#">Features</a></li>
<li class="nav-item"><a class="nav-link" href="#">Style Guide</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact us</a></li>
<li class="nav-item"><a class="nav-link" href="#">Get Theme</a></li>
<li class="nav-item"><a class="nav-link" href="#">Support</a></li>
<li class="nav-item"><a class="nav-link" href="#">Privacy Policy</a></li>
<li class="nav-item"><a class="nav-link" href="#">Newsletter</a></li>
</ul>
</div>
<div class="col-6">
<ul class="nav flex-column text-primary-hover">
<li class="nav-item"><a class="nav-link pt-0" href="#">News</a></li>
<li class="nav-item"><a class="nav-link" href="#">Career <span class="badge text-bg-danger ms-2">2 Job</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">Technology</a></li>
<li class="nav-item"><a class="nav-link" href="#">Startups</a></li>
<li class="nav-item"><a class="nav-link" href="#">Gadgets</a></li>
<li class="nav-item"><a class="nav-link" href="#">Inspiration</a></li>
</ul>
</div>
</div>
</div>
<!-- Footer Widget -->
<div class="col-sm-6 col-lg-3 mb-4">
<h5 class="mb-4 text-white">Get Regular Updates</h5>
<ul class="nav flex-column text-primary-hover">
<li class="nav-item"><a class="nav-link pt-0" href="#"><i class="fab fa-whatsapp fa-fw me-2"></i>WhatsApp</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fab fa-youtube fa-fw me-2"></i>YouTube</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="far fa-bell fa-fw me-2"></i>Website Notifications</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="far fa-envelope fa-fw me-2"></i>Newsletters</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="fas fa-headphones-alt fa-fw me-2"></i>Podcasts</a></li>
</ul>
</div>
<!-- Footer Widget -->
<div class="col-sm-6 col-lg-3 mb-4">
<h5 class="mb-4 text-white">Our Mobile App</h5>
<p class="text-muted">Download our App and get the latest Breaking News Alerts and latest headlines and daily articles near you.</p>
<div class="row g-2">
<div class="col">
<a href="#"><img class="w-100" src="assets/images/app-store.svg" alt="app-store"></a>
</div>
<div class="col">
<a href="#"><img class="w-100" src="assets/images/google-play.svg" alt="google-play"></a>
</div>
</div>
</div>
</div>
<!-- Widgets END -->
<!-- Hot topics START -->
<div class="row">
<h5 class="mb-2 text-white">Hot topics</h5>
<ul class="list-inline text-primary-hover lh-lg">
<li class="list-inline-item"><a href="#">Covid-19</a></li>
<li class="list-inline-item"><a href="#">Politics</a></li>
<li class="list-inline-item"><a href="#">Entertainment</a></li>
<li class="list-inline-item"><a href="#">Media</a></li>
<li class="list-inline-item"><a href="#">Royalist</a></li>
<li class="list-inline-item"><a href="#">World</a></li>
<li class="list-inline-item"><a href="#">Half Full</a></li>
<li class="list-inline-item"><a href="#">Scouted</a></li>
<li class="list-inline-item"><a href="#">Travel</a></li>
<li class="list-inline-item"><a href="#">Beast Inside</a></li>
<li class="list-inline-item"><a href="#">Crossword</a></li>
<li class="list-inline-item"><a href="#">Newsletters</a></li>
<li class="list-inline-item"><a href="#">Podcasts</a></li>
<li class="list-inline-item"><a href="#">Auction 2022</a></li>
<li class="list-inline-item"><a href="#">Protests</a></li>
<li class="list-inline-item"><a href="#">NewsCyber</a></li>
<li class="list-inline-item"><a href="#">Education</a></li>
<li class="list-inline-item"><a href="#">Sports</a></li>
<li class="list-inline-item"><a href="#">Tech And Auto</a></li>
<li class="list-inline-item"><a href="#">Opinion</a></li>
<li class="list-inline-item"><a href="#">Share Market</a></li>
</ul>
</div>
<!-- Hot topics END -->
</div>
<!-- Footer copyright START -->
<div class="bg-dark-overlay-3 mt-5">
<div class="container">
<div class="row align-items-center justify-content-md-between py-4">
<div class="col-md-6">
<!-- Copyright -->
<div class="text-center text-md-start text-primary-hover text-muted">©2022 <a href="https://www.webestica.com/" class="text-reset btn-link" target="_blank">Webestica</a>. All rights reserved
</div>
</div>
<div class="col-md-6 d-sm-flex align-items-center justify-content-center justify-content-md-end">
<!-- Language switcher -->
<div class="dropup me-0 me-sm-3 mt-3 mt-md-0 text-center text-sm-end">
<a class="dropdown-toggle text-primary-hover" href="#" role="button" id="languageSwitcher" data-bs-toggle="dropdown" aria-expanded="false">
English Edition
</a>
<ul class="dropdown-menu min-w-auto" aria-labelledby="languageSwitcher">
<li><a class="dropdown-item" href="#">English</a></li>
<li><a class="dropdown-item" href="#">German </a></li>
<li><a class="dropdown-item" href="#">French</a></li>
</ul>
</div>
<!-- Links -->
<ul class="nav text-primary-hover text-center text-sm-end justify-content-center justify-content-center mt-3 mt-md-0">
<li class="nav-item"><a class="nav-link" href="#">Terms</a></li>
<li class="nav-item"><a class="nav-link" href="#">Privacy</a></li>
<li class="nav-item"><a class="nav-link pe-0" href="#">Cookies</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Footer copyright END -->
</footer>
<!-- =======================
Footer END -->
<!-- Back to top -->
<div class="back-top"><i class="bi bi-arrow-up-short"></i></div>
<!-- =======================
JS libraries, plugins and custom scripts -->
<!-- Bootstrap JS -->
<script src="assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<!-- Vendors -->
<script src="assets/vendor/tiny-slider/tiny-slider.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.js"></script>
<!-- Template Functions -->
<script src="assets/js/functions.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink