295 lines
18 KiB
HTML
295 lines
18 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#046d6a626b44606b69656d6a2a676b69" 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": ["contact us"], "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're here to here answer & question you may have.</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-contact-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" data-anime="{ "el": "childs", "translateX": [30, 0], "opacity": [0,1], "duration": 600, "delay":0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<div class="col-md-4 sm-mb-30px">
|
|
<span class="fs-30 alt-font ls-minus-05px fw-700 text-dark-gray">London</span>
|
|
<p class="w-70 mb-10px lg-w-90">301 Sondanella, Eden walk, Orchard view, London, UK</p>
|
|
<div class="separator-line-1px bg-extra-medium-gray w-70 mt-20px mb-20px md-w-100"></div>
|
|
<div class="d-block">
|
|
<span class="text-dark-gray fw-600">E:</span>
|
|
<a href="cdn-cgi/l/email-protection.html#bbd2d5ddd4fbc2d4cec9dfd4d6dad2d595d8d4d6"><span class="__cf_email__" data-cfemail="2a43444c456a53455f584e45474b434404494547">[email protected]</span></a>
|
|
</div>
|
|
<div class="d-block mb-5px">
|
|
<span class="text-dark-gray fw-600">T:</span>
|
|
<a href="tel:12345678910">123 456 7890</a>
|
|
</div>
|
|
<a href="https://maps.google.com/maps?ll=-37.805688,144.962312&z=17&t=m&hl=en-US&gl=IN&mapclient=embed&cid=13153204942596594449" target="_blank" class="fs-14 text-dark-gray text-uppercase fw-600">
|
|
<span class><i class="feather icon-feather-map-pin fs-14 me-5px"></i>View on google map</span>
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4 sm-mb-30px">
|
|
<span class="fs-30 alt-font ls-minus-05px fw-700 text-dark-gray">New York</span>
|
|
<p class="w-70 mb-10px lg-w-90 md-w-100">27 Eden walk eden centre, Orchard view, New York, USA</p>
|
|
<div class="separator-line-1px bg-extra-medium-gray w-70 mt-20px mb-20px md-w-100"></div>
|
|
<div class="d-block">
|
|
<span class="text-dark-gray fw-600">E:</span>
|
|
<a href="cdn-cgi/l/email-protection.html#157c7b737a556c7a6067717a78747c7b3b767a78"><span class="__cf_email__" data-cfemail="6f060109002f16001a1d0b00020e0601410c0002">[email protected]</span></a>
|
|
</div>
|
|
<div class="d-block mb-5px">
|
|
<span class="text-dark-gray fw-600">T:</span>
|
|
<a href="tel:12345678910">123 456 7890</a>
|
|
</div>
|
|
<a href="https://maps.google.com/maps?ll=-37.805688,144.962312&z=17&t=m&hl=en-US&gl=IN&mapclient=embed&cid=13153204942596594449" target="_blank" class="fs-14 text-dark-gray text-uppercase fw-600">
|
|
<span class><i class="feather icon-feather-map-pin fs-14 me-5px"></i>View on google map</span>
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<span class="fs-30 alt-font ls-minus-05px fw-700 text-dark-gray">Dubai</span>
|
|
<p class="w-70 mb-10px lg-w-80 md-w-100">701 Sondanella, 24th Floor, Valley road, Dubai, Emirates</p>
|
|
<div class="separator-line-1px bg-extra-medium-gray w-70 mt-20px mb-20px md-w-100"></div>
|
|
<div class="d-block">
|
|
<span class="text-dark-gray fw-600">E:</span>
|
|
<a href="cdn-cgi/l/email-protection.html#abc2c5cdc4ebd2c4ded9cfc4c6cac2c585c8c4c6"><span class="__cf_email__" data-cfemail="721b1c141d320b1d0700161d1f131b1c5c111d1f">[email protected]</span></a>
|
|
</div>
|
|
<div class="d-block mb-5px">
|
|
<span class="text-dark-gray fw-600">T:</span>
|
|
<a href="tel:12345678910">123 456 7890</a>
|
|
</div>
|
|
<a href="https://maps.google.com/maps?ll=-37.805688,144.962312&z=17&t=m&hl=en-US&gl=IN&mapclient=embed&cid=13153204942596594449" target="_blank" class="fs-14 text-dark-gray text-uppercase fw-600">
|
|
<span class><i class="feather icon-feather-map-pin fs-14 me-5px"></i>View on google map</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="p-0">
|
|
<div class="container-fluid p-0">
|
|
<div class="row g-0">
|
|
<div class="col-xl-6 col-lg-7 cover-background md-h-500px sm-h-400px md-mb-50px" style="background-image:url('images/demo-branding-agency-contact-01.jpg')">
|
|
<div class="position-absolute text-center blur-box right-30px bottom-30px sm-right-15px sm-bottom-15px pt-35px pb-35px ps-45px pe-45px sm-p-20px bg-white-transparent counter-style-04 d-flex align-items-center border-radius-6px">
|
|
<h2 class="vertical-counter d-inline-flex alt-font text-dark-gray fw-700 mb-0 ls-minus-2px" data-text="+" data-to="353"></h2>
|
|
<span class="w-180px text-dark-gray text-start fw-500 lh-24 ms-15px sm-ms-10px">Very satisfied clients around the worldwide.</span>
|
|
</div>
|
|
</div>
|
|
<div class="col-xxl-4 col-xl-5 col-lg-5 position-relative">
|
|
<div class="contact-form-style-03 position-relative ps-15 pe-15 xxl-ps-10 xxl-pe-10 lg-ps-5 lg-pe-5 overflow-hidden last-paragraph-no-margin" 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">Get in touch with us</span>
|
|
</div>
|
|
<h2 class="text-dark-gray alt-font fw-600 w-90 xxl-w-100 ls-minus-2px">We'd love to hear from you!</h2>
|
|
<form action="email-templates/contact-form.php" method="post">
|
|
<div class="position-relative form-group mb-20px">
|
|
<span class="form-icon"><i class="bi bi-person icon-extra-medium text-dark-gray"></i></span>
|
|
<input class="ps-0 border-radius-0px border-color-extra-medium-gray form-control required" type="text" name="name" placeholder="Your name*" />
|
|
</div>
|
|
<div class="position-relative form-group mb-20px">
|
|
<span class="form-icon"><i class="bi bi-envelope icon-extra-medium text-dark-gray"></i></span>
|
|
<input class="ps-0 border-radius-0px border-bottom border-color-extra-medium-gray form-control required" type="email" name="email" placeholder="Your email address*" />
|
|
</div>
|
|
<div class="position-relative form-group form-textarea mt-15px mb-0">
|
|
<textarea class="ps-0 border-radius-0px border-bottom border-color-extra-medium-gray form-control" name="comment" placeholder="Your message" rows="3"></textarea>
|
|
<span class="form-icon"><i class="bi bi-chat-square-dots icon-extra-medium text-dark-gray"></i></span>
|
|
<input type="hidden" name="redirect" value>
|
|
<button class="btn btn-medium btn-dark-gray btn-round-edge btn-box-shadow mb-20px mt-25px submit w-100 left-icon" type="submit"><i class="fa-regular fa-envelope"></i>Send message</button>
|
|
<p class="fs-14 lh-24 w-100 mb-0 text-center text-lg-start">We are committed to protecting your privacy. We will never collect information about you without your explicit consent.</p>
|
|
<div class="form-results mt-20px d-none"></div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section>
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-12 col-md-12 col-sm-12 text-center elements-social social-icon-style-06">
|
|
<div class="fs-22 mb-30px text-dark-gray">Connect with <span class="fw-600">social media</span></div>
|
|
<ul class="extra-large-icon fw-600" data-anime="{ "el": "childs", "translateX": [10, 0], "opacity": [0,1], "duration": 300, "delay": 100, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|
<li><a class="facebook" href="https://www.facebook.com" target="_blank"><span class="brand-label text-dark-gray">Fb</span><span class="brand-icon fa-brands fa-facebook-f"></span></a></li>
|
|
<li><a class="dribbble" href="http://www.dribbble.com" target="_blank"><span class="brand-label text-dark-gray">Db</span><span class="brand-icon fa-brands fa-dribbble"></span></a></li>
|
|
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><span class="brand-label text-dark-gray">Tw</span><span class="brand-icon fa-brands fa-twitter"></span></a></li>
|
|
<li><a class="behance" href="http://www.behance.com" target="_blank"><span class="brand-label text-dark-gray">Be</span><span class="brand-icon fa-brands fa-behance"></span></a></li>
|
|
<li><a class="pinterest" href="https://in.pinterest.com" target="_blank"><span class="brand-label text-dark-gray">Pt</span><span class="brand-icon fa-brands fa-pinterest-p"></span></a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="p-0">
|
|
<div class="container-fluid p-0">
|
|
<div class="row g-0">
|
|
<div class="col-md-12">
|
|
<div id="map" class="map h-650px md-h-500px sm-h-400px" data-map-options="{ "lat": -37.805688, "lng": 144.962312, "style": "Silver", "marker": { "type": "HTML", "color": "#232323" }, "popup": { "defaultOpen": true, "html": "<div class=infowindow><strong class=\"mb-3 d-inline-block alt-font\">Crafto Branding</strong><p class=\"alt-font\">16122 Collins street, Melbourne, Australia</p></div><div class=\"google-maps-link alt-font\"> <a aria-label=\"View larger map\" target=\"_blank\" jstcache=\"31\" href=\"https://maps.google.com/maps?ll=-37.805688,144.962312&z=17&t=m&hl=en-US&gl=IN&mapclient=embed&cid=13153204942596594449\" jsaction=\"mouseup:placeCard.largerMap\">VIEW LARGER MAP</a></div>" } }"></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#432a2d252c03272c2e222a2d6d202c2e"><span class="__cf_email__" data-cfemail="f79e999198b793989a969e99d994989a">[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-contact.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 async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCA56KqSJ11nQUw_tXgXyNMiPmQeM7EaSA&callback=initMap"></script>
|
|
<script type="text/javascript" src="js/main.js"></script>
|
|
</body>
|
|
</html> |