Ümit Tunç
1016 lines
103 KiB
HTML
1016 lines
103 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
|
||
<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/demo33 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 10:59:43 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="style.css">
|
||
<link rel="stylesheet" href="assets/css/colors/navy.css">
|
||
<link rel="preload" href="assets/css/fonts/space.css" as="style" onload="this.rel='stylesheet'">
|
||
<style>
|
||
.navbar.navbar-light.fixed .btn:not(.btn-expand):not(.btn-gradient) {
|
||
background: #343f52 !important;
|
||
border-color: #343f52 !important;
|
||
color: #ffffff !important;
|
||
}
|
||
@media (max-width: 991.98px){
|
||
.navbar-expand-lg .navbar-collapse .dropdown-toggle:after {
|
||
color: #ffffff !important;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="grow shrink-0">
|
||
<header class="relative wrapper !bg-[#edf2fc] my-1">
|
||
<nav class="navbar navbar-expand-lg center-nav navbar-light navbar-bg-light !bg-[#ffffff] ">
|
||
<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">
|
||
|
||
|
||
</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 font-bold !tracking-[-0.01rem] hover:!text-[#e31e24] after:!text-[#e31e24]" 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 font-bold !tracking-[-0.01rem] hover:!text-[#e31e24] after:!text-[#e31e24]" href="#" data-bs-toggle="dropdown">Pages</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#e31e24] dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='services.html'>Services I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='services2.html'>Services II</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#e31e24] dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='about.html'>About I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='about2.html'>About II</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#e31e24] dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='shop.html'>Shop I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='shop2.html'>Shop II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='shop-product.html'>Product Page</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='shop-cart.html'>Shopping Cart</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='shop-checkout.html'>Checkout</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#e31e24] dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='contact.html'>Contact I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='contact2.html'>Contact II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='contact3.html'>Contact III</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#e31e24] dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='career.html'>Job Listing I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='career2.html'>Job Listing II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='career-job.html'>Job Description</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#e31e24] dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='404.html'>404 Not Found</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='page-loader.html'>Page Loader</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='signin.html'>Sign In I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='signin2.html'>Sign In II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='signup.html'>Sign Up I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='signup2.html'>Sign Up II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='terms.html'>Terms</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='pricing.html'>Pricing</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='onepage.html'>One Page</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle font-bold !tracking-[-0.01rem] hover:!text-[#e31e24] after:!text-[#e31e24]" href="#" data-bs-toggle="dropdown">Projects</a>
|
||
<div class="dropdown-menu dropdown-lg">
|
||
<div class="dropdown-lg-content">
|
||
<div>
|
||
<h6 class="dropdown-header !text-[#e31e24]">Project Pages</h6>
|
||
<ul class="pl-0 list-none">
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='projects.html'>Projects I</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='projects2.html'>Projects II</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='projects3.html'>Projects III</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='projects4.html'>Projects IV</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- /.column -->
|
||
<div>
|
||
<h6 class="dropdown-header !text-[#e31e24]">Single Projects</h6>
|
||
<ul class="pl-0 list-none">
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='single-project.html'>Single Project I</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='single-project2.html'>Single Project II</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='single-project3.html'>Single Project III</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' 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 font-bold !tracking-[-0.01rem] hover:!text-[#e31e24] after:!text-[#e31e24]" href="#" data-bs-toggle="dropdown">Blog</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='blog.html'>Blog without Sidebar</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='blog2.html'>Blog with Sidebar</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='blog3.html'>Blog with Left Sidebar</a></li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#e31e24] dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='blog-post.html'>Post without Sidebar</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' href='blog-post2.html'>Post with Sidebar</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#e31e24]' 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 font-bold !tracking-[-0.01rem] hover:!text-[#e31e24] after:!text-[#e31e24]" href="#" data-bs-toggle="dropdown">Blocks</a>
|
||
<ul class="dropdown-menu mega-menu mega-menu-dark mega-menu-img">
|
||
<li class="mega-menu-content">
|
||
<ul class="grid grid-cols-1 xl:grid-cols-6 lg:grid-cols-6 mx-0 xl:mx-[-15px] lg:mx-[-15px] xl:!mt-[-20px] lg:!mt-[-20px] !pl-0 list-none">
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/about.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block1.svg" alt="image"></div>
|
||
<span>About</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/blog.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block2.svg" alt="image"></div>
|
||
<span>Blog</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/call-to-action.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block3.svg" alt="image"></div>
|
||
<span>Call to Action</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/clients.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block4.svg" alt="image"></div>
|
||
<span>Clients</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/contact.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block5.svg" alt="image"></div>
|
||
<span>Contact</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/facts.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block6.svg" alt="image"></div>
|
||
<span>Facts</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/faq.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block7.svg" alt="image"></div>
|
||
<span>FAQ</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/features.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block8.svg" alt="image"></div>
|
||
<span>Features</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/footer.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block9.svg" alt="image"></div>
|
||
<span>Footer</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/hero.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block10.svg" alt="image"></div>
|
||
<span>Hero</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/misc.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block17.svg" alt="image"></div>
|
||
<span>Misc</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/navbar.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block11.svg" alt="image"></div>
|
||
<span>Navbar</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/portfolio.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block12.svg" alt="image"></div>
|
||
<span>Portfolio</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/pricing.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block13.svg" alt="image"></div>
|
||
<span>Pricing</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/process.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block14.svg" alt="image"></div>
|
||
<span>Process</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/team.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block15.svg" alt="image"></div>
|
||
<span>Team</span>
|
||
</a>
|
||
</li>
|
||
<li class="xl:!px-[15px] xl:!mt-[20px] lg:!px-[15px] lg:!mt-[20px]"><a class='dropdown-item' href='docs/blocks/testimonials.html'>
|
||
<div class="rounded img-svg hidden xl:block lg:block p-4 xl:!mb-2 lg:!mb-2"><img class="rounded-none" src="assets/img/demos/block16.svg" alt="image"></div>
|
||
<span>Testimonials</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<!--/.row -->
|
||
</li>
|
||
<!--/.mega-menu-content-->
|
||
</ul>
|
||
<!--/.dropdown-menu -->
|
||
</li>
|
||
<li class="nav-item dropdown dropdown-mega">
|
||
<a class="nav-link dropdown-toggle font-bold !tracking-[-0.01rem] hover:!text-[#e31e24] after:!text-[#e31e24]" href="#" data-bs-toggle="dropdown">Documentation</a>
|
||
<ul class="dropdown-menu mega-menu">
|
||
<li class="mega-menu-content">
|
||
<div class="flex flex-wrap mx-0 xl:mx-[-7.5px] lg:mx-[-7.5px]">
|
||
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] max-w-full">
|
||
<h6 class="dropdown-header !text-[#e31e24]">Usage</h6>
|
||
<ul class="pl-0 list-none xl:columns-2 lg:columns-2 xl:pb-1 lg:pb-1">
|
||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='docs/index.html'>Get Started</a></li>
|
||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='docs/forms.html'>Forms</a></li>
|
||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='docs/faq.html'>FAQ</a></li>
|
||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='docs/changelog.html'>Changelog</a></li>
|
||
<li class="xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='docs/credits.html'>Credits</a></li>
|
||
</ul>
|
||
<h6 class="dropdown-header !text-[#e31e24] xl:!mt-6 lg:!mt-6">Styleguide</h6>
|
||
<ul class="pl-0 list-none xl:columns-2 lg:columns-2 ">
|
||
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='docs/styleguide/colors.html'>Colors</a></li>
|
||
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='docs/styleguide/fonts.html'>Fonts</a></li>
|
||
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='docs/styleguide/icons-svg.html'>SVG Icons</a></li>
|
||
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='docs/styleguide/icons-font.html'>Font Icons</a></li>
|
||
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='docs/styleguide/illustrations.html'>Illustrations</a></li>
|
||
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='docs/styleguide/backgrounds.html'>Backgrounds</a></li>
|
||
<li class=" xl:inline-block xl:w-full lg:inline-block lg:w-full"><a class='dropdown-item hover:!text-[#e31e24]' href='docs/styleguide/misc.html'>Misc</a></li>
|
||
</ul>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] max-w-full xl:border-l-[rgba(164,174,198,0.2)] xl:border-l xl:border-solid lg:border-l-[rgba(164,174,198,0.2)] lg:border-l lg:border-solid">
|
||
<h6 class="dropdown-header !text-[#e31e24]">Elements</h6>
|
||
<ul class="pl-0 list-none xl:columns-3 lg:columns-3 ">
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/accordion.html'>Accordion</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/alerts.html'>Alerts</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/animations.html'>Animations</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/avatars.html'>Avatars</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/background.html'>Background</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/badges.html'>Badges</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/buttons.html'>Buttons</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/card.html'>Card</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/carousel.html'>Carousel</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/dividers.html'>Dividers</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/form-elements.html'>Form Elements</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/image-hover.html'>Image Hover</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/image-mask.html'>Image Mask</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/lightbox.html'>Lightbox</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/player.html'>Media Player</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/modal.html'>Modal</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/pagination.html'>Pagination</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/progressbar.html'>Progressbar</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/shadows.html'>Shadows</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/shapes.html'>Shapes</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/tables.html'>Tables</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/tabs.html'>Tabs</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/text-animations.html'>Text Animations</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/text-highlight.html'>Text Highlight</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/tiles.html'>Tiles</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#e31e24]' href='docs/elements/typography.html'>Typography</a></li>
|
||
</ul>
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
</li>
|
||
<!--/.mega-menu-content-->
|
||
</ul>
|
||
<!--/.dropdown-menu -->
|
||
</li>
|
||
</ul>
|
||
<!-- /.navbar-nav -->
|
||
<div class="offcanvas-footer xl:!hidden lg:!hidden">
|
||
<div>
|
||
<a href="mailto:first.last@email.com" class="link-inverse">info@truncgil.com</a>
|
||
<br> 00 (123) 456 78 90 <br>
|
||
<nav class="nav social social-white !mt-4">
|
||
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-twitter before:content-['\ed59'] !text-white text-[1rem]"></i></a>
|
||
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] !text-white text-[1rem]"></i></a>
|
||
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] !text-white text-[1rem]"></i></a>
|
||
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] !text-white text-[1rem]"></i></a>
|
||
<a class="!text-[#cacaca] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="#"><i class="uil uil-youtube before:content-['\edb5'] !text-white text-[1rem]"></i></a>
|
||
</nav>
|
||
<!-- /.social -->
|
||
</div>
|
||
</div>
|
||
<!-- /.offcanvas-footer -->
|
||
</div>
|
||
<!-- /.offcanvas-body -->
|
||
</div>
|
||
<!-- /.navbar-collapse -->
|
||
<div class="navbar-other w-full !flex !ml-auto">
|
||
<ul class="navbar-nav !flex-row !items-center !ml-auto">
|
||
<li class="nav-item hidden xl:block lg:block md:block">
|
||
<a class='btn btn-sm btn-navy' href='contact.html'>Contact Me</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="section-frame xl:mx-6 xl:rounded-[1rem] lg:mx-6 lg:rounded-[1rem] md:mx-6 md:rounded-[1rem] xxl:!mx-12 overflow-hidden">
|
||
<div class="wrapper image-wrapper bg-image bg-cover bg-overlay bg-overlay-light-500 bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.5)]" data-image-src="./assets/img/photos/bg23.png">
|
||
<div class="container py-24 xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem] !text-center !relative">
|
||
<div class="!absolute shape yellow hidden xl:block lg:block w-5" style="top: 18%; left: 5%;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 219.5 219.5" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/svg/pie.svg" class="svg-inject icon-svg !w-full !h-full"><path class="svg-fill" d="M219.5 219.5H0c0-58.19 23.14-114.06 64.29-155.21A219.561 219.561 0 01219.5 0v219.5z"></path></svg></div>
|
||
<div class="!absolute shape leaf hidden xl:block lg:block !w-[2.5rem]" style="bottom: 30%; left: 2%;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 457.71 446.45" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/svg/scribble.svg" class="svg-inject icon-svg !w-full !h-full"><path class="svg-fill" d="M205.62 442.54c-.51-.41-.99-.84-1.46-1.31-10.4-10.39-3.61-27.12 11.63-52.5 11.72-19.51 28.48-43.74 46.22-69.39 17.53-25.34 35.66-51.54 49.01-73.47 14.73-24.19 18.57-35.01 19.51-39.48-3.86-.28-13.15.3-33.78 6.52-19.71 5.94-43.09 14.92-65.7 23.6-63.8 24.49-85.35 31.41-96.51 19.5-3.21-3.43-7.62-11.04-1.12-23.54 2.49-4.79 6.64-10.51 12.68-17.5 10.4-12.03 25.04-26.34 40.55-41.49 14.02-13.7 28.53-27.87 39.53-40.11 9.93-11.04 14.15-17.43 15.94-20.82-3.43-.75-10.24-1.51-23.25-.92-14.99.68-33.44 2.89-51.28 5.02-46.92 5.61-74.09 8.33-86.81-.99-4.78-3.5-7.67-8.42-8.41-14.24-1.97-15.58 12.45-33.15 29.14-53.5 5.31-6.47 13.31-16.22 17.36-22.68-4.51-.38-12.43-.4-25.97 1.1-16.54 1.82-35.62 5.22-50.95 7.96-12.62 2.25-22.6 4.03-28.48 4.49C6.6 39.3.58 34.17.04 27.28c-.54-6.88 4.6-12.9 11.48-13.44 4.66-.37 14.58-2.13 26.06-4.18C54.56 6.63 75.7 2.86 94 1.07c26.41-2.6 40.16-.54 47.48 7.13 7.01 7.34 6.45 17.66-1.68 30.66-4.72 7.55-11.63 15.98-18.95 24.9-6.18 7.53-12.57 15.31-17.24 22.19-3.35 4.92-4.95 8.13-5.71 10.07 3 .54 9.09 1.08 20.87.43 13.21-.73 29.07-2.63 45.86-4.64 59.99-7.17 94.33-10.22 102.49 10.62 7.4 18.93-16.51 43.51-62.99 88.92-12.69 12.4-24.68 24.11-34.04 34.28-3.17 3.45-5.68 6.34-7.67 8.75 15.88-4.42 41.18-14.13 59.67-21.22 62.4-23.96 101.69-37.87 121.09-29.14 5.38 2.42 9.26 6.47 11.23 11.72 7.48 19.95-16.15 57.31-71.83 137.82-15.49 22.39-30.12 43.55-41.18 61.25-7.13 11.4-11.3 19.11-13.75 24.25 8.97-3.3 25.58-11 55.73-28.8 32.68-19.29 70.61-44.04 101.09-63.94 24.62-16.07 44.07-28.76 54.65-34.68 6.03-3.37 13.64-1.22 17.01 4.81 3.37 6.03 1.22 13.64-4.81 17.01-9.83 5.5-29.92 18.61-53.18 33.79-33.46 21.84-75.1 49.01-110.05 69.21-49.35 28.51-70.85 35.44-82.46 26.07z"></path></svg></div>
|
||
<div class="!absolute shape fuchsia hidden xl:block lg:block w-6" style="top: 20%; right: 2%; transform: rotate(70deg);"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 411.42 329.24" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/svg/tri.svg" class="svg-inject icon-svg !w-full !h-full"><g data-name="Layer 2"><path class="svg-fill" d="M164.34 21.92L8.72 251.15c-22.54 33.2 1.24 78.09 41.37 78.09h311.24c40.13 0 63.91-44.89 41.37-78.09L247.08 21.92a50 50 0 00-82.74 0z" data-name="Layer 1"></path></g></svg></div>
|
||
<div class="!absolute shape grape hidden xl:block lg:block w-6" style="bottom: 28%; right: 5%;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/svg/circle.svg" class="svg-inject icon-svg !w-full !h-full"><g data-name="Layer 2"><path class="svg-fill" d="M250 0C111.93 0 0 111.93 0 250s111.93 250 250 250 250-111.93 250-250S388.07 0 250 0zm0 425a175 175 0 11175-175 175 175 0 01-175 175z" data-name="Layer 1"></path></g></svg></div>
|
||
<div class="flex flex-wrap mx-[-15px]">
|
||
<div class="lg:w-9/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
||
<h1 class="font-semibold !leading-[1.15] xl:!text-[3.5rem] !text-[calc(1.475rem_+_2.7vw)] md:!px-10 lg:!px-0 xl:!px-8 !mb-5">👋 Hello! I'm <img class="inline !w-[3.5rem] mx-1" src="assets/img/avatars/avatar.png" alt="image"> Camille, a product designer.</h1>
|
||
<p class="lead !text-[1.2rem] !leading-[1.6] md:!px-10 lg:!px-0 xl:!px-0 lg:mx-[-2.5rem] xl:mx-0 !mb-8">I’m very passionate about the work that I do, and if you are curious you can find my works on <a href="#" class="hover !text-[#60697b]">Dribbble</a>, my portfolio on <a href="#" class="hover !text-[#60697b]">Behance</a>.</p>
|
||
<a href="#" class="btn btn-lg btn-navy !text-white !bg-[#343f52] border-[#343f52] hover:text-white hover:bg-[#343f52] hover:!border-[#343f52] focus:shadow-[rgba(82,92,108,1)] active:text-white active:bg-[#343f52] active:border-[#343f52] disabled:text-white disabled:bg-[#343f52] disabled:border-[#343f52] btn-icon btn-icon-end">See My Works <i class="uil uil-arrow-up-right !ml-[.3rem] before:content-['\e950']"></i></a>
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</div>
|
||
<!-- /.wrapper -->
|
||
</section>
|
||
<!-- /section -->
|
||
<section class="wrapper !bg-[#ffffff]">
|
||
<div class="container py-24 xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem]">
|
||
<div class="flex flex-wrap mx-[-15px] items-start !mt-[-50px] !mb-[8rem] xl:!mb-[10rem] lg:!mb-[10rem] md:!mb-[10rem]">
|
||
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!sticky lg:!sticky !mt-[50px]" style="top: 8rem;">
|
||
<h3 class="!text-[calc(1.345rem_+_1.14vw)] !leading-[1.2] xl:!text-[2.2rem] !mb-5">The service I offer is specifically designed to meet your needs.</h3>
|
||
<p class="!mb-7">Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||
<a href="#" class="btn btn-lg btn-navy !text-white !bg-[#343f52] border-[#343f52] hover:text-white hover:bg-[#343f52] hover:!border-[#343f52] focus:shadow-[rgba(82,92,108,1)] active:text-white active:bg-[#343f52] active:border-[#343f52] disabled:text-white disabled:bg-[#343f52] disabled:border-[#343f52] btn-icon btn-icon-end">More Details <i class="uil uil-arrow-up-right !ml-[.3rem] before:content-['\e950']"></i></a>
|
||
</div>
|
||
<!-- /column -->
|
||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !ml-auto !mt-[50px]">
|
||
<div class="card !bg-[#fdf1f8] !mb-6">
|
||
<div class="card-body flex flex-row p-[40px]">
|
||
<div>
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 511.9" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/search-2.svg" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] text-[#e668b3] text-fuchsia mr-5"><path class="lineal-stroke" d="M297.3 429.9c-118.7 0-215-96.2-215-215 0-80.1 44.5-153.5 115.5-190.6 105.1-54.7 235.1-13.8 289.9 91.3 4 8 .8 17.7-7.1 21.7-7.8 3.9-17.3.9-21.5-6.8C412.5 41.2 302 6.4 212.7 52.9c-89.4 46.7-124 156.9-77.4 246.3s156.9 124 246.3 77.4c61.7-32.2 99.8-96.8 98-166.4-.2-8.9 6.9-16.3 15.8-16.4 8.9-.2 16.2 6.8 16.4 15.7 2.9 118.8-91.1 217.5-209.9 220.4-1.4-.1-3 0-4.6 0z"></path><circle class="lineal-fill" cx="297.1" cy="214.9" r="111.1"></circle><path class="lineal-stroke" d="M297.1 342.1c-70.3 0-127.2-57-127.2-127.2s57-127.2 127.2-127.2 127.2 57 127.2 127.2c-.1 70.2-57 127.1-127.2 127.2zm0-222.2c-52.5 0-95 42.5-95 95s42.5 95 95 95 95-42.5 95-95c-.1-52.5-42.6-95-95-95zm-240.6 392C25.3 511.9 0 486.6 0 455.4c0-17.6 8.2-34.2 22.2-44.9L88.3 360c6.4-4.9 15.5-4.3 21.2 1.4l41.1 41.1c5.7 5.7 6.3 14.8 1.4 21.2l-50.5 66.1c-9.9 12.9-24.9 21-41.2 22.1h-3.8zm40.1-117.7l-54.9 41.9c-10.7 8.1-12.9 23.3-4.8 34s23.3 12.9 34 4.8c1.8-1.4 3.4-3 4.8-4.8l42-54.9-21.1-21z"></path></svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="!text-[1.05rem] !mb-2">User Research</h3>
|
||
<p class="!mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, nulla non metus auctor eget lacinia odio sem aget elit.</p>
|
||
</div>
|
||
</div>
|
||
<!-- /.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
<div class="card !bg-[#eff7fa] !mb-6">
|
||
<div class="card-body flex flex-row p-[40px]">
|
||
<div>
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 507.4 512" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/puzzle-2.svg" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] text-[#54a8c7] text-aqua mr-5"><path class="lineal-fill" d="M257.9 15.2v65.1c-28.7-15.6-64.7-5-80.3 23.8s-5 64.7 23.8 80.3c17.6 9.6 38.9 9.6 56.6 0v65.1h59.9c-8.4-31.6 10.5-64 42.1-72.4 31.6-8.4 64 10.5 72.4 42.1 2.6 9.9 2.6 20.4 0 30.3h59.9V70.7c0-30.7-24.9-55.5-55.5-55.5H257.9z"></path><path class="lineal-stroke" d="M436.7 0h-366C31.7 0 0 31.7 0 70.7v370.6c0 39 31.7 70.7 70.7 70.7h188.1c8.4 0 15.2-6.8 15.2-15.1V453c5.5 1 11.2 1.3 16.8 1 17.5-.9 34.2-7.9 47.1-19.9 30.1-28 31.7-75.1 3.7-105.2-23.2-24.8-60.2-30.8-90-14.6-7.3 4-10.1 13.2-6.1 20.6 4 7.4 13.2 10.1 20.6 6.1 7.4-4 15.7-5.8 24.1-5.2 24.3 1.7 42.6 22.8 40.9 47-1.5 21.8-19.8 39.8-41.7 40.8-8.1.4-16.1-1.4-23.2-5.3-2.2-1.2-4.7-1.8-7.3-1.8-8.4 0-15.2 6.8-15.2 15.2v49.9h-173c-22.3 0-40.3-18.1-40.3-40.3V264.6h28.7c-.5 2.6-.8 5.2-1 7.8-2.9 41 28 76.6 69 79.5 1.8.1 3.6.2 5.3.2 18.8.1 37-7.1 50.7-20 24.8-23.2 30.8-60.1 14.6-89.9-.1-.2-.2-.3-.3-.5-4.1-7.3-13.4-9.9-20.7-5.7-7.3 4.1-9.9 13.4-5.7 20.7 4 7.4 5.8 15.8 5.2 24.2-1.7 24.3-22.8 42.5-47.1 40.8-21.8-1.5-39.8-19.8-40.8-41.7-.4-8.1 1.4-16.1 5.2-23.3 1.2-2.2 1.9-4.7 1.9-7.3 0-8.4-6.8-15.2-15.2-15.2H30.4V70.7c0-22.3 18.1-40.3 40.3-40.3h172v28.7c-8.7-1.6-17.6-1.6-26.2 0-40.5 7.2-67.4 45.9-60.1 86.4s45.9 67.4 86.4 60.1v43.9c0 8.4 6.8 15.2 15.2 15.2h59.9c1.6 0 3.2-.3 4.7-.7 8-2.6 12.3-11.2 9.7-19.2-.6-2.5-1-5.1-1.2-7.7-1.5-24.3 16.9-45.2 41.2-46.7.9-.1 1.8-.1 2.7-.1 3.8 0 7.6.5 11.3 1.5 23.5 6.2 37.5 30.4 31.3 53.9-.3 1.3-.5 2.6-.5 3.9 0 8.4 6.8 15.2 15.2 15.2h59.9c8.4 0 15.2-6.8 15.2-15.2V70.7c-.1-39-31.7-70.7-70.7-70.7zM477 234.2h-27.5c0-41.1-33.3-74.4-74.4-74.4-1.5 0-3 0-4.6.1-36 2.2-65.9 30.9-69.5 66.8-.2 2.5-.4 5-.4 7.5h-27.5v-49.9c0-2.5-.6-5-1.8-7.3-4-7.4-13.2-10.1-20.6-6.1-7.4 4-15.7 5.8-24.1 5.2-24.3-1.7-42.6-22.8-40.9-47 1.5-21.8 19.8-39.8 41.7-40.8 8.1-.4 16.1 1.4 23.2 5.3 2.2 1.2 4.7 1.8 7.3 1.8 8.4 0 15.2-6.8 15.2-15.2V30.4h163.6c22.3 0 40.3 18.1 40.3 40.3v163.5z"></path></svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="!text-[1.05rem] !mb-2">Strategy & Planning</h3>
|
||
<p class="!mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, nulla non metus auctor eget lacinia odio sem aget elit.</p>
|
||
</div>
|
||
</div>
|
||
<!-- /.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
<div class="card !bg-[#fff8ee] !mb-6">
|
||
<div class="card-body flex flex-row p-[40px]">
|
||
<div>
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 327.4 512" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/smartphone.svg" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] text-[#fab758] text-yellow mr-5"><path class="lineal-fill" d="M313.7 72.3V47c0-18.4-14.9-33.2-33.2-33.2H47c-18.4 0-33.2 14.9-33.2 33.2v25.3h299.9zM13.8 398.4V465c0 18.4 14.9 33.2 33.2 33.2h233.4c18.4 0 33.2-14.9 33.2-33.2v-66.6H13.8z"></path><path class="lineal-stroke" d="M280.4 0H47C21.1 0 0 21.1 0 47v418c0 25.9 21.1 47 47 47h233.4c25.9 0 47-21.1 47-47V352.3c0-7.6-6.2-13.8-13.8-13.7-7.6 0-13.7 6.2-13.7 13.7v32.3H27.5V86.1h272.4V256c0 7.6 6.1 13.8 13.7 13.8s13.8-6.1 13.8-13.7V47c0-25.9-21-47-47-47zm19.5 412.1V465c0 10.8-8.7 19.5-19.5 19.5H47c-10.8 0-19.5-8.7-19.5-19.5v-52.9h272.4zM27.5 58.6V47c0-10.8 8.7-19.5 19.5-19.5h233.4c10.8 0 19.5 8.7 19.5 19.5v11.6H27.5z"></path><circle cx="163.7" cy="448.3" r="9.4"></circle><path class="lineal-stroke" d="M163.7 471.5c-12.8 0-23.2-10.4-23.2-23.2 0-12.8 10.4-23.2 23.2-23.2s23.2 10.4 23.2 23.2-10.4 23.2-23.2 23.2zm-25.4-248.1H69.5c-7.6 0-13.8-6.2-13.8-13.8V150c0-7.6 6.2-13.8 13.8-13.8h68.8c7.6 0 13.8 6.2 13.8 13.8s-6.2 13.8-13.8 13.8h-55v32.1h55c7.6 0 13.8 6.2 13.8 13.8-.1 7.5-6.2 13.7-13.8 13.7z"></path><path class="lineal-fill" d="M189.2 150H258v59.6h-68.8z"></path><path class="lineal-stroke" d="M258 223.4h-68.8c-7.6 0-13.8-6.2-13.8-13.8V150c0-7.6 6.2-13.8 13.8-13.8H258c7.6 0 13.7 6.2 13.7 13.8v59.6c0 7.6-6.1 13.8-13.7 13.8zm-55-27.5h41.3v-32.1h-41.4l.1 32.1z"></path><path class="lineal-fill" d="M69.5 265.6h68.8v59.6H69.5z"></path><path class="lineal-stroke" d="M138.3 339H69.5c-7.6 0-13.8-6.2-13.8-13.8v-59.7c0-7.6 6.2-13.8 13.8-13.8h68.8c7.6 0 13.7 6.2 13.7 13.8v59.6c0 7.7-6.1 13.9-13.7 13.9zm-55-27.5h41.2v-32.1H83.2l.1 32.1zM258 339h-68.8c-7.6 0-13.8-6.2-13.7-13.8 0-7.6 6.2-13.7 13.7-13.7h55v-32.1h-55c-7.6 0-13.8-6.2-13.8-13.8 0-7.6 6.2-13.8 13.8-13.8H258c7.6 0 13.8 6.2 13.8 13.8v59.6c0 7.6-6.2 13.8-13.8 13.8z"></path></svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="!text-[1.05rem] !mb-2">App Design</h3>
|
||
<p class="!mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, nulla non metus auctor eget lacinia odio sem aget elit.</p>
|
||
</div>
|
||
</div>
|
||
<!-- /.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
<div class="card !bg-[#f3f8f5] !mb-6">
|
||
<div class="card-body flex flex-row p-[40px]">
|
||
<div>
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.6 332.7" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/design.svg" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] text-[#7cb798] text-leaf mr-5"><path class="lineal-stroke" d="M350.9 54.2H58.7c-6.2.2-11.4-4.7-11.5-10.9S51.8 31.9 58 31.7h292.9c6.2-.2 11.4 4.7 11.5 10.9s-4.7 11.4-10.9 11.5c-.2.1-.4.1-.6.1zM239.8 328.9a11.182 11.182 0 01-10.6-14.8c2.8-8.3 16.2-47.4 25.6-63.6-9.5-10.1-37-40.3-49.9-66.1-12.1 23.4-39.5 54.4-50.1 66 10.1 16.5 22.7 54.9 25.4 63.6.4 1.2.6 2.4.6 3.7 0 6.2-5 11.2-11.2 11.2-4.9 0-9.3-3.2-10.7-7.9v-.1c-6.6-20.7-18.4-52.9-24.3-60.3-4.8-6.1-3.4-14.5-.8-19.8.5-.9 1.1-1.8 1.8-2.6 20.6-22.3 50.7-59.4 52.7-72.4.6-3.7 3.3-10.1 14.8-10.7 12.5-.7 16.6 4.8 17.8 9.4 5.7 21.5 40 60.3 52.7 73.4.8.8 1.5 1.8 2 2.8 2.6 5.1 4 13.3-.5 19.5-5.7 7.7-18.2 41.6-24.8 61.1-1.3 4.6-5.6 7.7-10.5 7.6z"></path><path class="lineal-stroke" d="M204.8 254.9c-6.2 0-11.2-5-11.2-11.2V167c.3-6.2 5.6-10.9 11.8-10.6 5.7.3 10.3 4.9 10.6 10.6v76.7c0 6.2-5 11.2-11.2 11.2z"></path><path class="lineal-stroke" d="M366.6 244.6c-6.2 0-11.2-5-11.2-11.2v-28.6c0-83.1-67.6-150.6-150.6-150.6S54.2 121.7 54.2 204.8v28.6c-.2 6.2-5.4 11.1-11.5 10.9-5.9-.2-10.7-4.9-10.9-10.9v-28.6c-.1-95.5 77.2-172.9 172.7-173 46 0 90.1 18.2 122.6 50.8 32.6 32.3 50.9 76.3 50.9 122.2v28.6c-.1 6.2-5.2 11.2-11.4 11.2z"></path><path class="lineal-fill" d="M220 74.7h-30.4c-9.1 0-16.5-7.4-16.5-16.5V27.7c0-9.1 7.4-16.5 16.5-16.5H220c9.1 0 16.5 7.4 16.5 16.5v30.5c0 9.1-7.4 16.5-16.5 16.5z"></path><path class="lineal-stroke" d="M220 85.9h-30.4c-15.3 0-27.7-12.4-27.7-27.7V27.7c0-15.3 12.4-27.7 27.7-27.7H220c15.3 0 27.7 12.4 27.7 27.7v30.5c0 15.3-12.4 27.7-27.7 27.7zm-30.4-63.5c-2.9 0-5.3 2.4-5.3 5.3v30.5c0 2.9 2.4 5.3 5.3 5.3H220c2.9 0 5.3-2.4 5.3-5.3V27.7c0-2.9-2.4-5.3-5.3-5.3h-30.4z"></path><path class="lineal-fill" d="M381.9 275.4h-30.5c-9.1 0-16.5-7.4-16.5-16.5v-30.5c0-9.1 7.4-16.5 16.5-16.5h30.5c9.1 0 16.5 7.4 16.5 16.5v30.5c0 9.1-7.4 16.5-16.5 16.5z"></path><path class="lineal-stroke" d="M381.9 286.6h-30.5c-15.3 0-27.7-12.4-27.7-27.7v-30.5c0-15.3 12.4-27.7 27.7-27.7h30.5c15.3 0 27.7 12.4 27.7 27.7v30.5c0 15.3-12.4 27.7-27.7 27.7zm-30.5-63.4c-2.9 0-5.3 2.4-5.3 5.3V259c0 2.9 2.4 5.3 5.3 5.3h30.5c2.9 0 5.3-2.4 5.3-5.3v-30.5c0-2.9-2.4-5.3-5.3-5.3h-30.5z"></path><path class="lineal-fill" d="M58.2 275.4H27.7c-9.1 0-16.5-7.4-16.5-16.5v-30.5c0-9.1 7.4-16.5 16.5-16.5h30.5c9.1 0 16.5 7.4 16.5 16.5V259c0 9.1-7.4 16.5-16.5 16.4z"></path><path class="lineal-stroke" d="M58.2 286.6H27.7C12.4 286.6 0 274.2 0 258.9v-30.5c0-15.3 12.4-27.7 27.7-27.7h30.5c15.3 0 27.7 12.4 27.7 27.7v30.5c0 15.3-12.4 27.7-27.7 27.7zm-30.5-63.4c-2.9 0-5.3 2.4-5.3 5.3V259c0 2.9 2.4 5.3 5.3 5.3h30.5c2.9 0 5.3-2.4 5.3-5.3v-30.5c0-2.9-2.4-5.3-5.3-5.3H27.7zm234.1 109.5h-114c-6.2 0-11.2-5-11.2-11.2 0-6.2 5-11.2 11.2-11.2h114c6.2 0 11.2 5 11.2 11.2 0 6.2-5 11.2-11.2 11.2z"></path></svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="!text-[1.05rem] !mb-2">Brand Design</h3>
|
||
<p class="!mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, nulla non metus auctor eget lacinia odio sem aget elit.</p>
|
||
</div>
|
||
</div>
|
||
<!-- /.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
<div class="card !bg-[#fef4f2] !mb-6">
|
||
<div class="card-body flex flex-row p-[40px]">
|
||
<div>
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.6 332" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/video-editing.svg" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] text-[#f78b77] text-orange mr-5"><path class="lineal-stroke" d="M318 0H53.9C24.2.1.1 24.2 0 53.9v210.8c0 29.8 24.2 53.9 53.9 53.9H318c29.8 0 54-24.1 54-53.9V53.9C371.9 24.1 347.8 0 318 0zm31.3 264.7c0 17.3-14 31.3-31.3 31.3H54c-17.3 0-31.3-14-31.3-31.3V53.9c0-17.3 13.9-31.3 31.2-31.3H318c17.3 0 31.3 14 31.3 31.3v210.8z"></path><path class="lineal-fill" d="M152.5 189.9v-65.7c0-3.8 3-6.8 6.8-6.8 1.2 0 2.3.3 3.3.9l57.9 32.8c3.3 1.9 4.4 6 2.6 9.3-.6 1.1-1.5 1.9-2.6 2.6l-57.9 32.8c-3.3 1.9-7.4.7-9.3-2.6-.5-1-.8-2.1-.8-3.3z"></path><path class="lineal-stroke" d="M159.3 208c-10 0-18.1-8.1-18.1-18.1v-65.7c0-10 8.1-18.1 18.1-18.1 3.1 0 6.2.8 8.9 2.3l57.9 32.9c8.7 4.9 11.8 16 6.8 24.7-1.6 2.9-4 5.2-6.8 6.8l-57.9 32.8c-2.7 1.6-5.8 2.4-8.9 2.4zm4.5-76v50.1L208 157l-44.2-25z"></path><path class="lineal-stroke" d="M186 261.2c-56.3 0-101.9-45.7-101.9-101.9.2-6.3 5.4-11.2 11.7-11 6 .2 10.8 5 11 11 0 43.8 35.5 79.3 79.3 79.3s79.3-35.5 79.3-79.3S229.8 80 186 80c-6.3-.2-11.2-5.4-11-11.7.2-6 5-10.8 11-11 56.3.6 101.5 46.6 100.9 102.9-.5 55.6-45.4 100.5-100.9 101z"></path><path class="lineal-fill" d="M201.7 314.2l-30.6 6.3c-2.2.5-4.3-1-4.8-3.2-.1-.5-.1-1.1 0-1.6l6.3-30.6c.4-1.9 1.3-3.6 2.7-5L362.2 93.2c6.2-6.2 16.3-6.2 22.5 0l8.9 8.9c6.2 6.2 6.2 16.3 0 22.5L206.7 311.5c-1.3 1.4-3.1 2.3-5 2.7z"></path><path class="lineal-stroke" d="M401.6 94.1l-8.9-8.9c-10.6-10.6-27.9-10.6-38.5 0l-20.5 20.5c-.8.5-1.6 1.1-2.3 1.9-.5.6-1 1.2-1.4 1.8L167.3 272.2c-3 2.9-5 6.6-5.8 10.7l-6.3 30.6c-.2 1-.3 2.1-.3 3.1 0 8.5 6.9 15.4 15.4 15.4 1 0 2.1-.1 3.1-.4l30.6-6.3c4-.9 7.8-2.9 10.7-5.8l163.8-163.8c.3-.2.5-.4.8-.7s.6-.6.8-.9l21.5-21.5c10.6-10.6 10.6-27.9 0-38.5zM199.1 303.3l-19.4 4 4-19.4L340 131.7l15.4 15.4-156.3 156.2zm186.6-186.6L371.3 131 356 115.7l14.4-14.4c.8-.8 2-1.3 3.2-1.3s2.3.4 3.2 1.3l8.9 8.9c1.8 1.8 1.8 4.7 0 6.5z"></path></svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="!text-[1.05rem] !mb-2">Motion Graphic</h3>
|
||
<p class="!mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, nulla non metus auctor eget lacinia odio sem aget elit.</p>
|
||
</div>
|
||
</div>
|
||
<!-- /.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
<div class="card !bg-[#f0f0f8]">
|
||
<div class="card-body flex flex-row p-[40px]">
|
||
<div>
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 442.8" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/browser.svg" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] text-[#e31e24] text-grape mr-5"><path class="lineal-stroke" d="M464.2 442.8H47.7C21.4 442.8 0 421.4 0 395.1V47.7C0 21.4 21.4 0 47.7 0h416.5C490.6 0 512 21.4 512 47.7c0 7.6-6.2 13.8-13.8 13.9-7.6 0-13.8-6.2-13.9-13.8 0-11.1-9-20-20.1-20.1H47.7c-11.1 0-20 9-20.1 20.1v347.3c0 11.1 9 20.1 20.1 20.1h416.5c11.1 0 20.1-9 20.1-20.1V209.4c0-7.6 6.2-13.8 13.8-13.9 7.6 0 13.8 6.2 13.9 13.8V395c0 26.4-21.4 47.8-47.8 47.8z"></path><path class="lineal-fill" d="M13.8 47.7v69.9h484.3V47.7c0-18.7-15.2-33.9-33.9-33.9H47.7C29 13.8 13.8 29 13.8 47.7z"></path><path class="lineal-stroke" d="M498.2 131.5H13.8c-7.6 0-13.8-6.2-13.8-13.8v-70C0 21.4 21.4 0 47.7 0h416.5C490.6 0 512 21.4 512 47.7v69.9c0 7.7-6.2 13.9-13.8 13.9zM27.7 103.8h456.6v-56c0-11.1-9-20.1-20.1-20.1H47.8c-11.1 0-20 9-20.1 20v56.1z"></path><path class="lineal-stroke" d="M294.7 79.6h-26.3c-7.6 0-13.8-6.2-13.8-13.8S260.8 52 268.4 52h26.3c7.6 0 13.8 6.2 13.8 13.8.1 7.6-6.1 13.8-13.8 13.8zm73.4 0h-26.3c-7.6 0-13.8-6.2-13.8-13.8 0-7.6 6.2-13.8 13.8-13.8h26.3c7.6 0 13.8 6.2 13.8 13.8 0 7.6-6.2 13.8-13.8 13.8zm73.3 0h-26.3c-7.6 0-13.8-6.2-13.8-13.8 0-7.6 6.2-13.8 13.8-13.8h26.3c7.6 0 13.8 6.2 13.8 13.8.1 7.6-6.1 13.8-13.8 13.8z"></path><path class="lineal-fill" d="M112.8 268.5h286.4v63.6H112.8z"></path><path class="lineal-stroke" d="M399.2 345.9H112.8c-7.6 0-13.8-6.2-13.8-13.8v-63.7c0-7.6 6.2-13.8 13.8-13.8h286.4c7.6 0 13.8 6.2 13.8 13.8v63.7c.1 7.6-6.1 13.8-13.8 13.8zm-272.6-27.6h258.8v-36H126.6v36zm230.9-95.5h-203c-7.6.2-14-5.8-14.2-13.5s5.8-14 13.5-14.2h203.8c7.6-.2 14 5.8 14.2 13.5s-5.8 14-13.5 14.2h-.8z"></path></svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="!text-[1.05rem] !mb-2">Web Design</h3>
|
||
<p class="!mb-0">Duis mollis gravida commodo id luctus erat porttitor ligula, nulla non metus auctor eget lacinia odio sem aget elit.</p>
|
||
</div>
|
||
</div>
|
||
<!-- /.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
<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">
|
||
<h2 class="!text-[calc(1.345rem_+_1.14vw)] font-semibold !leading-[1.2] xl:!text-[2.2rem] !mb-0">Check out some of my latest projects with creative ideas.</h2>
|
||
</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-lg btn-navy !text-white !bg-[#343f52] border-[#343f52] hover:text-white hover:bg-[#343f52] hover:!border-[#343f52] focus:shadow-[rgba(82,92,108,1)] active:text-white active:bg-[#343f52] active:border-[#343f52] disabled:text-white disabled:bg-[#343f52] disabled:border-[#343f52] btn-icon btn-icon-end !mb-0">See All Projects <i class="uil uil-arrow-up-right !ml-[.3rem] before:content-['\e950']"></i></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.75rem] font-semibold !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="btn btn-sm btn-violet !text-white !bg-[#a07cc5] border-[#a07cc5] hover:text-white hover:bg-[#a07cc5] hover:!border-[#a07cc5] active:text-white active:bg-[#a07cc5] active:border-[#a07cc5] disabled:text-white disabled:bg-[#a07cc5] disabled:border-[#a07cc5] btn-icon btn-icon-end !mb-0 !text-[0.75rem]">See Project <i class="uil uil-arrow-up-right before:content-['\e950']"></i></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.75rem] font-semibold !mb-3 !text-[#3f78e0]">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="btn btn-sm btn-navy !text-white !bg-[#343f52] border-[#343f52] hover:text-white hover:bg-[#343f52] hover:!border-[#343f52] focus:shadow-[rgba(82,92,108,1)] active:text-white active:bg-[#343f52] active:border-[#343f52] disabled:text-white disabled:bg-[#343f52] disabled:border-[#343f52] btn-icon btn-icon-end !mb-0 !text-[0.75rem]">See Project <i class="uil uil-arrow-up-right before:content-['\e950']"></i></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.75rem] font-semibold !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="btn btn-sm btn-leaf !text-white !bg-[#7cb798] border-[#7cb798] hover:text-white hover:bg-[#7cb798] hover:!border-[#7cb798] focus:shadow-[rgba(113,165,142,1)] active:text-white active:bg-[#7cb798] active:border-[#7cb798] disabled:text-white disabled:bg-[#7cb798] disabled:border-[#7cb798] btn-icon btn-icon-end !text-[0.75rem] !mb-10">See Project <i class="uil uil-arrow-up-right before:content-['\e950']"></i></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.75rem] font-semibold !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="btn btn-sm btn-pink !text-white !bg-[#d16b86] border-[#d16b86] hover:text-white hover:bg-[#d16b86] hover:!border-[#d16b86] active:text-white active:bg-[#d16b86] active:border-[#d16b86] disabled:text-white disabled:bg-[#d16b86] disabled:border-[#d16b86] btn-icon btn-icon-end !text-[0.75rem] !mb-10">See Project <i class="uil uil-arrow-up-right before:content-['\e950']"></i></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 -->
|
||
</section>
|
||
<!-- /section -->
|
||
<section class="section-frame xxl:!mx-12">
|
||
<div class="wrapper image-wrapper bg-image bg-cover bg-overlay bg-overlay-light-500 section-frame-wrapper bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.5)]" data-image-src="assets/img/photos/bg23.png">
|
||
<div class="container py-24 xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem]">
|
||
<div class="flex flex-wrap mx-[-15px]">
|
||
<div class="md:w-10/12 lg:w-9/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
|
||
<h3 class="!text-[calc(1.345rem_+_1.14vw)] font-semibold !leading-[1.2] xl:!text-[2.2rem] !mb-10 xxl:!px-10">Don't take our word for it. See what customers are saying about us.</h3>
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
<div class="flex flex-wrap mx-[-15px]">
|
||
<div class="itemgrid xl:w-11/12 lg:w-11/12 md:w-11/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto xl:!mb-[-17.5rem] lg:!mb-[-17.5rem]">
|
||
<div class="flex flex-wrap mx-[-15px] isotope !mt-[-30px]">
|
||
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
|
||
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||
<div class="card-body flex-[1_1_auto] p-[40px]">
|
||
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
|
||
<blockquote class="!text-[0.85rem] !leading-[1.7] !font-normal !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
|
||
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis.”</p>
|
||
<div class="flex items-center text-left">
|
||
<div class="info !pl-0">
|
||
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Coriss Ambady</h5>
|
||
<p class="!mb-0 text-[.8rem]">Financial Analyst</p>
|
||
</div>
|
||
</div>
|
||
</blockquote>
|
||
</div>
|
||
<!-- /.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
</div>
|
||
<!--/column -->
|
||
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
|
||
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||
<div class="card-body flex-[1_1_auto] p-[40px]">
|
||
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
|
||
<blockquote class="!text-[0.85rem] !leading-[1.7] !font-normal !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
|
||
<p>“Fusce dapibus, tellus ac cursus tortor mauris condimentum fermentum massa justo sit amet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.”</p>
|
||
<div class="flex items-center text-left">
|
||
<div class="info !pl-0">
|
||
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Cory Zamora</h5>
|
||
<p class="!mb-0 text-[.8rem]">Marketing Specialist</p>
|
||
</div>
|
||
</div>
|
||
</blockquote>
|
||
</div>
|
||
<!-- /.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
</div>
|
||
<!--/column -->
|
||
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
|
||
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||
<div class="card-body flex-[1_1_auto] p-[40px]">
|
||
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
|
||
<blockquote class="!text-[0.85rem] !leading-[1.7] !font-normal !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
|
||
<p>“Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget porta ac consectetur vestibulum. Donec sed odio dui consectetur.”</p>
|
||
<div class="flex items-center text-left">
|
||
<div class="info !pl-0">
|
||
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Nikolas Brooten</h5>
|
||
<p class="!mb-0 text-[.8rem]">Sales Manager</p>
|
||
</div>
|
||
</div>
|
||
</blockquote>
|
||
</div>
|
||
<!-- /.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
</div>
|
||
<!--/column -->
|
||
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
|
||
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||
<div class="card-body flex-[1_1_auto] p-[40px]">
|
||
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
|
||
<blockquote class="!text-[0.85rem] !leading-[1.7] !font-normal !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
|
||
<p>“Etiam adipiscing tincidunt elit convallis felis suscipit ut. Phasellus rhoncus tincidunt auctor. Nullam eu sagittis mauris. Donec non dolor ac elit aliquam tincidunt at at sapien.”</p>
|
||
<div class="flex items-center text-left">
|
||
<div class="info !pl-0">
|
||
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Coriss Ambady</h5>
|
||
<p class="!mb-0 text-[.8rem]">Financial Analyst</p>
|
||
</div>
|
||
</div>
|
||
</blockquote>
|
||
</div>
|
||
<!-- /.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
</div>
|
||
<!--/column -->
|
||
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
|
||
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||
<div class="card-body flex-[1_1_auto] p-[40px]">
|
||
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
|
||
<blockquote class="!text-[0.85rem] !leading-[1.7] !font-normal !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
|
||
<p>“Maecenas sed diam eget risus varius blandit sit amet non magna. Cum sociis natoque penatibus magnis dis montes, nascetur ridiculus mus. Donec sed odio dui.”</p>
|
||
<div class="flex items-center text-left">
|
||
<div class="info !pl-0">
|
||
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Jackie Sanders</h5>
|
||
<p class="!mb-0 text-[.8rem]">Investment Planner</p>
|
||
</div>
|
||
</div>
|
||
</blockquote>
|
||
</div>
|
||
<!-- /.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
</div>
|
||
<!--/column -->
|
||
<div class="item md:w-6/12 lg:w-6/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
|
||
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
||
<div class="card-body flex-[1_1_auto] p-[40px]">
|
||
<span class="ratings inline-block relative w-20 h-[0.8rem] text-[0.9rem] leading-none before:text-[rgba(38,43,50,0.1)] after:inline-block after:not-italic after:font-normal after:absolute after:!text-[#fcc032] after:content-['\2605\2605\2605\2605\2605'] after:overflow-hidden after:left-0 after:top-0 before:inline-block before:not-italic before:font-normal before:absolute before:!text-[#fcc032] before:content-['\2605\2605\2605\2605\2605'] before:overflow-hidden before:left-0 before:top-0 five !mb-3"></span>
|
||
<blockquote class="!text-[0.85rem] !leading-[1.7] !font-normal !pl-4 icon !mb-0 m-[0_0_1rem] relative p-0 border-0 before:content-['\201d'] before:absolute before:top-[-1.5rem] before:left-[-0.9rem] before:text-[rgba(52,63,82,0.05)] before:text-[10rem] before:leading-none before:z-[1]">
|
||
<p>“Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur.”</p>
|
||
<div class="flex items-center text-left">
|
||
<div class="info !pl-0">
|
||
<h5 class="!mb-1 text-[.9rem] !leading-[1.5]">Laura Widerski</h5>
|
||
<p class="!mb-0 text-[.8rem]">Sales Specialist</p>
|
||
</div>
|
||
</div>
|
||
</blockquote>
|
||
</div>
|
||
<!-- /.card-body -->
|
||
</div>
|
||
<!-- /.card -->
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.grid-view -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</div>
|
||
<!-- /.wrapper -->
|
||
</section>
|
||
<!-- /section -->
|
||
<section class="wrapper !bg-[#ffffff]">
|
||
<div class="container py-[6rem] xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem]">
|
||
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-50px] items-center xl:!mt-[8rem] lg:!mt-[8rem] !mb-[6rem] xl:!mb-[8rem] lg:!mb-[8rem] md:!mb-[8rem]">
|
||
<div class="md:w-8/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mx-auto !mt-[50px]">
|
||
<div class="img-mask mask-3 xxl:!px-5"><img src="assets/img/avatars/avatar.jpg" alt="image"></div>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mt-[50px]">
|
||
<h2 class="!text-[calc(1.345rem_+_1.14vw)] font-semibold !leading-[1.2] xl:!text-[2.2rem] !mb-3">More about me</h2>
|
||
<p class="lead !text-[1.2rem] font-medium !leading-[1.65]">👋 Hello! I'm Camille, a multidisciplinary product designer 🧸 based in New York City 🚕. I’m very passionate about the work 💌 that I do.</p>
|
||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh ut fermentum massa justo sit amet risus.</p>
|
||
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur.</p>
|
||
<a href="#" class="btn btn-navy !text-white !bg-[#343f52] border-[#343f52] hover:text-white hover:bg-[#343f52] hover:!border-[#343f52] focus:shadow-[rgba(82,92,108,1)] active:text-white active:bg-[#343f52] active:border-[#343f52] disabled:text-white disabled:bg-[#343f52] disabled:border-[#343f52] btn-icon btn-icon-end !mt-2">Learn More <i class="uil uil-arrow-up-right !ml-[.3rem] before:content-['\e950']"></i></a>
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-50px]">
|
||
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] md:!px-[20px] !px-[15px] max-w-full !mx-auto !mt-[50px]">
|
||
<h2 class="!text-[calc(1.345rem_+_1.14vw)] font-semibold !leading-[1.2] xl:!text-[2.2rem] !mb-3">My experiences</h2>
|
||
<p class="lead !text-[1.2rem] !font-regular !leading-[1.6] xxl:!pr-8">I've had the pleasure to work with companies 🏢 across a variety of industries 🏛️ I'm always interested in new ✨ and exciting adventures 🧨</p>
|
||
<a href="#" class="btn btn-navy !text-white !bg-[#343f52] border-[#343f52] hover:text-white hover:bg-[#343f52] hover:!border-[#343f52] focus:shadow-[rgba(82,92,108,1)] active:text-white active:bg-[#343f52] active:border-[#343f52] disabled:text-white disabled:bg-[#343f52] disabled:border-[#343f52] btn-icon btn-icon-end !mt-2">Download Resume <i class="uil uil-arrow-up-right !ml-[.3rem] before:content-['\e950']"></i></a>
|
||
</div>
|
||
<!--/column -->
|
||
<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 !mt-[50px]">
|
||
<ul class="timeline xl:table lg:table md:table !w-full !m-0 !p-0 !list-none">
|
||
<li class="relative !pl-8 xl:table-row xl:p-0 lg:table-row lg:p-0 md:table-row md:p-0">
|
||
<div class="timeline-info meta uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !text-[0.7rem] whitespace-nowrap !mb-2 xl:text-right xl:table-cell xl:align-top xl:!pr-6 lg:text-right lg:table-cell lg:align-top lg:!pr-6 md:text-right md:table-cell md:align-top md:!pr-6">Nov 2017 - Present</div>
|
||
<div class="timeline-marker absolute w-[0.6rem] !text-[#343f52] left-0 inset-y-0 xl:relative xl:table-cell xl:align-top lg:relative lg:table-cell lg:align-top md:relative md:table-cell md:align-top before:w-[0.55rem] before:h-[0.55rem] before:content-[''] before:block before:absolute before:rounded-[100%] before:left-0 before:top-[0.2rem] before:bg-[#343f52] after:w-px after:content-[''] after:block after:absolute after:left-1 after:top-4 after:bottom-0 after:bg-[rgba(164,174,198,.2)]"></div>
|
||
<div class="table-cell align-top pb-8 xl:!pl-6 lg:!pl-6 md:!pl-6">
|
||
<h3 class="timeline-title xl:!mt-[-0.25rem] lg:!mt-[-0.25rem] md:!mt-[-0.25rem]">Creative Director at Malory House</h3>
|
||
<p class="!m-0">Nullam vel sem. Nullam vel sem. Integer ante arcu, accumsan a consectetuer eget, posuere ut, mauris. Donec orci lectus, aliquam ut, faucibus non euismod id nulla.</p>
|
||
</div>
|
||
</li>
|
||
<li class="relative !pl-8 xl:table-row xl:p-0 lg:table-row lg:p-0 md:table-row md:p-0">
|
||
<div class="timeline-info meta uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !text-[0.7rem] whitespace-nowrap !mb-2 xl:text-right xl:table-cell xl:align-top xl:!pr-6 lg:text-right lg:table-cell lg:align-top lg:!pr-6 md:text-right md:table-cell md:align-top md:!pr-6">Sep 2015 - Apr 2017</div>
|
||
<div class="timeline-marker absolute w-[0.6rem] !text-[#343f52] left-0 inset-y-0 xl:relative xl:table-cell xl:align-top lg:relative lg:table-cell lg:align-top md:relative md:table-cell md:align-top before:w-[0.55rem] before:h-[0.55rem] before:content-[''] before:block before:absolute before:rounded-[100%] before:left-0 before:top-[0.2rem] before:bg-[#343f52] after:w-px after:content-[''] after:block after:absolute after:left-1 after:top-4 after:bottom-0 after:bg-[rgba(164,174,198,.2)]"></div>
|
||
<div class="table-cell align-top pb-8 xl:!pl-6 lg:!pl-6 md:!pl-6">
|
||
<h3 class="timeline-title xl:!mt-[-0.25rem] lg:!mt-[-0.25rem] md:!mt-[-0.25rem]">Senior Developer at Longwave Studio</h3>
|
||
<p class="!m-0">Donec vitae sapien ut libero venenatis faucibus. ullam dictum felis eu pede mollis pretium. Pellentesque ut neque.</p>
|
||
</div>
|
||
</li>
|
||
<li class="relative !pl-8 xl:table-row xl:p-0 lg:table-row lg:p-0 md:table-row md:p-0">
|
||
<div class="timeline-info meta uppercase !tracking-[0.02rem] font-bold !text-[#aab0bc] !text-[0.7rem] whitespace-nowrap !mb-2 xl:text-right xl:table-cell xl:align-top xl:!pr-6 lg:text-right lg:table-cell lg:align-top lg:!pr-6 md:text-right md:table-cell md:align-top md:!pr-6">May 2011 - Sep 2015</div>
|
||
<div class="timeline-marker absolute w-[0.6rem] !text-[#343f52] left-0 inset-y-0 xl:relative xl:table-cell xl:align-top lg:relative lg:table-cell lg:align-top md:relative md:table-cell md:align-top before:w-[0.55rem] before:h-[0.55rem] before:content-[''] before:block before:absolute before:rounded-[100%] before:left-0 before:top-[0.2rem] before:bg-[#343f52]"></div>
|
||
<div class="table-cell align-top xl:!pl-6 lg:!pl-6 md:!pl-6 !pb-0">
|
||
<h3 class="timeline-title xl:!mt-[-0.25rem] lg:!mt-[-0.25rem] md:!mt-[-0.25rem]">Junior Developer at Webpaint Media</h3>
|
||
<p class="!m-0">Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</section>
|
||
<!-- /section -->
|
||
<section class="section-frame xl:mx-6 xl:rounded-[1rem] lg:mx-6 lg:rounded-[1rem] md:mx-6 md:rounded-[1rem] xxl:!mx-12 overflow-hidden">
|
||
<div class="wrapper image-wrapper bg-image bg-cover bg-overlay bg-overlay-light-500 bg-[center_center] bg-no-repeat bg-scroll relative z-0 before:content-[''] before:block before:absolute before:z-[1] before:w-full before:h-full before:left-0 before:top-0 before:bg-[rgba(255,255,255,.5)]" data-image-src="assets/img/photos/bg23.png">
|
||
<div class="container py-24 xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem] !text-center">
|
||
<div class="!absolute shape yellow hidden xl:block lg:block w-5" style="top: 18%; left: 5%;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 219.5 219.5" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/svg/pie.svg" class="svg-inject icon-svg !w-full !h-full"><path class="svg-fill" d="M219.5 219.5H0c0-58.19 23.14-114.06 64.29-155.21A219.561 219.561 0 01219.5 0v219.5z"></path></svg></div>
|
||
<div class="!absolute shape leaf hidden xl:block lg:block !w-[2.5rem]" style="bottom: 30%; left: 2%;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 457.71 446.45" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/svg/scribble.svg" class="svg-inject icon-svg !w-full !h-full"><path class="svg-fill" d="M205.62 442.54c-.51-.41-.99-.84-1.46-1.31-10.4-10.39-3.61-27.12 11.63-52.5 11.72-19.51 28.48-43.74 46.22-69.39 17.53-25.34 35.66-51.54 49.01-73.47 14.73-24.19 18.57-35.01 19.51-39.48-3.86-.28-13.15.3-33.78 6.52-19.71 5.94-43.09 14.92-65.7 23.6-63.8 24.49-85.35 31.41-96.51 19.5-3.21-3.43-7.62-11.04-1.12-23.54 2.49-4.79 6.64-10.51 12.68-17.5 10.4-12.03 25.04-26.34 40.55-41.49 14.02-13.7 28.53-27.87 39.53-40.11 9.93-11.04 14.15-17.43 15.94-20.82-3.43-.75-10.24-1.51-23.25-.92-14.99.68-33.44 2.89-51.28 5.02-46.92 5.61-74.09 8.33-86.81-.99-4.78-3.5-7.67-8.42-8.41-14.24-1.97-15.58 12.45-33.15 29.14-53.5 5.31-6.47 13.31-16.22 17.36-22.68-4.51-.38-12.43-.4-25.97 1.1-16.54 1.82-35.62 5.22-50.95 7.96-12.62 2.25-22.6 4.03-28.48 4.49C6.6 39.3.58 34.17.04 27.28c-.54-6.88 4.6-12.9 11.48-13.44 4.66-.37 14.58-2.13 26.06-4.18C54.56 6.63 75.7 2.86 94 1.07c26.41-2.6 40.16-.54 47.48 7.13 7.01 7.34 6.45 17.66-1.68 30.66-4.72 7.55-11.63 15.98-18.95 24.9-6.18 7.53-12.57 15.31-17.24 22.19-3.35 4.92-4.95 8.13-5.71 10.07 3 .54 9.09 1.08 20.87.43 13.21-.73 29.07-2.63 45.86-4.64 59.99-7.17 94.33-10.22 102.49 10.62 7.4 18.93-16.51 43.51-62.99 88.92-12.69 12.4-24.68 24.11-34.04 34.28-3.17 3.45-5.68 6.34-7.67 8.75 15.88-4.42 41.18-14.13 59.67-21.22 62.4-23.96 101.69-37.87 121.09-29.14 5.38 2.42 9.26 6.47 11.23 11.72 7.48 19.95-16.15 57.31-71.83 137.82-15.49 22.39-30.12 43.55-41.18 61.25-7.13 11.4-11.3 19.11-13.75 24.25 8.97-3.3 25.58-11 55.73-28.8 32.68-19.29 70.61-44.04 101.09-63.94 24.62-16.07 44.07-28.76 54.65-34.68 6.03-3.37 13.64-1.22 17.01 4.81 3.37 6.03 1.22 13.64-4.81 17.01-9.83 5.5-29.92 18.61-53.18 33.79-33.46 21.84-75.1 49.01-110.05 69.21-49.35 28.51-70.85 35.44-82.46 26.07z"></path></svg></div>
|
||
<div class="!absolute shape fuchsia hidden xl:block lg:block w-6" style="top: 20%; right: 2%; transform: rotate(70deg);"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 411.42 329.24" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/svg/tri.svg" class="svg-inject icon-svg !w-full !h-full"><g data-name="Layer 2"><path class="svg-fill" d="M164.34 21.92L8.72 251.15c-22.54 33.2 1.24 78.09 41.37 78.09h311.24c40.13 0 63.91-44.89 41.37-78.09L247.08 21.92a50 50 0 00-82.74 0z" data-name="Layer 1"></path></g></svg></div>
|
||
<div class="!absolute shape grape hidden xl:block lg:block w-6" style="bottom: 28%; right: 5%;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/svg/circle.svg" class="svg-inject icon-svg !w-full !h-full"><g data-name="Layer 2"><path class="svg-fill" d="M250 0C111.93 0 0 111.93 0 250s111.93 250 250 250 250-111.93 250-250S388.07 0 250 0zm0 425a175 175 0 11175-175 175 175 0 01-175 175z" data-name="Layer 1"></path></g></svg></div>
|
||
<div class="flex flex-wrap mx-[-15px]">
|
||
<div class="lg:w-9/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
||
<h1 class="font-semibold !leading-[1.15] xl:!text-[3.5rem] !text-[calc(1.475rem_+_2.7vw)] lg:mx-[-2.5rem] xl:mx-0 !mb-5">Got a 👾 project in mind? Let's work together. ✌️</h1>
|
||
<p class="lead !text-[1.2rem] !leading-[1.6] md:!px-10 lg:!px-0 xl:!px-0 lg:mx-[-2.5rem] xl:mx-0 !mb-8">I bring rapid solutions to make the life of my clients easier. Have any questions? Reach out to me and I will get back to you shortly.</p>
|
||
<a href="#" class="btn btn-lg btn-navy !text-white !bg-[#343f52] border-[#343f52] hover:text-white hover:bg-[#343f52] hover:!border-[#343f52] focus:shadow-[rgba(82,92,108,1)] active:text-white active:bg-[#343f52] active:border-[#343f52] disabled:text-white disabled:bg-[#343f52] disabled:border-[#343f52] btn-icon btn-icon-end">Contact Me <i class="uil uil-arrow-up-right !ml-[.3rem] before:content-['\e950']"></i></a>
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</div>
|
||
<!-- /.wrapper -->
|
||
</section>
|
||
<!-- /section -->
|
||
</div>
|
||
<!-- /.content-wrapper -->
|
||
<footer>
|
||
<div class="container py-7">
|
||
<div class="xl:!flex lg:!flex md:!flex items-center justify-between">
|
||
<p class="!mb-2 xl:!mb-0 lg:!mb-0">© 2025 Trunçgil. All rights reserved.</p>
|
||
<nav class="nav social social-muted !mb-0 xl:!text-right lg:!text-right md:!text-right">
|
||
<a class="xl:m-[0_0_0_0.7rem] lg:m-[0_0_0_0.7rem] md:m-[0_0_0_0.7rem] max-md:m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-twitter before:content-['\ed59'] text-[1rem] !text-[#5daed5]"></i></a>
|
||
<a class="xl:m-[0_0_0_0.7rem] lg:m-[0_0_0_0.7rem] md:m-[0_0_0_0.7rem] max-md:m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-facebook-f before:content-['\eae2'] text-[1rem] !text-[#4470cf]"></i></a>
|
||
<a class="xl:m-[0_0_0_0.7rem] lg:m-[0_0_0_0.7rem] md:m-[0_0_0_0.7rem] max-md:m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-dribbble before:content-['\eaa2'] text-[1rem] !text-[#e94d88]"></i></a>
|
||
<a class="xl:m-[0_0_0_0.7rem] lg:m-[0_0_0_0.7rem] md:m-[0_0_0_0.7rem] max-md:m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-instagram before:content-['\eb9c'] text-[1rem] !text-[#d53581]"></i></a>
|
||
<a class="xl:m-[0_0_0_0.7rem] lg:m-[0_0_0_0.7rem] md:m-[0_0_0_0.7rem] max-md:m-[0_.7rem_0_0] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 hover:translate-y-[-0.15rem]" href="#"><i class="uil uil-youtube before:content-['\edb5'] text-[1rem] !text-[#c8312b]"></i></a>
|
||
</nav>
|
||
<!-- /.social -->
|
||
</div>
|
||
</div>
|
||
<!-- /.container -->
|
||
</footer>
|
||
<!-- progress wrapper -->
|
||
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#343f52] 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-[#343f52] 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/demo33 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 10:59:45 GMT -->
|
||
</html> |