Ümit Tunç
846 lines
78 KiB
HTML
846 lines
78 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
|
||
<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/demo16 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 10:57:54 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/pink.css">
|
||
<style>
|
||
@media (max-width: 991.98px){
|
||
.navbar-expand-lg .navbar-collapse .dropdown-toggle:after {
|
||
color: #ffffff !important;
|
||
}
|
||
}
|
||
.lineal-fill {
|
||
fill: #e3a6b6 !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="grow shrink-0">
|
||
<header class="relative wrapper bg-[rgba(246,247,249,1)] ">
|
||
<nav class="navbar navbar-expand-lg fancy navbar-light">
|
||
<div class="container">
|
||
<div class="navbar-collapse-wrapper bg-[rgba(255,255,255)] opacity-100 flex flex-row !flex-nowrap w-full justify-between 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-[#d16b86] after:!text-[#d16b86]" 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-[#d16b86] after:!text-[#d16b86]" href="#" data-bs-toggle="dropdown">Pages</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#d16b86] dropdown-toggle" href="#" data-bs-toggle="dropdown">Services</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='services.html'>Services I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='services2.html'>Services II</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#d16b86] dropdown-toggle" href="#" data-bs-toggle="dropdown">About</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='about.html'>About I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='about2.html'>About II</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#d16b86] dropdown-toggle" href="#" data-bs-toggle="dropdown">Shop</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='shop.html'>Shop I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='shop2.html'>Shop II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='shop-product.html'>Product Page</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='shop-cart.html'>Shopping Cart</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='shop-checkout.html'>Checkout</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#d16b86] dropdown-toggle" href="#" data-bs-toggle="dropdown">Contact</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='contact.html'>Contact I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='contact2.html'>Contact II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='contact3.html'>Contact III</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#d16b86] dropdown-toggle" href="#" data-bs-toggle="dropdown">Career</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='career.html'>Job Listing I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='career2.html'>Job Listing II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='career-job.html'>Job Description</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#d16b86] dropdown-toggle" href="#" data-bs-toggle="dropdown">Utility</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='404.html'>404 Not Found</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='page-loader.html'>Page Loader</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='signin.html'>Sign In I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='signin2.html'>Sign In II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='signup.html'>Sign Up I</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='signup2.html'>Sign Up II</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='terms.html'>Terms</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='pricing.html'>Pricing</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' 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-[#d16b86] after:!text-[#d16b86]" href="#" data-bs-toggle="dropdown">Projects</a>
|
||
<div class="dropdown-menu dropdown-lg">
|
||
<div class="dropdown-lg-content">
|
||
<div>
|
||
<h6 class="dropdown-header !text-[#d16b86]">Project Pages</h6>
|
||
<ul class="pl-0 list-none">
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='projects.html'>Projects I</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='projects2.html'>Projects II</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='projects3.html'>Projects III</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='projects4.html'>Projects IV</a></li>
|
||
</ul>
|
||
</div>
|
||
<!-- /.column -->
|
||
<div>
|
||
<h6 class="dropdown-header !text-[#d16b86]">Single Projects</h6>
|
||
<ul class="pl-0 list-none">
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='single-project.html'>Single Project I</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='single-project2.html'>Single Project II</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='single-project3.html'>Single Project III</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' 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-[#d16b86] after:!text-[#d16b86]" href="#" data-bs-toggle="dropdown">Blog</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='blog.html'>Blog without Sidebar</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='blog2.html'>Blog with Sidebar</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='blog3.html'>Blog with Left Sidebar</a></li>
|
||
<li class="dropdown dropdown-submenu dropend"><a class="dropdown-item hover:!text-[#d16b86] dropdown-toggle" href="#" data-bs-toggle="dropdown">Blog Posts</a>
|
||
<ul class="dropdown-menu">
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='blog-post.html'>Post without Sidebar</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' href='blog-post2.html'>Post with Sidebar</a></li>
|
||
<li class="nav-item"><a class='dropdown-item hover:!text-[#d16b86]' 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-[#d16b86] after:!text-[#d16b86]" 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-[#d16b86] after:!text-[#d16b86]" 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-[#d16b86]">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-[#d16b86]' 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-[#d16b86]' 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-[#d16b86]' 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-[#d16b86]' 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-[#d16b86]' href='docs/credits.html'>Credits</a></li>
|
||
</ul>
|
||
<h6 class="dropdown-header !text-[#d16b86] 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-[#d16b86]' 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-[#d16b86]' 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-[#d16b86]' 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-[#d16b86]' 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-[#d16b86]' 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-[#d16b86]' 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-[#d16b86]' 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-[#d16b86]">Elements</h6>
|
||
<ul class="pl-0 list-none xl:columns-3 lg:columns-3 ">
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/accordion.html'>Accordion</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/alerts.html'>Alerts</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/animations.html'>Animations</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/avatars.html'>Avatars</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/background.html'>Background</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/badges.html'>Badges</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/buttons.html'>Buttons</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/card.html'>Card</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/carousel.html'>Carousel</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/dividers.html'>Dividers</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/form-elements.html'>Form Elements</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/image-hover.html'>Image Hover</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/image-mask.html'>Image Mask</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/lightbox.html'>Lightbox</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/player.html'>Media Player</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/modal.html'>Modal</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/pagination.html'>Pagination</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/progressbar.html'>Progressbar</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/shadows.html'>Shadows</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/shapes.html'>Shapes</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/tables.html'>Tables</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/tabs.html'>Tabs</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/text-animations.html'>Text Animations</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/text-highlight.html'>Text Highlight</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/tiles.html'>Tiles</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' href='docs/elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
|
||
<li><a class='dropdown-item hover:!text-[#d16b86]' 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">
|
||
<nav class="nav social social-muted justify-end text-right">
|
||
<a class="m-[0_0_0_.7rem] 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="m-[0_0_0_.7rem] 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="m-[0_0_0_.7rem] 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="m-[0_0_0_.7rem] 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>
|
||
</nav>
|
||
<!-- /.social -->
|
||
</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>
|
||
<!-- /.navbar-collapse-wrapper -->
|
||
</div>
|
||
<!-- /.container -->
|
||
</nav>
|
||
<!-- /.navbar -->
|
||
</header>
|
||
<!-- /header -->
|
||
<section class="wrapper bg-[rgba(246,247,249,1)] ">
|
||
<div class="container pt-14 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] pb-[4.5rem] xl:pb-24 lg:pb-24 md:pb-24">
|
||
<div class="flex flex-wrap mx-[-15px] !mt-[-50px] xl:!mt-0 lg:!mt-0 items-center">
|
||
<div class="md:w-8/12 lg:w-5/12 xl:w-5/12 w-full flex-[0_0_auto] !px-[15px] !mt-[50px] xl:!mt-0 lg:!mt-0 max-w-full flex !relative !mx-auto" data-cues="slideInDown" data-group="header">
|
||
<div class="img-mask mask-1"><img src="../assets/img/photos/about17.jpg" alt="image"></div>
|
||
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !absolute" style="bottom: 10%; right: 2%;">
|
||
<div class="card-body py-4 px-5">
|
||
<div class="flex flex-row items-center">
|
||
<div>
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.6 409.6" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/check.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem] !text-[#d16b86] text-pink !mx-auto !mr-3"><path class="lineal-stroke" d="M204.8 409.6C91.9 409.6 0 317.7 0 204.8c0-49.9 18.2-98.1 51.2-135.5 4.4-5 12-5.5 17-1.1s5.5 12 1.1 17c-29.1 33-45.2 75.5-45.2 119.5 0 99.6 81.1 180.7 180.7 180.7s180.7-81.1 180.7-180.7S304.4 24.1 204.8 24.1c-27.3-.1-54.2 6.1-78.7 18-6 2.9-13.2.4-16.1-5.6-2.9-6-.4-13.2 5.6-16.1C143.4 6.9 173.9-.1 204.8 0c112.9 0 204.8 91.9 204.8 204.8s-91.9 204.8-204.8 204.8z"></path><path class="lineal-fill" d="M349.4 204.8c0 79.8-64.7 144.6-144.6 144.6S60.2 284.6 60.2 204.8 125 60.2 204.8 60.2 349.4 125 349.4 204.8z"></path><path class="lineal-stroke" d="M204.8 361.4c-86.4 0-156.6-70.2-156.6-156.6S118.4 48.2 204.8 48.2s156.6 70.2 156.6 156.6-70.2 156.6-156.6 156.6zm0-289.1c-73.1 0-132.5 59.4-132.5 132.5s59.4 132.5 132.5 132.5 132.5-59.5 132.5-132.5S277.9 72.3 204.8 72.3z"></path><path class="lineal-stroke" d="M200.9 246.7c-8.8 0-17.2-3.5-23.5-9.7L145 204.5c-4.7-4.7-4.7-12.3 0-17s12.3-4.7 17 0l32.5 32.5c3.6 3.5 9.3 3.5 12.8 0l49.8-49.9c4.7-4.7 12.3-4.7 17 0s4.7 12.3 0 17L224.4 237c-6.2 6.2-14.7 9.7-23.5 9.7z"></path></svg>
|
||
</div>
|
||
<div>
|
||
<h3 class="counter !mb-0 whitespace-nowrap">250+</h3>
|
||
<p class="!text-[0.7rem] leading-normal !mb-0 whitespace-nowrap">Projects Done</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.card -->
|
||
</div>
|
||
<!--/column -->
|
||
<div class="lg:w-6/12 lg:!ml-[8.33333333%] xl:w-6/12 xl:!ml-[8.33333333%] xxl:w-5/12 flex-[0_0_auto] !px-[15px] !mt-[50px] xl:!mt-0 lg:!mt-0 max-w-full text-center lg:text-left xl:text-left" data-cues="slideInDown" data-group="page-title" data-delay="600">
|
||
<h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-5">I'm User Interface Designer & Developer.</h1>
|
||
<p class="lead text-[1.25rem] !leading-[1.5] !mb-7 md:!px-10 lg:!px-0">Hello! I'm Julia, a freelance user interface designer & developer based in London. I’m very passionate about the work that I do.</p>
|
||
<div class="flex justify-center lg:!justify-start xl:!justify-start" data-cues="slideInDown" data-group="page-title-buttons" data-delay="900">
|
||
<span><a href="#" class="btn btn-lg 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] !rounded-[50rem] !mr-2">See My Works</a></span>
|
||
<span><a href="#" class="btn btn-lg btn-outline-pink !rounded-[50rem] !text-[#d16b86] !border-[#d16b86] hover:!bg-[#d16b86] hover:!text-white">Contact Me</a></span>
|
||
</div>
|
||
</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-[4.5rem] xl:!py-[8rem] lg:!py-[8rem] md:!py-[8rem]">
|
||
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-30px] !mb-10">
|
||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[30px] max-w-full xl:!order-2 lg:!order-2">
|
||
<ul class="progress-list m-0 p-0 list-none">
|
||
<li class="!mb-[1rem]">
|
||
<p class="!mb-[.25rem]">Web Design</p>
|
||
<div class="progressbar line relative soft-violet" data-value="100"></div>
|
||
</li>
|
||
<li class="!mb-[1rem]">
|
||
<p class="!mb-[.25rem]">Mobile Design</p>
|
||
<div class="progressbar line relative soft-blue" data-value="80"></div>
|
||
</li>
|
||
<li class="!mb-[1rem]">
|
||
<p class="!mb-[.25rem]">Development</p>
|
||
<div class="progressbar line relative soft-leaf" data-value="85"></div>
|
||
</li>
|
||
<li class="!mb-[1rem]">
|
||
<p class="!mb-[.25rem]">SEO</p>
|
||
<div class="progressbar line relative soft-pink" data-value="90"></div>
|
||
</li>
|
||
</ul>
|
||
<!-- /.progress-list -->
|
||
</div>
|
||
<!--/column -->
|
||
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[30px] max-w-full">
|
||
<h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3">What I Do?</h2>
|
||
<p class="lead text-[1rem] !leading-[1.65] font-medium !mb-5">Duis mollis est commodo luctus nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl.</p>
|
||
</div>
|
||
<!--/column -->
|
||
</div>
|
||
<!--/.row -->
|
||
<div class="flex flex-wrap mx-[-15px] xl:mx-[-35px] lg:mx-[-20px] !mt-[-30px] !text-center">
|
||
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[30px] max-w-full">
|
||
<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-[#d16b86] text-violet m-[0_auto] !mb-3"><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>
|
||
<h4>Web Design</h4>
|
||
<p class="!mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Cras justo cum sociis natoque magnis.</p>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[30px] max-w-full">
|
||
<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-[#d16b86] text-blue m-[0_auto] !mb-3"><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>
|
||
<h4>Mobile Design</h4>
|
||
<p class="!mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Cras justo cum sociis natoque magnis.</p>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[30px] max-w-full">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 427.5" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/settings-3.svg" class="svg-inject icon-svg icon-svg-md !w-[2.6rem] !h-[2.6rem] !text-[#7cb798] text-leaf m-[0_auto] !mb-3"><path class="lineal-fill" d="M186.9 353.4h138.3V413H186.9z"></path><path class="lineal-stroke" d="M460.2 0H51.8C23.2 0 0 23.2 0 51.7v264.4c0 28.6 23.2 51.7 51.8 51.8h120.6v30.7h-28.8c-8 0-14.5 6.5-14.5 14.5s6.5 14.5 14.5 14.5h224.9c8 0 14.5-6.5 14.5-14.5s-6.5-14.5-14.5-14.5h-28.8v-41.9c.3-1.2.4-2.4.4-3.6-.2-8-6.9-14.3-14.8-14.1H51.8C39.2 339 29 328.8 29 316.2V51.7c0-12.6 10.2-22.8 22.8-22.8h408.5c12.6 0 22.8 10.2 22.8 22.8v264.4c0 12.6-10.2 22.8-22.8 22.8h-46.7c-8 .2-14.3 6.9-14.1 14.8.2 8 6.9 14.3 14.8 14.1h45.9c28.6 0 51.7-23.2 51.8-51.7V51.7C512 23.2 488.8 0 460.2 0zM310.7 367.9v30.7H201.3v-30.7h109.4z"></path><path class="lineal-fill" d="M220.1 271.6c-12.7-19.8-6.9-46.3 12.9-59s46.3-6.9 59 12.9c9 14 9 32 0 46.1h100.6v-50.3l-30.4-4.9c-4.9-16.3-13.6-31.3-25.3-43.7l11-28.7-47.3-27.3-19.4 23.8c-16.6-3.9-33.9-3.9-50.5 0l-19.4-23.8-47.2 27.3 11 28.7c-11.7 12.4-20.3 27.4-25.3 43.7l-30.3 4.9v50.3h100.6z"></path><path class="lineal-stroke" d="M392.5 286.1H291.9c-8 0-14.5-6.5-14.5-14.5 0-2.8.8-5.5 2.3-7.8 8.4-13.1 4.6-30.6-8.6-39-13.1-8.4-30.6-4.6-39 8.6-5.9 9.3-5.9 21.1 0 30.4 4.3 6.7 2.4 15.7-4.3 20-2.3 1.5-5.1 2.3-7.8 2.3H119.4c-8 0-14.5-6.5-14.4-14.5v-50.3c0-7.1 5.2-13.1 12.2-14.3l21.8-3.5c4.7-12.2 11.3-23.6 19.5-33.7l-7.9-20.6c-2.5-6.6.1-14.1 6.3-17.7l47.3-27.3c6.2-3.5 14-2.1 18.5 3.4l13.9 17.1c12.9-2 26.1-2 39 0l13.9-17.1c4.5-5.5 12.3-7 18.5-3.4l47.3 27.3c6.2 3.6 8.8 11.1 6.3 17.7l-7.9 20.6c8.2 10.2 14.7 21.5 19.4 33.7l21.8 3.5c7 1.1 12.2 7.2 12.2 14.3v50.3c-.1 8-6.6 14.5-14.6 14.5zm-80-29h65.6v-23.5l-18.2-2.9c-5.5-.9-10-4.8-11.6-10.1-4.3-14.2-11.9-27.2-22-38-3.8-4-5-9.9-3-15.1l6.6-17.2-25.9-15-11.6 14.3c-3.5 4.3-9.1 6.2-14.5 5-14.5-3.3-29.5-3.3-43.9 0-5.4 1.2-11-.7-14.5-5l-11.6-14.3-25.9 15 6.6 17.2c2 5.2.8 11-3 15.1-10.1 10.8-17.7 23.8-22 38-1.6 5.3-6.1 9.2-11.6 10.1l-18.2 2.9v23.5h65.6c-.4-2.8-.6-5.7-.6-8.6.4-31.6 26.3-56.8 57.9-56.4 31 .4 56 25.4 56.4 56.4 0 2.9-.2 5.8-.6 8.6z"></path></svg>
|
||
<h4>Development</h4>
|
||
<p class="!mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Cras justo cum sociis natoque magnis.</p>
|
||
</div>
|
||
<!--/column -->
|
||
<div class="md:w-6/12 lg:w-3/12 xl:w-3/12 w-full flex-[0_0_auto] !px-[15px] xl:!px-[35px] lg:!px-[20px] !mt-[30px] max-w-full">
|
||
<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-[#d16b86] text-pink m-[0_auto] !mb-3"><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>
|
||
<h4>SEO</h4>
|
||
<p class="!mb-2">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Cras justo cum sociis natoque magnis.</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-[4.5rem] xl:pt-32 lg:pt-32 md:pt-32 xl:pb-24 lg:pb-24 md:pb-24">
|
||
<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.65] 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-outline-pink !rounded-[50rem] !mb-0 !text-[#d16b86] !border-[#d16b86] hover:!bg-[#d16b86] hover:!text-white">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-[#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="more hover !text-[#3f78e0] hover:!text-[#3f78e0]">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 -->
|
||
</section>
|
||
<!-- /section -->
|
||
</div>
|
||
<!-- /.content-wrapper -->
|
||
<footer>
|
||
<div class="container pt-[4.5rem] xl:pt-[8rem] lg:pt-[8rem] md:pt-[8rem] pb-7">
|
||
<div class="card !bg-[#fbf1f4] !mb-8">
|
||
<div class="card-body p-14">
|
||
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-50px]">
|
||
<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]">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 395.7" data-inject-url="https://Trunçgil-tailwind-template.netlify.app/assets/img/icons/lineal/email.svg" class="svg-inject icon-svg !w-[2.2rem] !h-[2.2rem] !mb-4"><path class="lineal-stroke" d="M483.6 395.7H53.3C23.9 395.7 0 371.9 0 342.4V53.3C0 23.9 23.9 0 53.3 0h405.4C488.1 0 512 23.9 512 53.3v222.8c0 7.9-6.4 14.2-14.2 14.2s-14.2-6.4-14.2-14.2V53.3c0-13.7-11.1-24.8-24.8-24.8H53.3c-13.7 0-24.8 11.1-24.8 24.8v289.2c0 13.7 11.1 24.8 24.8 24.8h430.3c7.9.2 14.1 6.7 13.8 14.6-.2 7.5-6.3 13.6-13.8 13.8z"></path><path class="lineal-fill" d="M497.8 53.3L256 236.4 14.2 53.3c0-21.6 17.5-39.1 39.1-39.1h405.4c21.6 0 39.1 17.5 39.1 39.1z"></path><path class="lineal-stroke" d="M256 250.6c-3.1 0-6.1-1-8.6-2.9L5.6 64.6C2.1 61.9 0 57.7 0 53.3 0 23.9 23.9 0 53.3 0h405.4C488.1 0 512 23.9 512 53.3c0 4.4-2.1 8.6-5.6 11.3L264.6 247.7c-2.5 1.9-5.5 2.9-8.6 2.9zM29.3 46.8L256 218.6 482.7 46.8c-2.9-10.9-12.8-18.4-24-18.4H53.3c-11.3.1-21.1 7.6-24 18.4zm454.2 348.7c-3.1 0-6.1-1-8.6-2.9l-99.6-75.4c-6.3-4.7-7.5-13.7-2.7-19.9 4.7-6.3 13.7-7.5 19.9-2.7l99.6 75.4c6.3 4.7 7.5 13.7 2.8 19.9-2.7 3.6-6.9 5.7-11.4 5.6zm-449-4.6c-7.9 0-14.2-6.4-14.2-14.2 0-4.5 2.1-8.7 5.6-11.4l93.5-70.8c6.3-4.7 15.2-3.5 19.9 2.7 4.7 6.3 3.5 15.2-2.7 19.9L43.1 388c-2.5 1.9-5.5 2.9-8.6 2.9z"></path></svg>
|
||
<h2 class="!text-[calc(1.305rem_+_0.66vw)] font-bold xl:!text-[1.8rem] !leading-[1.3] !mb-3 xl:!pr-10 lg:!pr-10">If you like what you see, let's work together.</h2>
|
||
<p class="lead text-[0.9rem] font-medium !leading-[1.65] xl:!pr-14 lg:!pr-14 !mb-0">I bring rapid solutions to make the life of my clients easier. Have any questions? Reach out to me from this contact form and I will get back to you shortly.</p>
|
||
</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]">
|
||
<form class="contact-form needs-validation" method="post" action="https://Trunçgil-tailwind-template.netlify.app/assets/php/contact.php" novalidate>
|
||
<div class="messages"></div>
|
||
<div class="flex flex-wrap mx-[-10px]">
|
||
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[10px] max-w-full">
|
||
<div class="form-floating relative !mb-4">
|
||
<input id="frm_name" type="text" name="name" class="form-control border-0 relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" required="required" data-error="First Name is required.">
|
||
<label for="frm_name" class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope">Name *</label>
|
||
<div class="invalid-feedback"> Please enter your name. </div>
|
||
</div>
|
||
</div>
|
||
<!-- /column -->
|
||
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] px-[10px] max-w-full">
|
||
<div class="form-floating relative !mb-4">
|
||
<input id="frm_email" type="email" name="email" class="form-control border-0 relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" required="required" data-error="Valid email is required.">
|
||
<label for="frm_email" class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope">Email *</label>
|
||
<div class="valid-feedback"> Looks good! </div>
|
||
<div class="invalid-feedback"> Please provide a valid email address. </div>
|
||
</div>
|
||
</div>
|
||
<!-- /column -->
|
||
<div class="w-full flex-[0_0_auto] px-[10px] max-w-full">
|
||
<div class="form-floating relative !mb-4">
|
||
<textarea id="frm_message" name="message" class="form-control border-0 relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" style="height: 150px" required></textarea>
|
||
<label for="frm_message" class="inline-block !text-[#959ca9] text-[.75rem] absolute z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope">Message *</label>
|
||
<div class="valid-feedback"> Looks good! </div>
|
||
<div class="invalid-feedback"> Please enter your messsage. </div>
|
||
</div>
|
||
</div>
|
||
<!-- /column -->
|
||
<div class="w-full flex-[0_0_auto] px-[10px] max-w-full">
|
||
<input type="submit" class="btn btn-outline-pink !rounded-[50rem] btn-send !mb-3 !text-[#d16b86] !border-[#d16b86] hover:!bg-[#d16b86] hover:!text-white" value="Send message">
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</form>
|
||
<!-- /form -->
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!--/.card-body -->
|
||
</div>
|
||
<!--/.card -->
|
||
<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="m-[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="m-[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="m-[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="m-[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="m-[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-[#d16b86] 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-[#d16b86] 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/demo16 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 10:57:58 GMT -->
|
||
</html> |