Ümit Tunç
2614 lines
231 KiB
HTML
2614 lines
231 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
|
|
<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/docs/blocks/portfolio by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:01:39 GMT -->
|
|
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="An impressive and flawless site template that includes various UI elements and countless features, attractive ready-made blocks and rich pages, basically everything you need to create a unique and professional website.">
|
|
<meta name="keywords" content="Tailwind CSS, business, corporate, creative, gulp, marketing, minimal, modern, multipurpose, one page, responsive, saas, sass, seo, startup, html5 template, site template">
|
|
<meta name="author" content="elemis">
|
|
<title>Trunçgil - Modern & Multipurpose Tailwind CSS Template</title>
|
|
<link rel="shortcut icon" href="../../assets/img/favicon.png">
|
|
<link rel="stylesheet" type="text/css" href="../../assets/fonts/unicons/unicons.css">
|
|
<link rel="stylesheet" href="../../assets/css/plugins.css">
|
|
<link rel="stylesheet" href="../../assets/css/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="grow shrink-0">
|
|
<header class="relative wrapper bg-soft-primary !bg-[#edf2fc]">
|
|
<nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
|
|
<div class="container xl:!flex-row lg:!flex-row !flex-nowrap items-center">
|
|
<div class="navbar-brand w-full">
|
|
<a href='../../index.html'>
|
|
<img src="../../assets/img/truncgil-yatay.svg" alt="image">
|
|
</a>
|
|
</div>
|
|
<div class="navbar-collapse offcanvas offcanvas-nav offcanvas-start">
|
|
<div class="offcanvas-header xl:!hidden lg:!hidden flex items-center justify-between flex-row p-6">
|
|
|
|
<button type="button" class="btn-close btn-close-white !mr-[-0.75rem] m-0 p-0 leading-none !text-[#343f52] transition-all duration-[0.2s] ease-in-out border-0 motion-reduce:transition-none before:text-[1.05rem] before:text-white before:content-['\ed3b'] before:w-[1.8rem] before:h-[1.8rem] before:leading-[1.8rem] before:shadow-none before:transition-[background] before:duration-[0.2s] before:ease-in-out before:!flex before:justify-center before:items-center before:m-0 before:p-0 before:rounded-[100%] hover:no-underline bg-inherit before:bg-[rgba(255,255,255,.08)] before:font-Unicons hover:before:bg-[rgba(0,0,0,.11)]" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<div class="offcanvas-body xl:!ml-auto lg:!ml-auto flex flex-col !h-full">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item dropdown dropdown-mega">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Demos</a>
|
|
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
|
|
<li class="mega-menu-content mega-menu-scroll">
|
|
<ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-10px] lg:mx-[-10px] xl:!mt-[-10px] lg:!mt-[-10px] !pl-0 list-none">
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo1.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi1.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 1</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo2.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi2.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 2</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo3.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi3.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 3</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo4.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi4.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 4</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo5.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi5.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 5</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo6.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi6.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 6</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo7.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi7.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 7</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo8.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi8.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 8</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo9.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi9.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 9</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo10.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi10.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 10</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo11.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi11.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 11</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo12.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi12.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 12</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo13.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi13.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 13</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo14.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi14.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 14</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo15.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi15.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 15</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo16.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi16.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 16</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo17.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi17.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 17</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo18.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi18.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 18</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo19.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi19.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 19</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo20.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi20.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 20</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo21.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi21.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 21</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo22.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi22.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 22</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo23.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi23.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 23</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo24.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi24.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 24</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo25.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi25.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 25</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo26.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi26.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 26</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo27.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi27.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 27</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo28.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi28.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 28</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo29.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi29.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 29</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo30.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi30.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 30</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo31.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi31.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 31</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo32.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi32.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 32</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo33.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi33.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 33</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[10px] xl:!mt-[10px] lg:!px-[10px] lg:!mt-[10px]">
|
|
<a class='dropdown-item' href='../../demo34.html'>
|
|
<figure class="!rounded-[.4rem] lift hidden xl:block lg:block"><img class="!rounded-[.4rem]" src="../../assets/img/demos/mi34.jpg" alt="image"></figure>
|
|
<span class="xl:!hidden lg:!hidden">Demo 34</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!--/.row -->
|
|
<span class="hidden xl:!flex lg:!flex"><i class="uil uil-direction before:content-['\ea93']"></i><strong>Scroll to view more</strong></span>
|
|
</li>
|
|
<!--/.mega-menu-content-->
|
|
</ul>
|
|
<!--/.dropdown-menu -->
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Pages</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='../../services.html'>Services I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../services2.html'>Services II</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='../../about.html'>About I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../about2.html'>About II</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='../../shop.html'>Shop I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../shop2.html'>Shop II</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../shop-product.html'>Product Page</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../shop-cart.html'>Shopping Cart</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../shop-checkout.html'>Checkout</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='../../contact.html'>Contact I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../contact2.html'>Contact II</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../contact3.html'>Contact III</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='../../career.html'>Job Listing I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../career2.html'>Job Listing II</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../career-job.html'>Job Description</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='../../404.html'>404 Not Found</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../page-loader.html'>Page Loader</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../signin.html'>Sign In I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../signin2.html'>Sign In II</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../signup.html'>Sign Up I</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../signup2.html'>Sign Up II</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../terms.html'>Terms</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../pricing.html'>Pricing</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../onepage.html'>One Page</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Projects</a>
|
|
<div class="dropdown-menu dropdown-lg">
|
|
<div class="dropdown-lg-content">
|
|
<div>
|
|
<h6 class="dropdown-header">Project Pages</h6>
|
|
<ul class="pl-0 list-none">
|
|
<li><a class='dropdown-item' href='../../projects.html'>Projects I</a></li>
|
|
<li><a class='dropdown-item' href='../../projects2.html'>Projects II</a></li>
|
|
<li><a class='dropdown-item' href='../../projects3.html'>Projects III</a></li>
|
|
<li><a class='dropdown-item' href='../../projects4.html'>Projects IV</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- /.column -->
|
|
<div>
|
|
<h6 class="dropdown-header">Single Projects</h6>
|
|
<ul class="pl-0 list-none">
|
|
<li><a class='dropdown-item' href='../../single-project.html'>Single Project I</a></li>
|
|
<li><a class='dropdown-item' href='../../single-project2.html'>Single Project II</a></li>
|
|
<li><a class='dropdown-item' href='../../single-project3.html'>Single Project III</a></li>
|
|
<li><a class='dropdown-item' href='../../single-project4.html'>Single Project IV</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- /.column -->
|
|
</div>
|
|
<!-- /auto-column -->
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='../../blog.html'>Blog without Sidebar</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../blog2.html'>Blog with Sidebar</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../blog3.html'>Blog with Left Sidebar</a></li>
|
|
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
|
|
<ul class="dropdown-menu">
|
|
<li class="nav-item"><a class='dropdown-item' href='../../blog-post.html'>Post without Sidebar</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../blog-post2.html'>Post with Sidebar</a></li>
|
|
<li class="nav-item"><a class='dropdown-item' href='../../blog-post3.html'>Post with Left Sidebar</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item dropdown dropdown-mega">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Blocks</a>
|
|
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
|
|
<li class="mega-menu-content">
|
|
<ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='about.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block1.svg" alt="image"></div>
|
|
<span>About</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='blog.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block2.svg" alt="image"></div>
|
|
<span>Blog</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='call-to-action.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block3.svg" alt="image"></div>
|
|
<span>Call to Action</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='clients.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block4.svg" alt="image"></div>
|
|
<span>Clients</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='contact.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block5.svg" alt="image"></div>
|
|
<span>Contact</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='facts.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block6.svg" alt="image"></div>
|
|
<span>Facts</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='faq.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block7.svg" alt="image"></div>
|
|
<span>FAQ</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='features.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block8.svg" alt="image"></div>
|
|
<span>Features</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='footer.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block9.svg" alt="image"></div>
|
|
<span>Footer</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='hero.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block10.svg" alt="image"></div>
|
|
<span>Hero</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='misc.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block17.svg" alt="image"></div>
|
|
<span>Misc</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='navbar.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block11.svg" alt="image"></div>
|
|
<span>Navbar</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='portfolio.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block12.svg" alt="image"></div>
|
|
<span>Portfolio</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='pricing.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block13.svg" alt="image"></div>
|
|
<span>Pricing</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='process.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block14.svg" alt="image"></div>
|
|
<span>Process</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='team.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block15.svg" alt="image"></div>
|
|
<span>Team</span>
|
|
</a>
|
|
</li>
|
|
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='testimonials.html'>
|
|
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="../../assets/img/demos/block16.svg" alt="image"></div>
|
|
<span>Testimonials</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<!--/.row -->
|
|
</li>
|
|
<!--/.mega-menu-content-->
|
|
</ul>
|
|
<!--/.dropdown-menu -->
|
|
</li>
|
|
<li class="nav-item dropdown dropdown-mega">
|
|
<a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Documentation</a>
|
|
<ul class="dropdown-menu mega-menu">
|
|
<li class="mega-menu-content">
|
|
<div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
|
|
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full">
|
|
<h6 class="dropdown-header">Usage</h6>
|
|
<ul class="pl-0 list-none xl:columns-2 lg:columns-2 xl:pb-1 lg:pb-1">
|
|
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../index.html'>Get Started</a></li>
|
|
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../forms.html'>Forms</a></li>
|
|
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../faq.html'>FAQ</a></li>
|
|
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../changelog.html'>Changelog</a></li>
|
|
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../credits.html'>Credits</a></li>
|
|
</ul>
|
|
<h6 class="dropdown-header xl:!mt-6 lg:!mt-6">Styleguide</h6>
|
|
<ul class="pl-0 list-none xl:columns-2 lg:columns-2 ">
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/colors.html'>Colors</a></li>
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/fonts.html'>Fonts</a></li>
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/icons-font.html'>Font Icons</a></li>
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/illustrations.html'>Illustrations</a></li>
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
|
|
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item' href='../styleguide/misc.html'>Misc</a></li>
|
|
</ul>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] max-w-full xl:border-l-[rgba(164,174,198,0.2)] xl:border-l xl:border-solid lg:border-l-[rgba(164,174,198,0.2)] lg:border-l lg:border-solid">
|
|
<h6 class="dropdown-header">Elements</h6>
|
|
<ul class="pl-0 list-none xl:columns-3 lg:columns-3 ">
|
|
<li><a class='dropdown-item' href='../elements/accordion.html'>Accordion</a></li>
|
|
<li><a class='dropdown-item' href='../elements/alerts.html'>Alerts</a></li>
|
|
<li><a class='dropdown-item' href='../elements/animations.html'>Animations</a></li>
|
|
<li><a class='dropdown-item' href='../elements/avatars.html'>Avatars</a></li>
|
|
<li><a class='dropdown-item' href='../elements/background.html'>Background</a></li>
|
|
<li><a class='dropdown-item' href='../elements/badges.html'>Badges</a></li>
|
|
<li><a class='dropdown-item' href='../elements/buttons.html'>Buttons</a></li>
|
|
<li><a class='dropdown-item' href='../elements/card.html'>Card</a></li>
|
|
<li><a class='dropdown-item' href='../elements/carousel.html'>Carousel</a></li>
|
|
<li><a class='dropdown-item' href='../elements/dividers.html'>Dividers</a></li>
|
|
<li><a class='dropdown-item' href='../elements/form-elements.html'>Form Elements</a></li>
|
|
<li><a class='dropdown-item' href='../elements/image-hover.html'>Image Hover</a></li>
|
|
<li><a class='dropdown-item' href='../elements/image-mask.html'>Image Mask</a></li>
|
|
<li><a class='dropdown-item' href='../elements/lightbox.html'>Lightbox</a></li>
|
|
<li><a class='dropdown-item' href='../elements/player.html'>Media Player</a></li>
|
|
<li><a class='dropdown-item' href='../elements/modal.html'>Modal</a></li>
|
|
<li><a class='dropdown-item' href='../elements/pagination.html'>Pagination</a></li>
|
|
<li><a class='dropdown-item' href='../elements/progressbar.html'>Progressbar</a></li>
|
|
<li><a class='dropdown-item' href='../elements/shadows.html'>Shadows</a></li>
|
|
<li><a class='dropdown-item' href='../elements/shapes.html'>Shapes</a></li>
|
|
<li><a class='dropdown-item' href='../elements/tables.html'>Tables</a></li>
|
|
<li><a class='dropdown-item' href='../elements/tabs.html'>Tabs</a></li>
|
|
<li><a class='dropdown-item' href='../elements/text-animations.html'>Text Animations</a></li>
|
|
<li><a class='dropdown-item' href='../elements/text-highlight.html'>Text Highlight</a></li>
|
|
<li><a class='dropdown-item' href='../elements/tiles.html'>Tiles</a></li>
|
|
<li><a class='dropdown-item' href='../elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
|
|
<li><a class='dropdown-item' href='../elements/typography.html'>Typography</a></li>
|
|
</ul>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</li>
|
|
<!--/.mega-menu-content-->
|
|
</ul>
|
|
<!--/.dropdown-menu -->
|
|
</li>
|
|
</ul>
|
|
<!-- /.navbar-nav -->
|
|
<div class="offcanvas-footer xl:!hidden lg:!hidden">
|
|
<div>
|
|
<a href="mailto:first.last@email.com" class="link-inverse">info@truncgil.com</a>
|
|
<br> 00 (123) 456 78 90 <br>
|
|
<nav class="nav social social-white !mt-4">
|
|
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
|
|
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
|
|
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
|
|
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
|
|
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
|
|
</nav>
|
|
<!-- /.social -->
|
|
</div>
|
|
</div>
|
|
<!-- /.offcanvas-footer -->
|
|
</div>
|
|
<!-- /.offcanvas-body -->
|
|
</div>
|
|
<!-- /.navbar-collapse -->
|
|
<div class="navbar-other w-full !flex !ml-auto">
|
|
<ul class="navbar-nav !flex-row !items-center !ml-auto">
|
|
<li class="nav-item dropdown language-select uppercase group">
|
|
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
|
|
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
|
|
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
|
|
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
|
|
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item hidden xl:block lg:block md:block">
|
|
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
|
|
</li>
|
|
<li class="nav-item xl:!hidden lg:!hidden">
|
|
<button class="hamburger offcanvas-nav-btn"><span></span></button>
|
|
</li>
|
|
</ul>
|
|
<!-- /.navbar-nav -->
|
|
</div>
|
|
<!-- /.navbar-other -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</nav>
|
|
<!-- /.navbar -->
|
|
</header>
|
|
<!-- /header -->
|
|
<section class="wrapper !bg-[#edf2fc]">
|
|
<div class="container pt-10 pb-14 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24 !text-center">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="md:w-9/12 lg:w-7/12 xl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-3">Blocks - Portfolio</h1>
|
|
<p class="lead xxl:!px-[2.5rem] !leading-[1.65] text-[0.9rem] font-medium">Copy any custom block snippet below and paste it on your page to build your website easily.</p>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container py-12">
|
|
<h2 class="h5">Filter Blocks:</h2>
|
|
<ul class="pl-0 list-none !mb-0">
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='about.html'>About</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='blog.html'>Blog</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='call-to-action.html'>Call to Action</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='clients.html'>Clients</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='contact.html'>Contact</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='facts.html'>Facts</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='faq.html'>FAQ</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='features.html'>Features</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='footer.html'>Footer</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='hero.html'>Hero</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='misc.html'>Misc</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='navbar.html'>Navbar</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded !text-[#e31e24] pointer-events-none' href='portfolio.html'>Portfolio</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='pricing.html'>Pricing</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='process.html'>Process</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='team.html'>Team</a></li>
|
|
<li class="inline-block !mr-1 !mb-2"><a class='btn btn-soft-ash btn-sm rounded ' href='testimonials.html'>Testimonials</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-1" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div class="flex flex-wrap mx-[-15px] items-center !mb-7">
|
|
<div class="md:w-8/12 lg:w-8/12 xl:w-7/12 xxl:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full xl:!pr-28 lg:!pr-28">
|
|
<h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3">Recent Projects</h2>
|
|
<p class="lead !text-[1.05rem] !leading-[1.6] font-medium">We love to turn ideas into beautiful things.</p>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<div class="projects-tiles">
|
|
<div class="project itemgrid grid-view">
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-50px] xl:!mt-[-70px] lg:!mt-[-70px] md:!mt-[-70px] isotope">
|
|
<div class="item xl:w-5/12 lg:w-5/12 md:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px] max-md:!mt-[50px]">
|
|
<figure class="lift rounded !mb-6"><a href='../../single-project3.html'> <img src="../../assets/img/photos/rp1.jpg" alt="image"></a></figure>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-3 !text-[#747ed1]">Stationary</div>
|
|
<h3 class="post-title">Ipsum Ultricies Cursus</h3>
|
|
</div>
|
|
<!-- /.item -->
|
|
<div class="item xl:w-7/12 lg:w-7/12 md:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full xl:!mt-28 lg:!mt-28 md:!mt-28 max-md:!mt-[50px]">
|
|
<figure class="lift rounded !mb-6"><a href='../../single-project2.html'> <img src="../../assets/img/photos/rp2.jpg" alt="image"></a></figure>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-3 !text-[#f78b77]">Invitation</div>
|
|
<h3 class="post-title">Mollis Ipsum Mattis</h3>
|
|
</div>
|
|
<!-- /.item -->
|
|
<div class="item xl:w-5/12 lg:w-5/12 md:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px] max-md:!mt-[50px]">
|
|
<figure class="lift rounded !mb-6"><a href='../../single-project.html'> <img src="../../assets/img/photos/rp3.jpg" alt="image"></a></figure>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-3 !text-[#e2626b]">Notebook</div>
|
|
<h3 class="post-title">Magna Tristique Inceptos</h3>
|
|
</div>
|
|
<!-- /.item -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.project -->
|
|
</div>
|
|
<!-- /.projects-tiles -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-1">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-1" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper !bg-[#ffffff] ">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div class="flex flex-wrap mx-[-15px] items-center !mb-7">
|
|
<div class="md:w-8/12 lg:w-8/12 xl:w-7/12 xxl:w-6/12 flex-[0_0_auto] !px-[15px] max-w-full xl:!pr-28 lg:!pr-28">
|
|
<h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3">Recent Projects</h2>
|
|
<p class="lead !text-[1.05rem] !leading-[1.6] font-medium">We love to turn ideas into beautiful things.</p>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<div class="projects-tiles">
|
|
<div class="project itemgrid grid-view">
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-50px] xl:!mt-[-70px] lg:!mt-[-70px] md:!mt-[-70px] isotope">
|
|
<div class="item xl:w-5/12 lg:w-5/12 md:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px] max-md:!mt-[50px]">
|
|
<figure class="lift rounded !mb-6"><a href="../../single-project3.html"> <img src="../../assets/img/photos/rp1.jpg" alt="image"></a></figure>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-3 !text-[#747ed1]">Stationary</div>
|
|
<h3 class="post-title">Ipsum Ultricies Cursus</h3>
|
|
</div>
|
|
<!-- /.item -->
|
|
<div class="item xl:w-7/12 lg:w-7/12 md:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full xl:!mt-28 lg:!mt-28 md:!mt-28 max-md:!mt-[50px]">
|
|
<figure class="lift rounded !mb-6"><a href="../../single-project2.html"> <img src="../../assets/img/photos/rp2.jpg" alt="image"></a></figure>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-3 !text-[#f78b77]">Invitation</div>
|
|
<h3 class="post-title">Mollis Ipsum Mattis</h3>
|
|
</div>
|
|
<!-- /.item -->
|
|
<div class="item xl:w-5/12 lg:w-5/12 md:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px] max-md:!mt-[50px]">
|
|
<figure class="lift rounded !mb-6"><a href="../../single-project.html"> <img src="../../assets/img/photos/rp3.jpg" alt="image"></a></figure>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-3 !text-[#e2626b]">Notebook</div>
|
|
<h3 class="post-title">Magna Tristique Inceptos</h3>
|
|
</div>
|
|
<!-- /.item -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.project -->
|
|
</div>
|
|
<!-- /.projects-tiles -->
|
|
</div>
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-2" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="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 !text-center">
|
|
<h2 class="!text-[.75rem] uppercase !text-[#aab0bc] !mb-3 !tracking-[0.02rem] !leading-[1.35]">Latest Projects</h2>
|
|
<h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-10">Check out some of our awesome projects with <span class="!relative z-[2] after:content-[''] after:absolute after:z-[-1] after:block after:bg-no-repeat after:bg-bottom after:bottom-[-0.1em] after:w-[110%] after:h-[0.3em] after:-translate-x-2/4 after:left-2/4 style-2 yellow">creative</span> ideas and great design.</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="swiper-container grid-view !mb-6" data-margin="30" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide group">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd7.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd7-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='../../single-project.html'>Cras Fermentum Sem</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Stationary</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide group">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd8.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd8-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='../../single-project2.html'>Mollis Ipsum Mattis</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Magazine, Book</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide group">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd9.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd9-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='../../single-project3.html'>Ipsum Ultricies Cursus</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Packaging</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide group">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd10.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd10-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='../../single-project.html'>Inceptos Euismod Egestas</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Stationary, Branding</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide group">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd11.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd11-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='../../single-project2.html'>Ipsum Mollis Vulputate</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Packaging</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide group">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd12.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd12-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='../../single-project3.html'>Porta Ornare Cras</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Branding</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-2">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-2" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper !bg-[#ffffff] ">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
|
|
<h2 class="!text-[.75rem] uppercase !text-[#aab0bc] !mb-3 !tracking-[0.02rem] !leading-[1.35]">Latest Projects</h2>
|
|
<h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-10">Check out some of our awesome projects with <span class="!relative z-[2] after:content-[''] after:absolute after:z-[-1] after:block after:bg-no-repeat after:bg-bottom after:bottom-[-0.1em] after:w-[110%] after:h-[0.3em] after:-translate-x-2/4 after:left-2/4 style-2 yellow">creative</span> ideas and great design.</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="swiper-container grid-view !mb-6" data-margin="30" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide group">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd7.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd7-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a href="../../single-project.html" class="!text-[#343f52] hover:!text-[#e31e24]">Cras Fermentum Sem</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Stationary</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide group">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd8.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd8-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a href="../../single-project2.html" class="!text-[#343f52] hover:!text-[#e31e24]">Mollis Ipsum Mattis</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Magazine, Book</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide group">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd9.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd9-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a href="../../single-project3.html" class="!text-[#343f52] hover:!text-[#e31e24]">Ipsum Ultricies Cursus</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Packaging</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide group">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd10.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd10-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a href="../../single-project.html" class="!text-[#343f52] hover:!text-[#e31e24]">Inceptos Euismod Egestas</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Stationary, Branding</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide group">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd11.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd11-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a href="../../single-project2.html" class="!text-[#343f52] hover:!text-[#e31e24]">Ipsum Mollis Vulputate</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Packaging</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide group">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd12.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd12-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a href="../../single-project3.html" class="!text-[#343f52] hover:!text-[#e31e24]">Porta Ornare Cras</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Branding</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-3" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div class="projects-tiles">
|
|
<div class="project itemgrid grid-view">
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-50px] xl:!mt-[-70px] lg:!mt-[-70px] md:!mt-[-70px] isotope">
|
|
<div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full md:!mt-7 lg:!mt-20 xl:!mt-20 max-md:!mt-[50px]">
|
|
<div class="project-details flex justify-center !self-end flex-col !pl-0 !pb-0">
|
|
<div class="post-header">
|
|
<h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-4 xxl:!pr-20">Check out some of our recent projects below.</h2>
|
|
<p class="lead text-[1.05rem] !leading-[1.6] font-medium !mb-0">We love to turn ideas into beautiful things.</p>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.item -->
|
|
<div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px] max-md:!mt-[50px]">
|
|
<figure class="lift rounded !mb-6"><a href='../../single-project3.html'> <img src="../../assets/img/photos/rp1.jpg" alt="image"></a></figure>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#a07cc5] !mb-3 !text-[#a07cc5]">Stationary</div>
|
|
<h2 class="post-title h3">Ipsum Ultricies Cursus</h2>
|
|
</div>
|
|
<!-- /.item -->
|
|
<div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px] max-md:!mt-[50px]">
|
|
<figure class="lift rounded !mb-6"><a href='../../single-project2.html'> <img src="../../assets/img/photos/rp2.jpg" alt="image"></a></figure>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#7cb798] !mb-3 !text-[#7cb798]">Invitation</div>
|
|
<h2 class="post-title h3">Mollis Ipsum Mattis</h2>
|
|
</div>
|
|
<!-- /.item -->
|
|
<div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px] max-md:!mt-[50px]">
|
|
<figure class="lift rounded !mb-6"><a href='../../single-project.html'> <img src="../../assets/img/photos/rp3.jpg" alt="image"></a></figure>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#747ed1] !mb-3 !text-[#747ed1]">Notebook</div>
|
|
<h2 class="post-title h3">Magna Tristique Inceptos</h2>
|
|
</div>
|
|
<!-- /.item -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.project -->
|
|
</div>
|
|
<!-- /.projects-tiles -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-3">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-3" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code><section class="wrapper !bg-[#ffffff] ">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div class="projects-tiles">
|
|
<div class="project itemgrid grid-view">
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-50px] xl:!mt-[-70px] lg:!mt-[-70px] md:!mt-[-70px] isotope">
|
|
<div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full md:!mt-7 lg:!mt-20 xl:!mt-20 max-md:!mt-[50px]">
|
|
<div class="project-details flex justify-center !self-end flex-col !pl-0 !pb-0">
|
|
<div class="post-header">
|
|
<h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-4 xxl:!pr-20">Check out some of our recent projects below.</h2>
|
|
<p class="lead text-[1.05rem] !leading-[1.6] font-medium !mb-0">We love to turn ideas into beautiful things.</p>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.item -->
|
|
<div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px] max-md:!mt-[50px]">
|
|
<figure class="lift rounded !mb-6"><a href="../../single-project3.html"> <img src="../../assets/img/photos/rp1.jpg" alt="image"></a></figure>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#a07cc5] !mb-3 !text-[#a07cc5]">Stationary</div>
|
|
<h2 class="post-title h3">Ipsum Ultricies Cursus</h2>
|
|
</div>
|
|
<!-- /.item -->
|
|
<div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px] max-md:!mt-[50px]">
|
|
<figure class="lift rounded !mb-6"><a href="../../single-project2.html"> <img src="../../assets/img/photos/rp2.jpg" alt="image"></a></figure>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#7cb798] !mb-3 !text-[#7cb798]">Invitation</div>
|
|
<h2 class="post-title h3">Mollis Ipsum Mattis</h2>
|
|
</div>
|
|
<!-- /.item -->
|
|
<div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[70px] max-md:!mt-[50px]">
|
|
<figure class="lift rounded !mb-6"><a href="../../single-project.html"> <img src="../../assets/img/photos/rp3.jpg" alt="image"></a></figure>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#747ed1] !mb-3 !text-[#747ed1]">Notebook</div>
|
|
<h2 class="post-title h3">Magna Tristique Inceptos</h2>
|
|
</div>
|
|
<!-- /.item -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.project -->
|
|
</div>
|
|
<!-- /.projects-tiles -->
|
|
</div>
|
|
</section>
|
|
<!-- /section --></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-4" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="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 !text-center">
|
|
<h2 class="!text-[.75rem] uppercase !text-[#aab0bc] !mb-3 !tracking-[0.02rem] !leading-[1.35]">Latest Projects</h2>
|
|
<h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-10">Check out some of our awesome projects with creative ideas and great design.</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container-fluid xl:!px-6 lg:!px-6 md:!px-6">
|
|
<div class="swiper-container blog grid-view !mb-[4.5rem] xl:!mb-24 lg:!mb-24 md:!mb-24" data-margin="30" data-nav="true" data-dots="true" data-items-xxl="3" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/pp10.jpg" alt="image"></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/pp11.jpg" alt="image"></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/pp12.jpg" alt="image"></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/pp13.jpg" alt="image"></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/pp14.jpg" alt="image"></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/pp15.jpg" alt="image"></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/pp16.jpg" alt="image"></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!-- /.container-fluid -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-4">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-4" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code>
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
|
|
<h2 class="!text-[.75rem] uppercase !text-[#aab0bc] !mb-3 !tracking-[0.02rem] !leading-[1.35]">Latest Projects</h2>
|
|
<h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-10">Check out some of our awesome projects with creative ideas and great design.</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container-fluid xl:!px-6 lg:!px-6 md:!px-6">
|
|
<div class="swiper-container blog grid-view !mb-[4.5rem] xl:!mb-24 lg:!mb-24 md:!mb-24" data-margin="30" data-nav="true" data-dots="true" data-items-xxl="3" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/pp10.jpg" alt="image"></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/pp11.jpg" alt="image"></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/pp12.jpg" alt="image"></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/pp13.jpg" alt="image"></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/pp14.jpg" alt="image"></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/pp15.jpg" alt="image"></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../../assets/img/photos/pp16.jpg" alt="image"></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-5" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="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 !mb-8">
|
|
<h2 class="!text-[.75rem] uppercase !text-[#aab0bc] !text-center !mb-3 !leading-[1.35]">Our Projects</h2>
|
|
<h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !text-center">Check out some of our awesome projects with creative ideas and great design.</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="itemgrid grid-view projects-masonry">
|
|
<div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] xl:!mt-[-80px] lg:!mt-[-80px] md:!mt-[-80px] isotope">
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] !mt-[50px] max-w-full product">
|
|
<figure class="lift rounded !mb-6"><a href='../../single-project.html'> <img src="../../assets/img/photos/cs16.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#747ed1] !mb-3 !text-[#747ed1]">Cosmetic</div>
|
|
<h2 class="post-title h3">Cras Fermentum Sem</h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] !mt-[50px] max-w-full workshop">
|
|
<figure class="lift rounded !mb-6"><a href='../../single-project2.html'> <img src="../../assets/img/photos/cs17.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#7cb798] !mb-3 !text-[#7cb798]">Coffee</div>
|
|
<h2 class="post-title h3">Mollis Ipsum Mattis</h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] !mt-[50px] max-w-full still-life">
|
|
<figure class="lift rounded !mb-6"><a href='../../single-project3.html'> <img src="../../assets/img/photos/cs18.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#a07cc5] !mb-3 !text-[#a07cc5]">Still Life</div>
|
|
<h2 class="post-title h3">Ipsum Ultricies Cursus</h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] !mt-[50px] max-w-full product">
|
|
<figure class="lift rounded !mb-6"><a href='../../single-project2.html'> <img src="../../assets/img/photos/cs20.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#f78b77] !mb-3 !text-[#f78b77]">Product</div>
|
|
<h2 class="post-title h3">Inceptos Euismod Egestas</h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] !mt-[50px] max-w-full product">
|
|
<figure class="lift rounded !mb-6"><a href='../../single-project.html'> <img src="../../assets/img/photos/cs19.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#fab758] !mb-3 !text-[#fab758]">Product</div>
|
|
<h2 class="post-title h3">Sollicitudin Ornare Porta</h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] !mt-[50px] max-w-full workshop">
|
|
<figure class="lift rounded !mb-6"><a href='../../single-project3.html'> <img src="../../assets/img/photos/cs21.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#45c4a0] !mb-3 !text-[#45c4a0]">Workshop</div>
|
|
<h2 class="post-title h3">Ipsum Mollis Vulputate</h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.project -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.grid -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-5">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-5" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code>
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="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 !mb-8">
|
|
<h2 class="!text-[.75rem] uppercase !text-[#aab0bc] !text-center !mb-3 !leading-[1.35]">Our Projects</h2>
|
|
<h3 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !text-center">Check out some of our awesome projects with creative ideas and great design.</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="itemgrid grid-view projects-masonry">
|
|
<div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] xl:!mt-[-80px] lg:!mt-[-80px] md:!mt-[-80px] isotope">
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] !mt-[50px] max-w-full product">
|
|
<figure class="lift rounded !mb-6"><a href="../../single-project.html"> <img src="../../assets/img/photos/cs16.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#747ed1] !mb-3 !text-[#747ed1]">Cosmetic</div>
|
|
<h2 class="post-title h3">Cras Fermentum Sem</h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] !mt-[50px] max-w-full workshop">
|
|
<figure class="lift rounded !mb-6"><a href="../../single-project2.html"> <img src="../../assets/img/photos/cs17.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#7cb798] !mb-3 !text-[#7cb798]">Coffee</div>
|
|
<h2 class="post-title h3">Mollis Ipsum Mattis</h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] !mt-[50px] max-w-full still-life">
|
|
<figure class="lift rounded !mb-6"><a href="../../single-project3.html"> <img src="../../assets/img/photos/cs18.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#a07cc5] !mb-3 !text-[#a07cc5]">Still Life</div>
|
|
<h2 class="post-title h3">Ipsum Ultricies Cursus</h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] !mt-[50px] max-w-full product">
|
|
<figure class="lift rounded !mb-6"><a href="../../single-project2.html"> <img src="../../assets/img/photos/cs20.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#f78b77] !mb-3 !text-[#f78b77]">Product</div>
|
|
<h2 class="post-title h3">Inceptos Euismod Egestas</h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] !mt-[50px] max-w-full product">
|
|
<figure class="lift rounded !mb-6"><a href="../../single-project.html"> <img src="../../assets/img/photos/cs19.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#fab758] !mb-3 !text-[#fab758]">Product</div>
|
|
<h2 class="post-title h3">Sollicitudin Ornare Porta</h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] !mt-[50px] max-w-full workshop">
|
|
<figure class="lift rounded !mb-6"><a href="../../single-project3.html"> <img src="../../assets/img/photos/cs21.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#45c4a0] !mb-3 !text-[#45c4a0]">Workshop</div>
|
|
<h2 class="post-title h3">Ipsum Mollis Vulputate</h2>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.project -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.grid -->
|
|
</div></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-6" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div class="flex flex-wrap mx-[-15px] items-center !mb-10">
|
|
<div class="md:w-8/12 lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!pr-40">
|
|
<h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3">Latest Projects</h2>
|
|
<p class="lead text-[1rem] !leading-[1.6] font-medium !mb-0">Check out some of my latest projects with creative ideas.</p>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="md:w-4/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-auto lg:!ml-auto md:!ml-auto xl:!text-right lg:!text-right md:!text-right !mt-5 xl:!mt-0 lg:!mt-0 md:!mt-0">
|
|
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">See All Projects</a>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<div class="card !bg-[#f6f3f9] !mb-10">
|
|
<div class="card-body p-14 pb-0">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full pb-14 self-center">
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-3 !text-[#a07cc5]">Web Design</div>
|
|
<h3 class="h1 post-title !mb-3 !leading-[1.3]">Snowlake Theme</h3>
|
|
<p>Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus cursus.</p>
|
|
<a href="#" class="more hover !text-[#a07cc5] focus:!text-[#a07cc5] hover:!text-[#a07cc5]">See Project</a>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="xl:w-7/12 xl:!ml-[8.33333333%] lg:w-7/12 lg:!ml-[8.33333333%] w-full flex-[0_0_auto] !px-[15px] max-w-full !self-end">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/photos/f1.png" alt="image"></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
<div class="card !bg-[#edf2fc] !mb-10">
|
|
<div class="card-body p-14">
|
|
<div class="flex flex-wrap mx-[-15px] !mt-[-50px] items-center">
|
|
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!order-2 xl:!ml-[8.33333333%] lg:!order-2 lg:!ml-[8.33333333%] !mt-[50px]">
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-3 !text-[#e31e24]">Mobile Design</div>
|
|
<h3 class="h1 post-title !mb-3 !leading-[1.3]">Budget App</h3>
|
|
<p>Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus cursus.</p>
|
|
<a href="#" class="more hover !text-[#e31e24] hover:!text-[#e31e24]">See Project</a>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[50px]">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/photos/f2.png" alt="image"></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] xl:mx-[-25px]">
|
|
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[25px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full">
|
|
<div class="card !bg-[#f3f8f5] !mb-10 lg:!mb-0">
|
|
<div class="card-body p-14 pb-0">
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-3 !text-[#7cb798]">Web Design</div>
|
|
<h3 class="h1 post-title !mb-3 !leading-[1.3]">Missio Theme</h3>
|
|
<p>Maecenas faucibus mollis interdum sed posuere porta consectetur cursus porta lobortis. Scelerisque id ligula felis.</p>
|
|
<a href="#" class="more hover link-leaf !mb-8">See Project</a>
|
|
</div>
|
|
<!--/.card-body -->
|
|
<img class="card-img-bottom" src="../../assets/img/photos/f3.png" alt="image">
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[25px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full">
|
|
<div class="card !bg-[#fbf1f4] xl:!mb-0 lg:!mb-0">
|
|
<div class="card-body p-14 pb-0">
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-3 !text-[#d16b86]">Mobile Design</div>
|
|
<h3 class="h1 post-title !mb-3 !leading-[1.3]">Storage App</h3>
|
|
<p>Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper.</p>
|
|
<a href="#" class="more hover link-pink !mb-8">See Project</a>
|
|
</div>
|
|
<!--/.card-body -->
|
|
<img class="card-img-bottom" src="../../assets/img/photos/f4.png" alt="image">
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-6">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-6" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code>
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div class="flex flex-wrap mx-[-15px] items-center !mb-10">
|
|
<div class="md:w-8/12 lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!pr-40">
|
|
<h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3">Latest Projects</h2>
|
|
<p class="lead text-[1rem] !leading-[1.6] font-medium !mb-0">Check out some of my latest projects with creative ideas.</p>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="md:w-4/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-auto lg:!ml-auto md:!ml-auto xl:!text-right lg:!text-right md:!text-right !mt-5 xl:!mt-0 lg:!mt-0 md:!mt-0">
|
|
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">See All Projects</a>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<div class="card !bg-[#f6f3f9] !mb-10">
|
|
<div class="card-body p-14 pb-0">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full pb-14 self-center">
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-3 !text-[#a07cc5]">Web Design</div>
|
|
<h3 class="h1 post-title !mb-3 !leading-[1.3]">Snowlake Theme</h3>
|
|
<p>Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus cursus.</p>
|
|
<a href="#" class="more hover !text-[#a07cc5] focus:!text-[#a07cc5] hover:!text-[#a07cc5]">See Project</a>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="xl:w-7/12 xl:!ml-[8.33333333%] lg:w-7/12 lg:!ml-[8.33333333%] w-full flex-[0_0_auto] !px-[15px] max-w-full !self-end">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/photos/f1.png" alt="image"></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
<div class="card !bg-[#edf2fc] !mb-10">
|
|
<div class="card-body p-14">
|
|
<div class="flex flex-wrap mx-[-15px] !mt-[-50px] items-center">
|
|
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!order-2 xl:!ml-[8.33333333%] lg:!order-2 lg:!ml-[8.33333333%] !mt-[50px]">
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-3 !text-[#e31e24]">Mobile Design</div>
|
|
<h3 class="h1 post-title !mb-3 !leading-[1.3]">Budget App</h3>
|
|
<p>Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus cursus.</p>
|
|
<a href="#" class="more hover !text-[#e31e24] hover:!text-[#e31e24]">See Project</a>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[50px]">
|
|
<figure class="m-0 p-0"><img class="max-w-full h-auto" src="../../assets/img/photos/f2.png" alt="image"></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] xl:mx-[-25px]">
|
|
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[25px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full">
|
|
<div class="card !bg-[#f3f8f5] !mb-10 lg:!mb-0">
|
|
<div class="card-body p-14 pb-0">
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-3 !text-[#7cb798]">Web Design</div>
|
|
<h3 class="h1 post-title !mb-3 !leading-[1.3]">Missio Theme</h3>
|
|
<p>Maecenas faucibus mollis interdum sed posuere porta consectetur cursus porta lobortis. Scelerisque id ligula felis.</p>
|
|
<a href="#" class="more hover link-leaf !mb-8">See Project</a>
|
|
</div>
|
|
<!--/.card-body -->
|
|
<img class="card-img-bottom" src="../../assets/img/photos/f3.png" alt="image">
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[25px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full">
|
|
<div class="card !bg-[#fbf1f4] xl:!mb-0 lg:!mb-0">
|
|
<div class="card-body p-14 pb-0">
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-3 !text-[#d16b86]">Mobile Design</div>
|
|
<h3 class="h1 post-title !mb-3 !leading-[1.3]">Storage App</h3>
|
|
<p>Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper.</p>
|
|
<a href="#" class="more hover link-pink !mb-8">See Project</a>
|
|
</div>
|
|
<!--/.card-body -->
|
|
<img class="card-img-bottom" src="../../assets/img/photos/f4.png" alt="image">
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-7" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="overflow-hidden">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
|
|
<h2 class="!text-[0.8rem] uppercase !text-[#e31e24] !mb-3 !leading-[1.35]">Latest Projects</h2>
|
|
<h3 class="xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] font-bold !tracking-[-.01rem] !mb-[2.5rem] !leading-[1.25]">Check out some of our awesome projects with creative ideas and great design.</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="swiper-container grid-view nav-bottom nav-color !mb-[4.5rem]" data-margin="30" data-dots="false" data-nav="true" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper overflow-visible">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<figure class="!rounded-[.4rem] !mb-7"><a href='../../single-project.html'><img src="../../assets/img/photos/sp1.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='../../single-project.html'>Cras Fermentum Sem</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Mobile Design</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="!rounded-[.4rem] !mb-7"><a href='../../single-project.html'><img src="../../assets/img/photos/sp2.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='../../single-project.html'>Venenatis Euismod Vehicula</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Web Design</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="!rounded-[.4rem] !mb-7"><a href='../../single-project.html'><img src="../../assets/img/photos/sp3.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='../../single-project.html'>Tortor Tellus Cursus</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Stationary</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="!rounded-[.4rem] !mb-7"><a href='../../single-project.html'><img src="../../assets/img/photos/sp4.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='../../single-project.html'>Ridiculus Sem Parturient</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Web Application</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="!rounded-[.4rem] !mb-7"><a href='../../single-project.html'><img src="../../assets/img/photos/sp5.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='../../single-project.html'>Cursus Sollicitudin Adipiscing</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Web Design</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="!rounded-[.4rem] !mb-7"><a href='../../single-project.html'><img src="../../assets/img/photos/sp6.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='../../single-project.html'>Fringilla Quam Vulputate</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Stationary</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!-- /.overflow-hidden -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-7">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-7" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code>
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="lg:w-10/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
|
|
<h2 class="!text-[0.8rem] uppercase !text-[#e31e24] !mb-3 !leading-[1.35]">Latest Projects</h2>
|
|
<h3 class="xl:!text-[2rem] !text-[calc(1.325rem_+_0.9vw)] font-bold !tracking-[-.01rem] !mb-[2.5rem] !leading-[1.25]">Check out some of our awesome projects with creative ideas and great design.</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="swiper-container grid-view nav-bottom nav-color !mb-[4.5rem]" data-margin="30" data-dots="false" data-nav="true" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper overflow-visible">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<figure class="!rounded-[.4rem] !mb-7"><a href="../../single-project.html"><img src="../../assets/img/photos/sp1.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a href="../../single-project.html" class="!text-[#343f52] hover:!text-[#e31e24]">Cras Fermentum Sem</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Mobile Design</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="!rounded-[.4rem] !mb-7"><a href="../../single-project.html"><img src="../../assets/img/photos/sp2.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a href="../../single-project.html" class="!text-[#343f52] hover:!text-[#e31e24]">Venenatis Euismod Vehicula</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Web Design</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="!rounded-[.4rem] !mb-7"><a href="../../single-project.html"><img src="../../assets/img/photos/sp3.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a href="../../single-project.html" class="!text-[#343f52] hover:!text-[#e31e24]">Tortor Tellus Cursus</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Stationary</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="!rounded-[.4rem] !mb-7"><a href="../../single-project.html"><img src="../../assets/img/photos/sp4.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a href="../../single-project.html" class="!text-[#343f52] hover:!text-[#e31e24]">Ridiculus Sem Parturient</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Web Application</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="!rounded-[.4rem] !mb-7"><a href="../../single-project.html"><img src="../../assets/img/photos/sp5.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a href="../../single-project.html" class="!text-[#343f52] hover:!text-[#e31e24]">Cursus Sollicitudin Adipiscing</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Web Design</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<figure class="!rounded-[.4rem] !mb-7"><a href="../../single-project.html"><img src="../../assets/img/photos/sp6.jpg" alt="image"></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3"><a href="../../single-project.html" class="!text-[#343f52] hover:!text-[#e31e24]">Fringilla Quam Vulputate</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Stationary</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-8" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="lg:w-11/12 xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-10">
|
|
<h2 class="!text-[0.8rem] uppercase !text-[#aab0bc] !text-center !mb-3 !leading-[1.35]">Our Projects</h2>
|
|
<h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.25] xl:!text-[2rem] !text-center lg:!px-5 xl:!px-10 xxl:!px-24 !mb-0">Check out some of our awesome projects with creative ideas and great design.</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="itemgrid grid-view projects-masonry">
|
|
<div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] xl:!mt-[-80px] lg:!mt-[-80px] md:!mt-[-80px] isotope">
|
|
<div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd7.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd7-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3 text-[1.1rem]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='../../single-project.html'>Cras Fermentum Sem</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Stationary</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.item -->
|
|
<div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd8.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd8-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3 text-[1.1rem]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='../../single-project2.html'>Mollis Ipsum Mattis</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Magazine, Book</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.item -->
|
|
<div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd9.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd9-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3 text-[1.1rem]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='../../single-project3.html'>Ipsum Ultricies Cursus</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Packaging</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.item -->
|
|
<div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd10.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd10-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3 text-[1.1rem]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='../../single-project.html'>Inceptos Euismod Egestas</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Stationary, Branding</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.item -->
|
|
<div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd11.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd11-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3 text-[1.1rem]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='../../single-project2.html'>Ipsum Mollis Vulputate</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Packaging</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.item -->
|
|
<div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd12.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd12-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3 text-[1.1rem]"><a class='!text-[#343f52] hover:!text-[#e31e24]' href='../../single-project3.html'>Porta Ornare Cras</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Branding</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.item -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.grid -->
|
|
<div class="text-center !mt-10">
|
|
<a href="#" class="btn btn-lg btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Start a Project</a>
|
|
</div>
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-8">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-8" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code>
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="lg:w-11/12 xl:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-10">
|
|
<h2 class="!text-[0.8rem] uppercase !text-[#aab0bc] !text-center !mb-3 !leading-[1.35]">Our Projects</h2>
|
|
<h3 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.25] xl:!text-[2rem] !text-center lg:!px-5 xl:!px-10 xxl:!px-24 !mb-0">Check out some of our awesome projects with creative ideas and great design.</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="itemgrid grid-view projects-masonry">
|
|
<div class="flex flex-wrap mx-[-15px] xl:mx-[-20px] lg:mx-[-20px] md:mx-[-20px] !mt-[-50px] xl:!mt-[-80px] lg:!mt-[-80px] md:!mt-[-80px] isotope">
|
|
<div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd7.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd7-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3 text-[1.1rem]"><a href="../../single-project.html" class="!text-[#343f52] hover:!text-[#e31e24]">Cras Fermentum Sem</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Stationary</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.item -->
|
|
<div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd8.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd8-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3 text-[1.1rem]"><a href="../../single-project2.html" class="!text-[#343f52] hover:!text-[#e31e24]">Mollis Ipsum Mattis</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Magazine, Book</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.item -->
|
|
<div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd9.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd9-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3 text-[1.1rem]"><a href="../../single-project3.html" class="!text-[#343f52] hover:!text-[#e31e24]">Ipsum Ultricies Cursus</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Packaging</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.item -->
|
|
<div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd10.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd10-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3 text-[1.1rem]"><a href="../../single-project.html" class="!text-[#343f52] hover:!text-[#e31e24]">Inceptos Euismod Egestas</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Stationary, Branding</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.item -->
|
|
<div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd11.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd11-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3 text-[1.1rem]"><a href="../../single-project2.html" class="!text-[#343f52] hover:!text-[#e31e24]">Ipsum Mollis Vulputate</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Packaging</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.item -->
|
|
<div class="project item group md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] xl:!px-[20px] lg:!px-[20px] md:!px-[20px] !px-[15px] !mt-[50px] xl:!mt-[80px] lg:!mt-[80px] md:!mt-[80px] max-w-full">
|
|
<figure class="!rounded-[.4rem] !mb-6"><img class="!rounded-[.4rem]" src="../../assets/img/photos/pd12.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../../assets/img/photos/pd12-full.jpg" data-glightbox data-gallery="projects-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
<div class="project-details flex justify-center flex-col">
|
|
<div class="post-header">
|
|
<h2 class="post-title h3 text-[1.1rem]"><a href="../../single-project3.html" class="!text-[#343f52] hover:!text-[#e31e24]">Porta Ornare Cras</a></h2>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !mb-[0.4rem] !text-[#9499a3]">Branding</div>
|
|
</div>
|
|
<!-- /.post-header -->
|
|
</div>
|
|
<!-- /.project-details -->
|
|
</div>
|
|
<!-- /.item -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.grid -->
|
|
<div class="text-center !mt-10">
|
|
<a href="#" class="btn btn-lg btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Start a Project</a>
|
|
</div>
|
|
</div></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-9" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20 !text-center">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="lg:w-10/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-8">
|
|
<h2 class="!text-[calc(1.285rem_+_0.42vw)] font-bold xl:!text-[1.6rem] !leading-[1.3] !mb-3">My Selected Shots</h2>
|
|
<p class="lead !text-[1.05rem] !leading-[1.6] font-medium">Photography is my passion and I love to turn ideas into beautiful things.</p>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="itemgrid grid-view projects-masonry">
|
|
<div class="isotope-filter !relative z-[5] filter !mb-10">
|
|
<ul class=" inline m-0 p-0 list-none">
|
|
<li class="inline"><a class="filter-item uppercase !tracking-[0.02rem] text-[0.7rem] font-bold cursor-pointer active" data-filter="*">All</a></li>
|
|
<li class="inline before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:ml-2 before:mr-[0.8rem] before:my-0 before:rounded-[100%] before:bg-[rgba(30,34,40,.2)] before:align-[.15rem]"><a class="filter-item uppercase !tracking-[0.02rem] text-[0.7rem] font-bold cursor-pointer hover:!text-[#e31e24]" data-filter=".foods">Foods</a></li>
|
|
<li class="inline before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:ml-2 before:mr-[0.8rem] before:my-0 before:rounded-[100%] before:bg-[rgba(30,34,40,.2)] before:align-[.15rem]"><a class="filter-item uppercase !tracking-[0.02rem] text-[0.7rem] font-bold cursor-pointer hover:!text-[#e31e24]" data-filter=".drinks">Drinks</a></li>
|
|
<li class="inline before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:ml-2 before:mr-[0.8rem] before:my-0 before:rounded-[100%] before:bg-[rgba(30,34,40,.2)] before:align-[.15rem]"><a class="filter-item uppercase !tracking-[0.02rem] text-[0.7rem] font-bold cursor-pointer hover:!text-[#e31e24]" data-filter=".events">Events</a></li>
|
|
<li class="inline before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:ml-2 before:mr-[0.8rem] before:my-0 before:rounded-[100%] before:bg-[rgba(30,34,40,.2)] before:align-[.15rem]"><a class="filter-item uppercase !tracking-[0.02rem] text-[0.7rem] font-bold cursor-pointer hover:!text-[#e31e24]" data-filter=".pastries">Pastries</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-15px] !mt-[-30px] isotope">
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full drinks events">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf1-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf1.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Fringilla Nullam</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full events">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf2-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf2.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Ridiculus Parturient</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full drinks foods">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf3-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf3.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Ornare Ipsum</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full events">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf4-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf4.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Nullam Mollis</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full pastries events">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf5-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf5.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Euismod Risus</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full foods">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf6-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf6.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Ridiculus Tristique</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full foods drinks">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf7-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf7.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Sollicitudin Pharetra</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full pastries">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf8-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf8.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Tristique Venenatis</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full events">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf9-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf9.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Cursus Fusce</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full foods">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf10-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf10.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Consectetur Malesuada</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full drinks">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf11-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf11.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Ultricies Aenean</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full foods">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf12-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf12.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Pellentesque Commodo</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full drinks">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf13-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf13.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Ultricies Aenean</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.grid -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-9">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-9" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code>
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20 !text-center">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="lg:w-10/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-8">
|
|
<h2 class="!text-[calc(1.285rem_+_0.42vw)] font-bold xl:!text-[1.6rem] !leading-[1.3] !mb-3">My Selected Shots</h2>
|
|
<p class="lead !text-[1.05rem] !leading-[1.6] font-medium">Photography is my passion and I love to turn ideas into beautiful things.</p>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="itemgrid grid-view projects-masonry">
|
|
<div class="isotope-filter !relative z-[5] filter !mb-10">
|
|
<ul class=" inline m-0 p-0 list-none">
|
|
<li class="inline"><a class="filter-item uppercase !tracking-[0.02rem] text-[0.7rem] font-bold cursor-pointer active" data-filter="*">All</a></li>
|
|
<li class="inline before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:ml-2 before:mr-[0.8rem] before:my-0 before:rounded-[100%] before:bg-[rgba(30,34,40,.2)] before:align-[.15rem]"><a class="filter-item uppercase !tracking-[0.02rem] text-[0.7rem] font-bold cursor-pointer hover:!text-[#e31e24]" data-filter=".foods">Foods</a></li>
|
|
<li class="inline before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:ml-2 before:mr-[0.8rem] before:my-0 before:rounded-[100%] before:bg-[rgba(30,34,40,.2)] before:align-[.15rem]"><a class="filter-item uppercase !tracking-[0.02rem] text-[0.7rem] font-bold cursor-pointer hover:!text-[#e31e24]" data-filter=".drinks">Drinks</a></li>
|
|
<li class="inline before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:ml-2 before:mr-[0.8rem] before:my-0 before:rounded-[100%] before:bg-[rgba(30,34,40,.2)] before:align-[.15rem]"><a class="filter-item uppercase !tracking-[0.02rem] text-[0.7rem] font-bold cursor-pointer hover:!text-[#e31e24]" data-filter=".events">Events</a></li>
|
|
<li class="inline before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:ml-2 before:mr-[0.8rem] before:my-0 before:rounded-[100%] before:bg-[rgba(30,34,40,.2)] before:align-[.15rem]"><a class="filter-item uppercase !tracking-[0.02rem] text-[0.7rem] font-bold cursor-pointer hover:!text-[#e31e24]" data-filter=".pastries">Pastries</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-15px] !mt-[-30px] isotope">
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full drinks events">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf1-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf1.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Fringilla Nullam</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full events">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf2-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf2.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Ridiculus Parturient</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full drinks foods">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf3-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf3.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Ornare Ipsum</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full events">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf4-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf4.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Nullam Mollis</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full pastries events">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf5-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf5.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Euismod Risus</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full foods">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf6-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf6.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Ridiculus Tristique</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full foods drinks">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf7-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf7.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Sollicitudin Pharetra</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full pastries">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf8-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf8.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Tristique Venenatis</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full events">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf9-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf9.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Cursus Fusce</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full foods">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf10-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf10.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Consectetur Malesuada</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full drinks">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf11-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf11.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Ultricies Aenean</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full foods">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf12-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf12.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Pellentesque Commodo</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full drinks">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class=" relative block z-[3] cursor-pointer inset-0" href="../../assets/img/photos/pf13-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../../assets/img/photos/pf13.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center z-[5] pointer-events-none px-4 py-3 inset-0">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Ultricies Aenean</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.grid -->
|
|
</div></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-10" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div class="flex flex-wrap mx-[-15px] !text-center">
|
|
<div class="xl:w-10/12 lg:w-10/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-14">
|
|
<h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#aab0bc] !mb-3 !leading-[1.35]">Latest Projects</h2>
|
|
<h3 class="!text-[calc(1.345rem_+_1.14vw)] font-bold !leading-[1.25] xl:!text-[2.2rem] !tracking-[-0.03em]">Check out some of our <span class="!relative z-[1] style-1 primary before:content-[''] before:z-[-1] before:absolute before:opacity-100 before:-translate-x-2/4 before:-translate-y-2/4 before:-rotate-1 before:w-[111%] before:h-[110%] before:rounded-[80%] before:border-t-0 before:border-[3px] before:border-solid before:border-[#e31e24] before:left-2/4 before:top-[52%] after:content-[''] after:z-[-1] after:absolute after:opacity-100 after:block after:[background-size:100%_100%] after:bg-no-repeat after:bg-bottom after:bottom-[-0.1em] after:-translate-x-2/4 after:-translate-y-2/4 after:-rotate-2 after:w-[107%] after:h-[111%] after:rounded-[80%] after:border-l-0 after:border-b-0 after:border-[3px] after:border-solid after:border-[#e31e24] after:left-2/4 after:top-[52%] max-xl:before:!hidden max-xl:after:!hidden"><em>awesome</em></span> projects with creative ideas and great design.</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="flex flex-wrap mx-[-15px] !mt-[-50px] items-center !mb-20 xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem]">
|
|
<div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[50px]">
|
|
<div class="card !bg-[#f0f0f8]">
|
|
<div class="card-body !px-9 py-0 overflow-hidden">
|
|
<div class="flex flex-wrap mx-[-10px] xl:mx-[-22.5px] lg:mx-[-22.5px] md:mx-[-22.5px]">
|
|
<div class="w-6/12 flex-[0_0_auto] px-[10px] xl:!px-[22.5px] lg:!px-[22.5px] md:!px-[22.5px] max-w-full">
|
|
<figure class="!mt-9"><a href="#"><img class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-t-[0.4rem]" src="../../assets/img/demos/d18.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="w-6/12 flex-[0_0_auto] px-[10px] xl:!px-[22.5px] lg:!px-[22.5px] md:!px-[22.5px] max-w-full">
|
|
<figure><a href="#"><img class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-br-[0.4rem] rounded-bl-[0.4rem]" src="../../assets/img/demos/d18-2.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !ml-auto !mt-[50px]">
|
|
<h3 class="h1 post-title !tracking-[-0.03em] !mb-2 !leading-[1.3]">Wiretree Network Company</h3>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] !mb-4">
|
|
<span>Dashboard</span>, <span>Web Development</span>
|
|
</div>
|
|
<p class="!mb-6">Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus. Donec sed odio dui. Vivamus sagittis lacus vel.</p>
|
|
<a href="#" class="btn btn-grape !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] rounded">See Project</a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="flex flex-wrap mx-[-15px] !mt-[-50px] items-center">
|
|
<div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!order-2 lg:!order-2 !mt-[50px]">
|
|
<div class="card !bg-[#edf2fc]">
|
|
<div class="card-body !p-12 overflow-hidden">
|
|
<figure><a href="#"><img src="../../assets/img/photos/f2.png" alt="image"></a></figure>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mr-auto !mt-[50px]">
|
|
<h3 class="h1 post-title !tracking-[-0.03em] !mb-2 !leading-[1.3]">Alphine Finance</h3>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] !mb-4">
|
|
<span>Branding</span>, <span>Web Design</span>
|
|
</div>
|
|
<p class="!mb-6">Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus. Donec sed odio dui. Vivamus sagittis lacus vel.</p>
|
|
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] rounded hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">See Project</a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-10">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-10" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code>
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div class="flex flex-wrap mx-[-15px] !text-center">
|
|
<div class="xl:w-10/12 lg:w-10/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-14">
|
|
<h2 class="!text-[0.8rem] !tracking-[0.02rem] uppercase !text-[#aab0bc] !mb-3 !leading-[1.35]">Latest Projects</h2>
|
|
<h3 class="!text-[calc(1.345rem_+_1.14vw)] font-bold !leading-[1.25] xl:!text-[2.2rem] !tracking-[-0.03em]">Check out some of our <span class="!relative z-[1] style-1 primary before:content-[''] before:z-[-1] before:absolute before:opacity-100 before:-translate-x-2/4 before:-translate-y-2/4 before:-rotate-1 before:w-[111%] before:h-[110%] before:rounded-[80%] before:border-t-0 before:border-[3px] before:border-solid before:border-[#e31e24] before:left-2/4 before:top-[52%] after:content-[''] after:z-[-1] after:absolute after:opacity-100 after:block after:[background-size:100%_100%] after:bg-no-repeat after:bg-bottom after:bottom-[-0.1em] after:-translate-x-2/4 after:-translate-y-2/4 after:-rotate-2 after:w-[107%] after:h-[111%] after:rounded-[80%] after:border-l-0 after:border-b-0 after:border-[3px] after:border-solid after:border-[#e31e24] after:left-2/4 after:top-[52%] max-xl:before:!hidden max-xl:after:!hidden"><em>awesome</em></span> projects with creative ideas and great design.</h3>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="flex flex-wrap mx-[-15px] !mt-[-50px] items-center !mb-20 xl:!mb-[7rem] lg:!mb-[7rem] md:!mb-[7rem]">
|
|
<div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[50px]">
|
|
<div class="card !bg-[#f0f0f8]">
|
|
<div class="card-body !px-9 py-0 overflow-hidden">
|
|
<div class="flex flex-wrap mx-[-10px] xl:mx-[-22.5px] lg:mx-[-22.5px] md:mx-[-22.5px]">
|
|
<div class="w-6/12 flex-[0_0_auto] px-[10px] xl:!px-[22.5px] lg:!px-[22.5px] md:!px-[22.5px] max-w-full">
|
|
<figure class="!mt-9"><a href="#"><img class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-t-[0.4rem]" src="../../assets/img/demos/d18.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="w-6/12 flex-[0_0_auto] px-[10px] xl:!px-[22.5px] lg:!px-[22.5px] md:!px-[22.5px] max-w-full">
|
|
<figure><a href="#"><img class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-br-[0.4rem] rounded-bl-[0.4rem]" src="../../assets/img/demos/d18-2.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !ml-auto !mt-[50px]">
|
|
<h3 class="h1 post-title !tracking-[-0.03em] !mb-2 !leading-[1.3]">Wiretree Network Company</h3>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] !mb-4">
|
|
<span>Dashboard</span>, <span>Web Development</span>
|
|
</div>
|
|
<p class="!mb-6">Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus. Donec sed odio dui. Vivamus sagittis lacus vel.</p>
|
|
<a href="#" class="btn btn-grape !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] rounded">See Project</a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="flex flex-wrap mx-[-15px] !mt-[-50px] items-center">
|
|
<div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!order-2 lg:!order-2 !mt-[50px]">
|
|
<div class="card !bg-[#edf2fc]">
|
|
<div class="card-body !p-12 overflow-hidden">
|
|
<figure><a href="#"><img src="../../assets/img/photos/f2.png" alt="image"></a></figure>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mr-auto !mt-[50px]">
|
|
<h3 class="h1 post-title !tracking-[-0.03em] !mb-2 !leading-[1.3]">Alphine Finance</h3>
|
|
<div class="uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] !mb-4">
|
|
<span>Branding</span>, <span>Web Design</span>
|
|
</div>
|
|
<p class="!mb-6">Maecenas faucibus mollis interdum sed posuere consectetur est at lobortis. Scelerisque id ligula porta felis euismod semper. Fusce dapibus tellus. Donec sed odio dui. Vivamus sagittis lacus vel.</p>
|
|
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] rounded hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">See Project</a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="snippet-11" class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div class="flex flex-wrap mx-[-15px] !mb-10">
|
|
<div class="md:w-9/12 lg:w-7/12 xl:w-6/12 xxl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="counter-wrapper">
|
|
<h3 class="xl:!text-[3.5rem] !text-[calc(1.475rem_+_2.7vw)] !mb-3 !text-[#e31e24] !leading-none !text-center counter">21</h3>
|
|
</div>
|
|
<h2 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.25] xl:!text-[2rem] !mb-3 !text-center">Functional, impressive and rich demos to start with</h2>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="demos-wrapper">
|
|
<div class="project !mb-10">
|
|
<div class="card !bg-[#f0f0f8]">
|
|
<div class="card-body xl:!pl-14 px-[40px] py-0 overflow-hidden">
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] xl:mx-[-35px] items-center">
|
|
<div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full">
|
|
<div class="flex flex-wrap mx-[-17.5px]">
|
|
<div class="w-6/12 flex-[0_0_auto] px-[17.5px] max-w-full">
|
|
<figure class="itooltip itooltip-grape !mt-9" title='<h5 class="!mb-0">Click to see the demo</h5>'><a href='../../demo18.html' target='_blank'><img class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-t-[0.4rem]" src="../../assets/img/demos/d18.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="w-6/12 flex-[0_0_auto] px-[17.5px] max-w-full">
|
|
<figure class="itooltip itooltip-grape" title='<h5 class="!mb-0">Click to see the demo</h5>'><a href='../../demo18.html' target='_blank'><img class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-br-[0.4rem] rounded-bl-[0.4rem]" src="../../assets/img/demos/d18-2.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="xl:w-5/12 lg:w-5/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full hidden xl:block lg:block">
|
|
<h2 class="post-title xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-4 !leading-[1.35]">Demo Layout XVIII</h2>
|
|
<ul class="pl-0 list-none bullet-grape flex flex-wrap mx-[-15px] !ml-0 !mt-[-10px]">
|
|
<li class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]"><span><i class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e31e24] left-0"></i></span><span>Network, Marketing</span></li>
|
|
<li class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]"><span><i class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e31e24] left-0"></i></span><span>SVG icons</span></li>
|
|
<li class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]"><span><i class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e31e24] left-0"></i></span><span>3D illustrations</span></li>
|
|
<li class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]"><span><i class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e31e24] left-0"></i></span><span>Gradient image</span></li>
|
|
</ul>
|
|
<a class='btn btn-sm btn-grape !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mt-1' href='../../demo18.html' target='_blank'>See Demo</a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project">
|
|
<div class="card !bg-[#fdf1f8]">
|
|
<div class="card-body xl:!pl-14 px-[40px] py-0 overflow-hidden">
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] xl:mx-[-35px] items-center">
|
|
<div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full">
|
|
<div class="flex flex-wrap mx-[-17.5px]">
|
|
<div class="w-6/12 flex-[0_0_auto] px-[17.5px] max-w-full">
|
|
<figure class="itooltip itooltip-fuchsia !mt-9" title='<h5 class="!mb-0">Click to see the demo</h5>'><a href='../../demo19.html' target='_blank'><img class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-t-[0.4rem]" src="../../assets/img/demos/d19-1.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="w-6/12 flex-[0_0_auto] px-[17.5px] max-w-full">
|
|
<figure class="itooltip itooltip-fuchsia" title='<h5 class="!mb-0">Click to see the demo</h5>'><a href='../../demo19.html' target='_blank'><img class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-br-[0.4rem] rounded-bl-[0.4rem]" src="../../assets/img/demos/d19-2.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="xl:w-5/12 lg:w-5/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full hidden xl:block lg:block">
|
|
<h2 class="post-title xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-4 !leading-[1.35]">Demo Layout XVIII</h2>
|
|
<ul class="pl-0 list-none bullet-grape flex flex-wrap mx-[-15px] !ml-0 !mt-[-10px]">
|
|
<li class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]"><span><i class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e668b3] left-0"></i></span><span>Agency, Startup</span></li>
|
|
<li class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]"><span><i class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e668b3] left-0"></i></span><span>Gradient image</span></li>
|
|
<li class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]"><span><i class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e668b3] left-0"></i></span><span>SVG icons</span></li>
|
|
<li class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]"><span><i class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e668b3] left-0"></i></span><span>Colorful design</span></li>
|
|
</ul>
|
|
<a class='btn btn-sm btn-fuchsia !text-white !bg-[#e668b3] border-[#e668b3] hover:text-white hover:bg-[#e668b3] hover:!border-[#e668b3] active:text-white active:bg-[#e668b3] active:border-[#e668b3] disabled:text-white disabled:bg-[#e668b3] disabled:border-[#e668b3] !rounded-[50rem] !mt-1' href='../../demo19.html' target='_blank'>See Demo</a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="text-center !mt-12"><a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">See All Demos</a></div>
|
|
</div>
|
|
<!-- /.demos-wrapper -->
|
|
</div>
|
|
<!-- /.container -->
|
|
<div class="container pb-20 xl:pb-28 lg:pb-28 md:pb-28">
|
|
<div class="card">
|
|
<div class="card-footer border-0 !relative">
|
|
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-snippet-11">View example's code</a>
|
|
</div>
|
|
<!--/.card-footer -->
|
|
<div id="collapse-snippet-11" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
|
|
<div class="code-wrapper relative !mb-0">
|
|
<div class="code-wrapper-inner">
|
|
<pre class="language-html"><code>
|
|
<div class="container pt-20 xl:pt-28 lg:pt-28 md:pt-28 pb-16 xl:pb-20 lg:pb-20 md:pb-20">
|
|
<div class="flex flex-wrap mx-[-15px] !mb-10">
|
|
<div class="md:w-9/12 lg:w-7/12 xl:w-6/12 xxl:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="counter-wrapper">
|
|
<h3 class="xl:!text-[3.5rem] !text-[calc(1.475rem_+_2.7vw)] !mb-3 !text-[#e31e24] !leading-none !text-center counter">21</h3>
|
|
</div>
|
|
<h2 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.25] xl:!text-[2rem] !mb-3 !text-center">Functional, impressive and rich demos to start with</h2>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="demos-wrapper">
|
|
<div class="project !mb-10">
|
|
<div class="card !bg-[#f0f0f8]">
|
|
<div class="card-body xl:!pl-14 px-[40px] py-0 overflow-hidden">
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] xl:mx-[-35px] items-center">
|
|
<div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full">
|
|
<div class="flex flex-wrap mx-[-17.5px]">
|
|
<div class="w-6/12 flex-[0_0_auto] px-[17.5px] max-w-full">
|
|
<figure class="itooltip itooltip-grape !mt-9" title='<h5 class="!mb-0">Click to see the demo</h5>'><a href="../../demo18.html" target="_blank"><img class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-t-[0.4rem]" src="../../assets/img/demos/d18.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="w-6/12 flex-[0_0_auto] px-[17.5px] max-w-full">
|
|
<figure class="itooltip itooltip-grape" title='<h5 class="!mb-0">Click to see the demo</h5>'><a href="../../demo18.html" target="_blank"><img class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-br-[0.4rem] rounded-bl-[0.4rem]" src="../../assets/img/demos/d18-2.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="xl:w-5/12 lg:w-5/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full hidden xl:block lg:block">
|
|
<h2 class="post-title xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-4 !leading-[1.35]">Demo Layout XVIII</h2>
|
|
<ul class="pl-0 list-none bullet-grape flex flex-wrap mx-[-15px] !ml-0 !mt-[-10px]">
|
|
<li class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]"><span><i class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e31e24] left-0"></i></span><span>Network, Marketing</span></li>
|
|
<li class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]"><span><i class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e31e24] left-0"></i></span><span>SVG icons</span></li>
|
|
<li class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]"><span><i class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e31e24] left-0"></i></span><span>3D illustrations</span></li>
|
|
<li class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]"><span><i class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e31e24] left-0"></i></span><span>Gradient image</span></li>
|
|
</ul>
|
|
<a href="../../demo18.html" target="_blank" class="btn btn-sm btn-grape !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mt-1">See Demo</a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project">
|
|
<div class="card !bg-[#fdf1f8]">
|
|
<div class="card-body xl:!pl-14 px-[40px] py-0 overflow-hidden">
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] xl:mx-[-35px] items-center">
|
|
<div class="xl:w-7/12 lg:w-7/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full">
|
|
<div class="flex flex-wrap mx-[-17.5px]">
|
|
<div class="w-6/12 flex-[0_0_auto] px-[17.5px] max-w-full">
|
|
<figure class="itooltip itooltip-fuchsia !mt-9" title='<h5 class="!mb-0">Click to see the demo</h5>'><a href="../../demo19.html" target="_blank"><img class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-t-[0.4rem]" src="../../assets/img/demos/d19-1.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="w-6/12 flex-[0_0_auto] px-[17.5px] max-w-full">
|
|
<figure class="itooltip itooltip-fuchsia" title='<h5 class="!mb-0">Click to see the demo</h5>'><a href="../../demo19.html" target="_blank"><img class="shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] rounded-br-[0.4rem] rounded-bl-[0.4rem]" src="../../assets/img/demos/d19-2.jpg" alt="image"></a></figure>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="xl:w-5/12 lg:w-5/12 flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full hidden xl:block lg:block">
|
|
<h2 class="post-title xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !mb-4 !leading-[1.35]">Demo Layout XVIII</h2>
|
|
<ul class="pl-0 list-none bullet-grape flex flex-wrap mx-[-15px] !ml-0 !mt-[-10px]">
|
|
<li class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]"><span><i class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e668b3] left-0"></i></span><span>Agency, Startup</span></li>
|
|
<li class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]"><span><i class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e668b3] left-0"></i></span><span>Gradient image</span></li>
|
|
<li class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]"><span><i class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e668b3] left-0"></i></span><span>SVG icons</span></li>
|
|
<li class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full relative !pl-5 !mt-[10px]"><span><i class="uil uil-check before:content-['\e9dd'] absolute top-[-0.2rem] text-[1rem] !text-[#e668b3] left-0"></i></span><span>Colorful design</span></li>
|
|
</ul>
|
|
<a href="../../demo19.html" target="_blank" class="btn btn-sm btn-fuchsia !text-white !bg-[#e668b3] border-[#e668b3] hover:text-white hover:bg-[#e668b3] hover:!border-[#e668b3] active:text-white active:bg-[#e668b3] active:border-[#e668b3] disabled:text-white disabled:bg-[#e668b3] disabled:border-[#e668b3] !rounded-[50rem] !mt-1">See Demo</a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="text-center !mt-12"><a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">See All Demos</a></div>
|
|
</div>
|
|
<!-- /.demos-wrapper -->
|
|
</div></code></pre>
|
|
</div>
|
|
<!--/.code-wrapper-inner -->
|
|
</div>
|
|
<!--/.code-wrapper -->
|
|
</div>
|
|
<!--/.card-footer -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
</div>
|
|
<!-- /.content-wrapper -->
|
|
<section class="wrapper bg-[#21262c] opacity-100 !text-white">
|
|
<div class="container pt-[4.5rem] xl:pt-24 lg:pt-24 md:pt-24 !text-center">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="md:w-10/12 lg:w-9/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<h2 class="!text-[calc(1.325rem_+_0.9vw)] font-bold !leading-[1.25] xl:!text-[2rem] !text-white !mt-3 !mb-3 xl:!px-8 lg:!px-8">Think unique and be creative. Make a difference with Trunçgil.</h2>
|
|
<p class="lead text-[1.05rem] !leading-[1.6] !mb-6">Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.</p>
|
|
<a href="https://truncgil.com.tr" target="_blank" class="btn btn-lg btn-white !rounded-[50rem] !mb-10 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Buy Trunçgil</a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<img class="max-w-full h-auto m-[0_auto]" src="../../assets/img/demos/f1.png" alt="image">
|
|
</div>
|
|
<!-- /.container -->
|
|
</section>
|
|
<!-- /section -->
|
|
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
|
|
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
|
|
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
|
|
</svg>
|
|
</div>
|
|
<script src="../../assets/js/plugins.js"></script>
|
|
<script src="../../assets/js/theme.js"></script>
|
|
</body>
|
|
|
|
|
|
<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/docs/blocks/portfolio by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 11:01:39 GMT -->
|
|
</html> |