Ümit Tunç
1180 lines
106 KiB
HTML
1180 lines
106 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
|
||
<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/shop2 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:00:14 GMT -->
|
||
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
|
||
<meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
|
||
<meta name="author" content="elemis">
|
||
<title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
|
||
<link rel="shortcut icon" href="../assets/img/favicon.png">
|
||
<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
|
||
<link rel="stylesheet" href="../assets/css/plugins.css">
|
||
<link rel="stylesheet" href="style.css">
|
||
<style>
|
||
.tooltip {
|
||
background: transparent !important;
|
||
padding: 0 !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="grow shrink-0">
|
||
<header class="relative wrapper bg-soft-primary !bg-[#edf2fc]">
|
||
<nav class="navbar navbar-expand-lg center-nav navbar-light navbar-bg-light">
|
||
<div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
|
||
<div class="navbar-brand w-full">
|
||
<a href='index.html'>
|
||
<img src="../assets/img/truncgil-yatay.svg" alt="image">
|
||
</a>
|
||
</div>
|
||
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
|
||
<div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
|
||
|
||
|
||
</div>
|
||
<div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item dropdown dropdown-mega">
|
||
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
|
||
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
|
||
<li class="mega-menu-content mega-menu-scroll">
|
||
<ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo1.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 1</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo2.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 2</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo3.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 3</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo4.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 4</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo5.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 5</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo6.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 6</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo7.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 7</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo8.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 8</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo9.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 9</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo10.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 10</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo11.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 11</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo12.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 12</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo13.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 13</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo14.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 14</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo15.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 15</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo16.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 16</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo17.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 17</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo18.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 18</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo19.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 19</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo20.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 20</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo21.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 21</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo22.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 22</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo23.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 23</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo24.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 24</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo25.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 25</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo26.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 26</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo27.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 27</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo28.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 28</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo29.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 29</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo30.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 30</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo31.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 31</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo32.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 32</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo33.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 33</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo34.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 34</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<!--/.row -->
|
||
<span class="hidden xl:!flex lg:!flex"><i class="uil uil-direction before:content-['\ea93']"></i><strong>Scroll to view more</strong></span>
|
||
</li>
|
||
<!--/.mega-menu-content-->
|
||
</ul>
|
||
<!--/.dropdown-menu -->
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item' href='services.html'>Services I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item' href='services2.html'>Services II</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item' href='about.html'>About I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item' href='about2.html'>About II</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item' href='shop.html'>Shop I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item' href='shop2.html'>Shop II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item' href='shop-product.html'>Product Page</a></li>
|
||
<li class="nav-item"><a class='dropdown-item' href='shop-cart.html'>Shopping Cart</a></li>
|
||
<li class="nav-item"><a class='dropdown-item' href='shop-checkout.html'>Checkout</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item' href='contact.html'>Contact I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item' href='contact2.html'>Contact II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item' href='contact3.html'>Contact III</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item' href='career.html'>Job Listing I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item' href='career2.html'>Job Listing II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item' href='career-job.html'>Job Description</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item' href='404.html'>404 Not Found</a></li>
|
||
<li class="nav-item"><a class='dropdown-item' href='page-loader.html'>Page Loader</a></li>
|
||
<li class="nav-item"><a class='dropdown-item' href='signin.html'>Sign In I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item' href='signin2.html'>Sign In II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item' href='signup.html'>Sign Up I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item' href='signup2.html'>Sign Up II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item' href='terms.html'>Terms</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item"><a class='dropdown-item' href='pricing.html'>Pricing</a></li>
|
||
<li class="nav-item"><a class='dropdown-item' href='onepage.html'>One Page</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
|
||
<div class="dropdown-menu dropdown-lg">
|
||
<div class="dropdown-lg-content">
|
||
<div>
|
||
<h6 class="dropdown-header">Project Pages</h6>
|
||
<ul class="pl-0 list-none">
|
||
<li><a class='dropdown-item' href='projects.html'>Projects I</a></li>
|
||
<li><a class='dropdown-item' href='projects2.html'>Projects II</a></li>
|
||
<li><a class='dropdown-item' href='projects3.html'>Projects III</a></li>
|
||
<li><a class='dropdown-item' href='projects4.html'>Projects IV</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- /.column -->
|
||
<div>
|
||
<h6 class="dropdown-header">Single Projects</h6>
|
||
<ul class="pl-0 list-none">
|
||
<li><a class='dropdown-item' href='single-project.html'>Single Project I</a></li>
|
||
<li><a class='dropdown-item' href='single-project2.html'>Single Project II</a></li>
|
||
<li><a class='dropdown-item' href='single-project3.html'>Single Project III</a></li>
|
||
<li><a class='dropdown-item' href='single-project4.html'>Single Project IV</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- /.column -->
|
||
</div>
|
||
<!-- /auto-column -->
|
||
</div>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item' href='blog.html'>Blog without Sidebar</a></li>
|
||
<li class="nav-item"><a class='dropdown-item' href='blog2.html'>Blog with Sidebar</a></li>
|
||
<li class="nav-item"><a class='dropdown-item' href='blog3.html'>Blog with Left Sidebar</a></li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item' href='blog-post.html'>Post without Sidebar</a></li>
|
||
<li class="nav-item"><a class='dropdown-item' href='blog-post2.html'>Post with Sidebar</a></li>
|
||
<li class="nav-item"><a class='dropdown-item' href='blog-post3.html'>Post with Left Sidebar</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item dropdown dropdown-mega">
|
||
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
|
||
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
|
||
<li class="mega-menu-content">
|
||
<ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
|
||
<span>About</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
|
||
<span>Blog</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
|
||
<span>Call to Action</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
|
||
<span>Clients</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
|
||
<span>Contact</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
|
||
<span>Facts</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
|
||
<span>FAQ</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
|
||
<span>Features</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
|
||
<span>Footer</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
|
||
<span>Hero</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
|
||
<span>Misc</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
|
||
<span>Navbar</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
|
||
<span>Portfolio</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
|
||
<span>Pricing</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
|
||
<span>Process</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
|
||
<span>Team</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
|
||
<span>Testimonials</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<!--/.row -->
|
||
</li>
|
||
<!--/.mega-menu-content-->
|
||
</ul>
|
||
<!--/.dropdown-menu -->
|
||
</li>
|
||
<li class="nav-item dropdown dropdown-mega">
|
||
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</a>
|
||
<ul class="dropdown-menu mega-menu">
|
||
<li class="mega-menu-content">
|
||
<div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
|
||
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full">
|
||
<h6 class="dropdown-header">Usage</h6>
|
||
<ul class="pl-0 list-none xl:columns-2 lg:columns-2 xl:pb-1 lg:pb-1">
|
||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/index.html'>Get Started</a></li>
|
||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/forms.html'>Forms</a></li>
|
||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/faq.html'>FAQ</a></li>
|
||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/changelog.html'>Changelog</a></li>
|
||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/credits.html'>Credits</a></li>
|
||
</ul>
|
||
<h6 class="dropdown-header xl:!mt-6 lg:!mt-6">Styleguide</h6>
|
||
<ul class="pl-0 list-none xl:columns-2 lg:columns-2 ">
|
||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/colors.html'>Colors</a></li>
|
||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/fonts.html'>Fonts</a></li>
|
||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-svg.html'>SVG Icons</a></li>
|
||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/icons-font.html'>Font Icons</a></li>
|
||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/illustrations.html'>Illustrations</a></li>
|
||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/backgrounds.html'>Backgrounds</a></li>
|
||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='docs/styleguide/misc.html'>Misc</a></li>
|
||
</ul>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] max-w-full xl:border-l-[rgba(164,174,198,0.2)] xl:border-l xl:border-solid lg:border-l-[rgba(164,174,198,0.2)] lg:border-l lg:border-solid">
|
||
<h6 class="dropdown-header">Elements</h6>
|
||
<ul class="pl-0 list-none xl:columns-3 lg:columns-3 ">
|
||
<li><a class='dropdown-item' href='docs/elements/accordion.html'>Accordion</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/alerts.html'>Alerts</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/animations.html'>Animations</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/avatars.html'>Avatars</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/background.html'>Background</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/badges.html'>Badges</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/buttons.html'>Buttons</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/card.html'>Card</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/carousel.html'>Carousel</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/dividers.html'>Dividers</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/form-elements.html'>Form Elements</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/image-hover.html'>Image Hover</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/image-mask.html'>Image Mask</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/lightbox.html'>Lightbox</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/player.html'>Media Player</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/modal.html'>Modal</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/pagination.html'>Pagination</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/progressbar.html'>Progressbar</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/shadows.html'>Shadows</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/shapes.html'>Shapes</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/tables.html'>Tables</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/tabs.html'>Tabs</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/text-animations.html'>Text Animations</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/text-highlight.html'>Text Highlight</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/tiles.html'>Tiles</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
|
||
<li><a class='dropdown-item' href='docs/elements/typography.html'>Typography</a></li>
|
||
</ul>
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
</li>
|
||
<!--/.mega-menu-content-->
|
||
</ul>
|
||
<!--/.dropdown-menu -->
|
||
</li>
|
||
</ul>
|
||
<!-- /.navbar-nav -->
|
||
<div class="offcanvas-footer xl:!hidden lg:!hidden">
|
||
<div>
|
||
<a href="mailto:first.last@email.com" class="link-inverse">info@truncgil.com</a>
|
||
<br> 00 (123) 456 78 90 <br>
|
||
<nav class="nav social social-white !mt-4">
|
||
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
|
||
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
|
||
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
|
||
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
|
||
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
|
||
</nav>
|
||
<!-- /.social -->
|
||
</div>
|
||
</div>
|
||
<!-- /.offcanvas-footer -->
|
||
</div>
|
||
<!-- /.offcanvas-body -->
|
||
</div>
|
||
<!-- /.navbar-collapse -->
|
||
<div class="navbar-other w-full !flex !ml-auto">
|
||
<ul class="navbar-nav !flex-row !items-center !ml-auto">
|
||
<li class="nav-item"><a class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-search"><i class="uil uil-search before:content-['\eca5'] !text-[1.1rem]"></i></a></li>
|
||
<li class="nav-item !ml-[.8rem]">
|
||
<a class="nav-link !relative !flex !flex-row !items-center" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-cart">
|
||
<i class="uil uil-shopping-cart !text-[1.1rem] before:content-['\ecbd']"></i>
|
||
<span class="badge badge-cart bg-[#3f78e0] w-[0.9rem] h-[0.9rem] !flex items-center justify-center !text-[0.55rem] p-0 rounded-[100%] !bg-[rgba(63,120,224)] opacity-100">3</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item xl:!hidden lg:!hidden">
|
||
<button class="hamburger offcanvas-nav-btn"><span></span></button>
|
||
</li>
|
||
</ul>
|
||
<!-- /.navbar-nav -->
|
||
</div>
|
||
<!-- /.navbar-other -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</nav>
|
||
<!-- /.navbar -->
|
||
<div class="offcanvas offcanvas-end bg-light" id="offcanvas-cart" data-bs-scroll="true">
|
||
<div class="offcanvas-header flex items-center justify-between p-[1.5rem]">
|
||
<h3 class="!mb-0">Your Cart</h3>
|
||
<button type="button" class="btn-close m-0 p-0 !mr-[-.5rem] leading-none !text-[#343f52] transition-all duration-[0.2s] ease-in-out border-0 motion-reduce:transition-none before:text-[1.05rem] before:content-['\ed3b'] before:w-[1.8rem] before:h-[1.8rem] before:leading-[1.8rem] before:shadow-none before:transition-[background] before:duration-[0.2s] before:ease-in-out before:!flex before:justify-center before:items-center before:m-0 before:p-0 before:rounded-[100%] hover:no-underline bg-inherit before:bg-[rgba(0,0,0,.08)] before:font-Unicons hover:before:bg-[rgba(0,0,0,.11)]
|
||
" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||
</div>
|
||
<div class="offcanvas-body flex flex-col">
|
||
<div class="shopping-cart">
|
||
<div class="shopping-cart-item flex justify-between !mb-4">
|
||
<div class="flex flex-row">
|
||
<figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth1.jpg" alt="image"></a></figure>
|
||
<div class="!w-full !ml-[1rem]">
|
||
<h3 class="post-title !text-[.8rem] !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Nike Air Sneakers</a></h3>
|
||
<p class="price !text-[.7rem]"><del class="!text-[#9499a3]"><span class="amount">$55.00</span></del> <ins class="no-underline !text-[#e2626b]"><span class="amount">$45.99</span></ins></p>
|
||
<div class="form-select-wrapper">
|
||
<select class="form-select !w-auto !min-w-[2.5rem] !bg-[right_0.4rem_center] !px-2 !py-[0.2rem] !text-[.7rem] !rounded-[.4rem]">
|
||
<option value="1" selected>1</option>
|
||
<option value="2">2</option>
|
||
<option value="3">3</option>
|
||
<option value="4">4</option>
|
||
<option value="5">5</option>
|
||
</select>
|
||
</div>
|
||
<!--/.form-select-wrapper -->
|
||
</div>
|
||
</div>
|
||
<div class="!ml-[.5rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]"><i class="uil uil-trash-alt before:content-['\ed4b']"></i></a></div>
|
||
</div>
|
||
<!--/.shopping-cart-item -->
|
||
<div class="shopping-cart-item flex justify-between !mb-4">
|
||
<div class="flex flex-row">
|
||
<figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth2.jpg" alt="image"></a></figure>
|
||
<div class="!w-full !ml-[1rem]">
|
||
<h3 class="post-title !text-[.8rem] !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Colorful Sneakers</a></h3>
|
||
<p class="price !text-[.7rem]"><span class="amount">$45.00</span></p>
|
||
<div class="form-select-wrapper">
|
||
<select class="form-select !w-auto !min-w-[2.5rem] !bg-[right_0.4rem_center] !px-2 !py-[0.2rem] !text-[.7rem] !rounded-[.4rem]">
|
||
<option value="1" selected>1</option>
|
||
<option value="2">2</option>
|
||
<option value="3">3</option>
|
||
<option value="4">4</option>
|
||
<option value="5">5</option>
|
||
</select>
|
||
</div>
|
||
<!--/.form-select-wrapper -->
|
||
</div>
|
||
</div>
|
||
<div class="!ml-[.5rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]"><i class="uil uil-trash-alt before:content-['\ed4b']"></i></a></div>
|
||
</div>
|
||
<!--/.shopping-cart-item -->
|
||
<div class="shopping-cart-item flex justify-between !mb-4">
|
||
<div class="flex flex-row">
|
||
<figure class="!rounded-[.4rem] !w-[7rem]"><a href='shop-product.html'><img class="!rounded-[.4rem]" src="../assets/img/photos/sth3.jpg" alt="image"></a></figure>
|
||
<div class="!w-full !ml-[1rem]">
|
||
<h3 class="post-title !text-[.8rem] !leading-[1.35] !mb-1"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Polaroid Camera</a></h3>
|
||
<p class="price !text-[.7rem]"><span class="amount">$45.00</span></p>
|
||
<div class="form-select-wrapper">
|
||
<select class="form-select !w-auto !min-w-[2.5rem] !bg-[right_0.4rem_center] !px-2 !py-[0.2rem] !text-[.7rem] !rounded-[.4rem]">
|
||
<option value="1" selected>1</option>
|
||
<option value="2">2</option>
|
||
<option value="3">3</option>
|
||
<option value="4">4</option>
|
||
<option value="5">5</option>
|
||
</select>
|
||
</div>
|
||
<!--/.form-select-wrapper -->
|
||
</div>
|
||
</div>
|
||
<div class="!ml-[.5rem]"><a href="#" class="!text-[#343f52] hover:!text-[#3f78e0]"><i class="uil uil-trash-alt before:content-['\ed4b']"></i></a></div>
|
||
</div>
|
||
<!--/.shopping-cart-item -->
|
||
</div>
|
||
<!-- /.shopping-cart-->
|
||
<div class="offcanvas-footer flex-col text-center">
|
||
<div class="flex !w-full justify-between !mb-4">
|
||
<span>Subtotal:</span>
|
||
<span class="h6 !mb-0">$135.99</span>
|
||
</div>
|
||
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-icon btn-icon-start rounded !w-full !mb-4 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"><i class="uil uil-credit-card !text-[.9rem] !mr-[0.3rem] before:content-['\ea74']"></i> Checkout</a>
|
||
<p class="!text-[.7rem] !mb-0">Free shipping on all orders over $50</p>
|
||
</div>
|
||
<!-- /.offcanvas-footer-->
|
||
</div>
|
||
<!-- /.offcanvas-body -->
|
||
</div>
|
||
<!-- /.offcanvas -->
|
||
|
||
<div class="offcanvas offcanvas-top bg-light" id="offcanvas-search" data-bs-scroll="true">
|
||
<div class="container flex !flex-row py-6">
|
||
<form class="search-form relative before:content-['\eca5'] before:block before:absolute before:-translate-y-2/4 before:text-[1rem] before:!text-[#343f52] before:z-[1] before:right-auto before:top-2/4 before:font-Unicons w-full before:left-0 focus:!outline-offset-0 ">
|
||
<input id="search-form1" type="text" class="form-control text-[0.8rem] !shadow-none !pl-[1.75rem] !pr-[.75rem] border-0 bg-inherit m-0 block w-full font-medium !leading-[1.7] !text-[#60697b] px-4 py-[0.6rem] rounded-[0.4rem] focus:!outline-offset-0 " placeholder="Type keyword and hit enter">
|
||
</form>
|
||
<button type="button" class="btn-close leading-none !text-[#343f52] transition-all duration-[0.2s] ease-in-out p-0 border-0 motion-reduce:transition-none before:text-[1.05rem] before:content-['\ed3b'] before:w-[1.8rem] before:h-[1.8rem] before:leading-[1.8rem] before:shadow-none before:transition-[background] before:duration-[0.2s] before:ease-in-out before:!flex before:justify-center before:items-center before:m-0 before:p-0 before:rounded-[100%] hover:no-underline bg-inherit before:bg-[rgba(0,0,0,.08)] before:font-Unicons hover:before:bg-[rgba(0,0,0,.11)] " data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||
</div>
|
||
<!-- /.container -->
|
||
</div>
|
||
<!-- /.offcanvas -->
|
||
</header>
|
||
<!-- /header -->
|
||
<div class="wrapper bg-[rgba(246,247,249,1)] ">
|
||
<div class="container py-3 xl:!py-5 lg:!py-5 md:!py-5">
|
||
<nav class="inline-block" aria-label="breadcrumb">
|
||
<ol class="breadcrumb flex flex-wrap bg-[none] p-0 !rounded-none list-none !mb-0">
|
||
<li class="breadcrumb-item flex !text-[#60697b]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Home</a></li>
|
||
<li class="breadcrumb-item flex !text-[#60697b] !pl-2 before:font-normal before:!flex before:items-center before:text-[rgba(96,105,123,0.35)] before:content-['\e931'] before:text-[0.9rem] before:-mt-px before:!pr-2 before:font-Unicons active" aria-current="page">Shop</li>
|
||
</ol>
|
||
</nav>
|
||
<!-- /nav -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</div>
|
||
<!-- /section -->
|
||
<section class="wrapper !bg-[#ffffff]">
|
||
<div class="container pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24 pt-14">
|
||
<div class="flex flex-wrap mx-[-15px] !mt-[-50px]">
|
||
<div class="xl:w-9/12 lg:w-9/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!order-2 lg:!order-2 !mt-[50px]">
|
||
<div class="flex flex-wrap mx-[-15px] items-center !mb-10 !relative z-[1]">
|
||
<div class="md:w-7/12 lg:w-7/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!pr-40">
|
||
<h2 class="!text-[calc(1.265rem_+_0.18vw)] font-bold xl:!text-[1.4rem] !leading-[1.35] !mb-1">New Arrivals</h2>
|
||
<p class="!mb-0 !text-[#aab0bc]">Showing 1–9 of 30 results</p>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="md:w-5/12 lg:w-5/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-auto lg:!ml-auto md:!ml-auto xl:!text-right lg:!text-right md:!text-right !mt-5 xl:!mt-0 lg:!mt-0 md:!mt-0">
|
||
<div class="form-select-wrapper">
|
||
<select class="form-select">
|
||
<option value="popularity">Sort by popularity</option>
|
||
<option value="rating">Sort by average rating</option>
|
||
<option value="newness">Sort by newness</option>
|
||
<option value="price: low to high">Sort by price: low to high</option>
|
||
<option value="price: high to low">Sort by price: high to low</option>
|
||
</select>
|
||
</div>
|
||
<!--/.form-select-wrapper -->
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
<div class="itemgrid grid-view projects-masonry shop !mb-16">
|
||
<div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] xl:!mt-[-80px] lg:!mt-[-80px] md:!mt-[-80px] isotope">
|
||
<div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
|
||
<figure class="!rounded-[.4rem] !mb-6">
|
||
<img src="../assets/img/photos/sh1.jpg" alt="image">
|
||
<a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
|
||
<a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
|
||
<a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
|
||
<span class=" flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] !bg-[rgba(209,107,134)] !opacity-100 !text-white !w-[2.5rem] !h-[2.5rem] absolute uppercase text-[0.65rem]" style="top: 1rem; left: 1rem;"><span>Sale!</span></span>
|
||
</figure>
|
||
<div class="post-header">
|
||
<div class="flex flex-row items-center justify-between !mb-2">
|
||
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#9499a3] !mb-0">Shoes</div>
|
||
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five"></span>
|
||
</div>
|
||
<h2 class="post-title h3 text-[1.1rem]"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Nike Air Sneakers</a></h2>
|
||
<p class="price !m-0"><del class="!text-[#9499a3]"><span class="amount">$55.00</span></del> <ins class="no-underline !text-[#e2626b]"><span class="amount">$45.00</span></ins></p>
|
||
</div>
|
||
<!-- /.post-header -->
|
||
</div>
|
||
<!-- /.item -->
|
||
<div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
|
||
<figure class="!rounded-[.4rem] !mb-6">
|
||
<img src="../assets/img/photos/sh2.jpg" alt="image">
|
||
<a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
|
||
<a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
|
||
<a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
|
||
</figure>
|
||
<div class="post-header">
|
||
<div class="flex flex-row items-center justify-between !mb-2">
|
||
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#9499a3] !mb-0">Electronics</div>
|
||
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 four"></span>
|
||
</div>
|
||
<h2 class="post-title h3 text-[1.1rem]"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Apple Watch</a></h2>
|
||
<p class="price !m-0"><span class="amount">$55.00</span></p>
|
||
</div>
|
||
<!-- /.post-header -->
|
||
</div>
|
||
<!-- /.item -->
|
||
<div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
|
||
<figure class="!rounded-[.4rem] !mb-6">
|
||
<img src="../assets/img/photos/sh3.jpg" alt="image">
|
||
<a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
|
||
<a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
|
||
<a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
|
||
<span class=" flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] bg-[rgba(84,168,199)] opacity-100 !text-white !w-[2.5rem] !h-[2.5rem] absolute uppercase text-[0.65rem]" style="top: 1rem; left: 1rem;"><span>New!</span></span>
|
||
</figure>
|
||
<div class="post-header">
|
||
<div class="flex flex-row items-center justify-between !mb-2">
|
||
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#9499a3] !mb-0">Electronics</div>
|
||
</div>
|
||
<h2 class="post-title h3 text-[1.1rem]"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Headphones</a></h2>
|
||
<p class="price !m-0"><span class="amount">$55.00</span></p>
|
||
</div>
|
||
<!-- /.post-header -->
|
||
</div>
|
||
<!-- /.item -->
|
||
<div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
|
||
<figure class="!rounded-[.4rem] !mb-6">
|
||
<img src="../assets/img/photos/sh4.jpg" alt="image">
|
||
<a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
|
||
<a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
|
||
<a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
|
||
</figure>
|
||
<div class="post-header">
|
||
<div class="flex flex-row items-center justify-between !mb-2">
|
||
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#9499a3] !mb-0">Shoes</div>
|
||
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 three"></span>
|
||
</div>
|
||
<h2 class="post-title h3 text-[1.1rem]"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Colorful Sneakers</a></h2>
|
||
<p class="price !m-0"><span class="amount">$55.00</span></p>
|
||
</div>
|
||
<!-- /.post-header -->
|
||
</div>
|
||
<!-- /.item -->
|
||
<div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
|
||
<figure class="!rounded-[.4rem] !mb-6">
|
||
<img src="../assets/img/photos/sh5.jpg" alt="image">
|
||
<a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
|
||
<a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
|
||
<a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
|
||
</figure>
|
||
<div class="post-header">
|
||
<div class="flex flex-row items-center justify-between !mb-2">
|
||
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#9499a3] !mb-0">Electronics</div>
|
||
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 one"></span>
|
||
</div>
|
||
<h2 class="post-title h3 text-[1.1rem]"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Polaroid Camera</a></h2>
|
||
<p class="price !m-0"><span class="amount">$55.00</span></p>
|
||
</div>
|
||
<!-- /.post-header -->
|
||
</div>
|
||
<!-- /.item -->
|
||
<div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
|
||
<figure class="!rounded-[.4rem] !mb-6">
|
||
<img src="../assets/img/photos/sh6.jpg" alt="image">
|
||
<a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
|
||
<a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
|
||
<a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
|
||
</figure>
|
||
<div class="post-header">
|
||
<div class="flex flex-row items-center justify-between !mb-2">
|
||
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#9499a3] !mb-0">Cosmetics</div>
|
||
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 two"></span>
|
||
</div>
|
||
<h2 class="post-title h3 text-[1.1rem]"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Curology Cleanser</a></h2>
|
||
<p class="price !m-0"><span class="amount">$55.00</span></p>
|
||
</div>
|
||
<!-- /.post-header -->
|
||
</div>
|
||
<!-- /.item -->
|
||
<div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
|
||
<figure class="!rounded-[.4rem] !mb-6">
|
||
<img src="../assets/img/photos/sh7.jpg" alt="image">
|
||
<a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
|
||
<a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
|
||
<a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
|
||
</figure>
|
||
<div class="post-header">
|
||
<div class="flex flex-row items-center justify-between !mb-2">
|
||
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#9499a3] !mb-0">Home & Kitchen</div>
|
||
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 four"></span>
|
||
</div>
|
||
<h2 class="post-title h3 text-[1.1rem]"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Q&Q Wall Clock</a></h2>
|
||
<p class="price !m-0"><span class="amount">$55.00</span></p>
|
||
</div>
|
||
<!-- /.post-header -->
|
||
</div>
|
||
<!-- /.item -->
|
||
<div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
|
||
<figure class="!rounded-[.4rem] !mb-6">
|
||
<img src="../assets/img/photos/sh8.jpg" alt="image">
|
||
<a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
|
||
<a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
|
||
<a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
|
||
</figure>
|
||
<div class="post-header">
|
||
<div class="flex flex-row items-center justify-between !mb-2">
|
||
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#9499a3] !mb-0">Electronics</div>
|
||
</div>
|
||
<h2 class="post-title h3 text-[1.1rem]"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Earphones</a></h2>
|
||
<p class="price !m-0"><span class="amount">$55.00</span></p>
|
||
</div>
|
||
<!-- /.post-header -->
|
||
</div>
|
||
<!-- /.item -->
|
||
<div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
|
||
<figure class="!rounded-[.4rem] !mb-6">
|
||
<img src="../assets/img/photos/sh9.jpg" alt="image">
|
||
<a class="item-like opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Add to wishlist"><i class="uil uil-heart before:content-['\eb66']"></i></a>
|
||
<a class="item-view opacity-0 absolute !w-[2.2rem] !h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out !text-[#343f52] hover:!text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bg-[#ffffff] top-4 group-hover:opacity-100 group-hover:right-4" href="#" data-bs-toggle="white-tooltip" title="Quick view"><i class="uil uil-eye"></i></a>
|
||
<a href="#" class="item-cart opacity-0 absolute bottom-[-2rem] w-full h-auto !text-white text-center transition-all duration-[0.3s] ease-in-out text-[0.85rem] flex items-center justify-center font-bold m-0 p-[0.8rem] left-0 bg-[rgba(38,43,50,.8)] hover:bg-[rgba(38,43,50,.9)] hover:!text-white group-hover:opacity-100 group-hover:bottom-0"><i class="uil uil-shopping-bag !font-normal !mt-[-0.05rem] !mr-1 before:content-['\ecba']"></i> Add to Cart</a>
|
||
</figure>
|
||
<div class="post-header">
|
||
<div class="flex flex-row items-center justify-between !mb-2">
|
||
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#9499a3] !mb-0">Accessories</div>
|
||
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five"></span>
|
||
</div>
|
||
<h2 class="post-title h3 text-[1.1rem]"><a class='!text-[#343f52] hover:!text-[#3f78e0]' href='shop-product.html'>Apple Watch Milano Loop</a></h2>
|
||
<p class="price !m-0"><span class="amount">$55.00</span></p>
|
||
</div>
|
||
<!-- /.post-header -->
|
||
</div>
|
||
<!-- /.item -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.grid -->
|
||
<nav class="flex" aria-label="pagination">
|
||
<ul class="pagination">
|
||
<li class="page-item disabled">
|
||
<a class="page-link" href="#" aria-label="Previous">
|
||
<span aria-hidden="true"><i class="uil uil-arrow-left before:content-['\e949']"></i></span>
|
||
</a>
|
||
</li>
|
||
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||
<li class="page-item">
|
||
<a class="page-link" href="#" aria-label="Next">
|
||
<span aria-hidden="true"><i class="uil uil-arrow-right before:content-['\e94c']"></i></span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<!-- /.pagination -->
|
||
</nav>
|
||
<!-- /nav -->
|
||
</div>
|
||
<!-- /column -->
|
||
<aside class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full sidebar !mt-[50px]">
|
||
<div class="widget !mt-1">
|
||
<h4 class="widget-title !mb-3">Categories</h4>
|
||
<ul class="pl-0 list-none">
|
||
<li class="!mb-1">
|
||
<a href="#" class="items-center rounded !text-[#60697b]" data-bs-toggle="collapse" data-bs-target="#clothing-collapse" aria-expanded="true"> Clothing <span class="!text-[0.7rem] !text-[#aab0bc] !ml-1">(21)</span>
|
||
</a>
|
||
<div class="collapse show !mt-1" id="clothing-collapse" style="">
|
||
<ul class="btn-toggle-nav list-none !pl-2">
|
||
<li><a href="#" class="!text-[#60697b]">Dresses</a></li>
|
||
<li class="!mt-[.35rem]"><a href="#" class="!text-[#60697b]">Knitwear</a></li>
|
||
<li class="!mt-[.35rem]"><a href="#" class="!text-[#60697b]">Jeans</a></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="!mb-1 !mt-[.35rem]">
|
||
<a href="#" class="items-center rounded collapsed !text-[#60697b]" data-bs-toggle="collapse" data-bs-target="#electronics-collapse" aria-expanded="false"> Electronics <span class="!text-[0.7rem] !text-[#aab0bc] !ml-1">(19)</span>
|
||
</a>
|
||
<div class="collapse !mt-1" id="electronics-collapse" style="">
|
||
<ul class="btn-toggle-nav list-none !pl-2">
|
||
<li><a href="#" class="!text-[#60697b]">Headphones</a></li>
|
||
<li class="!mt-[.35rem]"><a href="#" class="!text-[#60697b]">Computers</a></li>
|
||
<li class="!mt-[.35rem]"><a href="#" class="!text-[#60697b]">Cameras</a></li>
|
||
<li class="!mt-[.35rem]"><a href="#" class="!text-[#60697b]">Annually</a></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="!mb-1 !mt-[.35rem]">
|
||
<a href="#" class="items-center rounded collapsed !text-[#60697b]" data-bs-toggle="collapse" data-bs-target="#shoes-collapse" aria-expanded="false"> Shoes <span class="!text-[0.7rem] !text-[#aab0bc] !ml-1">(12)</span>
|
||
</a>
|
||
<div class="collapse !mt-1" id="shoes-collapse" style="">
|
||
<ul class="btn-toggle-nav list-none !pl-2">
|
||
<li><a href="#" class="!text-[#60697b]">Sneakers</a></li>
|
||
<li class="!mt-[.35rem]"><a href="#" class="!text-[#60697b]">Sandals</a></li>
|
||
<li class="!mt-[.35rem]"><a href="#" class="!text-[#60697b]">Boots</a></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="!mb-1 !mt-[.35rem]">
|
||
<a href="#" class="items-center rounded collapsed !text-[#60697b]" data-bs-toggle="collapse" data-bs-target="#home-collapse" aria-expanded="false"> Home & Kitchen <span class="!text-[0.7rem] !text-[#aab0bc] !ml-1">(16)</span>
|
||
</a>
|
||
<div class="collapse !mt-1" id="home-collapse" style="">
|
||
<ul class="btn-toggle-nav list-none !pl-2">
|
||
<li><a href="#" class="!text-[#60697b]">Clocks</a></li>
|
||
<li class="!mt-[.35rem]"><a href="#" class="!text-[#60697b]">Kettles</a></li>
|
||
<li class="!mt-[.35rem]"><a href="#" class="!text-[#60697b]">Kitchenware</a></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- /.widget -->
|
||
<div class="widget !mt-8">
|
||
<h4 class="widget-title !mb-3">Rating</h4>
|
||
<div class="form-check block min-h-[1.36rem] !pl-[1.55rem] !mb-1">
|
||
<input class="form-check-input" type="radio" name="rating" id="rating5" checked>
|
||
<label class="form-check-label" for="rating5">
|
||
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five"></span>
|
||
</label>
|
||
</div>
|
||
<!-- /.form-check -->
|
||
<div class="form-check block min-h-[1.36rem] !pl-[1.55rem] !mb-1">
|
||
<input class="form-check-input" type="radio" name="rating" id="rating4">
|
||
<label class="form-check-label" for="rating4">
|
||
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 four"></span>
|
||
</label>
|
||
</div>
|
||
<!-- /.form-check -->
|
||
<div class="form-check block min-h-[1.36rem] !pl-[1.55rem] !mb-1">
|
||
<input class="form-check-input" type="radio" name="rating" id="rating3">
|
||
<label class="form-check-label" for="rating3">
|
||
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 three"></span>
|
||
</label>
|
||
</div>
|
||
<!-- /.form-check -->
|
||
<div class="form-check block min-h-[1.36rem] !pl-[1.55rem] !mb-1">
|
||
<input class="form-check-input" type="radio" name="rating" id="rating2">
|
||
<label class="form-check-label" for="rating2">
|
||
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 two"></span>
|
||
</label>
|
||
</div>
|
||
<!-- /.form-check -->
|
||
<div class="form-check block min-h-[1.36rem] !pl-[1.55rem] !mb-1">
|
||
<input class="form-check-input" type="radio" name="rating" id="rating1">
|
||
<label class="form-check-label" for="rating1">
|
||
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 one"></span>
|
||
</label>
|
||
</div>
|
||
<!-- /.form-check -->
|
||
</div>
|
||
<!-- /.widget -->
|
||
<div class="widget !mt-8">
|
||
<h4 class="widget-title !mb-3">Size</h4>
|
||
<div class="form-check block min-h-[1.36rem] !pl-[1.55rem] !mb-1">
|
||
<input class="form-check-input" type="checkbox" id="xs" checked>
|
||
<label class="form-check-label" for="xs">XS <span class="!text-[0.7rem] !text-[#aab0bc] !ml-1">(23)</span></label>
|
||
</div>
|
||
<div class="form-check block min-h-[1.36rem] !pl-[1.55rem] !mb-1">
|
||
<input class="form-check-input" type="checkbox" id="s">
|
||
<label class="form-check-label" for="s">S <span class="!text-[0.7rem] !text-[#aab0bc] !ml-1">(253)</span></label>
|
||
</div>
|
||
<div class="form-check block min-h-[1.36rem] !pl-[1.55rem] !mb-1">
|
||
<input class="form-check-input" type="checkbox" id="m">
|
||
<label class="form-check-label" for="m">M <span class="!text-[0.7rem] !text-[#aab0bc] !ml-1">(65)</span></label>
|
||
</div>
|
||
<div class="form-check block min-h-[1.36rem] !pl-[1.55rem] !mb-1">
|
||
<input class="form-check-input" type="checkbox" id="l">
|
||
<label class="form-check-label" for="l">L <span class="!text-[0.7rem] !text-[#aab0bc] !ml-1">(156)</span></label>
|
||
</div>
|
||
<div class="form-check block min-h-[1.36rem] !pl-[1.55rem] !mb-1">
|
||
<input class="form-check-input" type="checkbox" id="xl">
|
||
<label class="form-check-label" for="xl">XL <span class="!text-[0.7rem] !text-[#aab0bc] !ml-1">(74)</span></label>
|
||
</div>
|
||
</div>
|
||
<!-- /.widget -->
|
||
<div class="widget !mt-8">
|
||
<h4 class="widget-title !mb-3">Price</h4>
|
||
<div class="form-check block min-h-[1.36rem] !pl-[1.55rem] !mb-1">
|
||
<input class="form-check-input" type="radio" name="price" id="price1" checked>
|
||
<label class="form-check-label" for="price1"> $0.00 - $50.00 </label>
|
||
</div>
|
||
<!-- /.form-check -->
|
||
<div class="form-check block min-h-[1.36rem] !pl-[1.55rem] !mb-1">
|
||
<input class="form-check-input" type="radio" name="price" id="price2">
|
||
<label class="form-check-label" for="price2"> $0.00 - $50.00 </label>
|
||
</div>
|
||
<!-- /.form-check -->
|
||
<div class="form-check block min-h-[1.36rem] !pl-[1.55rem] !mb-1">
|
||
<input class="form-check-input" type="radio" name="price" id="price3">
|
||
<label class="form-check-label" for="price3"> $50.00 - $100.00 </label>
|
||
</div>
|
||
<!-- /.form-check -->
|
||
<div class="form-check block min-h-[1.36rem] !pl-[1.55rem] !mb-1">
|
||
<input class="form-check-input" type="radio" name="price" id="price4">
|
||
<label class="form-check-label" for="price4"> $150.00 - $200.00 </label>
|
||
</div>
|
||
<!-- /.form-check -->
|
||
<div class="flex flex-wrap mx-[-15px]">
|
||
<div class="w-7/12 md:w-5/12 lg:w-full xl:w-10/12 xxl:w-10/12 flex-[0_0_auto] !px-[15px] max-w-full">
|
||
<div class="flex items-center !mt-4">
|
||
<input type="number" class="form-control min-h-[calc(1.7em_+_0.8rem_+_2px)] text-[0.7rem] px-[0.6rem] py-[0.4rem] rounded-[0.4rem] file:!mt-[-0.4rem] file:mr-[-0.6rem] file:!mb-[-0.4rem] file:ml-[-0.6rem] file:!px-[0.6rem] file:py-[0.4rem] block w-full font-medium !leading-[1.7] !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] border-solid border-[rgba(8,60,130,0.07)] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100
|
||
" placeholder="$0.00" min="0">
|
||
<div class="!text-[#aab0bc] mx-2">‒</div>
|
||
<input type="number" class="form-control min-h-[calc(1.7em_+_0.8rem_+_2px)] text-[0.7rem] px-[0.6rem] py-[0.4rem] rounded-[0.4rem] file:!mt-[-0.4rem] file:mr-[-0.6rem] file:!mb-[-0.4rem] file:ml-[-0.6rem] file:!px-[0.6rem] file:py-[0.4rem] block w-full font-medium !leading-[1.7] !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] border-solid border-[rgba(8,60,130,0.07)] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100" placeholder="$50.00" max="50">
|
||
</div>
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.widget -->
|
||
</aside>
|
||
<!-- /column .sidebar -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</section>
|
||
<!-- /section -->
|
||
<section class="wrapper bg-[rgba(246,247,249,1)] ">
|
||
<div class="container py-14 xl:!py-[4.5rem] lg:!py-[4.5rem] md:!py-[4.5rem]">
|
||
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-40px]">
|
||
<div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[40px] xl:!px-[35px] lg:!px-[20px]">
|
||
<div class="flex flex-row">
|
||
<div>
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 202.66" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/shipment.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem] solid-mono text-[#343f52] text-navy !mr-4"><path class="fill-primary" d="M235.33 170.66h-13a10.68 10.68 0 110-21.35h12.33V115l-29.94-40.65-34.05.29v74.69H176a10.67 10.67 0 110 21.33h-16A10.68 10.68 0 01149.33 160V73.58A20.49 20.49 0 01170 53.31h35.12a20.88 20.88 0 0116.82 8.47l30.19 41.44A19.87 19.87 0 01256 115v35.4a20.48 20.48 0 01-20.67 20.26z"></path><path class="fill-primary" d="M160 170.66H89.81a10.68 10.68 0 010-21.35h59.52V20.59l-128.71.74.71 128.72 19.67-.72a10.67 10.67 0 110 21.34H20.62A20.66 20.66 0 010 150.05V20.62A20.64 20.64 0 0120.62 0h129.43a20.64 20.64 0 0120.62 20.62V160A10.67 10.67 0 01160 170.66z"></path><path class="fill-primary" d="M200 202.66a32 32 0 1132-32 32 32 0 01-32 32zm-136 0a32 32 0 1132-32 32 32 0 01-32 32z"></path><path class="fill-secondary" d="M41.47 89.33A9.29 9.29 0 0136 87.52 9.84 9.84 0 0133.76 74l23.71-33.94a9.35 9.35 0 0113.22-2.25 9.85 9.85 0 012.21 13.52L49.18 85.26a9.35 9.35 0 01-7.71 4.07zm64 32a9.29 9.29 0 01-5.5-1.81A9.86 9.86 0 0197.76 106l23.71-33.93a9.36 9.36 0 0113.22-2.26 9.87 9.87 0 012.21 13.54l-23.72 33.93a9.35 9.35 0 01-7.71 4.07zm-42.3 0a9.65 9.65 0 01-5.6-1.79 10.17 10.17 0 01-2.5-14l44.31-65.22a9.7 9.7 0 0113.69-2.54 10.16 10.16 0 012.5 14L71.26 117a9.73 9.73 0 01-8.09 4.33z"></path></svg>
|
||
</div>
|
||
<div>
|
||
<h4 class="!mb-1">Free Shipping</h4>
|
||
<p class="!mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget lacinia odio sem.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[40px] xl:!px-[35px] lg:!px-[20px]">
|
||
<div class="flex flex-row">
|
||
<div>
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/push-cart.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem] solid-mono text-[#343f52] text-navy !mr-4"><path class="fill-secondary" d="M216 101.33H82.67a8.06 8.06 0 00-8 8v75.2a41.94 41.94 0 0120.91 18.13H216a8.07 8.07 0 008-8v-85.33a8.06 8.06 0 00-8-8zm-21.33 69.34h-32a8 8 0 010-16h32a8 8 0 010 16zM173.33 0H82.66a8 8 0 00-8 8v74.67a8 8 0 008 8h90.67a8 8 0 008-8V8a8 8 0 00-8-8zM152 74.67h-21.33a8 8 0 110-16H152a8 8 0 010 16z"></path><path class="fill-primary" d="M252.43 237.38l-14.33-12.79a31.8 31.8 0 00-24.35-11.25H88.7A31.94 31.94 0 0064 192.51V21.76A21.38 21.38 0 0042.91.43L10.82 0h-.15a10.67 10.67 0 00-.16 21.33l32.15.43v174.66a31.91 31.91 0 1046 38.25h125.09a10.63 10.63 0 018.33 4 11.38 11.38 0 001.22 1.33l14.93 13.33a10.69 10.69 0 007.1 2.7 10.67 10.67 0 007.1-18.62z"></path></svg>
|
||
</div>
|
||
<div>
|
||
<h4 class="!mb-1">30 Days Return</h4>
|
||
<p class="!mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget lacinia odio sem.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[40px] xl:!px-[35px] lg:!px-[20px]">
|
||
<div class="flex flex-row">
|
||
<div>
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/solid/verify.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem] solid-mono text-[#343f52] text-navy !mr-4"><path class="fill-secondary" d="M186.67 117.33A69.34 69.34 0 10256 186.68a69.43 69.43 0 00-69.33-69.35zm37.34 55L186.68 215a10.65 10.65 0 01-7.68 3.63h-.35a10.67 10.67 0 01-7.53-3.12l-21.33-21.33a10.67 10.67 0 0115.09-15.09l13.26 13.27L208 158.3a10.67 10.67 0 1116 14.07z"></path><path class="fill-primary" d="M177.92 32.32L92.58.32a5.88 5.88 0 00-3.84 0l-85.35 32a5.36 5.36 0 00-3.39 5v68.59c0 97.28 88.64 117.76 89.5 118a6.28 6.28 0 002.34 0 73.48 73.48 0 0010.77-3.41A89.34 89.34 0 0196 186.68a90.78 90.78 0 0185.34-90.56V37.35a5.38 5.38 0 00-3.42-5z"></path></svg>
|
||
</div>
|
||
<div>
|
||
<h4 class="!mb-1">2-Years Warranty</h4>
|
||
<p class="!mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, eget lacinia odio sem.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</section>
|
||
<!-- /section -->
|
||
</div>
|
||
<!-- /.content-wrapper -->
|
||
<footer class="!bg-[#21262c] shrink-0">
|
||
<div class="container py-16 xl:!py-20 lg:!py-20 md:!py-20">
|
||
<div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
|
||
<div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
|
||
<div class="widget !text-[#cacaca]">
|
||
<img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
|
||
<p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
|
||
<nav class="nav social social-white">
|
||
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
|
||
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
|
||
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
|
||
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
|
||
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
|
||
</nav>
|
||
<!-- /.social -->
|
||
</div>
|
||
<!-- /.widget -->
|
||
</div>
|
||
<!-- /column -->
|
||
<div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
|
||
<div class="widget !text-[#cacaca]">
|
||
<h4 class="widget-title !text-white !mb-3">Get in Touch</h4>
|
||
<address class="xl:!pr-20 xxl:!pr-28 not-italic !leading-[inherit] block !mb-4">ÇAMTEPE MAH. MAHMUT TEVFİK ATAY BUL. GAZİANTEP TEKNOPARK NO: 4A İÇ KAPI NO: 1 ŞAHİNBEY / GAZİANTEP</address>
|
||
<a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="mailto:#">info@truncgil.com</a><br> 00 (123) 456 78 90
|
||
</div>
|
||
<!-- /.widget -->
|
||
</div>
|
||
<!-- /column -->
|
||
<div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
|
||
<div class="widget !text-[#cacaca]">
|
||
<h4 class="widget-title !text-white !mb-3">Learn More</h4>
|
||
<ul class="pl-0 list-none !mb-0">
|
||
<li><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">About Us</a></li>
|
||
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Our Story</a></li>
|
||
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Projects</a></li>
|
||
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Terms of Use</a></li>
|
||
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Privacy Policy</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- /.widget -->
|
||
</div>
|
||
<!-- /column -->
|
||
<div class="md:w-full xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
|
||
<div class="widget !text-[#cacaca]">
|
||
<h4 class="widget-title !text-white !mb-3">Our Newsletter</h4>
|
||
<p class="!mb-5">Subscribe to our newsletter to get our news & deals delivered to you.</p>
|
||
<div class="newsletter-wrapper">
|
||
<!-- Begin Mailchimp Signup Form -->
|
||
<div id="mc_embed_signup2">
|
||
<form action="https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&id=b49ef47a9a" method="post" id="mc-embedded-subscribe-form2" name="mc-embedded-subscribe-form" class="validate dark-fields" target="_blank" novalidate>
|
||
<div id="mc_embed_signup_scroll2">
|
||
<div class="!text-left input-group form-floating !relative flex flex-wrap items-stretch w-full">
|
||
<input type="email" value="" name="EMAIL" class="required email form-control block w-full text-[12px] font-medium !leading-[1.7] appearance-none bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] px-4 py-[0.6rem] rounded-[0.4rem] motion-reduce:transition-none focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] disabled:bg-[#aab0bc] disabled:opacity-100 file:!mt-[-0.6rem] file:mr-[-1rem] file:!mb-[-0.6rem] file:ml-[-1rem] file:!text-[#60697b] file:bg-[#fefefe] file:pointer-events-none file:transition-all file:duration-[0.2s] file:ease-in-out file:px-4 file:py-[0.6rem] file:rounded-none motion-reduce:file:transition-none placeholder:!text-[#959ca9] placeholder:opacity-100 border border-solid !border-[rgba(255,255,255,0.1)] !text-[#cacaca] bg-[rgba(255,255,255,.03)] focus-visible:!border-[rgba(63,120,224,0.5)] " placeholder="" id="mce-EMAIL2">
|
||
<label class="!ml-[0.05rem] !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none origin-[0_0] px-4 py-[0.6rem] left-0 top-0" for="mce-EMAIL2">Email Address</label>
|
||
<input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe2" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !relative z-[2] focus:z-[5] hover:!transform-none hover:!translate-none border-0">
|
||
</div>
|
||
<div id="mce-responses2" class="clear">
|
||
<div class="response" id="mce-error-response2" style="display:none"></div>
|
||
<div class="response" id="mce-success-response2" style="display:none"></div>
|
||
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
|
||
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc" tabindex="-1" value=""></div>
|
||
<div class="clear"></div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<!--End mc_embed_signup-->
|
||
</div>
|
||
<!-- /.newsletter-wrapper -->
|
||
</div>
|
||
<!-- /.widget -->
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!--/.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</footer>
|
||
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
|
||
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
|
||
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/>
|
||
</svg>
|
||
</div>
|
||
<script src="../assets/js/plugins.js"></script>
|
||
<script src="../assets/js/theme.js"></script>
|
||
</body>
|
||
|
||
|
||
<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/shop2 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:00:14 GMT -->
|
||
</html> |