Ümit Tunç
1257 lines
117 KiB
HTML
1257 lines
117 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
|
|
<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/docs/styleguide/illustrations by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:05:01 GMT -->
|
|
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
|
|
<meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
|
|
<meta name="author" content="elemis">
|
|
<title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
|
|
<link rel="shortcut icon" href="../../assets/img/favicon.png">
|
|
<link rel="stylesheet" type="text/css" href="../../assets/fonts/unicons/unicons.css">
|
|
<link rel="stylesheet" href="../../assets/css/plugins.css">
|
|
<link rel="stylesheet" href="../../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='../blocks/about.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block1.svg" alt="image"></div>
|
|
<span>About</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='../blocks/blog.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block2.svg" alt="image"></div>
|
|
<span>Blog</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='../blocks/call-to-action.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block3.svg" alt="image"></div>
|
|
<span>Call to Action</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='../blocks/clients.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block4.svg" alt="image"></div>
|
|
<span>Clients</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='../blocks/contact.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block5.svg" alt="image"></div>
|
|
<span>Contact</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='../blocks/facts.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block6.svg" alt="image"></div>
|
|
<span>Facts</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='../blocks/faq.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block7.svg" alt="image"></div>
|
|
<span>FAQ</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='../blocks/features.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block8.svg" alt="image"></div>
|
|
<span>Features</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='../blocks/footer.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block9.svg" alt="image"></div>
|
|
<span>Footer</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='../blocks/hero.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block10.svg" alt="image"></div>
|
|
<span>Hero</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='../blocks/misc.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block17.svg" alt="image"></div>
|
|
<span>Misc</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='../blocks/navbar.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block11.svg" alt="image"></div>
|
|
<span>Navbar</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='../blocks/portfolio.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block12.svg" alt="image"></div>
|
|
<span>Portfolio</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='../blocks/pricing.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block13.svg" alt="image"></div>
|
|
<span>Pricing</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='../blocks/process.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block14.svg" alt="image"></div>
|
|
<span>Process</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='../blocks/team.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block15.svg" alt="image"></div>
|
|
<span>Team</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='../blocks/testimonials.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block16.svg" alt="image"></div>
|
|
<span>Testimonials</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!--/.row -->
|
|
</li>
|
|
<!--/.mega-menu-content-->
|
|
</ul>
|
|
<!--/.dropdown-menu -->
|
|
</li>
|
|
<li class="nav-item dropdown dropdown-mega">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</a>
|
|
<ul class="dropdown-menu mega-menu">
|
|
<li class="mega-menu-content">
|
|
<div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
|
|
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full">
|
|
<h6 class="dropdown-header">Usage</h6>
|
|
<ul class="pl-0 list-none xl:columns-2 lg:columns-2 xl:pb-1 lg:pb-1">
|
|
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../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='colors.html'>Colors</a></li>
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='fonts.html'>Fonts</a></li>
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='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='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='illustrations.html'>Illustrations</a></li>
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='backgrounds.html'>Backgrounds</a></li>
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='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-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
|
|
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
|
|
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] 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-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] 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">Illustrations</h1>
|
|
<p class="lead xxl:!px-[3.5rem] !leading-[1.65] text-[0.9rem] font-medium">Below you can find the list of illustrations that come bundled with Trunçgil.</p>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<div class="container">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<aside class="xl:w-2/12 flex-[0_0_auto] !px-[15px] max-w-full sidebar doc-sidebar md:!mt-0 py-24 hidden xl:block">
|
|
<div class="widget pb-3">
|
|
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
|
|
<nav id="collapse-usage">
|
|
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
|
|
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
|
|
</ul>
|
|
</nav>
|
|
<!-- /nav -->
|
|
</div>
|
|
<!-- /.widget -->
|
|
<div class="widget pb-3">
|
|
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
|
|
<nav id="collapse-style">
|
|
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
|
|
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='colors.html'>Colors</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='fonts.html'>Fonts</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='icons-svg.html'>SVG Icons</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='icons-font.html'>Font Icons</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='active' href='illustrations.html'>Illustrations</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='backgrounds.html'>Backgrounds</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='misc.html'>Misc</a></li>
|
|
</ul>
|
|
</nav>
|
|
<!-- /nav -->
|
|
</div>
|
|
<!-- /.widget -->
|
|
<div class="widget pb-3">
|
|
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
|
|
<nav id="collapse-elements">
|
|
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/accordion.html'>Accordion</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/alerts.html'>Alerts</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/animations.html'>Animations</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/avatars.html'>Avatars</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/background.html'>Background</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/badges.html'>Badges</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/buttons.html'>Buttons</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/card.html'>Card</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/carousel.html'>Carousel</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/dividers.html'>Dividers</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/form-elements.html'>Form Elements</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/image-hover.html'>Image Hover</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/image-mask.html'>Image Mask</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/lightbox.html'>Lightbox</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/player.html'>Media Player</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/modal.html'>Modal</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/pagination.html'>Pagination</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/progressbar.html'>Progressbar</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/shadows.html'>Shadows</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/shapes.html'>Shapes</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/tables.html'>Tables</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/tabs.html'>Tabs</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/text-animations.html'>Text Animations</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/text-highlight.html'>Text Highlight</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/tiles.html'>Tiles</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
|
|
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../elements/typography.html'>Typography</a></li>
|
|
</ul>
|
|
</nav>
|
|
<!-- /nav -->
|
|
</div>
|
|
<!-- /.widget -->
|
|
</aside>
|
|
<!-- /column -->
|
|
<aside class="xl:w-2/12 flex-[0_0_auto] !px-[15px] max-w-full xl:!order-3 sidebar !sticky h-full top-0 md:!mt-0 py-24 hidden xl:block">
|
|
<div class="widget">
|
|
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
|
|
<nav class="xl:!pl-5" id="sidebar-nav">
|
|
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
|
|
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Set 1</a></li>
|
|
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Set 2</a></li>
|
|
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-3">Set 3</a></li>
|
|
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-4">Set 4</a></li>
|
|
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-5">Set 5</a></li>
|
|
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-6">Set 6</a></li>
|
|
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-7">Set 7</a></li>
|
|
</ul>
|
|
</nav>
|
|
<!-- /nav -->
|
|
</div>
|
|
<!-- /.widget -->
|
|
</aside>
|
|
<!-- /column -->
|
|
<div class="xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!order-2">
|
|
<section id="snippet-1" class="wrapper pt-24">
|
|
<h2 class="!mb-5 !leading-[1.35]">Set 1</h2>
|
|
<ul class="p-0 glyphs-svg flex flex-wrap mx-[-15px] !mt-[-30px]">
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i1.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/free-vector/growing-up-landing-page-design_4238115.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i1.html srcset="./assets/img/illustrations/i1@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i2.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/free-vector/startup-landing-page_4237363.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i2.html srcset="./assets/img/illustrations/i2@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i3.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/free-vector/teamwork-landing-page_4238239.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i3.html srcset="./assets/img/illustrations/i3@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i4.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/free-vector/about-us-landing-page-design_4238455.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i4.html srcset="./assets/img/illustrations/i4@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i5.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/free-vector/data-protection-landing-page-design_4237696.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i5.html srcset="./assets/img/illustrations/i5@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i6.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/free-vector/digital-marketing-landing-page-web-design_4237912.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i6.html srcset="./assets/img/illustrations/i6@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i7.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/free-vector/online-shopping-landing-page_4237971.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i7.html srcset="./assets/img/illustrations/i7@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i8.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/free-vector/seo-optimization-landing-page-design_4237777.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i8.html srcset="./assets/img/illustrations/i8@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section id="snippet-2" class="wrapper pt-24">
|
|
<h2 class="!mb-5 !leading-[1.35]">Set 2</h2>
|
|
<ul class="p-0 glyphs-svg flex flex-wrap mx-[-15px] !mt-[-30px]">
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i9.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/free-vector/app-development-landing-page_3103245.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i9.html srcset="./assets/img/illustrations/i9@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i10.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/free-vector/web-design-landing-page_3103246.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i10.html srcset="./assets/img/illustrations/i10@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i11.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/free-vector/data-analysis-landing-page_3103247.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i11.html srcset="./assets/img/illustrations/i11@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i12.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/free-vector/teamwork-design-landing-page_3103248.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i12.html srcset="./assets/img/illustrations/i12@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i13.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/free-vector/time-management-landing-page_3103250.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i13.html srcset="./assets/img/illustrations/i13@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i14.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/free-vector/workspace-design-landing-page_3103252.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i14.html srcset="./assets/img/illustrations/i14@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i15.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/free-vector/online-shopping-landing-page_3103253.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i15.html srcset="./assets/img/illustrations/i15@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i16.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/free-vector/responsive-design-landing-page_3103254.htm#page=56&query=landing+page&position=41" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i16.html srcset="./assets/img/illustrations/i16@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i17.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/free-vector/creative-process-landing-page_4405718.htm#page=9&query=landing+page&position=37" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i17.html srcset="./assets/img/illustrations/i17@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section id="snippet-3" class="wrapper pt-24">
|
|
<h2 class="!mb-5 !leading-[1.35]">Set 3</h2>
|
|
<ul class="p-0 glyphs-svg flex flex-wrap mx-[-15px] !mt-[-30px]">
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i18.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/premium-vector/3d-printing-technology-web-banner-landing-page-set_12447938.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i18.html srcset="./assets/img/illustrations/i18@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i19.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/premium-vector/advert-designer-illustrator-web-banner-landing-page_12447940.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i19.html srcset="./assets/img/illustrations/i19@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i20.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/premium-vector/cyber-web-security-specialist-web-banner-landing-page-set_12447948.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i20.html srcset="./assets/img/illustrations/i20@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i21.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/premium-vector/graphic-designer-digital-illustrator-web-banner-landing-page-set_12447958.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i21.html srcset="./assets/img/illustrations/i21@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i22.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/premium-vector/graphic-designer-digital-illustrator-web-banner-landing-page-set_12447958.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i22.html srcset="./assets/img/illustrations/i22@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i23.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/premium-vector/system-administrator-web-banner-landing-page-set_12447983.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i23.html srcset="./assets/img/illustrations/i23@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i24.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/premium-vector/web-design-web-layout-landing-page-set-presenting-content-web-pages-website-layout-composition-color-development-idea-computer-technology_13137171.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i24.html srcset="./assets/img/illustrations/i24@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i25.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/premium-vector/web-programming-web-layout-landing-page-set-coding-testing-writing-program-website-using-internet-different-software-website-development_13137173.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i25.html srcset="./assets/img/illustrations/i25@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i26.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/premium-vector/mobile-app-development-web-layout-landing-page-set-modern-technology-smartphone-interface-design-application-building-programming_13137153.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i26.html srcset="./assets/img/illustrations/i26@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i27.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/premium-vector/director-web-banner-landing-page_12447955.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i27.html srcset="./assets/img/illustrations/i27@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section id="snippet-4" class="wrapper pt-24">
|
|
<h2 class="!mb-5 !leading-[1.35]">Set 4</h2>
|
|
<ul class="p-0 glyphs-svg flex flex-wrap mx-[-15px] !mt-[-30px]">
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/ui1.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/free-vector/mobile-phone-interface-3d-concepts-landing-page_6721408.htm#page=1&query=Seo%20company&position=36&from_view=keyword" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/ui1.html srcset="./assets/img/illustrations/ui1@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/ui2.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/free-vector/digital-screens-plants-3d-concepts-landing-page_6721403.htm#page=1&query=3d&position=9&from_view=search" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/ui2.html srcset="./assets/img/illustrations/ui2@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/ui3.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/free-vector/online-purchases-from-homr-3d-concepts-landing-page_6721402.htm#page=1&query=3d&position=48&from_view=search" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/ui3.html srcset="./assets/img/illustrations/ui3@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/ui4.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/free-vector/social-online-interaction-3d-concepts-landing-page_6721405.htm#page=1&position=9&from_view=user" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/ui4.html srcset="./assets/img/illustrations/ui4@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/ui5.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/premium-vector/landing-page-template-with-easy-shipping_12392824.htm#page=1&position=21&from_view=user" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/ui5.html srcset="./assets/img/illustrations/ui5@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section id="snippet-5" class="wrapper pt-24">
|
|
<h2 class="!mb-5 !leading-[1.35]">Set 5</h2>
|
|
<ul class="p-0 glyphs-svg flex flex-wrap mx-[-15px] !mt-[-30px]">
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/3d1.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/premium-psd/3-email-campaign-with-mobile-phone_15751106.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/3d1.html srcset="./assets/img/illustrations/3d1@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/3d2.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/premium-psd/great-idea-3d-illustration-concept_14514386.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/3d2.html srcset="./assets/img/illustrations/3d2@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/3d3.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/premium-psd/3d-email-campaign-with-laptop_15751105.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/3d3.html srcset="./assets/img/illustrations/3d3@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/3d4.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/premium-psd/3d-illustration-concept-man-looking-ideas_14514382.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/3d4.html srcset="./assets/img/illustrations/3d4@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/3d5.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/premium-psd/3d-new-employee-interview-with-applicants-identity_16069636.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/3d5.html srcset="./assets/img/illustrations/3d5@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/3d6.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/premium-psd/3d-online-connection-with-male-character_15751113.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/3d6.html srcset="./assets/img/illustrations/3d6@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/3d7.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/premium-psd/3d-online-shopping-illustration_16523091.htm#page=1&query=online%20shopping%20illustration&position=7&from_view=search" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/3d7.html srcset="./assets/img/illustrations/3d7@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/3d8.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/premium-psd/3d-working-time-with-male-female-characters_16644661.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/3d8.html srcset="./assets/img/illustrations/3d8@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/3d9.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/premium-psd/3d-startup-life-with-man-standing-rocket_16644633.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/3d9.html srcset="./assets/img/illustrations/3d9@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/3d10.png" alt="image"></figure>
|
|
<a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank" href="https://www.freepik.com/premium-psd/3d-hosting-with-male-character-using-laptop_16428910.htm#page=1&position=21&from_view=detail#&position=21&from_view=detail">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/3d10.html srcset="./assets/img/illustrations/3d10@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/3d11.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/premium-psd/3d-startup-life-with-man-holding-notes_16644607.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/3d11.html srcset="./assets/img/illustrations/3d11@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/3d12.png" alt="image"></figure>
|
|
<a href="https://www.freepik.com/premium-psd/3d-think-illustration_14902775.htm" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/3d12.html srcset="./assets/img/illustrations/3d12@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section id="snippet-6" class="wrapper pt-24">
|
|
<h2 class="!mb-5 !leading-[1.35]">Set 6</h2>
|
|
<ul class="p-0 glyphs-svg flex flex-wrap mx-[-15px] !mt-[-30px]">
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i28.png" alt="image"></figure>
|
|
<a href="https://iconpark.oceanengine.com/illustrations/9" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i28.html srcset="./assets/img/illustrations/i28@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i29.png" alt="image"></figure>
|
|
<a href="https://iconpark.oceanengine.com/illustrations/9" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i29.html srcset="./assets/img/illustrations/i29@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i30.png" alt="image"></figure>
|
|
<a href="https://iconpark.oceanengine.com/illustrations/9" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i30.html srcset="./assets/img/illustrations/i30@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i31.png" alt="image"></figure>
|
|
<a href="https://iconpark.oceanengine.com/illustrations/9" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i31.html srcset="./assets/img/illustrations/i31@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/i32.png" alt="image"></figure>
|
|
<a href="https://iconpark.oceanengine.com/illustrations/9" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/i32.html srcset="./assets/img/illustrations/i32@2x.png 2x" alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
<section id="snippet-7" class="wrapper py-24">
|
|
<h2 class="!mb-5 !leading-[1.35]">Set 7</h2>
|
|
<ul class="p-0 glyphs-svg flex flex-wrap mx-[-15px] !mt-[-30px]">
|
|
<li class="w-6/12 xl:w-4/12 lg:w-4/12 md:w-4/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 pb-6 flex flex-col justify-end items-center">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/ni1.png" alt="image"></figure>
|
|
<a href="https://www.figma.com/community/file/1000311109311441524" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/ni1.html alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 xl:w-4/12 lg:w-4/12 md:w-4/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/ni2.png" alt="image"></figure>
|
|
<a href="https://www.figma.com/community/file/1000311109311441524" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/ni2.html alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 xl:w-4/12 lg:w-4/12 md:w-4/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/ni3.png" alt="image"></figure>
|
|
<a href="https://www.figma.com/community/file/1000311109311441524" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/ni3.html alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 xl:w-4/12 lg:w-4/12 md:w-4/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/ni4.png" alt="image"></figure>
|
|
<a href="https://www.figma.com/community/file/1000311109311441524" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/ni4.html alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 xl:w-4/12 lg:w-4/12 md:w-4/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/ni5.png" alt="image"></figure>
|
|
<a href="https://www.figma.com/community/file/1000311109311441524" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/ni5.html alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 xl:w-4/12 lg:w-4/12 md:w-4/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/ni6.png" alt="image"></figure>
|
|
<a href="https://www.figma.com/community/file/1000311109311441524" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/ni6.html alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 xl:w-4/12 lg:w-4/12 md:w-4/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/ni7.png" alt="image"></figure>
|
|
<a href="https://www.figma.com/community/file/1000311109311441524" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/ni7.html alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 xl:w-4/12 lg:w-4/12 md:w-4/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/ni8.png" alt="image"></figure>
|
|
<a href="https://www.figma.com/community/file/1000311109311441524" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/ni8.html alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
<li class="w-6/12 xl:w-4/12 lg:w-4/12 md:w-4/12 flex-[0_0_auto] !px-[15px] max-w-full !text-center !mt-[30px]">
|
|
<div class="card !h-full">
|
|
<div class="card-body !p-10 !pb-6">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/illustrations/ni9.png" alt="image"></figure>
|
|
<a href="https://www.figma.com/community/file/1000311109311441524" class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom hover:!text-[#3f78e0] hover:after:!text-[#3f78e0] !mt-6" target="_blank">Resource</a>
|
|
</div>
|
|
<div class="card-footer !relative cursor-pointer text-[0.7rem] !p-[.5rem_.2rem]"><a class="stretched-link !text-[#60697b] btn-copy-icon" data-clipboard-text="<img class="max-w-full h-auto" src=_/assets/img/illustrations/ni9.html alt="" />">Copy</a></div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</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-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
|
|
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
|
|
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
|
|
</svg>
|
|
</div>
|
|
<script src="../../assets/js/plugins.js"></script>
|
|
<script src="../../assets/js/theme.js"></script>
|
|
</body>
|
|
|
|
|
|
<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/docs/styleguide/illustrations by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:05:47 GMT -->
|
|
</html> |