Ümit Tunç
814 lines
69 KiB
HTML
814 lines
69 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
|
|
<!-- Mirrored from Trunçgil-tailwind-template.netlify.app/demo24 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 10:58:40 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/yellow.css">
|
|
<link rel="preload" href="../assets/css/fonts/urbanist.css" as="style" onload="this.rel='stylesheet'">
|
|
<style>
|
|
@media (min-width: 992px) {
|
|
.navbar-nav>.nav-item>.nav-link {
|
|
position: relative;
|
|
}
|
|
|
|
.navbar-nav>.nav-item+.nav-item>.nav-link:before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
width: 3px;
|
|
height: 3px;
|
|
top: 50%;
|
|
left: -2px;
|
|
background: rgba(0, 0, 0, 0.25);
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.filter:not(.basic-filter) ul li a.active,
|
|
.filter:not(.basic-filter) ul li a:hover,
|
|
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
|
|
color: #fab758 !important;
|
|
}
|
|
.navbar-stick:not(.navbar-dark) {
|
|
box-shadow: 0 0 1.25rem rgba(30,34,40,.06) !important;
|
|
background: rgba(255,255,255,.97) !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="onepage">
|
|
<div class="grow shrink-0">
|
|
<header class="relative wrapper bg-[rgba(246,247,249,1)] ">
|
|
<nav class="navbar navbar-expand-lg extended extended-alt navbar-light !bg-[#ffffff]">
|
|
<div class="container xl:!flex-col lg:!flex-col">
|
|
<div class="topbar flex flex-row lg:!justify-center xl:!justify-center items-center">
|
|
<div class="navbar-brand"><a href='index.html'><img src="../assets/img/truncgil-yatay.svg" alt="image"></a></div>
|
|
</div>
|
|
<!-- /.flex -->
|
|
<div class="navbar-collapse-wrapper bg-[rgba(255,255,255)] opacity-100 flex flex-row items-center justify-between">
|
|
<div class="navbar-other w-full hidden lg:block xl:block">
|
|
<nav class="nav social social-muted">
|
|
<a class="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_.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_.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>
|
|
</nav>
|
|
<!-- /.social -->
|
|
</div>
|
|
<!-- /.navbar-other -->
|
|
<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 flex flex-col !h-full">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item"><a class="nav-link scroll hover:!text-[#fab758] active" href="#home">Home</a></li>
|
|
<li class="nav-item"><a class="nav-link scroll hover:!text-[#fab758]" href="#services">Services</a></li>
|
|
<li class="nav-item"><a class="nav-link scroll hover:!text-[#fab758]" href="#portfolio">Portfolio</a></li>
|
|
<li class="nav-item"><a class="nav-link scroll hover:!text-[#fab758]" href="#testimonials">Testimonials</a></li>
|
|
<li class="nav-item"><a class="nav-link scroll hover:!text-[#fab758]" href="#about">About</a></li>
|
|
<li class="nav-item"><a class="nav-link scroll hover:!text-[#fab758]" href="#pricing">Pricing</a></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>
|
|
</div>
|
|
<!-- /.navbar-collapse -->
|
|
<div class="navbar-other w-full flex">
|
|
<ul class="navbar-nav !flex-row !items-center !ml-auto">
|
|
<li class="nav-item"><a class="nav-link hover:!text-[#fab758] focus:!text-[#fab758]" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-info"><i class="uil uil-info-circle before:content-['\eb99'] !text-[1.1rem]"></i></a></li>
|
|
<li class="nav-item"><a class="nav-link hover:!text-[#fab758] focus:!text-[#fab758]" data-bs-toggle="offcanvas" data-bs-target="#offcanvas-search"><i class="uil uil-search before:content-['\eca5'] !text-[1.1rem]"></i></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>
|
|
<!-- /.navbar-collapse-wrapper -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</nav>
|
|
<!-- /.navbar -->
|
|
<!--/.modal -->
|
|
<div class="offcanvas offcanvas-end text-inverse !text-[#cacaca] opacity-100" id="offcanvas-info" data-bs-scroll="true">
|
|
<div class="offcanvas-header flex flex-row items-center justify-between p-[1.5rem]">
|
|
<h3 class="!text-white xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)] !leading-[1.4] !mb-0">Trunçgil</h3>
|
|
<button type="button" class="btn-close btn-close-white !mr-[-0.5rem] m-0 p-0" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<div class="offcanvas-body !pb-[1.5rem]">
|
|
<div class="widget !mb-8">
|
|
<p>Trunçgil is a multipurpose HTML5 template with various layouts which will be a great solution for your business.</p>
|
|
</div>
|
|
<!-- /.widget -->
|
|
<div class="widget !mb-8">
|
|
<h4 class="widget-title !text-white !mb-[0.75rem] !text-[1rem] !tracking-[normal] font-semibold !leading-[1.45]">Contact Info</h4>
|
|
<address class=" not-italic !leading-[inherit] !mb-[1rem]"> Moonshine St. 14/05 <br> Light City, London </address>
|
|
<a class="!text-[#cacaca] hover:!text-[#fab758]" href="mailto:first.last@email.com">info@truncgil.com</a><br> 00 (123) 456 78 90
|
|
</div>
|
|
<!-- /.widget -->
|
|
<div class="widget !mb-8">
|
|
<h4 class="widget-title !text-white !mb-[0.75rem] !text-[1rem] !tracking-[normal] font-semibold !leading-[1.45]">Learn More</h4>
|
|
<ul class="list-unstyled !pl-0">
|
|
<li><a class="!text-[#cacaca] hover:!text-[#fab758]" href="#">Our Story</a></li>
|
|
<li class="!mt-[.35rem]"><a class="!text-[#cacaca] hover:!text-[#fab758]" href="#">Terms of Use</a></li>
|
|
<li class="!mt-[.35rem]"><a class="!text-[#cacaca] hover:!text-[#fab758]" href="#">Privacy Policy</a></li>
|
|
<li class="!mt-[.35rem]"><a class="!text-[#cacaca] hover:!text-[#fab758]" href="#">Contact Us</a></li>
|
|
</ul>
|
|
</div>
|
|
<!-- /.widget -->
|
|
<div class="widget">
|
|
<h4 class="widget-title !text-white !mb-[0.75rem] !text-[1rem] !tracking-[normal] font-semibold !leading-[1.45]">Follow Us</h4>
|
|
<nav class="nav social social-white">
|
|
<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>
|
|
<!-- /.widget -->
|
|
</div>
|
|
<!-- /.offcanvas-body -->
|
|
</div>
|
|
<!-- /.offcanvas -->
|
|
<div class="offcanvas offcanvas-top !bg-[#ffffff] " id="offcanvas-search" data-bs-scroll="true">
|
|
<div class="container flex flex-row py-6">
|
|
<form class=" search-form relative before:content-['\eca5'] before:block before:absolute before:-translate-y-2/4 before:text-[1rem] before:!text-[#343f52] before:z-[1] before:right-auto before:top-2/4 before:font-Unicons w-full before:left-0 focus:!outline-offset-0 ">
|
|
<input id="search-form1" type="text" class="form-control text-[0.8rem] !shadow-none !pl-[1.75rem] !pr-[.75rem] border-0 bg-inherit m-0 block w-full font-medium !leading-[1.7] !text-[#60697b] px-4 py-[0.6rem] rounded-[0.4rem] focus:!outline-offset-0 " placeholder="Type keyword and hit enter">
|
|
</form>
|
|
<button type="button" class="btn-close leading-none !text-[#343f52] transition-all duration-[0.2s] ease-in-out p-0 border-0 motion-reduce:transition-none before:text-[1.05rem] before:content-['\ed3b'] before:w-[1.8rem] before:h-[1.8rem] before:leading-[1.8rem] before:shadow-none before:transition-[background] before:duration-[0.2s] before:ease-in-out before:!flex before:justify-center before:items-center before:m-0 before:p-0 before:rounded-[100%] hover:no-underline bg-inherit before:bg-[rgba(0,0,0,.08)] before:font-Unicons hover:before:bg-[rgba(0,0,0,.11)] " data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!-- /.offcanvas -->
|
|
</header>
|
|
<!-- /header -->
|
|
<section id="home">
|
|
<div class="wrapper bg-[rgba(246,247,249,1)] overflow-hidden">
|
|
<div class="container-fluid xl:!px-0 pt-6 pb-10">
|
|
<div class="swiper-container swiper-auto relative z-10" data-margin="30" data-dots="true" data-nav="true" data-centered="true" data-loop="true" data-iteml-auto="true">
|
|
<div class="swiper overflow-visible">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide group">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/cf1.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/cf1.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide group">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/cf2.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/cf2.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide group">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/cf3.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/cf3.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide group">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/cf4.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/cf4.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide group">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/cf5.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/cf5.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide group">
|
|
<figure class="rounded-[0.4rem]"><img class="rounded-[0.4rem]" src="../assets/img/photos/cf6.jpg" alt="image"><a class="item-link absolute w-[2.2rem] h-[2.2rem] !leading-[2.2rem] z-[1] transition-all duration-[0.3s] ease-in-out opacity-0 !text-[#343f52] shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.02)] text-[1rem] flex items-center justify-center rounded-[100%] right-0 bottom-4 bg-[rgba(255,255,255,.7)] hover:bg-[rgba(255,255,255,.9)] hover:!text-[#343f52] group-hover:opacity-100 group-hover:right-[1rem]" href="../assets/img/photos/cf6.jpg" data-glightbox data-gallery="gallery-group"><i class="uil uil-focus-add before:content-['\eb22']"></i></a></figure>
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!-- /.cotnainer -->
|
|
</div>
|
|
<!-- /.overflow-hidden -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="services">
|
|
<div class="wrapper bg-[rgba(246,247,249,1)] ">
|
|
<div class="container py-[5rem] xl:!py-[7rem] lg:!py-[7rem] md:!py-[7rem]">
|
|
<div class="flex flex-wrap mx-[-15px] xl:mx-0 lg:mx-0 !mt-[-50px] items-center">
|
|
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:px-0 lg:px-0 !mt-[50px]">
|
|
<div class="flex flex-wrap mx-[-15px] !mt-[-30px] !text-center">
|
|
<div class="xl:w-6/12 lg:w-6/12 md:w-6/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)] !mb-6">
|
|
<figure class="card-img-top overlay overlay-1 group">
|
|
<a href="#"><img class="max-w-full h-auto" src="../assets/img/photos/fs4.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">View Gallery</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="card-body p-4">
|
|
<h3 class="h4 !mb-0">Products</h3>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
|
<figure class="card-img-top overlay overlay-1 group">
|
|
<a href="#"><img class="max-w-full h-auto" src="../assets/img/photos/fs6.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">View Gallery</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="card-body p-4">
|
|
<h3 class="h4 !mb-0">Recipes</h3>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="xl:w-6/12 lg:w-6/12 md:w-6/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)] xl:!mt-6 lg:!mt-6 md:!mt-6 !mb-6">
|
|
<figure class="card-img-top overlay overlay-1 group">
|
|
<a href="#"><img class="max-w-full h-auto" src="../assets/img/photos/fs5.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">View Gallery</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="card-body p-4">
|
|
<h3 class="h4 !mb-0">Restaurants</h3>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
|
|
<figure class="card-img-top overlay overlay-1 group">
|
|
<a href="#"><img class="max-w-full h-auto" src="../assets/img/photos/fs7.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">View Gallery</h5>
|
|
</figcaption>
|
|
</figure>
|
|
<div class="card-body p-4">
|
|
<h3 class="h4 !mb-0">Still Life</h3>
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="xl:w-5/12 lg:w-5/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[8.33333333%] lg:!ml-[8.33333333%] xl:px-0 lg:px-0 !mt-[50px]">
|
|
<h2 class="xl:!text-[1.7rem] !text-[calc(1.295rem_+_0.54vw)] !leading-[1.25] !font-semibold !mb-3">My Services</h2>
|
|
<p class="lead !text-[1.1rem] !leading-[1.55] font-medium">I would like to give you a unique photography experience, capture your products with excellent composition and lighting skills.</p>
|
|
<p>Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis elit interdum. Duis mollis, est non commodo luctus, nisi erat ligula mollis metus auctor fringilla.</p>
|
|
<a href="#" class="btn btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758] active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] !rounded-[50rem] !mt-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">More Details</a>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!-- /.wrapper -->
|
|
</section>
|
|
<!-- /section -->
|
|
<div class="wrapper image-wrapper bg-image bg-overlay !text-white !bg-fixed bg-no-repeat bg-[center_center] bg-cover 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(30,34,40,.5)]" data-image-src="./assets/img/photos/bg34.jpg">
|
|
<div class="container py-[6rem] xl:!py-[9rem] lg:!py-[9rem] md:!py-[9rem] !text-center">
|
|
<h2 class="xl:!text-[2.5rem] !text-[calc(1.375rem_+_1.5vw)] !leading-[1.15] font-semibold !text-white !mb-0">I take photographs with <br class="hidden xl:block lg:block md:block"> creativity, concept & passion</h2>
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!-- /.wrapper -->
|
|
<section id="portfolio">
|
|
<div class="wrapper bg-[rgba(246,247,249,1)] ">
|
|
<div class="container py-20 xl:!py-[7rem] lg:!py-[7rem] md:!py-[7rem] !text-center">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="lg:w-10/12 xl:w-8/12 xxl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !mb-8">
|
|
<h2 class="xl:!text-[1.7rem] !text-[calc(1.295rem_+_0.54vw)] !leading-[1.25] !font-semibold !mb-3">My Selected Shots</h2>
|
|
<p class="lead !text-[1.1rem] !leading-[1.55] font-medium">Photography is my passion and I love to turn ideas into beautiful things.</p>
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="itemgrid grid-view projects-masonry">
|
|
<div class="isotope-filter !relative z-[5] filter !mb-10">
|
|
<ul class=" inline m-0 p-0 list-none">
|
|
<li class="inline"><a class="filter-item uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] cursor-pointer hover:!text-[#fab758] active" data-filter="*">All</a></li>
|
|
<li class="inline before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:ml-2 before:mr-[0.8rem] before:my-0 before:rounded-[100%] before:bg-[rgba(30,34,40,.2)] before:align-[.15rem]"><a class="filter-item uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] cursor-pointer hover:!text-[#fab758]" data-filter=".foods">Foods</a></li>
|
|
<li class="inline before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:ml-2 before:mr-[0.8rem] before:my-0 before:rounded-[100%] before:bg-[rgba(30,34,40,.2)] before:align-[.15rem]"><a class="filter-item uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] cursor-pointer hover:!text-[#fab758]" data-filter=".drinks">Drinks</a></li>
|
|
<li class="inline before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:ml-2 before:mr-[0.8rem] before:my-0 before:rounded-[100%] before:bg-[rgba(30,34,40,.2)] before:align-[.15rem]"><a class="filter-item uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] cursor-pointer hover:!text-[#fab758]" data-filter=".events">Events</a></li>
|
|
<li class="inline before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:ml-2 before:mr-[0.8rem] before:my-0 before:rounded-[100%] before:bg-[rgba(30,34,40,.2)] before:align-[.15rem]"><a class="filter-item uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] cursor-pointer hover:!text-[#fab758]" data-filter=".pastries">Pastries</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-15px] !mt-[-30px] isotope">
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full drinks events">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf1-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf1.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Fringilla Nullam</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full events">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf2-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf2.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Ridiculus Parturient</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full drinks foods">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf3-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf3.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Ornare Ipsum</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full events">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf4-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf4.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Nullam Mollis</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full pastries events">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf5-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf5.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Euismod Risus</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full foods">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf6-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf6.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Ridiculus Tristique</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full foods drinks">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf7-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf7.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Sollicitudin Pharetra</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full pastries">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf8-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf8.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Tristique Venenatis</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full events">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf9-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf9.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Cursus Fusce</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full foods">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf10-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf10.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Consectetur Malesuada</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full drinks">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf11-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf11.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Ultricies Aenean</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full foods">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf12-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf12.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Pellentesque Commodo</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] !mt-[30px] max-w-full drinks">
|
|
<figure class="overlay overlay-1 rounded group relative"><a class="relative block z-[3] cursor-pointer inset-0" href="../assets/img/photos/pf13-full.jpg" data-glightbox data-gallery="shots-group"> <img src="../assets/img/photos/pf13.jpg" alt="image"></a>
|
|
<figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
|
|
<h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] px-4 py-3 left-0 top-2/4 group-hover:-translate-y-2/4">Ultricies Aenean</h5>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
<!-- /.project -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.grid -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!-- /.wrapper -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="testimonials">
|
|
<div class="wrapper image-wrapper bg-image bg-overlay bg-fixed bg-no-repeat bg-[center_center] bg-cover 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(30,34,40,.5)]" data-image-src="./assets/img/photos/bg35.jpg">
|
|
<div class="container py-[5rem] xl:!py-[7rem] lg:!py-[7rem] md:!py-[7rem]">
|
|
<h2 class="xl:!text-[1.7rem] !text-[calc(1.295rem_+_0.54vw)] !leading-[1.25] !font-semibold !mb-4 !text-center !text-white">Happy Customers</h2>
|
|
<div class="swiper-container dots-closer dots-light dots-light-75" data-margin="0" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
|
|
<div class="swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<div class="card border-0 !bg-[rgba(255,255,255,.9)]">
|
|
<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="border-0 !mb-0 !text-[.9rem] !leading-[1.7] font-medium m-[0_0_1rem]">
|
|
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
|
|
<div class="flex items-center text-left">
|
|
<div class="info p-0">
|
|
<h5 class="!mb-0">Coriss Ambady</h5>
|
|
<p class="!mb-0 text-[.85rem]">Financial Analyst</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<div class="card border-0 !bg-[rgba(255,255,255,.9)]">
|
|
<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="border-0 !mb-0 !text-[.9rem] !leading-[1.7] font-medium m-[0_0_1rem]">
|
|
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
|
|
<div class="flex items-center text-left">
|
|
<div class="info p-0">
|
|
<h5 class="!mb-0">Cory Zamora</h5>
|
|
<p class="!mb-0 text-[.85rem]">Marketing Specialist</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<div class="card border-0 !bg-[rgba(255,255,255,.9)]">
|
|
<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="border-0 !mb-0 !text-[.9rem] !leading-[1.7] font-medium m-[0_0_1rem]">
|
|
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
|
|
<div class="flex items-center text-left">
|
|
<div class="info p-0">
|
|
<h5 class="!mb-0">Nikolas Brooten</h5>
|
|
<p class="!mb-0 text-[.85rem]">Sales Manager</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<div class="card border-0 !bg-[rgba(255,255,255,.9)]">
|
|
<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="border-0 !mb-0 !text-[.9rem] !leading-[1.7] font-medium m-[0_0_1rem]">
|
|
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
|
|
<div class="flex items-center text-left">
|
|
<div class="info p-0">
|
|
<h5 class="!mb-0">Coriss Ambady</h5>
|
|
<p class="!mb-0 text-[.85rem]">Financial Analyst</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<div class="card border-0 !bg-[rgba(255,255,255,.9)]">
|
|
<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="border-0 !mb-0 !text-[.9rem] !leading-[1.7] font-medium m-[0_0_1rem]">
|
|
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
|
|
<div class="flex items-center text-left">
|
|
<div class="info p-0">
|
|
<h5 class="!mb-0">Jackie Sanders</h5>
|
|
<p class="!mb-0">Investment Planner</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
<div class="swiper-slide">
|
|
<div class="item-inner">
|
|
<div class="card border-0 !bg-[rgba(255,255,255,.9)]">
|
|
<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="border-0 !mb-0 !text-[.9rem] !leading-[1.7] font-medium m-[0_0_1rem]">
|
|
<p>“Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vestibulum id ligula porta felis euismod semper. Cras justo odio dapibus facilisis sociis natoque penatibus.”</p>
|
|
<div class="flex items-center text-left">
|
|
<div class="info p-0">
|
|
<h5 class="!mb-0">Laura Widerski</h5>
|
|
<p class="!mb-0">Sales Specialist</p>
|
|
</div>
|
|
</div>
|
|
</blockquote>
|
|
</div>
|
|
<!-- /.card-body -->
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
<!-- /.item-inner -->
|
|
</div>
|
|
<!--/.swiper-slide -->
|
|
</div>
|
|
<!--/.swiper-wrapper -->
|
|
</div>
|
|
<!-- /.swiper -->
|
|
</div>
|
|
<!-- /.swiper-container -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!-- /.wrapper -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="about">
|
|
<div class="wrapper bg-[rgba(246,247,249,1)] ">
|
|
<div class="container py-[4.5rem] xl:!py-24 lg:!py-24 md:!py-24">
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-[-30px] items-center">
|
|
<div class="md:w-8/12 lg:w-6/12 xl:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!order-2 lg:!order-2 !mx-auto md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[30px]">
|
|
<div class="img-mask mask-2"><img src="../assets/img/photos/about30.jpg" alt="image"></div>
|
|
</div>
|
|
<!--/column -->
|
|
<div class="xl:w-6/12 lg:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full md:!px-[20px] lg:!px-[20px] xl:!px-[35px] !mt-[30px]">
|
|
<h2 class="xl:!text-[1.7rem] !text-[calc(1.295rem_+_0.54vw)] !leading-[1.25] !font-semibold !mb-3">About Me</h2>
|
|
<p class="lead !text-[1.1rem] !leading-[1.55] font-medium">I'm Caitlyn Trunçgil, a photographer specializing in food, drink and product photography.</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. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula.</p>
|
|
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur.</p>
|
|
<a href="#" class="btn btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758] active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] !rounded-[50rem] !mt-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">Learn More</a>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px] !mt-10 xl:!mt-16 lg:!mt-16 md:!mt-16">
|
|
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full md:!px-[20px] lg:!px-[20px] xl:!px-[35px]">
|
|
<h2 class="xl:!text-[1.7rem] !text-[calc(1.295rem_+_0.54vw)] !leading-[1.25] !font-semibold !mb-3">My Working Process</h2>
|
|
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus. Aenean eu leo quam.</p>
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="xl:w-8/12 lg:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full md:!px-[20px] lg:!px-[20px] xl:!px-[35px]">
|
|
<div class="flex flex-wrap mx-[-15px] !mt-[-30px] md:mx-[-20px] lg:mx-[-20px] xl:mx-[-35px]">
|
|
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px] md:!px-[20px] lg:!px-[20px] xl:!px-[35px]">
|
|
<div class="flex flex-row">
|
|
<div>
|
|
<span class="icon btn btn-circle btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758] active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] pointer-events-none !mr-4 !mt-1 !w-[2.2rem] !h-[2.2rem] !inline-flex !items-center !justify-center !text-[1rem] !leading-none !p-0 !rounded-[100%]"><span class="number text-[0.9rem] table-cell text-center align-middle font-bold mx-auto my-0">1</span></span>
|
|
</div>
|
|
<div>
|
|
<h4 class="!mb-1">Concept</h4>
|
|
<p class="!mb-0">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida.</p>
|
|
</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-[15px] max-w-full !mt-[30px] md:!px-[20px] lg:!px-[20px] xl:!px-[35px]">
|
|
<div class="flex flex-row">
|
|
<div>
|
|
<span class="icon btn btn-circle btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758] active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] pointer-events-none !mr-4 !mt-1 !w-[2.2rem] !h-[2.2rem] !inline-flex !items-center !justify-center !text-[1rem] !leading-none !p-0 !rounded-[100%]"><span class="number text-[0.9rem] table-cell text-center align-middle font-bold mx-auto my-0">2</span></span>
|
|
</div>
|
|
<div>
|
|
<h4 class="!mb-1">Prepare</h4>
|
|
<p class="!mb-0">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida.</p>
|
|
</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-[15px] max-w-full !mt-[30px] md:!px-[20px] lg:!px-[20px] xl:!px-[35px]">
|
|
<div class="flex flex-row">
|
|
<div>
|
|
<span class="icon btn btn-circle btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758] active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] pointer-events-none !mr-4 !mt-1 !w-[2.2rem] !h-[2.2rem] !inline-flex !items-center !justify-center !text-[1rem] !leading-none !p-0 !rounded-[100%]"><span class="number text-[0.9rem] table-cell text-center align-middle font-bold mx-auto my-0">3</span></span>
|
|
</div>
|
|
<div>
|
|
<h4 class="!mb-1">Retouch</h4>
|
|
<p class="!mb-0">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida.</p>
|
|
</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-[15px] max-w-full !mt-[30px] md:!px-[20px] lg:!px-[20px] xl:!px-[35px]">
|
|
<div class="flex flex-row">
|
|
<div>
|
|
<span class="icon btn btn-circle btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758] active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] pointer-events-none !mr-4 !mt-1 !w-[2.2rem] !h-[2.2rem] !inline-flex !items-center !justify-center !text-[1rem] !leading-none !p-0 !rounded-[100%]"><span class="number text-[0.9rem] table-cell text-center align-middle font-bold mx-auto my-0">4</span></span>
|
|
</div>
|
|
<div>
|
|
<h4 class="!mb-1">Finalize</h4>
|
|
<p class="!mb-0">Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/column -->
|
|
</div>
|
|
<!--/.row -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!-- /.wrapper -->
|
|
</section>
|
|
<!-- /section -->
|
|
<section id="pricing">
|
|
<div class="wrapper image-wrapper bg-image bg-overlay bg-fixed bg-no-repeat bg-[center_center] bg-cover 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(30,34,40,.5)]" data-image-src="./assets/img/photos/bg36.jpg">
|
|
<div class="container py-[5rem] xl:!py-[7rem] lg:!py-[7rem] md:!py-[7rem]">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xl:w-9/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="card border-0 !bg-[rgba(255,255,255,.9)]">
|
|
<div class="card-body xl:!py-16 xl:!px-24 lg:!py-16 lg:!px-24 p-[40px]">
|
|
<h2 class="xl:!text-[1.7rem] !text-[calc(1.295rem_+_0.54vw)] !leading-[1.25] !font-semibold !mb-3 !text-center">Request Photography Pricing</h2>
|
|
<p class="lead !text-[1.1rem] !leading-[1.55] font-medium !mb-10">For more information please get in touch using the form below:</p>
|
|
<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-[15px] max-w-full">
|
|
<div class="form-floating relative !mb-4">
|
|
<input id="form_name" type="text" name="name" class="form-control bg-[rgba(255,255,255,.7)] border-0 relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:bg-[rgba(255,255,255,.7)] focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus:!border-0 focus-visible:!border-0 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>
|
|
<label for="form_name" class="!text-[#959ca9] !mb-2 !inline-block 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="valid-feedback"> Looks good! </div>
|
|
<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-[15px] max-w-full">
|
|
<div class="form-floating relative !mb-4">
|
|
<input id="form_email" type="email" name="email" class="form-control bg-[rgba(255,255,255,.7)] border-0 relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:bg-[rgba(255,255,255,.7)] focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus:!border-0 focus-visible:!border-0 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>
|
|
<label for="form_email" class="!text-[#959ca9] !mb-2 !inline-block 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-[15px] max-w-full">
|
|
<div class="form-floating relative !mb-4">
|
|
<textarea id="form_message" name="message" class="form-control bg-[rgba(255,255,255,.7)] border-0 relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-clip-padding shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:bg-[rgba(255,255,255,.7)] focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus:!border-0 focus-visible:!border-0 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="form_message" class="!text-[#959ca9] !mb-2 !inline-block 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-[15px] max-w-full !text-center">
|
|
<input type="submit" class="btn btn-yellow !text-white !bg-[#fab758] border-[#fab758] hover:text-white hover:bg-[#fab758] hover:!border-[#fab758] active:text-white active:bg-[#fab758] active:border-[#fab758] disabled:text-white disabled:bg-[#fab758] disabled:border-[#fab758] !rounded-[50rem] btn-send" value="Send message">
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</form>
|
|
<!-- /form -->
|
|
</div>
|
|
<!--/.card-body -->
|
|
</div>
|
|
<!--/.card -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div>
|
|
<!-- /.container -->
|
|
</div>
|
|
<!-- /.wrapper -->
|
|
</section>
|
|
<!-- /section -->
|
|
</div>
|
|
<!-- /.content-wrapper -->
|
|
<footer class="bg-[rgba(246,247,249,1)]">
|
|
<div class="container pt-[4rem] pb-7">
|
|
<div class="flex flex-wrap mx-[-15px] xl:mx-0 lg:mx-0 !mt-[-30px]">
|
|
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:px-0 lg:px-0 !mt-[30px]">
|
|
<div class="widget">
|
|
<img class="!mb-4" src="../assets/img/truncgil-yatay.svg" alt="image">
|
|
<p class="lead text-[0.9rem] font-medium !leading-[1.65] !mb-0">I'm Caitlyn Trunçgil, a photographer specializing in food, drink and product photography.</p>
|
|
</div>
|
|
<!-- /.widget -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!ml-[16.66666667%] lg:!ml-[16.66666667%] xl:px-0 lg:px-0 !mt-[30px]">
|
|
<div class="widget">
|
|
<div class="flex flex-row">
|
|
<div>
|
|
<div class="icon !text-[#fab758] xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-4 !mt-[-0.25rem]"> <i class="uil uil-phone-volume before:content-['\ec50']"></i> </div>
|
|
</div>
|
|
<div>
|
|
<h5 class="!mb-1">Phone</h5>
|
|
<p class="!mb-0">00 (123) 456 78 90 <br>00 (987) 654 32 10</p>
|
|
</div>
|
|
</div>
|
|
<!--/div -->
|
|
</div>
|
|
<!-- /.widget -->
|
|
</div>
|
|
<!-- /column -->
|
|
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:px-0 lg:px-0 !mt-[30px]">
|
|
<div class="widget">
|
|
<div class="flex flex-row">
|
|
<div>
|
|
<div class="icon !text-[#fab758] xl:!text-[1.4rem] !text-[calc(1.265rem_+_0.18vw)] !mr-4 !mt-[-0.25rem]"> <i class="uil uil-location-pin-alt before:content-['\ebd8']"></i> </div>
|
|
</div>
|
|
<div class="!self-start !justify-start">
|
|
<h5 class="!mb-1">Address</h5>
|
|
<address class=" not-italic !leading-[inherit] !mb-4">ÇAMTEPE MAH. MAHMUT TEVFİK ATAY BUL. GAZİANTEP TEKNOPARK NO: 4A İÇ KAPI NO: 1 ŞAHİNBEY / GAZİANTEP</address>
|
|
</div>
|
|
</div>
|
|
<!--/div -->
|
|
</div>
|
|
<!-- /.widget -->
|
|
</div>
|
|
<!-- /column -->
|
|
</div>
|
|
<!--/.row -->
|
|
<hr class="!mt-[3rem] xl:!mt-[3.5rem] lg:!mt-[3.5rem] md:!mt-[3.5rem] !mb-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="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-[#fab758] 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-[#fab758] 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/demo24 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 18 Oct 2025 10:59:03 GMT -->
|
|
</html> |