442 lines
26 KiB
HTML
442 lines
26 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#84edeae2ebc4e0ebe9e5edeaaae7ebe9" 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="p-0 top-space-margin position-relative overflow-hidden">
|
|
<div class="container-fluid p-0 h-100 position-relative">
|
|
<div class="row g-0">
|
|
<div class="col-xl-4 col-lg-5 d-flex justify-content-center align-items-center ps-10 xxl-ps-6 xl-ps-4 md-ps-4 sm-ps-0 position-relative order-2 order-lg-1" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay":0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<div class="vertical-title-center align-items-center justify-content-center flex-shrink-0 w-75px sm-w-50px">
|
|
<h1 class="title fs-15 alt-font text-dark-gray fw-700 text-uppercase ls-1px text-uppercase d-flex w-auto align-items-center m-0" data-fancy-text="{ "opacity": [0, 1], "translateY": [50, 0], "filter": ["blur(20px)", "blur(0px)"], "string": ["about agency"], "duration": 400, "delay": 0, "speed": 50, "easing": "easeOutQuad" }"></h1>
|
|
</div>
|
|
<div class="border-start border-color-extra-medium-gray ps-40px sm-ps-20px position-relative z-index-9">
|
|
<h2 class="text-dark-gray fw-600 alt-font outside-box-right-10 xl-outside-box-right-15 lg-outside-box-right-20 md-me-0 sm-mb-0 ls-minus-3px">We are work on delivering unique visual solutions.</h2>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-8 col-lg-7 position-relative one-half-screen order-1 order-lg-2 md-mb-50px">
|
|
<div class="overflow-hidden position-relative">
|
|
<div class="w-100" data-anime="{ "effect": "slide", "direction": "lr", "color": "#f7f7f7", "duration": 1000, "delay": 0 }">
|
|
<img src="images/demo-branding-agency-about-title-bg.jpg" alt class="w-100 liquid-parallax" data-parallax-liquid="true" data-parallax-position="top" data-parallax-scale="1.05">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section>
|
|
<div class="container">
|
|
<div class="row mb-6 sm-mb-50px">
|
|
<div class="col-md-12 text-center text-md-start" data-anime="{"opacity": [0,1], "duration": 600, "delay":0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<div class="fs-140 xxl-fs-100 sm-fs-60 fw-600 text-dark-gray alt-font ls-minus-8px sm-ls-minus-2px" data-bottom-top="transform: translate3d(-50px, 0px, 0px);" data-top-bottom="transform: translate3d(50px, 0px, 0px);">Brand experience</div>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="row align-items-center align-items-lg-end" data-bottom-top="transform: translate3d(-30px, 0px, 0px);" data-top-bottom="transform: translate3d(30px, 0px, 0px);">
|
|
<div class="col-lg-3 col-md-4 text-md-end text-center md-mt-30px md-mb-20px" data-anime="{"opacity": [0,1], "duration": 600, "delay":0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<div class="position-relative">
|
|
<img src="images/demo-branding-agency-about-01.png" class="animation-rotation position-relative z-index-2" alt>
|
|
<div class="absolute-middle-center w-100 z-index-1"><img src="images/demo-branding-agency-about-02.png" alt></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-5 col-md-6 text-center text-md-start" data-anime="{"opacity": [0,1], "duration": 600, "delay":0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<div class="fs-140 xxl-fs-100 sm-fs-60 fw-600 text-dark-gray alt-font ls-minus-8px sm-ls-minus-2px">agency</div>
|
|
</div>
|
|
<div class="col-lg-4 last-paragraph-no-margin md-mt-30px" data-anime="{"opacity": [0,1], "duration": 600, "delay":0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<p class="w-95 md-w-80 mx-auto text-center text-lg-start sm-w-100">Creating products with a strong identity. We provide brilliant ideas and adding the world called success brand. </p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row g-0 counter-style-04" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay":0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<div class="col-lg-3 col-md-6 feature-box text-start hover-box border-start sm-border border-color-extra-medium-gray ps-35px pe-35px pt-25px pb-25px lg-ps-25px lg-pe-25px md-ps-35px md-pe-35px md-mb-50px sm-mb-30px">
|
|
<div class="feature-box-content">
|
|
<p class="text-dark-gray mb-20 sm-mb-10 fw-500 w-90 fs-17 lh-28">Users on marketplaces we've created in 2023.</p>
|
|
<h2 class="vertical-counter d-inline-flex text-dark-gray fw-700 ls-minus-2px mt-25 alt-font mb-0" data-text="+" data-to="8500"><sup class="text-dark-gray top-0"><i class="feather icon-feather-arrow-up icon-small"></i></sup></h2>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6 feature-box text-start hover-box border-start sm-border border-color-extra-medium-gray md-border-end ps-35px pe-35px pt-25px pb-25px lg-ps-25px lg-pe-25px md-mb-50px sm-mb-30px">
|
|
<div class="feature-box-content">
|
|
<p class="text-dark-gray mb-20 sm-mb-10 fw-500 w-90 fs-17 lh-28">Successfully finished projects with creativity. </p>
|
|
<h2 class="vertical-counter d-inline-flex text-dark-gray fw-700 ls-minus-2px mt-25 alt-font mb-0" data-text="+" data-to="660"><sup class="text-dark-gray top-0"><i class="feather icon-feather-arrow-up icon-small"></i></sup></h2>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6 feature-box text-start hover-box border-start sm-border border-color-extra-medium-gray ps-35px pe-35px pt-25px pb-25px lg-ps-25px lg-pe-25px sm-mb-30px">
|
|
<div class="feature-box-content">
|
|
<p class="text-dark-gray mb-20 sm-mb-10 fw-500 w-90 fs-17 lh-28">Monthly visitors on our e-Commerce platform.</p>
|
|
<h2 class="vertical-counter d-inline-flex text-dark-gray fw-700 ls-minus-2px mt-25 alt-font mb-0" data-text="+" data-to="6834"><sup class="text-dark-gray top-0"><i class="feather icon-feather-arrow-up icon-small"></i></sup></h2>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3 col-md-6 feature-box text-start hover-box border-start sm-border border-color-extra-medium-gray md-border-end ps-35px pe-35px pt-25px pb-25px lg-ps-25px lg-pe-25px">
|
|
<div class="feature-box-content">
|
|
<p class="text-dark-gray mb-20 sm-mb-10 fw-500 w-90 fs-17 lh-28">Onboarding conversions growth increased.</p>
|
|
<h2 class="vertical-counter d-inline-flex text-dark-gray fw-700 ls-minus-2px mt-25 alt-font mb-0" data-text="%" data-to="38"><sup class="text-dark-gray top-0"><i class="feather icon-feather-arrow-up icon-small"></i></sup></h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="pt-0">
|
|
<div class="container">
|
|
<div class="row mb-17 sm-mb-30px">
|
|
<div class="col-lg-6 position-relative">
|
|
<div class="row align-items-center position-relative md-mb-15" data-anime="{ "opacity": [0,1], "duration": 600, "delay":0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<div class="col-md-5 sm-mb-30px" data-bottom-top="transform: translateY(50px)" data-top-bottom="transform: translateY(-50px)">
|
|
<img src="images/demo-branding-agency-about-05.jpg" alt />
|
|
</div>
|
|
<div class="col-lg-7 col-md-7 sm-mb-30px text-end" data-bottom-top="transform: translateY(-30px)" data-top-bottom="transform: translateY(30px)">
|
|
<img src="images/demo-branding-agency-about-04.jpg" alt class="box-shadow-quadruple-large md-w-80 sm-w-100" />
|
|
</div>
|
|
<div class="w-50 sm-w-100 overflow-hidden position-absolute sm-position-relative left-140px bottom-minus-200px sm-bottom-0px sm-left-0px p-0 sm-ps-15px sm-pe-15px" data-shadow-animation="true" data-animation-delay="100" data-bottom-top="transform: translateY(20px)" data-top-bottom="transform: translateY(-20px)">
|
|
<img src="images/demo-branding-agency-about-03.jpg" alt class="box-shadow-quadruple-large w-100" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-5 col-lg-6 offset-xl-1 md-mt-20 sm-mt-0" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay":0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<div class="mb-10px">
|
|
<span class="w-25px h-1px d-inline-block bg-base-color me-5px align-middle"></span>
|
|
<span class="text-gradient-base-color fs-15 alt-font fw-700 ls-05px text-uppercase d-inline-block align-middle">Award winning agency</span>
|
|
</div>
|
|
<h4 class="text-dark-gray alt-font fw-600 ls-minus-2px mb-20px">We provide brilliant ideas and adding the world called success to your brand.</h4>
|
|
<p class="w-90 md-w-100 mb-35px sm-mb-20px">Creating products with a strong identity. We provide brilliant ideas and adding the world called success brand. We deliver customized marketing campaign to use your audience to make a positive move.</p>
|
|
<a href="demo-branding-agency-contact.html" class="btn btn-large btn-dark-gray btn-switch-text btn-box-shadow border-1 left-icon me-10px sm-mb-15px sm-mt-15px">
|
|
<span>
|
|
<span><i class="feather icon-feather-send"></i></span>
|
|
<span class="btn-double-text" data-text="Let's talk now">Let's talk now</span>
|
|
</span>
|
|
</a>
|
|
<a href="demo-branding-agency-services.html" class="btn btn-large btn-transparent-light-gray border-1 btn-switch-text left-icon sm-mb-15px sm-mt-15px">
|
|
<span>
|
|
<span><i class="feather icon-feather-briefcase"></i></span>
|
|
<span class="btn-double-text" data-text="More services">More services</span>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="row row-cols-1 row-cols-lg-5 row-cols-md-3 row-cols-sm-2 clients-style-06 justify-content-center mb-3 sm-mb-0" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay":0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
|
|
<div class="col client-box text-center md-mb-35px">
|
|
<a href="demo-branding-agency-about.html#"><img src="images/logo-walmart.svg" class="h-35px" alt></a>
|
|
</div>
|
|
|
|
|
|
<div class="col client-box text-center md-mb-35px">
|
|
<a href="demo-branding-agency-about.html#"><img src="images/logo-logitech.svg" class="h-35px" alt></a>
|
|
</div>
|
|
|
|
|
|
<div class="col client-box text-center md-mb-35px">
|
|
<a href="demo-branding-agency-about.html#"><img src="images/logo-monday.svg" class="h-35px" alt></a>
|
|
</div>
|
|
|
|
|
|
<div class="col client-box text-center sm-mb-35px">
|
|
<a href="demo-branding-agency-about.html#"><img src="images/logo-google.svg" class="h-35px" alt></a>
|
|
</div>
|
|
|
|
|
|
<div class="col client-box text-center">
|
|
<a href="demo-branding-agency-about.html#"><img src="images/logo-paypal.svg" class="h-35px" alt></a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="py-0">
|
|
<div class="container">
|
|
<div class="row align-items-center position-relative">
|
|
<div class="col-lg-6">
|
|
<div class="outside-box-left-20 md-outside-box-left-0 overflow-hidden position-relative" data-parallax-liquid="true" data-parallax-transition="2" data-parallax-position="top">
|
|
<div class="liquid-parallax" data-parallax-liquid="true" data-parallax-position="bottom" data-parallax-scale="1.1" data-parallax-scale-fraction="0.0001">
|
|
<img class="w-100" src="images/demo-branding-agency-about-06.jpg" alt>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-5 col-lg-6 offset-xl-1 z-index-9 md-mt-50px" data-anime="{ "el": "childs", "translateX": [30, 0], "opacity": [0,1], "duration": 300, "delay": 0, "staggervalue": 100, "easing": "easeOutQuad" }">
|
|
<h1 class="text-dark-gray alt-font mb-50px fw-600 ls-minus-2px md-mb-25px outside-box-left-15 md-outside-box-left-0 word-break-normal md-w-80 sm-w-100">We create highly unique digital media experiences.</h1>
|
|
<p class="fs-20 fw-500 ls-minus-05px text-dark-gray mb-15px">Our team is committed to delivering measurable results and achieving tangible success.</p>
|
|
<p class="w-90 md-w-100 mb-35px">With a client base exceeding 10,000 our agency has established itself as a trusted and reliable partner in delivering exceptional services.</p>
|
|
<div class="progress-bar-style-02 mb-40px">
|
|
|
|
<div class="progress mb-15px border-radius-50px fw-600 fs-11 lh-12 text-white bg-white">
|
|
<div class="progress-bar bg-gradient-orange-transparent m-0" role="progressbar" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100" aria-label="business-growth">
|
|
<span class="progress-bar-percent text-orange fw-600">98%</span>
|
|
</div>
|
|
<div class="progress-bar-title text-uppercase">Business growth</div>
|
|
</div>
|
|
|
|
|
|
<div class="progress border-radius-50px fw-600 fs-11 lh-12 text-white bg-white">
|
|
<div class="progress-bar bg-gradient-blue-transparent m-0" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" aria-label="new-technology">
|
|
<span class="progress-bar-percent text-blue fw-600">85%</span>
|
|
</div>
|
|
<div class="progress-bar-title text-uppercase">New technology</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="pt-20px pb-20px ps-30px pe-30px xs-p-15px border border-color-extra-medium-gray border-radius-6px mb-15px icon-with-text-style-08 w-90 lg-w-100">
|
|
<div class="feature-box feature-box-left-icon-middle d-inline-flex align-middle">
|
|
<div class="feature-box-icon me-10px">
|
|
<i class="bi bi-people icon-very-medium text-dark-gray"></i>
|
|
</div>
|
|
<div class="feature-box-content">
|
|
<span class="alt-font fs-19 ls-minus-05px fw-600 text-dark-gray d-block lh-26">10k+ people trusting the agency.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="fs-13 mb-0">We are excited for our work and how it <span class="text-dark-gray text-decoration-line-bottom">positively</span> impacts clients.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="pb-0">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-lg-5 md-mb-20px sm-mb-0" data-anime="{ "el": "childs", "translateY": [15, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<h3 class="text-dark-gray fw-600 ls-minus-2px alt-font">We work with brands and businesses to ensure they shine.</h3>
|
|
</div>
|
|
<div class="col-lg-7" data-anime="{ "el": "childs", "translateY": [15, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<div class="row">
|
|
<div class="col-md-5">
|
|
<div class="fs-19 fw-600 text-dark-gray w-90 xl-w-100 sm-mb-10px">Successfully finished projects with creativity.</div>
|
|
</div>
|
|
<div class="col-md-7 last-paragraph-no-margin">
|
|
<p>We value each and every human life placed our hands constantly work towards meeting the expectations of our customers.</p>
|
|
</div>
|
|
</div>
|
|
<div class="separator-line-1px border-bottom border-color-extra-medium-gray mt-35px mb-35px"></div>
|
|
<div class="row">
|
|
<div class="col-md-5">
|
|
<div class="fs-19 fw-600 text-dark-gray w-90 xl-w-100 sm-mb-10px">Work together for better branding solutions.</div>
|
|
</div>
|
|
<div class="col-md-7 last-paragraph-no-margin">
|
|
<p>We value each and every human life placed our hands constantly work towards meeting the expectations of our customers.</p>
|
|
</div>
|
|
</div>
|
|
<div class="separator-line-1px border-bottom border-color-extra-medium-gray mt-35px mb-35px"></div>
|
|
<div class="row">
|
|
<div class="col-md-5">
|
|
<div class="fs-19 fw-600 text-dark-gray w-90 xl-w-100 sm-mb-10px">Committed to deliver unique digital media.</div>
|
|
</div>
|
|
<div class="col-md-7 last-paragraph-no-margin">
|
|
<p>We value each and every human life placed our hands constantly work towards meeting the expectations of our customers.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section>
|
|
<div class="container">
|
|
<div class="row row-cols-1 row-cols-lg-3 row-cols-sm-2" data-anime="{ "el": "childs", "translateY": [30, 0], "rotateX":[30, 0], "opacity": [0,1], "duration": 600, "delay":0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
|
|
<div class="col team-style-10 md-mb-30px">
|
|
<figure class="mb-0 position-relative overflow-hidden">
|
|
<img src="images/demo-branding-agency-team-01.jpg" alt />
|
|
<img src="images/demo-branding-agency-team-01-hover.jpg" class="hover-switch-image" alt />
|
|
<figcaption class="w-100 h-100 d-flex flex-wrap">
|
|
<div class="social-icon d-flex flex-column flex-shrink-1 mb-auto p-30px ms-auto">
|
|
<a href="https://www.twitter.com/" target="_blank" class="text-white bg-dark-gray"><i class="fa-brands fa-twitter icon-small"></i></a>
|
|
</div>
|
|
<div class="team-member-strip w-100 mt-auto d-flex align-items-center pt-15px pb-15px ps-30px pe-30px bg-white">
|
|
<span class="team-member-name fw-600 alt-font text-dark-gray fs-18 ls-minus-05px">Jeremy dupont</span>
|
|
<span class="member-designation fs-15 lh-20 ms-auto alt-font flex-shrink-0">Designer</span>
|
|
</div>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
|
|
|
|
<div class="col team-style-10 md-mb-30px">
|
|
<figure class="mb-0 position-relative overflow-hidden">
|
|
<img src="images/demo-branding-agency-team-02.jpg" alt />
|
|
<img src="images/demo-branding-agency-team-02-hover.jpg" class="hover-switch-image" alt />
|
|
<figcaption class="w-100 h-100 d-flex flex-wrap">
|
|
<div class="social-icon d-flex flex-column flex-shrink-1 mb-auto p-30px ms-auto">
|
|
<a href="https://www.facebook.com/" target="_blank" class="text-white bg-dark-gray"><i class="fa-brands fa-facebook-f icon-small"></i></a>
|
|
</div>
|
|
<div class="team-member-strip w-100 mt-auto d-flex align-items-center pt-15px pb-15px ps-30px pe-30px bg-white">
|
|
<span class="team-member-name fw-600 alt-font text-dark-gray fs-18 ls-minus-05px">Matthew taylor</span>
|
|
<span class="member-designation fs-15 lh-20 ms-auto alt-font flex-shrink-0">Writer</span>
|
|
</div>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
|
|
|
|
<div class="col team-style-10">
|
|
<figure class="mb-0 position-relative overflow-hidden">
|
|
<img src="images/demo-branding-agency-team-04.jpg" alt />
|
|
<img src="images/demo-branding-agency-team-04-hover.jpg" class="hover-switch-image" alt />
|
|
<figcaption class="w-100 h-100 d-flex flex-wrap">
|
|
<div class="social-icon d-flex flex-column flex-shrink-1 mb-auto p-30px ms-auto">
|
|
<a href="https://www.instagram.com/" target="_blank" class="text-white bg-dark-gray"><i class="fa-brands fa-instagram icon-small"></i></a>
|
|
</div>
|
|
<div class="team-member-strip w-100 mt-auto d-flex align-items-center pt-15px pb-15px ps-30px pe-30px bg-white">
|
|
<span class="team-member-name fw-600 alt-font text-dark-gray fs-18 ls-minus-05px">Jessica dover</span>
|
|
<span class="member-designation fs-15 lh-20 ms-auto alt-font flex-shrink-0">Designer</span>
|
|
</div>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row mt-5">
|
|
<div class="col-12 text-center" data-anime="{ "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<i class="bi bi-envelope text-dark-gray d-inline-block align-middle icon-extra-medium me-5px"></i>
|
|
<div class="fs-18 text-dark-gray d-inline-block align-middle fw-500">Save your precious time and effort spent for finding a solution. <a href="demo-branding-agency-contact.html" class="text-dark-gray text-decoration-line-bottom fw-600">Contact us now</a></div>
|
|
</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#ee87808881ae8a81838f8780c08d8183"><span class="__cf_email__" data-cfemail="771e1911183713181a161e195914181a">[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-about.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> |