Files
2026-04-28 21:15:09 +03:00

1080 lines
41 KiB
HTML

<!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">
<!-- 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 active" 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 active" 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 hero START -->
<section class="bg-light">
<div class="container">
<div class="row">
<div class="col-12">
<!-- Slider START -->
<div class="tiny-slider tns-nav-line rounded-3">
<div class="tiny-slider-inner"
data-autoplay="true"
data-hoverpause="true"
data-arrow="false"
data-dots="true"
data-items="1">
<!-- Slider Item START -->
<div>
<div class="row g-4 align-items-center">
<div class="col-md-6">
<h2 class="display-5">AB Camera Foldable RC Drone Quadcopter </h2>
<p>For who thoroughly her boy estimating conviction. Removed demands expense account in outward tedious do. Particular way thoroughly unaffected</p>
<!-- Rating star -->
<ul class="list-inline">
<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>
<!-- Buttons & Price -->
<div class="hstack gap-4 align-items-center">
<a href="#" class="btn btn-primary mb-0"><i class="bi bi-cart2 me-2"></i>Add to cart</a>
<h4 class="text-success mb-0">$568.00</h4>
</div>
</div>
<!-- Image -->
<div class="col-md-6">
<img src="assets/images/shop/11.png" alt="">
</div>
</div>
</div>
<!-- Slider Item END -->
<!-- Slider Item START -->
<div>
<div class="row g-4 align-items-center">
<div class="col-md-6">
<h2 class="display-5">Herschel luggage bag in gray</h2>
<p>For who thoroughly her boy estimating conviction. Removed demands expense account in outward tedious do. Particular way thoroughly unaffected</p>
<!-- Buttons & Price -->
<a href="#" class="btn btn-primary mb-0">View this product</a>
<!-- Rating -->
<div class="d-flex mt-4">
<div class="icon-md rounded text-bg-warning"><i class="fas fa-star text-white"></i></div>
<div class="ms-3">
<h5 class="mb-0">4.5 / 5.0</h5>
<small>More than 10K+ USers</small>
</div>
</div>
</div>
<!-- Image -->
<div class="col-md-6">
<img src="assets/images/shop/09.png" alt="">
</div>
</div>
</div>
<!-- Slider Item END -->
<!-- Slider Item START -->
<div>
<div class="row g-4 align-items-center">
<div class="col-md-6">
<h2 class="display-5">Nike Air Jordan V Mid</h2>
<p>For who thoroughly her boy estimating conviction. Removed demands expense account in outward tedious do. Particular way thoroughly unaffected</p>
<!-- Rating star -->
<ul class="list-inline">
<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>
<!-- Buttons & Price -->
<div class="hstack gap-4 align-items-center">
<a href="#" class="btn btn-primary mb-0"><i class="bi bi-cart2 me-2"></i>Add to cart</a>
<h4 class="text-success mb-0">$185.00</h4>
</div>
</div>
<!-- Image -->
<div class="col-md-6">
<img src="assets/images/shop/10.png" alt="">
</div>
</div>
</div>
<!-- Slider Item END -->
</div>
</div>
<!-- Slider END -->
</div>
</div>
</div>
</section>
<!-- =======================
Main hero END -->
<!-- =======================
Features END -->
<section>
<div class="container">
<div class="row g-4 g-xl-5">
<!-- Title -->
<div class="col-sm-6 col-lg-3">
<div class="d-flex align-items-center">
<div class="icon-lg fs-4 text-success bg-success bg-opacity-10 rounded flex-shrink-0"> <i class="bi bi-piggy-bank"></i> </div>
<h6 class="mb-0 ms-3">Saving Your Money to be useful</h6>
</div>
</div>
<!-- Title -->
<div class="col-sm-6 col-lg-3">
<div class="d-flex align-items-center">
<div class="icon-lg fs-4 text-warning bg-warning bg-opacity-15 rounded flex-shrink-0"> <i class="bi bi-truck"></i> </div>
<h6 class="mb-0 ms-3">Fast delivery to save your time</h6>
</div>
</div>
<!-- Title -->
<div class="col-sm-6 col-lg-3">
<div class="d-flex align-items-center">
<div class="icon-lg fs-4 text-danger bg-danger bg-opacity-10 rounded flex-shrink-0"> <i class="bi bi-lightning-charge"></i> </div>
<h6 class="mb-0 ms-3">You can order very quickly</h6>
</div>
</div>
<!-- Title -->
<div class="col-sm-6 col-lg-3">
<div class="d-flex align-items-center">
<div class="icon-lg fs-4 text-info bg-info bg-opacity-10 rounded flex-shrink-0"> <i class="bi bi-emoji-smile"></i> </div>
<h6 class="mb-0 ms-3">Customer Satisfaction is more important</h6>
</div>
</div>
</div>
</div>
</section>
<!-- =======================
Features END -->
<!-- =======================
Category START -->
<section class="pt-0 pt-md-5">
<div class="container">
<!-- Title -->
<div class="row">
<div class="col-12">
<!-- Title -->
<div class="d-flex justify-content-between align-items-center mb-4">
<h3 class="m-0">Select Categories</h3>
<a href="#" class="text-body small"><u>View all</u></a>
</div>
<!-- Slider -->
<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-arrow="true"
data-dots="false"
data-items-xl="5"
data-items-lg="4"
data-items-md="3"
data-items-sm="2"
data-items-xs="2"
>
<!-- Category item -->
<div>
<div class="card bg-transparent">
<img class="card-img" src="assets/images/shop/01.jpg" alt="card image">
<div class="card-body ps-0">
<h5 class="mb-0"><a href="#" class="stretched-link">Camera Gear</a></h5>
</div>
</div>
</div>
<!-- Category item -->
<div>
<div class="card bg-transparent">
<img class="card-img" src="assets/images/shop/02.jpg" alt="card image">
<div class="card-body ps-0">
<h5 class="mb-0"><a href="#" class="stretched-link">Electronics Gear</a></h5>
</div>
</div>
</div>
<!-- Category item -->
<div>
<div class="card bg-transparent">
<img class="card-img" src="assets/images/shop/03.jpg" alt="card image">
<div class="card-body ps-0">
<h5 class="mb-0"><a href="#" class="stretched-link">Basic Travel Gear</a></h5>
</div>
</div>
</div>
<!-- Category item -->
<div>
<div class="card bg-transparent">
<img class="card-img" src="assets/images/shop/04.jpg" alt="card image">
<div class="card-body ps-0">
<h5 class="mb-0"><a href="#" class="stretched-link">Guide Book</a></h5>
</div>
</div>
</div>
<!-- Category item -->
<div>
<div class="card bg-transparent">
<img class="card-img" src="assets/images/shop/05.jpg" alt="card image">
<div class="card-body ps-0">
<h5 class="mb-0"><a href="#" class="stretched-link">Photo Presets</a></h5>
</div>
</div>
</div>
<!-- Category item -->
<div>
<div class="card bg-transparent">
<img class="card-img" src="assets/images/shop/06.jpg" alt="card image">
<div class="card-body ps-0">
<h5 class="mb-0"><a href="#" class="stretched-link">Hiking & Campaign</a></h5>
</div>
</div>
</div>
</div>
</div> <!-- Slider END -->
</div>
</div>
</div>
</section>
<!-- =======================
Category END -->
<!-- =======================
Best selling product START -->
<section class="pt-0 pt-md-5">
<div class="container">
<!-- Title -->
<div class="d-sm-flex justify-content-between align-items-center mb-4">
<h2 class="m-0">Our Best Selling Products</h2>
<a href="#" class="text-body small"><u>View all</u></a>
</div>
<!-- Product START -->
<div class="row g-4">
<!-- Product item START -->
<div class="col-sm-6 col-md-4 col-lg-3">
<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>
<!-- Product item END -->
<!-- Product item START -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border p-3 h-100">
<!-- Image -->
<a href="shop-detail.html"><img class="card-img" src="assets/images/shop/03.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">Plain Colored T-Shirts</a></h5>
<h6 class="mb-0 text-success">$85.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>
<!-- Product item END -->
<!-- Product item START -->
<div class="col-sm-6 col-md-4 col-lg-3">
<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>
<!-- Product item END -->
<!-- Product item START -->
<div class="col-sm-6 col-md-4 col-lg-3">
<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>
<!-- Product item END -->
<!-- Product item START -->
<div class="col-sm-6 col-md-4 col-lg-3">
<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>
<!-- Product item END -->
<!-- Product item START -->
<div class="col-sm-6 col-md-4 col-lg-3">
<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>
<!-- Product item END -->
<!-- Product item START -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border p-3 h-100">
<!-- Image -->
<a href="shop-detail.html"><img class="card-img" src="assets/images/shop/05.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="#">Sigma DN Lens</a></h5>
<h6 class="mb-0 text-success">$70.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>
<!-- Product item END -->
<!-- Product item START -->
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border p-3 h-100">
<!-- Image -->
<a href="shop-detail.html"><img class="card-img" src="assets/images/shop/01.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">2 Person Tent</a></h5>
<h6 class="mb-0 text-success">$250.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>
<!-- Product item END -->
</div>
<!-- Product END -->
</div>
</section>
<!-- =======================
Best selling product END -->
<!-- =======================
Adv START -->
<section class="pt-0 pt-md-5">
<div class="container">
<div class="row">
<div class="col">
<a href="#" class="d-block card-img-flash">
<img src="assets/images/adv-3.png" alt="">
</a>
<small class="text-end d-block mt-1">Advertisement</small>
</div>
</div>
</div>
</section>
<!-- =======================
Adv END -->
<!-- =======================
Presets START -->
<section class="pt-0 pt-md-5">
<div class="container">
<div class="row g-4">
<!-- Title -->
<div class="col-md-3">
<h2>Amazing Photo Presets</h2>
<p>Drawings offended yet answered Jennings perceive laughing six did far.</p>
<a href="#" class="btn btn-dark mb-0">View all preset</a>
</div>
<!-- Slider item START -->
<div class="col-md-9">
<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="3"
data-items-lg="2"
data-items-xs="1"
>
<!-- Slider item START -->
<div>
<div class="card border">
<!-- Image -->
<div class="position-relative">
<img class="card-img-top" src="assets/images/shop/14.jpg" alt="">
<div class="card-img-overlay d-flex">
<div class="w-100 mt-auto">
<span class="badge fs-6 text-bg-success">$25.00</span>
</div>
</div>
</div>
<!-- Card body -->
<div class="card-body">
<h5 class="card-title"><a href="shop-detail.html" class="stretched-link">5x Urban Moody Presets</a></h5>
<p class="mb-3">Rooms oh fully Points afraid but may end law lasted.</p>
<h6 class="mb-0"><i class="bi bi-patch-check text-primary me-2"></i>For Mobile & Computer</h6>
</div>
<!-- Card footer -->
<div class="card-footer pb-3 d-grid">
<a href="#" class="btn btn-sm btn-dark mb-0">See Presets</a>
</div>
</div>
</div>
<!-- Slider item END -->
<!-- Slider item START -->
<div>
<div class="card border">
<!-- Image -->
<div class="position-relative">
<img class="card-img-top" src="assets/images/shop/15.jpg" alt="">
<div class="card-img-overlay d-flex">
<div class="w-100 mt-auto">
<span class="badge fs-6 text-bg-success">$30.00</span>
</div>
</div>
</div>
<!-- Card body -->
<div class="card-body">
<h5 class="card-title"><a href="shop-detail.html" class="stretched-link">6x Green Moody Presets</a></h5>
<p class="mb-3"> Luckily cheered colonel I do we enabled.</p>
<h6 class="mb-0"><i class="bi bi-patch-check text-primary me-2"></i>For Mobile & Computer</h6>
</div>
<!-- Card footer -->
<div class="card-footer pb-3 d-grid">
<a href="#" class="btn btn-sm btn-dark mb-0">See Presets</a>
</div>
</div>
</div>
<!-- Slider item END -->
<!-- Slider item START -->
<div>
<div class="card border">
<!-- Image -->
<div class="position-relative">
<img class="card-img-top" src="assets/images/shop/16.jpg" alt="">
<div class="card-img-overlay d-flex">
<div class="w-100 mt-auto">
<span class="badge fs-6 text-bg-success">Free</span>
</div>
</div>
</div>
<!-- Card body -->
<div class="card-body">
<h5 class="card-title"><a href="shop-detail.html" class="stretched-link">Polaroid Photo Print</a></h5>
<p class="mb-3">Was out laughter raptures returned outweigh.</p>
<h6 class="mb-0"><i class="bi bi-patch-check text-primary me-2"></i>For Mobile Only</h6>
</div>
<!-- Card footer -->
<div class="card-footer pb-3 d-grid">
<a href="#" class="btn btn-sm btn-dark mb-0">See Presets</a>
</div>
</div>
</div>
<!-- Slider item END -->
<!-- Slider item START -->
<div>
<div class="card border">
<!-- Image -->
<div class="position-relative">
<img class="card-img-top" src="assets/images/shop/17.jpg" alt="">
<div class="card-img-overlay d-flex">
<div class="w-100 mt-auto">
<span class="badge fs-6 text-bg-success">$25.00</span>
</div>
</div>
</div>
<!-- Card body -->
<div class="card-body">
<h5 class="card-title"><a href="shop-detail.html" class="stretched-link">Earthy tones Video luts</a></h5>
<p class="mb-3">Rooms oh fully Points afraid but may end law lasted.</p>
<h6 class="mb-0"><i class="bi bi-patch-check text-primary me-2"></i>For Mobile & Computer</h6>
</div>
<!-- Card footer -->
<div class="card-footer pb-3 d-grid">
<a href="#" class="btn btn-sm btn-dark mb-0">See Presets</a>
</div>
</div>
</div>
<!-- Slider item END -->
</div>
</div>
</div>
<!-- Slider item END -->
</div>
</div>
</section>
<!-- =======================
Presets 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>
<!-- Template Functions -->
<script src="assets/js/functions.js"></script>
</body>
</html>