Ümit Tunç
1717 lines
125 KiB
HTML
1717 lines
125 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
|
||
<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/demo1 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 10:52:53 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" type="text/css" href="../assets/css/fonts/thicccboi.css">
|
||
<link rel="stylesheet" href="../assets/css/plugins.css">
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="stylesheet" href="../assets/css/colors/yellow.css">
|
||
<link rel="preload" href="../assets/css/fonts/thicccboi.css" as="style" onload="this.rel='stylesheet'">
|
||
<style>
|
||
.accordion-wrapper .card-header button {
|
||
color: #fab758;
|
||
}
|
||
|
||
@media (max-width: 991.98px) {
|
||
.navbar-expand-lg .navbar-collapse .dropdown-toggle:after {
|
||
color: white !important;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body class="font-THICCCBOI text-[0.85rem]">
|
||
<div class="grow shrink-0">
|
||
<header class="relative wrapper !bg-[#fff8ee]">
|
||
<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 group">
|
||
<a class="nav-link dropdown-toggle !text-[.85rem] after:!text-[#fab758] group-hover:!text-[#fab758]"
|
||
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 group">
|
||
<a class="nav-link dropdown-toggle !text-[.85rem] after:!text-[#fab758] group-hover:!text-[#fab758]"
|
||
href="#" data-bs-toggle="dropdown">Pages</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="dropdown dropdown-submenu dropend"><a
|
||
class="dropdown-item dropdown-toggle hover:!text-[#fab758]" href="#"
|
||
data-bs-toggle="dropdown">Services</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='services.html'>Services I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='services2.html'>Services II</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a
|
||
class="dropdown-item dropdown-toggle hover:!text-[#fab758]" href="#"
|
||
data-bs-toggle="dropdown">About</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='about.html'>About
|
||
I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='about2.html'>About
|
||
II</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a
|
||
class="dropdown-item dropdown-toggle hover:!text-[#fab758]" href="#"
|
||
data-bs-toggle="dropdown">Shop</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='shop.html'>Shop
|
||
I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='shop2.html'>Shop
|
||
II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='shop-product.html'>Product Page</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='shop-cart.html'>Shopping Cart</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='shop-checkout.html'>Checkout</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a
|
||
class="dropdown-item dropdown-toggle hover:!text-[#fab758]" href="#"
|
||
data-bs-toggle="dropdown">Contact</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='contact.html'>Contact I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='contact2.html'>Contact II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='contact3.html'>Contact III</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a
|
||
class="dropdown-item dropdown-toggle hover:!text-[#fab758]" href="#"
|
||
data-bs-toggle="dropdown">Career</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='career.html'>Job
|
||
Listing I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='career2.html'>Job
|
||
Listing II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='career-job.html'>Job
|
||
Description</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a
|
||
class="dropdown-item dropdown-toggle hover:!text-[#fab758]" href="#"
|
||
data-bs-toggle="dropdown">Utility</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='404.html'>404 Not
|
||
Found</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='page-loader.html'>Page Loader</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='signin.html'>Sign In
|
||
I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='signin2.html'>Sign
|
||
In II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='signup.html'>Sign Up
|
||
I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='signup2.html'>Sign
|
||
Up II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='terms.html'>Terms</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='pricing.html'>Pricing</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='onepage.html'>One
|
||
Page</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item dropdown group">
|
||
<a class="nav-link dropdown-toggle !text-[.85rem] after:!text-[#fab758] group-hover:!text-[#fab758]"
|
||
href="#" data-bs-toggle="dropdown">Projects</a>
|
||
<div class="dropdown-menu dropdown-lg">
|
||
<div class="dropdown-lg-content">
|
||
<div>
|
||
<h6 class="dropdown-header !text-[#fab758]">Project Pages</h6>
|
||
<ul class="pl-0 list-none">
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='projects.html'>Projects I</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='projects2.html'>Projects II</a>
|
||
</li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='projects3.html'>Projects III</a>
|
||
</li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='projects4.html'>Projects IV</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- /.column -->
|
||
<div>
|
||
<h6 class="dropdown-header !text-[#fab758]">Single Projects</h6>
|
||
<ul class="pl-0 list-none">
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='single-project.html'>Single Project
|
||
I</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='single-project2.html'>Single
|
||
Project II</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='single-project3.html'>Single
|
||
Project III</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='single-project4.html'>Single
|
||
Project IV</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- /.column -->
|
||
</div>
|
||
<!-- /auto-column -->
|
||
</div>
|
||
</li>
|
||
<li class="nav-item dropdown group">
|
||
<a class="nav-link dropdown-toggle !text-[.85rem] after:!text-[#fab758] group-hover:!text-[#fab758]"
|
||
href="#" data-bs-toggle="dropdown">Blog</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='blog.html'>Blog without
|
||
Sidebar</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='blog2.html'>Blog with
|
||
Sidebar</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='blog3.html'>Blog with
|
||
Left Sidebar</a></li>
|
||
<li class="dropdown dropdown-submenu dropend"><a
|
||
class="dropdown-item dropdown-toggle hover:!text-[#fab758]" href="#"
|
||
data-bs-toggle="dropdown">Blog Posts</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='blog-post.html'>Post
|
||
without Sidebar</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='blog-post2.html'>Post with Sidebar</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#fab758]' href='blog-post3.html'>Post with Left Sidebar</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item dropdown dropdown-mega group">
|
||
<a class="nav-link dropdown-toggle !text-[.85rem] after:!text-[#fab758] group-hover:!text-[#fab758]"
|
||
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 group">
|
||
<a class="nav-link dropdown-toggle !text-[.85rem] after:!text-[#fab758] group-hover:!text-[#fab758]"
|
||
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-[#fab758]">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-[#fab758]' 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-[#fab758]' 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-[#fab758]' 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-[#fab758]' 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-[#fab758]' href='docs/credits.html'>Credits</a></li>
|
||
</ul>
|
||
<h6 class="dropdown-header xl:!mt-6 lg:!mt-6 !text-[#fab758]">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-[#fab758]' 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-[#fab758]' 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-[#fab758]' 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-[#fab758]' 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-[#fab758]' 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-[#fab758]' 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-[#fab758]' 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-[#fab758]">Elements</h6>
|
||
<ul class="pl-0 list-none xl:columns-3 lg:columns-3 ">
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/accordion.html'>Accordion</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/alerts.html'>Alerts</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/animations.html'>Animations</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/avatars.html'>Avatars</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/background.html'>Background</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/badges.html'>Badges</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/buttons.html'>Buttons</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/card.html'>Card</a>
|
||
</li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/carousel.html'>Carousel</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/dividers.html'>Dividers</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/form-elements.html'>Form Elements</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/image-hover.html'>Image Hover</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/image-mask.html'>Image Mask</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/lightbox.html'>Lightbox</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/player.html'>Media
|
||
Player</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/modal.html'>Modal</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/pagination.html'>Pagination</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/progressbar.html'>Progressbar</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/shadows.html'>Shadows</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/shapes.html'>Shapes</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/tables.html'>Tables</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/tabs.html'>Tabs</a>
|
||
</li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/text-animations.html'>Text Animations</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/text-highlight.html'>Text Highlight</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/tiles.html'>Tiles</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' href='docs/elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#fab758]' 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 dropdown language-select uppercase group">
|
||
<a class="nav-link dropdown-item dropdown-toggle after:!text-[#fab758] xl:!text-[.85rem] lg:!text-[.85rem] md:!text-[1.05rem] max-md:!text-[1.05rem] hover:!text-[#fab758]"
|
||
href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
|
||
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
|
||
<li class="nav-item"><a
|
||
class="dropdown-item hover:!text-[#fab758] hover:bg-[inherit] "
|
||
href="#">En</a></li>
|
||
<li class="nav-item"><a
|
||
class="dropdown-item hover:!text-[#fab758] hover:bg-[inherit] "
|
||
href="#">De</a></li>
|
||
<li class="nav-item"><a
|
||
class="dropdown-item hover:!text-[#fab758] hover:bg-[inherit] "
|
||
href="#">Es</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item"><a class="nav-link hover:!text-[#fab758]" data-bs-toggle="offcanvas"
|
||
data-bs-target="#offcanvas-info"><i
|
||
class="uil uil-info-circle before:content-['\eb99'] !text-[1.1rem]"></i></a></li>
|
||
<li class="nav-item xl:!hidden lg:!hidden">
|
||
<button class="hamburger offcanvas-nav-btn"><span></span></button>
|
||
</li>
|
||
</ul>
|
||
<!-- /.navbar-nav -->
|
||
</div>
|
||
<!-- /.navbar-other -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</nav>
|
||
<!-- /.navbar -->
|
||
<div class="offcanvas offcanvas-end text-inverse !text-[#cacaca] opacity-100" id="offcanvas-info"
|
||
data-bs-scroll="true">
|
||
<div class="offcanvas-header flex flex-row items-center justify-between p-[1.5rem]">
|
||
<h3 class="!text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !leading-[1.4] !mb-0">Trunçgil</h3>
|
||
<button type="button" class="btn-close btn-close-white !mr-[-0.5rem] m-0 p-0" data-bs-dismiss="offcanvas"
|
||
aria-label="Close"></button>
|
||
</div>
|
||
<div class="offcanvas-body !pb-[1.5rem]">
|
||
<div class="widget !mb-8">
|
||
<p>Trunçgil is a multipurpose HTML5 template with various layouts which will be a great solution for your
|
||
business.</p>
|
||
</div>
|
||
<!-- /.widget -->
|
||
<div class="widget !mb-8">
|
||
<h4 class="widget-title !text-white !mb-[0.75rem] !text-[1rem] !leading-[1.45]">Contact Info</h4>
|
||
<address class=" not-italic !leading-[inherit] !mb-[1rem]"> Moonshine St. 14/05 <br> Light City, London
|
||
</address>
|
||
<a class="!text-[#cacaca] hover:!text-[#fab758]" href="mailto:first.last@email.com">info@truncgil.com</a><br> 00
|
||
(123) 456 78 90
|
||
</div>
|
||
<!-- /.widget -->
|
||
<div class="widget !mb-8">
|
||
<h4 class="widget-title !text-white !mb-[0.75rem] !text-[1rem] !leading-[1.45]">Learn More</h4>
|
||
<ul class="list-unstyled !pl-0">
|
||
<li><a class="!text-[#cacaca] hover:!text-[#fab758]" href="#">Our Story</a></li>
|
||
<li class="!mt-[.35rem]"><a class="!text-[#cacaca] hover:!text-[#fab758]" href="#">Terms of Use</a></li>
|
||
<li class="!mt-[.35rem]"><a class="!text-[#cacaca] hover:!text-[#fab758]" href="#">Privacy Policy</a></li>
|
||
<li class="!mt-[.35rem]"><a class="!text-[#cacaca] hover:!text-[#fab758]" href="#">Contact Us</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- /.widget -->
|
||
<div class="widget">
|
||
<h4 class="widget-title !text-white !mb-[0.75rem] !text-[1rem] !leading-[1.45]">Follow Us</h4>
|
||
<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>
|
||
<!-- /.offcanvas-body -->
|
||
</div>
|
||
<!-- /.offcanvas -->
|
||
</header>
|
||
<!-- /header -->
|
||
<section class="wrapper bg-gradient-yellow">
|
||
<div class="container pt-10 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] pb-8 !text-center">
|
||
<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] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full">
|
||
<figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i2.png"
|
||
alt="image"></figure>
|
||
</div>
|
||
<!-- /column -->
|
||
<div
|
||
class="md:w-10/12 lg:w-5/12 xl:w-5/12 md:!ml-[8.33333333%] lg:!ml-0 xl:!ml-0 flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full text-center lg:text-left xl:text-left">
|
||
<h1
|
||
class="!text-[calc(1.375rem_+_1.5vw)] font-bold !leading-[1.15] xl:!text-[2.5rem] !mb-5 md:mx-[-1.25rem] lg:mx-0">
|
||
Grow Your Business with Our Solutions.</h1>
|
||
<p class="lead !text-[1.1rem] !leading-[1.55] !mb-7">We help our clients to increase their website traffic,
|
||
rankings and visibility in search results.</p>
|
||
<span><a
|
||
class="btn btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758] active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] !text-[.85rem] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Try
|
||
It For Free</a></span>
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</section>
|
||
<!-- /section -->
|
||
<section class="wrapper !bg-[#ffffff]">
|
||
<div class="container pt-[4.5rem] xl:pt-24 lg:pt-24 md:pt-24">
|
||
<div class="flex flex-wrap mx-[-15px] !text-center">
|
||
<div
|
||
class="md:w-10/12 xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[16.66666667%] lg:!ml-[16.66666667%] md:!ml-[8.33333333%]">
|
||
<h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#aab0bc] !mb-3 !leading-[1.35]">What We Do?</h2>
|
||
<h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-10 xl:!px-10">The
|
||
service we offer is specifically designed to meet your needs.</h3>
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
<div class="!relative">
|
||
<div class="shape !rounded-[50%] !bg-[#edf2fc] rellax !w-[6rem] !h-[6rem] !absolute z-[1]"
|
||
data-rellax-speed="1" style="bottom: -0.5rem; right: -2.2rem; z-index: 0;"></div>
|
||
<div
|
||
class="shape bg-dot primary rellax !w-[6rem] !h-[7rem] absolute opacity-50 bg-[radial-gradient(#fab758_2px,transparent_2.5px)]"
|
||
data-rellax-speed="1" style="top: -0.5rem; left: -2.5rem; 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] !text-center">
|
||
<div
|
||
class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
|
||
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||
<div class="card-body flex-[1_1_auto] p-[40px]">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 511.9"
|
||
class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] !text-[#fab758] text-yellow !mb-3 m-[0_auto]"><path class="lineal-stroke" d="M297.3 429.9c-118.7 0-215-96.2-215-215 0-80.1 44.5-153.5 115.5-190.6 105.1-54.7 235.1-13.8 289.9 91.3 4 8 .8 17.7-7.1 21.7-7.8 3.9-17.3.9-21.5-6.8C412.5 41.2 302 6.4 212.7 52.9c-89.4 46.7-124 156.9-77.4 246.3s156.9 124 246.3 77.4c61.7-32.2 99.8-96.8 98-166.4-.2-8.9 6.9-16.3 15.8-16.4 8.9-.2 16.2 6.8 16.4 15.7 2.9 118.8-91.1 217.5-209.9 220.4-1.4-.1-3 0-4.6 0z"/><circle class="lineal-fill" cx="297.1" cy="214.9" r="111.1"/><path class="lineal-stroke" d="M297.1 342.1c-70.3 0-127.2-57-127.2-127.2s57-127.2 127.2-127.2 127.2 57 127.2 127.2c-.1 70.2-57 127.1-127.2 127.2zm0-222.2c-52.5 0-95 42.5-95 95s42.5 95 95 95 95-42.5 95-95c-.1-52.5-42.6-95-95-95zm-240.6 392C25.3 511.9 0 486.6 0 455.4c0-17.6 8.2-34.2 22.2-44.9L88.3 360c6.4-4.9 15.5-4.3 21.2 1.4l41.1 41.1c5.7 5.7 6.3 14.8 1.4 21.2l-50.5 66.1c-9.9 12.9-24.9 21-41.2 22.1h-3.8zm40.1-117.7l-54.9 41.9c-10.7 8.1-12.9 23.3-4.8 34s23.3 12.9 34 4.8c1.8-1.4 3.4-3 4.8-4.8l42-54.9-21.1-21z"/></svg>
|
||
<h4 class="!text-[1rem]">SEO Services</h4>
|
||
<p class="!mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget
|
||
metus cras justo.</p>
|
||
<a href="#" class="more hover !text-[#fab758] focus:!text-[#fab758] hover:!text-[#fab758]">Learn More</a>
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.card -->
|
||
</div>
|
||
<!--/column -->
|
||
<div
|
||
class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
|
||
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||
<div class="card-body flex-[1_1_auto] p-[40px]">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 442.8"
|
||
class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] !text-[#e2626b] text-red !mb-3 m-[0_auto]"><path class="lineal-stroke" d="M464.2 442.8H47.7C21.4 442.8 0 421.4 0 395.1V47.7C0 21.4 21.4 0 47.7 0h416.5C490.6 0 512 21.4 512 47.7c0 7.6-6.2 13.8-13.8 13.9-7.6 0-13.8-6.2-13.9-13.8 0-11.1-9-20-20.1-20.1H47.7c-11.1 0-20 9-20.1 20.1v347.3c0 11.1 9 20.1 20.1 20.1h416.5c11.1 0 20.1-9 20.1-20.1V209.4c0-7.6 6.2-13.8 13.8-13.9 7.6 0 13.8 6.2 13.9 13.8V395c0 26.4-21.4 47.8-47.8 47.8z"/><path class="lineal-fill" d="M13.8 47.7v69.9h484.3V47.7c0-18.7-15.2-33.9-33.9-33.9H47.7C29 13.8 13.8 29 13.8 47.7z"/><path class="lineal-stroke" d="M498.2 131.5H13.8c-7.6 0-13.8-6.2-13.8-13.8v-70C0 21.4 21.4 0 47.7 0h416.5C490.6 0 512 21.4 512 47.7v69.9c0 7.7-6.2 13.9-13.8 13.9zM27.7 103.8h456.6v-56c0-11.1-9-20.1-20.1-20.1H47.8c-11.1 0-20 9-20.1 20v56.1z"/><path class="lineal-stroke" d="M294.7 79.6h-26.3c-7.6 0-13.8-6.2-13.8-13.8S260.8 52 268.4 52h26.3c7.6 0 13.8 6.2 13.8 13.8.1 7.6-6.1 13.8-13.8 13.8zm73.4 0h-26.3c-7.6 0-13.8-6.2-13.8-13.8 0-7.6 6.2-13.8 13.8-13.8h26.3c7.6 0 13.8 6.2 13.8 13.8 0 7.6-6.2 13.8-13.8 13.8zm73.3 0h-26.3c-7.6 0-13.8-6.2-13.8-13.8 0-7.6 6.2-13.8 13.8-13.8h26.3c7.6 0 13.8 6.2 13.8 13.8.1 7.6-6.1 13.8-13.8 13.8z"/><path class="lineal-fill" d="M112.8 268.5h286.4v63.6H112.8z"/><path class="lineal-stroke" d="M399.2 345.9H112.8c-7.6 0-13.8-6.2-13.8-13.8v-63.7c0-7.6 6.2-13.8 13.8-13.8h286.4c7.6 0 13.8 6.2 13.8 13.8v63.7c.1 7.6-6.1 13.8-13.8 13.8zm-272.6-27.6h258.8v-36H126.6v36zm230.9-95.5h-203c-7.6.2-14-5.8-14.2-13.5s5.8-14 13.5-14.2h203.8c7.6-.2 14 5.8 14.2 13.5s-5.8 14-13.5 14.2h-.8z"/></svg>
|
||
<h4 class="!text-[1rem]">Web Design</h4>
|
||
<p class="!mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget
|
||
metus cras justo.</p>
|
||
<a href="#" class="more hover !text-[#e2626b] focus:!text-[#e2626b] hover:!text-[#e2626b]">Learn More</a>
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.card -->
|
||
</div>
|
||
<!--/column -->
|
||
<div
|
||
class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
|
||
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||
<div class="card-body flex-[1_1_auto] p-[40px]">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 454.6"
|
||
class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] !text-[#45c4a0] text-green !mb-3 m-[0_auto]"><path class="lineal-fill" d="M131.5 126.8h249V15.2H15.2v256.3h116.3z"/><path class="lineal-stroke" d="M496.8 194.4c-8.4 0-15.2 6.8-15.2 15.2v158.3h-29.7c-8.4 0-15.2 6.8-15.2 15.2 0 .5 0 1.1.1 1.6l2.8 27.2-75.7-42.1c-2.3-1.3-4.8-1.9-7.4-1.9H146.7V142h233.8c8.4 0 15.2-6.8 15.2-15.2V15.2c0-8.4-6.8-15.2-15.2-15.2H15.2C6.8 0 0 6.8 0 15.2v256.3c0 8.4 6.8 15.2 15.2 15.2h101v96.4c0 8.4 6.8 15.2 15.2 15.2h221l97.8 54.3c7.3 4.1 16.6 1.4 20.7-5.9 1.5-2.7 2.2-5.9 1.8-9l-4.1-39.5h28.1c8.4 0 15.2-6.8 15.2-15.2V209.6c.1-8.4-6.7-15.2-15.1-15.2zM30.4 256.3V30.4h334.8v81.2H131.5c-8.4 0-15.2 6.8-15.2 15.2v129.5H30.4z"/><path class="lineal-stroke" d="M413.8 223.6H214.4c-8.4 0-15.2-6.8-15.2-15.2s6.8-15.2 15.2-15.2h199.4c8.4 0 15.2 6.8 15.2 15.2s-6.8 15.2-15.2 15.2zm0 85.9H214.4c-8.4 0-15.2-6.8-15.2-15.2S206 279 214.4 279h199.4c8.4 0 15.2 6.8 15.2 15.2s-6.8 15.3-15.2 15.3z"/></svg>
|
||
<h4 class="!text-[1rem]">Social Engagement</h4>
|
||
<p class="!mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget
|
||
metus cras justo.</p>
|
||
<a href="#" class="more hover !text-[#45c4a0] focus:!text-[#45c4a0] hover:!text-[#45c4a0]">Learn More</a>
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.card -->
|
||
</div>
|
||
<!--/column -->
|
||
<div
|
||
class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px]">
|
||
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||
<div class="card-body flex-[1_1_auto] p-[40px]">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.6 362.5"
|
||
class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] !text-[#3f78e0] text-blue !mb-3 m-[0_auto]"><path class="lineal-stroke" d="M343.4 302.9L61 302.5c-25.3-.2-47.5-16.8-54.8-40.9l-3.9-12.9c-7.1-24.2 2.5-50.3 23.5-64.2L262.1 29.8c5.7-3.7 13.3-2.1 17 3.6.7 1 1.2 2.1 1.5 3.2l74.3 249.8c2.4 6.4-.9 13.5-7.3 15.8-1.3.5-2.8.7-4.2.7zM261.8 59.4L39.3 205c-12 7.9-17.4 22.8-13.4 36.6l3.8 12.9c4.2 13.8 16.8 23.3 31.2 23.4l265.8.4-64.9-218.9z"/><path class="lineal-stroke" d="M138 362.5c-40.4 0-72.8-31.1-73.6-70.8 0-6.8 5.5-12.3 12.3-12.3 6.6 0 12.1 5.2 12.3 11.8.6 26.2 22.1 46.7 49 46.7 14.2 0 27.7-6.2 37-16.9 4.5-5.1 12.2-5.7 17.4-1.2 5.1 4.5 5.7 12.2 1.2 17.4-14 16.1-34.3 25.3-55.6 25.3z"/><path class="lineal-fill" d="M183.4 96l57.8 194.5 102.1.1-74.5-250.5L183.4 96z"/><path class="lineal-stroke" d="M343.4 302.9l-102.1-.1c-5.4 0-10.2-3.6-11.8-8.8L171.6 99.5c-1.6-5.2.5-10.8 5.1-13.8l85.4-55.9c5.7-3.7 13.3-2.1 17 3.6.7 1 1.2 2.1 1.5 3.2l74.5 250.6c1.9 6.5-1.8 13.4-8.3 15.3-1.1.2-2.3.4-3.4.4zm-92.9-24.7l76.4.1-65.1-218.9-63.9 41.8 52.6 177z"/><path class="lineal-stroke" d="M351.8 330.6c-5.4 0-10.2-3.6-11.8-8.8l-91-306c-2.1-6.5 1.3-13.4 7.8-15.6 6.5-2.1 13.4 1.3 15.6 7.8.1.3.2.5.2.8l91 305.9c1.9 6.5-1.8 13.4-8.3 15.3-1.1.4-2.3.6-3.5.6zM338 91.7c-6.8 0-12.3-5.5-12.3-12.3 0-1.8.4-3.6 1.2-5.3l13.4-28.5c2.9-6.2 10.2-8.8 16.4-5.9 6.2 2.9 8.8 10.2 5.9 16.4l-13.4 28.5c-2.1 4.3-6.4 7.1-11.2 7.1zm28.2 64.9c-6.8 0-12.3-5.5-12.3-12.3 0-5.7 3.9-10.6 9.4-12l31.1-7.5c6.6-1.5 13.2 2.6 14.7 9.3 1.5 6.5-2.5 13-9 14.7l-31.2 7.4c-.8.3-1.8.4-2.7.4zm29.1 90c-2.7 0-5.4-.9-7.5-2.6l-24.9-19.4c-5.4-4.2-6.3-11.9-2.2-17.3s11.9-6.3 17.3-2.2l24.9 19.4c5.4 4.2 6.3 11.9 2.1 17.3-2.3 3-5.9 4.7-9.7 4.8z"/></svg>
|
||
<h4 class="!text-[1rem]">Content Marketing</h4>
|
||
<p class="!mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget
|
||
metus cras justo.</p>
|
||
<a href="#" class="more hover !text-[#3f78e0] hover:!text-[#3f78e0]">Learn More</a>
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.card -->
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
</div>
|
||
<!-- /.relative -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</section>
|
||
<!-- /section -->
|
||
<section class="wrapper bg-gradient-reverse-primary">
|
||
<div class="container py-24 xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem]">
|
||
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] !mb-8 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 xl:!order-2 lg:!order-2">
|
||
<figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i3.png"
|
||
alt="image"></figure>
|
||
</div>
|
||
<!--/column -->
|
||
<div
|
||
class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
|
||
<h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#aab0bc] !mb-3 !leading-[1.35]">Analyze Now</h2>
|
||
<h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-5">Wonder how much
|
||
faster your website can go? Easily check your SEO Score now.</h3>
|
||
<p class="!mb-7">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras
|
||
justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque
|
||
nisl consectetur et.</p>
|
||
<div class="flex flex-wrap mx-[-15px]">
|
||
<div class="xl:w-9/12 lg:w-9/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
||
<form action="#">
|
||
<div class="form-floating input-group relative flex flex-wrap items-stretch w-full">
|
||
<input type="url"
|
||
class="form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:bg-[#fefefe] focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]"
|
||
placeholder="" id="seo-check">
|
||
<label for="seo-check"
|
||
class="!text-[#959ca9] !mb-2 !inline-block text-[.75rem] !absolute !z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope">Enter
|
||
Website URL</label>
|
||
<button
|
||
class="btn btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758] hover:!translate-none active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
|
||
type="button">Check</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</section>
|
||
<!-- /section -->
|
||
<section class="wrapper !bg-[#ffffff] angled upper-start lower-start relative border-0
|
||
before:top-[-4rem] before:content-[''] before:block before:absolute before:z-0 before:border-l-[100vw] before:border-r-transparent before:border-t-[4rem] before:border-y-transparent before:border-[#fefefe] before:border-0 before:border-solid before:right-0 after:bottom-[-4rem] after:content-[''] after:block after:absolute after:z-0 after:border-l-[100vw] after:border-r-transparent after:border-b-[4rem] after:border-y-transparent after:border-[#fefefe] after:border-0 after:border-solid after:right-0
|
||
">
|
||
<div class="container py-[4.5rem] xl:pt-28 lg:pt-28 md:pt-28 xl:pb-20 lg:pb-20 md:pb-20">
|
||
<div
|
||
class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] !mb-[4.5rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem] items-center">
|
||
<div
|
||
class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!order-2 lg:!order-2 xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
|
||
<div class="card xl:!mr-6 lg:!mr-6 !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||
<div class="card-body p-6">
|
||
<div class="flex flex-row">
|
||
<div>
|
||
<span
|
||
class="icon btn btn-circle btn-lg btn-soft-yellow pointer-events-none !mr-4 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]"><span
|
||
class="number table-cell text-center align-middle text-[1.1rem] font-bold m-[0_auto]">01</span></span>
|
||
</div>
|
||
<div>
|
||
<h4 class="!mb-1 text-[1rem]">Collect Ideas</h4>
|
||
<p class="!mb-0">Nulla vitae elit libero pharetra augue dapibus.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.card -->
|
||
<div class="card !mt-6 xl:!ml-16 lg:!ml-16 !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||
<div class="card-body p-6">
|
||
<div class="flex flex-row">
|
||
<div>
|
||
<span
|
||
class="icon btn btn-circle btn-lg btn-soft-yellow pointer-events-none !mr-4 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]"><span
|
||
class="number table-cell text-center align-middle text-[1.1rem] font-bold m-[0_auto]">02</span></span>
|
||
</div>
|
||
<div>
|
||
<h4 class="!mb-1 text-[1rem]">Data Analysis</h4>
|
||
<p class="!mb-0">Vivamus sagittis lacus vel augue laoreet.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.card -->
|
||
<div class="card !mt-6 xl:mx-6 lg:mx-6 !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||
<div class="card-body p-6">
|
||
<div class="flex flex-row">
|
||
<div>
|
||
<span
|
||
class="icon btn btn-circle btn-lg btn-soft-yellow pointer-events-none !mr-4 xl:!text-[1.3rem] !w-12 !h-12 !text-[calc(1.255rem_+_0.06vw)] inline-flex items-center justify-center leading-none !p-0 !rounded-[100%]"><span
|
||
class="number table-cell text-center align-middle text-[1.1rem] font-bold m-[0_auto]">03</span></span>
|
||
</div>
|
||
<div>
|
||
<h4 class="!mb-1 text-[1rem]">Finalize Product</h4>
|
||
<p class="!mb-0">Cras mattis consectetur purus sit amet.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.card -->
|
||
</div>
|
||
<!--/column -->
|
||
<div
|
||
class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !mt-[50px]">
|
||
<h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#aab0bc] !mb-3 !leading-[1.35]">Our Strategy
|
||
</h2>
|
||
<h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-5">Here are 3
|
||
working steps to organize our business projects.</h3>
|
||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada
|
||
magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna
|
||
mollis.</p>
|
||
<p class="!mb-6">Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis
|
||
euismod semper. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||
<a href="#"
|
||
class="btn btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758] active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] !text-[.85rem] !rounded-[50rem] !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Learn
|
||
More</a>
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] lg:!mb-60 xl:!mb-80 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">
|
||
<figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i6.png"
|
||
alt="image"></figure>
|
||
</div>
|
||
<!--/column -->
|
||
<div
|
||
class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
|
||
<h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#aab0bc] !mb-3 !leading-[1.35]">Why Choose Us?
|
||
</h2>
|
||
<h3 class="!text-[calc(1.315rem_+_0.78vw)] !leading-[1.25] font-bold xl:!text-[1.9rem] !mb-7">We bring
|
||
solutions to make life easier for our clients.</h3>
|
||
<div class="accordion accordion-wrapper" id="accordionExample">
|
||
<div class="card plain accordion-item">
|
||
<div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingOne">
|
||
<button class="accordion-button !text-[0.9rem] before:!text-[#fab758] hover:!text-[#fab758]"
|
||
data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true"
|
||
aria-controls="collapseOne"> Professional Design </button>
|
||
</div>
|
||
<!--/.card-header -->
|
||
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
|
||
data-bs-parent="#accordionExample">
|
||
<div class="card-body !p-[0_0_0_1.1rem]">
|
||
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
|
||
sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna,
|
||
vel.</p>
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.accordion-collapse -->
|
||
</div>
|
||
<!--/.accordion-item -->
|
||
<div class="card plain accordion-item">
|
||
<div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingTwo">
|
||
<button class="collapsed !text-[0.9rem] before:!text-[#fab758] hover:!text-[#fab758]"
|
||
data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false"
|
||
aria-controls="collapseTwo"> Top-Notch Support </button>
|
||
</div>
|
||
<!--/.card-header -->
|
||
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
|
||
data-bs-parent="#accordionExample">
|
||
<div class="card-body !p-[0_0_0_1.1rem]">
|
||
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
|
||
sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna,
|
||
vel.</p>
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.accordion-collapse -->
|
||
</div>
|
||
<!--/.accordion-item -->
|
||
<div class="card plain accordion-item">
|
||
<div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingThree">
|
||
<button class="collapsed !text-[0.9rem] before:!text-[#fab758] hover:!text-[#fab758]"
|
||
data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false"
|
||
aria-controls="collapseThree"> Header and Slider Options </button>
|
||
</div>
|
||
<!--/.card-header -->
|
||
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
|
||
data-bs-parent="#accordionExample">
|
||
<div class="card-body !p-[0_0_0_1.1rem]">
|
||
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
|
||
sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna,
|
||
vel.</p>
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.accordion-collapse -->
|
||
</div>
|
||
<!--/.accordion-item -->
|
||
</div>
|
||
<!--/.accordion -->
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</section>
|
||
<!-- /section -->
|
||
<section class="wrapper bg-gradient-yellow">
|
||
<div class="container py-[4.5rem] xl:pt-24 lg:pt-24 md:pt-24 xl:pb-32 lg:pb-32 md:pb-32">
|
||
<div class="relative !mt-8 lg:!mt-[-17.5rem] xl:!mt-[-22.5rem]">
|
||
<div class="flex flex-wrap mx-[-15px] !text-center">
|
||
<div class="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">
|
||
<h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#aab0bc] !mb-3 !leading-[1.35]">Our Team</h2>
|
||
<h3
|
||
class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-10 md:!px-16 lg:!px-4 xl:!px-0">
|
||
Think unique and be innovative. Make a difference with Trunçgil.</h3>
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
<div class="!relative">
|
||
<div class="shape bg-dot blue rellax !w-[6rem] !h-[7rem] absolute opacity-50" data-rellax-speed="1"
|
||
style="bottom: 0.5rem; right: -1.7rem; z-index: 0;"></div>
|
||
<div class="shape !rounded-[50%] bg-line red rellax !w-[6rem] !h-[6rem] absolute opacity-50"
|
||
data-rellax-speed="1" style="top: 0.5rem; left: -1.7rem; z-index: 0;"></div>
|
||
<div class="flex flex-wrap mx-[-15px] grid-view !mt-[-30px] xl:!mt-0">
|
||
<div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
||
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||
<div class="card-body p-[40px]">
|
||
<img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te1.jpg"
|
||
alt="image">
|
||
<h4 class="!mb-1 text-[1rem]">Coriss Ambady</h4>
|
||
<div class="!text-[.7rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Financial
|
||
Analyst</div>
|
||
<p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
|
||
<nav class="nav social !mb-0">
|
||
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
|
||
href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
|
||
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
|
||
href="#"><i
|
||
class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]"></i></a>
|
||
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
|
||
href="#"><i
|
||
class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] !text-[#e94d88]"></i></a>
|
||
</nav>
|
||
<!-- /.social -->
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
</div>
|
||
<!--/column -->
|
||
<div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
||
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||
<div class="card-body p-[40px]">
|
||
<img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te2.jpg"
|
||
alt="image">
|
||
<h4 class="!mb-1 text-[1rem]">Cory Zamora</h4>
|
||
<div class="!text-[.7rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Marketing
|
||
Specialist</div>
|
||
<p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
|
||
<nav class="nav social !mb-0">
|
||
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
|
||
href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
|
||
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
|
||
href="#"><i
|
||
class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]"></i></a>
|
||
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
|
||
href="#"><i
|
||
class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] !text-[#e94d88]"></i></a>
|
||
</nav>
|
||
<!-- /.social -->
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
</div>
|
||
<!--/column -->
|
||
<div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
||
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||
<div class="card-body p-[40px]">
|
||
<img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te3.jpg"
|
||
alt="image">
|
||
<h4 class="!mb-1 text-[1rem]">Nikolas Brooten</h4>
|
||
<div class="!text-[.7rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Sales Manager
|
||
</div>
|
||
<p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
|
||
<nav class="nav social !mb-0">
|
||
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
|
||
href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
|
||
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
|
||
href="#"><i
|
||
class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]"></i></a>
|
||
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
|
||
href="#"><i
|
||
class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] !text-[#e94d88]"></i></a>
|
||
</nav>
|
||
<!-- /.social -->
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
</div>
|
||
<!--/column -->
|
||
<div class="md:w-6/12 lg:w-6/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
||
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||
<div class="card-body p-[40px]">
|
||
<img class="rounded-[50%] !w-[5rem] !mb-4" src="../assets/img/avatars/te4.jpg"
|
||
alt="image">
|
||
<h4 class="!mb-1 text-[1rem]">Jackie Sanders</h4>
|
||
<div class="!text-[.7rem] uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !mb-2">Investment
|
||
Planner</div>
|
||
<p class="!mb-2">Fermentum massa justo sit amet risus morbi leo.</p>
|
||
<nav class="nav social !mb-0">
|
||
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
|
||
href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
|
||
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
|
||
href="#"><i
|
||
class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]"></i></a>
|
||
<a class="m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]"
|
||
href="#"><i
|
||
class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] !text-[#e94d88]"></i></a>
|
||
</nav>
|
||
<!-- /.social -->
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
</div>
|
||
<!-- /.relative -->
|
||
</div>
|
||
<!-- /div -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</section>
|
||
<!-- /section -->
|
||
<section class="wrapper !bg-[#ffffff]">
|
||
<div class="container">
|
||
<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 xl:!order-2 lg:!order-2">
|
||
<figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i8.png"
|
||
alt="image"></figure>
|
||
</div>
|
||
<!--/column -->
|
||
<div
|
||
class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
|
||
<h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#aab0bc] !mb-3 !leading-[1.35]">Our Solutions
|
||
</h2>
|
||
<h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-5">We make your
|
||
spending stress-free for you to have the perfect control.</h3>
|
||
<p class="!mb-6">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras
|
||
justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus.</p>
|
||
<div class="flex flex-wrap mx-[-15px] !mt-[-15px]">
|
||
<div class="xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[15px] max-w-full !mt-[15px]">
|
||
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mb-0">
|
||
<li class="relative !pl-6"><span><i
|
||
class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#feeed9] !text-[#fab758] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell absolute left-0"></i></span><span>Aenean
|
||
quam ornare. Curabitur blandit.</span></li>
|
||
<li class="relative !pl-6 !mt-3"><span><i
|
||
class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#feeed9] !text-[#fab758] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell absolute left-0"></i></span><span>Nullam
|
||
quis risus eget urna mollis ornare.</span></li>
|
||
</ul>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[15px] max-w-full !mt-[15px]">
|
||
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mb-0">
|
||
<li class="relative !pl-6"><span><i
|
||
class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#feeed9] !text-[#fab758] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell absolute left-0"></i></span><span>Etiam
|
||
porta euismod malesuada mollis.</span></li>
|
||
<li class="relative !pl-6 !mt-3"><span><i
|
||
class="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#feeed9] !text-[#fab758] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell absolute left-0"></i></span><span>Vivamus
|
||
sagittis lacus vel augue rutrum.</span></li>
|
||
</ul>
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</section>
|
||
<!-- /section -->
|
||
<section class="wrapper bg-gradient-reverse-primary">
|
||
<div class="container py-[4.5rem] xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem]">
|
||
<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">
|
||
<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] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full !self-end">
|
||
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||
<div class="card-body flex-[1_1_auto] p-[40px]">
|
||
<blockquote
|
||
class="!text-[.9rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 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>“Cum sociis natoque penatibus et magnis dis parturient montes.”</p>
|
||
<div class="flex items-center text-left">
|
||
<div class="info p-0">
|
||
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Coriss Ambady</h5>
|
||
<p class="!mb-0 !text-[.85rem]">Financial Analyst</p>
|
||
</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] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full !self-end">
|
||
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||
<div class="card-body flex-[1_1_auto] p-[40px]">
|
||
<blockquote
|
||
class="!text-[.9rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 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>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula
|
||
porta felis euismod.”</p>
|
||
<div class="flex items-center text-left">
|
||
<div class="info p-0">
|
||
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Cory Zamora</h5>
|
||
<p class="!mb-0 !text-[.85rem]">Marketing Specialist</p>
|
||
</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] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full xl:!ml-[8.33333333%]">
|
||
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||
<div class="card-body flex-[1_1_auto] p-[40px]">
|
||
<blockquote
|
||
class="!text-[.9rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 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>“Donec id elit non porta gravida at eget metus. Duis mollis est luctus commodo nisi erat.”</p>
|
||
<div class="flex items-center text-left">
|
||
<div class="info p-0">
|
||
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Barclay Widerski</h5>
|
||
<p class="!mb-0 !text-[.85rem]">Sales Specialist</p>
|
||
</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] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full !self-start">
|
||
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||
<div class="card-body flex-[1_1_auto] p-[40px]">
|
||
<blockquote
|
||
class="!text-[.9rem] !leading-[1.7] font-medium !pl-4 icon !mb-0 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>“Nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean eu leo pellentesque.”</p>
|
||
<div class="flex items-center text-left">
|
||
<div class="info p-0">
|
||
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Jackie Sanders</h5>
|
||
<p class="!mb-0 !text-[.85rem]">Investment Planner</p>
|
||
</div>
|
||
</div>
|
||
</blockquote>
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.card -->
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
</div>
|
||
<!--/column -->
|
||
<div
|
||
class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
|
||
<h2
|
||
class="!text-[0.8rem] !tracking-[0.02rem] !leading-[1.35] uppercase !text-[#aab0bc] !mb-3 xl:!mt-[-1.5rem] lg:!mt-[-1.5rem]">
|
||
Our Community</h2>
|
||
<h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-5">Don't take our
|
||
word for it. See what customers are saying about us.</h3>
|
||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl
|
||
consectetur et. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum. Vestibulum
|
||
id ligula porta felis euismod.</p>
|
||
<a href="#"
|
||
class="btn btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758] active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] !text-[.85rem] !rounded-[50rem] !mt-3 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">All
|
||
Testimonials</a>
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</section>
|
||
<!-- /section -->
|
||
<section
|
||
class="wrapper !bg-[#ffffff] angled upper-end lower-end relative border-0 before:top-[-4rem] before:border-l-transparent before:border-r-[100vw] before:border-t-[4rem] before:border-[#fefefe] before:content-[''] before:block before:absolute before:z-0 before:!border-y-transparent before:border-0 before:border-solid before:right-0 after:bottom-[-4rem] after:border-l-transparent after:border-r-[100vw] after:border-b-[4rem] after:border-[#fefefe] after:content-[''] after:block after:absolute after:z-0 after:!border-y-transparent after:border-0 after:border-solid after:right-0">
|
||
<div class="container py-[4.5rem] xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] xl:pb-32 lg:pb-32 md:pb-32">
|
||
<div class="flex flex-wrap mx-[-15px] !mt-[-30px] !mb-[4.5rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem]">
|
||
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
|
||
<h2
|
||
class="!text-[0.8rem] !tracking-[0.02rem] !leading-[1.35] uppercase !text-[#aab0bc] xl:!mt-[8rem] lg:!mt-[8rem] !mb-3">
|
||
Our Pricing</h2>
|
||
<h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-3">We offer great
|
||
and premium prices.</h3>
|
||
<p>Enjoy a <a href="#" class="hover !text-[#fab758]">free 30-day trial</a> and experience the full service.
|
||
No credit card required!</p>
|
||
<a href="#"
|
||
class="btn btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758] active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] !text-[.85rem] !rounded-[50rem] !mt-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">See
|
||
All Prices</a>
|
||
</div>
|
||
<!--/column -->
|
||
<div
|
||
class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] pricing-wrapper !mt-[30px]">
|
||
<div class="flex flex-wrap items-center switcher xl:!justify-end lg:!justify-end">
|
||
<p class="!mb-0 !pr-[.75rem]">Monthly</p>
|
||
<div
|
||
class="pricing-switchers w-8 h-4 clear-both !text-center !relative bg-[rgba(30,34,40,0.07)] !box-content rounded-3xl border-[0.2rem] border-solid border-transparent">
|
||
<div
|
||
class="pricing-switcher pricing-switcher-active cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercase !text-white">
|
||
</div>
|
||
<div
|
||
class="pricing-switcher cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercase">
|
||
</div>
|
||
<div
|
||
class="h-4 w-4 block absolute z-[555] transition-[0.3s] duration-[ease-in-out] m-0 rounded-[100%] border-[none] left-0 top-0 !bg-[#fab758] opacity-100 switcher-button">
|
||
</div>
|
||
</div>
|
||
<p class="!mb-0 !pl-3 !relative">Yearly <span class="!text-[#e2626b]">(Save 30%)</span></p>
|
||
</div>
|
||
<div class="flex flex-wrap mx-[-15px] !mt-[25px] !relative">
|
||
<div
|
||
class="shape bg-dot red rellax !w-[6rem] !h-[8rem] absolute z-[1] bg-[radial-gradient(#e2626b_2px,transparent_2.5px)] opacity-50"
|
||
data-rellax-speed="1" style="bottom: -0.5rem; right: -1.6rem;"></div>
|
||
<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 !mt-[30px]">
|
||
<div class="pricing card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||
<div class="card-body !p-[3rem_40px_3.5rem_40px]">
|
||
<div class="prices !text-[#343f52]">
|
||
<div class="price price-show !justify-start"><span class="price-currency">$</span><span
|
||
class="price-value">19</span> <span class="price-duration">mo</span></div>
|
||
<div class="price price-hide price-hidden !justify-start"><span
|
||
class="price-currency">$</span><span class="price-value">199</span> <span
|
||
class="price-duration">yr</span></div>
|
||
</div>
|
||
<!--/.prices -->
|
||
<h4 class="card-title !mt-2">Premium Plan</h4>
|
||
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8">
|
||
<li class="relative !pl-[1.25rem]"><i
|
||
class="uil uil-check absolute left-0 top-[-0.2rem] !text-[1.05rem] !tracking-[normal] !text-center flex items-center justify-center !text-[#fab758] rounded-[100%] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>5</strong>
|
||
Projects </span></li>
|
||
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i
|
||
class="uil uil-check absolute left-0 top-[-0.2rem] !text-[1.05rem] !tracking-[normal] !text-center flex items-center justify-center !text-[#fab758] rounded-[100%] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>100K</strong>
|
||
API Access </span></li>
|
||
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i
|
||
class="uil uil-check absolute left-0 top-[-0.2rem] !text-[1.05rem] !tracking-[normal] !text-center flex items-center justify-center !text-[#fab758] rounded-[100%] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>200MB</strong>
|
||
Storage </span></li>
|
||
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i
|
||
class="uil uil-check absolute left-0 top-[-0.2rem] !text-[1.05rem] !tracking-[normal] !text-center flex items-center justify-center !text-[#fab758] rounded-[100%] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span>
|
||
Weekly <strong>Reports</strong></span></li>
|
||
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i
|
||
class="uil uil-check absolute left-0 top-[-0.2rem] !text-[1.05rem] !tracking-[normal] !text-center flex items-center justify-center !text-[#fab758] rounded-[100%] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span>
|
||
7/24 <strong>Support</strong></span></li>
|
||
</ul>
|
||
<a href="#"
|
||
class="btn btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758] active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] !text-[.85rem] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Choose
|
||
Plan</a>
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.pricing -->
|
||
</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 popular !mt-[30px]">
|
||
<div class="pricing card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||
<div class="card-body !p-[3rem_40px_3.5rem_40px]">
|
||
<div class="prices !text-[#343f52]">
|
||
<div class="price price-show !justify-start"><span class="price-currency">$</span><span
|
||
class="price-value">49</span> <span class="price-duration">mo</span></div>
|
||
<div class="price price-hide price-hidden !justify-start"><span
|
||
class="price-currency">$</span><span class="price-value">499</span> <span
|
||
class="price-duration">yr</span></div>
|
||
</div>
|
||
<!--/.prices -->
|
||
<h4 class="card-title !mt-2">Corporate Plan</h4>
|
||
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8">
|
||
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i
|
||
class="uil uil-check absolute left-0 top-[-0.2rem] !text-[1.05rem] !tracking-[normal] !text-center flex items-center justify-center !text-[#fab758] rounded-[100%] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>20</strong>
|
||
Projects </span></li>
|
||
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i
|
||
class="uil uil-check absolute left-0 top-[-0.2rem] !text-[1.05rem] !tracking-[normal] !text-center flex items-center justify-center !text-[#fab758] rounded-[100%] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>300K</strong>
|
||
API Access </span></li>
|
||
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i
|
||
class="uil uil-check absolute left-0 top-[-0.2rem] !text-[1.05rem] !tracking-[normal] !text-center flex items-center justify-center !text-[#fab758] rounded-[100%] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>500MB</strong>
|
||
Storage </span></li>
|
||
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i
|
||
class="uil uil-check absolute left-0 top-[-0.2rem] !text-[1.05rem] !tracking-[normal] !text-center flex items-center justify-center !text-[#fab758] rounded-[100%] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span>
|
||
Weekly <strong>Reports</strong></span></li>
|
||
<li class="relative !pl-[1.25rem] !mt-[0.35rem]"><i
|
||
class="uil uil-check absolute left-0 top-[-0.2rem] !text-[1.05rem] !tracking-[normal] !text-center flex items-center justify-center !text-[#fab758] rounded-[100%] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span>
|
||
7/24 <strong>Support</strong></span></li>
|
||
</ul>
|
||
<a href="#"
|
||
class="btn btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758] active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] !text-[.85rem] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Choose
|
||
Plan</a>
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.pricing -->
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
<div
|
||
class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] !mb-10 xl:!mb-[4.5rem] lg:!mb-[4.5rem] md:!mb-[4.5rem] 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">
|
||
<figure class="m-0 p-0"><img class="w-auto" src="../assets/img/illustrations/i5.png"
|
||
alt="image"></figure>
|
||
</div>
|
||
<!--/column -->
|
||
<div
|
||
class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full">
|
||
<h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#aab0bc] !mb-3 !leading-[1.35]">Let’s Talk</h2>
|
||
<h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-3">Let's make
|
||
something great together. We are trusted by over 5000+ clients.</h3>
|
||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis
|
||
interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa
|
||
justo sit amet risus.</p>
|
||
<a href="#"
|
||
class="btn btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758] active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] !text-[.85rem] !rounded-[50rem] !mt-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Join
|
||
Us</a>
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
<div class="xl:!px-5 lg:!px-5">
|
||
<div class="flex flex-wrap mx-0 md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-40px] items-center">
|
||
<div
|
||
class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[40px] max-w-full">
|
||
<figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c1.png"
|
||
alt="image"></figure>
|
||
</div>
|
||
<!--/column -->
|
||
<div
|
||
class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[40px] max-w-full">
|
||
<figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c2.png"
|
||
alt="image"></figure>
|
||
</div>
|
||
<!--/column -->
|
||
<div
|
||
class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[40px] max-w-full">
|
||
<figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c3.png"
|
||
alt="image"></figure>
|
||
</div>
|
||
<!--/column -->
|
||
<div
|
||
class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[40px] max-w-full">
|
||
<figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c4.png"
|
||
alt="image"></figure>
|
||
</div>
|
||
<!--/column -->
|
||
<div
|
||
class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[40px] max-w-full">
|
||
<figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c5.png"
|
||
alt="image"></figure>
|
||
</div>
|
||
<!--/column -->
|
||
<div
|
||
class="w-4/12 xl:w-2/12 lg:w-2/12 md:w-2/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[40px] max-w-full">
|
||
<figure class="px-5 md:!px-0 lg:!px-2 xl:!px-3 xxl:!px-4"><img src="../assets/img/brands/c6.png"
|
||
alt="image"></figure>
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
</div>
|
||
<!-- /div -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</section>
|
||
<!-- /section -->
|
||
</div>
|
||
<!-- /.content-wrapper -->
|
||
<footer class="bg-[rgba(52,63,82)] opacity-100 !text-[#cacaca]">
|
||
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
||
<div class="xl:!flex lg:!flex flex-row xl:!items-center lg:!items-center">
|
||
<h3
|
||
class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-6 xl:!mb-0 lg:!mb-0 lg:!pr-40 xl:!pr-60 xxl:!pr-[22.5rem] !text-white">
|
||
Join our community by using our services and grow your business.</h3>
|
||
<a href="#"
|
||
class="btn btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758] active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] !text-[.85rem] !rounded-[50rem] !mb-0 whitespace-nowrap !tracking-[normal]">Try
|
||
It For Free</a>
|
||
</div>
|
||
<!--/div -->
|
||
<hr class="!mt-[3rem] !mb-[3.5rem] opacity-100 m-[4.5rem_0] border-t border-solid border-[rgba(164,174,198,.2)]">
|
||
<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 text-[1rem] !leading-[1.45]">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-[#fab758]" href="mailto:first.last@email.com">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 text-[1rem] !leading-[1.45]">Learn More</h4>
|
||
<ul class="pl-0 list-none !mb-0">
|
||
<li><a class="!text-[#cacaca] hover:!text-[#fab758]" href="#">About Us</a></li>
|
||
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#fab758]" href="#">Our Story</a></li>
|
||
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#fab758]" href="#">Projects</a></li>
|
||
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#fab758]" href="#">Terms of Use</a></li>
|
||
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#fab758]" 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 text-[1rem] !leading-[1.45]">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] focus:!border-[rgba(250,183,88,.5)] bg-[rgba(255,255,255,.03)] focus-visible:!border-[rgba(250,183,88,.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-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758] active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] !text-[.85rem] !relative z-[2] focus:z-[5] hover:!transform-none hover:!translate-none border-0">
|
||
</div>
|
||
<div id="mce-responses2" class="clear">
|
||
<div class="response" id="mce-error-response2" style="display:none"></div>
|
||
<div class="response" id="mce-success-response2" style="display:none"></div>
|
||
</div>
|
||
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
|
||
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text"
|
||
name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc" tabindex="-1" value=""></div>
|
||
<div class="clear"></div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<!--End mc_embed_signup-->
|
||
</div>
|
||
<!-- /.newsletter-wrapper -->
|
||
</div>
|
||
<!-- /.widget -->
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!--/.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</footer>
|
||
<!-- 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-[#fab758] 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-[#fab758] 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/demo1 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 10:55:05 GMT -->
|
||
</html> |