344 lines
20 KiB
HTML
344 lines
20 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/marketing/marketing.css" />
|
|
</head>
|
|
<body data-mobile-nav-style="classic" class="custom-cursor">
|
|
|
|
<div class="cursor-page-inner">
|
|
<div class="circle-cursor circle-cursor-inner"></div>
|
|
<div class="circle-cursor circle-cursor-outer"></div>
|
|
</div>
|
|
|
|
|
|
<header>
|
|
|
|
<nav class="navbar navbar-expand-lg header-light header-transparent bg-transparent disable-fixed">
|
|
<div class="container-fluid">
|
|
<div class="col-auto col-lg-2 me-lg-0 me-auto">
|
|
<a class="navbar-brand" href="demo-marketing.html">
|
|
<img src="images/demo-marketing-logo-black.png" data-at2x="images/demo-marketing-logo-black@2x.png" alt class="default-logo">
|
|
<img src="images/demo-marketing-logo-black.png" data-at2x="images/demo-marketing-logo-black@2x.png" alt class="alt-logo">
|
|
<img src="images/demo-marketing-logo-black.png" data-at2x="images/demo-marketing-logo-black@2x.png" alt class="mobile-logo">
|
|
</a>
|
|
</div>
|
|
<div class="col-auto 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" id="navbarNav">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item"><a href="demo-marketing.html" class="nav-link">Home</a></li>
|
|
<li class="nav-item"><a href="demo-marketing-about.html" class="nav-link">About</a></li>
|
|
<li class="nav-item dropdown dropdown-with-icon">
|
|
<a href="demo-marketing-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-marketing-services-details.html"><i class="feather icon-feather-users"></i>
|
|
<div class="submenu-icon-content">
|
|
<span>Engaging audiences</span>
|
|
<p>Lorem ipsum simply dummy text</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="demo-marketing-services-details.html"><i class="feather icon-feather-send"></i>
|
|
<div class="submenu-icon-content">
|
|
<span>Marketing research</span>
|
|
<p>Lorem ipsum simply dummy text</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="demo-marketing-services-details.html"><i class="feather icon-feather-briefcase"></i>
|
|
<div class="submenu-icon-content">
|
|
<span>Sales development</span>
|
|
<p>Lorem ipsum simply dummy text</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="demo-marketing-services-details.html"><i class="feather icon-feather-box"></i>
|
|
<div class="submenu-icon-content">
|
|
<span>Marketing campaigns</span>
|
|
<p>Lorem ipsum simply dummy text</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="demo-marketing-services-details.html"><i class="feather icon-feather-share-2"></i>
|
|
<div class="submenu-icon-content">
|
|
<span>Social media analysis</span>
|
|
<p>Lorem ipsum simply dummy text</p>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="nav-item"><a href="demo-marketing-case-studies.html" class="nav-link">Case studies</a></li>
|
|
<li class="nav-item"><a href="demo-marketing-pricing.html" class="nav-link">Pricing</a></li>
|
|
<li class="nav-item"><a href="demo-marketing-team.html" class="nav-link">Team</a></li>
|
|
<li class="nav-item"><a href="demo-marketing-contact.html" class="nav-link">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto col-lg-2 text-end">
|
|
<div class="header-icon">
|
|
<div class="header-social-icon icon">
|
|
<a href="https://www.facebook.com" target="_blank"><i class="fa-brands fa-facebook-f"></i></a>
|
|
<a href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a>
|
|
<a href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
</header>
|
|
|
|
|
|
<section class="cover-background page-title-big-typography ipad-top-space-margin xs-py-0" style="background-image: url('images/demo-marketing-about-title-bg.jpg')" data-anime="{ "opacity": [0, 1], "easing": "easeOutQuad" }">
|
|
<div class="container">
|
|
<div class="row align-items-center extra-small-screen">
|
|
<div class="col-9 col-lg-5 col-sm-6 position-relative page-title-extra-small" data-anime="{ "el": "childs", "opacity": [0, 1], "translateX": [-50, 0], "duration": 800, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<h1 class="mb-20px text-base-color fw-500 ls-minus-05px">We help grow business</h1>
|
|
<h2 class=" fw-700 text-dark-gray mb-0 ls-minus-2px">Marketing campaigns</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="overlap-height position-relative">
|
|
<div class="container overlap-gap-section">
|
|
<div class="row">
|
|
<div class="col-lg-4 pe-6 order-2 order-lg-1 lg-pe-4 md-pe-15px" data-anime="{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<div class="position-sticky top-80px lg-top-40px">
|
|
<div class="mb-30px">
|
|
<ul class="p-0 m-0 list-style-02 fs-18 fw-500">
|
|
<li class="pb-15px mb-15px border-bottom border-color-extra-medium-gray"><a href="demo-marketing-services-details.html" class="text-dark-gray text-base-color-hover">Engaging audiences</a><i class="feather icon-feather-users fs-22 ms-auto text-dark-gray"></i></li>
|
|
<li class="pb-15px mb-15px border-bottom border-color-extra-medium-gray"><a href="demo-marketing-services-details.html" class="text-base-color text-base-color-hover">Marketing research</a><i class="feather icon-feather-send fs-22 ms-auto text-dark-gray"></i></li>
|
|
<li class="pb-15px mb-15px border-bottom border-color-extra-medium-gray"><a href="demo-marketing-services-details.html" class="text-dark-gray text-base-color-hover">Sales development</a><i class="feather icon-feather-briefcase fs-22 ms-auto text-dark-gray"></i></li>
|
|
<li class="pb-15px"><a href="demo-marketing-services-details.html" class="text-dark-gray text-base-color-hover">Marketing campaigns</a><i class="feather icon-feather-box fs-22 ms-auto text-dark-gray"></i></li>
|
|
</ul>
|
|
</div>
|
|
<div class="ps-14 pe-14 pt-10 pb-10 lg-p-25px bg-dark-gray border-radius-6px text-center text-lg-start">
|
|
<span class="fs-20 fw-500 text-white mb-10px d-inline-block">Have questions?</span>
|
|
<p>We unleash your business potential by maximize the business innovation.</p>
|
|
<a href="cdn-cgi/l/email-protection.html#71181f171e31151e1c10181f5f121e1c" class="btn btn-extra-large btn-base-color btn-hover-animation-switch btn-round-edge btn-box-shadow d-block btn-icon-left">
|
|
<span>
|
|
<span class="btn-text"><span class="__cf_email__" data-cfemail="355c5b535a75515a58545c5b1b565a58">[email protected]</span></span>
|
|
<span class="btn-icon"><i class="feather icon-feather-mail"></i></span>
|
|
<span class="btn-icon"><i class="feather icon-feather-mail"></i></span>
|
|
</span>
|
|
</a>
|
|
<div class="d-inline-block text-white mt-15px text-center w-100"><i class="bi bi-telephone-outbound me-10px align-middle"></i><a href="tel:+11234567890">+1 123 456 7890</a></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-8 order-1 order-lg-2 md-mb-50px" data-anime="{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|
<h5 class="fw-700 text-dark-gray ls-minus-1px mb-20px">Successful marketing campaign</h5>
|
|
<p>Creating an entire campaign is a big task, but the process is pretty straightforward. Planning your campaign is just as important as <span class="text-dark-gray text-decoration-line-bottom fw-500">designing the fun stuff,</span> such as the creative advertisements and conversion assets, so take the time to do this important step.</p>
|
|
<div class="bg-very-light-gray p-6 mt-6 mb-9 border-radius-6px">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-6 pe-5 lg-pe-15px md-mb-20px">
|
|
<span class="fs-18 fw-600 text-dark-gray ls-minus-05px mb-20px d-block">Types of marketing campaigns</span>
|
|
<ul class="p-0 m-0 list-style-02 text-dark-gray">
|
|
<li class="pb-10px mb-10px border-bottom border-color-extra-medium-gray"><i class="fa-solid fa-check fs-15 me-10px"></i>Product marketing campaign</li>
|
|
<li class="pb-10px mb-10px border-bottom border-color-extra-medium-gray"><i class="fa-solid fa-check fs-15 me-10px"></i>Brand development campaign</li>
|
|
<li class="pb-10px mb-10px border-bottom border-color-extra-medium-gray"><i class="fa-solid fa-check fs-15 me-10px"></i>Email marketing campaign</li>
|
|
<li class="pb-10px"><i class="fa-solid fa-check fs-15 me-10px"></i>Content marketing campaign</li>
|
|
</ul>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<img src="images/demo-marketing-services-details.jpg" alt />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h5 class="fw-700 text-dark-gray ls-minus-1px mb-30px sm-mb-20px">Strategies for marketing campaign</h5>
|
|
<p><span class="fw-600 text-dark-gray text-decoration-line-bottom">Analyze your client's audiences</span> - Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
|
|
<div class="divider-style-03 divider-style-03-01 border-color-extra-medium-gray mb-25px mt-25px"></div>
|
|
<p><span class="fw-600 text-dark-gray text-decoration-line-bottom">Coordinate with other agencies</span> - Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation aliquip laboris nisi.</p>
|
|
<div class="divider-style-03 divider-style-03-01 border-color-extra-medium-gray mb-25px mt-25px"></div>
|
|
<p><span class="fw-600 text-dark-gray text-decoration-line-bottom">Pull social data for case studies</span> - Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
|
|
<div class="bg-yellow p-35px border-radius-6px mt-9">
|
|
<div class="row align-items-center justify-content-center justify-content-lg-start">
|
|
<div class="col-5 col-sm-3 sm-mb-20px text-center"><img src="images/demo-seo-agency-banner-bottom.png" alt /></div>
|
|
<div class="col-md-9 text-center text-md-start ps-3">
|
|
<div class="fs-18 lh-26 mb-15px w-90 sm-w-100 mx-auto mx-md-0 text-dark-gray">Even when you are marketing to your entire audience or customer base, you are still <span class="text-decoration-line-bottom fw-600">simply speaking</span> to a single human at any given time.</div>
|
|
<span class="text-dark-gray fs-18"><span class="fw-600">Jacob vaynerchuk,</span> marketing analyst</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h5 class="fw-700 text-dark-gray ls-minus-1px mb-40px sm-mb-30px mt-9">Get in touch with us</h5>
|
|
<div class="row row-cols-md-1 justify-content-center">
|
|
<div class="col-12">
|
|
<form action="email-templates/contact-form.php" method="post" class="row contact-form-style-02">
|
|
<div class="col-md-6 mb-30px">
|
|
<input class="input-name border-radius-4px form-control required" type="text" name="name" placeholder="Your name*" />
|
|
</div>
|
|
<div class="col-md-6 mb-30px">
|
|
<input class="border-radius-4px form-control required" type="email" name="email" placeholder="Your email address*" />
|
|
</div>
|
|
<div class="col-md-6 mb-30px">
|
|
<input class="border-radius-4px form-control" type="tel" name="phone" placeholder="Your phone" />
|
|
</div>
|
|
<div class="col-md-6 mb-30px">
|
|
<div class="select">
|
|
<select class="form-control" name="select">
|
|
<option value>Select services</option>
|
|
<option value="Engaging audiences">Engaging audiences</option>
|
|
<option value="Marketing research">Marketing research</option>
|
|
<option value="Sales development">Sales development</option>
|
|
<option value="Marketing campaigns">Marketing campaigns</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12 mb-30px">
|
|
<textarea class="border-radius-4px form-control" cols="40" rows="4" name="comment" placeholder="Your message"></textarea>
|
|
</div>
|
|
<div class="col-xl-6 col-md-8">
|
|
<p class="mb-0 fs-13 lh-24 text-center text-md-start">We are committed to protecting your privacy. We will never collect information about you without your explicit consent.</p>
|
|
</div>
|
|
<div class="col-xl-6 col-md-4 text-center text-md-end sm-mt-20px">
|
|
<input type="hidden" name="redirect" value>
|
|
<button class="btn btn-dark-gray btn-medium btn-round-edge btn-box-shadow submit" type="submit">Send message</button>
|
|
</div>
|
|
<div class="col-12">
|
|
<div class="form-results mt-20px d-none"></div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<footer class="bg-dark-gray background-position-center-top" style="background-image: url('images/demo-marketing-footer-dot.svg')">
|
|
<div class="container overlap-section">
|
|
<div class="row g-0 justify-content-center align-items-center bg-base-color border-radius-6px ps-7 pe-7 pt-4 pb-4 lg-p-30px sm-p-20px mb-7">
|
|
<div class="col-lg-6 col-md-9 text-center text-lg-start md-mb-20px">
|
|
<h4 class="text-white fw-600 mb-0 ls-minus-1px">Let's talk about how we can transform your business!</h4>
|
|
</div>
|
|
<div class="col-auto col-lg-5 icon-with-text-style-08 offset-lg-1">
|
|
<div class="feature-box feature-box-left-icon-middle overflow-hidden">
|
|
<div class="feature-box-icon feature-box-icon-rounded w-80px h-80px rounded-circle bg-dark-gray-transparent-light me-25px lg-me-20px">
|
|
<i class="bi bi-envelope icon-very-medium text-white"></i>
|
|
</div>
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|
<span class="text-white fs-18 lh-22 mb-5px d-block">Interested in working?</span>
|
|
<h6 class="d-inline-block fw-600 mb-0"><a href="cdn-cgi/l/email-protection.html#0b636e6767644b6f64666a626525686466" class="text-dark-gray text-decoration-line-bottom-medium text-white-hover"><span class="__cf_email__" data-cfemail="94fcf1f8f8fbd4f0fbf9f5fdfabaf7fbf9">[email protected]</span></a></h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container footer-dark text-center text-sm-start">
|
|
<div class="row mb-5 sm-mb-30px">
|
|
|
|
<div class="col-lg-3 col-md-4 col-sm-6 d-flex flex-column last-paragraph-no-margin md-mb-35px">
|
|
<a href="demo-marketing.html" class="footer-logo mb-25px xs-mb-20px d-inline-block">
|
|
<img src="images/demo-marketing-logo-white.png" data-at2x="images/demo-marketing-logo-white@2x.png" alt>
|
|
</a>
|
|
<div class="elements-social social-text-style-01 mt-auto">
|
|
<ul class="small-icon light fw-500">
|
|
<li><a class="facebook" href="https://www.facebook.com/" target="_blank">Fb.</a></li>
|
|
<li><a class="instagram" href="https://www.instagram.com" target="_blank">Ig.</a></li>
|
|
<li><a class="twitter" href="https://www.twitter.com" target="_blank">Tw.</a></li>
|
|
<li><a class="behance" href="http://www.behance.com/" target="_blank">Be.</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-3 col-md-4 col-sm-6 last-paragraph-no-margin md-mb-35px">
|
|
<span class="fs-16 fw-500 d-block text-white mb-5px">Marketo - London</span>
|
|
<p class="w-85 lg-w-95 xs-w-60 xs-mx-auto mb-10px">401 Broadway, 24th Floor, Orchard View, London, UK</p>
|
|
<div class="d-inline-block"><i class="bi bi-telephone-outbound me-10px text-white align-middle"></i><a href="tel:1234567890">123 456 7890</a><div class="bg-white-transparent-very-light fw-500 text-white lh-22 text-uppercase border-radius-30px ps-10px pe-10px fs-10 ms-10px d-inline-block align-middle">Free</div></div>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-3 col-md-4 col-sm-6 last-paragraph-no-margin xs-mb-35px">
|
|
<span class="fs-16 fw-500 d-block text-white mb-5px">Marketo - France</span>
|
|
<p class="w-90 lg-w-95 xs-w-60 xs-mx-auto mb-10px">27 Eden Walk Eden Centre, Orchard View, Paris, France</p>
|
|
<div class="d-inline-block"><i class="bi bi-telephone-outbound me-10px text-white align-middle"></i><a href="tel:1234567890">123 456 7890</a></div>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-3 col-md-12 col-sm-6 text-md-center text-lg-start">
|
|
<span class="fs-16 fw-500 d-block text-white mb-20px">Subscribe our newsletter</span>
|
|
<div class="d-inline-block w-100 newsletter-style-02 position-relative mb-15px">
|
|
<form action="email-templates/subscribe-newsletter.php" method="post" class="position-relative w-100">
|
|
<input class="input-small bg-dark-gray border-color-transparent-white-light w-100 form-control required" type="email" name="email" placeholder="Enter your email...">
|
|
<input type="hidden" name="redirect" value>
|
|
<button type="submit" class="btn pe-20px text-white fs-13 fw-500 lg-ps-15px lg-pe-15px submit" aria-label="submit">Submit <i class="feather icon-feather-arrow-right submit"></i></button>
|
|
<div class="form-results border-radius-4px pt-5px pb-5px ps-15px pe-15px fs-14 lh-22 mt-10px w-100 text-center position-absolute d-none"></div>
|
|
</form>
|
|
</div>
|
|
<div class="d-flex align-items-center justify-content-center justify-content-md-center justify-content-sm-start justify-content-lg-start">
|
|
<div class="d-inline-block"><i class="line-icon-Handshake me-10px text-white align-middle icon-extra-medium"></i>Protecting your privacy</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="row align-items-center footer-bottom border-top border-color-transparent-white-light pt-30px g-0">
|
|
|
|
<div class="col-lg-8 ps-0 text-center text-lg-start md-mb-10px">
|
|
<ul class="footer-navbar fs-15 lh-normal">
|
|
<li class="nav-item active"><a href="demo-marketing.html" class="nav-link ps-0">Home</a></li>
|
|
<li class="nav-item"><a href="demo-marketing-about.html" class="nav-link">About</a></li>
|
|
<li class="nav-item"><a href="demo-marketing-services.html" class="nav-link">Services</a></li>
|
|
<li class="nav-item"><a href="demo-marketing-case-studies.html" class="nav-link">Case studies</a></li>
|
|
<li class="nav-item"><a href="demo-marketing-pricing.html" class="nav-link">Pricing</a></li>
|
|
<li class="nav-item"><a href="demo-marketing-team.html" class="nav-link">Team</a></li>
|
|
<li class="nav-item"><a href="demo-marketing-contact.html" class="nav-link">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
|
|
<div class="col-lg-4 last-paragraph-no-margin text-center text-lg-end">
|
|
<p class="fs-15">© 2024 Crafto is Powered by <a href="https://www.themezaa.com/" target="_blank" class="text-white text-decoration-line-bottom">ThemeZaa</a></p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
<div class="scroll-progress d-none d-xxl-block">
|
|
<a href="demo-marketing-services-details.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> |