Ümit Tunç
3119 lines
224 KiB
HTML
3119 lines
224 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
|
|
<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/docs/blocks/hero by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:01:19 GMT -->
|
|
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
|
|
<meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
|
|
<meta name="author" content="elemis">
|
|
<title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
|
|
<link rel="shortcut icon" href="../../assets/img/favicon.png">
|
|
<link rel="stylesheet" type="text/css" href="../../assets/fonts/unicons/unicons.css">
|
|
<link rel="stylesheet" href="../../assets/css/plugins.css">
|
|
<link rel="stylesheet" href="../../assets/css/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="grow shrink-0">
|
|
<header class="relative wrapper bg-soft-primary !bg-[#edf2fc]">
|
|
<nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
|
|
<div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
|
|
<div class="navbar-brand w-full">
|
|
<a href='../../index.html'>
|
|
<img src="../../assets/img/truncgil-yatay.svg" alt="image">
|
|
</a>
|
|
</div>
|
|
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
|
|
<div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
|
|
|
|
<button type="button" class="btn-close btn-close-white !mr-[-0.75rem] m-0 p-0 leading-none !text-[#343f52] transition-all duration-[0.2s] ease-in-out border-0 motion-reduce:transition-none before:text-[1.05rem] before:text-white before:content-['\ed3b'] before:w-[1.8rem] before:h-[1.8rem] before:leading-[1.8rem] before:shadow-none before:transition-[background] before:duration-[0.2s] before:ease-in-out before:!flex before:justify-center before:items-center before:m-0 before:p-0 before:rounded-[100%] hover:no-underline bg-inherit before:bg-[rgba(255,255,255,.08)] before:font-Unicons hover:before:bg-[rgba(0,0,0,.11)]" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item dropdown dropdown-mega">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
|
|
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
|
|
<li class="mega-menu-content mega-menu-scroll">
|
|
<ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo1.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi1.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 1</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo2.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi2.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 2</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo3.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi3.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 3</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo4.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi4.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 4</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo5.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi5.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 5</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo6.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi6.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 6</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo7.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi7.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 7</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo8.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi8.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 8</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo9.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi9.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 9</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo10.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi10.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 10</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo11.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi11.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 11</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo12.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi12.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 12</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo13.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi13.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 13</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo14.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi14.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 14</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo15.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi15.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 15</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo16.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi16.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 16</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo17.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi17.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 17</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo18.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi18.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 18</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo19.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi19.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 19</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo20.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi20.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 20</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo21.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi21.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 21</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo22.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi22.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 22</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo23.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi23.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 23</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo24.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi24.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 24</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo25.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi25.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 25</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo26.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi26.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 26</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo27.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi27.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 27</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo28.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi28.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 28</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo29.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi29.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 29</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo30.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi30.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 30</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo31.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi31.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 31</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo32.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi32.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 32</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo33.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi33.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 33</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo34.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi34.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 34</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!--/.row -->
|
|
<span class="hidden xl:!flex lg:!flex"><i class="uil uil-direction before:content-['\ea93']"></i><strong>Scroll to view more</strong></span>
|
|
</li>
|
|
<!--/.mega-menu-content-->
|
|
</ul>
|
|
<!--/.dropdown-menu -->
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='../../services.html'>Services I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../services2.html'>Services II</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='../../about.html'>About I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../about2.html'>About II</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='../../shop.html'>Shop I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../shop2.html'>Shop II</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../shop-product.html'>Product Page</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../shop-cart.html'>Shopping Cart</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../shop-checkout.html'>Checkout</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='../../contact.html'>Contact I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../contact2.html'>Contact II</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../contact3.html'>Contact III</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='../../career.html'>Job Listing I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../career2.html'>Job Listing II</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../career-job.html'>Job Description</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='../../404.html'>404 Not Found</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../page-loader.html'>Page Loader</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../signin.html'>Sign In I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../signin2.html'>Sign In II</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../signup.html'>Sign Up I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../signup2.html'>Sign Up II</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../terms.html'>Terms</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../pricing.html'>Pricing</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../onepage.html'>One Page</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
|
|
<div class="dropdown-menu dropdown-lg">
|
|
<div class="dropdown-lg-content">
|
|
<div>
|
|
<h6 class="dropdown-header">Project Pages</h6>
|
|
<ul class="pl-0 list-none">
|
|
<li><a class='dropdown-item' href='../../projects.html'>Projects I</a></li>
|
|
<li><a class='dropdown-item' href='../../projects2.html'>Projects II</a></li>
|
|
<li><a class='dropdown-item' href='../../projects3.html'>Projects III</a></li>
|
|
<li><a class='dropdown-item' href='../../projects4.html'>Projects IV</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- /.column -->
|
|
<div>
|
|
<h6 class="dropdown-header">Single Projects</h6>
|
|
<ul class="pl-0 list-none">
|
|
<li><a class='dropdown-item' href='../../single-project.html'>Single Project I</a></li>
|
|
<li><a class='dropdown-item' href='../../single-project2.html'>Single Project II</a></li>
|
|
<li><a class='dropdown-item' href='../../single-project3.html'>Single Project III</a></li>
|
|
<li><a class='dropdown-item' href='../../single-project4.html'>Single Project IV</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- /.column -->
|
|
</div>
|
|
<!-- /auto-column -->
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='../../blog.html'>Blog without Sidebar</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../blog2.html'>Blog with Sidebar</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../blog3.html'>Blog with Left Sidebar</a></li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='../../blog-post.html'>Post without Sidebar</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../blog-post2.html'>Post with Sidebar</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../blog-post3.html'>Post with Left Sidebar</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown dropdown-mega">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
|
|
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
|
|
<li class="mega-menu-content">
|
|
<ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='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='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='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='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='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='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='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='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='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='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='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='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='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='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='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='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='testimonials.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block16.svg" alt="image"></div>
|
|
<span>Testimonials</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!--/.row -->
|
|
</li>
|
|
<!--/.mega-menu-content-->
|
|
</ul>
|
|
<!--/.dropdown-menu -->
|
|
</li>
|
|
<li class="nav-item dropdown dropdown-mega">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</a>
|
|
<ul class="dropdown-menu mega-menu">
|
|
<li class="mega-menu-content">
|
|
<div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
|
|
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full">
|
|
<h6 class="dropdown-header">Usage</h6>
|
|
<ul class="pl-0 list-none xl:columns-2 lg:columns-2 xl:pb-1 lg:pb-1">
|
|
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../index.html'>Get Started</a></li>
|
|
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../forms.html'>Forms</a></li>
|
|
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../faq.html'>FAQ</a></li>
|
|
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../changelog.html'>Changelog</a></li>
|
|
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../credits.html'>Credits</a></li>
|
|
</ul>
|
|
<h6 class="dropdown-header xl:!mt-6 lg:!mt-6">Styleguide</h6>
|
|
<ul class="pl-0 list-none xl:columns-2 lg:columns-2 ">
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/colors.html'>Colors</a></li>
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/fonts.html'>Fonts</a></li>
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/icons-font.html'>Font Icons</a></li>
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/illustrations.html'>Illustrations</a></li>
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/misc.html'>Misc</a></li>
|
|
</ul>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] max-w-full xl:border-l-[rgba(164,174,198,0.2)] xl:border-l xl:border-solid lg:border-l-[rgba(164,174,198,0.2)] lg:border-l lg:border-solid">
|
|
<h6 class="dropdown-header">Elements</h6>
|
|
<ul class="pl-0 list-none xl:columns-3 lg:columns-3 ">
|
|
<li><a class='dropdown-item' href='../elements/accordion.html'>Accordion</a></li>
|
|
<li><a class='dropdown-item' href='../elements/alerts.html'>Alerts</a></li>
|
|
<li><a class='dropdown-item' href='../elements/animations.html'>Animations</a></li>
|
|
<li><a class='dropdown-item' href='../elements/avatars.html'>Avatars</a></li>
|
|
<li><a class='dropdown-item' href='../elements/background.html'>Background</a></li>
|
|
<li><a class='dropdown-item' href='../elements/badges.html'>Badges</a></li>
|
|
<li><a class='dropdown-item' href='../elements/buttons.html'>Buttons</a></li>
|
|
<li><a class='dropdown-item' href='../elements/card.html'>Card</a></li>
|
|
<li><a class='dropdown-item' href='../elements/carousel.html'>Carousel</a></li>
|
|
<li><a class='dropdown-item' href='../elements/dividers.html'>Dividers</a></li>
|
|
<li><a class='dropdown-item' href='../elements/form-elements.html'>Form Elements</a></li>
|
|
<li><a class='dropdown-item' href='../elements/image-hover.html'>Image Hover</a></li>
|
|
<li><a class='dropdown-item' href='../elements/image-mask.html'>Image Mask</a></li>
|
|
<li><a class='dropdown-item' href='../elements/lightbox.html'>Lightbox</a></li>
|
|
<li><a class='dropdown-item' href='../elements/player.html'>Media Player</a></li>
|
|
<li><a class='dropdown-item' href='../elements/modal.html'>Modal</a></li>
|
|
<li><a class='dropdown-item' href='../elements/pagination.html'>Pagination</a></li>
|
|
<li><a class='dropdown-item' href='../elements/progressbar.html'>Progressbar</a></li>
|
|
<li><a class='dropdown-item' href='../elements/shadows.html'>Shadows</a></li>
|
|
<li><a class='dropdown-item' href='../elements/shapes.html'>Shapes</a></li>
|
|
<li><a class='dropdown-item' href='../elements/tables.html'>Tables</a></li>
|
|
<li><a class='dropdown-item' href='../elements/tabs.html'>Tabs</a></li>
|
|
<li><a class='dropdown-item' href='../elements/text-animations.html'>Text Animations</a></li>
|
|
<li><a class='dropdown-item' href='../elements/text-highlight.html'>Text Highlight</a></li>
|
|
<li><a class='dropdown-item' href='../elements/tiles.html'>Tiles</a></li>
|
|
<li><a class='dropdown-item' href='../elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
|
|
<li><a class='dropdown-item' href='../elements/typography.html'>Typography</a></li>
|
|
</ul>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</li>
|
|
<!--/.mega-menu-content-->
|
|
</ul>
|
|
<!--/.dropdown-menu -->
|
|
</li>
|
|
</ul>
|
|
<!-- /.navbar-nav -->
|
|
<div class="offcanvas-footer xl:!hidden lg:!hidden">
|
|
<div>
|
|
<a href="mailto:first.last@email.com" class="link-inverse">info@truncgil.com</a>
|
|
<br> 00 (123) 456 78 90 <br>
|
|
<nav class="nav social social-white !mt-4">
|
|
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
|
|
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
|
|
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
|
|
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
|
|
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
|
|
</nav>
|
|
<!-- /.social -->
|
|
</div>
|
|
</div>
|
|
<!-- /.offcanvas-footer -->
|
|
</div>
|
|
<!-- /.offcanvas-body -->
|
|
</div>
|
|
<!-- /.navbar-collapse -->
|
|
<div class="navbar-other w-full !flex !ml-auto">
|
|
<ul class="navbar-nav !flex-row !items-center !ml-auto">
|
|
<li class="nav-item dropdown language-select uppercase group">
|
|
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
|
|
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
|
|
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
|
|
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
|
|
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item hidden xl:block lg:block md:block">
|
|
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] 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 -->
|
|
</header>
|
|
<!-- /header -->
|
|
<section class="wrapper !bg-[#edf2fc]">
|
|
<div class="container pt-10 pb-14 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24 !text-center">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="md:w-9/12 lg:w-7/12 xl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-3">Blocks - Hero</h1>
|
|
<p class="lead xxl:!px-[2.5rem] !leading-[1.65] text-[0.9rem] font-medium">Copy any custom block snippet below and paste it on your page to build your website easily.</p>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container py-12">
|
|
<h2 class="h5">Filter Blocks:</h2>
|
|
<ul class="pl-0 list-none !mb-0">
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='about.html'>About</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='blog.html'>Blog</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='call-to-action.html'>Call to Action</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='clients.html'>Clients</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='contact.html'>Contact</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='facts.html'>Facts</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='faq.html'>FAQ</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='features.html'>Features</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='footer.html'>Footer</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded !text-[#e31e24] pointer-events-none' href='hero.html'>Hero</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='misc.html'>Misc</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='navbar.html'>Navbar</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='portfolio.html'>Portfolio</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='pricing.html'>Pricing</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='process.html'>Process</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='team.html'>Team</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='testimonials.html'>Testimonials</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper !bg-[#ffffff]">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="alert alert-primary !text-[#2c549d] !bg-[#edf2fc] !border-[#2c549d] alert-icon !p-[1rem] !pl-10 !border-0" role="alert"><i class="uil uil-exclamation-circle before:content-['\ead0']"></i> Click on the image to see the live demo of the hero example.</div>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<section id="snippet-1" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-10 xl:pt-14 lg:pt-14 md:pt-14">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo1.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero1.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-1">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-1" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper bg-gradient-primary">
|
|
<div class="container pt-10 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] pb-8 !text-center">
|
|
<div class="row xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
|
|
<div class="lg:w-7/12 flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<figure><img class="w-auto" src="./assets/img/illustrations/i2.png" srcset="./assets/img/illustrations/i2@2x.png 2x" alt="" /></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="md:w-10/12 flex-[0_0_auto] !px-[15px] max-w-full md:!ml-[8.33333333%] lg:!ml-0 lg:w-5/12 flex-[0_0_auto] !px-[15px] max-w-full text-center lg:text-left xl:text-left">
|
|
<h1 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-5 md:mx-[-1.25rem] lg:mx-0">Grow Your Business with Our Solutions.</h1>
|
|
<p class="lead text-[1rem] !mb-7">We help our clients to increase their website traffic, rankings and visibility in search results.</p>
|
|
<span><a class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] me-2">Try It For Free</a></span>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-2" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo2.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero2.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-2">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-2" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper !bg-[#ffffff] ">
|
|
<div class="container pt-8 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem]">
|
|
<div class="row xl:mx-0 lg:mx-0 xl:mx-[-20px] !mt-[-50px] xl:!mt-[-80px] lg:!mt-[-80px] md:!mt-[-80px] xl:!mt-0 lg:!mt-0 !mb-7 md:!mb-10 lg:!mb-24 items-center">
|
|
<div class="md:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full md:!ml-[16.66666667%] lg:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full lg:!ml-[8.33333333%] !relative lg:!order-2" data-cue="zoomIn">
|
|
<div class="shape bg-dot primary rellax !w-[7rem] !h-[9rem]" data-rellax-speed="1" style="top: -1.7rem; left: -1.5rem;"></div>
|
|
<div class="shape rounded !bg-[#edf2fc] rellax md:block" data-rellax-speed="0" style="bottom: -1.8rem; right: -0.8rem; width: 85%; height: 90%;"></div>
|
|
<figure class="rounded"><img src="./assets/img/photos/about7.jpg" srcset="./assets/img/photos/about7@2x.jpg 2x" alt="" /></figure>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="lg:w-5/12 flex-[0_0_auto] !px-[15px] max-w-full xl:!mt-[-2.5rem] lg:!mt-[-2.5rem] text-center lg:text-left xl:text-left" data-cues="slideInDown" data-group="page-title" data-delay="600">
|
|
<h1 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-5">We bring solutions to make life easier for our customers.</h1>
|
|
<p class="lead text-[20px] leading-normal !mb-7 md:!px-10 lg:!px-0">We have considered our solutions to support every stage of your growth.</p>
|
|
<div class="flex justify-center lg:!justify-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="900">
|
|
<span><a href="#" class="btn btn-lg btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] me-2">Explore Now</a></span>
|
|
<span><a href="#" class="btn btn-lg btn-outline-primary !rounded-[50rem]">Free Trial</a></span>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-3" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo3.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero3.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-3">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-3" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper bg-[#21262c] opacity-100 angled lower-start">
|
|
<div class="container pt-7 xl:pt-12 lg:pt-12 md:pt-12 pb-8">
|
|
<div class="row mx-0 !mt-[-50px] items-center">
|
|
<div class="lg:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full" data-cues="slideInDown" data-group="page-title" data-delay="600">
|
|
<h1 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !text-white !mb-4">Trunçgil focuses on <br /><span class="typer !text-[#e31e24] whitespace-nowrap" data-delay="100" data-words="customer satisfaction,business needs,creative ideas"></span><span class="cursor !text-[#e31e24] " data-owner="typer"></span></h1>
|
|
<p class="lead text-[1.2rem] leading-normal !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-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] rounded">Get Started</a>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="lg:w-5/12 flex-[0_0_auto] !px-[15px] max-w-full lg:!ml-[8.33333333%] !mb-[-8rem]" data-cues="slideInDown">
|
|
<div class="relative">
|
|
<a href="./assets/media/movie.mp4" class="btn btn-circle btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-play ripple !mx-auto !mb-6 absolute" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox><i class="icn-caret-right"></i></a>
|
|
<figure class="rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]"><img src="./assets/img/photos/about13.jpg" srcset="./assets/img/photos/about13@2x.jpg 2x" alt=""></figure>
|
|
</div>
|
|
<!-- /div -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-4" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo4.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero4.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-4">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-4" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper !bg-[#ffffff] !relative min-h-[70vh] lg:!flex items-center">
|
|
<div class="rounded-4-lg-start lg:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full lg:!order-2 lg:!absolute top-0 !right-0 image-wrapper bg-image bg-cover !h-full min-h-[50vh]" data-image-src="./assets/img/photos/about16.jpg">
|
|
</div>
|
|
<!--/column -->
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="lg:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<div class="mt-10 md:!mt-12 xl:!mt-[-2.5rem] lg:!mt-[-2.5rem] px-10 md:!px-12 lg:!pl-0 xl:!pr-16 lg:!pr-16 text-center lg:text-left xl:text-left" data-cues="slideInDown" data-group="page-title" data-delay="600">
|
|
<h1 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-5">Just sit & relax while we take care of your business needs.</h1>
|
|
<p class="lead text-[20px] leading-normal !mb-7 md:!pr-10">We make your spending stress-free for you to have the perfect control.</p>
|
|
<div class="flex justify-center lg:!justify-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="900">
|
|
<span><a href="#" class="btn btn-lg btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] me-2">Explore Now</a></span>
|
|
<span><a href="#" class="btn btn-lg btn-outline-primary !rounded-[50rem]">Contact Us</a></span>
|
|
</div>
|
|
</div>
|
|
<!--/div -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-5" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo5.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero5.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-5">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-5" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper !bg-[#edf2fc]">
|
|
<div class="container pt-10 pb-20 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] xl:pb-40 lg:pb-40 md:pb-40 !text-center">
|
|
<div class="row">
|
|
<div class="md:w-10/12 flex-[0_0_auto] !px-[15px] max-w-full lg:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full xl:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full xxl:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-16" data-cues="slideInDown" data-group="page-title">
|
|
<h1 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-4">Staying on top of your bills never been this easy</h1>
|
|
<p class="lead text-[1rem] xl:!px-14 xxl:!px-6 !mb-7">Easily achieve your saving goals. Have all your recurring and one time expenses and incomes in one place.</p>
|
|
<div class="flex justify-center" data-cues="slideInDown" data-group="page-title-buttons" data-delay="600">
|
|
<span><a class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] rounded mx-1">Get Started</a></span>
|
|
<span><a class="btn btn-green !text-white !bg-[#45c4a0] border-[#45c4a0] hover:text-white hover:bg-[#45c4a0] hover:!border-[#45c4a0] active:text-white active:bg-[#45c4a0] active:border-[#45c4a0] disabled:text-white disabled:bg-[#45c4a0] disabled:border-[#45c4a0] rounded mx-1">Free Trial</a></span>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper !bg-[#ffffff] ">
|
|
<div class="container pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24 lg:!mb-60 xl:!mb-80">
|
|
<div class="row mx-0 !mb-24 !mb-mb-40">
|
|
<div class="w-9/12 flex-[0_0_auto] !px-[15px] max-w-full sm:w-10/12 flex-[0_0_auto] !px-[15px] max-w-full lg:w-9/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mt-[-5rem] md:!mt-[-10rem]" data-cues data-group="images" data-delay="1500">
|
|
<img class="max-w-full h-auto !mx-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" data-cue="slideInUp" src="./assets/img/photos/sa1.jpg" srcset="./assets/img/photos/sa1@2x.jpg 2x" alt="" />
|
|
<img class="absolute rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" data-cue="slideInRight" src="./assets/img/photos/sa2.jpg" srcset="./assets/img/photos/sa2@2x.jpg 2x" style="top: 20%; right:-10%; max-width:30%; height: auto;" alt="" />
|
|
<img class="absolute rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" data-cue="slideInLeft" src="./assets/img/photos/sa3.jpg" srcset="./assets/img/photos/sa3@2x.jpg 2x" style="top: 10%; left:-10%; max-width:30%; height: auto;" alt="" />
|
|
<img class="absolute rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" data-cue="slideInLeft" src="./assets/img/photos/sa4.jpg" srcset="./assets/img/photos/sa4@2x.jpg 2x" style="bottom: 10%; left:-13%; max-width:30%; height: auto;" alt="" />
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-6" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo6.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero6.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-6">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-6" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper !bg-[#edf2fc]">
|
|
<div class="container pt-5 pb-20 lg:!py-28 xl:!py-36 xl:pb-40 !relative">
|
|
<img class="lg:!absolute w-full flex-[0_0_auto] !px-[15px] max-w-full lg:w-10/12 flex-[0_0_auto] !px-[15px] max-w-full xl:w-11/12 flex-[0_0_auto] !px-[15px] max-w-full xxl:w-10/12 flex-[0_0_auto] !px-[15px] max-w-full lg:!px-5 xl:!px-0 !ml-[-1.25rem] sm:!ml-[-2.5rem] md:!ml-[-2.5rem] lg:!ml-0 md:!mb-4 lg:!mb-0" src="./assets/img/photos/devices.png" srcset="./assets/img/photos/devices@2x.png 2x" data-cue="fadeIn" alt="" style="top: -1%; left: -21%;" />
|
|
<div class="row mx-0 items-center">
|
|
<div class="md:w-10/12 flex-[0_0_auto] !px-[15px] max-w-full md:!ml-[8.33333333%] lg:w-5/12 flex-[0_0_auto] !px-[15px] max-w-full lg:!ml-[58.33333333%] xxl:!ml-[50%] xxl:!pl-14 md:!mt-[-2.25rem] text-center lg:text-left xl:text-left" data-cues="slideInDown" data-group="page-title" data-delay="600">
|
|
<h1 class="text-[calc(1.345rem_+_1.14vw)] font-bold !leading-[1.2] xl:!text-[2.2rem] !mb-4 sm:mx-[-0.5rem] md:mx-0">Get all of your steps, exercise, sleep and meds in one place.</h1>
|
|
<p class="lead text-[1rem] !mb-7 md:!px-10 lg:!px-0">Trunçgil is now available to download from both the App Store and Google Play Store.</p>
|
|
<div class="flex justify-center lg:!justify-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="900">
|
|
<span><a class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-icon btn-icon-start rounded me-2"><i class="uil uil-apple"></i> App Store</a></span>
|
|
<span><a class="btn btn-green !text-white !bg-[#45c4a0] border-[#45c4a0] hover:text-white hover:bg-[#45c4a0] hover:!border-[#45c4a0] active:text-white active:bg-[#45c4a0] active:border-[#45c4a0] disabled:text-white disabled:bg-[#45c4a0] disabled:border-[#45c4a0] btn-icon btn-icon-start rounded"><i class="uil uil-google-play"></i> Google Play</a></span>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-7" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo7.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero7.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-7">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-7" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper bg-gradient-primary">
|
|
<div class="container py-[4.5rem] xl:pt-20 lg:pt-20 md:pt-20 xl:pb-32 lg:pb-32 md:pb-32">
|
|
<div class="row !text-center">
|
|
<div class="lg:w-9/12 flex-[0_0_auto] !px-[15px] max-w-full xxl:w-7/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto" data-cues="zoomIn" data-group="welcome" data-interval="-200">
|
|
<h2 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-4">Creative. Smart. Awesome.</h2>
|
|
<p class="lead text-[1.2rem] leading-normal md:!px-5 xl:!px-20 xxl:!px-10 !mb-7">We are an award winning web & mobile design agency that strongly believes in the power of creative ideas.</p>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="flex justify-center" data-cues="slideInDown" data-group="join" data-delay="900">
|
|
<span><a class="btn btn-lg btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] mx-1">See Projects</a></span>
|
|
<span><a class="btn btn-lg btn-outline-primary !rounded-[50rem] mx-1">Contact Us</a></span>
|
|
</div>
|
|
<!-- /div -->
|
|
<div class="row !mt-12" data-cue="fadeIn" data-delay="1600">
|
|
<div class="lg:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><img class="max-w-full h-auto" src="./assets/img/illustrations/i12.png" srcset="./assets/img/illustrations/i12@2x.png 2x" alt=""></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-8" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo8.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero8.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-8">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-8" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper !bg-[#ffffff] ">
|
|
<div class="container">
|
|
<div class="card !bg-[#edf2fc] !rounded-[0.8rem] !mt-2 !mb-16 md:!mb-[7rem]">
|
|
<div class="card-body md:!p-10 xl:!py-12 xl:!px-20">
|
|
<div class="row xl:mx-[-20px] lg:mx-[-20px] xl:mx-0 !mt-[-50px] items-center">
|
|
<div class="lg:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full lg:!order-2 flex !relative">
|
|
<img class="max-w-full h-auto !ml-auto !mx-auto lg:!mr-8" src="./assets/img/photos/co3.png" srcset="./assets/img/photos/co3@2x.png 2x" alt="" data-cue="fadeIn">
|
|
<div data-cue="slideInRight" data-delay="300">
|
|
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] absolute" style="bottom: 10%; right: -3%;">
|
|
<div class="card-body py-4 px-5">
|
|
<div class="flex flex-row items-center">
|
|
<div>
|
|
<div class="icon btn btn-circle btn-md btn-soft-primary pointer-events-none !mx-auto !mr-3"> <i class="uil uil-users-alt"></i> </div>
|
|
</div>
|
|
<div>
|
|
<h3 class="counter !mb-0 whitespace-nowrap">25000+</h3>
|
|
<p class="text-[0.7rem] leading-normal !mb-0 whitespace-nowrap">Happy Clients</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/div -->
|
|
</div>
|
|
<!--/column -->
|
|
<div class="lg:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full text-center lg:text-left xl:text-left" data-cues="slideInDown" data-group="page-title" data-delay="600">
|
|
<h1 class="text-[calc(1.345rem_+_1.14vw)] font-bold !leading-[1.2] xl:!text-[2.2rem] !mb-5">Crafting project specific solutions with expertise.</h1>
|
|
<p class="lead text-[1rem] leading-normal !mb-7 xl:!pr-10">We're a company that focuses on establishing long-term relationships with customers.</p>
|
|
<div class="flex justify-center lg:!justify-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="900">
|
|
<span><a href="#" class="btn btn-lg btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] me-2">Explore Now</a></span>
|
|
<span><a href="#" class="btn btn-lg btn-outline-primary !rounded-[50rem]">Contact Us</a></span>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-9" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo9.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero9.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-9">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-9" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper !bg-[#edf2fc]">
|
|
<div class="container pt-10 pb-14 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="row xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] items-center">
|
|
<div class="md:w-10/12 flex-[0_0_auto] !px-[15px] max-w-full md:!ml-[8.33333333%] lg:!ml-0 lg:w-5/12 flex-[0_0_auto] !px-[15px] max-w-full lg:!mt-[-.5rem] xl:!mt-[-.5rem] text-center lg:text-left xl:text-left order-2 lg:!order-none" data-cues="slideInDown" data-group="page-title" data-delay="600">
|
|
<h1 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-5 md:mx-10 lg:mx-0">Trunçgil is effortless and powerful with <br /><span class="typer !text-[#e31e24] whitespace-nowrap" data-delay="100" data-words="easy usage,fast transactions,secure payments"></span><span class="cursor !text-[#e31e24] " data-owner="typer"></span></h1>
|
|
<p class="lead text-[1rem] !mb-7">Achieve your saving goals. Have all your recurring and one time expenses and incomes in one place.</p>
|
|
<div class="flex justify-center lg:!justify-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="900">
|
|
<span><a class="btn btn-lg btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] rounded me-2">Get Started</a></span>
|
|
<span><a class="btn btn-lg btn-green !text-white !bg-[#45c4a0] border-[#45c4a0] hover:text-white hover:bg-[#45c4a0] hover:!border-[#45c4a0] active:text-white active:bg-[#45c4a0] active:border-[#45c4a0] disabled:text-white disabled:bg-[#45c4a0] disabled:border-[#45c4a0] rounded">Free Trial</a></span>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="lg:w-7/12 flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<div class="row">
|
|
<div class="w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !ml-[8.33333333%] lg:!ml-0 lg:w-4/12 flex-[0_0_auto] !px-[15px] max-w-full flex flex-col" data-cues="zoomIn" data-group="col-start" data-delay="300">
|
|
<div class="ml-auto !mt-auto"><img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="./assets/img/photos/sa20.jpg" srcset="./assets/img/photos/sa20@2x.jpg 2x" alt="" /></div>
|
|
<div class="ml-auto !mt-5 !mb-10"><img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="./assets/img/photos/sa18.jpg" srcset="./assets/img/photos/sa18@2x.jpg 2x" alt="" /></div>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="w-4/12 lg:w-5/12 flex-[0_0_auto] !px-[15px] max-w-full" data-cue="zoomIn">
|
|
<div><img class="w-full max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="./assets/img/photos/sa16.jpg" srcset="./assets/img/photos/sa16@2x.jpg 2x" alt="" /></div>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="w-3/12 flex-[0_0_auto] !px-[15px] max-w-full flex flex-col" data-cues="zoomIn" data-group="col-end" data-delay="300">
|
|
<div class="mt-auto"><img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="./assets/img/photos/sa21.jpg" srcset="./assets/img/photos/sa21@2x.jpg 2x" alt="" /></div>
|
|
<div class="mt-5"><img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="./assets/img/photos/sa19.jpg" srcset="./assets/img/photos/sa19@2x.jpg 2x" alt="" /></div>
|
|
<div class="mt-5 !mb-10"><img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="./assets/img/photos/sa17.jpg" srcset="./assets/img/photos/sa17@2x.jpg 2x" alt="" /></div>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-10" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo10.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero10.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-10">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-10" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper !bg-[#ffffff] ">
|
|
<div class="container pt-12 xl:pt-16 lg:pt-16 md:pt-16 pb-12 xl:pb-36 lg:pb-36 md:pb-36 xl:pb-60 lg:pb-60 !text-center">
|
|
<div class="row">
|
|
<div class="lg:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full xl:w-7/12 flex-[0_0_auto] !px-[15px] max-w-full xxl:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto" data-cues="slideInDown" data-group="page-title">
|
|
<h1 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] xl:!text-[3rem] !text-[calc(1.425rem_+_2.1vw)] !mb-4 md:!px-20 lg:!px-0">We bring solutions to make life easier.</h1>
|
|
<p class="lead text-[1.2rem] leading-normal !mb-7 md:mx-16 lg:mx-10">We are a creative company that focuses on long term relationships with customers.</p>
|
|
<div>
|
|
<a class="btn btn-lg btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] rounded !mb-5">Read More</a>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper bg-[#21262c] opacity-100 ">
|
|
<div class="container pt-[4.5rem] xl:pt-24 lg:pt-24 md:pt-24 pb-9 xl:pb-12 lg:pb-12 md:pb-12">
|
|
<figure class="rounded xl:!mt-[-12.5rem] lg:!mt-[-12.5rem] md:!mt-[-12.5rem] xl:!mt-[-17.5rem] lg:!mt-[-17.5rem] !mb-[4.5rem]" data-cue="slideInDown" data-delay="900"><img src="./assets/img/photos/about15.jpg" srcset="./assets/img/photos/about15@2x.jpg 2x" alt="" /></figure>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-11" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo11.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero11.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-11">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-11" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-400 bg-content !text-white" data-image-src="./assets/img/photos/bg4.jpg">
|
|
<div class="container pt-32 pb-24" style="z-index: 5; position:relative">
|
|
<div class="row mx-0 !mt-[-70px] items-center">
|
|
<div class="md:w-10/12 flex-[0_0_auto] !px-[15px] max-w-full md:!ml-[8.33333333%] lg:!ml-0 lg:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full content text-center lg:text-left xl:text-left" data-cues="slideInDown" data-group="page-title" data-delay="600">
|
|
<h1 class="text-[calc(1.345rem_+_1.14vw)] font-bold !leading-[1.2] xl:!text-[2.2rem] !mb-5 !text-white">Crafting project specific solutions with expertise.</h1>
|
|
<p class="lead text-[1rem] leading-normal !mb-7 xl:!pr-10">We’re a creative company that focuses on establishing long-term relationships with customers.</p>
|
|
<div class="flex justify-center lg:!justify-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="900">
|
|
<span><a href="#" class="btn btn-lg btn-white !rounded-[50rem] me-2">Explore Now</a></span>
|
|
<span><a href="#" class="btn btn-lg btn-outline-white !text-white bg-[#ffffff] border-white hover:!text-[#343f52] hover:bg-[#ffffff] hover:border-white focus:shadow-[rgba(255,255,255,1)] active:!text-[#343f52] active:bg-[#ffffff] active:border-white disabled:text-white disabled:bg-transparent disabled:border-white !rounded-[50rem]">Contact Us</a></span>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="lg:w-5/12 flex-[0_0_auto] !px-[15px] max-w-full lg:!ml-[8.33333333%]">
|
|
<div class="swiper-container dots-over !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" data-margin="5" data-nav="true" data-dots="true">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide"><img src="./assets/img/photos/about21.jpg" srcset="./assets/img/photos/about21@2x.jpg 2x" class="rounded" alt="" /></div>
|
|
<div class="swiper-slide"><a href="./assets/media/movie.mp4" class="btn btn-circle btn-white btn-play ripple !mx-auto !mb-5 absolute" style="top:50%; left: 50%; transform: translate(-50%,-50%); z-index:3;" data-glightbox data-gallery="hero"><i class="icn-caret-right"></i></a><img src="./assets/img/photos/about22.jpg" srcset="./assets/img/photos/about22@2x.jpg 2x" class="rounded" alt="" /></div>
|
|
<div class="swiper-slide"><img src="./assets/img/photos/about23.jpg" srcset="./assets/img/photos/about23@2x.jpg 2x" class="rounded" alt="" /></div>
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!--/.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-12" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo12.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero12.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-12">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-12" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper !bg-[#edf2fc]">
|
|
<div class="container pt-10 pb-20 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] xl:pb-40 lg:pb-40 md:pb-40">
|
|
<div class="row xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] !mb-5 items-center">
|
|
<div class="md:w-10/12 flex-[0_0_auto] !px-[15px] max-w-full md:!ml-[8.33333333%] lg:!ml-0 lg:w-5/12 flex-[0_0_auto] !px-[15px] max-w-full text-center lg:text-left xl:text-left order-2 lg:!order-none" data-cues="slideInDown" data-group="page-title" data-delay="600">
|
|
<h1 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-5 md:mx-[-1.25rem] lg:mx-0">Creative. Smart. Awesome.</h1>
|
|
<p class="lead text-[1rem] !mb-7">We specialize in web, mobile and identity design. We love to turn ideas into beautiful things.</p>
|
|
<div class="flex justify-center lg:!justify-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="900">
|
|
<span><a class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] rounded me-2">See Projects</a></span>
|
|
<span><a class="btn btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758] active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] rounded">Learn More</a></span>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="lg:w-7/12 flex-[0_0_auto] !px-[15px] max-w-full" data-cue="slideInDown">
|
|
<figure><img class="w-auto" src="./assets/img/illustrations/i6.png" srcset="./assets/img/illustrations/i6@2x.png 2x" alt="" /></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper !bg-[#ffffff] ">
|
|
<div class="container pt-[4.5rem] xl:pt-24 lg:pt-24 md:pt-24 pb-9 xl:pb-12 lg:pb-12 md:pb-12 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="row md:mx-[-12.5px] !mt-[-25px] !mt-[-8rem] xl:!mt-[-12.5rem] lg:!mt-[-12.5rem] md:!mt-[-12.5rem] !mb-[4.5rem] md:!mb-[7rem]">
|
|
<div class="md:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full xl:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
|
<div class="card-body">
|
|
<img src="./assets/img/icons/lineal/browser.svg" class="svg-inject icon-svg icon-svg-md !text-[#fab758] !mb-3" alt="" />
|
|
<h4>Content Marketing</h4>
|
|
<p class="mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>
|
|
<a href="#" class="more hover link-yellow">Learn More</a>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
<div class="md:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full xl:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
|
<div class="card-body">
|
|
<img src="./assets/img/icons/lineal/chat-2.svg" class="svg-inject icon-svg icon-svg-md !text-[#45c4a0] !mb-3" alt="" />
|
|
<h4>Social Engagement</h4>
|
|
<p class="mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>
|
|
<a href="#" class="more hover link-green">Learn More</a>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
<div class="md:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full xl:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
|
<div class="card-body">
|
|
<img src="./assets/img/icons/lineal/id-card.svg" class="svg-inject icon-svg icon-svg-md !text-[#f78b77] !mb-3" alt="" />
|
|
<h4>Identity & Branding</h4>
|
|
<p class="mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>
|
|
<a href="#" class="more hover link-orange">Learn More</a>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
<div class="md:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full xl:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
|
<div class="card-body">
|
|
<img src="./assets/img/icons/lineal/gift.svg" class="svg-inject icon-svg icon-svg-md !text-[#e31e24] !mb-3" alt="" />
|
|
<h4>Product Design</h4>
|
|
<p class="mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>
|
|
<a href="#" class="more hover link-blue">Learn More</a>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-13" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo13.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero13.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-13">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-13" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-300 !text-white" data-image-src="./assets/img/photos/bg2.jpg">
|
|
<div class="container pt-28 pb-36 xl:pt-36 lg:pt-36 md:pt-36 xl:pb-40 lg:pb-40 md:pb-40 !text-center">
|
|
<div class="row !mb-12">
|
|
<div class="md:w-9/12 flex-[0_0_auto] !px-[15px] max-w-full lg:w-7/12 flex-[0_0_auto] !px-[15px] max-w-full xxl:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto" data-cues="zoomIn" data-group="page-title" data-interval="-200">
|
|
<h2 class="h6 uppercase !tracking-[0.05rem] !text-white !mb-5">Hello! This is Trunçgil</h2>
|
|
<h3 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !text-white !mb-7">We bring rapid solutions for your business</h3>
|
|
<a href="./assets/media/movie.mp4" class="btn btn-circle btn-white btn-play ripple !mx-auto !mb-5" data-glightbox><i class="icn-caret-right"></i></a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper !bg-[#ffffff] angled upper-end lower-end">
|
|
<div class="container pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24">
|
|
<div class="row">
|
|
<div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[-10rem]">
|
|
<figure class="rounded"><img src="./assets/img/photos/about5.jpg" srcset="./assets/img/photos/about5@2x.jpg 2x" alt="" /></figure>
|
|
<div class="row" data-cue="slideInUp">
|
|
<div class="xl:w-10/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-300 !text-white !mt-[-1.25rem] lg:!mt-0 xl:-translate-y-2/4 lg:-translate-y-2/4 !mb-lg-n50p border-radius-lg-top" data-image-src="./assets/img/photos/bg2.jpg">
|
|
<div class="card-body p-9 xl:!p-10">
|
|
<div class="row items-center counter-wrapper !mt-[-20px] !text-center">
|
|
<div class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full lg:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<h3 class="counter counter-lg !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] leading-none !mb-2 xl:!text-[2.2rem] !text-white">7518</h3>
|
|
<p>Completed Projects</p>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full lg:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<h3 class="counter counter-lg !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] leading-none !mb-2 xl:!text-[2.2rem] !text-white">3472</h3>
|
|
<p>Satisfied Customers</p>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full lg:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<h3 class="counter counter-lg !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] leading-none !mb-2 xl:!text-[2.2rem] !text-white">2184</h3>
|
|
<p>Expert Employees</p>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full lg:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<h3 class="counter counter-lg !text-[calc(1.345rem_+_1.14vw)] !tracking-[normal] leading-none !mb-2 xl:!text-[2.2rem] !text-white">4523</h3>
|
|
<p>Awards Won</p>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-14" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo14.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero14.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-14">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-14" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper !bg-[#edf2fc]">
|
|
<div class="container pt-10 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] pb-[4.5rem] xl:pb-0 lg:pb-0 md:pb-0">
|
|
<div class="row md:mx-[-20px] xl:mx-[-35px] lg:mx-[-35px] !mt-[-15px] xl:!mt-0 lg:!mt-0 !mb-16">
|
|
<div class="lg:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<h1 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] xl:!text-[3.3rem] !text-[calc(1.455rem_+_2.46vw)] !leading-[1.05] !mb-0">We bring rapid solutions for your business.</h1>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="lg:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<p class="lead text-[20px] my-3">We are an award winning branding design agency that strongly believes in the power of creative ideas.</p>
|
|
<a href="#" class="more hover">Learn More</a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="relative">
|
|
<div class="shape bg-dot primary rellax !w-[7rem] !h-[12.5rem]" data-rellax-speed="1" style="top: -2.5rem; right: -2.7rem;"></div>
|
|
<figure class="rounded md:!mb-[-10rem]"><img src="./assets/img/photos/about18.jpg" srcset="./assets/img/photos/about18@2x.jpg 2x" alt="" /></figure>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-15" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo15.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero15.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-15">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-15" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><div class="swiper-container swiper-hero dots-over" data-margin="0" data-autoplay="true" data-autoplaytime="5000" data-nav="true" data-dots="true" data-items="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide !h-full bg-overlay bg-overlay-400 bg-[#21262c] opacity-100 " style="background-image:url(./assets/img/photos/bg7.jpg);">
|
|
<div class="container !h-full">
|
|
<div class="row !h-full">
|
|
<div class="md:w-10/12 flex-[0_0_auto] !px-[15px] max-w-full md:!ml-[8.33333333%] lg:w-7/12 flex-[0_0_auto] !px-[15px] max-w-full lg:!ml-0 xl:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full xxl:w-5/12 flex-[0_0_auto] !px-[15px] max-w-full text-center lg:text-left xl:text-left justify-center self-center items-start">
|
|
<h2 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.8rem] !text-[calc(1.405rem_+_1.86vw)] !mb-4 !text-white animate__animated animate__slideInDown animate__delay-1s">We bring solutions to make life easier.</h2>
|
|
<p class="lead text-[1.15rem] leading-normal !mb-7 !text-white animate__animated animate__slideInRight animate__delay-2s">We are a creative company that focuses on long term relationships with customers.</p>
|
|
<div class="animate__animated animate__slideInUp animate__delay-3s"><a href="#" class="btn btn-lg btn-outline-white !text-white bg-[#ffffff] border-white hover:!text-[#343f52] hover:bg-[#ffffff] hover:border-white focus:shadow-[rgba(255,255,255,1)] active:!text-[#343f52] active:bg-[#ffffff] active:border-white disabled:text-white disabled:bg-transparent disabled:border-white !rounded-[50rem]">Read More</a></div>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!--/.container -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide !h-full bg-overlay bg-overlay-400 bg-[#21262c] opacity-100 " style="background-image:url(./assets/img/photos/bg8.jpg);">
|
|
<div class="container !h-full">
|
|
<div class="row !h-full">
|
|
<div class="md:w-11/12 flex-[0_0_auto] !px-[15px] max-w-full lg:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full xl:w-7/12 flex-[0_0_auto] !px-[15px] max-w-full xxl:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center justify-center self-center">
|
|
<h2 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.8rem] !text-[calc(1.405rem_+_1.86vw)] !mb-4 !text-white animate__animated animate__slideInDown animate__delay-1s">We are trusted by over a million customers.</h2>
|
|
<p class="lead text-[1.15rem] leading-normal !mb-7 !text-white animate__animated animate__slideInRight animate__delay-2s">Here a few reasons why our customers choose us.</p>
|
|
<div class="animate__animated animate__slideInUp animate__delay-3s"><a href="./assets/media/movie.mp4" class="btn btn-circle btn-white btn-play ripple !mx-auto !mb-5" data-glightbox><i class="icn-caret-right"></i></a></div>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!--/.container -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide !h-full bg-overlay bg-overlay-400 bg-[#21262c] opacity-100 " style="background-image:url(./assets/img/photos/bg9.jpg);">
|
|
<div class="container !h-full">
|
|
<div class="row !h-full">
|
|
<div class="md:w-10/12 flex-[0_0_auto] !px-[15px] max-w-full md:!ml-[8.33333333%] lg:w-7/12 flex-[0_0_auto] !px-[15px] max-w-full lg:!ml-[41.66666667%] xl:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[50%] xxl:w-5/12 flex-[0_0_auto] !px-[15px] max-w-full xxl:!ml-[50%] text-center lg:text-left xl:text-left justify-center self-center items-start">
|
|
<h2 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.8rem] !text-[calc(1.405rem_+_1.86vw)] !mb-4 !text-white animate__animated animate__slideInDown animate__delay-1s">Just sit and relax.</h2>
|
|
<p class="lead text-[1.15rem] leading-normal !mb-7 !text-white animate__animated animate__slideInRight animate__delay-2s">We make sure your spending is stress free so that you can have the perfect control.</p>
|
|
<div class="animate__animated animate__slideInUp animate__delay-3s"><a href="#" class="btn btn-lg btn-outline-white !text-white bg-[#ffffff] border-white hover:!text-[#343f52] hover:bg-[#ffffff] hover:border-white focus:shadow-[rgba(255,255,255,1)] active:!text-[#343f52] active:bg-[#ffffff] active:border-white disabled:text-white disabled:bg-transparent disabled:border-white !rounded-[50rem]">Contact Us</a></div>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!--/.container -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-16" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo16.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero16.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-16">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-16" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper bg-[rgba(246,247,249,1)] ">
|
|
<div class="container pt-14 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24">
|
|
<div class="row !mt-[-50px] xl:!mt-[-80px] lg:!mt-[-80px] md:!mt-[-80px] xl:!mt-0 lg:!mt-0 items-center">
|
|
<div class="md:w-8/12 lg:w-5/12 flex-[0_0_auto] !px-[15px] max-w-full flex !relative !mx-auto" data-cues="slideInDown" data-group="header">
|
|
<div class="img-mask mask-1"><img src="./assets/img/photos/about17.jpg" srcset="./assets/img/photos/about17@2x.jpg 2x" alt="" /></div>
|
|
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] absolute" style="bottom: 10%; right: 2%;">
|
|
<div class="card-body py-4 px-5">
|
|
<div class="flex flex-row items-center">
|
|
<div>
|
|
<img src="./assets/img/icons/lineal/check.svg" class="svg-inject icon-svg icon-svg-sm !text-[#e31e24] !mx-auto !mr-3" alt="" />
|
|
</div>
|
|
<div>
|
|
<h3 class="counter !mb-0 whitespace-nowrap">250+</h3>
|
|
<p class="text-[0.7rem] leading-normal !mb-0 whitespace-nowrap">Projects Done</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
<div class="lg:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full lg:!ml-[8.33333333%] xxl:w-5/12 flex-[0_0_auto] !px-[15px] max-w-full text-center lg:text-left xl:text-left" data-cues="slideInDown" data-group="page-title" data-delay="600">
|
|
<h1 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-5">I'm User Interface Designer & Developer.</h1>
|
|
<p class="lead text-[20px] leading-normal !mb-7 md:!px-10 lg:!px-0">Hello! I'm Julia, a freelance user interface designer & developer based in London. I’m very passionate about the work that I do.</p>
|
|
<div class="flex justify-center lg:!justify-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="900">
|
|
<span><a href="#" class="btn btn-lg btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] me-2">See My Works</a></span>
|
|
<span><a href="#" class="btn btn-lg btn-outline-primary !rounded-[50rem]">Contact Me</a></span>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-17" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo17.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero17.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-17">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-17" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper bg-[rgba(246,247,249,1)] ">
|
|
<div class="container pt-14 xl:pt-24 lg:pt-24 md:pt-24 !text-center">
|
|
<div class="row">
|
|
<div class="lg:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full xxl:w-7/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center" data-cues="slideInDown" data-group="page-title" data-delay="600">
|
|
<h2 class="text-[0.8rem] uppercase !tracking-[0.05rem] !text-[#343f52] !mb-4">Hello! This is Trunçgil</h2>
|
|
<h1 class="xl:!text-[2.9rem] !text-[calc(1.415rem_+_1.98vw)] !leading-[1.2] font-bold !mb-7">We bring rapid solutions for your business.</h1>
|
|
<div class="flex justify-center" data-cues="slideInDown" data-group="page-title-buttons" data-delay="900">
|
|
<span><a href="#" class="btn btn-lg btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] me-2">Explore Now</a></span>
|
|
<span><a href="#" class="btn btn-lg btn-outline-primary !rounded-[50rem]">Contact Us</a></span>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<figure class="absoute" style="bottom: 0; left: 0; z-index: 2;"><img src="./assets/img/photos/bg11.jpg" alt="" /></figure>
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-18" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo18.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero18.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-18">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-18" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper !bg-[#ffffff] ">
|
|
<div class="container-card">
|
|
<div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-light-500 !mt-2 !mb-5" data-image-src="./assets/img/photos/bg22.png">
|
|
<div class="card-body py-[4.5rem] px-0">
|
|
<div class="container">
|
|
<div class="row md:mx-[-20px] xl:mx-[-35px] !mt-[-50px] items-center text-center lg:text-left xl:text-left">
|
|
<div class="lg:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full" data-cues="slideInDown" data-group="page-title" data-delay="900">
|
|
<h1 class="text-[calc(1.345rem_+_1.14vw)] font-bold !leading-[1.2] xl:!text-[2.2rem] !mb-4 xl:!mr-5 xxl:!mr-0">Networking <span class="text-gradient gradient-1">solutions</span> for worldwide communication</h1>
|
|
<p class="lead text-[1.15rem] leading-normal !mb-7 xxl:!pr-20">We're a company that focuses on establishing long-term relationships with customers.</p>
|
|
<a href="#" class="btn btn-lg btn-gradient gradient-1 rounded">Explore Now</a>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="lg:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<img class="max-w-full h-auto !mb-[-8rem]" src="./assets/img/illustrations/3d6.png" srcset="./assets/img/illustrations/3d6@2x.png 2x" data-cue="fadeIn" data-delay="300" alt="" />
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.container-card -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-19" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo19.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero19.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-19">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-19" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper image-wrapper bg-image bg-overlay bg-overlay-300" data-image-src="./assets/img/photos/bg16.png">
|
|
<div class="container pt-28 pb-36 xl:pt-32 lg:pt-32 md:pt-32 xl:pb-28 lg:pb-28 md:pb-28 !text-center">
|
|
<div class="row">
|
|
<div class="lg:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full xl:w-7/12 flex-[0_0_auto] !px-[15px] max-w-full xxl:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto" data-cues="slideInDown" data-group="page-title">
|
|
<h1 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !text-white xl:!text-[3rem] !text-[calc(1.425rem_+_2.1vw)] !mb-4 md:!px-20 lg:!px-0">We bring solutions to make life <span class=" !relative z-[1] after:content-[''] after:absolute after:z-[-1] after:block after:[background-size:100%_100%] after:bg-no-repeat after:bg-bottom after:bottom-[-0.1em] after:w-[110%] after:h-[0.3em] after:-translate-x-2/4 after:left-2/4 style-2 yellow">easier</span></h1>
|
|
<p class="lead text-[1.2rem] !text-white leading-normal !mb-7 md:mx-16 lg:mx-10">We are a creative company that focuses on long term relationships with customers.</p>
|
|
<div>
|
|
<a class="btn btn-white rounded !mb-10 xxl:!mb-5">Read More</a>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="overflow-hidden">
|
|
<div class="divider !text-[#fefefe] mx-[-0.5rem]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 60"><path fill="currentColor" d="M0,0V60H1440V0A5771,5771,0,0,1,0,0Z"/></svg>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper !bg-[#ffffff] ">
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="row md:mx-[-12.5px] !mt-[-25px] !mt-[-9rem]">
|
|
<div class="md:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full xl:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
|
<div class="card-body">
|
|
<img src="./assets/img/icons/solid/edit.svg" class="svg-inject icon-svg icon-svg-sm solid-mono !text-[#e668b3] !mb-3" alt="" />
|
|
<h4>Content Marketing</h4>
|
|
<p class="mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>
|
|
<a href="#" class="more hover link-fuchsia">Learn More</a>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
<div class="md:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full xl:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
|
<div class="card-body">
|
|
<img src="./assets/img/icons/solid/team.svg" class="svg-inject icon-svg icon-svg-sm solid-mono !text-[#a07cc5] !mb-3" alt="" />
|
|
<h4>Social Engagement</h4>
|
|
<p class="mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>
|
|
<a href="#" class="more hover link-violet">Learn More</a>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
<div class="md:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full xl:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
|
<div class="card-body">
|
|
<img src="./assets/img/icons/solid/lamp.svg" class="svg-inject icon-svg icon-svg-sm solid-mono !text-[#f78b77] !mb-3" alt="" />
|
|
<h4>Identity & Branding</h4>
|
|
<p class="mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>
|
|
<a href="#" class="more hover link-orange">Learn More</a>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
<div class="md:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full xl:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
|
<div class="card-body">
|
|
<img src="./assets/img/icons/solid/delivery-box.svg" class="svg-inject icon-svg icon-svg-sm solid-mono !text-[#45c4a0] !mb-3" alt="" />
|
|
<h4>Product Design</h4>
|
|
<p class="mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus cras justo.</p>
|
|
<a href="#" class="more hover link-green">Learn More</a>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-20" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo20.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero20.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-20">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-20" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="video-wrapper bg-overlay bg-overlay-gradient px-0 !mt-0 min-h-[80vh]">
|
|
<video poster="./assets/img/photos/movie2.jpg" src="./assets/media/movie2.mp4" autoplay loop playsinline muted></video>
|
|
<div class="video-content">
|
|
<div class="container !text-center">
|
|
<div class="row">
|
|
<div class="lg:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full xl:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !text-white !mx-auto">
|
|
<h1 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] xl:!text-[2.7rem] !text-[calc(1.395rem_+_1.74vw)] !text-white !mb-5"><span class="rotator-zoom">Rapid Solutions,Innovative Thinking,Top-Notch Support</span></h1>
|
|
<p class="lead text-[1.2rem] !mb-0 xxl:!mx-8">We are a digital agency specializing in web design, mobile development and seo optimization.</p>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
</div>
|
|
<!-- /.video-content -->
|
|
</div>
|
|
<!-- /.content-overlay -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-21" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo21.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero21.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-21">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-21" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper !bg-[#ffffff] ">
|
|
<div class="container pt-10 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24 !text-center">
|
|
<div class="row xl:mx-[-35px] lg:mx-[-20px] !mt-[-50px] xl:!mt-0 !mb-[4.5rem] items-center">
|
|
<div class="lg:w-7/12 flex-[0_0_auto] !px-[15px] max-w-full lg:!order-2">
|
|
<figure><img class="img-auto" src="./assets/img/illustrations/i21.png" srcset="./assets/img/illustrations/i21@2x.png 2x" alt="" /></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="md:w-10/12 flex-[0_0_auto] !px-[15px] max-w-full md:!ml-[8.33333333%] lg:!ml-0 lg:w-5/12 flex-[0_0_auto] !px-[15px] max-w-full text-center lg:text-left xl:text-left">
|
|
<h1 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] xl:!text-[2.7rem] !text-[calc(1.395rem_+_1.74vw)] !mb-5 md:mx-[-1.25rem] lg:mx-0 !mt-7">A digital agency <br class="md:!hidden">specializing on <br class="md:!hidden"><span class="rotator-fade !text-[#e31e24] ">mobile design,web design,3D animation</span></h1>
|
|
<p class="lead text-[1rem] !mb-7">We are an award winning design agency that strongly believes in the power of creative ideas.</p>
|
|
<span><a class="btn btn-lg btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] me-2">Get Started</a></span>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<p class="text-center !mb-8">Trusted by over 2K+ clients across the world</p>
|
|
<div class="row row-cols-4 row-cols-md-4 row-cols-lg-7 row-cols-xl-7 !mt-[-50px] !mb-2 flex items-center justify-center">
|
|
<div class="col"><img class="max-w-full h-auto md:!px-3 lg:!px-0 xl:!px-2 xxl:!px-5" src="./assets/img/brands/c1.png" alt="" /></div>
|
|
<div class="col"><img class="max-w-full h-auto md:!px-3 lg:!px-0 xl:!px-2 xxl:!px-5" src="./assets/img/brands/c2.png" alt="" /></div>
|
|
<div class="col"><img class="max-w-full h-auto md:!px-3 lg:!px-0 xl:!px-2 xxl:!px-5" src="./assets/img/brands/c3.png" alt="" /></div>
|
|
<div class="col"><img class="max-w-full h-auto md:!px-3 lg:!px-0 xl:!px-2 xxl:!px-5" src="./assets/img/brands/c4.png" alt="" /></div>
|
|
<div class="col"><img class="max-w-full h-auto md:!px-3 lg:!px-0 xl:!px-2 xxl:!px-5" src="./assets/img/brands/c5.png" alt="" /></div>
|
|
<div class="col"><img class="max-w-full h-auto md:!px-3 lg:!px-0 xl:!px-2 xxl:!px-5" src="./assets/img/brands/c6.png" alt="" /></div>
|
|
<div class="col"><img class="max-w-full h-auto md:!px-3 lg:!px-0 xl:!px-2 xxl:!px-5" src="./assets/img/brands/c7.png" alt="" /></div>
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="overflow-hidden">
|
|
<div class="divider !text-[#edf2fc] mx-[-0.5rem]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100"><path fill="currentColor" d="M1260,1.65c-60-5.07-119.82,2.47-179.83,10.13s-120,11.48-180,9.57-120-7.66-180-6.42c-60,1.63-120,11.21-180,16a1129.52,1129.52,0,0,1-180,0c-60-4.78-120-14.36-180-19.14S60,7,30,7H0v93H1440V30.89C1380.07,23.2,1319.93,6.15,1260,1.65Z"/></svg>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-22" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo22.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero22.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-22">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-22" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="section-frame br-fix overflow-hidden">
|
|
<div class="wrapper image-wrapper bg-cover bg-image bg-overlay bg-overlay-500" data-image-src="./assets/img/photos/bg26.jpg">
|
|
<div class="container pt-32 xl:pt-[12.5rem] lg:pt-[12.5rem] pb-28 xl:pb-36 lg:pb-36 !text-center">
|
|
<div class="row">
|
|
<div class="md:w-9/12 flex-[0_0_auto] !px-[15px] max-w-full lg:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full xl:w-7/12 flex-[0_0_auto] !px-[15px] max-w-full xxl:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto" data-cues="zoomIn" data-group="page-title" data-interval="-200" data-delay="500">
|
|
<h2 class="h6 uppercase !tracking-[0.05rem] !text-white !mb-5">Hello! We are Trunçgil</h2>
|
|
<h3 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] xl:!text-[2.7rem] !text-[calc(1.395rem_+_1.74vw)] !text-white !mb-7">Grow your business with our marketing solutions</h3>
|
|
<a href="./assets/media/movie.mp4" class="btn btn-circle btn-white btn-play ripple !mx-auto" data-glightbox><i class="icn-caret-right"></i></a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="overflow-hidden">
|
|
<div class="divider !text-white mx-[-0.5rem]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 60"><path fill="currentColor" d="M0,0V60H1440V0A5771,5771,0,0,1,0,0Z"/></svg>
|
|
</div>
|
|
</div>
|
|
<!-- /.overflow-hidden -->
|
|
</div>
|
|
<!-- /.wrapper -->
|
|
</section>
|
|
<!--/section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-23" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo23.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero23.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-23">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-23" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper bg-[#21262c] opacity-100 ">
|
|
<div class="swiper-container swiper-thumbs-container swiper-fullscreen nav-dark" data-margin="0" data-autoplay="true" data-autoplaytime="5000" data-nav="true" data-dots="false" data-items="1" data-thumbs="true">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide bg-overlay bg-overlay-400 bg-[#21262c] opacity-100 bg-image" data-image-src="./assets/img/photos/bg28.jpg"></div>
|
|
<div class="swiper-slide bg-overlay bg-overlay-400 bg-[#21262c] opacity-100 bg-image" data-image-src="./assets/img/photos/bg29.jpg"></div>
|
|
<div class="swiper-slide bg-overlay bg-overlay-400 bg-[#21262c] opacity-100 bg-image" data-image-src="./assets/img/photos/bg30.jpg"></div>
|
|
<div class="swiper-slide bg-overlay bg-overlay-400 bg-[#21262c] opacity-100 bg-image" data-image-src="./assets/img/photos/bg31.jpg"></div>
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
<div class="swiper swiper-thumbs">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide"><img src="./assets/img/photos/bg28-th.jpg" alt="" /></div>
|
|
<div class="swiper-slide"><img src="./assets/img/photos/bg29-th.jpg" alt="" /></div>
|
|
<div class="swiper-slide"><img src="./assets/img/photos/bg30-th.jpg" alt="" /></div>
|
|
<div class="swiper-slide"><img src="./assets/img/photos/bg31-th.jpg" alt="" /></div>
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
<div class="swiper-static">
|
|
<div class="container !h-full flex items-center justify-center">
|
|
<div class="row">
|
|
<div class="lg:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mt-[-2.5rem] !text-center">
|
|
<h1 class="text-[0.95rem] uppercase !tracking-[0.05rem] !text-white !mb-3 animate__animated animate__zoomIn animate__delay-1s">I'm Julia Trunçgil</h1>
|
|
<h2 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] xl:!text-[3rem] !text-[calc(1.425rem_+_2.1vw)] !text-white !mb-0 animate__animated animate__zoomIn animate__delay-2s">couples & wedding photographer</h2>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!-- /.swiper-static -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-24" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo24.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero24.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-24">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-24" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper bg-[rgba(246,247,249,1)] ">
|
|
<div class="overflow-hidden">
|
|
<div class="container-fluid xl:!px-0 pt-6 pb-10">
|
|
<div class="swiper-container" data-margin="30" data-dots="true" data-nav="true" data-centered="true" data-loop="true" data-items-xxl="2" data-items-xl="2" data-items-lg="2" data-items-md="1" data-items-xs="1">
|
|
<div class="swiper overflow-visible">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="./assets/img/photos/cf1.jpg" alt="" /><a class="item-link" href="./assets/img/photos/cf1.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="./assets/img/photos/cf2.jpg" alt="" /><a class="item-link" href="./assets/img/photos/cf2.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="./assets/img/photos/cf3.jpg" alt="" /><a class="item-link" href="./assets/img/photos/cf3.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="./assets/img/photos/cf4.jpg" alt="" /><a class="item-link" href="./assets/img/photos/cf4.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="./assets/img/photos/cf5.jpg" alt="" /><a class="item-link" href="./assets/img/photos/cf5.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded"><img src="./assets/img/photos/cf6.jpg" alt="" /><a class="item-link" href="./assets/img/photos/cf6.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!-- /.cotnainer -->
|
|
</div>
|
|
<!-- /.overflow-hidden -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-25" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo25.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero25.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-25">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-25" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper bg-[rgba(246,247,249,1)] ">
|
|
<div class="container pt-10 pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24">
|
|
<div class="swiper-container blog grid-view !mb-24" data-margin="30" data-dots="true" data-items-lg="2" data-items-md="1" data-items-xs="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<figure class="overlay caption caption-overlay rounded !mb-0"><a href="#"> <img src="./assets/img/photos/tb1.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<span class="badge badge-lg bg-[rgba(255,255,255)] opacity-100 uppercase !mb-3">Places</span>
|
|
<h2 class="post-title h3 !mt-1 !mb-3"><a href="./blog-post.html">The Best Moments in Venice</a></h2>
|
|
<ul class="post-meta !text-white !mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>8 Aug 2022</span></li>
|
|
<li class="post-author"><a href="#"><i class="uil uil-user"></i><span>By Trunçgil</span></a></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>3<span> Comments</span></a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</figcaption>
|
|
<!-- /figcaption -->
|
|
</figure>
|
|
<!-- /figure -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="overlay caption caption-overlay rounded !mb-0"><a href="#"> <img src="./assets/img/photos/tb2.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<span class="badge badge-lg bg-[rgba(255,255,255)] opacity-100 uppercase !mb-3">Restaurants</span>
|
|
<h2 class="post-title h3 !mt-1 !mb-3"><a href="./blog-post.html">10 Great Places in Belgium</a></h2>
|
|
<ul class="post-meta !text-white !mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>5 Jul 2022</span></li>
|
|
<li class="post-author"><a href="#"><i class="uil uil-user"></i><span>By Trunçgil</span></a></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>5<span> Comments</span></a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</figcaption>
|
|
<!-- /figcaption -->
|
|
</figure>
|
|
<!-- /figure -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="overlay caption caption-overlay rounded !mb-0"><a href="#"> <img src="./assets/img/photos/tb3.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<span class="badge badge-lg bg-[rgba(255,255,255)] opacity-100 uppercase !mb-3">Roadtrip</span>
|
|
<h2 class="post-title h3 !mt-1 !mb-3"><a href="./blog-post.html">A Dreamy Roadtrip in Australia</a></h2>
|
|
<ul class="post-meta !text-white !mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>23 Jun 2022</span></li>
|
|
<li class="post-author"><a href="#"><i class="uil uil-user"></i><span>By Trunçgil</span></a></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>8<span> Comments</span></a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</figcaption>
|
|
<!-- /figcaption -->
|
|
</figure>
|
|
<!-- /figure -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="overlay caption caption-overlay rounded !mb-0"><a href="#"> <img src="./assets/img/photos/tb4.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<span class="badge badge-lg bg-[rgba(255,255,255)] opacity-100 uppercase !mb-3">Historic</span>
|
|
<h2 class="post-title h3 !mt-1 !mb-3"><a href="./blog-post.html">My Love Affair with Cappadocia</a></h2>
|
|
<ul class="post-meta !text-white !mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>15 Apr 2022</span></li>
|
|
<li class="post-author"><a href="#"><i class="uil uil-user"></i><span>By Trunçgil</span></a></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>9<span> Comments</span></a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</figcaption>
|
|
<!-- /figcaption -->
|
|
</figure>
|
|
<!-- /figure -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="overlay caption caption-overlay rounded !mb-0"><a href="#"> <img src="./assets/img/photos/tb5.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<span class="badge badge-lg bg-[rgba(255,255,255)] opacity-100 uppercase !mb-3">Nature</span>
|
|
<h2 class="post-title h3 !mt-1 !mb-3"><a href="./blog-post.html">24 Hours in a Village of Valencia</a></h2>
|
|
<ul class="post-meta !text-white !mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>14 Feb 2022</span></li>
|
|
<li class="post-author"><a href="#"><i class="uil uil-user"></i><span>By Trunçgil</span></a></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>11<span> Comments</span></a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</figcaption>
|
|
<!-- /figcaption -->
|
|
</figure>
|
|
<!-- /figure -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="overlay caption caption-overlay rounded !mb-0"><a href="#"> <img src="./assets/img/photos/tb6.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<span class="badge badge-lg bg-[rgba(255,255,255)] opacity-100 uppercase !mb-3">Architecture</span>
|
|
<h2 class="post-title h3 !mt-1 !mb-3"><a href="./blog-post.html">The Largest Train Station in Europe</a></h2>
|
|
<ul class="post-meta !text-white !mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>22 Jan 2022</span></li>
|
|
<li class="post-author"><a href="#"><i class="uil uil-user"></i><span>By Trunçgil</span></a></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>8<span> Comments</span></a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</figcaption>
|
|
<!-- /figcaption -->
|
|
</figure>
|
|
<!-- /figure -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="overlay caption caption-overlay rounded !mb-0"><a href="#"> <img src="./assets/img/photos/tb7.jpg" alt="" /></a>
|
|
<figcaption>
|
|
<span class="badge badge-lg bg-[rgba(255,255,255)] opacity-100 uppercase !mb-3">Nature</span>
|
|
<h2 class="post-title h3 !mt-1 !mb-3"><a href="./blog-post.html">The Natural Places in Brazil</a></h2>
|
|
<ul class="post-meta !text-white !mb-0">
|
|
<li class="post-date"><i class="uil uil-calendar-alt"></i><span>2 Jan 2022</span></li>
|
|
<li class="post-author"><a href="#"><i class="uil uil-user"></i><span>By Trunçgil</span></a></li>
|
|
<li class="post-comments"><a href="#"><i class="uil uil-comment"></i>14<span> Comments</span></a></li>
|
|
</ul>
|
|
<!-- /.post-meta -->
|
|
</figcaption>
|
|
<!-- /figcaption -->
|
|
</figure>
|
|
<!-- /figure -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-26" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo26.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero26.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-26">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-26" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper !bg-[#edf2fc]">
|
|
<div class="container pt-10 xl:pt-14 lg:pt-14 xl:!pt-14 xxl:!pt-10 xl:pb-10 lg:pb-10 xl:pb-10 xxl:pb-0">
|
|
<div class="row md:mx-[-20px] xl:mx-[-35px] !mt-[-50px] items-center text-center lg:text-left xl:text-left">
|
|
<div class="lg:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full" data-cues="slideInDown" data-group="page-title" data-delay="900">
|
|
<h1 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-4 xl:!mr-5 xl:!mt-[-2.5rem] lg:!mt-[-2.5rem]">Grow Your Business with <br class="d-none md:block xl:!hidden lg:!hidden" /><span class="text-[#e31e24] ">Our Marketing Solutions</span></h1>
|
|
<p class="lead text-[1.2rem] leading-normal !mb-7 xxl:!pr-20">We help our clients to increase their website <br class="d-none md:block xl:!hidden lg:!hidden" /> traffic, rankings and visibility in search results.</p>
|
|
<div class="inline-flex me-2"><a href="#" class="btn btn-lg btn-grape !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] rounded">Try it for Free</a></div>
|
|
<div class="inline-flex"><a href="#" class="btn btn-lg btn-outline-grape !text-[#e31e24] bg-[#e31e24] !border-[#e31e24] !border-[2px] hover:!text-white hover:bg-[#e31e24] hover:!border-[#e31e24] focus:shadow-[rgba(96,93,186,1)] active:!text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:!text-white disabled:bg-transparent disabled:border-[#e31e24] rounded">Explore Now</a></div>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="w-10/12 flex-[0_0_auto] !px-[15px] max-w-full md:w-7/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto lg:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full xl:w-5/12 flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-5">
|
|
<img class="max-w-full h-auto !mb-[-3.5rem] md:!mb-[-4.5rem] lg:!mb-[-9rem]" src="./assets/img/illustrations/3d11.png" srcset="./assets/img/illustrations/3d11@2x.png 2x" data-cue="fadeIn" data-delay="300" alt="" />
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<figure><img src="./assets/img/photos/clouds.png" alt=""></figure>
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-27" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo27.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero27.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-27">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-27" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper image-wrapper bg-cover bg-image bg-xs-none bg-[rgba(246,247,249,1)] " data-image-src="./assets/img/photos/bg37.jpg">
|
|
<div class="container pt-28 pb-20 sm:!py-28 xxl:!py-40">
|
|
<div class="row">
|
|
<div class="sm:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full xxl:w-5/12 flex-[0_0_auto] !px-[15px] max-w-full max-sm:!text-center text-left" data-cues="slideInDown" data-group="page-title" data-interval="-200" data-delay="500">
|
|
<h2 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.8rem] !text-[calc(1.405rem_+_1.86vw)] !mb-4 !mt-0 lg:!mt-5 !tracking-[-0.035em] xl:!pr-5 xxl:!pr-0">We bring solutions to make life <span class=" !relative z-[1] after:content-[''] after:absolute after:z-[-1] after:block after:[background-size:100%_100%] after:bg-no-repeat after:bg-bottom after:bottom-[-0.1em] after:w-[110%] after:h-[0.3em] after:-translate-x-2/4 after:left-2/4 style-3 yellow">easier</span></h2>
|
|
<p class="lead text-[1.15rem] leading-normal !mb-7 xl:!pr-5 lg:!pr-5 xl:!pr-5 xxl:!pr-0">We are a creative company that focuses on long term relationships with customers.</p>
|
|
<div><a href="#" class="btn btn-lg btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] rounded">Read More</a></div>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-28" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo28.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero28.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-28">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-28" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper bg-gradient-blend">
|
|
<div class="container pt-24 xl:pt-32 lg:pt-32 md:pt-32 pb-14 xl:pb-32 lg:pb-32 md:pb-32 xl:pb-40 lg:pb-40">
|
|
<div class="row">
|
|
<div class="lg:w-3/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="img-mask mask-2"><img src="./assets/img/photos/about28.jpg" srcset="./assets/img/photos/about28@2x.jpg 2x" alt="" /></div>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="row !mt-10">
|
|
<div class="md:w-10/12 lg:w-9/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
|
|
<h2 class="text-[0.85rem] uppercase !text-[#aab0bc] !mb-3">Hello! I'm Julia</h2>
|
|
<h3 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-5 xl:!px-14">I’m a corporate <em>brand designer</em> based in New York City.</h3>
|
|
<p class="lead text-[1.1rem]">I’m very passionate about the work that I do, and if you are curious you can find my works on <a href="#" class="hover">Dribbble</a>, my portfolio on <a href="#" class="hover">Behance</a>, and my shots on <a href="#" class="hover">Instagram</a>.</p>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="overflow-hidden">
|
|
<div class="divider !text-[#fefefe] mx-[-0.5rem]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 92.26"><path fill="currentColor" d="M1206,21.2c-60-5-119-36.92-291-5C772,51.11,768,48.42,708,43.13c-60-5.68-108-29.92-168-30.22-60,.3-147,27.93-207,28.23-60-.3-122-25.94-182-36.91S30,5.93,0,16.2V92.26H1440v-87l-30,5.29C1348.94,22.29,1266,26.19,1206,21.2Z"/></svg>
|
|
</div>
|
|
</div>
|
|
<!-- /.overflow-hidden -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-29" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo29.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero29.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-29">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-29" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code>
|
|
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600" data-image-src="./assets/img/photos/bg23.png">
|
|
<div class="container pt-24 xl:pt-32 lg:pt-32 md:pt-32 pb-9">
|
|
<div class="row mx-0 !mt-[-50px] items-center text-center lg:text-left xl:text-left">
|
|
<div class="lg:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full xxl:w-5/12 flex-[0_0_auto] !px-[15px] max-w-full !relative" data-cues="slideInDown" data-group="page-title" data-delay="700">
|
|
<img src="./assets/img/svg/doodle1.svg" class="h-9 absolute hidden lg:block" data-cue="fadeIn" data-delay="3000" style="top: -9%; left: -6%" alt="">
|
|
<img src="./assets/img/svg/doodle2.svg" class="!h-[5rem] absolute hidden lg:block" data-cue="fadeIn" data-delay="3000" style="bottom: 9%; right: -22%" alt="">
|
|
<h1 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] xl:!text-[2.5rem] !text-[calc(1.375rem_+_1.5vw)] !mb-4">Manage all your bills, accounts and budgets in <span class="text-gradient gradient-7">one place.</span></h1>
|
|
<p class="lead text-[1.2rem] leading-normal !mb-7">Trunçgil is available to download from both App Store and Google Play Store.</p>
|
|
<div class="flex justify-center lg:!justify-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="1800">
|
|
<span><a href="#" class="me-2"><img src="./assets/img/photos/button-appstore.svg" class="!h-[3rem] !rounded-[0.8rem]" alt=""></a></span>
|
|
<span><a href="#"><img src="./assets/img/photos/button-google-play.svg" class="!h-[3rem] !rounded-[0.8rem]" alt=""></a></span>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="lg:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !ml-auto !mb-[-10rem] xxl:!mb-[-15rem]" data-cues="slideInDown" data-delay="600">
|
|
<figure><img src="./assets/img/photos/devices3.png" srcset="./assets/img/photos/devices3@2x.png 2x" alt=""></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="overflow-hidden" style="z-index:1;">
|
|
<div class="divider !text-[#fefefe] mx-[-0.5rem]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100"><g fill="currentColor"><polygon points="1440 100 0 100 0 85 1440 0 1440 100" /></g></svg>
|
|
</div>
|
|
</div>
|
|
<!-- /.overflow-hidden -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-30" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo30.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero30.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-30">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-30" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code>
|
|
<section class="wrapper overflow-hidden">
|
|
<div class="container pt-36 xl:pt-[12.5rem] lg:pt-[12.5rem] md:pt-[12.5rem] !text-center !relative">
|
|
<div class="absolute" style="top: -15%; left: 50%; transform: translateX(-50%);"><img src="./assets/img/photos/blurry.png" data-cue="fadeIn" alt=""></div>
|
|
<div class="row !relative">
|
|
<div class="lg:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full xxl:w-7/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
|
|
<div class="absolute shape grape w-5 hidden lg:block" style="top: -5%; left: -15%;" data-cue="fadeIn" data-delay="1500"><img src="./assets/img/svg/pie.svg" class="svg-inject icon-svg w-full !h-full" alt="" /></div>
|
|
<div class="absolute shape violet !w-[2.5rem] hidden lg:block" style="bottom: 30%; left: -20%;" data-cue="fadeIn" data-delay="1500"><img src="./assets/img/svg/scribble.svg" class="svg-inject icon-svg w-full !h-full" alt="" /></div>
|
|
<div class="absolute shape fuchsia w-6 hidden lg:block" style="top: 0%; right: -25%; transform: rotate(70deg);" data-cue="fadeIn" data-delay="1500"><img src="./assets/img/svg/tri.svg" class="svg-inject icon-svg w-full !h-full" alt="" /></div>
|
|
<div class="absolute shape yellow w-6 hidden lg:block" style="bottom: 25%; right: -17%;" data-cue="fadeIn" data-delay="1500"><img src="./assets/img/svg/circle.svg" class="svg-inject icon-svg w-full !h-full" alt="" /></div>
|
|
<div data-cues="slideInDown" data-group="page-title">
|
|
<h1 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] xl:!text-[3.2rem] !text-[calc(1.445rem_+_2.34vw)] !mb-5 md:mx-10 lg:mx-0">We are a digital web agency specializing on <br /><span class="rotator-fade !text-[#e31e24] ">web design.,SEO services.,e-commerce.,Google Adwords.</span></h1>
|
|
<p class="lead text-[1.2rem] !mb-8">We are an award winning digital web agency that strongly believes in the power of creative ideas.</p>
|
|
</div>
|
|
<div class="flex justify-center" data-cues="slideInDown" data-delay="600">
|
|
<span><a class="btn btn-lg btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[0.8rem] mx-1">See Projects</a></span>
|
|
<span><a class="btn btn-lg btn-fuchsia !text-white !bg-[#e668b3] border-[#e668b3] hover:text-white hover:bg-[#e668b3] hover:!border-[#e668b3] active:text-white active:bg-[#e668b3] active:border-[#e668b3] disabled:text-white disabled:bg-[#e668b3] disabled:border-[#e668b3] !rounded-[0.8rem] mx-1">Contact Us</a></span>
|
|
</div>
|
|
<!-- /div -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-31" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo31.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero31.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-31">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-31" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper">
|
|
<div class="container pt-12 xl:pt-16 lg:pt-16 md:pt-16 pb-36 xl:pb-28 lg:pb-28 md:pb-28 !text-center">
|
|
<div class="row">
|
|
<div class="lg:w-9/12 flex-[0_0_auto] !px-[15px] max-w-full xl:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full xxl:w-7/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto" data-cues="slideInDown" data-group="page-title" data-delay="500">
|
|
<h1 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !tracking-[-0.03em] xl:!text-[3.2rem] !text-[calc(1.445rem_+_2.34vw)] !mb-4 md:!px-8 lg:!px-0">We bring rapid solutions for your <span class=" !relative z-[1] after:content-[''] after:absolute after:z-[-1] after:block after:[background-size:100%_100%] after:bg-no-repeat after:bg-bottom after:bottom-[-0.1em] after:w-[110%] after:h-[0.3em] after:-translate-x-2/4 after:left-2/4 style-1 primary"><em>business</em></span></h1>
|
|
<p class="lead text-[1.2rem] leading-normal !mb-7">We are creative company that values quality and focuses on establishing long-term relationships with customers.</p>
|
|
<div>
|
|
<a class="btn btn-lg btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] rounded !mb-10 xxl:!mb-5">See Projects</a>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="row">
|
|
<div class="lg:w-10/12 flex-[0_0_auto] !px-[15px] max-w-full xl:w-9/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mt-[3rem] !mb-[-12.5rem]">
|
|
<figure><img class="max-w-full h-auto" src="./assets/img/illustrations/i28.png" srcset="./assets/img/illustrations/i28@2x.png 2x" alt=""></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="overflow-hidden">
|
|
<div class="divider !text-[#edf2fc] mx-[-0.5rem]">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 70"><path fill="currentColor" d="M1440,70H0V45.16a5762.49,5762.49,0,0,1,1440,0Z"/></svg>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-32" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo32.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero32.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-32">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-32" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper gradient-8 bg-lines">
|
|
<div class="container pt-28 xl:pt-36 lg:pt-36 md:pt-36 pb-[12.5rem] xl:pb-[17.5rem] lg:pb-[17.5rem] !text-center">
|
|
<div class="row">
|
|
<div class="lg:w-10/12 flex-[0_0_auto] !px-[15px] max-w-full xl:w-9/12 flex-[0_0_auto] !px-[15px] max-w-full xxl:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto" data-cues="zoomIn" data-group="page-title" data-interval="-200" data-delay="500">
|
|
<h2 class="h6 uppercase !tracking-[0.05rem] !text-white !mb-5">Hello! We are Trunçgil</h2>
|
|
<h1 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] xl:!text-[3.4rem] !text-[calc(1.465rem_+_2.58vw)] !leading-[1.05] !mb-8 !text-white">We have considered our solutions to <span class="relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] underline-gradient-6"><em>assist</em></span> every stage of your growth.</h1>
|
|
<div class="flex justify-center !mb-4" data-cues="zoomIn" data-group="page-title-buttons" data-delay="900">
|
|
<span><a href="#" class="btn btn-lg btn-white">Explore Now</a></span>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-33" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo33.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero33.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-33">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-33" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="section-frame xxl:!mx-12 overflow-hidden">
|
|
<div class="wrapper image-wrapper bg-image bg-cover bg-overlay bg-overlay-light-500" data-image-src="./assets/img/photos/bg23.png">
|
|
<div class="container py-24 xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem] !text-center !relative">
|
|
<div class="absolute shape yellow hidden lg:block w-5" style="top: 18%; left: 5%;"><img src="./assets/img/svg/pie.svg" class="svg-inject icon-svg w-full !h-full" alt="" /></div>
|
|
<div class="absolute shape leaf hidden lg:block !w-[2.5rem]" style="bottom: 30%; left: 2%;"><img src="./assets/img/svg/scribble.svg" class="svg-inject icon-svg w-full !h-full" alt="" /></div>
|
|
<div class="absolute shape fuchsia hidden lg:block w-6" style="top: 20%; right: 2%; transform: rotate(70deg);"><img src="./assets/img/svg/tri.svg" class="svg-inject icon-svg w-full !h-full" alt="" /></div>
|
|
<div class="absolute shape grape hidden lg:block w-6" style="bottom: 28%; right: 5%;"><img src="./assets/img/svg/circle.svg" class="svg-inject icon-svg w-full !h-full" alt="" /></div>
|
|
<div class="row">
|
|
<div class="lg:w-9/12 flex-[0_0_auto] !px-[15px] max-w-full xxl:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<h1 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] xl:!text-[3.5rem] !text-[calc(1.475rem_+_2.7vw)] md:!px-10 lg:!px-0 xl:!px-8 !mb-5">👋 Hello! I'm <img class="inline w-12 mx-1" src="./assets/img/avatars/avatar.png" alt=""> Camille, a product designer.</h1>
|
|
<p class="lead text-[1.2rem] md:!px-10 lg:!px-0 lg:mx-[-2.5rem] xl:mx-0 !mb-8">I’m very passionate about the work that I do, and if you are curious you can find my works on <a href="#" class="hover">Dribbble</a>, my portfolio on <a href="#" class="hover">Behance</a>.</p>
|
|
<a href="#" class="btn btn-lg btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-icon btn-icon-end">See My Works <i class="uil uil-arrow-up-right"></i></a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!-- /.wrapper -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-34" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<figure><a href='../../demo34.html' target='_blank'><img class="max-w-full h-auto" src="../../assets/img/docs/hero34.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xxl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-34">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-34" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper bg-gradient-primary">
|
|
<div class="container pt-10 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem]">
|
|
<div class="row mx-[-5px] !mt-[-50px] items-center">
|
|
<div class="md:w-10/12 flex-[0_0_auto] !px-[15px] max-w-full md:!ml-[8.33333333%] lg:!ml-0 lg:w-5/12 flex-[0_0_auto] !px-[15px] max-w-full text-center lg:text-left xl:text-left order-2 lg:!order-none" data-cues="slideInDown" data-group="page-title" data-delay="600">
|
|
<h1 class="text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-5 md:mx-10 lg:mx-0">Create a powerful but effortless website for <br /><span class="typer !text-[#e31e24] whitespace-nowrap" data-delay="100" data-words="your business.,your portfolio.,your startup.,digital marketing."></span><span class="cursor !text-[#e31e24] " data-owner="typer"></span></h1>
|
|
<p class="lead text-[1.15rem] !mb-7">Build your website in minutes with the help of countless amazing features of Trunçgil.</p>
|
|
<div class="flex justify-center lg:!justify-start !mb-4" data-cues="slideInDown" data-group="page-title-buttons" data-delay="900">
|
|
<span><a class="btn btn-lg btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mr-2 scroll" href="#demos">Check Demos</a></span>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="lg:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !ml-auto !relative">
|
|
<div class="row g-4">
|
|
<div class="w-4/12 flex-[0_0_auto] !px-[15px] max-w-full flex flex-col !ml-auto" data-cues="fadeIn" data-group="col-start" data-delay="900">
|
|
<div class="ml-auto !mt-6"><img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="./assets/img/demos/vc1.jpg" srcset="./assets/img/demos/vc1@2x.jpg 2x" alt="" /></div>
|
|
<div class="ml-auto !mt-4"><img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="./assets/img/demos/vc2.jpg" srcset="./assets/img/demos/vc2@2x.jpg 2x" alt="" /></div>
|
|
<div class="ml-auto !mt-4"><img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="./assets/img/demos/vc3.jpg" srcset="./assets/img/demos/vc3@2x.jpg 2x" alt="" /></div>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="w-4/12 flex-[0_0_auto] !px-[15px] max-w-full" data-cues="fadeIn" data-group="col-middle">
|
|
<div><img class="w-full max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="./assets/img/demos/vc4.jpg" srcset="./assets/img/demos/vc4@2x.jpg 2x" alt="" /></div>
|
|
<div><img class="w-full max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mt-4" src="./assets/img/demos/vc5.jpg" srcset="./assets/img/demos/vc5@2x.jpg 2x" alt="" /></div>
|
|
<div><img class="w-full max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !mt-4" src="./assets/img/demos/vc6.jpg" srcset="./assets/img/demos/vc6@2x.jpg 2x" alt="" /></div>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="w-4/12 flex-[0_0_auto] !px-[15px] max-w-full flex flex-col" data-cues="fadeIn" data-group="col-end" data-delay="900">
|
|
<div class="mt-8"><img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="./assets/img/demos/vc7.jpg" srcset="./assets/img/demos/vc7@2x.jpg 2x" alt="" /></div>
|
|
<div class="mt-4 !mb-10"><img class="max-w-full h-auto rounded !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]" src="./assets/img/demos/vc8.jpg" srcset="./assets/img/demos/vc8@2x.jpg 2x" alt="" /></div>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="relative !mt-[-10rem] !mb-40" data-cue="fadeIn" data-delay="1800">
|
|
<div class="btn btn-circle btn-fuchsia !text-white bg-[#e668b3] border-[#e668b3] hover:text-white hover:bg-[#e668b3] hover:!border-[#e668b3] active:text-white active:bg-[#e668b3] active:border-[#e668b3] disabled:text-white disabled:bg-[#e668b3] disabled:border-[#e668b3] pointer-events-none ripple absolute counter-wrapper flex-col hidden xxl:!flex" style="bottom: 0; right: -8%; width: 120px; height: 120px;">
|
|
<h3 class="xl:!text-[1.3rem] !text-[calc(1.255rem_+_0.06vw)] !text-white !mt-[-0.25rem] !mb-0">NO</h3>
|
|
<p>jQuery</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
</div>
|
|
<!-- /.content-wrapper -->
|
|
<section class="wrapper bg-[#21262c] opacity-100 !text-white">
|
|
<div class="container pt-[4.5rem] xl:pt-24 lg:pt-24 md:pt-24 !text-center">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="md:w-10/12 lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<h2 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.25] xl:!text-[2rem] !text-white !mt-3 !mb-3 xl:!px-8 lg:!px-8">Think unique and be creative. Make a difference with Trunçgil.</h2>
|
|
<p class="lead text-[1.05rem] !leading-[1.6] !mb-6">Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.</p>
|
|
<a href="https://truncgil.com.tr" target="_blank" class="btn btn-lg btn-white !rounded-[50rem] !mb-10 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Buy Trunçgil</a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<img class="max-w-full h-auto m-[0_auto]" src="../../assets/img/demos/f1.png" alt="image">
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<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-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
|
|
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
|
|
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
|
|
</svg>
|
|
</div>
|
|
<script src="../../assets/js/plugins.js"></script>
|
|
<script src="../../assets/js/theme.js"></script>
|
|
</body>
|
|
|
|
|
|
<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/docs/blocks/hero by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:01:39 GMT -->
|
|
</html> |