Access_New/pages/demo-green-energy-contact.html
2024-09-05 11:33:27 +05:45

341 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/green-energy/green-energy.css" />
</head>
<body data-mobile-nav-style="classic">
<header>
<nav class="navbar navbar-expand-lg header-light bg-white header-reverse" data-header-hover="light">
<div class="container-fluid">
<div class="col-auto">
<a class="navbar-brand" href="demo-green-energy.html">
<img src="images/demo-green-energy-logo-black.png" data-at2x="images/demo-green-energy-logo-black@2x.png" alt class="default-logo">
<img src="images/demo-green-energy-logo-black.png" data-at2x="images/demo-green-energy-logo-black@2x.png" alt class="alt-logo">
<img src="images/demo-green-energy-logo-black.png" data-at2x="images/demo-green-energy-logo-black@2x.png" alt class="mobile-logo">
</a>
</div>
<div class="col-auto menu-order left-nav">
<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">
<li class="nav-item"><a href="demo-green-energy.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="demo-green-energy-about.html" class="nav-link">About</a></li>
<li class="nav-item dropdown dropdown-with-icon-style02"><a href="demo-green-energy-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="navbarDropdownMenuLink1">
<li><a href="demo-green-energy-services-details.html"><i class="line-icon-Solar align-middle text-base-color"></i>Solar panel solutions</a></li>
<li><a href="demo-green-energy-services-details.html"><i class="line-icon-Battery-Charge align-middle text-base-color"></i>Battery materials</a></li>
<li><a href="demo-green-energy-services-details.html"><i class="line-icon-Wind-Turbine align-middle text-base-color"></i>Wind turbine installation</a></li>
<li><a href="demo-green-energy-services-details.html"><i class="line-icon-Green-Energy align-middle text-base-color"></i>Renewable energy</a></li>
</ul>
</li>
<li class="nav-item"><a href="demo-green-energy-project.html" class="nav-link">Project</a></li>
<li class="nav-item"><a href="demo-green-energy-blog.html" class="nav-link">Blog</a></li>
<li class="nav-item"><a href="demo-green-energy-contact.html" class="nav-link">Contact</a></li>
</ul>
</div>
</div>
<div class="col-auto ms-auto ps-lg-0 d-none d-sm-flex">
<div class="d-none d-xl-flex me-25px xl-me-0">
<div class="d-flex align-items-center widget-text fw-600"><a href="tel:1800222000"><span class="d-inline-block align-middle me-10px bg-very-light-green h-45px w-45px lh-44 text-center rounded-circle text-base-color"><i class="feather icon-feather-phone-call"></i></span><span class="d-none d-xxl-inline-block align-middle">1 800 222 000</span></a></div>
</div>
<div class="header-icon">
<div class="header-button">
<a href="cdn-cgi/l/email-protection.html#a1c8cfc7cee1c5ceccc0c8cf8fc2cecc" class="btn border-1 btn-base-color btn-small btn-rounded btn-box-shadow 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="top-space-margin overflow-hidden p-0 bg-very-light-gray page-title-big-typography">
<div class="container-fluid p-0">
<div class="row justify-content-center small-screen sm-h-400px g-0">
<div class="col-md-6 d-flex justify-content-center flex-column ps-7 pe-15px sm-ps-15px cover-background text-white text-md-start text-center page-title-large" style="background-image: url('images/demo-green-energy-about-title-left-bg-01.jpg');" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h1 class="fw-600 mb-10px ls-minus-2px">Contact</h1>
<h2 class="opacity-6 mb-0 fw-300">Green energy collaboration</h2>
</div>
<div class="col-md-6">
<div class="h-100 position-relative cover-background sm-pt-50px" style="background-image: url('images/demo-green-energy-contact-title-right-bg-01.jpg');" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="fs-140 xl-fs-120 lg-fs-100 md-fs-80 ls-minus-6px md-ls-minus-4px sm-ls-minus-2px text-white position-absolute bottom-minus-20px sm-bottom-minus-10px w-100 text-center"><span class="fw-700">69</span> office</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-lg-5 md-mb-40px" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 250, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="position-sticky top-120px">
<div class="mb-10px">
<span class="w-30px h-2px fs-15 d-inline-block bg-base-color me-5px align-middle"></span>
<span class="text-uppercase text-base-color fs-16 fw-600 d-inline-block">Get in touch with us</span>
</div>
<h3 class="text-dark-gray fw-700 ls-minus-2px mb-20px">Call or visit us at one of our different locations.</h3>
<p>Reach out to us today to start a conversation about how we can work together on green energy projects. Let's make a difference in the world by embracing sustainable energy solutions & creating a greener future for generations to come.</p>
<a href="demo-green-energy-contact.html#" class="btn btn-large btn-base-color btn-rounded btn-switch-text left-icon btn-box-shadow">
<span>
<span><i class="bi bi-telephone-outbound"></i></span>
<span class="btn-double-text" data-text="Schedule a call">Schedule a call</span>
</span>
</a>
</div>
</div>
<div class="col-xl-6 col-lg-7 offset-xl-1">
<div class="row row-cols-1 justify-content-center" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col services-box-style-02 mb-30px">
<div class="row g-0 box-shadow-quadruple-large border-radius-6px overflow-hidden">
<div class="col-lg-6 col-sm-6">
<div class="h-100 cover-background xs-h-300px" style="background-image: url('images/demo-yoga-and-meditation-contact-01.jpg')"></div>
</div>
<div class="col-lg-6 col-sm-6 bg-white box-shadow-extra-large p-40px xl-p-30px">
<div class="services-box-content last-paragraph-no-margin">
<span class="d-block text-dark-gray fw-700 fs-19 mb-10px">New York</span>
<p>167 Hawthorne, Business central, New York, 11722</p>
<a href="demo-green-energy-contact.html#" class="fs-17 lh-22 fw-500 text-dark-gray text-decoration-line-bottom d-inline-block mb-25px">View on map</a>
<div class="text-dark-gray fw-600"><i class="feather icon-feather-phone-call icon-small me-10px text-dark-gray"></i><a href="tel:+1-2345678910">+1234 567 8910</a></div>
</div>
</div>
</div>
</div>
<div class="col services-box-style-02 mb-30px">
<div class="row g-0 box-shadow-quadruple-large border-radius-6px overflow-hidden">
<div class="col-lg-6 col-sm-6">
<div class="h-100 cover-background xs-h-300px" style="background-image: url('images/demo-yoga-and-meditation-contact-02.jpg')"></div>
</div>
<div class="col-lg-6 col-sm-6 bg-white box-shadow-extra-large p-40px xl-p-30px">
<div class="services-box-content last-paragraph-no-margin">
<span class="d-block text-dark-gray fw-700 fs-19 mb-10px">San Francisco</span>
<p>777 Magnolia farme ville, San Francisco, 93223</p>
<a href="demo-green-energy-contact.html#" class="fs-17 lh-22 fw-500 text-dark-gray text-decoration-line-bottom d-inline-block mb-25px">View on map</a>
<div class="text-dark-gray fw-600"><i class="feather icon-feather-phone-call icon-small me-10px text-dark-gray"></i><a href="tel:+1-2345678910">+1234 567 8910</a></div>
</div>
</div>
</div>
</div>
<div class="col services-box-style-02 md-mb-30px sm-mb-0">
<div class="row g-0 box-shadow-quadruple-large border-radius-6px overflow-hidden">
<div class="col-lg-6 col-sm-6">
<div class="h-100 cover-background xs-h-300px" style="background-image: url('images/demo-yoga-and-meditation-contact-03.jpg')"></div>
</div>
<div class="col-lg-6 col-sm-6 bg-white box-shadow-extra-large p-40px xl-p-30px">
<div class="services-box-content last-paragraph-no-margin">
<span class="d-block text-dark-gray fw-700 fs-19 mb-10px">Paris</span>
<p>959 Seven forks tower, Paris, France, 30557</p>
<a href="demo-green-energy-contact.html#" class="fs-17 lh-22 fw-500 text-dark-gray text-decoration-line-bottom d-inline-block mb-25px">View on map</a>
<div class="text-dark-gray fw-600"><i class="feather icon-feather-phone-call icon-small me-10px text-dark-gray"></i><a href="tel:+1-2345678910">+1234 567 8910</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="p-0">
<div class="container-fluid">
<div class="row">
<div class="col-12 p-0">
<div id="map" class="map h-550px sm-h-350px" data-map-options="{ &quot;lat&quot;: -37.805688, &quot;lng&quot;: 144.962312, &quot;style&quot;: &quot;night&quot;, &quot;marker&quot;: { &quot;type&quot;: &quot;image&quot;, &quot;class&quot;: &quot;marker01&quot;, &quot;src&quot;: &quot;images/demo-green-energy-map-icon.png&quot; }, &quot;popup&quot;: { &quot;defaultOpen&quot;: false, &quot;html&quot;: &quot;<div class=infowindow><strong class=\&quot;mb-3 d-inline-block\&quot;>Crafto Green Energy</strong><p>16122 Collins street, Melbourne, Australia</p></div><div class=\&quot;google-maps-link\&quot;> <a aria-label=\&quot;View larger map\&quot; target=\&quot;_blank\&quot; jstcache=\&quot;31\&quot; href=\&quot;https://maps.google.com/maps?ll=-37.805688,144.962312&amp;z=17&amp;t=m&amp;hl=en-US&amp;gl=IN&amp;mapclient=embed&amp;cid=13153204942596594449\&quot; jsaction=\&quot;mouseup:placeCard.largerMap\&quot;>VIEW LARGER MAP</a></div>&quot; } }"></div>
</div>
</div>
</div>
</section>
<section class="bg-very-light-green">
<div class="container">
<div class="row mb-5">
<div class="col-xl-5 col-lg-6 md-mb-50px" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [-50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="bg-white border-radius-6px box-shadow-quadruple-large p-14 xxl-p-10 lg-ps-8 lg-pe-8" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateY&quot;: [0, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<span class="fs-16 text-uppercase text-base-color fw-600 mb-5px d-block">Lets's work together</span>
<h4 class="text-dark-gray ls-minus-1px fw-700 mb-15px">Ready to help you!</h4>
<p class="w-85 sm-w-100">We're here to help and answer any question you might have.</p>
<div class="row row-cols-1 row-cols-sm-2">
<div class="col last-paragraph-no-margin mb-25px">
<p>Call us directly?</p>
<a href="tel:12345678910" class="text-dark-gray fw-600">+1 234 567 8910</a>
</div>
<div class="col last-paragraph-no-margin mb-25px">
<p>Need live support?</p>
<a href="cdn-cgi/l/email-protection.html#0a63646c654a6e65676b636424696567" class="text-dark-gray fw-600"><span class="__cf_email__" data-cfemail="95fcfbf3fad5f1faf8f4fcfbbbf6faf8">[email&#160;protected]</span></a>
</div>
<div class="col last-paragraph-no-margin sm-mb-25px">
<p>Join growing team?</p>
<a href="cdn-cgi/l/email-protection.html#107a7f797e50747f7d71797e3e737f7d" class="text-dark-gray fw-600"><span class="__cf_email__" data-cfemail="a0cacfc9cee0c4cfcdc1c9ce8ec3cfcd">[email&#160;protected]</span></a>
</div>
<div class="col last-paragraph-no-margin">
<p>Visit headquarters?</p>
<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="text-dark-gray fw-600">View on google map</a>
</div>
</div>
</div>
</div>
<div class="col-lg-6 offset-xl-1 md-mb-50px sm-mb-0" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<h3 class="text-dark-gray ls-minus-2px fw-700">Looking for any help?</h3>
<form action="email-templates/contact-form.php" method="post" class="contact-form-style-03">
<label for="exampleInputEmail1" class="form-label fs-13 text-uppercase text-dark-gray fw-600 mb-0">Enter your name*</label>
<div class="position-relative form-group mb-20px">
<span class="form-icon"><i class="bi bi-emoji-smile text-dark-gray"></i></span>
<input class="fs-15 ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control required" id="exampleInputEmail1" type="text" name="name" placeholder="What's your good name" />
</div>
<label for="exampleInputEmail1" class="form-label fs-13 text-uppercase text-dark-gray fw-600 mb-0">Email address*</label>
<div class="position-relative form-group mb-20px">
<span class="form-icon"><i class="bi bi-envelope text-dark-gray"></i></span>
<input class="fs-15 ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control required" id="exampleInputEmail2" type="email" name="email" placeholder="Enter your email address" />
</div>
<label for="exampleInputEmail1" class="form-label fs-13 text-uppercase text-dark-gray fw-600 mb-0">Your message</label>
<div class="position-relative form-group form-textarea mb-0">
<textarea class="fs-15 ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control" name="comment" placeholder="Describe about your project" rows="3"></textarea>
<span class="form-icon"><i class="bi bi-chat-square-dots text-dark-gray"></i></span>
</div>
<div class="row mt-25px 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 will never collect information about you without your explicit consent.</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-medium btn-dark-gray btn-rounded btn-box-shadow submit" type="submit">Send message</button>
</div>
<div class="col-12 mt-20px mb-0 text-center text-md-start">
<div class="form-results d-none"></div>
</div>
</div>
</form>
</div>
</div>
<div class="row align-items-center justify-content-center" data-anime="{&quot;opacity&quot;: [0,1], &quot;duration&quot;: 600, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 200, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
<div class="col-md-auto text-center text-md-end sm-mb-20px">
<h6 class="text-dark-gray fw-600 mb-0">Connect with social media </h6>
</div>
<div class="col-2 d-none d-lg-inline-block">
<span class="w-100 h-1px bg-dark-gray opacity-2 d-flex mx-auto"></span>
</div>
<div class="col-md-auto elements-social social-icon-style-04 text-center text-md-start ps-lg-0">
<ul class="large-icon dark">
<li class="m-0"><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i><span></span></a></li>
<li class="m-0"><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i><span></span></a></li>
<li class="m-0"><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i><span></span></a></li>
<li class="m-0"><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i><span></span></a></li>
<li class="m-0"><a class="linkedin" href="http://www.linkedin.com" target="_blank"><i class="fa-brands fa-linkedin-in"></i><span></span></a></li>
</ul>
</div>
</div>
</div>
</section>
<footer class="bg-dark-gray pb-30px">
<div class="container">
<div class="row mb-5 xs-mb-30px">
<div class="col-xl-5 col-md-7 sm-mb-30px order-2 order-xl-1">
<h3 class="text-white fw-600 mb-30px ls-minus-2px">Quality solar panels for home and business.</h3>
<div class="row">
<div class="col-xxl-5 col-sm-6 sm-mb-20px">
<span class="fs-18 fw-500 text-white d-block">Say hello</span>
<a href="cdn-cgi/l/email-protection.html#d3babdb5bc93aabca6a1b7bcbeb2babdfdb0bcbe"><span class="__cf_email__" data-cfemail="264f484049665f49535442494b474f480845494b">[email&#160;protected]</span></a>
</div>
<div class="col-xxl-5 col-sm-6">
<span class="fs-18 fw-500 text-white d-block">Call anytime</span>
<a href="tel:1800222000">1 800 222 000</a>
</div>
</div>
</div>
<div class="col-lg-2 col-md-3 col-6 order-3 order-md-2">
<span class="fs-18 fw-500 d-block text-white mb-5px">Information</span>
<ul>
<li><a href="demo-green-energy-about.html">Our company</a></li>
<li><a href="demo-green-energy-services.html">Our services</a></li>
<li><a href="demo-green-energy-project.html">Recent projects</a></li>
<li><a href="demo-green-energy-blog.html">Latest news</a></li>
<li><a href="demo-green-energy-contact.html">Contact us</a></li>
</ul>
</div>
<div class="col-md-2 col-6 order-3 order-md-3">
<span class="fs-18 fw-500 d-block text-white mb-5px">Socials</span>
<ul>
<li><a href="https://www.facebook.com/" target="_blank">Facebook</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.linkedin.com" target="_blank">Linkedin</a></li>
</ul>
</div>
<div class="col-xl-3 order-1 order-xl-4 lg-mb-30px">
<a href="demo-green-energy.html" class="footer-logo"><img src="images/demo-green-energy-logo-white.png" data-at2x="images/demo-green-energy-logo-white@2x.png" alt></a>
</div>
</div>
<div class="row g-0 border-top border-color-transparent-white-light"></div>
<div class="row align-items-center footer-bottom pt-30px">
<div class="col-md-7 last-paragraph-no-margin">
<p class="fs-14 lh-24 w-90 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-14 lh-24">&copy; 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-green-energy-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>