184 lines
10 KiB
HTML
184 lines
10 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/minimal-portfolio/minimal-portfolio.css" />
|
||
|
|
</head>
|
||
|
|
<body class="left-modern-menu 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 class="left-modern-header" id="navbar-menu">
|
||
|
|
<div class="left-modern-sidebar header-light bg-white">
|
||
|
|
<a class="navbar-brand section-link" href="demo-minimal-portfolio.html">
|
||
|
|
<img src="images/demo-minimal-portfolio-logo-black.png" data-at2x="images/demo-minimal-portfolio-logo-black@2x.png" alt class="default-logo">
|
||
|
|
<img src="images/demo-minimal-portfolio-logo-black.png" data-at2x="images/demo-minimal-portfolio-logo-black@2x.png" alt class="alt-logo">
|
||
|
|
<img src="images/demo-minimal-portfolio-mobile-logo-black@2x.png" data-at2x="images/demo-minimal-portfolio-mobile-logo-black@2x.png" alt class="mobile-logo">
|
||
|
|
</a>
|
||
|
|
<div class="toggle-icon">
|
||
|
|
<div class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
|
||
|
|
<span class="navbar-toggler-line"></span>
|
||
|
|
<span class="navbar-toggler-line"></span>
|
||
|
|
<span class="navbar-toggler-line"></span>
|
||
|
|
<span class="navbar-toggler-line"></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="vertical-title">
|
||
|
|
<div class="title elements-social social-icon-style-10">
|
||
|
|
<ul class="extra-small-icon dark fw-600">
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<nav class="modern-sidebar-nav header-light bg-white">
|
||
|
|
<div class="h-100">
|
||
|
|
<div class="modern-side-menu" data-scroll-options="{ "theme": "light" }">
|
||
|
|
<ul class="menu-item-list alt-font fw-600 ls-minus-1px">
|
||
|
|
<li class="menu-item">
|
||
|
|
<a href="demo-minimal-portfolio.html" class="nav-link">Home</a>
|
||
|
|
</li>
|
||
|
|
<li class="menu-item">
|
||
|
|
<a href="demo-minimal-portfolio-about.html" class="nav-link">About</a>
|
||
|
|
</li>
|
||
|
|
<li class="menu-item">
|
||
|
|
<a href="demo-minimal-portfolio-expertise.html" class="nav-link">Expertise</a>
|
||
|
|
</li>
|
||
|
|
<li class="menu-item">
|
||
|
|
<a href="demo-minimal-portfolio-contact.html" class="nav-link">Contact</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<div class="mt-30">
|
||
|
|
<span class="d-block lh-24 fs-15 w-95">Looking for collaboration for your next creative project?</span>
|
||
|
|
<div class="mt-5px">
|
||
|
|
<i class="bi bi-envelope me-5px align-middle"></i><a href="cdn-cgi/l/email-protection.html#f8909d949497b89c9795999196d69b9795" class="text-dark-gray-hover fw-600 align-middle"><span class="__cf_email__" data-cfemail="f69e939a9a99b692999b979f98d895999b">[email protected]</span></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
|
||
|
|
<section class="bg-light-gray py-0 overflow-hidden position-relative ipad-top-space" style="background-image: url('images/demo-minimal-portfolio-pattern.svg')">
|
||
|
|
<div class="container-fluid h-100 p-0">
|
||
|
|
<div class="row g-0 h-100 flex-column-reverse">
|
||
|
|
<div class="col-lg-6 pt-6 pb-6 ps-8 pe-8 xxl-ps-4 xxl-pe-6 lg-ps-4 lg-pe-8 md-ps-15px md-pe-15px">
|
||
|
|
<div class="h-100">
|
||
|
|
<div class="row mb-13 xl-mb-70px sm-mb-50px">
|
||
|
|
<div class="col-12">
|
||
|
|
<h1 class="fs-130 xxl-fs-110 lg-fs-80 ls-minus-7px md-ls-minus-2px mb-20px d-block">Contact</h1>
|
||
|
|
</div>
|
||
|
|
<div class="col-xl-10 offset-xl-2 col-lg-12">
|
||
|
|
<span class="fs-150 xxl-fs-110 lg-fs-80 lh-100 lg-lh-60 fw-700 ls-minus-5px md-ls-minus-2px mb-8 md-outside-box-right-7 xs-outside-box-right-0 md-mb-30px d-block">Mark.</span>
|
||
|
|
</div>
|
||
|
|
<div class="col-xxl-9 offset-xxl-2 last-paragraph-no-margin">
|
||
|
|
<p class="md-w-65 sm-w-80 xs-w-100">We're dedicated to providing you with the information you need. Reach out to us with any inquiries, and we'll be more than happy to assist you in getting your project off the ground.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row mb-15">
|
||
|
|
<div class="col-12">
|
||
|
|
|
||
|
|
<form action="email-templates/contact-form.php" method="post" class="contact-form-style-07">
|
||
|
|
<div class="position-relative form-group mb-30px d-flex flex-xxl-row flex-lg-column flex-md-row flex-column">
|
||
|
|
<label for="exampleInputEmail1" class="form-label fs-40 ls-minus-1px text-dark-gray mb-0 me-30px">My name is</label>
|
||
|
|
<div class="position-relative col">
|
||
|
|
<span class="form-icon"><i class="bi bi-person icon-small"></i></span>
|
||
|
|
<input class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control required" id="exampleInputEmail1" type="text" name="name" placeholder="Enter your name here*" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="position-relative form-group mb-30px d-flex flex-xxl-row flex-lg-column flex-md-row flex-column">
|
||
|
|
<label for="exampleInputEmail1" class="form-label fs-40 ls-minus-1px text-dark-gray mb-0 me-30px">Here is my email</label>
|
||
|
|
<div class="position-relative col">
|
||
|
|
<span class="form-icon"><i class="bi bi-envelope icon-small"></i></span>
|
||
|
|
<input class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control required" id="exampleInputEmail2" type="email" name="email" placeholder="Enter your email here*" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="position-relative form-group form-textarea d-flex flex-xxl-row flex-lg-column flex-md-row flex-column">
|
||
|
|
<label for="exampleInputEmail1" class="form-label fs-40 ls-minus-1px text-dark-gray mb-0 me-30px">I need a</label>
|
||
|
|
<div class="position-relative col">
|
||
|
|
<textarea class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control" name="comment" placeholder="Enter your project details here" rows="3"></textarea>
|
||
|
|
<span class="form-icon"><i class="bi bi-chat-square-dots icon-small"></i></span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row mt-35px align-items-center">
|
||
|
|
<div class="col-xl-7 col-lg-12 col-sm-7 lg-mb-30px md-mb-0">
|
||
|
|
<p class="mb-0 fs-14 lh-22 text-center text-sm-start">We are committed to protecting your privacy. We will never collect information about you.</p>
|
||
|
|
</div>
|
||
|
|
<div class="col-xl-5 col-lg-12 col-sm-5 text-center text-sm-end text-lg-start text-xl-end xs-mt-25px">
|
||
|
|
<input id="exampleInputEmail3" type="hidden" name="redirect" value>
|
||
|
|
<button class="btn btn-dark-gray btn-small btn-box-shadow submit" type="submit">Send message</button>
|
||
|
|
</div>
|
||
|
|
<div class="col-12">
|
||
|
|
<div class="form-results d-none mt-20px mb-0"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row text-lg-start text-center">
|
||
|
|
<div class="col-12">
|
||
|
|
<span class="fs-50 lg-fs-40 ls-minus-3px lg-ls-minus-2px mb-10px md-outside-box-left-8 xs-outside-box-left-0 d-block">New project in mind?</span>
|
||
|
|
</div>
|
||
|
|
<div class="col-12 text-lg-end text-center">
|
||
|
|
<a href="cdn-cgi/l/email-protection.html#f69f989099b692999b979f98d895999b" class="alt-font fs-60 xl-fs-50 lg-fs-40 fw-700 ls-minus-3px xl-ls-minus-2px md-outside-box-right-7 xs-outside-box-right-0"><span class="__cf_email__" data-cfemail="ea83848c85aa8e85878b8384c4898587">[email protected]</span></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-12 mb-45px mt-45px xl-mb-30px xl-mt-30px">
|
||
|
|
<div class="separator-line-1px w-100 d-block bg-black"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="col elements-social social-icon-style-06 d-flex justify-content-center">
|
||
|
|
<ul class="medium-icon fw-600">
|
||
|
|
<li><a class="facebook" href="https://www.facebook.com" target="_blank"><span class="brand-label">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">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">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">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">Pt</span><span class="brand-icon fa-brands fa-pinterest-p"></span></a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-lg-6 cover-background h-100 position-fixed position-md-relative top-0px right-0px bg-black">
|
||
|
|
<div id="map" class="map h-100 w-100 md-h-850px sm-h-450px" data-map-options="{ "lat": -37.805688, "lng": 144.962312, "style": "Dark", "marker": { "type": "HTML", "class": "marker02", "color": "#ffda01" }, "popup": { "defaultOpen": true, "html": "<div class=infowindow><strong class=\"mb-3 d-inline-block alt-font\">Crafto Agency</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>
|
||
|
|
|
||
|
|
|
||
|
|
<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>
|