Ümit Tunç
1405 lines
98 KiB
HTML
1405 lines
98 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
|
|
<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/docs/elements/carousel by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:05:55 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="../../assets/css/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="grow shrink-0">
|
|
<header class="relative wrapper bg-soft-primary !bg-[#edf2fc]">
|
|
<nav class="navbar navbar-expand-lg center-nav transparent navbar-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">
|
|
|
|
<button type="button" class="btn-close btn-close-white !mr-[-0.75rem] m-0 p-0 leading-none !text-[#343f52] transition-all duration-[0.2s] ease-in-out border-0 motion-reduce:transition-none before:text-[1.05rem] before:text-white 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(255,255,255,.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 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='../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='../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='../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='../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='../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='../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='../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='../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='../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='../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='../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='../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='../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='../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='../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='../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='../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='../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='../forms.html'>Forms</a></li>
|
|
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../faq.html'>FAQ</a></li>
|
|
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../changelog.html'>Changelog</a></li>
|
|
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../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='../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='../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='../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='../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='../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='../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='../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='accordion.html'>Accordion</a></li>
|
|
<li><a class='dropdown-item' href='alerts.html'>Alerts</a></li>
|
|
<li><a class='dropdown-item' href='animations.html'>Animations</a></li>
|
|
<li><a class='dropdown-item' href='avatars.html'>Avatars</a></li>
|
|
<li><a class='dropdown-item' href='background.html'>Background</a></li>
|
|
<li><a class='dropdown-item' href='badges.html'>Badges</a></li>
|
|
<li><a class='dropdown-item' href='buttons.html'>Buttons</a></li>
|
|
<li><a class='dropdown-item' href='card.html'>Card</a></li>
|
|
<li><a class='dropdown-item' href='carousel.html'>Carousel</a></li>
|
|
<li><a class='dropdown-item' href='dividers.html'>Dividers</a></li>
|
|
<li><a class='dropdown-item' href='form-elements.html'>Form Elements</a></li>
|
|
<li><a class='dropdown-item' href='image-hover.html'>Image Hover</a></li>
|
|
<li><a class='dropdown-item' href='image-mask.html'>Image Mask</a></li>
|
|
<li><a class='dropdown-item' href='lightbox.html'>Lightbox</a></li>
|
|
<li><a class='dropdown-item' href='player.html'>Media Player</a></li>
|
|
<li><a class='dropdown-item' href='modal.html'>Modal</a></li>
|
|
<li><a class='dropdown-item' href='pagination.html'>Pagination</a></li>
|
|
<li><a class='dropdown-item' href='progressbar.html'>Progressbar</a></li>
|
|
<li><a class='dropdown-item' href='shadows.html'>Shadows</a></li>
|
|
<li><a class='dropdown-item' href='shapes.html'>Shapes</a></li>
|
|
<li><a class='dropdown-item' href='tables.html'>Tables</a></li>
|
|
<li><a class='dropdown-item' href='tabs.html'>Tabs</a></li>
|
|
<li><a class='dropdown-item' href='text-animations.html'>Text Animations</a></li>
|
|
<li><a class='dropdown-item' href='text-highlight.html'>Text Highlight</a></li>
|
|
<li><a class='dropdown-item' href='tiles.html'>Tiles</a></li>
|
|
<li><a class='dropdown-item' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
|
|
<li><a class='dropdown-item' href='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 dropdown language-select uppercase group">
|
|
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
|
|
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
|
|
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
|
|
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
|
|
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item hidden xl:block lg:block md:block">
|
|
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</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 -->
|
|
</header>
|
|
<!-- /header -->
|
|
<section class="wrapper !bg-[#edf2fc]">
|
|
<div class="container pt-10 pb-14 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24 !text-center">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="md:w-9/12 lg:w-7/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-3">Carousel</h1>
|
|
<p class="lead xxl:!px-[.5rem] !leading-[1.65] text-[0.9rem] font-medium">Here you can find simple carousel examples and usage instructions. For further carousel documentation please visit <a href="https://swiperjs.com/" target="_blank" class="hover more">Swiper docs</a></p>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<div class="container">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<aside class="xl:w-2/12 flex-[0_0_auto] !px-[15px] max-w-full sidebar doc-sidebar md:!mt-0 py-24 hidden xl:block">
|
|
<div class="widget pb-3">
|
|
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
|
|
<nav id="collapse-usage">
|
|
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
|
|
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
|
|
</ul>
|
|
</nav>
|
|
<!-- /nav -->
|
|
</div>
|
|
<!-- /.widget -->
|
|
<div class="widget pb-3">
|
|
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
|
|
<nav id="collapse-style">
|
|
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
|
|
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
|
|
</ul>
|
|
</nav>
|
|
<!-- /nav -->
|
|
</div>
|
|
<!-- /.widget -->
|
|
<div class="widget pb-3">
|
|
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
|
|
<nav id="collapse-elements">
|
|
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='carousel.html'>Carousel</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
|
|
</ul>
|
|
</nav>
|
|
<!-- /nav -->
|
|
</div>
|
|
<!-- /.widget -->
|
|
</aside>
|
|
<!-- /column -->
|
|
<aside class="xl:w-2/12 flex-[0_0_auto] !px-[15px] max-w-full xl:!order-3 sidebar !sticky h-full top-0 md:!mt-0 py-24 hidden xl:block">
|
|
<div class="widget">
|
|
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
|
|
<nav class="xl:!pl-5" id="sidebar-nav">
|
|
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
|
|
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Simple Carousel</a></li>
|
|
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Card Carousel</a></li>
|
|
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-3">Text Slider</a></li>
|
|
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-4">Image Slider</a></li>
|
|
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-5">Thumbnail Slider</a></li>
|
|
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#instructions">Instructions</a></li>
|
|
</ul>
|
|
</nav>
|
|
<!-- /nav -->
|
|
</div>
|
|
<!-- /.widget -->
|
|
</aside>
|
|
<!-- /column -->
|
|
<div class="xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!order-2">
|
|
<section id="snippet-1" class="wrapper pt-24">
|
|
<h2 class="!mb-5 !leading-[1.35]">Simple Carousel</h2>
|
|
<div class="card">
|
|
<div class="card-body flex-[1_1_auto] p-[40px]">
|
|
<div class="swiper-container relative z-10 !mb-10" data-margin="30" data-nav="true" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<figure class="overlay overlay-1 hover-scale rounded !mb-0 group"><a href="#"> <img src="../../assets/img/photos/p1.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="overlay overlay-1 hover-scale rounded !mb-0 group"><a href="#"> <img src="../../assets/img/photos/p2.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="overlay overlay-1 hover-scale rounded !mb-0 group"><a href="#"> <img src="../../assets/img/photos/p3.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="overlay overlay-1 hover-scale rounded !mb-0 group"><a href="#"> <img src="../../assets/img/photos/p4.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="overlay overlay-1 hover-scale rounded !mb-0 group"><a href="#"> <img src="../../assets/img/photos/p5.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
<div class="card-footer !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-1">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-1" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><div class="swiper-container !mb-10" data-margin="30" data-nav="true" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
...
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
...
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
...
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
...
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
...
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</section>
|
|
<section id="snippet-2" class="wrapper pt-24">
|
|
<h2 class="!mb-5 !leading-[1.35]">Card Carousel</h2>
|
|
<div class="card">
|
|
<div class="card-body flex-[1_1_auto] p-[40px]">
|
|
<div class="swiper-container dots-closer blog grid-view !mb-6" data-margin="0" data-dots="true" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<div class="card-body flex-[1_1_auto] xl:!p-[1.75rem_1.75rem_1rem_1.75rem] lg:!p-[1.75rem_1.75rem_1rem_1.75rem] md:!p-[1.75rem_1.75rem_1rem_1.75rem] sm:!p-[40px] max-sm:!p-[40px_40px_20px_40px]">
|
|
<p>Duis mollis est non commodo luctu, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna vel scelerisque nisl consectetur et.</p>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<div class="card-body flex-[1_1_auto] xl:!p-[1.75rem_1.75rem_1rem_1.75rem] lg:!p-[1.75rem_1.75rem_1rem_1.75rem] md:!p-[1.75rem_1.75rem_1rem_1.75rem] sm:!p-[40px] max-sm:!p-[40px_40px_20px_40px]">
|
|
<p>Duis mollis est non commodo luctu, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna vel scelerisque nisl consectetur et.</p>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<div class="card-body flex-[1_1_auto] xl:!p-[1.75rem_1.75rem_1rem_1.75rem] lg:!p-[1.75rem_1.75rem_1rem_1.75rem] md:!p-[1.75rem_1.75rem_1rem_1.75rem] sm:!p-[40px] max-sm:!p-[40px_40px_20px_40px]">
|
|
<p>Duis mollis est non commodo luctu, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna vel scelerisque nisl consectetur et.</p>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<div class="card-body flex-[1_1_auto] xl:!p-[1.75rem_1.75rem_1rem_1.75rem] lg:!p-[1.75rem_1.75rem_1rem_1.75rem] md:!p-[1.75rem_1.75rem_1rem_1.75rem] sm:!p-[40px] max-sm:!p-[40px_40px_20px_40px]">
|
|
<p>Duis mollis est non commodo luctu, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna vel scelerisque nisl consectetur et.</p>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
<div class="card-footer !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-2">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-2" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><div class="swiper-container dots-closer blog grid-view !mb-6" data-margin="0" data-dots="true" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
...
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
...
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
...
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<article>
|
|
<div class="card">
|
|
<div class="card-body">
|
|
...
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</section>
|
|
<section id="snippet-3" class="wrapper pt-24">
|
|
<h2 class="!mb-5 !leading-[1.35]">Text Slider</h2>
|
|
<div class="card">
|
|
<div class="card-body flex-[1_1_auto] p-[40px]">
|
|
<div class="swiper-container dots-closer !text-center !mb-6" data-margin="30" data-dots="true">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
<div class="card-footer !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-3">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-3" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><div class="swiper-container dots-closer !text-center !mb-6" data-margin="30" data-dots="true">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
...
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
...
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
...
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</section>
|
|
<section id="snippet-4" class="wrapper pt-24">
|
|
<h2 class="!mb-3 !leading-[1.35]">Image Slider</h2>
|
|
<p class="lead !leading-[1.65] text-[0.9rem] font-medium">Remove <code class="code">.dots-over</code> class to move bullets below the images.</p>
|
|
<p class="lead !mb-3">Use any available <code class="code">.m-*</code>, <code class="code">.p-*</code>, <code class="code">.bg-*</code> and <code class="code">.text-*</code> helper class to style and place the captions. You can change their placement with the help of flex classes as well.</p>
|
|
<p class="lead !leading-[1.65] text-[0.9rem] font-medium">Use <a href="https://animate.style/" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">animate.css</a> animation and utility classes to add animations and delays to captions.</p>
|
|
<p class="lead !leading-[1.65] text-[0.9rem] font-medium !mb-8">For hero slider (slider with fixed height and background cover images) with captions example check out <a class='external hover:!text-[#e31e24] !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom' href='../../demo15.html' target='_blank'>Demo 15</a></p>
|
|
<div class="card">
|
|
<div class="card-body flex-[1_1_auto] p-[40px]">
|
|
<div class="swiper-container dots-over relative !z-10" data-margin="5" data-dots="true" data-nav="true" data-autoheight="true">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide bg-overlay bg-overlay-400 rounded">
|
|
<img src="../../assets/img/photos/is1.jpg" alt="image">
|
|
<div class="caption-wrapper p-14">
|
|
<div class="caption bg-[rgba(255,255,255)] opacity-100 rounded px-4 py-3 !mt-auto animate__animated animate__slideInDown animate__delay-1s">
|
|
<h5 class="!mb-0">Vivamus sagittis lacus augue</h5>
|
|
</div>
|
|
<!--/.caption -->
|
|
</div>
|
|
<!--/.caption-wrapper -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide rounded">
|
|
<img src="../../assets/img/photos/is2.jpg" alt="image">
|
|
<div class="caption-wrapper p-14">
|
|
<div class="caption bg-[rgba(255,255,255)] opacity-100 rounded px-4 py-3 !mx-auto !mt-auto animate__animated animate__slideInDown animate__delay-1s">
|
|
<h5 class="!mb-0">Vivamus sagittis lacus augue</h5>
|
|
</div>
|
|
<!--/.caption -->
|
|
</div>
|
|
<!--/.caption-wrapper -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide"><img src="../../assets/img/photos/is3.jpg" class="rounded-[.4rem]" alt="image"></div>
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
<div class="card-footer !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-4">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-4" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><div class="swiper-container dots-over" data-margin="5" data-dots="true" data-nav="true" data-autoheight="true">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide bg-overlay bg-overlay-400 rounded">
|
|
<img src="./assets/img/photos/is1.jpg" alt="" />
|
|
<div class="caption-wrapper p-14">
|
|
<div class="caption bg-[rgba(255,255,255)] opacity-100 rounded px-4 py-3 !mt-auto animate__animated animate__slideInDown animate__delay-1s"><h5 class="mb-0">Caption</h5></div>
|
|
<!--/.caption -->
|
|
</div>
|
|
<!--/.caption-wrapper -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide rounded">
|
|
<img src="./assets/img/photos/is2.jpg" alt="" />
|
|
<div class="caption-wrapper p-14">
|
|
<div class="caption bg-[rgba(255,255,255)] opacity-100 rounded px-4 py-3 !mx-auto !mt-auto animate__animated animate__slideInDown animate__delay-1s"><h5 class="mb-0">Caption</h5></div>
|
|
<!--/.caption -->
|
|
</div>
|
|
<!--/.caption-wrapper -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide"><img src="./assets/img/photos/is3.jpg" class="rounded" alt="" /></div>
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</section>
|
|
<section id="snippet-5" class="wrapper pt-24">
|
|
<h2 class="!mb-5 !leading-[1.35]">Thumbnail Slider</h2>
|
|
<div class="card">
|
|
<div class="card-body flex-[1_1_auto] p-[40px]">
|
|
<div class="swiper-container swiper-thumbs-container dots-over" data-margin="10" data-dots="false" data-nav="true" data-thumbs="true">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide group">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/shs1.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/shs1%402x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide group">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/shs2.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/shs2%402x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide group">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/shs3.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/shs3%402x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide group">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/shs4.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-base flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/shs4%402x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
<div class="swiper swiper-thumbs">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide"><img src="../../assets/img/photos/shs1-th.jpg" class="w-full h-auto rounded-[0.4rem]" alt="image"></div>
|
|
<div class="swiper-slide"><img src="../../assets/img/photos/shs2-th.jpg" class="w-full h-auto rounded-[0.4rem]" alt="image"></div>
|
|
<div class="swiper-slide"><img src="../../assets/img/photos/shs3-th.jpg" class="w-full h-auto rounded-[0.4rem]" alt="image"></div>
|
|
<div class="swiper-slide"><img src="../../assets/img/photos/shs4-th.jpg" class="w-full h-auto rounded-[0.4rem]" alt="image"></div>
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
<div class="card-footer !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-5">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-5" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html">
|
|
<code><div class="swiper-container swiper-thumbs-container dots-over" data-margin="10" data-dots="false" data-nav="true" data-thumbs="true">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="./assets/img/photos/shs1.jpg" alt="" /><a class="item-link" href="./assets/img/photos/shs1@2x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="./assets/img/photos/shs2.jpg" alt="" /><a class="item-link" href="./assets/img/photos/shs2@2x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="./assets/img/photos/shs3.jpg" alt="" /><a class="item-link" href="./assets/img/photos/shs3@2x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="./assets/img/photos/shs4.jpg" alt="" /><a class="item-link" href="./assets/img/photos/shs4@2x.jpg" data-glightbox data-gallery="product-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
<div class="swiper swiper-thumbs">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide"><img src="./assets/img/photos/shs1-th.jpg" class="rounded" alt="" /></div>
|
|
<div class="swiper-slide"><img src="./assets/img/photos/shs2-th.jpg" class="rounded" alt="" /></div>
|
|
<div class="swiper-slide"><img src="./assets/img/photos/shs3-th.jpg" class="rounded" alt="" /></div>
|
|
<div class="swiper-slide"><img src="./assets/img/photos/shs4-th.jpg" class="rounded" alt="" /></div>
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container --></code>
|
|
</pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</section>
|
|
<section id="instructions" class="wrapper py-24">
|
|
<h2 class="!mb-5 !leading-[1.35]">Instructions</h2>
|
|
<div class="card">
|
|
<div class="card-body flex-[1_1_auto] p-[40px]">
|
|
<h4>Data Attributes</h4>
|
|
<p>Specifically created for the template to be used on HTML. Apply any attribute to <code class="code">.swiper-container</code> to set swiper options.</p>
|
|
<table class="table !mb-10">
|
|
<thead class="!text-[#343f52]">
|
|
<tr>
|
|
<th scope="col" class="w-3/12 flex-[0_0_auto] !px-[15px] max-w-full">Attribute</th>
|
|
<th scope="col">Default</th>
|
|
<th scope="col">Options</th>
|
|
<th scope="col" class="w-5/12 flex-[0_0_auto] !px-[15px] max-w-full">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">data-effect</code></td>
|
|
<td>slide</td>
|
|
<td>slide | fade</td>
|
|
<td>Slide transition effect.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">data-items</code></td>
|
|
<td>3</td>
|
|
<td>number</td>
|
|
<td>Number of items per view in all devices.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">data-items-xs</code></td>
|
|
<td>1</td>
|
|
<td>number</td>
|
|
<td>Number of items on screen width <mark class="doc !mt-[-0.25rem]">0 - 575px</mark></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">data-items-sm</code></td>
|
|
<td>items-xs</td>
|
|
<td>number</td>
|
|
<td>Number of items on screen width <mark class="doc !mt-[-0.25rem]">576px - 767px</mark></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">data-items-md</code></td>
|
|
<td>items-sm</td>
|
|
<td>number</td>
|
|
<td>Number of items on screen width <mark class="doc !mt-[-0.25rem]">768px - 991px</mark></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">data-items-lg</code></td>
|
|
<td>items-md</td>
|
|
<td>number</td>
|
|
<td>Number of items on screen width <mark class="doc !mt-[-0.25rem]">992px - 1199px</mark></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">data-items-xl</code></td>
|
|
<td>items-lg</td>
|
|
<td>number</td>
|
|
<td>Number of items on screen width <mark class="doc !mt-[-0.25rem]">1200px - 1400px</mark></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">data-items-xxl</code></td>
|
|
<td>items-xl</td>
|
|
<td>number</td>
|
|
<td>Number of items on screen width <mark class="doc !mt-[-0.25rem]">1400px and above</mark></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">data-speed</code></td>
|
|
<td>500</td>
|
|
<td>number</td>
|
|
<td>Duration of transition between slides (in ms).</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">data-autoplay</code></td>
|
|
<td>false</td>
|
|
<td>true | false</td>
|
|
<td>Enable/disable autoplay.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">data-autoplaytime</code></td>
|
|
<td>5000</td>
|
|
<td>number</td>
|
|
<td>
|
|
<p>Delay between transitions (in ms).</p>
|
|
<p>If you need to specify different delay for specific slides you can do it by using <code class="code">data-swiper-autoplay</code> (in ms) attribute on slide.</p>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">data-autoheight</code></td>
|
|
<td>false</td>
|
|
<td>true | false</td>
|
|
<td>Set to true and slider wrapper will adapt its height to the height of the currently active slide.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">data-margin</code></td>
|
|
<td>30</td>
|
|
<td>number</td>
|
|
<td>Distance between slides in px.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">data-loop</code></td>
|
|
<td>false</td>
|
|
<td>true | false</td>
|
|
<td>Set to true to enable continuous loop mode.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">data-nav</code></td>
|
|
<td>false</td>
|
|
<td>true | false</td>
|
|
<td>Enable/disable navigation arrows.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">data-dots</code></td>
|
|
<td>false</td>
|
|
<td>true | false</td>
|
|
<td>Enable/disable pagination bullets.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">data-drag</code></td>
|
|
<td>false</td>
|
|
<td>true | false</td>
|
|
<td>Enable/disable moving with touch.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">data-reverse</code></td>
|
|
<td>false</td>
|
|
<td>true | false</td>
|
|
<td>Enables autoplay in reverse direction</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">data-updateresize</code></td>
|
|
<td>true</td>
|
|
<td>true | false</td>
|
|
<td>Swiper will recalculate slides position on window resize (orientationchange)</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h4>Alternative styles for controls</h4>
|
|
<p>Use the following classes with <code class="code">.swiper-container</code> to change navigation styles.</p>
|
|
<table class="table !mb-10">
|
|
<thead class="!text-[#343f52]">
|
|
<tr>
|
|
<th scope="col" class="w-4/12 flex-[0_0_auto] !px-[15px] max-w-full">Class</th>
|
|
<th scope="col">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">.swiper-hero</code></td>
|
|
<td>Enables hero slider, ie: <a class='external !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom !mt-[-0.25rem] hover:!text-[#e31e24] hover:after:!text-[#e31e24]' href='../../demo15.html' target='_blank'>Demo 15</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">.swiper-fullscreen</code></td>
|
|
<td>Enables fullscreen slider, ie: <a class='external !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom !mt-[-0.25rem] hover:!text-[#e31e24] hover:after:!text-[#e31e24]' href='../../demo23.html' target='_blank'>Demo 23</a></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">.nav-dark</code></td>
|
|
<td>Changes arrow background to dark color.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">.nav-color</code></td>
|
|
<td>Changes arrow background to primary color.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">.nav-bottom</code></td>
|
|
<td>Moves arrows below the slider.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">.nav-start</code></td>
|
|
<td>Moves arrows from center to left. Requires <code class="code !mt-[-0.25rem]">.nav-bottom</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">.dots-light</code></td>
|
|
<td>Changes bullet colors to white.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">.dots-start</code></td>
|
|
<td>Moves bullets from center to left.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">.dots-over</code></td>
|
|
<td>Moves bullets on the slider.</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="!pl-0"><code class="code my-0">.dots-closer</code></td>
|
|
<td>Moves bullets closer below the slider.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<h4>Full examples</h4>
|
|
<a class='external hover:!text-[#e31e24] !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom' href='../blocks/blog.html' target='_blank'>Blog Blocks</a>, <a class='external hover:!text-[#e31e24] !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom' href='../blocks/testimonials.html' target='_blank'>Testimonials Blocks</a>, <a class='external hover:!text-[#e31e24] !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom' href='../blocks/portfolio.html' target='_blank'>Portfolio Blocks</a>, <a class='external hover:!text-[#e31e24] !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom' href='../blocks/clients.html' target='_blank'>Client Blocks</a>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</section>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!-- /.content-wrapper -->
|
|
<section class="wrapper bg-[#21262c] opacity-100 !text-white">
|
|
<div class="container pt-[4.5rem] xl:pt-24 lg:pt-24 md:pt-24 !text-center">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="md:w-10/12 lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<h2 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.25] xl:!text-[2rem] !text-white !mt-3 !mb-3 xl:!px-8 lg:!px-8">Think unique and be creative. Make a difference with Trunçgil.</h2>
|
|
<p class="lead text-[1.05rem] !leading-[1.6] !mb-6">Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.</p>
|
|
<a href="https://truncgil.com.tr" target="_blank" class="btn btn-lg btn-white !rounded-[50rem] !mb-10 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Buy Trunçgil</a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<img class="max-w-full h-auto m-[0_auto]" src="../../assets/img/demos/f1.png" alt="image">
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<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-[#e31e24] 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-[#e31e24] 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/docs/elements/carousel by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:05:58 GMT -->
|
|
</html> |