truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
citrus/public/html/index.html
T

1756 lines
128 KiB
HTML
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="en">
<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/ by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 10:55: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">
<link rel="stylesheet" href="assets/css/colors/grape.css">
<link rel="preload" href="assets/css/fonts/space.css" as="style" onload="this.rel='stylesheet'">
<style>
.navbar.navbar-light.fixed .btn:not(.btn-expand):not(.btn-gradient) {
background: #e31e24 !important;
border-color: #e31e24 !important;
color: #ffffff !important;
}
@media (max-width: 991.98px) {
.navbar-expand-lg .navbar-collapse .dropdown-toggle:after {
color: #ffffff !important;
}
}
</style>
</head>
<body class="!bg-[#f0f0f8]">
<div class="grow shrink-0">
<header class="!absolute w-full">
<div class="gradient-5 !text-white font-bold !text-[.75rem] !mb-2 !relative" style="z-index: 1;">
<div class="container py-2 !text-center">
<p class="!mb-0">✨ VueJs Version of Trunçgil is released! Grab a copy <a
href="https://truncgil.com.tr?s_rank=4"
class="!text-white hover inline-flex items-center" target="_blank">here <i
class="uil uil-arrow-up-right before:content-['\e950']"></i></a></p>
</div>
<!-- /.container -->
</div>
<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 !text-[.85rem] !tracking-[normal] hover:!text-[#e31e24] after:!text-[#e31e24]"
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 !text-[.85rem] !tracking-[normal] hover:!text-[#e31e24] after:!text-[#e31e24]"
href="#" data-bs-toggle="dropdown">Pages</a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu dropend"><a
class="dropdown-item hover:!text-[#e31e24] dropdown-toggle" href="#"
data-bs-toggle="dropdown">Services</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='services.html'>Services I</a></li>
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='services2.html'>Services II</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a
class="dropdown-item hover:!text-[#e31e24] dropdown-toggle" href="#"
data-bs-toggle="dropdown">About</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='about.html'>About
I</a></li>
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='about2.html'>About
II</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a
class="dropdown-item hover:!text-[#e31e24] dropdown-toggle" href="#"
data-bs-toggle="dropdown">Shop</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='shop.html'>Shop
I</a></li>
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='shop2.html'>Shop
II</a></li>
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='shop-product.html'>Product Page</a></li>
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='shop-cart.html'>Shopping Cart</a></li>
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='shop-checkout.html'>Checkout</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a
class="dropdown-item hover:!text-[#e31e24] dropdown-toggle" href="#"
data-bs-toggle="dropdown">Contact</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='contact.html'>Contact I</a></li>
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='contact2.html'>Contact II</a></li>
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='contact3.html'>Contact III</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a
class="dropdown-item hover:!text-[#e31e24] dropdown-toggle" href="#"
data-bs-toggle="dropdown">Career</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='career.html'>Job
Listing I</a></li>
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='career2.html'>Job
Listing II</a></li>
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='career-job.html'>Job
Description</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu dropend"><a
class="dropdown-item hover:!text-[#e31e24] dropdown-toggle" href="#"
data-bs-toggle="dropdown">Utility</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='404.html'>404 Not
Found</a></li>
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='page-loader.html'>Page Loader</a></li>
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='signin.html'>Sign In
I</a></li>
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='signin2.html'>Sign
In II</a></li>
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='signup.html'>Sign Up
I</a></li>
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='signup2.html'>Sign
Up II</a></li>
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='terms.html'>Terms</a></li>
</ul>
</li>
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='pricing.html'>Pricing</a></li>
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='onepage.html'>One
Page</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle !text-[.85rem] !tracking-[normal] hover:!text-[#e31e24] after:!text-[#e31e24]"
href="#" data-bs-toggle="dropdown">Projects</a>
<div class="dropdown-menu dropdown-lg">
<div class="dropdown-lg-content">
<div>
<h6 class="dropdown-header !text-[#e31e24]">Project Pages</h6>
<ul class="pl-0 list-none">
<li><a class='dropdown-item hover:!text-[#e31e24]' href='projects.html'>Projects I</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='projects2.html'>Projects II</a>
</li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='projects3.html'>Projects III</a>
</li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='projects4.html'>Projects IV</a>
</li>
</ul>
</div>
<!-- /.column -->
<div>
<h6 class="dropdown-header !text-[#e31e24]">Single Projects</h6>
<ul class="pl-0 list-none">
<li><a class='dropdown-item hover:!text-[#e31e24]' href='single-project.html'>Single Project
I</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='single-project2.html'>Single
Project II</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='single-project3.html'>Single
Project III</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' 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 !text-[.85rem] !tracking-[normal] hover:!text-[#e31e24] after:!text-[#e31e24]"
href="#" data-bs-toggle="dropdown">Blog</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='blog.html'>Blog without
Sidebar</a></li>
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='blog2.html'>Blog with
Sidebar</a></li>
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='blog3.html'>Blog with
Left Sidebar</a></li>
<li class="dropdown dropdown-submenu dropend"><a
class="dropdown-item hover:!text-[#e31e24] dropdown-toggle" href="#"
data-bs-toggle="dropdown">Blog Posts</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='blog-post.html'>Post
without Sidebar</a></li>
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='blog-post2.html'>Post with Sidebar</a></li>
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' 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 !text-[.85rem] !tracking-[normal] hover:!text-[#e31e24] after:!text-[#e31e24]"
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 !text-[.85rem] !tracking-[normal] hover:!text-[#e31e24] after:!text-[#e31e24]"
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 !text-[#e31e24]">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 hover:!text-[#e31e24]' 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 hover:!text-[#e31e24]' 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 hover:!text-[#e31e24]' 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 hover:!text-[#e31e24]' 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 hover:!text-[#e31e24]' href='docs/credits.html'>Credits</a></li>
</ul>
<h6 class="dropdown-header !text-[#e31e24] 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 hover:!text-[#e31e24]' 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 hover:!text-[#e31e24]' 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 hover:!text-[#e31e24]' 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 hover:!text-[#e31e24]' 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 hover:!text-[#e31e24]' 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 hover:!text-[#e31e24]' 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 hover:!text-[#e31e24]' 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 !text-[#e31e24]">Elements</h6>
<ul class="pl-0 list-none xl:columns-3 lg:columns-3 ">
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/accordion.html'>Accordion</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/alerts.html'>Alerts</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/animations.html'>Animations</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/avatars.html'>Avatars</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/background.html'>Background</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/badges.html'>Badges</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/buttons.html'>Buttons</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/card.html'>Card</a>
</li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/carousel.html'>Carousel</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/dividers.html'>Dividers</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/form-elements.html'>Form Elements</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/image-hover.html'>Image Hover</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/image-mask.html'>Image Mask</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/lightbox.html'>Lightbox</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/player.html'>Media
Player</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/modal.html'>Modal</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/pagination.html'>Pagination</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/progressbar.html'>Progressbar</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/shadows.html'>Shadows</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/shapes.html'>Shapes</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/tables.html'>Tables</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/tabs.html'>Tabs</a>
</li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/text-animations.html'>Text Animations</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/text-highlight.html'>Text Highlight</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/tiles.html'>Tiles</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li><a class='dropdown-item hover:!text-[#e31e24]' 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 hidden xl:block lg:block md:block">
<a href="https://truncgil.com.tr"
class="btn btn-grape !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-[0.8rem]"
target="_blank">Purchase Now</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 overflow-hidden">
<div
class="container pt-36 xl:pt-[12.5rem] lg:pt-[12.5rem] md:pt-[12.5rem] pb-24 xl:pb-32 lg:pb-32 md:pb-32 !text-center !relative">
<div class="absolute" style="top: -12%; left: 50%; transform: translateX(-50%);" data-cue="fadeIn"><img
src="assets/img/photos/blurry.png" alt="image"></div>
<div class="flex flex-wrap mx-[-15px] !relative">
<div class="lg:w-8/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
<div class="absolute shape grape w-5 hidden xl:block lg:block" style="top: -5%; left: -15%;"
data-cue="fadeIn" data-delay="1500"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 219.5 219.5"
data-inject-url="assets/img/svg/pie.svg"
class="svg-inject icon-svg !w-full !h-full">
<path class="svg-fill"
d="M219.5 219.5H0c0-58.19 23.14-114.06 64.29-155.21A219.561 219.561 0 01219.5 0v219.5z"></path>
</svg></div>
<div class="absolute shape violet !w-[2.5rem] hidden xl:block lg:block" style="bottom: 30%; left: -20%;"
data-cue="fadeIn" data-delay="1500"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 457.71 446.45"
data-inject-url="assets/img/svg/scribble.svg"
class="svg-inject icon-svg !w-full !h-full">
<path class="svg-fill"
d="M205.62 442.54c-.51-.41-.99-.84-1.46-1.31-10.4-10.39-3.61-27.12 11.63-52.5 11.72-19.51 28.48-43.74 46.22-69.39 17.53-25.34 35.66-51.54 49.01-73.47 14.73-24.19 18.57-35.01 19.51-39.48-3.86-.28-13.15.3-33.78 6.52-19.71 5.94-43.09 14.92-65.7 23.6-63.8 24.49-85.35 31.41-96.51 19.5-3.21-3.43-7.62-11.04-1.12-23.54 2.49-4.79 6.64-10.51 12.68-17.5 10.4-12.03 25.04-26.34 40.55-41.49 14.02-13.7 28.53-27.87 39.53-40.11 9.93-11.04 14.15-17.43 15.94-20.82-3.43-.75-10.24-1.51-23.25-.92-14.99.68-33.44 2.89-51.28 5.02-46.92 5.61-74.09 8.33-86.81-.99-4.78-3.5-7.67-8.42-8.41-14.24-1.97-15.58 12.45-33.15 29.14-53.5 5.31-6.47 13.31-16.22 17.36-22.68-4.51-.38-12.43-.4-25.97 1.1-16.54 1.82-35.62 5.22-50.95 7.96-12.62 2.25-22.6 4.03-28.48 4.49C6.6 39.3.58 34.17.04 27.28c-.54-6.88 4.6-12.9 11.48-13.44 4.66-.37 14.58-2.13 26.06-4.18C54.56 6.63 75.7 2.86 94 1.07c26.41-2.6 40.16-.54 47.48 7.13 7.01 7.34 6.45 17.66-1.68 30.66-4.72 7.55-11.63 15.98-18.95 24.9-6.18 7.53-12.57 15.31-17.24 22.19-3.35 4.92-4.95 8.13-5.71 10.07 3 .54 9.09 1.08 20.87.43 13.21-.73 29.07-2.63 45.86-4.64 59.99-7.17 94.33-10.22 102.49 10.62 7.4 18.93-16.51 43.51-62.99 88.92-12.69 12.4-24.68 24.11-34.04 34.28-3.17 3.45-5.68 6.34-7.67 8.75 15.88-4.42 41.18-14.13 59.67-21.22 62.4-23.96 101.69-37.87 121.09-29.14 5.38 2.42 9.26 6.47 11.23 11.72 7.48 19.95-16.15 57.31-71.83 137.82-15.49 22.39-30.12 43.55-41.18 61.25-7.13 11.4-11.3 19.11-13.75 24.25 8.97-3.3 25.58-11 55.73-28.8 32.68-19.29 70.61-44.04 101.09-63.94 24.62-16.07 44.07-28.76 54.65-34.68 6.03-3.37 13.64-1.22 17.01 4.81 3.37 6.03 1.22 13.64-4.81 17.01-9.83 5.5-29.92 18.61-53.18 33.79-33.46 21.84-75.1 49.01-110.05 69.21-49.35 28.51-70.85 35.44-82.46 26.07z">
</path>
</svg></div>
<div class="absolute shape fuchsia w-6 hidden xl:block lg:block"
style="top: 0%; right: -25%; transform: rotate(70deg);" data-cue="fadeIn" data-delay="1500"><svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 411.42 329.24"
data-inject-url="assets/img/svg/tri.svg"
class="svg-inject icon-svg !w-full !h-full">
<g data-name="Layer 2">
<path class="svg-fill"
d="M164.34 21.92L8.72 251.15c-22.54 33.2 1.24 78.09 41.37 78.09h311.24c40.13 0 63.91-44.89 41.37-78.09L247.08 21.92a50 50 0 00-82.74 0z"
data-name="Layer 1"></path>
</g>
</svg></div>
<div class="absolute shape yellow w-6 hidden xl:block lg:block" style="bottom: 25%; right: -17%;"
data-cue="fadeIn" data-delay="1500"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"
data-inject-url="assets/img/svg/circle.svg"
class="svg-inject icon-svg !w-full !h-full">
<g data-name="Layer 2">
<path class="svg-fill"
d="M250 0C111.93 0 0 111.93 0 250s111.93 250 250 250 250-111.93 250-250S388.07 0 250 0zm0 425a175 175 0 11175-175 175 175 0 01-175 175z"
data-name="Layer 1"></path>
</g>
</svg></div>
<div data-cues="slideInDown" data-group="page-title">
<h1
class="xl:!text-[3.2rem] !text-[calc(1.445rem_+_2.34vw)] font-semibold !leading-[1.15] !mb-5 md:mx-10 lg:mx-0 xl:mx-0">
Create a powerful but effortless website for <br><span class="rotator-fade !text-[#e31e24] ">Tailwind
CSS, your
business.,your portfolio.,your startup.,digital marketing.</span></h1>
<p class="lead !text-[1.2rem] !leading-[1.6] !mb-8">You can create your website in minutes with the help
of countless amazing features of Trunçgil.</p>
</div>
<div class="xl:!flex lg:!flex md:!flex justify-center" data-cues="slideInDown" data-delay="600">
<span><a href="#demos"
class="btn btn-lg btn-grape !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] btn-icon btn-icon-end !rounded-[0.8rem] xl:mx-1 lg:mx-1 md:mx-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0 scroll">See
Demo Pages <i class="uil uil-arrow-down-right before:content-['\e944'] !ml-[0.3rem]"></i></a></span>
<span><a href="https://truncgil.com.tr?s_rank=4"
class="btn btn-lg btn-fuchsia !text-white !bg-[#e668b3] border-[#e668b3] hover:text-white hover:bg-[#e668b3] hover:!border-[#e668b3] active:text-white active:bg-[#e668b3] active:border-[#e668b3] disabled:text-white disabled:bg-[#e668b3] disabled:border-[#e668b3] btn-icon btn-icon-end !rounded-[0.8rem] xl:mx-1 lg:mx-1 md:mx-1"
target="_blank">VueJs Version <i
class="uil uil-arrow-up-right !ml-[.3rem] before:content-['\e950']"></i></a></span>
</div>
<!-- /div -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="swiper-container swiper-auto swiper-auto-xs !mb-8 relative !z-10" data-margin="40" data-nav="false"
data-dots="false" data-centered="true" data-loop="true" data-items-auto="true" data-autoplay="true"
data-autoplaytime="1" data-drag="false" data-resizeupdate="false" data-speed="7000">
<div class="swiper overflow-visible pointer-events-none">
<div class="swiper-wrapper ticker">
<div class="swiper-slide">
<figure
class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
<img class="!rounded-[.8rem]" src="assets/img/photos/ma8.jpg"
alt="" />
</figure>
</div>
<div class="swiper-slide">
<figure
class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
<img class="!rounded-[.8rem]" src="assets/img/photos/ma9.jpg"
alt="" />
</figure>
</div>
<div class="swiper-slide">
<figure
class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
<img class="!rounded-[.8rem]" src="assets/img/photos/ma10.jpg"
alt="" />
</figure>
</div>
<div class="swiper-slide">
<figure
class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
<img class="!rounded-[.8rem]" src="assets/img/photos/ma11.jpg"
alt="" />
</figure>
</div>
<div class="swiper-slide">
<figure
class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
<img class="!rounded-[.8rem]" src="assets/img/photos/ma12.jpg"
alt="" />
</figure>
</div>
<div class="swiper-slide">
<figure
class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
<img class="!rounded-[.8rem]" src="assets/img/photos/ma13.jpg"
alt="" />
</figure>
</div>
<div class="swiper-slide">
<figure
class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
<img class="!rounded-[.8rem]" src="assets/img/photos/ma14.jpg"
alt="" />
</figure>
</div>
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
<div class="swiper-container swiper-auto swiper-auto-xs !mb-10 xl:!mb-14 lg:!mb-14 md:!mb-14 relative !z-10"
data-margin="40" data-nav="false" data-dots="false" data-centered="true" data-loop="true" data-items-auto="true"
data-autoplay="true" data-autoplaytime="1" data-drag="false" data-resizeupdate="false" data-speed="7000">
<div class="swiper overflow-visible pointer-events-none" dir="rtl">
<div class="swiper-wrapper ticker">
<div class="swiper-slide">
<figure
class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
<img class="!rounded-[.8rem]" src="assets/img/photos/ma1.jpg"
alt="" />
</figure>
</div>
<div class="swiper-slide">
<figure
class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
<img class="!rounded-[.8rem]" src="assets/img/photos/ma2.jpg"
alt="" />
</figure>
</div>
<div class="swiper-slide">
<figure
class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
<img class="!rounded-[.8rem]" src="assets/img/photos/ma3.jpg"
alt="" />
</figure>
</div>
<div class="swiper-slide">
<figure
class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
<img class="!rounded-[.8rem]" src="assets/img/photos/ma4.jpg"
alt="" />
</figure>
</div>
<div class="swiper-slide">
<figure
class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
<img class="!rounded-[.8rem]" src="assets/img/photos/ma5.jpg"
alt="" />
</figure>
</div>
<div class="swiper-slide">
<figure
class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
<img class="!rounded-[.8rem]" src="assets/img/photos/ma6.jpg"
alt="" />
</figure>
</div>
<div class="swiper-slide">
<figure
class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
<img class="!rounded-[.8rem]" src="assets/img/photos/ma7.jpg"
alt="" />
</figure>
</div>
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</section>
<!-- /section -->
<section class="wrapper !bg-[#f0f0f8] overflow-hidden" id="demos">
<div class="container pt-[6rem]">
<div class="flex flex-wrap mx-[-15px] !mb-10">
<div class="md:w-9/12 lg:w-8/12 xl:w-7/12 xxl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<div class="counter-wrapper">
<h3
class="xl:!text-[3.5rem] !text-[calc(1.475rem_+_2.7vw)] !mb-3 !text-[#e31e24] !leading-none !text-center counter">
34</h3>
</div>
<h2
class="!text-[calc(1.345rem_+_1.14vw)] font-bold !leading-[1.2] xl:!text-[2.2rem] !mb-3 !text-center xxl:!px-8">
Functional, impressive and rich demos to start with</h2>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="demos-wrapper !text-center !mb-24 xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem]">
<h2 class="!text-[0.85rem] !tracking-[.02rem] !leading-[1.35] uppercase !text-[#aab0bc] !mb-6">New Demos</h2>
<div class="flex flex-wrap mx-[-15px] !mb-10 xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-70px]">
<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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo18.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d18.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo18.html'>Layout 18</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo19.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d19.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo19.html'>Layout 19</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo20.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d20.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo20.html'>Layout 20</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo21.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d21.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo21.html'>Layout 21</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo22.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d22.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo22.html'>Layout 22</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo23.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d23.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo23.html'>Layout 23</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo24.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d24.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo24.html'>Layout 24</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo25.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d25.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo25.html'>Layout 25</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo26.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d26.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo26.html'>Layout 26</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo27.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d27.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo27.html'>Layout 27</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo28.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d28.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo28.html'>Layout 28</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo29.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d29.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo29.html'>Layout 29</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo30.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d30.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo30.html'>Layout 30</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo31.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d31.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo31.html'>Layout 31</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo32.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d32.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo32.html'>Layout 32</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo33.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d33.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo33.html'>Layout 33</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo34.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d34.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo34.html'>Layout 34</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px] hidden xl:!flex lg:!flex md:!flex items-center justify-center flex-col">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 245.36"
data-inject-url="assets/img/icons/solid/layers.svg"
class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem] solid-duo text-grape-fuchsia xl:!mt-[-2.5rem] lg:!mt-[-2.5rem] md:!mt-[-2.5rem] mb-4">
<path class="fill-primary"
d="M128 117.36a7.92 7.92 0 01-3.1-.63L4.9 66.06a8 8 0 010-14.75L124.9.64a7.9 7.9 0 016.22 0l120 50.67a8 8 0 010 14.75l-120 50.67a7.92 7.92 0 01-3.12.63zm123.1 19.29l-12.49-5.28-101.28 42.75a24 24 0 01-18.69 0L17.39 131.36l-12.51 5.28a8 8 0 000 14.75l120 50.67a8.06 8.06 0 006.2 0l120-50.67a8 8 0 000-14.74z">
</path>
<path class="fill-secondary"
d="M251.1 94l-12.49-5.3-101.28 42.75a24 24 0 01-18.69 0L17.39 88.68 4.88 94a8 8 0 000 14.77l120 50.67a7.94 7.94 0 006.2 0l120-50.67a8 8 0 000-14.75zm0 85.31L238.61 174l-101.28 42.78a23.66 23.66 0 01-9.33 1.9 23.91 23.91 0 01-9.36-1.9L17.39 174l-12.51 5.31a8 8 0 000 14.75l120 50.67a7.94 7.94 0 006.2 0l120-50.67a8 8 0 000-14.75z">
</path>
</svg>
<h3 class="!text-[0.85rem] !tracking-[0.02rem] uppercase !text-[#aab0bc] !mb-4">Scroll for more</h3>
<a href="#prev-demos"
class="btn btn-lg btn-grape !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] btn-icon btn-icon-end !rounded-[0.8rem] mx-1 scroll">Previous
Demos <i class="uil uil-arrow-down-right before:content-['\e944'] !ml-[0.3rem]"></i></a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<h2
class="!text-[0.85rem] !tracking-[.02rem] !leading-[1.35] uppercase !text-[#aab0bc] pt-24 !mt-[-2rem] !mb-6"
id="prev-demos">Previous Demos</h2>
<div class="flex flex-wrap mx-[-15px] !mb-10 xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-70px]">
<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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo1.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d1.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo1.html'>Layout 1</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo2.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d2.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo2.html'>Layout 2</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo3.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d3.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo3.html'>Layout 3</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo4.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d4.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo4.html'>Layout 4</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo5.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d5.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo5.html'>Layout 5</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo6.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d6.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo6.html'>Layout 6</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo7.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d7.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo7.html'>Layout 7</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo8.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d8.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo8.html'>Layout 8</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo9.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d9.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo9.html'>Layout 9</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo10.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d10.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo10.html'>Layout 10</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo11.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d11.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo11.html'>Layout 11</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo12.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d12.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo12.html'>Layout 12</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo13.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d13.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo13.html'>Layout 13</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo14.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d14.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo14.html'>Layout 14</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo15.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d15.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo15.html'>Layout 15</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo16.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d16.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo16.html'>Layout 16</a></h2>
</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 xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[70px]">
<figure class="lift !rounded-[0.8rem] !mb-6"><a href='demo17.html' target='_blank'><img
class="shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[.8rem]"
src="assets/img/demos/d17.jpg" alt="image"></a></figure>
<h2 class="!text-[1.1rem] !mb-0 !leading-[1.35]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='demo17.html'>Layout 17</a></h2>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.demos-wrapper -->
<div class="flex flex-wrap mx-[-15px] !mb-8 !text-center">
<div class="md:w-11/12 lg:w-10/12 xl:w-8/12 w-full xxl:w-7/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<h2
class="!text-[calc(1.345rem_+_1.14vw)] font-bold !leading-[1.2] xl:!text-[2.2rem] !mt-3 !mb-3 lg:!px-10 xl:!px-0">
Save your time and money by choosing Trunçgil for your website.</h2>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="flex flex-wrap mx-[-15px] !mb-14 xl:!mb-[4.5rem] lg:!mb-[4.5rem] md:!mb-[4.5rem]">
<div class="lg:w-10/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<div class="flex flex-wrap mx-[-15px] items-center counter-wrapper !mt-[-30px] !text-center">
<div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<h3
class="counter xl:!text-[2.5rem] !text-[calc(1.375rem_+_1.5vw)] !text-[#e31e24] !mb-1 !tracking-[normal] !leading-none">
250+</h3>
<p class="!font-medium !text-[0.9rem] !mb-0">UI elements</p>
</div>
<!--/column -->
<div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<h3
class="counter xl:!text-[2.5rem] !text-[calc(1.375rem_+_1.5vw)] !text-[#e31e24] !mb-1 !tracking-[normal] !leading-none">
150+</h3>
<p class="!font-medium !text-[0.9rem] !mb-0">Pre-made blocks</p>
</div>
<!--/column -->
<div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<h3
class="counter xl:!text-[2.5rem] !text-[calc(1.375rem_+_1.5vw)] !text-[#e31e24] !mb-1 !tracking-[normal] !leading-none">
100+</h3>
<p class="!font-medium !text-[0.9rem] !mb-0">Neatly coded pages</p>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div
class="flex flex-wrap mx-[-15px] xl:mx-0 lg:mx-0 !mt-[-50px] items-center !mb-24 xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem]">
<div
class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] xl:px-0 lg:px-0 !mt-[50px] max-w-full !relative">
<div class="absolute"
style="top: 50%; left: 50%; width: 140%; height: auto; transform: translate(-50%,-50%); z-index:0"><img
class="w-full" src="assets/img/photos/blurry.png" alt="image"></div>
<figure class="!relative" style="z-index: 2;"><img src="assets/img/photos/mi1.png"
alt="image"></figure>
</div>
<!--/column -->
<div
class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] xl:px-0 lg:px-0 !mt-[50px] max-w-full !ml-auto">
<div class="flex flex-row !mb-6">
<div>
<div
class="svg-bg bg-[rgba(255,255,255)] opacity-100 !rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !mr-5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.97 256"
data-inject-url="assets/img/icons/solid/puzzle.svg"
class="svg-inject icon-svg solid-duo text-grape-fuchsia">
<path class="fill-secondary"
d="M221.86 91a33.65 33.65 0 01-22.72-8.75v40.21h-27.2a43.26 43.26 0 003.73-17.71 44.8 44.8 0 10-86 17.71H56.85v-111A11.42 11.42 0 0168.26 0h119.47a11.42 11.42 0 0111.41 11.41v20.05A34.1 34.1 0 11221.86 91z">
</path>
<path class="fill-primary"
d="M142.79 181.25a34.13 34.13 0 0033.55 40.62 33.66 33.66 0 0022.75-8.77v31.52A11.41 11.41 0 01187.72 256H68.28a11.41 11.41 0 01-11.38-11.38V213.1a34.12 34.12 0 11-22.75-59.5 33.71 33.71 0 0122.75 8.77v-29.2H112a34.12 34.12 0 1137.76 0h49.37v29.2a34.09 34.09 0 00-56.3 18.88z">
</path>
</svg>
</div>
</div>
<div>
<h4 class="!mb-1">Color and Font Options</h4>
<p class="!mb-0">Easily customize colors and fonts, or choose from provided options.</p>
</div>
</div>
<div class="flex flex-row !mb-6">
<div>
<div
class="svg-bg bg-[rgba(255,255,255)] opacity-100 !rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !mr-5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
data-inject-url="assets/img/icons/solid/pen-tool.svg"
class="svg-inject icon-svg solid-duo text-grape-fuchsia">
<g data-name="Layer 2">
<path class="fill-primary"
d="M162.62 162.53l17.14-27.87a10.65 10.65 0 00.8-9.6L137.89 20a10.68 10.68 0 00-19.78 0L75.44 125.06a10.71 10.71 0 00.8 9.6l17.14 27.87a18.56 18.56 0 00-9.2 13.68L74.74 247a7.94 7.94 0 007.93 9h90.67a8 8 0 007.92-9.07l-9.44-70.74a18.56 18.56 0 00-9.2-13.66zm-45.29-83.91v28.05a10.67 10.67 0 1021.34 0v-28l20.08 49.46L139.14 160h-22.29l-19.62-31.92z">
</path>
<path class="fill-secondary"
d="M248 0h-26.67a8 8 0 00-8 8v2.67H42.66V8a8 8 0 00-8-8H8a8 8 0 00-8 8v26.67a8 8 0 008 8h26.67a8 8 0 008-8V32h19.84a111.78 111.78 0 00-46.38 88.24 21.32 21.32 0 1021.33.13 90.58 90.58 0 01181.1 0 21.33 21.33 0 1021.33-.13A111.84 111.84 0 00193.5 32h19.84v2.67a8 8 0 008 8H248a8 8 0 008-8V8a8 8 0 00-8-8z">
</path>
</g>
</svg>
</div>
</div>
<div>
<h4 class="!mb-1">Cool Features & Elements</h4>
<p class="!mb-0">Equipped with stunning features and elements for designing appealing pages.</p>
</div>
</div>
<div class="flex flex-row">
<div>
<div
class="svg-bg bg-[rgba(255,255,255)] opacity-100 !rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !mr-5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.98 245.34"
data-inject-url="assets/img/icons/solid/share.svg"
class="svg-inject icon-svg solid-duo text-grape-fuchsia">
<g data-name="Layer 2">
<path class="fill-secondary"
d="M219.1 108.48v7.68A11.89 11.89 0 01207.15 128h-19.63c-5.76 0-12-4.27-12-13.76v-5.76zm26.24-60.8a47.26 47.26 0 01-17.6 36.91 22.89 22.89 0 00-8.32 13.23h-44.06a20 20 0 00-7.79-12.69 47.13 47.13 0 01-18.24-38.4C149.86 21.34 171.09.33 196.58 0a47.34 47.34 0 0134.56 13.88 46.83 46.83 0 0114.2 33.79z">
</path>
<path class="fill-primary"
d="M5.25 117.34A5.34 5.34 0 000 122.67v98.64A2.68 2.68 0 002.67 224H28a5.33 5.33 0 005.13-3.87l23.6-83.18A10.66 10.66 0 0050.1 124c-9.67-3.52-24.5-7-44.85-6.66zM234.67 176c-21.33 0-64 27-85.33 27S104 186.65 104 186.65s28.74 5.35 45.33 5.35 21.33-5.66 21.33-13.33c0-18.67-31.72-21.56-47.75-24-15.74-8.76-23.92-15.69-50-17.9a28.85 28.85 0 01-.81 4.54l-21.43 75.5c24.27 11 66.05 28.53 88 28.53 32 0 117.32-42.67 117.32-53.33S245.33 176 234.67 176z">
</path>
</g>
</svg>
</div>
</div>
<div>
<h4 class="!mb-1">Modern Portfolio Layouts</h4>
<p class="!mb-0">Effortlessly create and maintain a visually stunning and impactful portfolio.</p>
</div>
</div>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="flex flex-wrap mx-[-15px] xl:mx-0 lg:mx-0 !mt-[-50px] items-center">
<div
class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] xl:px-0 lg:px-0 !mt-[50px] max-w-full !relative xl:!order-2 lg:!order-2">
<div class="absolute"
style="top: 50%; left: 50%; width: 140%; height: auto; transform: translate(-50%,-50%); z-index:0"><img
class="w-full" src="assets/img/photos/blurry.png" alt="image"></div>
<figure class="!relative" style="z-index: 2;"><img src="assets/img/photos/mi2.png"
alt="image"></figure>
</div>
<!--/column -->
<div
class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] xl:px-0 lg:px-0 !mt-[50px] max-w-full !mr-auto">
<div class="flex flex-row !mb-6">
<div>
<div
class="svg-bg bg-[rgba(255,255,255)] opacity-100 !rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !mr-5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
data-inject-url="assets/img/icons/solid/devices.svg"
class="svg-inject icon-svg solid-duo text-grape-fuchsia">
<path class="fill-primary"
d="M226.67 0H80a29.35 29.35 0 00-29.33 29.33v13.33H72v-8a13.34 13.34 0 0113.33-13.33h136a13.34 13.34 0 0113.33 13.33v186.67a13.35 13.35 0 01-13.33 13.33h-82.74A44.07 44.07 0 01132.7 256h94a29.33 29.33 0 0029.3-29.33V29.33A29.35 29.35 0 00226.67 0z">
</path>
<path class="fill-secondary"
d="M97.17 64h-77C9 64 0 73.87 0 86v148c0 12.13 9 22 20.16 22h77c11.12 0 20.16-9.87 20.16-22V86c.01-12.13-9.03-22-20.15-22zm5.5 168c0 4.42-3.28 8-7.33 8H22c-4.05 0-7.33-3.58-7.33-8V85.33c0-4.42 3.28-8 7.33-8h3.66c4.05 0 7.33 3.58 7.33 8s3.28 8 7.33 8H77c4.05 0 7.33-3.59 7.33-8s3.28-8 7.33-8h3.66c4 0 7.33 3.58 7.33 8V232z">
</path>
<path class="fill-primary" d="M154.67 186.67A13.33 13.33 0 10168 200a13.35 13.35 0 00-13.33-13.33z">
</path>
</svg>
</div>
</div>
<div>
<h4 class="!mb-1">Well-Written Code</h4>
<p class="!mb-0">Pixel-perfect and easily editable code with comprehensive comments.</p>
</div>
</div>
<div class="flex flex-row !mb-6">
<div>
<div
class="svg-bg bg-[rgba(255,255,255)] opacity-100 !rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !mr-5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"
data-inject-url="assets/img/icons/solid/safe.svg"
class="svg-inject icon-svg solid-duo text-grape-fuchsia">
<g data-name="Layer 2">
<path class="fill-secondary"
d="M186.58 19.47l-56-19a8 8 0 00-5.16 0l-56 19A8 8 0 0064 27.06v42.86c0 52.32 58.38 77.73 60.88 78.8a8.1 8.1 0 003.12.64 7.85 7.85 0 003.12-.64c2.5-1.07 60.88-26.5 60.88-78.82V27.06a8 8 0 00-5.42-7.59zm-23.52 40.45l-29.33 37.33a10.67 10.67 0 01-7.35 4h-1a10.7 10.7 0 01-6.94-2.56l-18.67-16a10.66 10.66 0 0113.83-16.11l10.22 8.75 22.47-28.58a10.66 10.66 0 0116.77 13.17z">
</path>
<path class="fill-primary"
d="M237.34 42.67h-24V64h21.33v117.33H21.33V64h21.33V42.67h-24A18.74 18.74 0 000 61.33v144A18.75 18.75 0 0018.66 224h81.69c-1.25 5.34-4.57 14-13.45 22.9a5.33 5.33 0 003.77 9.1h74.67a5.34 5.34 0 003.78-9.1c-8.86-8.87-12.27-17.54-13.6-22.9h81.82A18.75 18.75 0 00256 205.33v-144a18.74 18.74 0 00-18.66-18.66z">
</path>
</g>
</svg>
</div>
</div>
<div>
<h4 class="!mb-1">Gorgeous Shop Layouts</h4>
<p class="!mb-0">Present your products to your visitors in an efficient and visually appealing manner.
</p>
</div>
</div>
<div class="flex flex-row">
<div>
<div
class="svg-bg bg-[rgba(255,255,255)] opacity-100 !rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !mr-5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256.01 256"
data-inject-url="assets/img/icons/solid/globe-2.svg"
class="svg-inject icon-svg solid-duo text-grape-fuchsia">
<path class="fill-secondary"
d="M128.11 256h-.24a126.37 126.37 0 01-22-1.84 8 8 0 112.72-15.76A114.68 114.68 0 00128 240a8.06 8.06 0 018.07 8 8 8 0 01-7.94 8zm33.52-12.5a8 8 0 014.77-10.25 112.18 112.18 0 0017.66-8.25 8 8 0 018 13.85 128.36 128.36 0 01-20.19 9.46 8 8 0 01-10.26-4.79zm-97.5-4.56a128.83 128.83 0 01-18.27-12.78 8 8 0 1110.25-12.27 114.33 114.33 0 0016 11.2 8 8 0 11-8 13.85zm150.69-27.71a8 8 0 01-1-11.26A112.91 112.91 0 00225 184a8 8 0 0113.86 8 130.3 130.3 0 01-12.78 18.26 8 8 0 01-11.28 1zm-197.59-19A128.41 128.41 0 017.76 172a8 8 0 1115-5.49 112.8 112.8 0 008.29 17.67 8 8 0 11-13.84 8zM244.8 156.7a8 8 0 01-6.5-9.26A112.3 112.3 0 00240 128a8.23 8.23 0 018-8.26 7.81 7.81 0 018 8.76 124.89 124.89 0 01-1.92 21.72 8 8 0 01-9.26 6.48zM8 136.13a7.89 7.89 0 01-8-7.87s.61-15 1.86-22.18a8 8 0 1115.76 2.7A114.47 114.47 0 0016 128a8.09 8.09 0 01-8 8.13zm225.1-46.88a110.41 110.41 0 00-8.32-17.63 8 8 0 0113.83-8.08 129 129 0 019.52 20.17 8 8 0 01-15 5.54zM19.9 75.18A8 8 0 0117 64.26 126.41 126.41 0 0129.73 46 8 8 0 1142 56.21a112.72 112.72 0 00-11.17 16 8 8 0 01-10.93 3zm179.76-33.24a113.17 113.17 0 00-16-11.16 8 8 0 117.95-13.87 127.39 127.39 0 0118.3 12.75 8 8 0 01-10.24 12.28zM60.78 28.26a8 8 0 012.88-11 128 128 0 0120.18-9.44 8 8 0 115.52 15 112.17 112.17 0 00-17.63 8.31 8 8 0 01-11-2.88zm86.29-10.64A112.4 112.4 0 00128 16a8.17 8.17 0 01-8.19-8 7.84 7.84 0 017.81-8h.38a127.72 127.72 0 0121.8 1.86 8 8 0 01-2.71 15.76z">
</path>
<path class="fill-primary"
d="M128 32a96 96 0 1096 96 96.11 96.11 0 00-96-96zm62.61 145.66a103 103 0 00-14.49-7.76 160.22 160.22 0 005-33.9h26.48a79.47 79.47 0 01-17.01 41.66zM48.4 136h26.48a161.6 161.6 0 005 33.9 104.11 104.11 0 00-14.5 7.76A79.47 79.47 0 0148.4 136zm17-57.66a103.14 103.14 0 0014.5 7.76 160.2 160.2 0 00-5 33.9H48.4a79.47 79.47 0 0117-41.66zM120 79.7a106.49 106.49 0 01-20-3.43c5.41-13 12.6-22.11 20-26zm0 16V120H90.86A145.12 145.12 0 0195 91.49a122.72 122.72 0 0025 4.21zm0 40.3v24.3a121.26 121.26 0 00-25 4.23A144.37 144.37 0 0190.86 136H120zm0 40.3v29.48c-7.4-3.94-14.59-13-20-26a104.12 104.12 0 0120-3.44zm16 0a106.21 106.21 0 0120 3.43c-5.4 13-12.59 22.11-20 26zm0-16V136h29.1a144.37 144.37 0 01-4.16 28.51 122.49 122.49 0 00-25-4.21zm0-40.3V95.7a121.14 121.14 0 0025-4.23 142.91 142.91 0 014.1 28.53H136zm0-40.3V50.24c7.41 3.94 14.6 13 20 26a104.36 104.36 0 01-20 3.46zm27.94-23.08a80.19 80.19 0 0115.25 10 88.15 88.15 0 01-8.19 4.21 98.1 98.1 0 00-7.12-14.21zm-79 14.21a86.72 86.72 0 01-8.12-4.25 80.12 80.12 0 0115.24-10 95.14 95.14 0 00-7.12 14.25zm0 114.34a98.11 98.11 0 007.12 14.21 80.12 80.12 0 01-15.24-10 86.72 86.72 0 018.12-4.21zm86.1 0a88.15 88.15 0 018.13 4.25 80.19 80.19 0 01-15.25 10 99.14 99.14 0 007.08-14.25zM181.1 120a161 161 0 00-5-33.9 104.57 104.57 0 0014.49-7.76 79.47 79.47 0 0117 41.66z">
</path>
</svg>
</div>
</div>
<div>
<h4 class="!mb-1">Fully Responsive Layouts</h4>
<p class="!mb-0">Adjusts to varying screen sizes, ensuring seamless compatibility across all devices.
</p>
</div>
</div>
</div>
<!--/column -->
</div>
<!--/.row -->
<div
class="flex flex-wrap mx-[-15px] !text-center !mt-[7rem] xl:!mt-[9rem] lg:!mt-[9rem] md:!mt-[9rem] !mb-9 xl:!mb-12 lg:!mb-12 md:!mb-12">
<div class="md:w-11/12 lg:w-10/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.345rem_+_1.14vw)] font-bold !leading-[1.2] xl:!text-[2.2rem] !mb-0 lg:!px-10 xl:!px-0">
Build your website using the powerful features of Trunçgil</h2>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container-fluid xl:!px-0 pb-24 xl:pb-32 lg:pb-32 md:pb-32">
<div class="swiper-container swiper-auto relative z-10" data-margin="40" data-nav="false" data-centered="true"
data-loop="true" data-items-auto="true">
<div class="swiper overflow-visible">
<div class="swiper-wrapper">
<div class="swiper-slide">
<figure
class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
<img class="!rounded-[.8rem]" src="assets/img/photos/bp1.jpg"
alt="" />
</figure>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure
class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
<img class="!rounded-[.8rem]" src="assets/img/photos/bp2.jpg"
alt="" />
</figure>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure
class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
<img class="!rounded-[.8rem]" src="assets/img/photos/bp3.jpg"
alt="" />
</figure>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure
class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
<img class="!rounded-[.8rem]" src="assets/img/photos/bp4.jpg"
alt="" />
</figure>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure
class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
<img class="!rounded-[.8rem]" src="assets/img/photos/bp5.jpg"
alt="" />
</figure>
</div>
<!--/.swiper-slide -->
<div class="swiper-slide">
<figure
class="!rounded-[0.8rem] shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px]">
<img class="!rounded-[.8rem]" src="assets/img/photos/bp6.jpg"
alt="" />
</figure>
</div>
<!--/.swiper-slide -->
</div>
<!--/.swiper-wrapper -->
</div>
<!-- /.swiper -->
</div>
<!-- /.swiper-container -->
</div>
<!-- /.container -->
<div class="container pb-6 xl:pb-8 lg:pb-8 md:pb-8">
<div
class="flex flex-wrap mx-[-15px] row-cols-2 row-cols-md-4 row-cols-lg-5 xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] !text-center justify-center pb-24 xl:pb-32 lg:pb-32 md:pb-32">
<div
class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
<img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi1.png"
alt="image">
<h4>Built with <br> tailwindcss</h4>
</div>
<!--/column -->
<div
class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
<img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi2.png"
alt="image">
<h4>SEO-friendly <br> Coding</h4>
</div>
<!--/column -->
<div
class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
<img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi3.png"
alt="image">
<h4>Valid W3C <br> HTML5 & CSS3</h4>
</div>
<!--/column -->
<div
class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
<img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi4.png"
alt="image">
<h4>Retina-ready <br> Graphics</h4>
</div>
<!--/column -->
<div
class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
<img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi5.png"
alt="image">
<h4>One-page <br> Layout Option</h4>
</div>
<!--/column -->
<div
class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
<img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi6.png"
alt="image">
<h4>Isotope <br> Filterable Gallery</h4>
</div>
<!--/column -->
<div
class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
<img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi7.png"
alt="image">
<h4>Mailchimp <br> Compatible </h4>
</div>
<!--/column -->
<div
class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
<img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi8.png"
alt="image">
<h4>Contact Form <br> w/o Page Refresh</h4>
</div>
<!--/column -->
<div
class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
<img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi9.png"
alt="image">
<h4>Animations <br> on Page Scroll</h4>
</div>
<!--/column -->
<div
class="col xl:w-1/5 lg:w-1/5 md:w-3/12 w-6/12 flex-[0_0_auto] max-w-full !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
<img class="!mb-4 m-[0_auto]" src="assets/img/demos/fi10.png"
alt="image">
<h4>Top-Notch Support <br> & Free Updates</h4>
</div>
<!--/column -->
</div>
<!--/.row -->
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
<div
class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full !relative">
<div class="absolute"
style="top: 50%; left: 50%; width: 130%; height: auto; transform: translate(-50%,-50%); z-index:0"><img
class="w-full" src="assets/img/photos/blurry.png" alt="image"></div>
<div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
<div
class="md:w-6/12 lg:w-6/12 xl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !self-end xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
<div
class="card !shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[0.8rem]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote
class="!text-[0.85rem] !leading-[1.7] !font-normal !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Trunçgil is really attractive and it saves my time. The support team is really amazing.”</p>
<div class="flex items-center text-left">
<div class="info p-0">
<h5 class="!mb-0">stevenstrange</h5>
</div>
</div>
</blockquote>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div
class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !self-end xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
<div
class="card !shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[0.8rem]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote
class="!text-[0.85rem] !leading-[1.7] !font-normal !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“This is just next level stuff in terms of quality, docs and features. I don't think I'm going
to need or tolerate any other template from now on.”</p>
<div class="flex items-center text-left">
<div class="info p-0">
<h5 class="!mb-0">70656e6973</h5>
</div>
</div>
</blockquote>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div
class="md:w-6/12 lg:w-6/12 xl:w-5/12 flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[8.33333333%] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
<div
class="card !shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[0.8rem]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote
class="!text-[0.85rem] !leading-[1.7] !font-normal !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“I've been a Themeforest user for almost 10 years and I have purchased well over 100 themes
during my time. This theme is amongst the best here.”</p>
<div class="flex items-center text-left">
<div class="info p-0">
<h5 class="!mb-0">bmwe92m3</h5>
</div>
</div>
</blockquote>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
<div
class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !self-start xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
<div
class="card !shadow-[rgba(30,34,40,0.02)_0_2px_1px,rgba(30,34,40,0.02)_0_4px_2px,rgba(30,34,40,0.02)_0_8px_4px,rgba(30,34,40,0.02)_0_16px_8px,rgba(30,34,40,0.03)_0_32px_16px] !rounded-[0.8rem]">
<div class="card-body flex-[1_1_auto] p-[40px]">
<blockquote
class="!text-[0.85rem] !leading-[1.7] !font-normal !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
<p>“Simply the best templates that I have bought so far. Super clean code, intuitive
documentations, and most important of all the best design.”</p>
<div class="flex items-center text-left">
<div class="info p-0">
<h5 class="!mb-0">oziuji</h5>
</div>
</div>
</blockquote>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div
class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
<h2
class="!text-[calc(1.345rem_+_1.14vw)] font-bold !leading-[1.2] xl:!text-[2.2rem] !mb-4 xl:!mt-[-1.5rem] lg:!mt-[-1.5rem]">
Our top priority is ensuring customer satisfaction.</h2>
<p class="lead !text-[1.1rem] !leading-[1.6] !mb-6">Don't take our word for it. Hear from customers about
Trunçgil.</p>
<a href="https://themeforest.net/item/Trunçgil-modern-multipurpose-tailwind-css-template/reviews/51340309"
class="btn btn-lg btn-grape !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] btn-icon btn-icon-end !rounded-[0.8rem]"
target="_blank">All Reviews <i
class="uil uil-arrow-up-right !ml-[.3rem] before:content-['\e950']"></i></a>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/.container -->
</section>
<!-- /section -->
<section class="wrapper overflow-hidden">
<div class="container pt-24 xl:pt-32 lg:pt-32 md:pt-32 !text-center !relative">
<div class="absolute" style="top: -7%; left: 50%; transform: translateX(-50%);"><img
src="assets/img/photos/blurry.png" alt="image"></div>
<div class="flex flex-wrap mx-[-15px] !relative !mb-9 xl:!mb-12 lg:!mb-12 md:!mb-12">
<div class="lg:w-10/12 xl:w-9/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<div>
<img class="m-[0_auto]" src="assets/img/demos/icon-grape.png"
alt="image">
<h1 class="font-semibold !leading-[1.15] xl:!text-[3.2rem] !text-[calc(1.445rem_+_2.34vw)] !mt-5 !mb-5">
Think
unique and make a difference with Trunçgil.</h1>
<p class="lead !text-[1.2rem] !leading-[1.6] !mb-8 lg:!px-14 xl:!px-[4.5rem] xxl:!px-10">We are trusted by
thousands of clients. Join them now and easily create your stunning website in no time.</p>
</div>
<div class="flex justify-center">
<span><a href="https://truncgil.com.tr"
class="btn btn-lg btn-grape !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] btn-icon btn-icon-end !rounded-[0.8rem]"
target="_blank">Buy Trunçgil <i
class="uil uil-arrow-up-right !ml-[.3rem] before:content-['\e950']"></i></a></span>
</div>
<!-- /div -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container !text-center">
<img class="max-w-full h-auto !relative m-[0_auto]" style="z-index: 2;" src="assets/img/demos/f1.png"
alt="image">
</div>
</section>
<!-- /section -->
</div>
<!-- progress wrapper -->
<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/ by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 10:56:19 GMT -->
</html>
Reference in New Issue View Git Blame Copy Permalink