Ümit Tunç
1594 lines
113 KiB
HTML
1594 lines
113 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
|
|
<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/demo3 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 10:56:50 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>
|
|
<!-- google fonts -->
|
|
|
|
|
|
|
|
<link rel="shortcut icon" href="assets/img/favicon.png">
|
|
<link rel="stylesheet" type="text/css" href="assets/fonts/unicons/unicons.css">
|
|
<link rel="stylesheet" href="assets/css/plugins.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="stylesheet" href="assets/css/colors/aqua.css">
|
|
<link rel="preload" href="assets/css/fonts/thicccboi.css" as="style" onload="this.rel='stylesheet'">
|
|
<link rel="stylesheet" href="assets/css/icon.css">
|
|
<style>
|
|
.navbar.navbar-light.fixed .btn:not(.btn-expand):not(.btn-gradient) {
|
|
background: #54a8c7 !important;
|
|
border-color: #54a8c7 !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.accordion-wrapper .card-header button {
|
|
color: #54a8c7;
|
|
}
|
|
|
|
@media (min-width: 992px) {
|
|
.navbar-expand-lg.navbar-light .dropdown:not(.dropdown-submenu)>.dropdown-toggle:after {
|
|
color: #54a8c7 !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="font-THICCCBOI text-[.85rem]">
|
|
<div class="grow shrink-0">
|
|
<header class="relative wrapper bg-[#262b32] opacity-100 ">
|
|
<nav class="navbar navbar-expand-lg center-nav transparent navbar-dark">
|
|
<div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
|
|
<div class="navbar-brand w-full">
|
|
<a href='index.html'>
|
|
<img class="logo-dark" src="assets/img/truncgil-yatay.svg"
|
|
alt="image">
|
|
<img class="logo-light" src="assets/img/truncgil-yatay-dark.svg"
|
|
alt="image">
|
|
</a>
|
|
</div>
|
|
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
|
|
<div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
|
|
|
|
<button type="button"
|
|
class="btn-close btn-close-white !mr-[-0.75rem] m-0 p-0 leading-none !text-[#343f52] transition-all duration-[0.2s] ease-in-out border-0 motion-reduce:transition-none before:text-[1.05rem] before:text-white before:content-['\ed3b'] before:w-[1.8rem] before:h-[1.8rem] before:leading-[1.8rem] before:shadow-none before:transition-[background] before:duration-[0.2s] before:ease-in-out before:!flex before:justify-center before:items-center before:m-0 before:p-0 before:rounded-[100%] hover:no-underline bg-inherit before:bg-[rgba(255,255,255,.08)] before:font-Unicons hover:before:bg-[rgba(0,0,0,.11)] "
|
|
data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item dropdown dropdown-mega">
|
|
<a class="nav-link dropdown-toggle !text-[.85rem] !tracking-[normal]" href="#"
|
|
data-bs-toggle="dropdown">Demos</a>
|
|
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
|
|
<li class="mega-menu-content mega-menu-scroll">
|
|
<ul
|
|
class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo1.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi1.jpg" alt="image">
|
|
</figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 1</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo2.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi2.jpg" alt="image">
|
|
</figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 2</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo3.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi3.jpg" alt="image">
|
|
</figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 3</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo4.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi4.jpg" alt="image">
|
|
</figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 4</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo5.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi5.jpg" alt="image">
|
|
</figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 5</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo6.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi6.jpg" alt="image">
|
|
</figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 6</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo7.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi7.jpg" alt="image">
|
|
</figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 7</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo8.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi8.jpg" alt="image">
|
|
</figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 8</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo9.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi9.jpg" alt="image">
|
|
</figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 9</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo10.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi10.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 10</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo11.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi11.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 11</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo12.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi12.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 12</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo13.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi13.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 13</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo14.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi14.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 14</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo15.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi15.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 15</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo16.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi16.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 16</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo17.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi17.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 17</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo18.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi18.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 18</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo19.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi19.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 19</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo20.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi20.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 20</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo21.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi21.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 21</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo22.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi22.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 22</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo23.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi23.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 23</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo24.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi24.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 24</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo25.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi25.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 25</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo26.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi26.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 26</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo27.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi27.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 27</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo28.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi28.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 28</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo29.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi29.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 29</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo30.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi30.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 30</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo31.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi31.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 31</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo32.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi32.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 32</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo33.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi33.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 33</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='demo34.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]"
|
|
src="assets/img/demos/mi34.jpg"
|
|
alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 34</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!--/.row -->
|
|
<span class="hidden xl:!flex lg:!flex"><i
|
|
class="uil uil-direction before:content-['\ea93']"></i><strong>Scroll to view
|
|
more</strong></span>
|
|
</li>
|
|
<!--/.mega-menu-content-->
|
|
</ul>
|
|
<!--/.dropdown-menu -->
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle !text-[.85rem] !tracking-[normal]" href="#"
|
|
data-bs-toggle="dropdown">Pages</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="dropdown dropdown-submenu dropend"><a
|
|
class="dropdown-item hover:!text-[#54a8c7] dropdown-toggle" href="#"
|
|
data-bs-toggle="dropdown">Services</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='services.html'>Services I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='services2.html'>Services II</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a
|
|
class="dropdown-item hover:!text-[#54a8c7] dropdown-toggle" href="#"
|
|
data-bs-toggle="dropdown">About</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='about.html'>About
|
|
I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='about2.html'>About
|
|
II</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a
|
|
class="dropdown-item hover:!text-[#54a8c7] dropdown-toggle" href="#"
|
|
data-bs-toggle="dropdown">Shop</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='shop.html'>Shop
|
|
I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='shop2.html'>Shop
|
|
II</a></li>
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='shop-product.html'>Product Page</a></li>
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='shop-cart.html'>Shopping Cart</a></li>
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='shop-checkout.html'>Checkout</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a
|
|
class="dropdown-item hover:!text-[#54a8c7] dropdown-toggle" href="#"
|
|
data-bs-toggle="dropdown">Contact</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='contact.html'>Contact I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='contact2.html'>Contact II</a></li>
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='contact3.html'>Contact III</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a
|
|
class="dropdown-item hover:!text-[#54a8c7] dropdown-toggle" href="#"
|
|
data-bs-toggle="dropdown">Career</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='career.html'>Job
|
|
Listing I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='career2.html'>Job
|
|
Listing II</a></li>
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='career-job.html'>Job
|
|
Description</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a
|
|
class="dropdown-item hover:!text-[#54a8c7] dropdown-toggle" href="#"
|
|
data-bs-toggle="dropdown">Utility</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='404.html'>404 Not
|
|
Found</a></li>
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='page-loader.html'>Page Loader</a></li>
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='signin.html'>Sign In
|
|
I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='signin2.html'>Sign
|
|
In II</a></li>
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='signup.html'>Sign Up
|
|
I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='signup2.html'>Sign
|
|
Up II</a></li>
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='terms.html'>Terms</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='pricing.html'>Pricing</a></li>
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='onepage.html'>One
|
|
Page</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle !text-[.85rem] !tracking-[normal]" href="#"
|
|
data-bs-toggle="dropdown">Projects</a>
|
|
<div class="dropdown-menu dropdown-lg">
|
|
<div class="dropdown-lg-content">
|
|
<div>
|
|
<h6 class="dropdown-header !text-[#54a8c7]">Project Pages</h6>
|
|
<ul class="pl-0 list-none">
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='projects.html'>Projects I</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='projects2.html'>Projects II</a>
|
|
</li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='projects3.html'>Projects III</a>
|
|
</li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='projects4.html'>Projects IV</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- /.column -->
|
|
<div>
|
|
<h6 class="dropdown-header !text-[#54a8c7]">Single Projects</h6>
|
|
<ul class="pl-0 list-none">
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='single-project.html'>Single Project
|
|
I</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='single-project2.html'>Single
|
|
Project II</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='single-project3.html'>Single
|
|
Project III</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='single-project4.html'>Single
|
|
Project IV</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- /.column -->
|
|
</div>
|
|
<!-- /auto-column -->
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle !text-[.85rem] !tracking-[normal]" href="#"
|
|
data-bs-toggle="dropdown">Blog</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='blog.html'>Blog without
|
|
Sidebar</a></li>
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='blog2.html'>Blog with
|
|
Sidebar</a></li>
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='blog3.html'>Blog with
|
|
Left Sidebar</a></li>
|
|
<li class="dropdown dropdown-submenu dropend"><a
|
|
class="dropdown-item hover:!text-[#54a8c7] dropdown-toggle" href="#"
|
|
data-bs-toggle="dropdown">Blog Posts</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='blog-post.html'>Post
|
|
without Sidebar</a></li>
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='blog-post2.html'>Post with Sidebar</a></li>
|
|
<li class="nav-item"><a class='dropdown-item hover:!text-[#54a8c7]' href='blog-post3.html'>Post with Left Sidebar</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown dropdown-mega">
|
|
<a class="nav-link dropdown-toggle !text-[.85rem] !tracking-[normal]" href="#"
|
|
data-bs-toggle="dropdown">Blocks</a>
|
|
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
|
|
<li class="mega-menu-content">
|
|
<ul
|
|
class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
|
|
class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
|
|
<span>About</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
|
|
class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
|
|
<span>Blog</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
|
|
class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
|
|
<span>Call to Action</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
|
|
class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
|
|
<span>Clients</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
|
|
class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
|
|
<span>Contact</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
|
|
class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
|
|
<span>Facts</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
|
|
class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
|
|
<span>FAQ</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
|
|
class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
|
|
<span>Features</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
|
|
class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
|
|
<span>Footer</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
|
|
class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
|
|
<span>Hero</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
|
|
class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
|
|
<span>Misc</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
|
|
class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
|
|
<span>Navbar</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
|
|
class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
|
|
<span>Portfolio</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
|
|
class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
|
|
<span>Pricing</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
|
|
class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
|
|
<span>Process</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
|
|
class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
|
|
<span>Team</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img
|
|
class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
|
|
<span>Testimonials</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!--/.row -->
|
|
</li>
|
|
<!--/.mega-menu-content-->
|
|
</ul>
|
|
<!--/.dropdown-menu -->
|
|
</li>
|
|
<li class="nav-item dropdown dropdown-mega">
|
|
<a class="nav-link dropdown-toggle !text-[.85rem] !tracking-[normal]" href="#"
|
|
data-bs-toggle="dropdown">Documentation</a>
|
|
<ul class="dropdown-menu mega-menu">
|
|
<li class="mega-menu-content">
|
|
<div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
|
|
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full">
|
|
<h6 class="dropdown-header !text-[#54a8c7]">Usage</h6>
|
|
<ul class="pl-0 list-none xl:columns-2 lg:columns-2 xl:pb-1 lg:pb-1">
|
|
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/index.html'>Get Started</a>
|
|
</li>
|
|
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/forms.html'>Forms</a></li>
|
|
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/faq.html'>FAQ</a></li>
|
|
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/changelog.html'>Changelog</a>
|
|
</li>
|
|
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/credits.html'>Credits</a></li>
|
|
</ul>
|
|
<h6 class="dropdown-header !text-[#54a8c7] xl:!mt-6 lg:!mt-6">Styleguide</h6>
|
|
<ul class="pl-0 list-none xl:columns-2 lg:columns-2 ">
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/styleguide/colors.html'>Colors</a></li>
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/styleguide/fonts.html'>Fonts</a></li>
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/styleguide/icons-svg.html'>SVG
|
|
Icons</a></li>
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/styleguide/icons-font.html'>Font Icons</a></li>
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/styleguide/illustrations.html'>Illustrations</a></li>
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/styleguide/backgrounds.html'>Backgrounds</a></li>
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/styleguide/misc.html'>Misc</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!--/column -->
|
|
<div
|
|
class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] max-w-full xl:border-l-[rgba(164,174,198,0.2)] xl:border-l xl:border-solid lg:border-l-[rgba(164,174,198,0.2)] lg:border-l lg:border-solid">
|
|
<h6 class="dropdown-header !text-[#54a8c7]">Elements</h6>
|
|
<ul class="pl-0 list-none xl:columns-3 lg:columns-3 ">
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/accordion.html'>Accordion</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/alerts.html'>Alerts</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/animations.html'>Animations</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/avatars.html'>Avatars</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/background.html'>Background</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/badges.html'>Badges</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/buttons.html'>Buttons</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/card.html'>Card</a>
|
|
</li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/carousel.html'>Carousel</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/dividers.html'>Dividers</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/form-elements.html'>Form Elements</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/image-hover.html'>Image Hover</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/image-mask.html'>Image Mask</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/lightbox.html'>Lightbox</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/player.html'>Media
|
|
Player</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/modal.html'>Modal</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/pagination.html'>Pagination</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/progressbar.html'>Progressbar</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/shadows.html'>Shadows</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/shapes.html'>Shapes</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/tables.html'>Tables</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/tabs.html'>Tabs</a>
|
|
</li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/text-animations.html'>Text Animations</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/text-highlight.html'>Text Highlight</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/tiles.html'>Tiles</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' href='docs/elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
|
|
<li><a class='dropdown-item hover:!text-[#54a8c7]' 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 class="nav-link" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-search"><i
|
|
class="uil uil-search before:content-['\eca5'] !text-[1.1rem]"></i></a></li>
|
|
<li class="nav-item hidden xl:block lg:block md:block">
|
|
<a class='btn btn-sm btn-aqua text-white !bg-[#54a8c7] border-[#54a8c7] hover:!text-white hover:bg-[#54a8c7] hover:!border-[#54a8c7] focus:shadow-[rgba(79,152,181,1)] active:!text-[#343f52] active:bg-[#54a8c7] active:border-[#54a8c7] disabled:!text-[#343f52] disabled:bg-[#54a8c7] disabled:border-[#54a8c7] !text-[.85rem] !rounded-[.4rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='contact.html'>Contact</a>
|
|
</li>
|
|
<li class="nav-item xl:!hidden lg:!hidden">
|
|
<button class="hamburger offcanvas-nav-btn"><span></span></button>
|
|
</li>
|
|
</ul>
|
|
<!-- /.navbar-nav -->
|
|
</div>
|
|
<!-- /.navbar-other -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</nav>
|
|
<!-- /.navbar -->
|
|
<div class="offcanvas offcanvas-top !bg-[#ffffff] " id="offcanvas-search" data-bs-scroll="true">
|
|
<div class="container flex !flex-row py-6">
|
|
<form
|
|
class=" search-form relative before:content-['\eca5'] before:block before:absolute before:-translate-y-2/4 before:text-[1rem] before:!text-[#343f52] before:z-[1] before:right-auto before:top-2/4 before:font-Unicons w-full before:left-0 focus:!outline-offset-0 ">
|
|
<input id="search-form1" type="text"
|
|
class="form-control text-[0.8rem] !shadow-none !pl-[1.75rem] !pr-[.75rem] border-0 bg-inherit m-0 block w-full font-medium !leading-[1.7] !text-[#60697b] px-4 py-[0.6rem] rounded-[0.4rem] focus:!outline-offset-0 "
|
|
placeholder="Type keyword and hit enter">
|
|
</form>
|
|
<button type="button"
|
|
class="btn-close leading-none !text-[#343f52] transition-all duration-[0.2s] ease-in-out p-0 border-0 motion-reduce:transition-none before:text-[1.05rem] before:content-['\ed3b'] before:w-[1.8rem] before:h-[1.8rem] before:leading-[1.8rem] before:shadow-none before:transition-[background] before:duration-[0.2s] before:ease-in-out before:!flex before:justify-center before:items-center before:m-0 before:p-0 before:rounded-[100%] hover:no-underline bg-inherit before:bg-[rgba(0,0,0,.08)] before:font-Unicons hover:before:bg-[rgba(0,0,0,.11)] "
|
|
data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!-- /.offcanvas -->
|
|
</header>
|
|
<!-- /header -->
|
|
<section
|
|
class="wrapper bg-[#262b32] opacity-100 angled lower-start relative border-0
|
|
before:content-[''] before:block before:absolute before:z-0 before:border-y-transparent before:border-[#262b32] before:border-0 before:border-solid before:right-0 after:bottom-[-4rem] after:content-[''] after:block after:absolute after:z-0 after:border-l-[100vw] after:border-r-transparent after:border-b-[4rem] after:border-y-transparent after:border-[#262b32] after:border-0 after:border-solid after:right-0">
|
|
<div class="container pt-7 xl:pt-12 lg:pt-12 md:pt-12 pb-8">
|
|
<div class="flex flex-wrap mx-0 !mt-[-50px] items-center">
|
|
<div class="lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] max-w-full px-0 !mt-[50px]" data-cues="slideInDown"
|
|
data-group="page-title" data-delay="600">
|
|
<h1 class="!text-[calc(1.375rem_+_1.5vw)] font-bold !leading-[1.15] xl:!text-[2.5rem] !text-white !mb-4">Trunçgil
|
|
focuses on <br><span class="typer !text-[#54a8c7] whitespace-nowrap" data-delay="100"
|
|
data-words="customer satisfaction,business needs,creative ideas"></span><span
|
|
class="cursor !text-[#54a8c7] " data-owner="typer"></span></h1>
|
|
<p class="lead !text-[1.2rem] !leading-[1.5] !text-white !mb-7 md:!pr-32 xl:!pr-0 lg:!pr-0 xxl:!pr-20">We
|
|
carefully consider our solutions to support each and every stage of your growth.</p>
|
|
<div>
|
|
<a
|
|
class="btn btn-lg btn-aqua !text-white !bg-[#54a8c7] border-[#54a8c7] hover:text-white hover:bg-[#54a8c7] hover:!border-[#54a8c7] focus:shadow-[rgba(79,152,181,1)] active:!text-[#343f52] active:bg-[#54a8c7] active:border-[#54a8c7] disabled:!text-[#343f52] disabled:bg-[#54a8c7] disabled:border-[#54a8c7] rounded">Get
|
|
Started</a>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
<div
|
|
class="lg:w-5/12 xl:w-5/12 w-full flex-[0_0_auto] max-w-full px-0 !mt-[50px] lg:!ml-[8.33333333%] xl:!ml-[8.33333333%] !mb-[-8rem] relative z-[3]"
|
|
data-cues="slideInDown">
|
|
<div class="!relative">
|
|
<a href="assets/media/movie.mp4"
|
|
class="btn btn-circle btn-aqua !text-white !bg-[#54a8c7] border-[#54a8c7] hover:text-white hover:bg-[#54a8c7] hover:!border-[#54a8c7] focus:shadow-[rgba(79,152,181,1)] active:!text-[#343f52] active:bg-[#54a8c7] active:border-[#54a8c7] disabled:!text-[#343f52] disabled:bg-[#54a8c7] disabled:border-[#54a8c7] btn-play ripple !mx-auto !mb-6 !absolute !text-[calc(1.355rem_+_1.26vw)] xl:!text-[2.3rem] !w-[3.5rem] !h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] before:!bg-[#54a8c7] after:!bg-[#54a8c7] before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:[animation-delay:.5s]"
|
|
style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox><i
|
|
class="icn-caret-right !ml-[0.15rem] !relative z-[2] before:content-['\e900'] !text-[calc(1.355rem_+_1.26vw)]"></i></a>
|
|
<figure class="!rounded-[.4rem] !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"><img
|
|
class="!rounded-[.4rem]" src="assets/img/photos/about13.jpg"
|
|
alt="image"></figure>
|
|
</div>
|
|
<!-- /div -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper !bg-[#ffffff]">
|
|
<div class="container pt-36 xl:pt-[12.5rem] lg:pt-[12.5rem] md:pt-[12.5rem] pb-24 xl:pb-32 lg:pb-32 md:pb-32">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="lg:w-8/12 xl:w-7/12 xxl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<h2
|
|
class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#54a8c7] !text-[#54a8c7] !mb-3">
|
|
What We Do?</h2>
|
|
<h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-9">The service we
|
|
offer is specifically designed to meet your needs.</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div
|
|
class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-40px] !mb-[4.5rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem]">
|
|
<div
|
|
class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
|
|
<div class="icon btn btn-block btn-lg btn-soft-aqua pointer-events-none !mb-6"> <i
|
|
class="uil uil-wind-moon"></i> </div>
|
|
<h4 class="!text-[1rem] !leading-[1.45]">24/7 Support</h4>
|
|
<p class="!mb-3">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget
|
|
metus. Cras justo.</p>
|
|
<a href="#" class="more hover !text-[#54a8c7] focus:!text-[#54a8c7] hover:!text-[#54a8c7]">Learn More</a>
|
|
</div>
|
|
<!--/column -->
|
|
<div
|
|
class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
|
|
<div class="icon btn btn-block btn-lg btn-soft-aqua pointer-events-none !mb-6"> <i
|
|
class="uil uil-shield-exclamation before:content-['\ecb3']"></i> </div>
|
|
<h4 class="!text-[1rem] !leading-[1.45]">Secure Payments</h4>
|
|
<p class="!mb-3">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget
|
|
metus. Cras justo.</p>
|
|
<a href="#" class="more hover !text-[#54a8c7] focus:!text-[#54a8c7] hover:!text-[#54a8c7]">Learn More</a>
|
|
</div>
|
|
<!--/column -->
|
|
<div
|
|
class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
|
|
<div class="icon btn btn-block btn-lg btn-soft-aqua pointer-events-none !mb-6"> <i
|
|
class="uil uil-laptop-cloud before:content-['\ebb2']"></i> </div>
|
|
<h4 class="!text-[1rem] !leading-[1.45]">Daily Updates</h4>
|
|
<p class="!mb-3">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget
|
|
metus. Cras justo.</p>
|
|
<a href="#" class="more hover !text-[#54a8c7] focus:!text-[#54a8c7] hover:!text-[#54a8c7]">Learn More</a>
|
|
</div>
|
|
<!--/column -->
|
|
<div
|
|
class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !mt-[40px] max-w-full">
|
|
<div class="icon btn btn-block btn-lg btn-soft-aqua pointer-events-none !mb-6"> <i
|
|
class="uil uil-phone-volume before:content-['\ec50']"></i> </div>
|
|
<h4 class="!text-[1rem] !leading-[1.45]">Market Research</h4>
|
|
<p class="!mb-3">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget
|
|
metus. Cras justo.</p>
|
|
<a href="#" class="more hover !text-[#54a8c7] focus:!text-[#54a8c7] hover:!text-[#54a8c7]">Learn More</a>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<div
|
|
class="flex flex-wrap mx-[-15px] max-sm:!mt-[-50px] !mt-[-80px] xl:mx-[-7.5px] lg:mx-[-7.5px] !mb-24 md:!mb-[8rem] items-center">
|
|
<div
|
|
class="md:w-8/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] xl:!px-[7.5px] lg:!px-[7.5px] !px-[15px] max-w-full !relative !mt-[80px]">
|
|
<div
|
|
class="shape bg-dot rellax !w-[7rem] !h-[12.5rem] absolute z-[1] opacity-50 !bg-[radial-gradient(#54a8c7_2px,transparent_2.5px)]"
|
|
data-rellax-speed="1" style="top: -2rem; left: -1.9rem;"></div>
|
|
<div class="shape !rounded-[.4rem] !bg-[#edf2fc] rellax xl:block lg:block md:block !absolute z-[1]"
|
|
data-rellax-speed="0" style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%; "></div>
|
|
<figure class="!rounded-[.4rem] relative z-[2]"><img class="!rounded-[.4rem]"
|
|
src="assets/img/photos/about7.jpg" alt="image"></figure>
|
|
</div>
|
|
<!--/column -->
|
|
<div
|
|
class="lg:w-5/12 xl:w-4/12 xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] w-full flex-[0_0_auto] xl:!px-[7.5px] lg:!px-[7.5px] !px-[15px] max-w-full !mt-[80px]">
|
|
<h2
|
|
class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#54a8c7] !text-[#54a8c7] !mb-3">
|
|
How It Works?</h2>
|
|
<h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-7">Here are the 3
|
|
working steps on success.</h3>
|
|
<div class="flex flex-row !mb-6">
|
|
<div>
|
|
<span class="icon btn btn-block btn-soft-aqua pointer-events-none !mr-5"><span
|
|
class="number !text-[0.9rem]">1</span></span>
|
|
</div>
|
|
<div>
|
|
<h4 class="!mb-1 !text-[1rem] !leading-[1.45]">Collect Ideas</h4>
|
|
<p class="!mb-0">Nulla vitae elit libero pharetra augue dapibus. Praesent commodo cursus.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row !mb-6">
|
|
<div>
|
|
<span class="icon btn btn-block btn-soft-aqua pointer-events-none !mr-5"><span
|
|
class="number !text-[0.9rem]">2</span></span>
|
|
</div>
|
|
<div>
|
|
<h4 class="!mb-1 !text-[1rem] !leading-[1.45]">Data Analysis</h4>
|
|
<p class="!mb-0">Vivamus sagittis lacus vel augue laoreet. Etiam porta sem malesuada magna.</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row">
|
|
<div>
|
|
<span class="icon btn btn-block btn-soft-aqua pointer-events-none !mr-5"><span
|
|
class="number !text-[0.9rem]">3</span></span>
|
|
</div>
|
|
<div>
|
|
<h4 class="!mb-1 !text-[1rem] !leading-[1.45]">Finalize Product</h4>
|
|
<p class="!mb-0">Cras mattis consectetur purus sit amet. Aenean lacinia bibendum nulla sed.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<div class="flex flex-wrap mx-[-15px] max-sm:!mt-[-50px] !mt-[-80px] xl:mx-[-7.5px] lg:mx-[-7.5px] items-center">
|
|
<div
|
|
class="md:w-8/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] sm:!mt-[80px] xl:!px-[7.5px] lg:!px-[7.5px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] xl:!order-2 lg:!order-2 !relative">
|
|
<div class="shape !rounded-[50%] bg-line aqua rellax !w-[8rem] !h-[8rem] !absolute z-[1] opacity-50"
|
|
data-rellax-speed="1" style="top: -2rem; right: -1.9rem;"></div>
|
|
<div class="shape rounded !bg-[#edf2fc] rellax xl:block lg:block md:block absolute z-[1]"
|
|
data-rellax-speed="0" style="bottom: -1.8rem; left: -1.5rem; width: 85%; height: 90%; "></div>
|
|
<figure class="rounded-[0.4rem] relative z-[2]"><img class="rounded-[.4rem]"
|
|
src="assets/img/photos/about9.jpg" alt="image"></figure>
|
|
</div>
|
|
<!--/column -->
|
|
<div
|
|
class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] sm:!mt-[80px] xl:!px-[7.5px] lg:!px-[7.5px] max-w-full">
|
|
<h2
|
|
class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#54a8c7] !text-[#54a8c7] !mb-3">
|
|
Why Choose Us?</h2>
|
|
<h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-7">A few reasons why
|
|
our valued customers choose us.</h3>
|
|
<div class="accordion accordion-wrapper" id="accordionExample">
|
|
<div class="card plain accordion-item">
|
|
<div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingOne">
|
|
<button
|
|
class="before:!text-[#54a8c7] hover:!text-[#54a8c7] !p-[0_0_0_1.1rem] !text-[.9rem] accordion-button"
|
|
data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true"
|
|
aria-controls="collapseOne"> Professional Design </button>
|
|
</div>
|
|
<!--/.card-header -->
|
|
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
|
|
data-bs-parent="#accordionExample">
|
|
<div
|
|
class="card-body 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]">
|
|
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
|
|
sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna,
|
|
vel.</p>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.accordion-collapse -->
|
|
</div>
|
|
<!--/.accordion-item -->
|
|
<div class="card plain accordion-item">
|
|
<div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingTwo">
|
|
<button class="before:!text-[#54a8c7] hover:!text-[#54a8c7] !p-[0_0_0_1.1rem] !text-[.9rem] collapsed"
|
|
data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false"
|
|
aria-controls="collapseTwo"> Top-Notch Support </button>
|
|
</div>
|
|
<!--/.card-header -->
|
|
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
|
|
data-bs-parent="#accordionExample">
|
|
<div
|
|
class="card-body 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]">
|
|
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
|
|
sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna,
|
|
vel.</p>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.accordion-collapse -->
|
|
</div>
|
|
<!--/.accordion-item -->
|
|
<div class="card plain accordion-item">
|
|
<div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingThree">
|
|
<button class="before:!text-[#54a8c7] hover:!text-[#54a8c7] !p-[0_0_0_1.1rem] !text-[.9rem] collapsed"
|
|
data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false"
|
|
aria-controls="collapseThree"> Header and Slider Options </button>
|
|
</div>
|
|
<!--/.card-header -->
|
|
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
|
|
data-bs-parent="#accordionExample">
|
|
<div
|
|
class="card-body 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]">
|
|
<p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
|
|
sit amet risus. Cras mattis consectetur purus sit amet fermentum. Praesent commodo cursus magna,
|
|
vel.</p>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.accordion-collapse -->
|
|
</div>
|
|
<!--/.accordion-item -->
|
|
</div>
|
|
<!--/.accordion -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section
|
|
class="wrapper image-wrapper bg-image bg-overlay !bg-fixed bg-no-repeat bg-[center_center] bg-cover relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(30,34,40,.5)]"
|
|
data-image-src="assets/img/photos/bg1.jpg">
|
|
<div class="container py-[8rem]">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<h2
|
|
class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#ffffff] !text-white !mb-3">
|
|
Join Our Community</h2>
|
|
<h3
|
|
class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-6 !text-white xxl:!pr-32">
|
|
We are trusted by over 5000+ clients. Join them by using our services and grow your business.</h3>
|
|
<a href="#" class="btn btn-white !rounded-[.4rem] !text-[.85rem] !mb-0 whitespace-nowrap">Join Us</a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section
|
|
class="wrapper !bg-[#ffffff] angled upper-end relative border-0
|
|
before:top-[-4rem] before:content-[''] before:block before:absolute before:z-0 before:border-l-transparent before:border-r-[100vw] before:border-t-[4rem] before:border-y-transparent before:border-[#fefefe] before:border-0 before:border-solid before:right-0 after:content-[''] after:block after:absolute after:z-0 after:border-y-transparent after:border-[#fefefe] after:border-0 after:border-solid after:right-0">
|
|
<div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<h2
|
|
class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#54a8c7] !text-[#54a8c7] !mb-3">
|
|
Case Studies</h2>
|
|
<h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-9">Check out some of
|
|
our awesome projects with creative ideas and great design.</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="swiper-container blog grid-view !mb-10 relative z-10" data-margin="30" data-dots="true"
|
|
data-items-xl="3" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img
|
|
class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105"
|
|
src="assets/img/photos/b4.jpg" alt="image"></a>
|
|
<figcaption
|
|
class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read
|
|
More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<h2 class="post-title h3 !mb-3 !text-[1.15rem] !leading-[1.4]"><a class='!text-[#343f52] hover:!text-[#54a8c7]' href='blog-post.html'>Ligula tristique quis
|
|
risus</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-footer">
|
|
<ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
|
|
<li class="post-date inline-block"><i
|
|
class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>14
|
|
Apr 2022</span></li>
|
|
<li
|
|
class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:mx-[0.6rem] before:my-0 before:rounded-[100%] before:bg-[#aab0bc] before:align-[0.15rem] !text-[.75rem]">
|
|
<a class="!text-[#aab0bc] hover:!text-[#54a8c7]" href="#"><i
|
|
class="uil uil-file-alt !text-[.75rem] pr-[0.2rem] align-[-.05rem] before:content-['\eaec']"></i>Coding</a>
|
|
</li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img
|
|
class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105"
|
|
src="assets/img/photos/b5.jpg" alt="image"></a>
|
|
<figcaption
|
|
class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read
|
|
More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<h2 class="post-title h3 !mb-3 !text-[1.15rem] !leading-[1.4]"><a class='!text-[#343f52] hover:!text-[#54a8c7]' href='blog-post.html'>Nullam id dolor elit id
|
|
nibh</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-footer">
|
|
<ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
|
|
<li class="post-date inline-block"><i
|
|
class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>29
|
|
Mar 2022</span></li>
|
|
<li
|
|
class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:mx-[0.6rem] before:my-0 before:rounded-[100%] before:bg-[#aab0bc] before:align-[0.15rem] !text-[.75rem]">
|
|
<a class="!text-[#aab0bc] hover:!text-[#54a8c7]" href="#"><i
|
|
class="uil uil-file-alt !text-[.75rem] pr-[0.2rem] align-[-.05rem] before:content-['\eaec']"></i>Workspace</a>
|
|
</li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img
|
|
class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105"
|
|
src="assets/img/photos/b6.jpg" alt="image"></a>
|
|
<figcaption
|
|
class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read
|
|
More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<h2 class="post-title h3 !mb-3 !text-[1.15rem] !leading-[1.4]"><a class='!text-[#343f52] hover:!text-[#54a8c7]' href='blog-post.html'>Ultricies fusce porta
|
|
elit</a></h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
<div class="post-footer">
|
|
<ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
|
|
<li class="post-date inline-block"><i
|
|
class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>26
|
|
Feb 2022</span></li>
|
|
<li
|
|
class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:mx-[0.6rem] before:my-0 before:rounded-[100%] before:bg-[#aab0bc] before:align-[0.15rem] !text-[.75rem]">
|
|
<a class="!text-[#aab0bc] hover:!text-[#54a8c7]" href="#"><i
|
|
class="uil uil-file-alt !text-[.75rem] pr-[0.2rem] align-[-.05rem] before:content-['\eaec']"></i>Meeting</a>
|
|
</li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<article>
|
|
<figure class="overlay overlay-1 hover-scale rounded !mb-6 group"><a href="#"> <img
|
|
class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105"
|
|
src="assets/img/photos/b7.jpg" alt="image"></a>
|
|
<figcaption
|
|
class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4">Read
|
|
More</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="post-header">
|
|
<h2 class="post-title h3 !mb-3 !text-[1.15rem] !leading-[1.4]"><a class='!text-[#343f52] hover:!text-[#54a8c7]' href='blog-post.html'>Morbi leo risus porta
|
|
eget</a></h2>
|
|
</div>
|
|
<div class="post-footer">
|
|
<ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none">
|
|
<li class="post-date inline-block"><i
|
|
class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>7
|
|
Jan 2022</span></li>
|
|
<li
|
|
class="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:mx-[0.6rem] before:my-0 before:rounded-[100%] before:bg-[#aab0bc] before:align-[0.15rem] !text-[.75rem]">
|
|
<a class="!text-[#aab0bc] hover:!text-[#54a8c7]" href="#"><i
|
|
class="uil uil-file-alt !text-[.75rem] pr-[0.2rem] align-[-.05rem] before:content-['\eaec']"></i>Business
|
|
Tips</a>
|
|
</li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</div>
|
|
<!-- /.post-footer -->
|
|
</article>
|
|
<!-- /article -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!-- /.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper !bg-[#edf2fc]">
|
|
<div class="container py-[4.5rem] xl:pt-28 lg:pt-28 md:pt-28 xl:pb-[12.5rem] lg:pb-[12.5rem] md:pb-[12.5rem]">
|
|
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] xl:!mt-0 lg:!mt-0 !mb-2 items-end">
|
|
<div
|
|
class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] xl:!mt-0 lg:!mt-0 max-w-full">
|
|
<h2
|
|
class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#54a8c7] !text-[#54a8c7] !mb-3">
|
|
Company Facts</h2>
|
|
<h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-0 xxl:!pr-20">We
|
|
are proud of our works</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
<div
|
|
class="lg:w-8/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[50px] max-w-full xl:!mt-2 lg:!mt-2">
|
|
<div class="flex flex-wrap mx-[-15px] items-center counter-wrapper !mt-[-30px] !text-center">
|
|
<div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full">
|
|
<h3
|
|
class="counter counter-lg !text-[calc(1.35rem_+_1.2vw)] !tracking-[normal] !leading-none !mb-[.5rem] xl:!text-[2.25rem] ">
|
|
1000+</h3>
|
|
<p class="font-medium !mb-0">Completed Projects</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] !mt-[30px] max-w-full">
|
|
<h3
|
|
class="counter counter-lg !text-[calc(1.35rem_+_1.2vw)] !tracking-[normal] !leading-none !mb-[.5rem] xl:!text-[2.25rem] ">
|
|
500+</h3>
|
|
<p class="font-medium !mb-0">Happy Clients</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] !mt-[30px] max-w-full">
|
|
<h3
|
|
class="counter counter-lg !text-[calc(1.35rem_+_1.2vw)] !tracking-[normal] !leading-none !mb-[.5rem] xl:!text-[2.25rem] ">
|
|
150+</h3>
|
|
<p class="font-medium !mb-0">Awards Won</p>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section
|
|
class="wrapper !bg-[#ffffff] angled upper-end lower-start relative border-0
|
|
before:top-[-4rem] before:content-[''] before:block before:absolute before:z-0 before:border-l-transparent before:border-r-[100vw] before:border-t-[4rem] before:border-y-transparent before:border-[#fefefe] before:border-0 before:border-solid before:right-0 after:bottom-[-4rem] after:content-[''] after:block after:absolute after:z-0 after:border-l-[100vw] after:border-r-transparent after:border-b-[4rem] after:border-y-transparent after:border-[#fefefe] after:border-0 after:border-solid after:right-0">
|
|
<div class="container py-24 xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem] !relative">
|
|
<div
|
|
class="relative !mt-[-8rem] xl:!mt-[-17.5rem] lg:!mt-[-17.5rem] md:!mt-[-17.5rem] !mb-24 xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem]">
|
|
<div class="shape !rounded-[50%] bg-line aqua rellax !w-[8rem] !h-[8rem] absolute opacity-50"
|
|
data-rellax-speed="1" style="top: -2rem; right: -2.7rem; z-index:0;"></div>
|
|
<div class="shape !rounded-[50%] !bg-[#eff7fa] rellax !w-[8rem] !h-[8rem] absolute" data-rellax-speed="1"
|
|
style="bottom: -1rem; left: -3rem; z-index:0;"></div>
|
|
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
|
<div class="flex flex-wrap mx-0">
|
|
<div
|
|
class="lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] max-w-full image-wrapper bg-image rounded-t-[0.4rem] rounded-lg-start bg-cover bg-[center_center] bg-no-repeat bg-scroll relative z-0 xl:rounded-tl-[0.4rem] xl:rounded-tr-none xl:rounded-br-none xl:rounded-bl-[0.4rem] lg:rounded-tl-[0.4rem] lg:rounded-tr-none lg:rounded-br-none lg:rounded-bl-[0.4rem] md:min-h-[25rem] max-md:min-h-[25rem]"
|
|
data-image-src="assets/img/photos/tm1.jpg">
|
|
</div>
|
|
<!--/column -->
|
|
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full">
|
|
<div class="!p-10 xl:!p-[4rem] lg:!p-[4rem] md:!p-12">
|
|
<div class="swiper-container dots-closer !mb-4 relative z-10" data-margin="30" data-dots="true">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<blockquote
|
|
class="icon icon-top !text-[1.05rem] !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.”</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-[.85rem]">Financial Analyst</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<blockquote
|
|
class="icon icon-top !text-[1.05rem] !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.”</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-[.85rem]">Marketing Specialist</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<blockquote
|
|
class="icon icon-top !text-[1.05rem] !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.”</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-[.85rem]">Sales Manager</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!-- /.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!--/div -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /div -->
|
|
<div class="flex flex-wrap mx-[-15px] !mt-[-30px] !mb-24 xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem]">
|
|
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<h2
|
|
class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#54a8c7] !text-[#54a8c7] lg:!mt-32 xl:!mt-32 !mb-3">
|
|
Our Pricing</h2>
|
|
<h3 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-3">We offer great
|
|
and premium prices.</h3>
|
|
<p>Enjoy a <a href="#" class="hover !text-[#54a8c7]">free 30-day trial</a> and experience the full service.
|
|
No credit card required!</p>
|
|
<a href="#"
|
|
class="btn btn-aqua !text-white !bg-[#54a8c7] border-[#54a8c7] hover:text-white hover:bg-[#54a8c7] hover:!border-[#54a8c7] focus:shadow-[rgba(79,152,181,1)] focus:text-white active:text-white active:bg-[#54a8c7] active:border-[#54a8c7] disabled:text-white disabled:bg-[#54a8c7] disabled:border-[#54a8c7] !text-[.85rem] rounded !mt-2">See
|
|
All Prices</a>
|
|
</div>
|
|
<!--/column -->
|
|
<div
|
|
class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] pricing-wrapper !mt-[30px]">
|
|
<div class="flex flex-wrap items-center switcher xl:!justify-end lg:!justify-end">
|
|
<p class="!mb-0 !pr-[.75rem]">Monthly</p>
|
|
<div
|
|
class="pricing-switchers w-8 h-4 clear-both !text-center !relative bg-[rgba(30,34,40,0.07)] !box-content rounded-3xl border-[0.2rem] border-solid border-transparent">
|
|
<div
|
|
class="pricing-switcher pricing-switcher-active cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercase !text-white">
|
|
</div>
|
|
<div
|
|
class="pricing-switcher cursor-pointer w-full float-left h-4 leading-4 !relative z-[888] transition-[0.3s] duration-[ease-in-out] uppercase">
|
|
</div>
|
|
<div
|
|
class="h-4 w-4 block absolute z-[555] transition-[0.3s] duration-[ease-in-out] m-0 rounded-[100%] border-[none] left-0 top-0 !bg-[rgba(84,168,199)] opacity-100 switcher-button">
|
|
</div>
|
|
</div>
|
|
<p class="!mb-0 !pl-3 !relative">Yearly <span class="!text-[#e2626b]">(Save 30%)</span></p>
|
|
</div>
|
|
<div class="flex flex-wrap mx-[-15px] !mt-[25px] !relative">
|
|
<div class="shape bg-dot aqua rellax !w-[6rem] !h-[8rem] absolute z-[1] opacity-50" data-rellax-speed="1"
|
|
style="bottom: -0.5rem; right: -1.6rem;"></div>
|
|
<div class="shape !rounded-[50%] !bg-[#edf2fc] rellax !w-[8rem] !h-[8rem] absolute z-[1]"
|
|
data-rellax-speed="1" style="top: -1rem; left: -2rem;"></div>
|
|
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
|
|
<div class="pricing card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
|
<div class="card-body pb-14">
|
|
<div class="prices !text-[#343f52]">
|
|
<div class="price price-show !justify-start"><span class="price-currency">$</span><span
|
|
class="price-value">19</span> <span class="price-duration">mo</span></div>
|
|
<div class="price price-hide price-hidden !justify-start"><span
|
|
class="price-currency">$</span><span class="price-value">199</span> <span
|
|
class="price-duration">yr</span></div>
|
|
</div>
|
|
<!--/.prices -->
|
|
<h4 class="card-title !mt-2 text-[1rem] !leading-[1.45]">Premium Plan</h4>
|
|
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8">
|
|
<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-[#e0eff5] !text-[#54a8c7] 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-[#e0eff5] !text-[#54a8c7] 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-[#e0eff5] !text-[#54a8c7] 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-[#e0eff5] !text-[#54a8c7] 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-aqua !text-white !bg-[#54a8c7] border-[#54a8c7] hover:text-white hover:bg-[#54a8c7] hover:!border-[#54a8c7] focus:shadow-[rgba(79,152,181,1)] focus:text-white active:text-white active:bg-[#54a8c7] active:border-[#54a8c7] disabled:text-white disabled:bg-[#54a8c7] disabled:border-[#54a8c7] !rounded-[.4rem] !text-[.85rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Choose
|
|
Plan</a>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.pricing -->
|
|
</div>
|
|
<!--/column -->
|
|
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full popular !mt-[30px]">
|
|
<div class="pricing card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
|
<div class="card-body pb-14">
|
|
<div class="prices !text-[#343f52]">
|
|
<div class="price price-show !justify-start"><span class="price-currency">$</span><span
|
|
class="price-value">49</span> <span class="price-duration">mo</span></div>
|
|
<div class="price price-hide price-hidden !justify-start"><span
|
|
class="price-currency">$</span><span class="price-value">499</span> <span
|
|
class="price-duration">yr</span></div>
|
|
</div>
|
|
<!--/.prices -->
|
|
<h4 class="card-title !mt-2 text-[1rem] !leading-[1.45]">Corporate Plan</h4>
|
|
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mt-7 !mb-8">
|
|
<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-[#e0eff5] !text-[#54a8c7] 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-[#e0eff5] !text-[#54a8c7] 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-[#e0eff5] !text-[#54a8c7] 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-[#e0eff5] !text-[#54a8c7] 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-[#e0eff5] !text-[#54a8c7] 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-aqua !text-white !bg-[#54a8c7] border-[#54a8c7] hover:text-white hover:bg-[#54a8c7] hover:!border-[#54a8c7] focus:shadow-[rgba(79,152,181,1)] focus:text-white active:text-white active:bg-[#54a8c7] active:border-[#54a8c7] disabled:text-white disabled:bg-[#54a8c7] disabled:border-[#54a8c7] !rounded-[.4rem] !text-[.85rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Choose
|
|
Plan</a>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.pricing -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<div class="flex flex-wrap mx-[-15px] !mt-[-80px] xl:mx-[-7.5px] lg:mx-[-7.5px] items-center">
|
|
<div
|
|
class="md:w-8/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !mt-[80px] xl:!px-[7.5px] lg:!px-[7.5px] !px-[15px] max-w-full !relative">
|
|
<div
|
|
class="shape bg-dot primary rellax !w-[7rem] !h-[12.5rem] absolute z-[1] opacity-50 bg-[radial-gradient(#3f78e0_2px,transparent_2.5px)]"
|
|
data-rellax-speed="1" style="top: -2rem; left: -1.9rem;"></div>
|
|
<div class="shape !rounded-[.4rem] !bg-[#edf2fc] rellax xl:block lg:block md:block !absolute z-[1]"
|
|
data-rellax-speed="0" style="bottom: -1.8rem; right: -1.5rem; width: 85%; height: 90%; "></div>
|
|
<figure class="rounded-[0.4rem] relative z-[2]"><img class="rounded-[.4rem]"
|
|
src="assets/img/photos/about14.jpg" alt="image">
|
|
</figure>
|
|
</div>
|
|
<!--/column -->
|
|
<div
|
|
class="lg:w-5/12 xl:w-4/12 xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] w-full flex-[0_0_auto] !mt-[80px] xl:!px-[7.5px] lg:!px-[7.5px] !px-[15px] max-w-full">
|
|
<h2
|
|
class="!text-[0.8rem] uppercase inline-flex !leading-[1.35] text-line relative align-top !pl-[1.4rem] !tracking-[0.02rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#54a8c7] !text-[#54a8c7] !mb-3">
|
|
Get In Touch</h2>
|
|
<h2 class="!text-[calc(1.315rem_+_0.78vw)] font-bold xl:!text-[1.9rem] !leading-[1.25] !mb-8">Convinced yet?
|
|
Let's make something great together.</h2>
|
|
<div class="flex flex-row">
|
|
<div>
|
|
<div class="icon !text-[#54a8c7] xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-6 !mt-[-0.25rem]"> <i
|
|
class="uil uil-location-pin-alt before:content-['\ebd8']"></i> </div>
|
|
</div>
|
|
<div>
|
|
<h5 class="!mb-1 !text-[0.95rem] !leading-[1.5]">Address</h5>
|
|
<address class=" not-italic !leading-[inherit] !mb-4">Moonshine St. 14/05 Light City, <br
|
|
class="hidden xl:block lg:block md:block">London, United Kingdom</address>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row">
|
|
<div>
|
|
<div class="icon !text-[#54a8c7] xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-6 !mt-[-0.25rem]"> <i
|
|
class="uil uil-phone-volume before:content-['\ec50']"></i> </div>
|
|
</div>
|
|
<div>
|
|
<h5 class="!mb-1 !text-[0.95rem] !leading-[1.5]">Phone</h5>
|
|
<p>00 (123) 456 78 90</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-row">
|
|
<div>
|
|
<div class="icon !text-[#54a8c7] xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-6 !mt-[-0.25rem]"> <i
|
|
class="uil uil-envelope before:content-['\eac8']"></i> </div>
|
|
</div>
|
|
<div>
|
|
<h5 class="!mb-1 !text-[0.95rem] !leading-[1.5]">E-mail</h5>
|
|
<p class="!mb-0"><a href="mailto:Trunçgil@email.com" class="!text-[#60697b]">Trunçgil@email.com</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
</div>
|
|
<!-- /.content-wrapper -->
|
|
<footer class=" bg-[#21262c] opacity-100 !text-[#cacaca]">
|
|
<div class="container pt-28 xl:pt-36 lg:pt-36 md:pt-36 pb-16 xl:pb-20 lg:pb-20 md:pb-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 !text-[1rem] !leading-[1.45]">Get in Touch</h4>
|
|
<address class="xl:!pr-20 xxl:!pr-28 not-italic !leading-[inherit] block !mb-4">Moonshine St. 14/05 Light City,
|
|
London, United Kingdom</address>
|
|
<a class="!text-[#cacaca] hover:!text-[#54a8c7]" href="mailto:first.last@email.com">info@truncgil.com</a><br> 00
|
|
(123) 456 78 90
|
|
</div>
|
|
<!-- /.widget -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div
|
|
class="md:w-4/12 xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
|
|
<div class="widget !text-[#cacaca]">
|
|
<h4 class="widget-title !text-white !mb-3 !text-[1rem] !leading-[1.45]">Learn More</h4>
|
|
<ul class="pl-0 list-none !mb-0">
|
|
<li><a class="!text-[#cacaca] hover:!text-[#54a8c7]" href="#">About Us</a></li>
|
|
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#54a8c7]" href="#">Our Story</a></li>
|
|
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#54a8c7]" href="#">Projects</a></li>
|
|
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#54a8c7]" href="#">Terms of Use</a></li>
|
|
<li class="!mt-[0.35rem]"><a class="!text-[#cacaca] hover:!text-[#54a8c7]" href="#">Privacy Policy</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- /.widget -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div
|
|
class="md:w-full xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-0 lg:!mt-0 !mt-[30px]">
|
|
<div class="widget !text-[#cacaca]">
|
|
<h4 class="widget-title !text-white !mb-3 !text-[1rem] !leading-[1.45]">Our Newsletter</h4>
|
|
<p class="!mb-5">Subscribe to our newsletter to get our news & deals delivered to you.</p>
|
|
<div class="newsletter-wrapper">
|
|
<!-- Begin Mailchimp Signup Form -->
|
|
<div id="mc_embed_signup2">
|
|
<form
|
|
action="https://elemisfreebies.us20.list-manage.com/subscribe/post?u=aa4947f70a475ce162057838d&id=b49ef47a9a"
|
|
method="post" id="mc-embedded-subscribe-form2" name="mc-embedded-subscribe-form"
|
|
class="validate dark-fields" target="_blank" novalidate>
|
|
<div id="mc_embed_signup_scroll2">
|
|
<div class="!text-left input-group form-floating !relative flex flex-wrap items-stretch w-full">
|
|
<input type="email" value="" name="EMAIL"
|
|
class="required email form-control block w-full text-[12px] font-medium !leading-[1.7] appearance-none bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] px-4 py-[0.6rem] rounded-[0.4rem] motion-reduce:transition-none focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] disabled:bg-[#aab0bc] disabled:opacity-100 file:!mt-[-0.6rem] file:mr-[-1rem] file:!mb-[-0.6rem] file:ml-[-1rem] file:!text-[#60697b] file:bg-[#fefefe] file:pointer-events-none file:transition-all file:duration-[0.2s] file:ease-in-out file:px-4 file:py-[0.6rem] file:rounded-none motion-reduce:file:transition-none placeholder:!text-[#959ca9] placeholder:opacity-100 border border-solid !border-[rgba(255,255,255,0.1)] !text-[#cacaca] focus:!border-[rgba(84,168,199,.5)] bg-[rgba(255,255,255,.03)] focus-visible:!border-[rgba(84,168,199,.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-aqua !text-white !bg-[#54a8c7] border-[#54a8c7] hover:text-white hover:bg-[#54a8c7] hover:!border-[#54a8c7] active:text-white active:bg-[#54a8c7] active:border-[#54a8c7] disabled:text-white disabled:bg-[#54a8c7] disabled:border-[#54a8c7] !relative z-[2] hover:!transform-none hover:!translate-none border-0 !text-[.85rem]">
|
|
</div>
|
|
<div id="mce-responses2" class="clear">
|
|
<div class="response" id="mce-error-response2" style="display:none"></div>
|
|
<div class="response" id="mce-success-response2" style="display:none"></div>
|
|
</div>
|
|
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
|
|
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text"
|
|
name="b_ddc180777a163e0f9f66ee014_4b1bcfa0bc" tabindex="-1" value=""></div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<!--End mc_embed_signup-->
|
|
</div>
|
|
<!-- /.newsletter-wrapper -->
|
|
</div>
|
|
<!-- /.widget -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</footer>
|
|
<!-- progress wrapper -->
|
|
<div
|
|
class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#54a8c7] 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-[#54a8c7] 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/demo3 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 10:56:55 GMT -->
|
|
</html> |