Ümit Tunç
1110 lines
97 KiB
HTML
1110 lines
97 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
|
||
<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/demo13 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 10:57:38 GMT -->
|
||
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
|
||
<meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
|
||
<meta name="author" content="elemis">
|
||
<title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
|
||
<link rel="shortcut icon" href="../assets/img/favicon.png">
|
||
<link rel="stylesheet" type="text/css" href="../assets/fonts/unicons/unicons.css">
|
||
<link rel="stylesheet" href="../assets/css/plugins.css">
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="stylesheet" href="../assets/css/colors/purple.css">
|
||
<style>
|
||
.navbar-light.fixed.navbar-stick .nav-link:hover{
|
||
color: #747ed1;
|
||
}
|
||
@media (min-width: 992px){
|
||
.navbar-expand-lg.navbar-light .dropdown:not(.dropdown-submenu)>.dropdown-toggle:after {
|
||
color: #747ed1;
|
||
}
|
||
}
|
||
@media (max-width: 991.98px){
|
||
.navbar-expand-lg .navbar-collapse .dropdown-toggle:after {
|
||
color: #ffffff !important;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="grow shrink-0">
|
||
<header class="relative wrapper !bg-[#f2f3fb]">
|
||
<nav class="navbar navbar-expand-lg center-logo transparent position-absolute navbar-dark">
|
||
<div class="container justify-between items-center">
|
||
<div class="flex flex-row w-full justify-between items-center xl:!hidden lg:!hidden">
|
||
<div class="navbar-brand"><a href='index.html'>
|
||
<img class="logo-dark" src="../assets/img/truncgil-yatay.svg" alt="image">
|
||
<img class="logo-light" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
|
||
</a></div>
|
||
<div class="navbar-other !ml-auto">
|
||
<ul class="navbar-nav flex-row items-center">
|
||
<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>
|
||
<!-- /.flex -->
|
||
<div class="navbar-collapse-wrapper flex flex-row items-center w-full">
|
||
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
|
||
<div class="offcanvas-header lg:mx-auto xl:mx-auto order-0 lg:!order-1 lg:!px-[5rem] xl:!order-1 xl:!px-[5rem] p-[1.5rem] !flex items-center justify-between flex-row">
|
||
<a class='transition-none hidden lg:!flex xl:!flex' href='index.html'><img class="logo-dark" src="../assets/img/truncgil-yatay.svg" alt="image">
|
||
<img class="logo-light" src="../assets/img/truncgil-yatay-dark.svg" alt="image"></a>
|
||
|
||
|
||
</div>
|
||
<div class="w-full order-1 lg:!order-none lg:!flex xl:!order-none xl:!flex offcanvas-body">
|
||
<ul class="navbar-nav lg:!ml-auto xl:!ml-auto">
|
||
<li class="nav-item dropdown dropdown-mega">
|
||
<a class="nav-link dropdown-toggle font-bold !tracking-[-0.01rem]" href="#" data-bs-toggle="dropdown">Demos</a>
|
||
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
|
||
<li class="mega-menu-content mega-menu-scroll">
|
||
<ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo1.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 1</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo2.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 2</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo3.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 3</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo4.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 4</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo5.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 5</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo6.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 6</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo7.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 7</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo8.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 8</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo9.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 9</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo10.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 10</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo11.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 11</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo12.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 12</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo13.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 13</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo14.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 14</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo15.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 15</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo16.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 16</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo17.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 17</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo18.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 18</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo19.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 19</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo20.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 20</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo21.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 21</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo22.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 22</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo23.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 23</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo24.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 24</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo25.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 25</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo26.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 26</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo27.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 27</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo28.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 28</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo29.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 29</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo30.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 30</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo31.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 31</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo32.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 32</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo33.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 33</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
||
<a class='dropdown-item' href='demo34.html'>
|
||
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
|
||
<span class="xl:!hidden lg:!hidden">Demo 34</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<!--/.row -->
|
||
<span class="hidden xl:!flex lg:!flex"><i class="uil uil-direction before:content-['\ea93']"></i><strong>Scroll to view more</strong></span>
|
||
</li>
|
||
<!--/.mega-menu-content-->
|
||
</ul>
|
||
<!--/.dropdown-menu -->
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle font-bold !tracking-[-0.01rem]" href="#" data-bs-toggle="dropdown">Pages</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#a07cc5] dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='services.html'>Services I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='services2.html'>Services II</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#a07cc5] dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='about.html'>About I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='about2.html'>About II</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#a07cc5] dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='shop.html'>Shop I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='shop2.html'>Shop II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='shop-product.html'>Product Page</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='shop-cart.html'>Shopping Cart</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='shop-checkout.html'>Checkout</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#a07cc5] dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='contact.html'>Contact I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='contact2.html'>Contact II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='contact3.html'>Contact III</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#a07cc5] dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='career.html'>Job Listing I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='career2.html'>Job Listing II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='career-job.html'>Job Description</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#a07cc5] dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='404.html'>404 Not Found</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='page-loader.html'>Page Loader</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='signin.html'>Sign In I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='signin2.html'>Sign In II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='signup.html'>Sign Up I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='signup2.html'>Sign Up II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='terms.html'>Terms</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='pricing.html'>Pricing</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='onepage.html'>One Page</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle font-bold !tracking-[-0.01rem]" href="#" data-bs-toggle="dropdown">Projects</a>
|
||
<div class="dropdown-menu dropdown-lg">
|
||
<div class="dropdown-lg-content">
|
||
<div>
|
||
<h6 class="dropdown-header !text-[#a07cc5]">Project Pages</h6>
|
||
<ul class="pl-0 list-none">
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='projects.html'>Projects I</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='projects2.html'>Projects II</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='projects3.html'>Projects III</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='projects4.html'>Projects IV</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- /.column -->
|
||
<div>
|
||
<h6 class="dropdown-header !text-[#a07cc5]">Single Projects</h6>
|
||
<ul class="pl-0 list-none">
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='single-project.html'>Single Project I</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='single-project2.html'>Single Project II</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='single-project3.html'>Single Project III</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='single-project4.html'>Single Project IV</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- /.column -->
|
||
</div>
|
||
<!-- /auto-column -->
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<!-- /.navbar-nav -->
|
||
</div>
|
||
<div class="w-full order-3 lg:!order-2 lg:!flex xl:!order-2 xl:!flex offcanvas-body">
|
||
<ul class="navbar-nav lg:!mr-auto xl:!mr-auto">
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle font-bold !tracking-[-0.01rem]" href="#" data-bs-toggle="dropdown">Blog</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='blog.html'>Blog without Sidebar</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='blog2.html'>Blog with Sidebar</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='blog3.html'>Blog with Left Sidebar</a></li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#a07cc5] dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='blog-post.html'>Post without Sidebar</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='blog-post2.html'>Post with Sidebar</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#a07cc5]' href='blog-post3.html'>Post with Left Sidebar</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item dropdown dropdown-mega">
|
||
<a class="nav-link dropdown-toggle font-bold !tracking-[-0.01rem]" href="#" data-bs-toggle="dropdown">Blocks</a>
|
||
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
|
||
<li class="mega-menu-content">
|
||
<ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block1.svg" alt="image"></div>
|
||
<span>About</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block2.svg" alt="image"></div>
|
||
<span>Blog</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block3.svg" alt="image"></div>
|
||
<span>Call to Action</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block4.svg" alt="image"></div>
|
||
<span>Clients</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block5.svg" alt="image"></div>
|
||
<span>Contact</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block6.svg" alt="image"></div>
|
||
<span>Facts</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block7.svg" alt="image"></div>
|
||
<span>FAQ</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block8.svg" alt="image"></div>
|
||
<span>Features</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block9.svg" alt="image"></div>
|
||
<span>Footer</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block10.svg" alt="image"></div>
|
||
<span>Hero</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block17.svg" alt="image"></div>
|
||
<span>Misc</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block11.svg" alt="image"></div>
|
||
<span>Navbar</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block12.svg" alt="image"></div>
|
||
<span>Portfolio</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block13.svg" alt="image"></div>
|
||
<span>Pricing</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block14.svg" alt="image"></div>
|
||
<span>Process</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block15.svg" alt="image"></div>
|
||
<span>Team</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../assets/img/demos/block16.svg" alt="image"></div>
|
||
<span>Testimonials</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<!--/.row -->
|
||
</li>
|
||
<!--/.mega-menu-content-->
|
||
</ul>
|
||
<!--/.dropdown-menu -->
|
||
</li>
|
||
<li class="nav-item dropdown dropdown-mega">
|
||
<a class="nav-link dropdown-toggle font-bold !tracking-[-0.01rem]" 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-[#a07cc5]">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-[#a07cc5]' 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-[#a07cc5]' 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-[#a07cc5]' 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-[#a07cc5]' 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-[#a07cc5]' href='docs/credits.html'>Credits</a></li>
|
||
</ul>
|
||
<h6 class="dropdown-header !text-[#a07cc5] xl:!mt-6 lg:!mt-6">Styleguide</h6>
|
||
<ul class="pl-0 list-none xl:columns-2 lg:columns-2 ">
|
||
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#a07cc5]' 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-[#a07cc5]' 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-[#a07cc5]' 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-[#a07cc5]' 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-[#a07cc5]' 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-[#a07cc5]' 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-[#a07cc5]' 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-[#a07cc5]">Elements</h6>
|
||
<ul class="pl-0 list-none xl:columns-3 lg:columns-3 ">
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/accordion.html'>Accordion</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/alerts.html'>Alerts</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/animations.html'>Animations</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/avatars.html'>Avatars</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/background.html'>Background</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/badges.html'>Badges</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/buttons.html'>Buttons</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/card.html'>Card</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/carousel.html'>Carousel</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/dividers.html'>Dividers</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/form-elements.html'>Form Elements</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/image-hover.html'>Image Hover</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/image-mask.html'>Image Mask</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/lightbox.html'>Lightbox</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/player.html'>Media Player</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/modal.html'>Modal</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/pagination.html'>Pagination</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/progressbar.html'>Progressbar</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/shadows.html'>Shadows</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/shapes.html'>Shapes</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/tables.html'>Tables</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/tabs.html'>Tabs</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/text-animations.html'>Text Animations</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/text-highlight.html'>Text Highlight</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/tiles.html'>Tiles</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' href='docs/elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#a07cc5]' 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>
|
||
<div class="offcanvas-body xl:!hidden lg:!hidden order-4 !mt-auto">
|
||
<div class="offcanvas-footer">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
<!-- /.navbar-collapse -->
|
||
</div>
|
||
<!-- /.navbar-collapse-wrapper -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</nav>
|
||
<!-- /.navbar -->
|
||
</header>
|
||
<!-- /header -->
|
||
<section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-300 !text-white bg-fixed bg-no-repeat bg-[center_center] bg-cover relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.3)]" data-image-src="./assets/img/photos/bg2.jpg">
|
||
<div class="container pt-28 pb-36 xl:pt-36 lg:pt-36 md:pt-36 xl:pb-40 lg:pb-40 md:pb-40 !text-center">
|
||
<div class="flex flex-wrap mx-[-15px] !mb-12">
|
||
<div class="md:w-9/12 lg:w-7/12 xl:w-7/12 xxl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto" data-cues="zoomIn" data-group="page-title" data-interval="-200">
|
||
<h2 class="h6 uppercase !tracking-[0.05rem] !text-white !mb-5">Hello! This is Trunçgil</h2>
|
||
<h3 class="xl:!text-[2.4rem] !text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] !text-white !mb-7">We bring rapid solutions for your business</h3>
|
||
<a href="../assets/media/movie.mp4" class="btn btn-circle btn-white btn-play ripple !mx-auto !mb-5 !relative z-[2] xl:!text-[2.3rem] !w-[3.5rem] !h-[3.5rem] !text-[calc(1.355rem_+_1.26vw)] hover:translate-y-0 inline-flex items-center justify-center leading-none p-0 !rounded-[100%] before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#ffffff] after:content-[''] after:block after:absolute after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#ffffff]" data-glightbox><i class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></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">
|
||
<div class="container !pb-[4.5rem] xl:!pb-24 lg:!pb-24 md:!pb-24">
|
||
<div class="flex flex-wrap mx-[-15px]">
|
||
<div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[-10rem]">
|
||
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/about5.jpg" alt="image"></figure>
|
||
<div class="flex flex-wrap mx-[-15px]">
|
||
<div class="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
||
<div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 !text-white !mt-[-1.25rem] xl:!mt-0 lg:!mt-0 xl:-translate-y-2/4 lg:-translate-y-2/4 bg-cover [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll !relative z-0 before:rounded-[0.4rem] before:bg-[rgba(30,34,40,.4)] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0" data-image-src="./assets/img/photos/bg2.jpg">
|
||
<div class="card-body p-[2.25rem] xl:!p-[2.5rem]">
|
||
<div class="flex flex-wrap mx-[-15px] items-center counter-wrapper !mt-[-20px] !text-center">
|
||
<div class="w-6/12 xl:w-3/12 lg:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !mt-[20px]">
|
||
<h3 class="counter counter-lg !text-white xl:!text-[2.2rem] !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none !mb-2">7518</h3>
|
||
<p class="!text-[0.8rem] font-medium !mb-0 !text-white">Completed Projects</p>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="w-6/12 xl:w-3/12 lg:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !mt-[20px]">
|
||
<h3 class="counter counter-lg !text-white xl:!text-[2.2rem] !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none !mb-2">3472</h3>
|
||
<p class="!text-[0.8rem] font-medium !mb-0 !text-white">Satisfied Customers</p>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="w-6/12 xl:w-3/12 lg:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !mt-[20px]">
|
||
<h3 class="counter counter-lg !text-white xl:!text-[2.2rem] !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none !mb-2">2184</h3>
|
||
<p class="!text-[0.8rem] font-medium !mb-0 !text-white">Expert Employees</p>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="w-6/12 xl:w-3/12 lg:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !mt-[20px]">
|
||
<h3 class="counter counter-lg !text-white xl:!text-[2.2rem] !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] !leading-none !mb-2">4523</h3>
|
||
<p class="!text-[0.8rem] font-medium !mb-0 !text-white">Awards Won</p>
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.card -->
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
<div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] !mt-[25px] md:!mt-[4.5rem] lg:!mt-0 xl:!mt-0 !mb-20 items-center">
|
||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] px-[20px] !mt-[40px] max-w-full xl:!order-2 lg:!order-2">
|
||
<div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]" data-cues="fadeIn" data-group="images">
|
||
<div class="xl:w-4/12 lg:w-4/12 md:w-4/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 xl:!ml-[16.66666667%] lg:!ml-[16.66666667%] md:!ml-[16.66666667%] !self-end">
|
||
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g1.jpg" alt="image"></figure>
|
||
</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">
|
||
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g2.jpg" alt="image"></figure>
|
||
</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 xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] md:!ml-[8.33333333%]">
|
||
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g3.jpg" alt="image"></figure>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="xl:w-4/12 lg:w-4/12 md:w-4/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">
|
||
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g4.jpg" alt="image"></figure>
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
</div>
|
||
<!--/column -->
|
||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] !px-[15px] !mt-[40px] max-w-full">
|
||
<h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3">What We Do?</h2>
|
||
<p class="lead !mb-8 xxl:!pr-2 !text-[1.05rem] !leading-[1.6]">The full service we are offering is <span class="relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[30%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[9%] motion-reduce:after:transition-none after:bg-[rgba(116,126,209,.12)]">specifically</span> designed to meet your business needs and projects.</p>
|
||
<div class="flex flex-wrap mx-[-15px] xl:mx-[-25px] !mt-[-30px]" data-cues="slideInUp" data-group="services">
|
||
<div class="md:w-6/12 lg:w-full xl:w-6/12 w-full flex-[0_0_auto] xl:!px-[25px] !px-[15px] max-w-full !mt-[30px]">
|
||
<div class="flex flex-row">
|
||
<div>
|
||
<div class="icon btn btn-circle btn-lg btn-soft-purple pointer-events-none !mr-5 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%]"> <i class="!text-[calc(1.255rem_+_0.06vw)] before:content-['\ec50'] uil uil-phone-volume"></i> </div>
|
||
</div>
|
||
<div>
|
||
<h4 class="!mb-1">24/7 Support</h4>
|
||
<p class="!mb-0">Nulla vitae elit libero pharetra augue dapibus.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="md:w-6/12 lg:w-full xl:w-6/12 w-full flex-[0_0_auto] xl:!px-[25px] !px-[15px] max-w-full !mt-[30px]">
|
||
<div class="flex flex-row">
|
||
<div>
|
||
<div class="icon btn btn-circle btn-lg btn-soft-purple pointer-events-none !mr-5 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%]"> <i class="!text-[calc(1.255rem_+_0.06vw)] before:content-['\ecb3'] uil uil-shield-exclamation"></i> </div>
|
||
</div>
|
||
<div>
|
||
<h4 class="!mb-1">Secure Payments</h4>
|
||
<p class="!mb-0">Vivamus sagittis lacus augue laoreet vel.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="md:w-6/12 lg:w-full xl:w-6/12 w-full flex-[0_0_auto] xl:!px-[25px] !px-[15px] max-w-full !mt-[30px]">
|
||
<div class="flex flex-row">
|
||
<div>
|
||
<div class="icon btn btn-circle btn-lg btn-soft-purple pointer-events-none !mr-5 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%]"> <i class="!text-[calc(1.255rem_+_0.06vw)] before:content-['\ebb2'] uil uil-laptop-cloud"></i> </div>
|
||
</div>
|
||
<div>
|
||
<h4 class="!mb-1">Daily Updates</h4>
|
||
<p class="!mb-0">Cras mattis consectetur purus sit amet.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="md:w-6/12 lg:w-full xl:w-6/12 w-full flex-[0_0_auto] xl:!px-[25px] !px-[15px] max-w-full !mt-[30px]">
|
||
<div class="flex flex-row">
|
||
<div>
|
||
<div class="icon btn btn-circle btn-lg btn-soft-purple pointer-events-none !mr-5 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%]"> <i class="!text-[calc(1.255rem_+_0.06vw)] before:content-['\e9d3'] uil uil-chart-line"></i> </div>
|
||
</div>
|
||
<div>
|
||
<h4 class="!mb-1">Market Research</h4>
|
||
<p class="!mb-0">Aenean lacinia bibendum nulla sed consectetur.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
<h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3">How We Do It?</h2>
|
||
<p class="lead !mb-8 !text-[1.05rem] !leading-[1.6]">We make your spending <span class="relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[30%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[9%] motion-reduce:after:transition-none after:bg-[rgba(116,126,209,.12)]">stress-free</span> for you to have the perfect control.</p>
|
||
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-30px] process-wrapper line" data-cues="slideInUp" data-group="process">
|
||
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[30px] max-w-full !relative after:w-full after:absolute after:content-[''] after:h-px after:z-[1] after:border-t-[rgba(164,174,198,0.2)] after:border-t after:border-solid after:left-[3rem] after:top-6 after:bg-inherit max-lg:after:!hidden"> <span class="icon btn btn-circle btn-lg btn-soft-purple pointer-events-none !mb-4 !relative z-[2] 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">01</span></span>
|
||
<h4 class="!mb-1">Concept</h4>
|
||
<p>Nulla vitae elit libero elit non porta gravida eget metus cras. Aenean eu leo quam. Pellentesque ornare.</p>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[30px] max-w-full !relative after:w-full after:absolute after:content-[''] after:h-px after:z-[1] after:border-t-[rgba(164,174,198,0.2)] after:border-t after:border-solid after:left-[3rem] after:top-6 after:bg-inherit max-lg:after:!hidden"> <span class="icon btn btn-circle btn-lg btn-purple !text-white !bg-[#747ed1] border-[#747ed1] hover:text-white hover:bg-[#747ed1] hover:!border-[#747ed1] active:text-white active:bg-[#747ed1] active:border-[#747ed1] disabled:text-white disabled:bg-[#747ed1] disabled:border-[#747ed1] pointer-events-none !mb-4 !relative z-[2] 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">02</span></span>
|
||
<h4 class="!mb-1">Prepare</h4>
|
||
<p>Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis.</p>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[30px] max-w-full !relative after:w-full after:absolute after:content-[''] after:h-px after:z-[1] after:border-t-[rgba(164,174,198,0.2)] after:border-t after:border-solid after:left-[3rem] after:top-6 after:bg-inherit max-lg:after:!hidden"> <span class="icon btn btn-circle btn-lg btn-soft-purple pointer-events-none !mb-4 !relative z-[2] 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">03</span></span>
|
||
<h4 class="!mb-1">Retouch</h4>
|
||
<p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero.</p>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[30px] max-w-full"> <span class="icon btn btn-circle btn-lg btn-soft-purple pointer-events-none !mb-4 !relative z-[2] 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">04</span></span>
|
||
<h4 class="!mb-1">Finalize</h4>
|
||
<p>Integer posuere erat, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo.</p>
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</section>
|
||
<!-- /section -->
|
||
<section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-300 !text-white !bg-fixed bg-no-repeat bg-[center_center] bg-cover relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.3)]" data-image-src="./assets/img/photos/bg2.jpg">
|
||
<div class="container py-[4.5rem] xl:!py-28 lg:!py-28 md:!py-28">
|
||
<h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-5 !text-white !text-center">Happy Customers</h2>
|
||
<div class="flex flex-wrap mx-[-15px]">
|
||
<div class="md:w-10/12 lg:w-8/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto" data-cue="fadeIn">
|
||
<div class="swiper-container dots-light dots-closer !text-center !mb-6" data-margin="30" data-dots="true">
|
||
<div class="swiper">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide">
|
||
<blockquote class="!pl-0 text-[1rem] !mb-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem]">
|
||
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus.”</p>
|
||
<div class="flex items-center text-left justify-center">
|
||
<img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te1.jpg" alt="image">
|
||
<div class="info !pl-4">
|
||
<h6 class="!mb-1 !text-white !leading-[1.55]">Coriss Ambady</h6>
|
||
<p class="!mb-0 text-[.8rem]">Financial Analyst</p>
|
||
</div>
|
||
</div>
|
||
</blockquote>
|
||
</div>
|
||
<!--/.swiper-slide -->
|
||
<div class="swiper-slide">
|
||
<blockquote class="!pl-0 text-[1rem] !mb-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem]">
|
||
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus.”</p>
|
||
<div class="flex items-center text-left justify-center">
|
||
<img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te2.jpg" alt="image">
|
||
<div class="info !pl-4">
|
||
<h6 class="!mb-1 !text-white !leading-[1.55]">Cory Zamora</h6>
|
||
<p class="!mb-0 text-[.8rem]">Marketing Specialist</p>
|
||
</div>
|
||
</div>
|
||
</blockquote>
|
||
</div>
|
||
<!--/.swiper-slide -->
|
||
<div class="swiper-slide">
|
||
<blockquote class="!pl-0 text-[1rem] !mb-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem]">
|
||
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur adipiscing dapibus.”</p>
|
||
<div class="flex items-center text-left justify-center">
|
||
<img class="!rounded-[50%] !w-[3.5rem]" src="../assets/img/avatars/te3.jpg" alt="image">
|
||
<div class="info !pl-4">
|
||
<h6 class="!mb-1 !text-white !leading-[1.55]">Nikolas Brooten</h6>
|
||
<p class="!mb-0 text-[.8rem]">Sales Manager</p>
|
||
</div>
|
||
</div>
|
||
</blockquote>
|
||
</div>
|
||
<!--/.swiper-slide -->
|
||
</div>
|
||
<!--/.swiper-wrapper -->
|
||
</div>
|
||
<!--/.swiper -->
|
||
</div>
|
||
<!-- /.swiper-container -->
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</section>
|
||
<!-- /section -->
|
||
<section class="wrapper !bg-[#ffffff]">
|
||
<div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
|
||
<div class="flex flex-wrap mx-[-15px] items-center !mb-7">
|
||
<div class="md:w-8/12 lg:w-8/12 xl:w-7/12 xxl:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full xl:!pr-28 lg:!pr-28">
|
||
<h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3">Recent Projects</h2>
|
||
<p class="lead !text-[1.05rem] !leading-[1.6] font-medium">We love to turn ideas into <span class="relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[30%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[9%] motion-reduce:after:transition-none after:bg-[rgba(116,126,209,.12)]">beautiful things</span>.</p>
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
<div class="projects-tiles">
|
||
<div class="project itemgrid grid-view">
|
||
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-50px] xl:!mt-[-70px] lg:!mt-[-70px] md:!mt-[-70px] isotope" data-cue="slideInUp">
|
||
<div class="item xl:w-5/12 lg:w-5/12 md:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px] max-md:!mt-[50px]">
|
||
<figure class="lift rounded !mb-6"><a href='single-project3.html'> <img src="../assets/img/photos/rp1.jpg" alt="image"></a></figure>
|
||
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-2 !text-[#747ed1]">Stationary</div>
|
||
<h3 class="post-title">Ipsum Ultricies Cursus</h3>
|
||
</div>
|
||
<!-- /.item -->
|
||
<div class="item xl:w-7/12 lg:w-7/12 md:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full xl:!mt-28 lg:!mt-28 md:!mt-28 max-md:!mt-[50px]">
|
||
<figure class="lift rounded !mb-6"><a href='single-project2.html'> <img src="../assets/img/photos/rp2.jpg" alt="image"></a></figure>
|
||
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-2 !text-[#f78b77]">Invitation</div>
|
||
<h3 class="post-title">Mollis Ipsum Mattis</h3>
|
||
</div>
|
||
<!-- /.item -->
|
||
<div class="item xl:w-5/12 lg:w-5/12 md:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px] max-md:!mt-[50px]">
|
||
<figure class="lift rounded !mb-6"><a href='single-project.html'> <img src="../assets/img/photos/rp3.jpg" alt="image"></a></figure>
|
||
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-2 !text-[#e2626b]">Notebook</div>
|
||
<h3 class="post-title">Magna Tristique Inceptos</h3>
|
||
</div>
|
||
<!-- /.item -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.project -->
|
||
</div>
|
||
<!-- /.projects-tiles -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</section>
|
||
<!-- /section -->
|
||
<section class="wrapper bg-[rgba(246,247,249,1)] ">
|
||
<div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
|
||
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] xl:!mt-0 lg:!mt-0 !mb-10">
|
||
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full xl:!mt-2 lg:!mt-2 !mt-[50px]">
|
||
<h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3 xxl:!pr-5">Trusted by over 300+ clients</h3>
|
||
<p class="lead text-[1.05rem] !leading-[1.6] !mb-0 xxl:!pr-5">We <span class="relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[30%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[9%] motion-reduce:after:transition-none after:bg-[rgba(116,126,209,.12)]">bring solutions</span> to make life easier for our customers.</p>
|
||
</div>
|
||
<!-- /column -->
|
||
<div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[50px]">
|
||
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] xl:mx-[-35px] !mt-[-70px]" data-cues="fadeIn" data-group="clients">
|
||
<div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
|
||
<figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z1.png" alt="image"></figure>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
|
||
<figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z2.png" alt="image"></figure>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
|
||
<figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z3.png" alt="image"></figure>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
|
||
<figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z4.png" alt="image"></figure>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
|
||
<figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z5.png" alt="image"></figure>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
|
||
<figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z6.png" alt="image"></figure>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
|
||
<figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z7.png" alt="image"></figure>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-6/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px]">
|
||
<figure class="px-3 xl:!px-0 lg:!px-0 md:!px-0 xxl:!px-2"><img src="../assets/img/brands/z8.png" alt="image"></figure>
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
</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:!py-24 lg:!py-24 md:!py-24">
|
||
<div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0 !mb-10 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">
|
||
<h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] xl:!mt-32 lg:!mt-32 !mb-3">Our Pricing</h2>
|
||
<p class="lead !text-[1.05rem] !leading-[1.6] font-medium">We offer <span class="relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[30%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[9%] motion-reduce:after:transition-none after:bg-[rgba(116,126,209,.12)]">great prices</span>, premium and quality products for your business.</p>
|
||
<p>Enjoy a <a href="#" class="hover !text-[#747ed1]">free 30-day trial</a> and experience the full service. No credit card required!</p>
|
||
<a href="#" class="btn btn-purple !text-white !bg-[#747ed1] border-[#747ed1] hover:text-white hover:bg-[#747ed1] hover:!border-[#747ed1] active:text-white active:bg-[#747ed1] active:border-[#747ed1] disabled:text-white disabled:bg-[#747ed1] disabled:border-[#747ed1] !rounded-[50rem] !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 max-lg:!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-[#747ed1] 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="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">
|
||
<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.5rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#e6e8f7] !text-[#747ed1] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>5</strong> Projects </span></li>
|
||
<li class="relative !pl-[1.5rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#e6e8f7] !text-[#747ed1] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>100K</strong> API Access </span></li>
|
||
<li class="relative !pl-[1.5rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#e6e8f7] !text-[#747ed1] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>200MB</strong> Storage </span></li>
|
||
<li class="relative !pl-[1.5rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#e6e8f7] !text-[#747ed1] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span> Weekly <strong>Reports</strong></span></li>
|
||
<li class="relative !pl-[1.5rem] !mt-[0.35rem]"><i class="uil uil-times bullet-soft-red absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center !bg-[#fae3e4] !text-[#e2626b] rounded-[100%] top-[0.2rem] before:content-['\ed3b'] before:align-middle before:table-cell"></i><span> 7/24 <strong>Support</strong></span></li>
|
||
</ul>
|
||
<a href="#" class="btn btn-purple !text-white !bg-[#747ed1] border-[#747ed1] hover:text-white hover:bg-[#747ed1] hover:!border-[#747ed1] active:text-white active:bg-[#747ed1] active:border-[#747ed1] disabled:text-white disabled:bg-[#747ed1] disabled:border-[#747ed1] !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">
|
||
<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.5rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#e6e8f7] !text-[#747ed1] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>20</strong> Projects </span></li>
|
||
<li class="relative !pl-[1.5rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#e6e8f7] !text-[#747ed1] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>300K</strong> API Access </span></li>
|
||
<li class="relative !pl-[1.5rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#e6e8f7] !text-[#747ed1] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>500MB</strong> Storage </span></li>
|
||
<li class="relative !pl-[1.5rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#e6e8f7] !text-[#747ed1] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span> Weekly <strong>Reports</strong></span></li>
|
||
<li class="relative !pl-[1.5rem] !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#e6e8f7] !text-[#747ed1] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span> 7/24 <strong>Support</strong></span></li>
|
||
</ul>
|
||
<a href="#" class="btn btn-purple !text-white !bg-[#747ed1] border-[#747ed1] hover:text-white hover:bg-[#747ed1] hover:!border-[#747ed1] active:text-white active:bg-[#747ed1] active:border-[#747ed1] disabled:text-white disabled:bg-[#747ed1] disabled:border-[#747ed1] !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] !mt-[-50px] xl:mx-[-35px] lg:mx-[-20px] items-center">
|
||
<div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] !mt-[50px] max-w-full !relative">
|
||
<div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px]">
|
||
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full">
|
||
<figure class="!rounded-[.4rem] xl:!mt-10 lg:!mt-10 md:!mt-10 !relative"><img class="!rounded-[.4rem]" src="../assets/img/photos/g5.jpg" alt="image"></figure>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] 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="w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full xl:!order-2 lg:!order-2 md:!order-2">
|
||
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/g6.jpg" alt="image"></figure>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="xl:w-10/12 lg:w-10/12 md:w-10/12 w-full flex-[0_0_auto] px-[12.5px] !mt-[25px] max-w-full">
|
||
<div class="card !bg-[#e9eaf8] !text-center">
|
||
<div class="card-body !py-12 !px-[2rem] counter-wrapper">
|
||
<h3 class="counter !whitespace-nowrap xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] !tracking-[normal] !leading-none !mb-2">5000+</h3>
|
||
<p class="!mb-0 text-[0.8rem] font-medium">Satisfied Customers</p>
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.card -->
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
</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-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3">Let’s Talk</h2>
|
||
<p class="lead !text-[1.05rem] !leading-[1.6] font-medium">Let’s make something great together. We are <span class="relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[30%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[9%] motion-reduce:after:transition-none after:bg-[rgba(116,126,209,.12)]">trusted by</span> over 5000+ clients. Join them by using our services and grow your business.</p>
|
||
<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-purple !text-white !bg-[#747ed1] border-[#747ed1] hover:text-white hover:bg-[#747ed1] hover:!border-[#747ed1] active:text-white active:bg-[#747ed1] active:border-[#747ed1] disabled:text-white disabled:bg-[#747ed1] disabled:border-[#747ed1] !rounded-[50rem] !mt-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>
|
||
<!-- /.container -->
|
||
</section>
|
||
<!-- /section -->
|
||
</div>
|
||
<!-- /.content-wrapper -->
|
||
<footer class=" bg-[#21262c] opacity-100 !text-[#cacaca]">
|
||
<div class="container py-16 xl:!py-20 lg:!py-20 md:!py-20">
|
||
<div class="!mt-10"></div>
|
||
<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-[.95rem] !leading-[1.45]">Get in Touch</h4>
|
||
<address class="xl:!pr-20 xxl:!pr-28 not-italic !leading-[inherit] block !mb-4">ÇAMTEPE MAH. MAHMUT TEVFİK ATAY BUL. GAZİANTEP TEKNOPARK NO: 4A İÇ KAPI NO: 1 ŞAHİNBEY / GAZİANTEP</address>
|
||
<a class="!text-[#cacaca] hover:!text-[#747ed1]" 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-[.95rem] !leading-[1.45]">Learn More</h4>
|
||
<ul class="pl-0 list-none !mb-0">
|
||
<li><a class="!text-[#cacaca] hover:!text-[#747ed1]" href="#">About Us</a></li>
|
||
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#747ed1]" href="#">Our Story</a></li>
|
||
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#747ed1]" href="#">Projects</a></li>
|
||
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#747ed1]" href="#">Terms of Use</a></li>
|
||
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#747ed1]" href="#">Privacy Policy</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- /.widget -->
|
||
</div>
|
||
<!-- /column -->
|
||
<div class="md:w-full xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
|
||
<div class="widget !text-[#cacaca]">
|
||
<h4 class="widget-title !text-white !mb-3 !text-[.95rem] !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-[#747ed1] bg-[rgba(255,255,255,.03)] focus-visible:!border-[#747ed1] " placeholder="" id="mce-EMAIL2">
|
||
<label class="!ml-[0.05rem] !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none origin-[0_0] px-4 py-[0.6rem] left-0 top-0" for="mce-EMAIL2">Email Address</label>
|
||
<input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe2" class="btn btn-purple !text-white !bg-[#747ed1] border-[#747ed1] hover:text-white hover:bg-[#747ed1] hover:!border-[#747ed1] active:text-white active:bg-[#747ed1] active:border-[#747ed1] disabled:text-white disabled:bg-[#747ed1] disabled:border-[#747ed1] !relative z-[2] hover:!transform-none hover:!translate-none border-0 !text-[.85rem]">
|
||
</div>
|
||
<div id="mce-responses2" class="clear">
|
||
<div class="response" id="mce-error-response2" style="display:none"></div>
|
||
<div class="response" id="mce-success-response2" style="display:none"></div>
|
||
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
|
||
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc" tabindex="-1" value=""></div>
|
||
<div class="clear"></div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<!--End mc_embed_signup-->
|
||
</div>
|
||
<!-- /.newsletter-wrapper -->
|
||
</div>
|
||
<!-- /.widget -->
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!--/.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</footer>
|
||
<!-- progress wrapper -->
|
||
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#747ed1] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
|
||
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
|
||
<path class="fill-none stroke-[#747ed1] 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/demo13 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 10:57:43 GMT -->
|
||
</html> |