307 lines
16 KiB
HTML
307 lines
16 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#8de4e3ebe2cde9e2e0ece4e3a3eee2e0" 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="pb-0 top-space-margin position-relative overflow-hidden">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 text-center" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay":0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<h1 class="text-dark-gray fw-600 alt-font ls-minus-3px sm-ls-minus-4px" data-fancy-text="{ "opacity": [0, 1], "translateY": [50, 0], "filter": ["blur(20px)", "blur(0px)"], "string": ["Worked with global brands & agencies at the intersection of flat design and dynamic digital technology."], "duration": 400, "delay": 0, "speed": 20, "easing": "easeOutQuad" }"></h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="pt-3 pb-0 lg-pb-50px">
|
|
<div class="container">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col-lg-6 col-md-6 text-md-end text-center sm-mb-30px">
|
|
<div class="position-relative" data-anime="{"translateX": [50, 0], "scale": [0.7, 1], "opacity": [0,1], "duration": 800, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<img src="images/demo-photography-about-round-text.png" class="animation-rotation position-relative z-index-2" alt>
|
|
<div class="absolute-middle-center w-100 z-index-1"><img src="images/demo-photography-about-round-logo.png" alt></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 col-md-6 last-paragraph-no-margin text-md-start text-center">
|
|
<p class="text-dark-gray w-85 lg-w-100 sm-w-90 sm-mx-auto">Creating products with a strong identity. We provide brilliant ideas and adding the world called success brand. We are excited for our work.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="position-relative pt-0">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-xl-4 col-md-5 filter-content">
|
|
<ul class="portfolio-simple portfolio-wrapper grid-loading grid grid-4col xxl-grid-4col xl-grid-4col lg-grid-4col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large text-center">
|
|
<li class="grid-sizer"></li>
|
|
|
|
<li class="grid-item grid-item-single transition-inner-all">
|
|
<div class="portfolio-box" data-bottom-top="transform: translate3d(0px, 50px, 0px);" data-top-bottom="transform: translate3d(0px, -50px, 0px);">
|
|
<div class="portfolio-image bg-extra-medium-gray">
|
|
<a href="demo-branding-agency-single-project-slider.html">
|
|
<img src="images/demo-scattered-portfolio-01.jpg" alt />
|
|
</a>
|
|
</div>
|
|
<div class="portfolio-caption pt-35px pb-35px sm-pt-20px sm-pb-0">
|
|
<a href="demo-branding-agency-single-project-slider.html" class="text-dark-gray ls-minus-05px ls-minus-05px fw-600 fs-22 alt-font">Tailoring</a>
|
|
<span class="d-inline-block align-middle w-10px separator-line-1px bg-light-gray ms-5px me-5px"></span>
|
|
<div class="d-inline-block">Branding</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
<div class="col-xl-7 col-md-7 filter-content offset-xl-1">
|
|
<ul class="portfolio-simple portfolio-wrapper grid-loading grid grid-4col xxl-grid-4col xl-grid-4col lg-grid-4col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large text-center">
|
|
<li class="grid-sizer"></li>
|
|
|
|
<li class="grid-item grid-item-single transition-inner-all">
|
|
<div class="portfolio-box" data-bottom-top="transform: translate3d(0px, 100px, 0px)" data-top-bottom="transform: translate3d(0px, 180px, 0px);">
|
|
<div class="portfolio-image bg-extra-medium-gray">
|
|
<a href="demo-branding-agency-single-project-slider.html">
|
|
<img src="images/demo-scattered-portfolio-02.jpg" alt />
|
|
</a>
|
|
</div>
|
|
<div class="portfolio-caption pt-35px pb-35px sm-pt-20px sm-pb-0">
|
|
<a href="demo-branding-agency-single-project-slider.html" class="text-dark-gray ls-minus-05px fw-600 fs-22 alt-font">Designblast</a>
|
|
<span class="d-inline-block align-middle w-10px separator-line-1px bg-light-gray ms-5px me-5px"></span>
|
|
<div class="d-inline-block">Photography</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
<div class="col-12 filter-content mt-20 lg-mt-0 mb-3 lg-mb-0">
|
|
<ul class="portfolio-simple portfolio-wrapper grid-loading grid grid-4col xxl-grid-4col xl-grid-4col lg-grid-4col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large text-center">
|
|
<li class="grid-sizer"></li>
|
|
|
|
<li class="grid-item grid-item-single transition-inner-all">
|
|
<div class="portfolio-box" data-bottom-top="transform: translate3d(0px, -80px, 0px);" data-top-bottom="transform: translate3d(0px, 80px, 0px);">
|
|
<div class="portfolio-image bg-extra-medium-gray">
|
|
<a href="demo-branding-agency-single-project-slider.html">
|
|
<img src="images/demo-scattered-portfolio-03.jpg" alt />
|
|
</a>
|
|
</div>
|
|
<div class="portfolio-caption pt-35px pb-35px sm-pt-20px sm-pb-0">
|
|
<a href="demo-branding-agency-single-project-slider.html" class="text-dark-gray ls-minus-05px fw-600 fs-22 alt-font">Outward</a>
|
|
<span class="d-inline-block align-middle w-10px separator-line-1px bg-light-gray ms-5px me-5px"></span>
|
|
<div class="d-inline-block">Identity</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
<div class="col-xl-7 col-md-7 filter-content mt-5 lg-mt-0">
|
|
<ul class="portfolio-simple portfolio-wrapper grid-loading grid grid-4col xxl-grid-4col xl-grid-4col lg-grid-4col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large text-center">
|
|
<li class="grid-sizer"></li>
|
|
|
|
<li class="grid-item grid-item-single transition-inner-all">
|
|
<div class="portfolio-box" data-bottom-top="transform: translate3d(0px, 50px, 0px);" data-top-bottom="transform: translate3d(0px, -50px, 0px);">
|
|
<div class="portfolio-image bg-extra-medium-gray">
|
|
<a href="demo-branding-agency-single-project-slider.html">
|
|
<img src="images/demo-scattered-portfolio-04.jpg" alt />
|
|
</a>
|
|
</div>
|
|
<div class="portfolio-caption pt-35px pb-35px sm-pt-20px sm-pb-0">
|
|
<a href="demo-branding-agency-single-project-slider.html" class="text-dark-gray ls-minus-05px fw-600 fs-22 alt-font">Violator</a>
|
|
<span class="d-inline-block align-middle w-10px separator-line-1px bg-light-gray ms-5px me-5px"></span>
|
|
<div class="d-inline-block">Marketing</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
<div class="col-xl-4 col-md-5 filter-content offset-xl-1 mt-3 lg-mt-0">
|
|
<ul class="portfolio-simple portfolio-wrapper grid-loading grid grid-4col xxl-grid-4col xl-grid-4col lg-grid-4col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large text-center">
|
|
<li class="grid-sizer"></li>
|
|
|
|
<li class="grid-item grid-item-single transition-inner-all">
|
|
<div class="portfolio-box" data-bottom-top="transform: translate3d(0px, -50px, 0px);" data-top-bottom="transform: translate3d(0px, 50px, 0px);">
|
|
<div class="portfolio-image bg-extra-medium-gray">
|
|
<a href="demo-branding-agency-single-project-slider.html">
|
|
<img src="images/demo-scattered-portfolio-05.jpg" alt />
|
|
</a>
|
|
</div>
|
|
<div class="portfolio-caption pt-35px pb-35px sm-pt-20px sm-pb-0">
|
|
<a href="demo-branding-agency-single-project-slider.html" class="text-dark-gray ls-minus-05px fw-600 fs-22 alt-font">Potato</a>
|
|
<span class="d-inline-block align-middle w-10px separator-line-1px bg-light-gray ms-5px me-5px"></span>
|
|
<div class="d-inline-block">Branding</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
<div class="col-12 mt-5 lg-mt-0 filter-content">
|
|
<ul class="portfolio-simple portfolio-wrapper grid-loading grid grid-4col xxl-grid-4col xl-grid-4col lg-grid-4col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large text-center">
|
|
<li class="grid-sizer"></li>
|
|
|
|
<li class="grid-item grid-item-single transition-inner-all">
|
|
<div class="portfolio-box" data-bottom-top="transform: translate3d(0px, -80px, 0px);" data-top-bottom="transform: translate3d(0px, 80px, 0px);">
|
|
<div class="portfolio-image bg-extra-medium-gray">
|
|
<a href="demo-branding-agency-single-project-slider.html">
|
|
<img src="images/demo-scattered-portfolio-06.jpg" alt />
|
|
</a>
|
|
</div>
|
|
<div class="portfolio-caption pt-35px pb-35px sm-pt-20px lg-pb-0">
|
|
<a href="demo-branding-agency-single-project-slider.html" class="text-dark-gray ls-minus-05px fw-600 fs-22 alt-font">Treato</a>
|
|
<span class="d-inline-block align-middle w-10px separator-line-1px bg-light-gray ms-5px me-5px"></span>
|
|
<div class="d-inline-block">Web</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
</ul>
|
|
</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#fb92959d94bb9f94969a9295d5989496"><span class="__cf_email__" data-cfemail="f49d9a929bb4909b99959d9ada979b99">[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-portfolio.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> |