319 lines
14 KiB
HTML
319 lines
14 KiB
HTML
<!doctype html>
|
|
<html class="no-js" lang="en">
|
|
<head>
|
|
<title>Crafto - The Multipurpose HTML5 Template</title>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="author" content="ThemeZaa">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
|
|
|
|
<link rel="shortcut icon" href="images/favicon.png">
|
|
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
|
|
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
|
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
|
<link rel="stylesheet" href="css/vendors.min.css" />
|
|
<link rel="stylesheet" href="css/icon.min.css" />
|
|
<link rel="stylesheet" href="css/style.min.css" />
|
|
<link rel="stylesheet" href="css/responsive.min.css" />
|
|
<link rel="stylesheet" href="demos/branding-agency/branding-agency.css" />
|
|
</head>
|
|
<body data-mobile-nav-trigger-alignment="right" data-mobile-nav-style="modern" data-mobile-nav-bg-color="#1d1d1d">
|
|
|
|
<header>
|
|
|
|
<nav class="navbar navbar-expand-lg header-light bg-white header-reverse glass-effect">
|
|
<div class="container-fluid">
|
|
<div class="col-auto col-lg-2 me-lg-0 me-auto">
|
|
<a class="navbar-brand" href="demo-branding-agency.html">
|
|
<img src="images/demo-branding-agency-logo-black.png" data-at2x="images/demo-branding-agency-logo-black@2x.png" alt class="default-logo">
|
|
<img src="images/demo-branding-agency-logo-black.png" data-at2x="images/demo-branding-agency-logo-black@2x.png" alt class="alt-logo">
|
|
<img src="images/demo-branding-agency-logo-black.png" data-at2x="images/demo-branding-agency-logo-black@2x.png" alt class="mobile-logo">
|
|
</a>
|
|
</div>
|
|
<div class="col-auto ms-auto md-ms-0 menu-order position-static">
|
|
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-line"></span>
|
|
<span class="navbar-toggler-line"></span>
|
|
<span class="navbar-toggler-line"></span>
|
|
<span class="navbar-toggler-line"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
|
|
<ul class="navbar-nav alt-font">
|
|
<li class="nav-item"><a href="demo-branding-agency.html" class="nav-link">Home</a></li>
|
|
<li class="nav-item"><a href="demo-branding-agency-about.html" class="nav-link">Agency</a></li>
|
|
<li class="nav-item dropdown dropdown-with-icon-style02">
|
|
<a href="demo-branding-agency-services.html" class="nav-link">Services</a>
|
|
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
|
|
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
|
|
<li><a href="demo-branding-agency-services-detail.html"><i class="bi bi-megaphone text-dark-gray"></i>Branding solutions</a></li>
|
|
<li><a href="demo-branding-agency-services-detail.html"><i class="bi bi-vector-pen text-dark-gray"></i>Design research</a></li>
|
|
<li><a href="demo-branding-agency-services-detail.html"><i class="bi bi-laptop text-dark-gray"></i>Web development</a></li>
|
|
<li><a href="demo-branding-agency-services-detail.html"><i class="bi bi-bag-heart text-dark-gray"></i>eCommerce solutions</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item"><a href="demo-branding-agency-portfolio.html" class="nav-link">Portfolio</a></li>
|
|
<li class="nav-item"><a href="demo-branding-agency-contact.html" class="nav-link">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto text-end d-none d-sm-flex">
|
|
<div class="header-icon">
|
|
<div class="header-button">
|
|
<a href="cdn-cgi/l/email-protection.html#61080f070e21050e0c00080f4f020e0c" class="btn border-1 btn-transparent-light-gray btn-medium left-icon btn-switch-text">
|
|
<span>
|
|
<span><i class="fa-regular fa-envelope"></i></span>
|
|
<span class="btn-double-text" data-text="Send a message">Send a message</span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
</header>
|
|
|
|
|
|
<section class="big-section top-space-margin pb-0">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12 atropos" data-atropos>
|
|
<div class="atropos-scale">
|
|
<div class="atropos-rotate">
|
|
<div class="atropos-inner" data-atropos-offset="3">
|
|
<img src="images/portfolio-single-slider-01.jpg" alt>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="pt-5">
|
|
<div class="container">
|
|
<div class="row row-cols-1 row-cols-md-4 row-cols-sm-2 justify-content-center align-items-center text-center">
|
|
<div class="col border-end border-color-extra-medium-gray sm-mb-30px xs-border-end-0">
|
|
<span class="d-block text-uppercase fs-14 alt-font lh-26 ls-05px">Awards</span>
|
|
<span class="fs-17 fw-500 text-dark-gray">Best packaging</span>
|
|
</div>
|
|
<div class="col border-end border-color-extra-medium-gray sm-mb-30px sm-border-end-0">
|
|
<span class="d-block text-uppercase fs-14 alt-font lh-26 ls-05px">Industry</span>
|
|
<span class="fs-17 fw-500 text-dark-gray">Lifestyle</span>
|
|
</div>
|
|
<div class="col border-end border-color-extra-medium-gray xs-mb-30px xs-border-end-0">
|
|
<span class="d-block text-uppercase fs-14 alt-font lh-26 ls-05px">Services</span>
|
|
<span class="fs-17 fw-500 text-dark-gray">Product design</span>
|
|
</div>
|
|
<div class="col">
|
|
<span class="d-block text-uppercase fs-14 alt-font lh-26 ls-05px">Country</span>
|
|
<span class="fs-17 fw-500 text-dark-gray">Indonesia</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="one-fourth-screen" data-parallax-background-ratio="0.5" style="background-image: url('images/portfolio-single-slider-02.jpg')"></section>
|
|
|
|
|
|
<section class="overflow-hidden pb-0 pt-30px">
|
|
<div class="container">
|
|
<div class="row mb-50px sm-mb-30px">
|
|
<div class="col-12">
|
|
<img src="images/portfolio-single-slider-03.jpg" class="w-100" alt />
|
|
</div>
|
|
</div>
|
|
<div class="row row-cols-1 row-cols-lg-2 mb-9">
|
|
<div class="col md-mb-30px text-center text-lg-start">
|
|
<h5 class="alt-font mb-0 text-dark-gray fw-500 w-80 lg-w-100">Family of wraps for endorfina chocolate with olives and herbs by polish company.</h5>
|
|
</div>
|
|
<div class="col last-paragraph-no-margin text-center text-lg-start">
|
|
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex commodo.</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<img src="images/portfolio-single-slider-04.jpg" class="w-100" alt />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="overflow-hidden pb-0">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12 col-md-12">
|
|
<div class="outside-box-right-60 outside-box-left-60 sm-outside-box-right-0 sm-outside-box-left-0">
|
|
<div class="swiper magic-cursor drag-cursor" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 60, "loop": true, "autoplay": { "delay": 2000, "disableOnInteraction": false }, "pagination": { "el": ".slider-three-slide-pagination", "clickable": true, "dynamicBullets": true }, "navigation": { "nextEl": ".slider-three-slide-next", "prevEl": ".slider-three-slide-prev" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 3 }, "768": { "slidesPerView": 3 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
|
<div class="swiper-wrapper">
|
|
|
|
<div class="swiper-slide">
|
|
<img src="images/portfolio-single-slider-05.jpg" class="w-100" alt />
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<img src="images/portfolio-single-slider-06.jpg" class="w-100" alt />
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<img src="images/portfolio-single-slider-07.jpg" class="w-100" alt />
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<img src="images/portfolio-single-slider-05.jpg" class="w-100" alt />
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<img src="images/portfolio-single-slider-06.jpg" class="w-100" alt />
|
|
</div>
|
|
|
|
|
|
<div class="swiper-slide">
|
|
<img src="images/portfolio-single-slider-07.jpg" class="w-100" alt />
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section>
|
|
<div class="container">
|
|
<div class="row row-cols-1 row-cols-md-3 text-center">
|
|
<div class="col sm-mb-30px">
|
|
<img src="images/portfolio-single-slider-08.jpg" alt />
|
|
</div>
|
|
<div class="col sm-mb-30px">
|
|
<img src="images/portfolio-single-slider-09.jpg" alt />
|
|
</div>
|
|
<div class="col">
|
|
<img src="images/portfolio-single-slider-10.jpg" alt />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="pt-0">
|
|
<div class="container">
|
|
<div class="row row-cols-1 align-items-center justify-content-center">
|
|
<div class="col text-center alt-font ls-1px mb-10px text-uppercase">Share this project</div>
|
|
<div class="col text-center elements-social social-icon-style-04">
|
|
<ul class="large-icon dark mb-0">
|
|
<li><a class="facebook" href="https://www.facebook.com" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
|
|
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
|
|
<li><a class="linkedin" href="https://www.linkedin.com" target="_blank"><i class="fa-brands fa-linkedin-in"></i><span></span></a></li>
|
|
<li><a class="pinterest" href="https://www.pinterest.com" target="_blank"><i class="fa-brands fa-pinterest-p"></i><span></span></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="py-0">
|
|
<div class="container-fluid">
|
|
<div class="row row-cols-1 row-cols-xl-2 row-cols-lg-2 row-cols-md-2">
|
|
|
|
<div class="col portfolio-pagination px-0 bg-very-light-gray sm-border-bottom border-color-extra-medium-gray">
|
|
<a href="demo-digital-agency-single-project-minimal.html" class="d-flex justify-content-between align-items-center ps-8 pe-8 pt-4 pb-4 lg-p-50px sm-p-35px">
|
|
<div class="bg-fancy-image cover-background" style="background-image: url('images/portfolio-previous-arrow-bg.jpg')"></div>
|
|
<div class="alt-font fw-500 btn-slide-icon-left text-uppercase"><span class="separator h-2px w-30px bg-dark-gray d-inline-block me-15px align-middle"></span><span class="d-none d-lg-inline-block fs-14">Prev project</span></div>
|
|
<span class="alt-font fs-28 text-dark-gray d-block fw-500 ls-minus-1px">Blasting design</span>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<div class="col portfolio-pagination px-0 bg-very-light-gray">
|
|
<a href="demo-interactive-portfolio-single-project-modern.html" class="d-flex justify-content-between align-items-center ps-8 pe-8 pt-4 pb-4 lg-p-50px sm-p-35px">
|
|
<div class="bg-fancy-image cover-background" style="background-image: url('images/portfolio-next-arrow-bg.jpg')"></div>
|
|
<span class="alt-font fs-28 text-dark-gray d-block fw-500 ls-minus-1px">Cottura music</span>
|
|
<div class="alt-font fw-500 btn-slide-icon-right text-uppercase"><span class="d-none d-lg-inline-block fs-14">Next project</span><span class="separator h-2px w-30px bg-dark-gray d-inline-block ms-15px align-middle"></span></div>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<footer class="bg-charcoal-blue pb-4 sm-pb-50px" style="background-image: url('images/demo-branding-agency-pattern.svg')">
|
|
<div class="container">
|
|
<div class="row mb-6">
|
|
<div class="col-lg-5 col-md-6 sm-mb-30px order-2 order-md-1">
|
|
<h3 class="text-white fw-500 alt-font mb-50px ls-minus-1px sm-mb-30px">Let's make something great work together.</h3>
|
|
<div class="row">
|
|
<div class="col-lg-5 col-6">
|
|
<span class="alt-font fs-14 text-uppercase d-block text-white ls-1px lh-24">Call our office</span>
|
|
<a href="tel:12345678910">+1 234 567 8910</a>
|
|
</div>
|
|
<div class="col-lg-5 col-6">
|
|
<span class="alt-font fs-14 text-uppercase d-block text-white ls-1px lh-24">Send a message</span>
|
|
<a href="cdn-cgi/l/email-protection.html#afc6c1c9c0efcbc0c2cec6c181ccc0c2"><span class="__cf_email__" data-cfemail="0a63646c654a6e65676b636424696567">[email protected]</span></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-2 offset-lg-1 col-6 order-3 order-md-2">
|
|
<span class="alt-font fs-14 text-uppercase mb-5px d-block text-white ls-1px">Company</span>
|
|
<ul>
|
|
<li><a href="demo-branding-agency.html">Home</a></li>
|
|
<li><a href="demo-branding-agency-about.html">Agency</a></li>
|
|
<li><a href="demo-branding-agency-services.html">Services</a></li>
|
|
<li><a href="demo-branding-agency-portfolio.html">Portfolio</a></li>
|
|
<li><a href="demo-branding-agency-contact.html">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-2 col-6 order-3 order-md-3">
|
|
<span class="alt-font fs-14 text-uppercase mb-5px d-block text-white ls-1px">Follow Us</span>
|
|
<ul>
|
|
<li><a href="https://www.pinterest.com/" target="_blank">Pinterest</a></li>
|
|
<li><a href="https://www.twitter.com" target="_blank">Twitter</a></li>
|
|
<li><a href="http://www.dribbble.com" target="_blank">Dribbble</a></li>
|
|
<li><a href="https://www.instagram.com" target="_blank">Instagram</a></li>
|
|
<li><a href="http://www.behance.com" target="_blank">Behance</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-2 order-1 order-md-4 sm-mb-30px">
|
|
<a href="demo-branding-agency.html" class="footer-logo"><img src="images/demo-branding-agency-white-logo.png" data-at2x="images/demo-branding-agency-white-logo@2x.png" alt></a>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-7 last-paragraph-no-margin">
|
|
<p class="fs-13 lh-22 w-95 sm-w-100">This site is protected by reCAPTCHA and the Google privacy policy and terms of service apply. You must not use this website if you disagree with any of these website standard terms and conditions.</p>
|
|
</div>
|
|
<div class="col-md-5 text-md-end sm-mt-15px last-paragraph-no-margin">
|
|
<p class="fs-13 lh-22">© 2024 Crafto is Powered by <a href="https://www.themezaa.com/" target="_blank" class="text-decoration-line-bottom text-white">ThemeZaa</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
<div class="scroll-progress d-none d-xxl-block">
|
|
<a href="demo-branding-agency-single-project-slider.html#" class="scroll-top" aria-label="scroll">
|
|
<span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="js/jquery.js"></script>
|
|
<script type="text/javascript" src="js/vendors.min.js"></script>
|
|
<script type="text/javascript" src="js/main.js"></script>
|
|
</body>
|
|
</html> |