Ümit Tunç
1705 lines
113 KiB
HTML
1705 lines
113 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
|
|
<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/demo34 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 10:59:45 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/purple.css">
|
|
<link rel="preload" href="../assets/css/fonts/thicccboi.css" as="style" onload="this.rel='stylesheet'">
|
|
<style>
|
|
.filter:not(.basic-filter) ul li a.active,
|
|
.filter:not(.basic-filter) ul li a:hover {
|
|
color: #747ed1;
|
|
}
|
|
|
|
.navbar.navbar-light.fixed .btn:not(.btn-expand):not(.btn-gradient) {
|
|
background: #747ed1 !important;
|
|
border-color: #747ed1 !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.navbar-expand-lg .navbar-collapse .dropdown-toggle:after {
|
|
color: #ffffff !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="grow shrink-0">
|
|
<header class="relative wrapper !bg-[#f2f3fb]">
|
|
<div class="alert !bg-[#747ed1] !text-white fade show !rounded-none !border-0 !mb-1 !text-center" role="alert">
|
|
<div class="container">
|
|
<div class="alert-inner flex justify-center items-center !p-0">
|
|
<p class="!mb-0">VueJs Version of Trunçgil is released! Grab a copy <a
|
|
href="https://themeforest.net/user/elite-themes24/portfolio"
|
|
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>
|
|
<!-- /.alert-inner -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!-- /.alert -->
|
|
<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 font-bold !tracking-[-0.01rem] 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 font-bold !tracking-[-0.01rem] 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 font-bold !tracking-[-0.01rem] 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 font-bold !tracking-[-0.01rem] 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 font-bold !tracking-[-0.01rem] 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 font-bold !tracking-[-0.01rem] 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-purple !text-white !bg-[#747ed1] border-[#747ed1] hover:text-white hover:bg-[#747ed1] hover:!border-[#747ed1] active:text-white active:bg-[#747ed1] active:border-[#747ed1] disabled:text-white disabled:bg-[#747ed1] disabled:border-[#747ed1] !rounded-[50rem]">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 bg-gradient-purple">
|
|
<div class="container pt-10 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem]">
|
|
<div class="flex flex-wrap mx-[-5px] !mt-[-50px] items-center">
|
|
<div
|
|
class="md:w-10/12 md:!ml-[8.33333333%] lg:!ml-0 lg:w-5/12 xl:!ml-0 xl:w-5/12 w-full flex-[0_0_auto] max-w-full text-center lg:text-left xl:text-left order-2 lg:!order-none xl:!order-none px-[5px] !mt-[50px]"
|
|
data-cues="slideInDown" data-group="page-title" data-delay="600">
|
|
<h1 class="!text-[calc(1.375rem_+_1.5vw)] font-bold !leading-[1.15] xl:!text-[2.5rem] !mb-5 md:mx-10 lg:mx-0">
|
|
Create a powerful but effortless website for <br><span class="typer !text-[#747ed1] whitespace-nowrap"
|
|
data-delay="100"
|
|
data-words="your business.,your portfolio.,your startup.,digital marketing."></span><span
|
|
class="cursor !text-[#747ed1] " data-owner="typer"></span></h1>
|
|
<p class="lead !text-[1.15rem] !leading-[1.6] !font-medium !mb-7">Build your website in minutes with the help
|
|
of countless amazing features of Trunçgil.</p>
|
|
<div class="flex justify-center xl:!justify-start lg:!justify-start !mb-4" data-cues="slideInDown"
|
|
data-group="page-title-buttons" data-delay="900">
|
|
<span><a
|
|
class="btn btn-lg btn-purple !text-white !bg-[#747ed1] border-[#747ed1] hover:text-white hover:bg-[#747ed1] hover:!border-[#747ed1] active:text-white active:bg-[#747ed1] active:border-[#747ed1] disabled:text-white disabled:bg-[#747ed1] disabled:border-[#747ed1] !rounded-[50rem] !mr-2 scroll"
|
|
href="#demos">Check Demos</a></span>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full !ml-auto !relative px-[5px] !mt-[50px]">
|
|
<div class="flex flex-wrap mx-[-10px] !mt-[-20px]">
|
|
<div class="w-4/12 flex-[0_0_auto] px-[10px] max-w-full flex flex-col !ml-auto" data-cues="fadeIn"
|
|
data-group="col-start" data-delay="900">
|
|
<div class="ml-auto !mt-6"><img
|
|
class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
|
|
src="../assets/img/demos/vc1.jpg" alt="image"></div>
|
|
<div class="ml-auto !mt-4"><img
|
|
class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
|
|
src="../assets/img/demos/vc2.jpg" alt="image"></div>
|
|
<div class="ml-auto !mt-4"><img
|
|
class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
|
|
src="../assets/img/demos/vc3.jpg" alt="image"></div>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="w-4/12 flex-[0_0_auto] px-[10px] max-w-full" data-cues="fadeIn" data-group="col-middle">
|
|
<div><img class="w-full max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
|
|
src="../assets/img/demos/vc4.jpg" alt="image"></div>
|
|
<div><img class="w-full max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mt-4"
|
|
src="../assets/img/demos/vc5.jpg" alt="image"></div>
|
|
<div><img class="w-full max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mt-4"
|
|
src="../assets/img/demos/vc6.jpg" alt="image"></div>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="w-4/12 flex-[0_0_auto] px-[10px] max-w-full flex flex-col" data-cues="fadeIn"
|
|
data-group="col-end" data-delay="900">
|
|
<div class="!mt-8"><img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
|
|
src="../assets/img/demos/vc7.jpg" alt="image"></div>
|
|
<div class="!mt-4 !mb-10"><img
|
|
class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
|
|
src="../assets/img/demos/vc8.jpg" alt="image"></div>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="relative !mt-[-10rem] !mb-40" data-cue="fadeIn" data-delay="1800">
|
|
<div
|
|
class="btn btn-circle 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] pointer-events-none ripple !absolute counter-wrapper flex-col !hidden xxl:!flex !items-center !justify-center !text-[1rem] !leading-none !p-0 !rounded-[100%] before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#e668b3] after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#e668b3] after:[animation-delay:.5s]"
|
|
style="bottom: 0; right: -8%; width: 120px; height: 120px;">
|
|
<h3
|
|
class="xl:!text-[1.3rem] !leding-[1.4] font-bold !text-[calc(1.255rem_+_0.06vw)] !text-white !mt-[-0.25rem] !mb-0">
|
|
NO</h3>
|
|
<p class="!text-[0.85rem] !font-medium !mb-0">jQuery</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper !bg-[#ffffff] " id="demos">
|
|
<div class="container py-[4.5rem] xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem] xl:pb-36 lg:pb-36 md:pb-36">
|
|
<div class="flex flex-wrap mx-[-15px] !mb-10">
|
|
<div class="md:w-9/12 lg:w-7/12 xl:w-6/12 xxl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="counter-wrapper">
|
|
<h3
|
|
class="xl:!text-[3.5rem] max-xl:!text-[calc(1.475rem_+_2.7vw)] !mb-3 !text-[#747ed1] !leading-none !text-center counter">
|
|
21</h3>
|
|
</div>
|
|
<h2 class="!text-[calc(1.335rem_+_1.02vw)] font-bold !leading-[1.2] xl:!text-[2.1rem] !mb-3 !text-center">
|
|
Functional, impressive and rich demos to start with</h2>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="demos-wrapper">
|
|
<h2 class="!text-[0.8rem] !leading-[1.35] !font-bold uppercase !text-[#aab0bc] !mb-6 !text-center">New Demos
|
|
</h2>
|
|
<div class="project !mb-10">
|
|
<div class="card !bg-[#f0f0f8]">
|
|
<div class="card-body xl:!pl-14 px-[40px] py-0 overflow-hidden">
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] xl:mx-[-35px] items-center">
|
|
<div
|
|
class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full">
|
|
<div class="flex flex-wrap mx-[-17.5px]">
|
|
<div class="w-6/12 flex-[0_0_auto] px-[17.5px] max-w-full">
|
|
<figure class="itooltip itooltip-grape !mt-9"
|
|
title='<h5 class="!mb-0">Click to see the demo</h5>'><a href='demo18.html' target='_blank'><img
|
|
class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-t-[0.4rem]"
|
|
src="../assets/img/demos/d18.jpg"
|
|
alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="w-6/12 flex-[0_0_auto] px-[17.5px] max-w-full">
|
|
<figure class="itooltip itooltip-grape" title='<h5 class="!mb-0">Click to see the demo</h5>'><a href='demo18.html' target='_blank'><img
|
|
class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-br-[0.4rem] rounded-bl-[0.4rem]"
|
|
src="../assets/img/demos/d18-2.jpg"
|
|
alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div
|
|
class="xl:w-5/12 lg:w-5/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full hidden xl:block lg:block">
|
|
<h2 class="post-title xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-4 !leading-[1.35]">Demo
|
|
Layout XVIII</h2>
|
|
<ul class="pl-0 list-none bullet-grape flex flex-wrap mx-[-15px] !ml-0 !mt-[-10px]">
|
|
<li
|
|
class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]">
|
|
<span><i
|
|
class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e31e24] left-0"></i></span><span>Network,
|
|
Marketing</span>
|
|
</li>
|
|
<li
|
|
class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]">
|
|
<span><i
|
|
class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e31e24] left-0"></i></span><span>SVG
|
|
icons</span>
|
|
</li>
|
|
<li
|
|
class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]">
|
|
<span><i
|
|
class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e31e24] left-0"></i></span><span>3D
|
|
illustrations</span>
|
|
</li>
|
|
<li
|
|
class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]">
|
|
<span><i
|
|
class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e31e24] left-0"></i></span><span>Gradient
|
|
image</span>
|
|
</li>
|
|
</ul>
|
|
<a class='btn btn-sm 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-[50rem] !mt-1' href='demo18.html' target='_blank'>See
|
|
Demo</a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project !mb-10">
|
|
<div class="card !bg-[#fdf1f8]">
|
|
<div class="card-body xl:!pl-14 px-[40px] py-0 overflow-hidden">
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] xl:mx-[-35px] items-center">
|
|
<div
|
|
class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full">
|
|
<div class="flex flex-wrap mx-[-17.5px]">
|
|
<div class="w-6/12 flex-[0_0_auto] px-[17.5px] max-w-full">
|
|
<figure class="itooltip itooltip-fuchsia !mt-9"
|
|
title='<h5 class="!mb-0">Click to see the demo</h5>'><a href='demo19.html' target='_blank'><img
|
|
class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-t-[0.4rem]"
|
|
src="../assets/img/demos/d19-1.jpg"
|
|
alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="w-6/12 flex-[0_0_auto] px-[17.5px] max-w-full">
|
|
<figure class="itooltip itooltip-fuchsia" title='<h5 class="!mb-0">Click to see the demo</h5>'>
|
|
<a href='demo19.html' target='_blank'><img
|
|
class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-br-[0.4rem] rounded-bl-[0.4rem]"
|
|
src="../assets/img/demos/d19-2.jpg"
|
|
alt="image"></a>
|
|
</figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div
|
|
class="xl:w-5/12 lg:w-5/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full hidden xl:block lg:block">
|
|
<h2 class="post-title xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-4 !leading-[1.35]">Demo
|
|
Layout XVIII</h2>
|
|
<ul class="pl-0 list-none bullet-grape flex flex-wrap mx-[-15px] !ml-0 !mt-[-10px]">
|
|
<li
|
|
class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]">
|
|
<span><i
|
|
class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e668b3] left-0"></i></span><span>Agency,
|
|
Startup</span>
|
|
</li>
|
|
<li
|
|
class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]">
|
|
<span><i
|
|
class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e668b3] left-0"></i></span><span>Gradient
|
|
image</span>
|
|
</li>
|
|
<li
|
|
class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]">
|
|
<span><i
|
|
class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e668b3] left-0"></i></span><span>SVG
|
|
icons</span>
|
|
</li>
|
|
<li
|
|
class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]">
|
|
<span><i
|
|
class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e668b3] left-0"></i></span><span>Colorful
|
|
design</span>
|
|
</li>
|
|
</ul>
|
|
<a class='btn btn-sm 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] !rounded-[50rem] !mt-1' href='demo19.html' target='_blank'>See
|
|
Demo</a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project">
|
|
<div class="card !bg-[#f0f0f8]">
|
|
<div class="card-body xl:!pl-14 px-[40px] py-0 overflow-hidden">
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] xl:mx-[-35px] items-center">
|
|
<div
|
|
class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full">
|
|
<div class="flex flex-wrap mx-[-17.5px]">
|
|
<div class="w-6/12 flex-[0_0_auto] px-[17.5px] max-w-full">
|
|
<figure class="itooltip itooltip-purple !mt-9"
|
|
title='<h5 class="!mb-0">Click to see the demo</h5>'><a href='demo20.html' target='_blank'><img
|
|
class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-t-[0.4rem]"
|
|
src="../assets/img/demos/d20.jpg"
|
|
alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="w-6/12 flex-[0_0_auto] px-[17.5px] max-w-full">
|
|
<figure class="itooltip itooltip-purple" title='<h5 class="!mb-0">Click to see the demo</h5>'><a href='demo20.html' target='_blank'><img
|
|
class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-br-[0.4rem] rounded-bl-[0.4rem]"
|
|
src="../assets/img/demos/d20-2.jpg"
|
|
alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div
|
|
class="xl:w-5/12 lg:w-5/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full hidden xl:block lg:block">
|
|
<h2 class="post-title xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-4 !leading-[1.35]">Demo
|
|
Layout XVIII</h2>
|
|
<ul class="pl-0 list-none bullet-grape flex flex-wrap mx-[-15px] !ml-0 !mt-[-10px]">
|
|
<li
|
|
class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]">
|
|
<span><i
|
|
class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#747ed1] left-0"></i></span><span>Agency,
|
|
Startup</span>
|
|
</li>
|
|
<li
|
|
class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]">
|
|
<span><i
|
|
class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#747ed1] left-0"></i></span><span>Framed
|
|
layout</span>
|
|
</li>
|
|
<li
|
|
class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]">
|
|
<span><i
|
|
class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#747ed1] left-0"></i></span><span>Illustrations</span>
|
|
</li>
|
|
<li
|
|
class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]">
|
|
<span><i
|
|
class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#747ed1] left-0"></i></span><span>Video
|
|
background</span>
|
|
</li>
|
|
</ul>
|
|
<a class='btn btn-sm btn-purple !text-white !bg-[#747ed1] border-[#747ed1] hover:text-white hover:bg-[#747ed1] hover:!border-[#747ed1] active:text-white active:bg-[#747ed1] active:border-[#747ed1] disabled:text-white disabled:bg-[#747ed1] disabled:border-[#747ed1] !rounded-[50rem] !mt-1' href='demo20.html' target='_blank'>See
|
|
Demo</a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="text-center !mt-12"><a href="#"
|
|
class="btn btn-purple !text-white !bg-[#747ed1] border-[#747ed1] hover:text-white hover:bg-[#747ed1] hover:!border-[#747ed1] active:text-white active:bg-[#747ed1] active:border-[#747ed1] disabled:text-white disabled:bg-[#747ed1] disabled:border-[#747ed1] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">See
|
|
All Demos</a></div>
|
|
</div>
|
|
<!-- /.demos-wrapper -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="overflow-hidden">
|
|
<div class="divider !text-[#f2f3fb] mx-[-0.5rem]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
|
|
<path fill="currentColor"
|
|
d="M1260,1.65c-60-5.07-119.82,2.47-179.83,10.13s-120,11.48-180,9.57-120-7.66-180-6.42c-60,1.63-120,11.21-180,16a1129.52,1129.52,0,0,1-180,0c-60-4.78-120-14.36-180-19.14S60,7,30,7H0v93H1440V30.89C1380.07,23.2,1319.93,6.15,1260,1.65Z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<!-- /.overflow-hidden -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper bg-gradient-purple">
|
|
<div class="container pt-7 xl:pt-10 lg:pt-10 md:pt-10 pb-[4.5rem] xl:pb-28 lg:pb-28 md:pb-28">
|
|
<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 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<img class="m-[0_auto]" src="../assets/img/demos/icon.png"
|
|
alt="image">
|
|
<h2
|
|
class="!text-[calc(1.335rem_+_1.02vw)] font-bold !leading-[1.2] xl:!text-[2.1rem] !mb-3 !text-center !mt-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]">
|
|
<div class="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-[#747ed1] !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-[#747ed1] !mb-1 !tracking-[normal] !leading-none">
|
|
130+</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-[#747ed1] !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>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper !bg-[#ffffff]">
|
|
<div class="container pb-12 xl:pb-[4.5rem] lg:pb-[4.5rem] md:pb-[4.5rem]">
|
|
<div
|
|
class="flex flex-wrap mx-[-15px] lg:mx-[-20px] xl:mx-0 !mt-[-50px] items-center !mb-[4.5rem] xl:!mb-[6rem] lg:!mb-[6rem] md:!mb-[6rem]">
|
|
<div
|
|
class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !relative lg:!px-[20px] xl:px-0 !mt-[50px]">
|
|
<div class="shape !rounded-[.4rem] !bg-[#f2f3fb] rellax !block !absolute" data-rellax-speed="0"
|
|
style="top: 50%; left: 50%; width: 50%; height: 60%; transform: translate(-50%,-50%);z-index:0"></div>
|
|
<div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px] !relative">
|
|
<div
|
|
class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
|
|
<img class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5"
|
|
data-cue="fadeIn" data-delay="300" src="../assets/img/demos/fe1.jpg"
|
|
alt="image">
|
|
<img
|
|
class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto] !ml-auto"
|
|
data-cue="fadeIn" data-delay="600" src="../assets/img/demos/fe2.jpg"
|
|
alt="image">
|
|
</div>
|
|
<!-- /column -->
|
|
<div
|
|
class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
|
|
<img class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5"
|
|
data-cue="fadeIn" data-delay="900" src="../assets/img/demos/fe3.jpg"
|
|
alt="image">
|
|
<img
|
|
class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto]"
|
|
data-cue="fadeIn" data-delay="1200" src="../assets/img/demos/fe4.jpg"
|
|
alt="image">
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!--/column -->
|
|
<div
|
|
class="lg:w-6/12 xl:w-5/12 xxl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[8.33333333%] lg:!px-[20px] xl:px-0 !mt-[50px]"
|
|
data-cues="slideInRight" data-delay="1500" data-group="features-1">
|
|
<div class="flex flex-row !mb-7">
|
|
<div>
|
|
<div
|
|
class="icon btn btn-circle pointer-events-none btn-soft-purple !mt-1 !mr-4 !w-[2.2rem] !h-[2.2rem] !inline-flex !items-center !justify-center !text-[1rem] !leading-none !p-0 !rounded-[100%]">
|
|
<i class="uil uil-images before:content-['\eb95']"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 class="!mb-1">Modern Portfolio Layouts</h4>
|
|
<p class="!mb-0">Build and manage an eye-catching and impressive portfolio fast and without effort.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row !mb-7">
|
|
<div>
|
|
<div
|
|
class="icon btn btn-circle pointer-events-none btn-soft-purple !mt-1 !mr-4 !w-[2.2rem] !h-[2.2rem] !inline-flex !items-center !justify-center !text-[1rem] !leading-none !p-0 !rounded-[100%]">
|
|
<i class="uil uil-calendar-alt before:content-['\e9ba']"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 class="!mb-1">Useful Blog Layouts</h4>
|
|
<p class="!mb-0">Create an attractive and stunning journal to tell the world your wonderful stories.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row">
|
|
<div>
|
|
<div
|
|
class="icon btn btn-circle pointer-events-none btn-soft-purple !mt-1 !mr-4 !w-[2.2rem] !h-[2.2rem] !inline-flex !items-center !justify-center !text-[1rem] !leading-none !p-0 !rounded-[100%]">
|
|
<i class="uil uil-star before:content-['\eceb']"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 class="!mb-1">Cool Features & Elements</h4>
|
|
<p class="!mb-0">Trunçgil includes amazing features and elements to create rich and attractive pages.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<div
|
|
class="flex flex-wrap mx-[-15px] lg:mx-[-20px] xl:mx-0 !mt-[-50px] items-center !mb-24 xl:!mb-60 lg:!mb-60 md:!mb-60">
|
|
<div
|
|
class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[8.33333333%] !relative xl:!order-2 lg:!order-2 lg:!px-[20px] xl:px-0 !mt-[50px]">
|
|
<div class="shape !rounded-[.4rem] !bg-[#f2f3fb] rellax !block !absolute" data-rellax-speed="0"
|
|
style="top: 50%; left: 50%; width: 50%; height: 60%; transform: translate(-50%,-50%);z-index:0"></div>
|
|
<div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px] !relative">
|
|
<div
|
|
class="w-5/12 flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
|
|
<img
|
|
class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5 flex !ml-auto"
|
|
data-cue="fadeIn" data-delay="300" src="../assets/img/demos/fe5.jpg"
|
|
alt="image">
|
|
<img
|
|
class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto] !ml-auto"
|
|
data-cue="fadeIn" data-delay="600" src="../assets/img/demos/fe6.jpg"
|
|
alt="image">
|
|
</div>
|
|
<!-- /column -->
|
|
<div
|
|
class="w-7/12 flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
|
|
<img class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5"
|
|
data-cue="fadeIn" data-delay="900" src="../assets/img/demos/fe7.jpg"
|
|
alt="image">
|
|
<img
|
|
class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex w-11/12 flex-[0_0_auto]"
|
|
data-cue="fadeIn" data-delay="1200" src="../assets/img/demos/fe8.jpg"
|
|
alt="image">
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!--/column -->
|
|
<div
|
|
class="lg:w-6/12 xl:w-5/12 xxl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xxl:!ml-[8.33333333%] lg:!px-[20px] xl:px-0 !mt-[50px]"
|
|
data-cues="slideInLeft" data-delay="1500" data-group="features-2">
|
|
<div class="flex flex-row !mb-7">
|
|
<div>
|
|
<div
|
|
class="icon btn btn-circle pointer-events-none btn-soft-purple !mt-1 !mr-4 !w-[2.2rem] !h-[2.2rem] !inline-flex !items-center !justify-center !text-[1rem] !leading-none !p-0 !rounded-[100%]">
|
|
<i class="uil uil-web-grid-alt before:content-['\ed94']"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 class="!mb-1">13 Headers & 5 Footers</h4>
|
|
<p class="!mb-0">Choose from various gorgeous header and footer styles to serve you best for your needs.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row !mb-7">
|
|
<div>
|
|
<div
|
|
class="icon btn btn-circle pointer-events-none btn-soft-purple !mt-1 !mr-4 !w-[2.2rem] !h-[2.2rem] !inline-flex !items-center !justify-center !text-[1rem] !leading-none !p-0 !rounded-[100%]">
|
|
<i class="uil uil-palette before:content-['\ec3a']"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 class="!mb-1">Color & Font Options</h4>
|
|
<p class="!mb-0">You can either use the included color and fonts or easily add your own choices.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row">
|
|
<div>
|
|
<div
|
|
class="icon btn btn-circle pointer-events-none btn-soft-purple !mt-1 !mr-4 !w-[2.2rem] !h-[2.2rem] !inline-flex !items-center !justify-center !text-[1rem] !leading-none !p-0 !rounded-[100%]">
|
|
<i class="uil uil-tablet before:content-['\ed0d']"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 class="!mb-1">Fully Responsive Layout</h4>
|
|
<p class="!mb-0">Trunçgil adapts to different screen sizes therefore it is compatible with any device.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="overflow-hidden">
|
|
<div class="divider !text-[#f2f3fb] mx-[-0.5rem]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
|
|
<path fill="currentColor"
|
|
d="M1260,1.65c-60-5.07-119.82,2.47-179.83,10.13s-120,11.48-180,9.57-120-7.66-180-6.42c-60,1.63-120,11.21-180,16a1129.52,1129.52,0,0,1-180,0c-60-4.78-120-14.36-180-19.14S60,7,30,7H0v93H1440V30.89C1380.07,23.2,1319.93,6.15,1260,1.65Z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<!-- /.overflow-hidden -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper bg-gradient-purple">
|
|
<div class="container pb-28 xl:pb-40 lg:pb-40 md:pb-40">
|
|
<div class="flex flex-wrap mx-0 !mb-[4.5rem] xl:!mb-[6rem] lg:!mb-[6rem] md:!mb-[6rem]">
|
|
<div
|
|
class="w-9/12 sm:w-10/12 md:w-10/12 lg:w-9/12 xl:w-9/12 flex-[0_0_auto] max-w-full !mx-auto !mt-[-5rem] xl:!mt-[-17.5rem] lg:!mt-[-17.5rem] md:!mt-[-17.5rem]"
|
|
data-cues data-group="images">
|
|
<img class="max-w-full h-auto !mx-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
|
|
data-cue="fadeIn" src="../assets/img/demos/de1.jpg" alt="image">
|
|
<img class="absolute !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
|
|
data-cue="slideInRight" src="../assets/img/demos/de2.jpg"
|
|
style="top: 25%; right:-12%; max-width:30%; height: auto;" alt="image">
|
|
<img class="absolute !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
|
|
data-cue="slideInLeft" src="../assets/img/demos/de3.jpg"
|
|
style="top: 15%; left:-15%; max-width:30%; height: auto;" alt="image">
|
|
<img class="absolute !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
|
|
data-cue="slideInLeft" src="../assets/img/demos/de4.jpg"
|
|
style="bottom: 15%; left:-13%; max-width:30%; height: auto;" alt="image">
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div
|
|
class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] !text-center justify-center"
|
|
data-cues="slideInDown" data-group="features-3">
|
|
<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> Tailwind CSS</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>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper bg-gradient-reverse-purple">
|
|
<div class="container pb-10 xl:pb-16 lg:pb-16 md:pb-16">
|
|
<div class="flex flex-wrap mx-[-15px] !mb-8 !text-center">
|
|
<div class="lg:w-8/12 xl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<h2 class="!text-[.75rem] !tracking-[0.05rem] !leading-[1.35] uppercase !text-[#aab0bc]">Inner Pages</h2>
|
|
<h2
|
|
class="!text-[calc(1.335rem_+_1.02vw)] font-bold !leading-[1.2] xl:!text-[2.1rem] !mb-3 !text-center !mt-3 lg:!px-10 xl:!px-0">
|
|
Handcrafted and carefully put together pages to choose from.</h2>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="itemgrid grid-view projects-masonry">
|
|
<div class="isotope-filter !relative z-[5] filter !mb-10 text-left text-md-center">
|
|
<p class=" inline m-[0_1rem_0_0] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc]">
|
|
Filter:</p>
|
|
<ul class=" inline m-0 p-0 list-none">
|
|
<li class="inline"><a
|
|
class="filter-item uppercase !tracking-[0.02rem] text-[0.7rem] font-bold cursor-pointer active"
|
|
data-filter="*">All</a></li>
|
|
<li
|
|
class="inline before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:ml-2 before:mr-[0.8rem] before:my-0 before:rounded-[100%] before:bg-[rgba(30,34,40,.2)] before:align-[.15rem]">
|
|
<a class="filter-item uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] cursor-pointer hover:!text-[#747ed1]"
|
|
data-filter=".services">Services</a>
|
|
</li>
|
|
<li
|
|
class="inline before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:ml-2 before:mr-[0.8rem] before:my-0 before:rounded-[100%] before:bg-[rgba(30,34,40,.2)] before:align-[.15rem]">
|
|
<a class="filter-item uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] cursor-pointer hover:!text-[#747ed1]"
|
|
data-filter=".about">About</a>
|
|
</li>
|
|
<li
|
|
class="inline before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:ml-2 before:mr-[0.8rem] before:my-0 before:rounded-[100%] before:bg-[rgba(30,34,40,.2)] before:align-[.15rem]">
|
|
<a class="filter-item uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] cursor-pointer hover:!text-[#747ed1]"
|
|
data-filter=".contact">Contact</a>
|
|
</li>
|
|
<li
|
|
class="inline before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:ml-2 before:mr-[0.8rem] before:my-0 before:rounded-[100%] before:bg-[rgba(30,34,40,.2)] before:align-[.15rem]">
|
|
<a class="filter-item uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] cursor-pointer hover:!text-[#747ed1]"
|
|
data-filter=".pricing">Pricing</a>
|
|
</li>
|
|
<li
|
|
class="inline before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:ml-2 before:mr-[0.8rem] before:my-0 before:rounded-[100%] before:bg-[rgba(30,34,40,.2)] before:align-[.15rem]">
|
|
<a class="filter-item uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] cursor-pointer hover:!text-[#747ed1]"
|
|
data-filter=".projects">Projects</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div data-cue="fadeIn">
|
|
<div
|
|
class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-22.5px] !mt-[-40px] xl:!mt-[-45px] isotope">
|
|
<div
|
|
class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full services md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
|
|
<figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
|
|
title='<h5 class="!mb-0">Services Modern</h5>'><a href='services.html'> <img
|
|
src="../assets/img/demos/dc1.jpg" alt="image"></a>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div
|
|
class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full services md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
|
|
<figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
|
|
title='<h5 class="!mb-0">Services Concept</h5>'><a href='services2.html'> <img
|
|
src="../assets/img/demos/dc2.jpg" alt="image"></a>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div
|
|
class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full about md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
|
|
<figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
|
|
title='<h5 class="!mb-0">About Modern</h5>'><a href='about.html'> <img
|
|
src="../assets/img/demos/dc3.jpg" alt="image"></a>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div
|
|
class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full contact md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
|
|
<figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
|
|
title='<h5 class="!mb-0">Contact with Facts</h5>'><a href='contact.html'> <img
|
|
src="../assets/img/demos/dc5.jpg" alt="image"></a>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div
|
|
class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full about md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
|
|
<figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
|
|
title='<h5 class="!mb-0">About Concept</h5>'><a href='about2.html'> <img
|
|
src="../assets/img/demos/dc4.jpg" alt="image"></a>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div
|
|
class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full contact md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
|
|
<figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
|
|
title='<h5 class="!mb-0">Contact Minimalist</h5>'><a href='contact2.html'> <img
|
|
src="../assets/img/demos/dc6.jpg" alt="image"></a>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div
|
|
class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full contact md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
|
|
<figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
|
|
title='<h5 class="!mb-0">Contact Modern</h5>'><a href='contact3.html'> <img
|
|
src="../assets/img/demos/dc7.jpg" alt="image"></a>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div
|
|
class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full pricing md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
|
|
<figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
|
|
title='<h5 class="!mb-0">Pricing</h5>'><a href='pricing.html'> <img src="../assets/img/demos/dc8.jpg"
|
|
alt="image"></a></figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div
|
|
class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full projects md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
|
|
<figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
|
|
title='<h5 class="!mb-0">Projects with Tiles</h5>'><a href='projects.html'> <img
|
|
src="../assets/img/demos/dc9.jpg" alt="image"></a>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div
|
|
class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full projects md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
|
|
<figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
|
|
title='<h5 class="!mb-0">Projects Masonry</h5>'><a href='projects4.html'> <img
|
|
src="../assets/img/demos/dc12.jpg" alt="image"></a>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div
|
|
class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full projects md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
|
|
<figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
|
|
title='<h5 class="!mb-0">Projects Masonry Large</h5>'><a href='projects3.html'> <img
|
|
src="../assets/img/demos/dc11.jpg" alt="image"></a>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div
|
|
class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full projects md:!px-[20px] lg:!px-[20px] xl:!px-[22.5px] !mt-[40px]">
|
|
<figure class="itooltip itooltip-primary rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"
|
|
title='<h5 class="!mb-0">Projects Overflow</h5>'><a href='projects2.html'> <img
|
|
src="../assets/img/demos/dc10.jpg" alt="image"></a>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /div -->
|
|
</div>
|
|
<!-- /.grid -->
|
|
<div class="!mb-20"></div>
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="overflow-hidden">
|
|
<div class="divider !text-[#fefefe] mx-[-0.5rem]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
|
|
<path fill="currentColor"
|
|
d="M1260,1.65c-60-5.07-119.82,2.47-179.83,10.13s-120,11.48-180,9.57-120-7.66-180-6.42c-60,1.63-120,11.21-180,16a1129.52,1129.52,0,0,1-180,0c-60-4.78-120-14.36-180-19.14S60,7,30,7H0v93H1440V30.89C1380.07,23.2,1319.93,6.15,1260,1.65Z" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<!-- /.overflow-hidden -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper !bg-[#ffffff]">
|
|
<div class="container xl:pt-40 lg:pt-40 pb-32 xxl:pb-40 !relative">
|
|
<img
|
|
class="xl:!absolute lg:!absolute max-lg:!static max-w-full w-full flex-[0_0_auto] !px-[15px] xxl:!mt-[-0.75rem] !mb-3 md:!mb-10 lg:!mb-0"
|
|
src="../assets/img/demos/devices.png" data-cue="fadeIn"
|
|
alt="image" style="top: 0; left: -23%;">
|
|
<div
|
|
class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] lg:!mt-[-6rem] xl:!mt-[-3.5rem] xxl:!mt-0 xxl:!items-center">
|
|
<div
|
|
class="md:w-10/12 md:!ml-[8.33333333%] lg:w-6/12 lg:!ml-[50%] xl:w-6/12 xl:!ml-[50%] flex-[0_0_auto] !px-[15px] max-w-full text-center lg:text-left xl:text-left xl:!px-[35px] lg:!px-[20px]">
|
|
<div class="xl:!pl-1 xxl:!pl-5 xxl:!pr-10">
|
|
<h2 class="!text-[.75rem] !tracking-[0.05rem] !leading-[1.35] uppercase !text-[#aab0bc] !mb-3">Fully
|
|
Responsive</h2>
|
|
<h3 class="!text-[calc(1.335rem_+_1.02vw)] font-bold !leading-[1.2] xl:!text-[2.1rem] !mb-5">Responsive
|
|
images & texts no matter the screen size.</h3>
|
|
<p class="lead !leading-[1.65] text-[0.9rem] font-medium !mb-8">Trunçgil is responsive so the layout will
|
|
adapt to different screen sizes that will make your website compatible with any device such as smart
|
|
phones, tablets and computers.</p>
|
|
<img src="../assets/img/demos/qrcode.jpg"
|
|
class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-[.4rem] max-lg:m-[0_auto]"
|
|
alt="image">
|
|
</div>
|
|
<!--/div -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper bg-gradient-reverse-primary">
|
|
<div class="container xl:!pt-10 !text-center">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="md:w-10/12 lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<img class="m-[0_auto]" src="../assets/img/demos/icon.png"
|
|
alt="image">
|
|
<h2
|
|
class="!text-[calc(1.335rem_+_1.02vw)] font-bold !leading-[1.2] xl:!text-[2.1rem] !mt-3 !mb-3 xl:!px-8 lg:!px-8">
|
|
Think unique and be creative. Make a difference with Trunçgil.</h2>
|
|
<p class="lead !text-[1.1rem] !leading-[1.55] !font-medium !mb-6">Everything you need to create your next
|
|
unique and professional website, including impressive and ready-made blocks and pages.</p>
|
|
<a href="https://truncgil.com.tr"
|
|
target="_blank"
|
|
class="btn btn-lg btn-purple !text-white !bg-[#747ed1] border-[#747ed1] hover:text-white hover:bg-[#747ed1] hover:!border-[#747ed1] active:text-white active:bg-[#747ed1] active:border-[#747ed1] disabled:text-white disabled:bg-[#747ed1] disabled:border-[#747ed1] !rounded-[50rem] !mb-10">Buy
|
|
Trunçgil</a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<img class="max-w-full h-auto m-[0_auto]" src="../assets/img/demos/f1.png"
|
|
data-cue="fadeIn" alt="image">
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
</div>
|
|
<!-- /.content-wrapper -->
|
|
<footer class=" bg-[#21262c] opacity-100 !text-[#cacaca]">
|
|
<div class="container py-16 xl:!py-20 lg:!py-20 md:!py-20">
|
|
<div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
|
|
<div
|
|
class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
|
|
<div class="widget !text-[#cacaca]">
|
|
<img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
|
|
<p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.
|
|
</p>
|
|
<nav class="nav social social-white">
|
|
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]"
|
|
href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
|
|
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]"
|
|
href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
|
|
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]"
|
|
href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
|
|
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]"
|
|
href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
|
|
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]"
|
|
href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
|
|
</nav>
|
|
<!-- /.social -->
|
|
</div>
|
|
<!-- /.widget -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div
|
|
class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
|
|
<div class="widget !text-[#cacaca]">
|
|
<h4 class="widget-title !text-white !mb-3">Get in Touch</h4>
|
|
<address class="xl:!pr-20 xxl:!pr-28 not-italic !leading-[inherit] block !mb-4">Moonshine St. 14/05 Light City,
|
|
London, United Kingdom</address>
|
|
<a class="!text-[#cacaca] hover:!text-[#747ed1]" href="mailto:#">info@truncgil.com</a><br> 00 (123) 456 78 90
|
|
</div>
|
|
<!-- /.widget -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div
|
|
class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
|
|
<div class="widget !text-[#cacaca]">
|
|
<h4 class="widget-title !text-white !mb-3">Learn More</h4>
|
|
<ul class="pl-0 list-none !mb-0">
|
|
<li><a class="!text-[#cacaca] hover:!text-[#747ed1]" href="#">About Us</a></li>
|
|
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#747ed1]" href="#">Our Story</a></li>
|
|
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#747ed1]" href="#">Projects</a></li>
|
|
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#747ed1]" href="#">Terms of Use</a></li>
|
|
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#747ed1]" href="#">Privacy Policy</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- /.widget -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div
|
|
class="md:w-full xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
|
|
<div class="widget !text-[#cacaca]">
|
|
<h4 class="widget-title !text-white !mb-3">Our Newsletter</h4>
|
|
<p class="!mb-5">Subscribe to our newsletter to get our news & deals delivered to you.</p>
|
|
<div class="newsletter-wrapper">
|
|
<!-- Begin Mailchimp Signup Form -->
|
|
<div id="mc_embed_signup2">
|
|
<form
|
|
action="https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&id=b49ef47a9a"
|
|
method="post" id="mc-embedded-subscribe-form2" name="mc-embedded-subscribe-form"
|
|
class="validate dark-fields" target="_blank" novalidate>
|
|
<div id="mc_embed_signup_scroll2">
|
|
<div class="!text-left input-group form-floating !relative flex flex-wrap items-stretch w-full">
|
|
<input type="email" value="" name="EMAIL"
|
|
class="required email form-control block w-full text-[12px] font-medium !leading-[1.7] appearance-none bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] px-4 py-[0.6rem] rounded-[0.4rem] motion-reduce:transition-none focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] disabled:bg-[#aab0bc] disabled:opacity-100 file:!mt-[-0.6rem] file:mr-[-1rem] file:!mb-[-0.6rem] file:ml-[-1rem] file:!text-[#60697b] file:bg-[#fefefe] file:pointer-events-none file:transition-all file:duration-[0.2s] file:ease-in-out file:px-4 file:py-[0.6rem] file:rounded-none motion-reduce:file:transition-none placeholder:!text-[#959ca9] placeholder:opacity-100 border border-solid !border-[rgba(255,255,255,0.1)] !text-[#cacaca] bg-[rgba(255,255,255,.03)] focus-visible:!border-[rgba(63,120,224,0.5)] "
|
|
placeholder="" id="mce-EMAIL2">
|
|
<label
|
|
class="!ml-[0.05rem] !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none origin-[0_0] px-4 py-[0.6rem] left-0 top-0"
|
|
for="mce-EMAIL2">Email Address</label>
|
|
<input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe2"
|
|
class="btn btn-purple !text-white !bg-[#747ed1] border-[#747ed1] hover:text-white hover:bg-[#747ed1] hover:!border-[#747ed1] active:text-white active:bg-[#747ed1] active:border-[#747ed1] disabled:text-white disabled:bg-[#747ed1] disabled:border-[#747ed1] !relative z-[2] hover:!transform-none hover:!translate-none border-0">
|
|
</div>
|
|
<div id="mce-responses2" class="clear">
|
|
<div class="response" id="mce-error-response2" style="display:none"></div>
|
|
<div class="response" id="mce-success-response2" style="display:none"></div>
|
|
</div>
|
|
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
|
|
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text"
|
|
name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc" tabindex="-1" value=""></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!--End mc_embed_signup-->
|
|
</div>
|
|
<!-- /.newsletter-wrapper -->
|
|
</div>
|
|
<!-- /.widget -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</footer>
|
|
<!-- 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-[#747ed1] 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/demo34 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:00:06 GMT -->
|
|
</html> |