truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0ca75829bbd49c5891a5c6fc7e54d86cd58716bd
citrus/public/docs/blocks/call-to-action.html
T
Ümit Tunç 0ca75829bb frontend style fix
2026-01-01 16:25:27 +03:00

1200 lines
102 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/docs/blocks/call-to-action by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:01:15 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 - Call to Action</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 !text-[#e31e24] pointer-events-none' 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 ' 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 image-wrapper no-overlay bg-image !text-center py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24 bg-map bg-auto bg-[center_center] bg-no-repeat !bg-scroll relative z-0" data-image-src="../../assets/img/map.png">
<div class="container py-0 xl:!py-28 lg:!py-28 md:!py-28">
<div class="flex flex-wrap mx-[-15px]">
<div class="lg:w-6/12 xl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3 !text-center">Join Our Community</h2>
<p class="lead text-[0.9rem] font-medium !leading-[1.65] !mb-5 xl:!px-3 lg:!px-3 md:!px-24">We are trusted by over 5000+ clients. Join them by using our services and grow your business.</p>
<a href="#" 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] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Join Us</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-1" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<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>&lt;section class=&quot;wrapper image-wrapper bg-auto no-overlay bg-image !text-center py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24 bg-map&quot; data-image-src=&quot;./assets/img/map.png&quot;&gt;
&lt;div class=&quot;container py-0 xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem]&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;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 !mx-auto&quot;&gt;
&lt;h2 class=&quot;text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3 !text-center&quot;&gt;Join Our Community&lt;/h2&gt;
&lt;p class=&quot;lead !mb-5 md:!px-24 lg:!px-3&quot;&gt;We are trusted by over 5000+ clients. Join them by using our services and grow your business.&lt;/p&gt;
&lt;a href=&quot;#&quot; class=&quot;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]&quot;&gt;Join Us&lt;/a&gt;
&lt;/div&gt;
&lt;!-- /column --&gt;
&lt;/div&gt;
&lt;!-- /.row --&gt;
&lt;/div&gt;
&lt;!-- /.container --&gt;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</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 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
<div class="flex flex-wrap mx-[-15px]">
<div class="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 !text-white !mt-[-1.25rem] xl:!mt-0 lg:!mt-0 xl:-translate-y-2/4 lg:-translate-y-2/4 bg-cover [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll !relative z-0 before:rounded-[0.4rem] before:bg-[rgba(30,34,40,.4)] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0" data-image-src="../../assets/img/photos/bg3.jpg">
<div class="card-body p-6 flex-row text-center xl:!justify-between lg:!justify-between md:!justify-between xl:!flex xl:!items-center lg:!flex lg:!items-center xl:!p-12 lg:!p-12 md:!p-12 xl:!text-left lg:!text-left">
<h3 class="!text-[calc(1.265rem_+_0.18vw)] font-bold xl:!text-[1.4rem] !leading-[1.35] !mb-6 xl:!mb-0 lg:!mb-0 lg:!pr-10 xl:!pr-5 xxl:!pr-32 !text-white">We are trusted by over 5000+ clients. Join them by using our services and grow your business.</h3>
<a href="#" class="btn btn-white !rounded-[50rem] !mb-0 whitespace-nowrap">Join Us</a>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<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>&lt;section class=&quot;wrapper !bg-[#ffffff] &quot;&gt;
&#60;div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20"&#62;
&#60;div class="flex flex-wrap mx-[-15px]"&#62;
&#60;div class="xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto"&#62;
&#60;div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-400 !text-white !mt-[-1.25rem] xl:!mt-0 lg:!mt-0 xl:-translate-y-2/4 lg:-translate-y-2/4 bg-cover [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll !relative z-0 before:rounded-[0.4rem] before:bg-[rgba(30,34,40,.4)] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0" data-image-src="../../assets/img/photos/bg3.jpg"&#62;
&#60;div class="card-body p-6 flex-row text-center xl:!justify-between lg:!justify-between md:!justify-between xl:!flex xl:!items-center lg:!flex lg:!items-center xl:!p-12 lg:!p-12 md:!p-12 xl:!text-left lg:!text-left"&#62;
&#60;h3 class="!text-[calc(1.265rem_+_0.18vw)] font-bold xl:!text-[1.4rem] !leading-[1.35] !mb-6 xl:!mb-0 lg:!mb-0 lg:!pr-10 xl:!pr-5 xxl:!pr-32 !text-white"&#62;We are trusted by over 5000+ clients. Join them by using our services and grow your business.&#60;/h3&#62;
&#60;a href="#" class="btn btn-white !rounded-[50rem] !mb-0 whitespace-nowrap"&#62;Join Us&#60;/a&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!--/.card --&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</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 pb-16 xl:pb-20 lg:pb-20 md:pb-20 !text-center">
<div class="flex flex-wrap mx-[-15px]">
<div class="md:w-9/12 lg:w-7/12 xl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 507.4 512" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/puzzle-2.svg" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] !mb-4 m-[0_auto]"><path class="lineal-fill" d="M257.9 15.2v65.1c-28.7-15.6-64.7-5-80.3 23.8s-5 64.7 23.8 80.3c17.6 9.6 38.9 9.6 56.6 0v65.1h59.9c-8.4-31.6 10.5-64 42.1-72.4 31.6-8.4 64 10.5 72.4 42.1 2.6 9.9 2.6 20.4 0 30.3h59.9V70.7c0-30.7-24.9-55.5-55.5-55.5H257.9z"></path><path class="lineal-stroke" d="M436.7 0h-366C31.7 0 0 31.7 0 70.7v370.6c0 39 31.7 70.7 70.7 70.7h188.1c8.4 0 15.2-6.8 15.2-15.1V453c5.5 1 11.2 1.3 16.8 1 17.5-.9 34.2-7.9 47.1-19.9 30.1-28 31.7-75.1 3.7-105.2-23.2-24.8-60.2-30.8-90-14.6-7.3 4-10.1 13.2-6.1 20.6 4 7.4 13.2 10.1 20.6 6.1 7.4-4 15.7-5.8 24.1-5.2 24.3 1.7 42.6 22.8 40.9 47-1.5 21.8-19.8 39.8-41.7 40.8-8.1.4-16.1-1.4-23.2-5.3-2.2-1.2-4.7-1.8-7.3-1.8-8.4 0-15.2 6.8-15.2 15.2v49.9h-173c-22.3 0-40.3-18.1-40.3-40.3V264.6h28.7c-.5 2.6-.8 5.2-1 7.8-2.9 41 28 76.6 69 79.5 1.8.1 3.6.2 5.3.2 18.8.1 37-7.1 50.7-20 24.8-23.2 30.8-60.1 14.6-89.9-.1-.2-.2-.3-.3-.5-4.1-7.3-13.4-9.9-20.7-5.7-7.3 4.1-9.9 13.4-5.7 20.7 4 7.4 5.8 15.8 5.2 24.2-1.7 24.3-22.8 42.5-47.1 40.8-21.8-1.5-39.8-19.8-40.8-41.7-.4-8.1 1.4-16.1 5.2-23.3 1.2-2.2 1.9-4.7 1.9-7.3 0-8.4-6.8-15.2-15.2-15.2H30.4V70.7c0-22.3 18.1-40.3 40.3-40.3h172v28.7c-8.7-1.6-17.6-1.6-26.2 0-40.5 7.2-67.4 45.9-60.1 86.4s45.9 67.4 86.4 60.1v43.9c0 8.4 6.8 15.2 15.2 15.2h59.9c1.6 0 3.2-.3 4.7-.7 8-2.6 12.3-11.2 9.7-19.2-.6-2.5-1-5.1-1.2-7.7-1.5-24.3 16.9-45.2 41.2-46.7.9-.1 1.8-.1 2.7-.1 3.8 0 7.6.5 11.3 1.5 23.5 6.2 37.5 30.4 31.3 53.9-.3 1.3-.5 2.6-.5 3.9 0 8.4 6.8 15.2 15.2 15.2h59.9c8.4 0 15.2-6.8 15.2-15.2V70.7c-.1-39-31.7-70.7-70.7-70.7zM477 234.2h-27.5c0-41.1-33.3-74.4-74.4-74.4-1.5 0-3 0-4.6.1-36 2.2-65.9 30.9-69.5 66.8-.2 2.5-.4 5-.4 7.5h-27.5v-49.9c0-2.5-.6-5-1.8-7.3-4-7.4-13.2-10.1-20.6-6.1-7.4 4-15.7 5.8-24.1 5.2-24.3-1.7-42.6-22.8-40.9-47 1.5-21.8 19.8-39.8 41.7-40.8 8.1-.4 16.1 1.4 23.2 5.3 2.2 1.2 4.7 1.8 7.3 1.8 8.4 0 15.2-6.8 15.2-15.2V30.4h163.6c22.3 0 40.3 18.1 40.3 40.3v163.5z"></path></svg>
<h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3">Join Our Community</h2>
<p class="lead text-[1rem] !mb-6 xl:!px-10 xxl:!px-20">We are trusted by over 5000+ clients. Join them by using our services and grow your business.</p>
<a href="#" 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 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Join Us</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<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>&lt;section class=&quot;wrapper !bg-[#ffffff] &quot;&gt;
&#60;div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20 !text-center"&#62;
&#60;div class="flex flex-wrap mx-[-15px]"&#62;
&#60;div class="md:w-9/12 lg:w-7/12 xl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center"&#62;
&#60;img src="../../assets/img/icons/lineal/puzzle-2.svg" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] !mb-4 m-[0_auto]" alt="image"&#62;
&#60;h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3"&#62;Join Our Community&#60;/h2&#62;
&#60;p class="lead text-[1rem] !mb-6 xl:!px-10 xxl:!px-20"&#62;We are trusted by over 5000+ clients. Join them by using our services and grow your business.&#60;/p&#62;
&#60;a href="#" 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 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"&#62;Join Us&#60;/a&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
<section id="snippet-4" class="wrapper !bg-[#ffffff] ">
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
<div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-300 !text-white !mt-[-1.25rem] xl:!mt-0 lg:!mt-0 xl:-translate-y-2/4 lg:-translate-y-2/4 !mb-lg-n50p border-radius-lg-top bg-cover [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll !relative z-0 !rounded-[0.4rem] before:rounded-[0.4rem] before:bg-[rgba(30,34,40,.4)] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0" data-image-src="../../assets/img/photos/bg16.png">
<div class="card-body !p-10 xl:!p-14">
<div class="flex flex-wrap mx-[-15px] !text-center">
<div class="xl:w-11/12 xxl:w-9/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<h2 class="!text-[0.8rem] !leading-[1.35] uppercase !text-white !mb-3">Join Our Community</h2>
<h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.25] xl:!text-[2rem] !mb-8 xl:!px-8 lg:!px-8 !text-white">We are <span class="!relative z-[2] after:content-[''] after:absolute after:z-[-1] after:block 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">trusted</span> by over 5000+ clients. Join them now and grow your business.</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="flex justify-center">
<span><a class="btn btn-white rounded">Get Started</a></span>
</div>
</div>
<!--/.card-body -->
</div>
<!--/.card -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<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>&lt;section class=&quot;wrapper !bg-[#ffffff] &quot;&gt;
&#60;div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20"&#62;
&#60;div class="card image-wrapper bg-full bg-image bg-overlay bg-overlay-300 !text-white !mt-[-1.25rem] xl:!mt-0 lg:!mt-0 xl:-translate-y-2/4 lg:-translate-y-2/4 !mb-lg-n50p border-radius-lg-top bg-cover [background-size:100%] bg-[center_center] bg-no-repeat !bg-scroll !relative z-0 !rounded-[0.4rem] before:rounded-[0.4rem] before:bg-[rgba(30,34,40,.4)] before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0" data-image-src="../../assets/img/photos/bg16.png"&#62;
&#60;div class="card-body !p-10 xl:!p-14"&#62;
&#60;div class="flex flex-wrap mx-[-15px] !text-center"&#62;
&#60;div class="xl:w-11/12 xxl:w-9/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto"&#62;
&#60;h2 class="!text-[0.8rem] !leading-[1.35] uppercase !text-white !mb-3"&#62;Join Our Community&#60;/h2&#62;
&#60;h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.25] xl:!text-[2rem] !mb-8 xl:!px-8 lg:!px-8 !text-white"&#62;We are &#60;span class="!relative z-[2] after:content-[''] after:absolute after:z-[-1] after:block 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"&#62;trusted&#60;/span&#62; by over 5000+ clients. Join them now and grow your business.&#60;/h3&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;div class="flex justify-center"&#62;
&#60;span&#62;&#60;a class="btn btn-white rounded"&#62;Get Started&#60;/a&#62;&#60;/span&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;!--/.card-body --&#62;
&#60;/div&#62;
&#60;!--/.card --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</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="wrapper !bg-[#edf2fc] !mb-14 md:!mb-[4.5rem]">
<div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
<div class="flex flex-wrap mx-[-15px] !mb-8">
<div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
<h2 class="!text-[0.8rem] uppercase !text-[#e31e24] !mb-3 !leading-[1.35]">Analyze Now</h2>
<h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-0">Wonder how much faster your website can go? Easily check your SEO Score now.</h3>
</div>
<!-- /column -->
</div>
<!-- /.row -->
<div class="flex flex-wrap mx-[-15px]">
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
<form action="#">
<div class="form-floating input-group relative">
<input type="url" class="form-control border-0 relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" id="analyze">
<label class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope" for="analyze">Enter Website URL</label>
<button 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] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" type="button">Analyze</button>
</div>
</form>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<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>&lt;section class=&quot;wrapper !bg-[#edf2fc]&quot;&gt;
&#60;div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24"&#62;
&#60;div class="flex flex-wrap mx-[-15px] !mb-8"&#62;
&#60;div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center"&#62;
&#60;h2 class="!text-[0.8rem] uppercase !text-[#e31e24] !mb-3 !leading-[1.35]"&#62;Analyze Now&#60;/h2&#62;
&#60;h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-0"&#62;Wonder how much faster your website can go? Easily check your SEO Score now.&#60;/h3&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;div class="flex flex-wrap mx-[-15px]"&#62;
&#60;div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto"&#62;
&#60;form action="#"&#62;
&#60;div class="form-floating input-group relative"&#62;
&#60;input type="url" class="form-control border-0 relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="Enter Website URL" id="analyze"&#62;
&#60;label class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope" for="analyze"&#62;Enter Website URL&#60;/label&#62;
&#60;button 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] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" type="button"&#62;Analyze&#60;/button&#62;
&#60;/div&#62;
&#60;/form&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</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-10 pb-20 lg:!py-28 xl:!py-40 xxl:!py-60 !relative">
<img class="xl:!absolute lg:!absolute max-lg:!static w-full flex-[0_0_auto] max-w-full xl:-translate-y-2/4 lg:-translate-y-2/4 !mb-3 md:!mb-10 lg:!mb-0 xl:!mb-0" src="../../assets/img/photos/devices2.png" alt="image" style="top: 50%; left: -23%;">
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] items-center">
<div class="md:w-10/12 md:!ml-[8.33333333%] lg:w-6/12 lg:!ml-[50%] xl:w-6/12 xl:!ml-[50%] flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] w-full max-w-full xl:!mt-[-2.25rem] lg:!mt-[-2.25rem] md:!mt-[-2.25rem] text-center xl:text-left lg:text-left">
<h1 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-4 md:!px-10 lg:!px-0">Get all of your steps, exercise, sleep and meds in one place.</h1>
<p class="lead text-[1.05rem] !leading-[1.6] !mb-7 md:!px-10 lg:!px-0 xl:!px-0 xxl:!pr-20">Trunçgil is now available to download from both the App Store and Google Play Store.</p>
<div class="flex justify-center xl:!justify-start lg:!justify-start">
<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 !mr-2"><i class="uil uil-apple !mr-[.3rem] before:content-['\e938']"></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 !mr-[.3rem] before:content-['\eb4f']"></i> Google Play</a></span>
</div>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<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>&lt;section class=&quot;wrapper !bg-[#edf2fc]&quot;&gt;
&#60;div class="container pt-10 pb-20 lg:!py-28 xl:!py-40 xxl:!py-60 !relative"&#62;
&#60;img class="xl:!absolute lg:!absolute max-lg:!static w-full flex-[0_0_auto] max-w-full xl:-translate-y-2/4 lg:-translate-y-2/4 !mb-3 md:!mb-10 lg:!mb-0 xl:!mb-0" src="../../assets/img/photos/devices2.png" alt="image" style="top: 50%; left: -23%;"&#62;
&#60;div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] items-center"&#62;
&#60;div class="md:w-10/12 md:!ml-[8.33333333%] lg:w-6/12 lg:!ml-[50%] xl:w-6/12 xl:!ml-[50%] flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] w-full max-w-full xl:!mt-[-2.25rem] lg:!mt-[-2.25rem] md:!mt-[-2.25rem] text-center xl:text-left lg:text-left"&#62;
&#60;h1 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-4 md:!px-10 lg:!px-0"&#62;Get all of your steps, exercise, sleep and meds in one place.&#60;/h1&#62;
&#60;p class="lead text-[1.05rem] !leading-[1.6] !mb-7 md:!px-10 lg:!px-0 xl:!px-0 xxl:!pr-20"&#62;Trunçgil is now available to download from both the App Store and Google Play Store.&#60;/p&#62;
&#60;div class="flex justify-center xl:!justify-start lg:!justify-start"&#62;
&#60;span&#62;&#60;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 !mr-2"&#62;&#60;i class="uil uil-apple !mr-[.3rem] before:content-['\e938']"&#62;&#60;/i&#62; App Store&#60;/a&#62;&#60;/span&#62;
&#60;span&#62;&#60;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"&#62;&#60;i class="uil uil-google-play !mr-[.3rem] before:content-['\eb4f']"&#62;&#60;/i&#62; Google Play&#60;/a&#62;&#60;/span&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;/div&#62;
&lt;/section&gt;
&lt;!-- /section --&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</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="pt-40 pb-10 !relative">
<section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="../../assets/img/photos/bg23.png">
<div class="overflow-hidden" style="z-index:1;">
<div class="divider divider-alt !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 15 0 0 1440 0 1440 100" />
</g>
</svg>
</div>
</div>
<!-- /.overflow-hidden -->
<div class="container pt-10 xl:pt-10 lg:pt-10 md:pt-16 pb-8 xl:pb-10 lg:pb-10 md:pb-10 text-center xl:text-left lg:text-left">
<div class="flex flex-wrap mx-0 !mt-[-50px]">
<div class="md:w-10/12 md:!ml-[8.33333333%] lg:!ml-0 lg:w-6/12 xl:!ml-0 xl:w-5/12 w-full flex-[0_0_auto] max-w-full !relative !mt-[50px]">
<img src="../../assets/img/svg/doodle2.svg" class="!h-[5rem] !absolute hidden xl:block lg:block" style="bottom: 36%; right: -25%" alt="image">
<img src="../../assets/img/svg/doodle6.svg" class="!h-[4.5rem] !absolute hidden xl:block lg:block" style="top: -20%; left: -25%" alt="image">
<h2 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.25] xl:!text-[2rem] !mb-4">Manage all your bills, accounts & budgets in <span class="text-gradient gradient-7">one place.</span></h2>
<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 xl:!justify-start lg:!justify-start">
<span class="inline-flex"><a href="#" class="!mr-2 inline-block"><img src="../../assets/img/photos/button-appstore.svg" class="!h-[3rem] !rounded-[0.8rem]" alt="image"></a></span>
<span class="inline-flex"><a href="#" class="inline-block"><img src="../../assets/img/photos/button-google-play.svg" class="!h-[3rem] !rounded-[0.8rem]" alt="image"></a></span>
</div>
</div>
<!-- /column -->
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full !ml-auto !mt-lg-n15 xl:!mt-[-10rem] lg:!mt-[-5rem] !mt-[50px]">
<figure class="m-0 p-0"><img class="w-full max-w-full !h-auto" src="../../assets/img/photos/devices6.png" alt="image"></figure>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<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>
&#60;section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 [background-size:100%] bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.6)]" data-image-src="../../assets/img/photos/bg23.png"&#62;
&#60;div class="overflow-hidden" style="z-index:1;"&#62;
&#60;div class="divider divider-alt !text-[#fefefe] mx-[-0.5rem]"&#62;
&#60;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100"&#62;
&#60;g fill="currentColor"&#62;
&#60;polygon points="1440 100 0 15 0 0 1440 0 1440 100" /&#62;
&#60;/g&#62;
&#60;/svg&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;!-- /.overflow-hidden --&#62;
&#60;div class="container pt-10 xl:pt-10 lg:pt-10 md:pt-16 pb-8 xl:pb-10 lg:pb-10 md:pb-10 text-center xl:text-left lg:text-left"&#62;
&#60;div class="flex flex-wrap mx-0 !mt-[-50px]"&#62;
&#60;div class="md:w-10/12 md:!ml-[8.33333333%] lg:!ml-0 lg:w-6/12 xl:!ml-0 xl:w-5/12 w-full flex-[0_0_auto] max-w-full !relative !mt-[50px]"&#62;
&#60;img src="../../assets/img/svg/doodle2.svg" class="!h-[5rem] !absolute hidden xl:block lg:block" style="bottom: 36%; right: -25%" alt="image"&#62;
&#60;img src="../../assets/img/svg/doodle6.svg" class="!h-[4.5rem] !absolute hidden xl:block lg:block" style="top: -20%; left: -25%" alt="image"&#62;
&#60;h2 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.25] xl:!text-[2rem] !mb-4"&#62;Manage all your bills, accounts &#38; budgets in &#60;span class="text-gradient gradient-7"&#62;one place.&#60;/span&#62;&#60;/h2&#62;
&#60;p class="lead !text-[1.2rem] leading-normal !mb-7"&#62;Trunçgil is available to download from both App Store and Google Play Store.&#60;/p&#62;
&#60;div class="flex justify-center xl:!justify-start lg:!justify-start"&#62;
&#60;span class="inline-flex"&#62;&#60;a href="#" class="!mr-2 inline-block"&#62;&#60;img src="../../assets/img/photos/button-appstore.svg" class="!h-[3rem] !rounded-[0.8rem]" alt="image"&#62;&#60;/a&#62;&#60;/span&#62;
&#60;span class="inline-flex"&#62;&#60;a href="#" class="inline-block"&#62;&#60;img src="../../assets/img/photos/button-google-play.svg" class="!h-[3rem] !rounded-[0.8rem]" alt="image"&#62;&#60;/a&#62;&#60;/span&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] max-w-full !ml-auto !mt-lg-n15 xl:!mt-[-10rem] lg:!mt-[-5rem] !mt-[50px]"&#62;
&#60;figure class="m-0 p-0"&#62;&#60;img class="w-full max-w-full !h-auto" src="../../assets/img/photos/devices6.png" alt="image"&#62;&#60;/figure&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;/div&#62;
&#60;!-- /.container --&#62;
&#60;/section&#62;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</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="pt-40 pb-10 !relative">
<section class="wrapper gradient-8 !relative before:content-[''] before:absolute before:w-full before:h-full before:bg-cover before:pointer-events-none before:left-0 before:top-0 before:bg-no-repeat before:bg-[center_center] before:bg-[url(./assets/img/photos/lines.png)]">
<div class="container py-20 xl:!py-28 lg:!py-28 md:!py-28 !text-center">
<div class="flex flex-wrap mx-[-15px]">
<div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
<h2 class="!text-[0.8rem] !leading-[1.35] uppercase !text-white !mb-3">Join Our Community</h2>
<h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.25] xl:!text-[2rem] !text-white !mb-6">We are <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] after:!bg-[linear-gradient(45deg,#08aeea_0,#2af598_100%)]"><em>trusted</em></span> by over 5000+ clients. Join them now and grow your business.</h3>
<a href="#" class="btn btn-white">Join Us</a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</section>
<!-- /section -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<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>
&#60;section class="wrapper gradient-8 !relative before:content-[''] before:absolute before:w-full before:h-full before:bg-cover before:pointer-events-none before:left-0 before:top-0 before:bg-no-repeat before:bg-[center_center] before:bg-[url(./assets/img/photos/lines.png)]"&#62;
&#60;div class="container py-20 xl:!py-28 lg:!py-28 md:!py-28 !text-center"&#62;
&#60;div class="flex flex-wrap mx-[-15px]"&#62;
&#60;div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center"&#62;
&#60;h2 class="!text-[0.8rem] !leading-[1.35] uppercase !text-white !mb-3"&#62;Join Our Community&#60;/h2&#62;
&#60;h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.25] xl:!text-[2rem] !text-white !mb-6"&#62;We are &#60;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] after:!bg-[linear-gradient(45deg,#08aeea_0,#2af598_100%)]"&#62;&#60;em&#62;trusted&#60;/em&#62;&#60;/span&#62; by over 5000+ clients. Join them now and grow your business.&#60;/h3&#62;
&#60;a href="#" class="btn btn-white"&#62;Join Us&#60;/a&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;/div&#62;
&#60;!-- /.container --&#62;
&#60;/section&#62;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</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="pt-20 pb-10 !relative">
<section class="section-frame xl:mx-6 xl:rounded-[1rem] lg:mx-6 lg:rounded-[1rem] md:mx-6 md:rounded-[1rem] xxl:!mx-12 overflow-hidden">
<div class="wrapper image-wrapper bg-image bg-cover bg-overlay bg-overlay-light-500 bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.5)]" data-image-src="../../assets/img/photos/bg23.png">
<div class="container py-24 xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem] !text-center">
<div class="!absolute shape yellow hidden xl:block lg:block w-5" style="top: 18%; left: 5%;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 219.5 219.5" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/svg/pie.svg" class="svg-inject icon-svg !w-full !h-full"><path class="svg-fill" d="M219.5 219.5H0c0-58.19 23.14-114.06 64.29-155.21A219.561 219.561 0 01219.5 0v219.5z"></path></svg></div>
<div class="!absolute shape leaf hidden xl:block lg:block !w-[2.5rem]" style="bottom: 30%; left: 2%;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 457.71 446.45" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/svg/scribble.svg" class="svg-inject icon-svg !w-full !h-full"><path class="svg-fill" d="M205.62 442.54c-.51-.41-.99-.84-1.46-1.31-10.4-10.39-3.61-27.12 11.63-52.5 11.72-19.51 28.48-43.74 46.22-69.39 17.53-25.34 35.66-51.54 49.01-73.47 14.73-24.19 18.57-35.01 19.51-39.48-3.86-.28-13.15.3-33.78 6.52-19.71 5.94-43.09 14.92-65.7 23.6-63.8 24.49-85.35 31.41-96.51 19.5-3.21-3.43-7.62-11.04-1.12-23.54 2.49-4.79 6.64-10.51 12.68-17.5 10.4-12.03 25.04-26.34 40.55-41.49 14.02-13.7 28.53-27.87 39.53-40.11 9.93-11.04 14.15-17.43 15.94-20.82-3.43-.75-10.24-1.51-23.25-.92-14.99.68-33.44 2.89-51.28 5.02-46.92 5.61-74.09 8.33-86.81-.99-4.78-3.5-7.67-8.42-8.41-14.24-1.97-15.58 12.45-33.15 29.14-53.5 5.31-6.47 13.31-16.22 17.36-22.68-4.51-.38-12.43-.4-25.97 1.1-16.54 1.82-35.62 5.22-50.95 7.96-12.62 2.25-22.6 4.03-28.48 4.49C6.6 39.3.58 34.17.04 27.28c-.54-6.88 4.6-12.9 11.48-13.44 4.66-.37 14.58-2.13 26.06-4.18C54.56 6.63 75.7 2.86 94 1.07c26.41-2.6 40.16-.54 47.48 7.13 7.01 7.34 6.45 17.66-1.68 30.66-4.72 7.55-11.63 15.98-18.95 24.9-6.18 7.53-12.57 15.31-17.24 22.19-3.35 4.92-4.95 8.13-5.71 10.07 3 .54 9.09 1.08 20.87.43 13.21-.73 29.07-2.63 45.86-4.64 59.99-7.17 94.33-10.22 102.49 10.62 7.4 18.93-16.51 43.51-62.99 88.92-12.69 12.4-24.68 24.11-34.04 34.28-3.17 3.45-5.68 6.34-7.67 8.75 15.88-4.42 41.18-14.13 59.67-21.22 62.4-23.96 101.69-37.87 121.09-29.14 5.38 2.42 9.26 6.47 11.23 11.72 7.48 19.95-16.15 57.31-71.83 137.82-15.49 22.39-30.12 43.55-41.18 61.25-7.13 11.4-11.3 19.11-13.75 24.25 8.97-3.3 25.58-11 55.73-28.8 32.68-19.29 70.61-44.04 101.09-63.94 24.62-16.07 44.07-28.76 54.65-34.68 6.03-3.37 13.64-1.22 17.01 4.81 3.37 6.03 1.22 13.64-4.81 17.01-9.83 5.5-29.92 18.61-53.18 33.79-33.46 21.84-75.1 49.01-110.05 69.21-49.35 28.51-70.85 35.44-82.46 26.07z"></path></svg></div>
<div class="!absolute shape fuchsia hidden xl:block lg:block w-6" style="top: 20%; right: 2%; transform: rotate(70deg);"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 411.42 329.24" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/svg/tri.svg" class="svg-inject icon-svg !w-full !h-full"><g data-name="Layer 2"><path class="svg-fill" d="M164.34 21.92L8.72 251.15c-22.54 33.2 1.24 78.09 41.37 78.09h311.24c40.13 0 63.91-44.89 41.37-78.09L247.08 21.92a50 50 0 00-82.74 0z" data-name="Layer 1"></path></g></svg></div>
<div class="!absolute shape grape hidden xl:block lg:block w-6" style="bottom: 28%; right: 5%;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/svg/circle.svg" class="svg-inject icon-svg !w-full !h-full"><g data-name="Layer 2"><path class="svg-fill" d="M250 0C111.93 0 0 111.93 0 250s111.93 250 250 250 250-111.93 250-250S388.07 0 250 0zm0 425a175 175 0 11175-175 175 175 0 01-175 175z" data-name="Layer 1"></path></g></svg></div>
<div class="flex flex-wrap mx-[-15px]">
<div class="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">
<h2 class="font-bold !leading-[1.2] xl:!text-[3.5rem] !text-[calc(1.475rem_+_2.7vw)] lg:mx-[-2.5rem] xl:mx-0 !mb-5">Got a 👾 project in mind? Let's work together. ✌️</h2>
<p class="lead !text-[1.2rem] !leading-[1.65] md:!px-14 lg:!px-0 lg:mx-[-2.5rem] xl:mx-0 !mb-8">I bring rapid solutions to make the life of my clients easier. Have any questions? Reach out to me and I will get back to you shortly.</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">Contact Me <i class="uil uil-arrow-up-right !ml-[.3rem] before:content-['\e950']"></i></a>
</div>
<!-- /column -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
</div>
<!-- /.wrapper -->
</section>
<!-- /section -->
</div>
<!-- /.container -->
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
<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>
&#60;section class="section-frame xl:mx-6 xl:rounded-[1rem] lg:mx-6 lg:rounded-[1rem] md:mx-6 md:rounded-[1rem] xxl:!mx-12 overflow-hidden"&#62;
&#60;div class="wrapper image-wrapper bg-image bg-cover bg-overlay bg-overlay-light-500 bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.5)]" data-image-src="../../assets/img/photos/bg23.png"&#62;
&#60;div class="container py-24 xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem] !text-center"&#62;
&#60;div class="!absolute shape yellow hidden xl:block lg:block w-5" style="top: 18%; left: 5%;"&#62;&#60;img src="../../assets/img/svg/pie.svg" class="svg-inject icon-svg !w-full !h-full" alt="image"&#62;&#60;/div&#62;
&#60;div class="!absolute shape leaf hidden xl:block lg:block !w-[2.5rem]" style="bottom: 30%; left: 2%;"&#62;&#60;img src="../../assets/img/svg/scribble.svg" class="svg-inject icon-svg !w-full !h-full" alt="image"&#62;&#60;/div&#62;
&#60;div class="!absolute shape fuchsia hidden xl:block lg:block w-6" style="top: 20%; right: 2%; transform: rotate(70deg);"&#62;&#60;img src="../../assets/img/svg/tri.svg" class="svg-inject icon-svg !w-full !h-full" alt="image"&#62;&#60;/div&#62;
&#60;div class="!absolute shape grape hidden xl:block lg:block w-6" style="bottom: 28%; right: 5%;"&#62;&#60;img src="../../assets/img/svg/circle.svg" class="svg-inject icon-svg !w-full !h-full" alt="image"&#62;&#60;/div&#62;
&#60;div class="flex flex-wrap mx-[-15px]"&#62;
&#60;div class="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"&#62;
&#60;h2 class="font-bold !leading-[1.2] xl:!text-[3.5rem] !text-[calc(1.475rem_+_2.7vw)] lg:mx-[-2.5rem] xl:mx-0 !mb-5"&#62;Got a 👾 project in mind? Let's work together. &#9996;️&#60;/h2&#62;
&#60;p class="lead !text-[1.2rem] !leading-[1.65] md:!px-14 lg:!px-0 lg:mx-[-2.5rem] xl:mx-0 !mb-8"&#62;I bring rapid solutions to make the life of my clients easier. Have any questions? Reach out to me and I will get back to you shortly.&#60;/p&#62;
&#60;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"&#62;Contact Me &#60;i class="uil uil-arrow-up-right !ml-[.3rem] before:content-['\e950']"&#62;&#60;/i&#62;&#60;/a&#62;
&#60;/div&#62;
&#60;!-- /column --&#62;
&#60;/div&#62;
&#60;!-- /.row --&#62;
&#60;/div&#62;
&#60;!-- /.container --&#62;
&#60;/div&#62;
&#60;!-- /.wrapper --&#62;
&#60;/section&#62;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
<!--/.code-wrapper -->
</div>
<!--/.card-footer -->
</div>
<!--/.card -->
</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/call-to-action by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:01:16 GMT -->
</html>
Reference in New Issue View Git Blame Copy Permalink