Ümit Tunç
1210 lines
116 KiB
HTML
1210 lines
116 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
|
|
<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/demo5 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 10:57:01 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">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="grow shrink-0">
|
|
<header class="relative wrapper !bg-[#edf2fc] !opacity-100">
|
|
<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">
|
|
|
|
|
|
</div>
|
|
<div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item dropdown dropdown-mega">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
|
|
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
|
|
<li class="mega-menu-content mega-menu-scroll">
|
|
<ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo1.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi1.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 1</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo2.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi2.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 2</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo3.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi3.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 3</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo4.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi4.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 4</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo5.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi5.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 5</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo6.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi6.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 6</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo7.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi7.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 7</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo8.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi8.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 8</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo9.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi9.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 9</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo10.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi10.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 10</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo11.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi11.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 11</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo12.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi12.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 12</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo13.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi13.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 13</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo14.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi14.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 14</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo15.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi15.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 15</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo16.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi16.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 16</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo17.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi17.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 17</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo18.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi18.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 18</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo19.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi19.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 19</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo20.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi20.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 20</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo21.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi21.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 21</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo22.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi22.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 22</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo23.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi23.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 23</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo24.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi24.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 24</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo25.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi25.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 25</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo26.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi26.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 26</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo27.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi27.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 27</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo28.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi28.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 28</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo29.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi29.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 29</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo30.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi30.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 30</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo31.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi31.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 31</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo32.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi32.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 32</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo33.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi33.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 33</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo34.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../assets/img/demos/mi34.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 34</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!--/.row -->
|
|
<span class="hidden xl:!flex lg:!flex"><i class="uil uil-direction before:content-['\ea93']"></i><strong>Scroll to view more</strong></span>
|
|
</li>
|
|
<!--/.mega-menu-content-->
|
|
</ul>
|
|
<!--/.dropdown-menu -->
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='services.html'>Services I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='services2.html'>Services II</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='about.html'>About I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='about2.html'>About II</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='shop.html'>Shop I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='shop2.html'>Shop II</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='shop-product.html'>Product Page</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='shop-cart.html'>Shopping Cart</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='shop-checkout.html'>Checkout</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='contact.html'>Contact I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='contact2.html'>Contact II</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='contact3.html'>Contact III</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='career.html'>Job Listing I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='career2.html'>Job Listing II</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='career-job.html'>Job Description</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='404.html'>404 Not Found</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='page-loader.html'>Page Loader</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='signin.html'>Sign In I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='signin2.html'>Sign In II</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='signup.html'>Sign Up I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='signup2.html'>Sign Up II</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='terms.html'>Terms</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item"><a class='dropdown-item' href='pricing.html'>Pricing</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='onepage.html'>One Page</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
|
|
<div class="dropdown-menu dropdown-lg">
|
|
<div class="dropdown-lg-content">
|
|
<div>
|
|
<h6 class="dropdown-header">Project Pages</h6>
|
|
<ul class="pl-0 list-none">
|
|
<li><a class='dropdown-item' href='projects.html'>Projects I</a></li>
|
|
<li><a class='dropdown-item' href='projects2.html'>Projects II</a></li>
|
|
<li><a class='dropdown-item' href='projects3.html'>Projects III</a></li>
|
|
<li><a class='dropdown-item' href='projects4.html'>Projects IV</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- /.column -->
|
|
<div>
|
|
<h6 class="dropdown-header">Single Projects</h6>
|
|
<ul class="pl-0 list-none">
|
|
<li><a class='dropdown-item' href='single-project.html'>Single Project I</a></li>
|
|
<li><a class='dropdown-item' href='single-project2.html'>Single Project II</a></li>
|
|
<li><a class='dropdown-item' href='single-project3.html'>Single Project III</a></li>
|
|
<li><a class='dropdown-item' href='single-project4.html'>Single Project IV</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- /.column -->
|
|
</div>
|
|
<!-- /auto-column -->
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='blog.html'>Blog without Sidebar</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='blog2.html'>Blog with Sidebar</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='blog3.html'>Blog with Left Sidebar</a></li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='blog-post.html'>Post without Sidebar</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='blog-post2.html'>Post with Sidebar</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='blog-post3.html'>Post with Left Sidebar</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown dropdown-mega">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
|
|
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
|
|
<li class="mega-menu-content">
|
|
<ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='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" href="#" data-bs-toggle="dropdown">Documentation</a>
|
|
<ul class="dropdown-menu mega-menu">
|
|
<li class="mega-menu-content">
|
|
<div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
|
|
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full">
|
|
<h6 class="dropdown-header">Usage</h6>
|
|
<ul class="pl-0 list-none xl:columns-2 lg:columns-2 xl:pb-1 lg:pb-1">
|
|
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='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' 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' 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' 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' href='docs/credits.html'>Credits</a></li>
|
|
</ul>
|
|
<h6 class="dropdown-header xl:!mt-6 lg:!mt-6">Styleguide</h6>
|
|
<ul class="pl-0 list-none xl:columns-2 lg:columns-2 ">
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='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' 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' 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' 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' 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' 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' 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">Elements</h6>
|
|
<ul class="pl-0 list-none xl:columns-3 lg:columns-3 ">
|
|
<li><a class='dropdown-item' href='docs/elements/accordion.html'>Accordion</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/alerts.html'>Alerts</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/animations.html'>Animations</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/avatars.html'>Avatars</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/background.html'>Background</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/badges.html'>Badges</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/buttons.html'>Buttons</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/card.html'>Card</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/carousel.html'>Carousel</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/dividers.html'>Dividers</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/form-elements.html'>Form Elements</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/image-hover.html'>Image Hover</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/image-mask.html'>Image Mask</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/lightbox.html'>Lightbox</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/player.html'>Media Player</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/modal.html'>Modal</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/pagination.html'>Pagination</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/progressbar.html'>Progressbar</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/shadows.html'>Shadows</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/shapes.html'>Shapes</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/tables.html'>Tables</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/tabs.html'>Tabs</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/text-animations.html'>Text Animations</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/text-highlight.html'>Text Highlight</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/tiles.html'>Tiles</a></li>
|
|
<li><a class='dropdown-item' href='docs/elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
|
|
<li><a class='dropdown-item' 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">
|
|
<a href="#" class="nav-link" data-bs-toggle="modal" data-bs-target="#modal-signin">Sign In</a>
|
|
</li>
|
|
<li class="nav-item hidden xl:block lg:block md:block">
|
|
<a href="#" class="btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[.4rem] !text-[.8rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" data-bs-toggle="modal" data-bs-target="#modal-signup">Sign Up</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="modal fade !m-0 !p-0" id="modal-signin" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered modal-sm">
|
|
<div class="modal-content !text-center">
|
|
<div class="relative flex-auto pt-[2.5rem] pr-[2.5rem] pb-[2.5rem] !pl-[2.5rem]">
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
<h2 class="!mb-3 text-left">Welcome Back</h2>
|
|
<p class="lead text-[0.9rem] font-medium !leading-[1.65] !mb-6 text-left">Fill your email and password to sign in.</p>
|
|
<form class="text-left !mb-3">
|
|
<div class="form-floating relative !mb-4">
|
|
<input type="email" 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: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="Email" id="loginEmail1">
|
|
<label for="loginEmail1" 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">Email</label>
|
|
</div>
|
|
<div class="form-floating relative password-field !mb-4">
|
|
<input type="password" 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: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="Password" id="loginPassword1">
|
|
<span class="password-toggle absolute -translate-y-2/4 cursor-pointer text-[0.9rem] !text-[#959ca9] right-3 top-2/4"><i class="uil uil-eye"></i></span>
|
|
<label for="loginPassword1" 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">Password</label>
|
|
</div>
|
|
<a class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] btn-login w-full !mb-2">Sign In</a>
|
|
</form>
|
|
<!-- /form -->
|
|
<p class="!mb-1"><a href="#" class="hover">Forgot Password?</a></p>
|
|
<p class="!mb-0">Don't have an account? <a href="#" data-bs-target="#modal-signup" data-bs-toggle="modal" data-bs-dismiss="modal" class="hover">Sign up</a></p>
|
|
<div class="divider-icon !my-4">or</div>
|
|
<nav class="nav social justify-center !text-center">
|
|
<a href="#" class="btn btn-circle btn-sm btn-google !text-white !bg-[#e44134] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"><i class="uil uil-google before:content-['\eb50']"></i></a>
|
|
<a href="#" class="btn btn-circle btn-sm btn-facebook-f !text-white !bg-[#4470cf] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"><i class="uil uil-facebook-f before:content-['\eae2']"></i></a>
|
|
<a href="#" class="btn btn-circle btn-sm btn-twitter !text-white !bg-[#5daed5] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"><i class="uil uil-twitter before:content-['\ed59']"></i></a>
|
|
</nav>
|
|
<!--/.social -->
|
|
</div>
|
|
<!--/.modal-content -->
|
|
</div>
|
|
<!--/.modal-body -->
|
|
</div>
|
|
<!--/.modal-dialog -->
|
|
</div>
|
|
<!--/.modal -->
|
|
<div class="modal fade !m-0 !p-0" id="modal-signup" tabindex="-1">
|
|
<div class="modal-dialog modal-dialog-centered modal-sm">
|
|
<div class="modal-content !text-center">
|
|
<div class="relative flex-auto pt-[2.5rem] pr-[2.5rem] pb-[2.5rem] !pl-[2.5rem]">
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
<h2 class="!mb-3 text-left">Sign up to Trunçgil</h2>
|
|
<p class="lead text-[0.9rem] font-medium !leading-[1.65] !mb-6 text-left">Registration takes less than a minute.</p>
|
|
<form class="text-left !mb-3">
|
|
<div class="form-floating relative !mb-4">
|
|
<input type="text" 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: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="Name" id="loginName">
|
|
<label for="loginName" 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">Name</label>
|
|
</div>
|
|
<div class="form-floating relative !mb-4">
|
|
<input type="email" 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: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="Email" id="loginEmail">
|
|
<label for="loginEmail" 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">Email</label>
|
|
</div>
|
|
<div class="form-floating relative password-field !mb-4">
|
|
<input type="password" 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: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="Password" id="loginPassword">
|
|
<span class="password-toggle absolute -translate-y-2/4 cursor-pointer text-[0.9rem] !text-[#959ca9] right-3 top-2/4"><i class="uil uil-eye"></i></span>
|
|
<label for="loginPassword" 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">Password</label>
|
|
</div>
|
|
<div class="form-floating relative password-field !mb-4">
|
|
<input type="password" 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: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="Confirm Password" id="loginPasswordConfirm">
|
|
<span class="password-toggle absolute -translate-y-2/4 cursor-pointer text-[0.9rem] !text-[#959ca9] right-3 top-2/4"><i class="uil uil-eye"></i></span>
|
|
<label for="loginPasswordConfirm" 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">Confirm Password</label>
|
|
</div>
|
|
<a class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] btn-login w-full !mb-2">Sign Up</a>
|
|
</form>
|
|
<!-- /form -->
|
|
<p class="!mb-0">Already have an account? <a href="#" data-bs-target="#modal-signin" data-bs-toggle="modal" data-bs-dismiss="modal" class="hover">Sign in</a></p>
|
|
<div class="divider-icon !my-4">or</div>
|
|
<nav class="nav social justify-center !text-center">
|
|
<a href="#" class="btn btn-circle btn-sm btn-google !text-white !bg-[#e44134] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"><i class="uil uil-google before:content-['\eb50']"></i></a>
|
|
<a href="#" class="btn btn-circle btn-sm btn-facebook-f !text-white !bg-[#4470cf] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"><i class="uil uil-facebook-f before:content-['\eae2']"></i></a>
|
|
<a href="#" class="btn btn-circle btn-sm btn-twitter !text-white !bg-[#5daed5] !border-transparent !w-[1.8rem] !h-[1.8rem] !text-[0.8rem] !m-[0_.35rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%]"><i class="uil uil-twitter before:content-['\ed59']"></i></a>
|
|
</nav>
|
|
<!--/.social -->
|
|
</div>
|
|
<!--/.modal-content -->
|
|
</div>
|
|
<!--/.modal-body -->
|
|
</div>
|
|
<!--/.modal-dialog -->
|
|
</div>
|
|
<!--/.modal -->
|
|
</header>
|
|
<!-- /header -->
|
|
<section class="wrapper !bg-[#edf2fc]">
|
|
<div class="container pt-10 pb-20 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] xl:pb-40 lg:pb-40 md:pb-40 !text-center">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="md:w-10/12 lg:w-8/12 xl:w-8/12 xxl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-16" data-cues="slideInDown" data-group="page-title">
|
|
<h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-4">Staying on top of your bills never been this easy</h1>
|
|
<p class="lead !text-[1.05rem] !leading-[1.6] xl:!px-14 xxl:!px-6 !mb-7">Easily achieve your saving goals. Have all your recurring and one time expenses and incomes in one place.</p>
|
|
<div class="flex justify-center" data-cues="slideInDown" data-group="page-title-buttons" data-delay="600">
|
|
<span><a class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] rounded mx-1">Get Started</a></span>
|
|
<span><a class="btn btn-green !text-white !bg-[#45c4a0] border-[#45c4a0] hover:text-white hover:bg-[#45c4a0] hover:!border-[#45c4a0] active:text-white active:bg-[#45c4a0] active:border-[#45c4a0] disabled:text-white disabled:bg-[#45c4a0] disabled:border-[#45c4a0] rounded mx-1">Free Trial</a></span>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper !bg-[#ffffff]">
|
|
<div class="container pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24 lg:!mb-[12.5rem] xl:!mb-[17.5rem]">
|
|
<div class="flex flex-wrap mx-0 !mb-[6rem]">
|
|
<div class="w-9/12 sm:w-10/12 lg:w-9/12 xl:w-9/12 flex-[0_0_auto] max-w-full !mx-auto !mt-[-5rem] xl:!mt-[-10rem] lg:!mt-[-10rem] md:!mt-[-10rem]" data-cues data-group="images" data-delay="1500">
|
|
<img class="max-w-full h-auto !mx-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" data-cue="slideInUp" src="../assets/img/photos/sa1.jpg" alt="image">
|
|
<img class="absolute !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" data-cue="slideInRight" src="../assets/img/photos/sa2.jpg" style="top: 20%; right:-10%; max-width:30%; height: auto;" alt="image">
|
|
<img class="absolute !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" data-cue="slideInLeft" src="../assets/img/photos/sa3.jpg" style="top: 10%; left:-10%; max-width:30%; height: auto;" alt="image">
|
|
<img class="absolute !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" data-cue="slideInLeft" src="../assets/img/photos/sa4.jpg" style="bottom: 10%; left:-13%; max-width:30%; height: auto;" alt="image">
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center !mb-[4.5rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem]">
|
|
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[50px] !relative">
|
|
<div class="shape rounded !bg-[#fae6e7] rellax !block !absolute" data-rellax-speed="0" style="top: 50%; left: 50%; width: 50%; height: 60%; transform: translate(-50%,-50%);z-index:0"></div>
|
|
<div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px] !relative">
|
|
<div class="w-6/12 flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] max-w-full !mt-[25px]">
|
|
<img class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" src="../assets/img/photos/sa5.jpg" alt="image">
|
|
<img class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-[2.5rem]/12 flex-[0_0_auto] !ml-auto" src="../assets/img/photos/sa6.jpg" alt="image">
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="w-6/12 flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] max-w-full !mt-[25px]">
|
|
<img class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5" src="../assets/img/photos/sa7.jpg" alt="image">
|
|
<img class="max-w-full h-auto !rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-[2.5rem]/12 flex-[0_0_auto]" src="../assets/img/photos/sa8.jpg" alt="image">
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!--/column -->
|
|
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[50px]">
|
|
<h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-5">We have considered our solutions to support every stage of growth.</h3>
|
|
<p class="!mb-5">Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo.</p>
|
|
<div class="flex flex-wrap mx-[-15px] !mt-[-15px]">
|
|
<div class="xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[15px]">
|
|
<ul class="pl-0 list-none bullet-bg bullet-soft-leaf !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 table !text-[#e2626b] !bg-[#fae3e4] absolute rounded-[100%] left-0 top-[0.2rem] before:align-middle before:table-cell before:content-['\e9dd']"></i></span>
|
|
<span>Aenean quam ornare curabitur blandit consectetur.</span>
|
|
</li>
|
|
<li class="!mt-3 relative !pl-6">
|
|
<span><i class="uil uil-check !w-4 !h-4 text-[0.8rem] leading-none !tracking-[normal] text-center table !text-[#e2626b] !bg-[#fae3e4] absolute rounded-[100%] left-0 top-[0.2rem] before:align-middle before:table-cell before:content-['\e9dd']"></i></span>
|
|
<span>Nullam quis risus eget urna mollis ornare aenean leo.</span></li>
|
|
</ul>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[15px]">
|
|
<ul class="pl-0 list-none bullet-bg bullet-soft-leaf !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 table !text-[#e2626b] !bg-[#fae3e4] absolute rounded-[100%] left-0 top-[0.2rem] before:align-middle before:table-cell before:content-['\e9dd']"></i></span>
|
|
<span>Etiam porta euismod malesuada mollis nisl ornare.</span>
|
|
</li>
|
|
<li class="!mt-3 relative !pl-6">
|
|
<span><i class="uil uil-check !w-4 !h-4 text-[0.8rem] leading-none !tracking-[normal] text-center table !text-[#e2626b] !bg-[#fae3e4] absolute rounded-[100%] left-0 top-[0.2rem] before:align-middle before:table-cell before:content-['\e9dd']"></i></span>
|
|
<span>Vivamus sagittis lacus augue rutrum maecenas odio.</span></li>
|
|
</ul>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center !mb-[4.5rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem]">
|
|
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[50px] !relative xl:!order-2 lg:!order-2">
|
|
<div class="shape rounded !bg-[#e1f6f0] rellax !block !absolute" data-rellax-speed="0" style="top: 50%; left: 50%; width: 50%; height: 60%; transform: translate(-50%,-50%);z-index:0"></div>
|
|
<div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px] !relative">
|
|
<div class="w-5/12 flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full">
|
|
<img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] my-5 flex !ml-auto" data-cue="fadeIn" data-delay="300" src="../assets/img/photos/sa9.jpg" alt="image">
|
|
<img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto] !ml-auto" data-cue="fadeIn" data-delay="600" src="../assets/img/photos/sa10.jpg" alt="image">
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="w-7/12 flex-[0_0_auto] !px-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] max-w-full">
|
|
<img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" data-cue="fadeIn" data-delay="900" src="../assets/img/photos/sa11.jpg" alt="image">
|
|
<img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex w-11/12 flex-[0_0_auto]" data-cue="fadeIn" data-delay="1200" src="../assets/img/photos/sa12.jpg" alt="image">
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!--/column -->
|
|
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[50px]">
|
|
<h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-5">We make spending stress free so you have the perfect control.</h3>
|
|
<p class="!mb-5">Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo.</p>
|
|
<div class="flex flex-wrap mx-[-15px] !mt-[-15px]">
|
|
<div class="xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[15px]">
|
|
<ul class="pl-0 list-none bullet-bg bullet-soft-leaf !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 table !text-[#45c4a0] !bg-[#def4ee] absolute rounded-[100%] left-0 top-[0.2rem] before:align-middle before:table-cell before:content-['\e9dd']"></i></span>
|
|
<span>Aenean quam ornare curabitur blandit consectetur.</span>
|
|
</li>
|
|
<li class="!mt-3 relative !pl-6">
|
|
<span><i class="uil uil-check !w-4 !h-4 text-[0.8rem] leading-none !tracking-[normal] text-center table !text-[#45c4a0] !bg-[#def4ee] absolute rounded-[100%] left-0 top-[0.2rem] before:align-middle before:table-cell before:content-['\e9dd']"></i></span>
|
|
<span>Nullam quis risus eget urna mollis ornare aenean leo.</span></li>
|
|
</ul>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[15px]">
|
|
<ul class="pl-0 list-none bullet-bg bullet-soft-leaf !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 table !text-[#45c4a0] !bg-[#def4ee] absolute rounded-[100%] left-0 top-[0.2rem] before:align-middle before:table-cell before:content-['\e9dd']"></i></span>
|
|
<span>Etiam porta euismod malesuada mollis nisl ornare.</span>
|
|
</li>
|
|
<li class="!mt-3 relative !pl-6">
|
|
<span><i class="uil uil-check !w-4 !h-4 text-[0.8rem] leading-none !tracking-[normal] text-center table !text-[#45c4a0] !bg-[#def4ee] absolute rounded-[100%] left-0 top-[0.2rem] before:align-middle before:table-cell before:content-['\e9dd']"></i></span>
|
|
<span>Vivamus sagittis lacus augue rutrum maecenas odio.</span></li>
|
|
</ul>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
|
|
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[50px] !relative">
|
|
<div class="shape !rounded-[.4rem] !bg-[#fef3e4] rellax !block !absolute " data-rellax-speed="0" style="top: 50%; left: 50%; width: 50%; height: 60%; transform: translate(-50%,-50%);z-index:0"></div>
|
|
<div class="flex flex-wrap mx-[-15px] xl:mx-[-12.5px] lg:mx-[-12.5px] md:mx-[-12.5px] !mt-[-25px] !relative items-center">
|
|
<div class="w-6/12 flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] !px-[15px] max-w-full">
|
|
<img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !ml-auto" data-cue="fadeIn" data-delay="300" src="../assets/img/photos/sa13.jpg" alt="image">
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="w-6/12 flex-[0_0_auto] xl:!px-[12.5px] lg:!px-[12.5px] md:!px-[12.5px] !mt-[25px] !px-[15px] max-w-full">
|
|
<img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mb-5" data-cue="fadeIn" data-delay="900" src="../assets/img/photos/sa14.jpg" alt="image">
|
|
<img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex !w-10/12 flex-[0_0_auto]" data-cue="fadeIn" data-delay="1200" src="../assets/img/photos/sa15.jpg" alt="image">
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!--/column -->
|
|
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[50px]">
|
|
<h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-5">We bring solutions to manage your finance the way works best.</h3>
|
|
<p class="!mb-5">Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo.</p>
|
|
|
|
<div class="flex flex-wrap mx-[-15px] !mt-[-15px]">
|
|
<div class="xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[15px]">
|
|
<ul class="pl-0 list-none bullet-bg bullet-soft-leaf !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 table !text-[#fab758] !bg-[#feeed9] absolute rounded-[100%] left-0 top-[0.2rem] before:align-middle before:table-cell before:content-['\e9dd']"></i></span>
|
|
<span>Aenean quam ornare curabitur blandit consectetur.</span>
|
|
</li>
|
|
<li class="!mt-3 relative !pl-6">
|
|
<span><i class="uil uil-check !w-4 !h-4 text-[0.8rem] leading-none !tracking-[normal] text-center table !text-[#fab758] !bg-[#feeed9] absolute rounded-[100%] left-0 top-[0.2rem] before:align-middle before:table-cell before:content-['\e9dd']"></i></span>
|
|
<span>Nullam quis risus eget urna mollis ornare aenean leo.</span></li>
|
|
</ul>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[15px]">
|
|
<ul class="pl-0 list-none bullet-bg bullet-soft-leaf !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 table !text-[#fab758] !bg-[#feeed9] absolute rounded-[100%] left-0 top-[0.2rem] before:align-middle before:table-cell before:content-['\e9dd']"></i></span>
|
|
<span>Etiam porta euismod malesuada mollis nisl ornare.</span>
|
|
</li>
|
|
<li class="!mt-3 relative !pl-6">
|
|
<span><i class="uil uil-check !w-4 !h-4 text-[0.8rem] leading-none !tracking-[normal] text-center table !text-[#fab758] !bg-[#feeed9] absolute rounded-[100%] left-0 top-[0.2rem] before:align-middle before:table-cell before:content-['\e9dd']"></i></span>
|
|
<span>Vivamus sagittis lacus augue rutrum maecenas odio.</span></li>
|
|
</ul>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper !bg-[#edf2fc]">
|
|
<div class="container py-[4.5rem] md:pt-24 lg:pt-0 xl:pt-0 xl:pb-24 lg:pb-24 md:pb-24">
|
|
<div class="flex flex-wrap mx-[-15px] !text-center" data-cue="slideInUp">
|
|
<div class="xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="lg:!mt-[-10rem] xl:!mt-[-15rem] !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="top: 1rem; left: -3.9rem;"></div>
|
|
<div class="shape !rounded-[50%] bg-line primary rellax !w-[8rem] !h-[8rem] absolute opacity-50" data-rellax-speed="1" style="bottom: 2rem; right: -3rem;"></div>
|
|
<video poster="../assets/img/photos/movie.jpg" class="player relative z-[2] rounded-[0.4rem]" playsinline controls preload="none">
|
|
<source src="../assets/media/movie.mp4" type="video/mp4">
|
|
<source src="../assets/media/movie.html" type="video/webm">
|
|
</video>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<div class="flex flex-wrap mx-[-15px] !text-center !mt-[3.5rem]">
|
|
<div class="xl:w-9/12 lg:w-9/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-0 !text-center xl:!px-10 xxl:!px-20">Find out everything you need to know about creating a business process model</h3>
|
|
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] process-wrapper !text-center !mt-9" data-cues="slideInUp" data-group="process">
|
|
<div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 339.8 409.6" 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="M169.9 409.6c-5.5 0-10.9-1.2-15.8-3.5C107.8 384.8 0 327.5 0 255.5V72.1c0-10.7 8.7-19.4 19.4-19.5 2.1 0 4.2.3 6.1 1 9.2 3.1 18.9 4.7 28.6 4.6 31.5.1 60.7-16.3 76.9-43.3C136.6 5.7 146.6 0 157.4 0h25c10.8.1 20.8 5.7 26.4 14.9 16.2 27 45.4 43.4 76.9 43.3 9.7 0 19.4-1.6 28.6-4.6 10.2-3.4 21.2 2.1 24.6 12.3.7 2 1 4.1 1 6.1v48c0 6.5-5.3 11.8-11.7 11.8-6.5 0-11.8-5.3-11.8-11.7V77.6c-10 2.8-20.3 4.2-30.6 4.2-39.7.2-76.5-20.6-97-54.6-1.3-2.2-3.7-3.6-6.3-3.6h-25c-2.6 0-5 1.4-6.3 3.6-20.5 34-57.3 54.8-97 54.6-10.3 0-20.6-1.4-30.6-4.2v178c0 47.7 72.5 98 140.4 129.3 3.8 1.7 8.2 1.7 12 0 67.9-31.3 140.4-81.6 140.4-129.3v-74.9c0-6.5 5.3-11.8 11.8-11.7 6.5 0 11.7 5.3 11.7 11.7v74.9c0 72-107.8 129.3-154.1 150.6-5 2.2-10.4 3.4-15.9 3.4z"/><path class="lineal-fill" d="M156 269l-62.2-31.1c-11.8-5.9-16.6-20.2-10.7-32 5.9-11.8 20.2-16.6 32-10.7l44.9 22.5 56.6-70.7c8.2-10.3 23.2-12 33.5-3.7 10.3 8.2 12 23.2 3.7 33.5l-68.6 85.8c-6.9 8.8-19.1 11.5-29.2 6.4z"/><path class="lineal-stroke" d="M166.7 283.3c-5.5 0-11-1.3-15.9-3.8l-62.2-31.1c-17.6-8.8-24.7-30.2-15.9-47.8s30.2-24.7 47.8-15.9l36.4 18.2 50.6-63.3c12.3-15.4 34.7-17.9 50.1-5.6 15.4 12.3 17.9 34.7 5.6 50.1l-68.6 85.8c-6.8 8.5-17.1 13.4-27.9 13.4zm-62.2-78.8c-6.7 0-12.1 5.4-12.1 12.1 0 4.6 2.6 8.8 6.7 10.8l62.2 31.1c5.1 2.6 11.3 1.2 14.9-3.3l68.6-85.8c4.3-5.1 3.7-12.8-1.4-17.1-5.1-4.3-12.8-3.7-17.1 1.4-.1.2-.3.3-.4.5l-56.6 70.7c-3.5 4.3-9.5 5.6-14.4 3.2L110 205.6c-1.7-.7-3.6-1.1-5.5-1.1z"/></svg>
|
|
<h4 class="!mb-1">1. Secured Transactions</h4>
|
|
<p>Etiam porta malesuada magna mollis euismod sem.</p>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 465.5" 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-stroke" d="M156.8 465.5c-9.9 0-24.2-4.8-56.2-40.6-16.2-18.2-29.5-36-30.1-36.8-.4-.5-.7-1-1-1.6-6.1-11-9.3-23.3-9.3-35.8v-90.9c0-7.9 6.4-14.4 14.3-14.4h116c16.5 0 32.4 6.5 44.2 18.1l59.4 58.5c17.2 17.2 17.3 45.1.1 62.3s-45.1 17.3-62.3.1L172.7 325c-5.9 0-15.5-.1-23.1-.1l-10.8-.1c-7.9 0-14.3-6.5-14.3-14.4s6.5-14.3 14.4-14.3h.1l10.8.1c6.8 0 14.1.1 19.6.1h6.9c4.2 0 8.5.1 12.7 4.3l63.5 63.5c6 6 15.7 6 21.7 0s6-15.7 0-21.7L214.6 284c-6.4-6.3-15-9.9-24-9.8H88.9v76.5c0 7.4 1.8 14.6 5.2 21.1 2.6 3.5 13.6 17.9 26.5 32.4 25.5 28.8 35.2 32.2 36.5 32.6h155.1c10.6 0 22.9-5.5 34.6-11.2 9.9-4.8 83.3-54.6 127.3-84.9l.7-.5c8.2-5.1 10.7-15.8 5.6-23.9-4.9-7.9-15.2-10.5-23.3-6L350 381.4c-6.6 4.4-15.5 2.6-19.9-4-4.4-6.6-2.6-15.5 4-19.9l107.5-71.3c.2-.1.3-.2.5-.3 21.8-13.1 50.1-6 63.2 15.8 12.9 21.6 6.2 49.6-15.2 62.8-13.3 9.2-115.8 79.6-130.8 86.9-14.7 7.1-30.5 14.1-47.1 14.1H156.8z"/><path class="lineal-fill" d="M14.4 242.2h84.2v189.6H14.4z"/><path class="lineal-stroke" d="M98.5 446.1H14.4c-7.9 0-14.4-6.4-14.4-14.4V242.2c0-7.9 6.4-14.4 14.3-14.4h84.1c7.9 0 14.3 6.4 14.3 14.4v189.6c.1 7.9-6.3 14.3-14.2 14.3zm-69.8-28.7h55.4V256.5H28.7v160.9zM273 214.2c-59.2 0-107.1-48-107.1-107.1C165.9 47.9 213.9 0 273.1 0c59.1 0 107.1 48 107.1 107.1-.1 59.1-48.1 107.1-107.2 107.1zm0-185.5c-43.3 0-78.4 35.1-78.4 78.4s35.1 78.4 78.4 78.4c43.3 0 78.4-35.1 78.4-78.4-.1-43.3-35.1-78.3-78.4-78.4z"/><circle class="lineal-fill" cx="348.9" cy="178.6" r="92.8"/><path class="lineal-stroke" d="M348.9 285.7c-59.1 0-107.1-47.9-107.1-107.1 0-59.1 47.9-107.1 107.1-107.1S456 119.4 456 178.6c-.1 59.1-48 107-107.1 107.1zm0-185.5c-43.3 0-78.4 35.1-78.4 78.4S305.7 257 349 257s78.4-35.1 78.4-78.4c-.1-43.3-35.2-78.4-78.5-78.4z"/><path class="lineal-stroke" d="M345.4 224.9c-15.5-.5-28.2-8.5-28.2-16.8 0-4.4 3.9-10.9 8.8-10.9 5.4 0 9.8 7.6 19.4 9.3v-20.9c-11.9-4.5-25.9-10.1-25.9-26.6s12.1-24.3 25.9-26.2v-3.6c0-1.8 2.1-3.5 4.9-3.5 2.5 0 4.9 1.7 4.9 3.5v3.2c8 .3 23.1 2.3 23.1 11.2 0 3.5-2.3 10.6-8 10.6-4.3 0-6.7-4.1-15.1-4.8v18.9c11.8 4.4 25.5 10.5 25.5 27.9 0 16-10.4 25.7-25.5 28.2v3.8c0 1.8-2.5 3.5-4.9 3.5-2.9 0-4.9-1.7-4.9-3.5v-3.3zm1.3-59.7v-15.4c-5.8 1.2-8.3 4.1-8.3 7.2 0 3.8 3.4 6.1 8.3 8.2zm7.2 23.9v17.3c4.4-1 7.9-3.5 7.9-8.1 0-4.3-3.2-7-7.9-9.2z"/></svg>
|
|
<h4 class="!mb-1">2. Budget Planning</h4>
|
|
<p>Etiam porta malesuada magna mollis euismod sem.</p>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.6 353.3" 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="M176.6 353.3c-46.9 0-91.9-18.6-125-51.8-68.9-68.9-68.9-181 0-249.9 69-69 180.9-69 249.9 0 24 24 40.5 54.3 47.7 87.5.4 1.9.8 3.9 1.2 6.2l2.7 14.8c1.1 6.2-3 12.2-9.3 13.3-.7.1-1.3.2-2 .2h-51c-5.4 0-10-3.7-11.2-9l-2.1-9.9C265.3 99 210.1 63.8 154.4 76.1s-90.9 67.4-78.6 123.2c7.9 35.6 33.9 64.4 68.6 75.8 3 1 6.1 1.8 9.1 2.5 6.2 1.4 10 7.5 8.6 13.7-1.4 6.2-7.5 10-13.7 8.6-3.7-.9-7.5-1.9-11.1-3.1C71 275 34.9 203.4 56.8 137c6.2-18.7 16.6-35.7 30.5-49.7 49.2-49.3 129-49.5 178.4-.3 17.3 17.2 29.2 39 34.3 62.9l.2.9h28.1l-.2-1.4c-.4-2-.7-3.8-1.1-5.4C308.9 60.9 226.9 8.3 143.8 26.4c-28.8 6.3-55.2 20.7-76 41.5-60 60-60 157.6 0 217.6 41 41.1 101.7 55.5 156.9 37.4L206 290.3c-3-5.6-.9-12.5 4.6-15.5 5.3-2.9 12-1.1 15.2 4.1l25.6 44.4c3.2 5.5 1.3 12.5-4.2 15.6-.6.4-1.3.7-2 .9l-10.8 3.7c-18.6 6.5-38.1 9.8-57.8 9.8z"/><path class="lineal-fill" d="M236.6 160.7l80.8 140 80.8-140H236.6z"/><path class="lineal-stroke" d="M317.4 312.1c-4.1 0-7.9-2.2-9.9-5.7l-80.8-140c-3.2-5.5-1.3-12.5 4.2-15.6 1.7-1 3.7-1.5 5.7-1.5h161.6c6.3 0 11.4 5.1 11.4 11.4 0 2-.5 4-1.5 5.7l-80.8 140c-2.1 3.6-5.9 5.7-9.9 5.7zm-61-140l61 105.7 61-105.7h-122z"/></svg>
|
|
<h4 class="!mb-1">3. Up to Date</h4>
|
|
<p>Etiam porta malesuada magna mollis euismod sem.</p>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper !bg-[#ffffff]">
|
|
<div class="container py-[4.5rem] xl:!py-28 lg:!py-28 md:!py-28">
|
|
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-30px] !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-[30px] max-w-full !relative">
|
|
<div class="shape bg-dot primary rellax !w-[8rem] !h-[8rem] absolute opacity-50 bg-[radial-gradient(#3f78e0_2px,transparent_2.5px)]" data-rellax-speed="1" style="top: 0; left: -1.4rem; 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]">
|
|
<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">
|
|
<figure class="rounded-[0.4rem] xl:!mt-10 lg:!mt-10 md:!mt-10 !relative"><img class="!rounded-[0.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-[15px] xl:!px-[12.5px] lg:!px-[12.5px] md:!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-[#e0e9fa] !text-center counter-wrapper">
|
|
<div class="card-body !py-12">
|
|
<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-[25px] max-w-full">
|
|
<div class="swiper-container dots-closer !mb-6" data-margin="30" data-dots="true">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0">
|
|
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”</p>
|
|
<div class="flex items-center justify-center !text-center">
|
|
<div class="info !pl-0">
|
|
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Coriss Ambady</h5>
|
|
<p class="!mb-0 text-[0.8rem]">Financial Analyst</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0">
|
|
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”</p>
|
|
<div class="flex items-center justify-center !text-center">
|
|
<div class="info !pl-0">
|
|
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Cory Zamora</h5>
|
|
<p class="!mb-0 text-[0.8rem]">Marketing Specialist</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<blockquote class="icon icon-top text-[1rem] !text-center relative pt-[3.75rem] p-0 border-0 !leading-[1.7] font-medium m-[0_0_1rem] before:translate-x-[-52%] before:left-2/4 before:content-['\201c'] before:!text-[#aab0bc] before:opacity-30 before:text-[6.5rem] before:font-normal before:absolute before:leading-none before:z-[1] before:top-0">
|
|
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum ligula porta felis euismod semper. Cras justo odio consectetur.”</p>
|
|
<div class="flex items-center justify-center !text-center">
|
|
<div class="info !pl-0">
|
|
<h5 class="!mb-1 text-[.95rem] !leading-[1.5]">Nikolas Brooten</h5>
|
|
<p class="!mb-0 text-[0.8rem]">Sales Manager</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</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] md:!px-[20px] !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] md:!px-[20px] !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] md:!px-[20px] !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] md:!px-[20px] !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] md:!px-[20px] !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] md:!px-[20px] !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 -->
|
|
<section class="wrapper !bg-[#edf2fc]">
|
|
<div class="container pt-[4.5rem] pb-32 xl:pt-28 lg:pt-28 md:pt-28 xl:pb-60 lg:pb-60 md:pb-60 !text-center">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-[5rem] xl:!mb-6 lg:!mb-6 md:!mb-6 lg:!px-10 xl:!px-10">We offer great prices, premium products and quality service for your business.</h3>
|
|
</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="pricing-wrapper !relative !mt-[-15rem] xl:!mt-[-20rem] lg:!mt-[-20rem] md:!mt-[-20rem]">
|
|
<div class="shape bg-dot primary rellax !w-[6rem] !h-[8rem] bg-[radial-gradient(#3f78e0_2px,transparent_2.5px)] absolute z-[1] opacity-50" data-rellax-speed="1" style="top: 2rem; right: -2.4rem;"></div>
|
|
<div class="shape !rounded-[50%] bg-line red rellax !w-[8rem] !h-[8rem] hidden xl:block lg:block absolute z-[1] opacity-50" data-rellax-speed="1" style="bottom: 0.5rem; left: -2.5rem;"></div>
|
|
<div class="flex flex-wrap items-center justify-center switcher">
|
|
<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-[rgba(63,120,224)] opacity-100 switcher-button"></div>
|
|
</div>
|
|
<p class="!mb-0 !pl-3 !relative">Yearly</p>
|
|
</div>
|
|
<div class="flex flex-wrap mx-[-15px] !mt-3 xl:!mt-5 lg:!mt-5 md:!mt-5">
|
|
<div class="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
|
|
<div class="pricing card !text-center !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
|
<div class="card-body flex-[1_1_auto] pb-4 xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 412.9" class="svg-inject icon-svg !text-[#3f78e0] !mb-3 !w-[2.6rem] !h-[2.6rem] m-[0_auto]"><path class="lineal-fill" d="M453.8 238.1l-9.6 76.3H67.8l-9.6-76.3z"/><circle class="lineal-fill" cx="178.1" cy="149.9" r="35.1"/><circle class="lineal-fill" cx="333.9" cy="149.9" r="35.1"/><path class="lineal-stroke" d="M498.6 136.5h-60.2c-7.4-.2-13.6 5.7-13.8 13.1-.2 7.4 5.7 13.6 13.1 13.8h11.8l-7.5 61.3H70.1l-7.5-61.3h68.9c7.4 25.7 34.3 40.6 60 33.1 16-4.6 28.5-17.1 33.1-33.1h62.6c7.4 25.7 34.3 40.6 60 33.2 25.7-7.4 40.6-34.3 33.2-60-4.9-17.1-18.9-30.1-36.3-33.9l-39-94.2c-2.8-6.9-10.7-10.1-17.6-7.3s-10.1 10.7-7.3 17.6l35.7 86.2c-14 5.5-24.6 17.2-28.8 31.6h-62.6c-4.2-14.4-14.8-26.1-28.8-31.7l35.7-86.2c2.8-6.9-.4-14.7-7.3-17.6s-14.7.4-17.6 7.3l-39.1 94.2c-17.4 3.8-31.3 16.9-36.2 33.9H13.4C6 136.7.1 142.9.3 150.3c.2 7.1 5.9 12.9 13.1 13.1h22.1l29.8 237.8c.9 6.7 6.6 11.8 13.3 11.8h354.8c6.8 0 12.5-5 13.3-11.8l29.8-237.8h22c7.4-.2 13.3-6.4 13.1-13.8-.2-7.2-5.9-12.9-13-13.1zm-165-8.2c.4 0 .9.1 1.3.1h.7c11.9.9 20.8 11.3 19.9 23.2-.9 11.9-11.3 20.8-23.2 19.9-11.9-.9-20.8-11.3-19.9-23.2.8-11.1 10-19.7 21.2-20zm-157.1.1h.7c.4 0 .9-.1 1.3-.1 11.9.2 21.4 10 21.3 22-.2 11.9-10 21.4-22 21.3-11.9-.2-21.4-10-21.3-22 .2-11.2 8.9-20.4 20-21.2zm-103 123.1h365.1l-6.3 49.5H79.7l-6.2-49.5zM90.4 386L83 327.9h345.9l-7.4 58.1H90.4z"/></svg>
|
|
<h4 class="card-title">Basic Plan</h4>
|
|
<div class="prices !text-[#343f52]">
|
|
<div class="price price-show"><span class="price-currency">$</span><span class="price-value">9</span> <span class="price-duration">mo</span></div>
|
|
<div class="price price-hide price-hidden"><span class="price-currency">$</span><span class="price-value">99</span> <span class="price-duration">yr</span></div>
|
|
</div>
|
|
<!--/.prices -->
|
|
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8 text-left">
|
|
<li class="relative !pl-6"><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-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>1</strong> Project </span></li>
|
|
<li class="relative !pl-6 !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-[#dce7f9] !text-[#3f78e0] 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-6 !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-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i><span><strong>100MB</strong> Storage </span></li>
|
|
<li class="relative !pl-6 !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> Weekly <strong>Reports</strong> </span></li>
|
|
<li class="relative !pl-6 !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-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[.4rem] 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="md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full popular !mt-[30px]">
|
|
<div class="pricing card !text-center !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
|
<div class="card-body flex-[1_1_auto] pb-4 xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 479.8 512" class="svg-inject icon-svg !text-[#3f78e0] !mb-3 !w-[2.6rem] !h-[2.6rem] m-[0_auto]"><path class="lineal-stroke" d="M308 512H61.9c-8 0-14.4-6.5-14.4-14.4V227.2c0-4.3 2-8.4 5.4-11.2l178-143.7c5.3-4.3 12.8-4.3 18.1 0L427 216c3.4 2.7 5.4 6.9 5.4 11.2v269.6c-.2 8-6.8 14.3-14.8 14-7.7-.2-13.8-6.4-14-14V234.1L239.9 102 76.3 234.1v249.1H308c8 .2 14.3 6.8 14 14.8-.2 7.6-6.3 13.8-14 14z"/><path class="lineal-stroke" d="M465.4 209.8c-3.3 0-6.4-1.1-9-3.2L239.9 32.9 23.5 206.7c-6.2 5-15.3 4-20.3-2.2s-4-15.3 2.2-20.3l225.5-181c5.3-4.2 12.8-4.2 18.1 0l225.5 181c6.2 5 7.2 14.1 2.2 20.3-2.8 3.3-6.9 5.3-11.3 5.3z"/><ellipse transform="rotate(-80.781 239.904 207.686)" class="lineal-fill" cx="239.9" cy="207.7" rx="42.9" ry="43"/><path class="lineal-stroke" d="M239.9 265.1c-31.7 0-57.4-25.7-57.4-57.4s25.7-57.4 57.4-57.4 57.4 25.7 57.4 57.4c-.1 31.7-25.7 57.3-57.4 57.4zm0-85.9c-15.8 0-28.5 12.8-28.5 28.5s12.8 28.5 28.5 28.5 28.5-12.8 28.5-28.5c0-15.8-12.8-28.5-28.5-28.5z"/><path class="lineal-fill" d="M171.8 325.7h136.1v171.9H171.8z"/><path class="lineal-stroke" d="M308 512H171.8c-8 0-14.4-6.5-14.4-14.4V325.7c0-8 6.5-14.4 14.4-14.4H308c8 0 14.4 6.5 14.4 14.4v171.9c0 7.9-6.4 14.4-14.4 14.4zm-121.8-28.9h107.3v-143H186.2v143zm234.2-317.7c-7.9 0-14.4-6.5-14.4-14.4V73.3h-28.6c-8 0-14.4-6.5-14.4-14.4s6.5-14.4 14.4-14.4h43c8 0 14.4 6.5 14.4 14.4v92c0 8-6.4 14.4-14.4 14.5 0-.1 0 0 0 0z"/></svg>
|
|
<h4 class="card-title">Premium Plan</h4>
|
|
<div class="prices !text-[#343f52]">
|
|
<div class="price price-show"><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"><span class="price-currency">$</span><span class="price-value">199</span> <span class="price-duration">yr</span></div>
|
|
</div>
|
|
<!--/.prices -->
|
|
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8 text-left">
|
|
<li class="relative !pl-6 !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-[#dce7f9] !text-[#3f78e0] 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-6 !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-[#dce7f9] !text-[#3f78e0] 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-6 !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-[#dce7f9] !text-[#3f78e0] 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-6 !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-[#dce7f9] !text-[#3f78e0] 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-6 !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-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[.4rem] 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="md:w-6/12 lg:w-4/12 xl:w-4/12 md:!ml-[25%] w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-0 lg:!ml-0 !mt-[30px]">
|
|
<div class="pricing card !text-center !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
|
<div class="card-body flex-[1_1_auto] pb-4 xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.6 380.8" class="svg-inject icon-svg !text-[#3f78e0] !mb-3 !w-[2.6rem] !h-[2.6rem] m-[0_auto]"><path class="lineal-stroke" d="M299.9 104.7h-23.8V56.5c0-18.1-14.6-32.7-32.7-32.7h-77.2c-18 0-32.7 14.7-32.7 32.7v48.2h-23.8V56.5C109.8 25.3 135 0 166.2 0h77.2c31.2 0 56.4 25.3 56.5 56.5v48.2z"/><path class="lineal-stroke" d="M360.5 380.8H49.1c-27.1 0-49-22-49.1-49.1V119.1C0 92 22 70 49.1 70h311.5c27.1 0 49 22 49.1 49.1v212.7c-.1 27.1-22.1 49-49.2 49zM49.1 93.8c-14 0-25.3 11.3-25.3 25.3v212.7c0 14 11.3 25.3 25.3 25.3h311.5c14 0 25.3-11.3 25.3-25.3V119.1c0-14-11.3-25.3-25.3-25.3H49.1z"/><path class="lineal-fill" d="M49.2 81.7c-18.4 0-33.3 14.8-33.3 33.2 0 2.7.3 5.3.9 7.9C35.4 197.9 103.6 254 184.2 254h41.2c80.6 0 148.8-56.1 167.3-131.2 4.3-17.8-6.6-35.8-24.5-40.2-2.6-.6-5.2-.9-7.9-.9H49.2z"/><path class="lineal-stroke" d="M225.4 265.9h-41.2c-41.5-.1-81.8-14.2-114.3-40C38 200.5 15.3 165.2 5.4 125.6-.5 101.4 14.3 77 38.6 71.1c3.5-.9 7.1-1.3 10.7-1.3h311.1c24.9 0 45.2 20.2 45.2 45.1 0 3.6-.4 7.2-1.3 10.7-9.9 39.6-32.6 74.8-64.5 100.2-32.6 25.9-72.9 40-114.4 40.1zM49.2 93.6c-6.6 0-12.9 3-16.9 8.2-4.1 5.1-5.5 11.8-3.9 18.2 17.6 71.8 81.9 122.3 155.8 122.2h41.2c73.9.1 138.3-50.4 155.8-122.2 1.6-6.3.1-13-3.9-18.1-4.1-5.2-10.3-8.3-16.9-8.2l-311.2-.1z"/><path class="lineal-fill" d="M128.5 288.5h-13.8c-8.9 0-16.1-7.2-16.1-16.1v-48.3c0-8.9 7.2-16.1 16.1-16.1h13.8c8.9 0 16.1 7.2 16.1 16.1v48.3c0 8.9-7.2 16.1-16.1 16.1z"/><path class="lineal-stroke" d="M128.5 300.4h-13.8c-15.5 0-28-12.5-28-28v-48.3c0-15.5 12.5-28 28-28h13.8c15.5 0 28 12.5 28 28v48.3c0 15.5-12.5 28-28 28zm-13.8-80.5c-2.3 0-4.2 1.9-4.2 4.2v48.3c0 2.3 1.9 4.2 4.2 4.2h13.8c2.3 0 4.2-1.9 4.2-4.2v-48.3c0-2.3-1.9-4.2-4.2-4.2h-13.8z"/><path class="lineal-fill" d="M294.9 288.5h-13.8c-8.9 0-16.1-7.2-16.1-16.1v-48.3c0-8.9 7.2-16.1 16.1-16.1h13.8c8.9 0 16.1 7.2 16.1 16.1v48.3c0 8.9-7.2 16.1-16.1 16.1z"/><path class="lineal-stroke" d="M294.9 300.4h-13.8c-15.5 0-28-12.5-28-28v-48.3c0-15.5 12.5-28 28-28h13.8c15.5 0 28 12.5 28 28v48.3c0 15.5-12.5 28-28 28zm-13.8-80.5c-2.3 0-4.2 1.9-4.2 4.2v48.3c0 2.3 1.9 4.2 4.2 4.2h13.8c2.3 0 4.2-1.9 4.2-4.2v-48.3c0-2.3-1.9-4.2-4.2-4.2h-13.8z"/></svg>
|
|
<h4 class="card-title">Corporate Plan</h4>
|
|
<div class="prices !text-[#343f52]">
|
|
<div class="price price-show"><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"><span class="price-currency">$</span><span class="price-value">499</span> <span class="price-duration">yr</span></div>
|
|
</div>
|
|
<!--/.prices -->
|
|
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8 text-left">
|
|
<li class="relative !pl-6 !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-[#dce7f9] !text-[#3f78e0] 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-6 !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-[#dce7f9] !text-[#3f78e0] 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-6 !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-[#dce7f9] !text-[#3f78e0] 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-6 !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-[#dce7f9] !text-[#3f78e0] 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-6 !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-[#dce7f9] !text-[#3f78e0] 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-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[.4rem] 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>
|
|
<!--/.pricing-wrapper -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper image-wrapper bg-auto no-overlay bg-image !text-center bg-map bg-[center_center] bg-no-repeat !bg-scroll relative z-[0]" data-image-src="../assets/img/map.png">
|
|
<div class="container pt-0 pb-[4.5rem] xl:pt-32 lg:pt-32 md:pt-32 xl:pb-32 lg:pb-32 md:pb-32">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-8 lg:!px-14 xl:!px-14">We are trusted by over 5000+ clients. Join them now and grow your business.</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="flex justify-center" data-cues="slideInDown" data-group="join">
|
|
<span><a class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] rounded mx-1">Get Started</a></span>
|
|
<span><a class="btn btn-green !text-white !bg-[#45c4a0] border-[#45c4a0] hover:text-white hover:bg-[#45c4a0] hover:!border-[#45c4a0] active:text-white active:bg-[#45c4a0] active:border-[#45c4a0] disabled:text-white disabled:bg-[#45c4a0] disabled:border-[#45c4a0] rounded mx-1">Free Trial</a></span>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
</div>
|
|
<!-- /.content-wrapper -->
|
|
<footer class=" bg-[#21262c] opacity-100 !text-[#cacaca] !mt-5 xl:!mt-24 lg:!mt-24 md:!mt-24">
|
|
<div class="container py-16 xl:!py-20 lg:!py-20 md:!py-20">
|
|
<div class="flex flex-wrap mx-[-15px] !mt-[-30px] xl:!mt-0 lg:!mt-0">
|
|
<div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
|
|
<div class="widget !text-[#cacaca]">
|
|
<img class="!mb-4" src="../assets/img/truncgil-yatay-dark.svg" alt="image">
|
|
<p class="!mb-4">© 2025 Trunçgil. <br class="hidden xl:block lg:block !text-[#cacaca]">All rights reserved.</p>
|
|
<nav class="nav social social-white">
|
|
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
|
|
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
|
|
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
|
|
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
|
|
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
|
|
</nav>
|
|
<!-- /.social -->
|
|
</div>
|
|
<!-- /.widget -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
|
|
<div class="widget !text-[#cacaca]">
|
|
<h4 class="widget-title !text-white !mb-3">Get in Touch</h4>
|
|
<address class="xl:!pr-20 xxl:!pr-28 not-italic !leading-[inherit] block !mb-4">Ç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-[#3f78e0]" 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">Learn More</h4>
|
|
<ul class="pl-0 list-none !mb-0">
|
|
<li><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">About Us</a></li>
|
|
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Our Story</a></li>
|
|
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Projects</a></li>
|
|
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Terms of Use</a></li>
|
|
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#3f78e0]" href="#">Privacy Policy</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- /.widget -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="md:w-full xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
|
|
<div class="widget !text-[#cacaca]">
|
|
<h4 class="widget-title !text-white !mb-3">Our Newsletter</h4>
|
|
<p class="!mb-5">Subscribe to our newsletter to get our news & deals delivered to you.</p>
|
|
<div class="newsletter-wrapper">
|
|
<!-- Begin Mailchimp Signup Form -->
|
|
<div id="mc_embed_signup2">
|
|
<form action="https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&id=b49ef47a9a" method="post" id="mc-embedded-subscribe-form2" name="mc-embedded-subscribe-form" class="validate dark-fields" target="_blank" novalidate>
|
|
<div id="mc_embed_signup_scroll2">
|
|
<div class="!text-left input-group form-floating !relative flex flex-wrap items-stretch w-full">
|
|
<input type="email" value="" name="EMAIL" class="required email form-control block w-full text-[12px] font-medium !leading-[1.7] appearance-none bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] px-4 py-[0.6rem] rounded-[0.4rem] motion-reduce:transition-none focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] disabled:bg-[#aab0bc] disabled:opacity-100 file:!mt-[-0.6rem] file:mr-[-1rem] file:!mb-[-0.6rem] file:ml-[-1rem] file:!text-[#60697b] file:bg-[#fefefe] file:pointer-events-none file:transition-all file:duration-[0.2s] file:ease-in-out file:px-4 file:py-[0.6rem] file:rounded-none motion-reduce:file:transition-none placeholder:!text-[#959ca9] placeholder:opacity-100 border border-solid !border-[rgba(255,255,255,0.1)] !text-[#cacaca] bg-[rgba(255,255,255,.03)] focus-visible:!border-[rgba(63,120,224,0.5)] " placeholder="" id="mce-EMAIL2">
|
|
<label class="!ml-[0.05rem] !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none origin-[0_0] px-4 py-[0.6rem] left-0 top-0" for="mce-EMAIL2">Email Address</label>
|
|
<input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe2" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !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-[#3f78e0] 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-[#3f78e0] 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/demo5 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 10:57:11 GMT -->
|
|
</html> |