857 lines
48 KiB
HTML
857 lines
48 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#e78e898188a783888a868e89c984888a" 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="p-0 top-space-margin position-relative overflow-hidden">
|
|||
|
|
<div class="swiper full-screen swiper-number-pagination-style-01 md-h-auto magic-cursor" data-slider-options="{ "slidesPerView": 1, "loop": true, "pagination": { "el": ".swiper-number", "clickable": true }, "navigation": { "nextEl": ".slider-one-slide-next-1", "prevEl": ".slider-one-slide-prev-1" }, "autoplay": { "delay": 4000, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "effect": "slide" }" data-number-pagination="1">
|
|||
|
|
<div class="swiper-wrapper">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<div class="container-fluid h-100 g-0">
|
|||
|
|
<div class="row h-100 p-0">
|
|||
|
|
<div class="col-xxl-5 col-lg-6 text-white bg-very-light-green cover-background ps-6 xxl-ps-4 sm-ps-15px order-2 order-lg-1 md-pt-50px md-pb-15 xs-pb-20" style="background-image:url('images/demo-green-energy-slider-left-01.jpg');">
|
|||
|
|
<div class="d-flex justify-content-center align-items-lg-start align-items-center text-lg-start text-center flex-column h-100" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
<span class="fs-15 fw-500 ls-05px mb-20px d-inline-block border-bottom border-2 border-color-transparent-white-very-light text-uppercase">Welcome to green energy</span>
|
|||
|
|
<div class="fs-75 lg-fs-55 fw-600 ls-minus-2px md-w-80 sm-w-100 xs-w-90">
|
|||
|
|
<span>Renewable and green</span>
|
|||
|
|
<span class="position-relative z-index-1">energy<span><img src="images/demo-green-energy-highlight-separator.svg" alt class="position-absolute bottom-5px left-0px w-100 z-index-minus-1"></span></span>
|
|||
|
|
<span>industry.</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="d-inline-block mt-45px sm-mt-30px">
|
|||
|
|
<a href="demo-green-energy-about.html" class="btn btn-extra-large btn-white btn-rounded btn-switch-text btn-box-shadow d-inline-block me-20px sm-me-10px align-middle left-icon">
|
|||
|
|
<span>
|
|||
|
|
<span><i class="feather icon-feather-thumbs-up"></i></span>
|
|||
|
|
<span class="btn-double-text ls-minus-05px" data-text="Discover more">Discover more</span>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
<a href="demo-green-energy-services.html" class="btn btn-link btn-hover-animation-switch fw-500 btn-extra-large text-white btn-icon-left xs-mt-15px">
|
|||
|
|
<span>
|
|||
|
|
<span class="btn-text">View services</span>
|
|||
|
|
<span class="btn-icon"><i class="feather icon-feather-box"></i></span>
|
|||
|
|
<span class="btn-icon"><i class="feather icon-feather-box"></i></span>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xxl-7 col-lg-6 cover-background sm-background-position-top-center order-1 order-lg-2 md-h-500px sm-h-400px" style="background-image:url('images/demo-green-energy-slider-right-01.jpg');"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<div class="container-fluid h-100 g-0">
|
|||
|
|
<div class="row h-100 p-0">
|
|||
|
|
<div class="col-xxl-5 col-lg-6 text-white bg-very-light-green cover-background ps-6 xxl-ps-4 sm-ps-15px order-2 order-lg-1 md-pt-50px md-pb-15 xs-pb-20" style="background-image:url('images/demo-green-energy-slider-left-01.jpg');">
|
|||
|
|
<div class="d-flex justify-content-center align-items-lg-start align-items-center text-lg-start text-center flex-column h-100" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
<span class="fs-15 fw-500 ls-05px mb-20px d-inline-block border-bottom border-2 border-color-transparent-white-very-light text-uppercase">Green savings, bright future</span>
|
|||
|
|
<div class="fs-75 lg-fs-55 fw-600 ls-minus-2px md-w-80 sm-w-100 xs-w-90">
|
|||
|
|
<span>Cost-effective green</span>
|
|||
|
|
<span class="position-relative z-index-1">energy<span><img src="images/demo-green-energy-highlight-separator.svg" alt class="position-absolute bottom-5px left-0px w-100 z-index-minus-1"></span></span>
|
|||
|
|
<span>options.</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="d-inline-block mt-45px sm-mt-30px">
|
|||
|
|
<a href="demo-green-energy-about.html" class="btn btn-extra-large btn-white btn-rounded btn-switch-text btn-box-shadow d-inline-block me-20px sm-me-10px align-middle left-icon">
|
|||
|
|
<span>
|
|||
|
|
<span><i class="feather icon-feather-thumbs-up"></i></span>
|
|||
|
|
<span class="btn-double-text ls-minus-05px" data-text="Discover more">Discover more</span>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
<a href="demo-green-energy-services.html" class="btn btn-link btn-hover-animation-switch fw-500 btn-extra-large text-white btn-icon-left xs-mt-15px">
|
|||
|
|
<span>
|
|||
|
|
<span class="btn-text">View services</span>
|
|||
|
|
<span class="btn-icon"><i class="feather icon-feather-box"></i></span>
|
|||
|
|
<span class="btn-icon"><i class="feather icon-feather-box"></i></span>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xxl-7 col-lg-6 cover-background sm-background-position-top-center order-1 order-lg-2 md-h-500px sm-h-400px" style="background-image:url('images/demo-green-energy-slider-right-02.jpg');"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<div class="container-fluid h-100 g-0">
|
|||
|
|
<div class="row h-100 p-0">
|
|||
|
|
<div class="col-xxl-5 col-lg-6 text-white bg-very-light-green cover-background ps-6 xxl-ps-4 sm-ps-15px order-2 order-lg-1 md-pt-50px md-pb-15 xs-pb-20" style="background-image:url('images/demo-green-energy-slider-left-01.jpg');">
|
|||
|
|
<div class="d-flex justify-content-center align-items-lg-start align-items-center text-lg-start text-center flex-column h-100" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
<span class="fs-15 fw-500 ls-05px mb-20px d-inline-block border-bottom border-2 border-color-transparent-white-very-light text-uppercase">Green energy innovations</span>
|
|||
|
|
<div class="fs-75 lg-fs-55 fw-600 ls-minus-2px md-w-80 sm-w-100 xs-w-90">
|
|||
|
|
<span>Strategies for green</span>
|
|||
|
|
<span class="position-relative z-index-1">energy<span><img src="images/demo-green-energy-highlight-separator.svg" alt class="position-absolute bottom-5px left-0px w-100 z-index-minus-1"></span></span>
|
|||
|
|
<span>growth.</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="d-inline-block mt-45px sm-mt-30px">
|
|||
|
|
<a href="demo-green-energy-about.html" class="btn btn-extra-large btn-white btn-rounded btn-switch-text btn-box-shadow d-inline-block me-20px sm-me-10px align-middle left-icon">
|
|||
|
|
<span>
|
|||
|
|
<span><i class="feather icon-feather-thumbs-up"></i></span>
|
|||
|
|
<span class="btn-double-text ls-minus-05px" data-text="Discover more">Discover more</span>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
<a href="demo-green-energy-services.html" class="btn btn-link btn-hover-animation-switch fw-500 btn-extra-large text-white btn-icon-left xs-mt-15px">
|
|||
|
|
<span>
|
|||
|
|
<span class="btn-text">View services</span>
|
|||
|
|
<span class="btn-icon"><i class="feather icon-feather-box"></i></span>
|
|||
|
|
<span class="btn-icon"><i class="feather icon-feather-box"></i></span>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xxl-7 col-lg-6 cover-background md-background-position-top-center order-1 order-lg-2 md-h-500px sm-h-400px" style="background-image:url('images/demo-green-energy-slider-right-03.jpg');"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="position-relative">
|
|||
|
|
|
|||
|
|
<div class="swiper-pagination w-auto left-0 md-right-0px text-center swiper-pagination-clickable swiper-number fs-14 ps-6 xxl-ps-4 md-ps-0"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="position-absolute md-position-relative right-210px xxl-right-25px md-right-0px bottom-minus-5px z-index-1 w-35 xl-w-45 md-w-100 md-bottom-minus-0px md-mt-6">
|
|||
|
|
<div class="row border-radius-10px lg-no-border-radius overflow-hidden g-0 md-ps-5 md-pe-5 sm-pb-15px">
|
|||
|
|
<div class="col-md-5 position-relative cover-background sm-h-300px sm-mb-30px" style="background-image:url('images/demo-green-energy-home-img-02.jpg');">
|
|||
|
|
|
|||
|
|
<a href="https://www.youtube.com/watch?v=cfXHhfNy7tU" class="absolute-middle-center text-center rounded-circle video-icon-box video-icon-large popup-vimeo">
|
|||
|
|
<span class="video-icon bg-white">
|
|||
|
|
<i class="fa-solid fa-play text-dark-gray"></i>
|
|||
|
|
<span class="video-icon-sonar">
|
|||
|
|
<span class="video-icon-sonar-bfr border border-color-white"></span>
|
|||
|
|
</span>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-7 p-7 sm-p-0 bg-white text-center">
|
|||
|
|
<div class="fs-24 lg-fs-20 lh-32 lg-lh-24 text-dark-gray ls-minus-1px mb-20px md-mb-15px">We are providing awesome <span class="fw-600">20+ green energy</span> services.</div>
|
|||
|
|
<div class="d-inline-block w-100 newsletter-style-02 position-relative">
|
|||
|
|
<form action="email-templates/subscribe-newsletter.php" method="post" class="position-relative w-100">
|
|||
|
|
<input class="bg-transparent border-color-base-color w-100 form-control required border-radius-50px" type="email" name="email" placeholder="Enter your email">
|
|||
|
|
<input type="hidden" name="redirect" value>
|
|||
|
|
<button class="btn submit bg-base-color border-radius-30px" aria-label="submit"><i class="icon bi bi-arrow-right icon-small text-white"></i></button>
|
|||
|
|
<div class="form-results border-radius-4px pt-5px pb-5px ps-15px pe-15px fs-12 lh-18 mt-10px w-100 text-center position-absolute d-none"></div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
<span class="fs-12 lh-20 mt-5px d-inline-block">*You agree to green energy terms of service.</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row justify-content-center mb-6 md-mb-50px">
|
|||
|
|
<div class="col-lg-7 col-12 md-mb-35px 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-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">About renewable energy</span>
|
|||
|
|
</div>
|
|||
|
|
<h2 class="text-dark-gray fw-700 ls-minus-2px">We are the top renewable energy solutions.</h2>
|
|||
|
|
<p class="w-85 lg-w-100">Each of these renewable energy sources has its advantages and challenges, and their adoption is dependent on factors like geographical location, available resources technological advancements, and economic feasibility.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-4 col-lg-5 offset-xl-1 col-12">
|
|||
|
|
<div class="border-radius-10px overflow-hidden" data-anime="{ "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="p-30px bg-very-light-green text-center">
|
|||
|
|
<span class="fs-24 ls-minus-05px fw-600 text-dark-gray">Since 2010, our happy customers have avoided.</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-box feature-box-left-icon-middle bg-base-color p-8 overflow-hidden last-paragraph-no-margin">
|
|||
|
|
<div class="feature-box-icon me-15px">
|
|||
|
|
<img src="images/demo-green-energy-home-icon-01.png" alt>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-box-content">
|
|||
|
|
<span class="d-inline-block fs-45 xl-fs-30 lg-fs-24 text-white fw-700 ls-minus-2px">612,845,31+</span>
|
|||
|
|
<p class="text-white fs-18">Pounds of CO2.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row row-cols-1 row-cols-lg-4 row-cols-sm-2 justify-content-center mb-6 sm-mb-50px" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|||
|
|
|
|||
|
|
<div class="col custom-icon-with-text-style-02 border-end xs-border-end-0 md-mb-30px">
|
|||
|
|
<div class="feature-box last-paragraph-no-margin">
|
|||
|
|
<div class="feature-box-icon">
|
|||
|
|
<img class="custom-image-icon mb-30px" src="images/demo-green-energy-home-icon-02.png" alt />
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-box-content">
|
|||
|
|
<span class="d-block fs-20 fw-600 text-dark-gray mb-10px">Energy solutions</span>
|
|||
|
|
<p class="w-80 xl-w-100 mx-auto">Energy solutions delivers resource and environmental impacts benefit society.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col custom-icon-with-text-style-02 border-end md-border-end-0 md-mb-30px">
|
|||
|
|
<div class="feature-box last-paragraph-no-margin">
|
|||
|
|
<div class="feature-box-icon">
|
|||
|
|
<img class="custom-image-icon mb-30px" src="images/demo-green-energy-home-icon-03.png" alt />
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-box-content">
|
|||
|
|
<span class="d-block fs-20 fw-600 text-dark-gray mb-10px">Global expertise</span>
|
|||
|
|
<p class="w-80 xl-w-100 mx-auto">Energy solutions delivers resource and environmental impacts benefit society.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col custom-icon-with-text-style-02 border-end xs-border-end-0 xs-mb-30px">
|
|||
|
|
<div class="feature-box last-paragraph-no-margin">
|
|||
|
|
<div class="feature-box-icon">
|
|||
|
|
<img class="custom-image-icon mb-30px" src="images/demo-green-energy-home-icon-04.png" alt />
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-box-content">
|
|||
|
|
<span class="d-block fs-20 fw-600 text-dark-gray mb-10px">Commercial use</span>
|
|||
|
|
<p class="w-80 xl-w-100 mx-auto">Energy solutions delivers resource and environmental impacts benefit society.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col custom-icon-with-text-style-02">
|
|||
|
|
<div class="feature-box last-paragraph-no-margin">
|
|||
|
|
<div class="feature-box-icon">
|
|||
|
|
<img class="custom-image-icon mb-30px" src="images/demo-green-energy-home-icon-05.png" alt />
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-box-content">
|
|||
|
|
<span class="d-block fs-20 fw-600 text-dark-gray mb-10px">Residential use</span>
|
|||
|
|
<p class="w-80 xl-w-100 mx-auto">Energy solutions delivers resource and environmental impacts benefit society.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="row justify-content-center g-0" data-anime="{ "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="col-auto pt-15px pb-15px ps-40px pe-40px md-ps-25px md-pe-25px bg-very-light-green border-radius-100px">
|
|||
|
|
<div class="feature-box feature-box-left-icon-middle">
|
|||
|
|
<div class="feature-box-icon me-10px">
|
|||
|
|
<img src="images/demo-green-energy-home-icon-06.png" alt>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-box-content text-dark-gray fs-18">
|
|||
|
|
Discover independence through the power of solar. <a href="demo-green-energy-project.html" class="text-dark-gray fw-600">Explore our plans</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="p-0">
|
|||
|
|
<div class="container-fluid p-0">
|
|||
|
|
<div class="row g-0">
|
|||
|
|
<div class="col-xxl-7 col-lg-6 cover-background md-h-600px sm-h-400px" style="background-image: url('images/demo-green-energy-home-img-01.jpg');" data-anime="{ "translateX": [-30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|||
|
|
<a href="https://www.youtube.com/watch?v=cfXHhfNy7tU" class="absolute-middle-center bg-white d-inline-block rounded-circle video-icon-box video-icon-extra-large popup-youtube">
|
|||
|
|
<span>
|
|||
|
|
<span class="video-icon">
|
|||
|
|
<i class="fa-solid fa-play text-green"></i>
|
|||
|
|
<span class="video-icon-sonar">
|
|||
|
|
<span class="video-icon-sonar-bfr bg-white"></span>
|
|||
|
|
</span>
|
|||
|
|
</span>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xxl-5 col-lg-6 bg-very-light-green p-6 xl-p-4 md-p-50px sm-p-30px" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|||
|
|
<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">About renewable energy</span>
|
|||
|
|
</div>
|
|||
|
|
<h3 class="text-dark-gray fw-700 ls-minus-2px w-85 xxl-w-100">Providing renewable energy solutions.</h3>
|
|||
|
|
<p class="w-80 sm-w-100">Geothermal energy is a clean and reliable source of renewable energy that uses heat from the earth’s core to generate electricity.</p>
|
|||
|
|
<div class="mb-20px">
|
|||
|
|
|
|||
|
|
<div class="icon-with-text-style-08 mb-10px">
|
|||
|
|
<div class="feature-box feature-box-left-icon-middle">
|
|||
|
|
<div class="feature-box-icon feature-box-icon-rounded w-40px h-40px bg-white box-shadow-medium-bottom rounded-circle me-10px">
|
|||
|
|
<i class="fa-solid fa-check fs-14 text-dark-gray"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-box-content">
|
|||
|
|
<span class="text-dark-gray fw-600">Solutions can help reduce the risk of oil spills.</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="icon-with-text-style-08">
|
|||
|
|
<div class="feature-box feature-box-left-icon-middle">
|
|||
|
|
<div class="feature-box-icon feature-box-icon-rounded w-40px h-40px bg-white box-shadow-medium-bottom rounded-circle me-10px">
|
|||
|
|
<i class="fa-solid fa-check fs-14 text-dark-gray"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-box-content">
|
|||
|
|
<span class="text-dark-gray fw-600">Help reduce the impact of climate change.</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="d-inline-flex flex-wrap">
|
|||
|
|
<a href="demo-green-energy-about.html" class="btn btn-extra-large btn-base-color btn-rounded btn-switch-text btn-box-shadow d-inline-block me-20px sm-me-10px align-middle left-icon mt-15px">
|
|||
|
|
<span>
|
|||
|
|
<span><i class="feather icon-feather-thumbs-up"></i></span>
|
|||
|
|
<span class="btn-double-text ls-minus-05px" data-text="Discover more">Discover more</span>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
<div class="feature-box feature-box-left-icon-middle mt-15px">
|
|||
|
|
<div class="feature-box-icon feature-box-icon-rounded bg-white box-shadow-medium-bottom w-65px h-65px rounded-circle me-10px">
|
|||
|
|
<i class="feather icon-feather-phone-call icon-extra-medium text-dark-gray"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-box-content">
|
|||
|
|
<span class="d-block fs-14">Have any question?</span>
|
|||
|
|
<a href="tel:1800222000" class="d-block text-dark-gray text-dark-gray-hover fs-22 fw-700 ls-minus-1px">1 800 222 000</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="pb-14 sm-pb-50px position-relative overflow-hidden">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row mb-6 text-center" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="col">
|
|||
|
|
<span class="fs-16 text-uppercase text-base-color fw-600 mb-5px d-block">A World Wide Distributor Of Solar Supplies</span>
|
|||
|
|
<h2 class="fw-700 mb-0 text-dark-gray ls-minus-2px">Let's see how much you save</h2>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row align-items-center justify-content-center text-lg-start text-center">
|
|||
|
|
<div class="col-xl-4 col-lg-5 col-md-9 lg-mb-6 sm-mb-50px" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|||
|
|
<img src="images/demo-green-energy-home-icon-07.png" alt class="mb-20px">
|
|||
|
|
<h4 class="fw-700 text-dark-gray ls-minus-1px mb-20px">We are building a sustainable absolute green future.</h4>
|
|||
|
|
<p class="mb-35px w-90 lg-w-100">The increase in extreme weather events and rising sea levels are unmistakable signs of climate change. Roughly 850 million people still live without access to electricity, which is the foundation of sustainable development.</p>
|
|||
|
|
<a href="demo-green-energy-services.html" class="btn btn-large btn-dark-gray btn-rounded btn-switch-text btn-box-shadow">
|
|||
|
|
<span>
|
|||
|
|
<span class="btn-double-text" data-text="View services">View services</span>
|
|||
|
|
<span><i class="feather icon-feather-arrow-right"></i></span>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-5 col-lg-7 lg-mb-6 sm-mb-50px position-relative" data-anime="{ "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|||
|
|
<img src="images/demo-green-energy-home-img-03.jpg" alt class="border-radius-15px sm-w-85 sm-text-start">
|
|||
|
|
<img src="images/demo-green-energy-home-01.png" alt class="position-absolute top-15px right-10px xxl-top-30px xl-top-50px xl-right-minus-80px lg-right-0px lg-top-100px md-top-30px md-right-30px z-index-minus-1 d-md-block d-none">
|
|||
|
|
<div class="position-absolute z-index-1 bottom-0px right-minus-90px lg-right-20px sm-right-50px w-100 lg-w-70">
|
|||
|
|
<img src="images/demo-green-energy-home-a-02.png" alt class="animation-rotation position-absolute top-minus-10px">
|
|||
|
|
<img src="images/demo-green-energy-home-b-02.png" alt>
|
|||
|
|
</div>
|
|||
|
|
<div class="d-inline-flex flex-column justify-content-center text-center align-items-center rounded-circle h-170px w-170px xs-h-130px xs-w-130px text-white bg-base-color fw-500 fs-26 lh-32 ps-10px pe-10px position-absolute bottom-60px right-30px xxl-right-minus-20px lg-right-40px md-right-100px md-bottom-40px sm-left-10px sm-bottom-20px z-index-1"><h3 class="mb-0 fw-700 ls-minus-2px">50%</h3><span class="fs-15 lh-18 w-80">Renewable energy grown</span></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-2 ms-6 lg-ms-0" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="row justify-content-center">
|
|||
|
|
<div class="col-lg-auto mb-50px lg-mb-30px">
|
|||
|
|
<h2 class="fw-700 text-dark-gray ls-minus-3px mb-5px counter" data-speed="2000" data-to="6145"></h2>
|
|||
|
|
<span class="d-inline-block lh-22 w-85 lg-w-60">Projects completed in last 5 years.</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-lg-auto mb-50px lg-mb-30px">
|
|||
|
|
<h2 class="fw-700 text-dark-gray ls-minus-3px mb-5px counter" data-speed="2000" data-to="2194"></h2>
|
|||
|
|
<span class="d-inline-block lh-22 w-85 lg-w-60">Happy customers who trusted us.</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-lg-auto">
|
|||
|
|
<h2 class="fw-700 text-dark-gray ls-minus-3px mb-5px counter" data-speed="2000" data-to="547"></h2>
|
|||
|
|
<span class="d-inline-block lh-22 w-85 lg-w-60">Awards milestones awarded to us.</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="position-absolute bottom-minus-40px lg-bottom-minus-20px text-center w-100 fs-250 xxl-fs-200 xl-fs-180 lg-fs-140 d-none d-md-block text-gradient-light-green-white z-index-minus-2 ls-minus-8px fw-700" data-anime="{ "translateY": [30, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">Green energy</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="py-0 ps-7 pe-7 xl-ps-5 xl-pe-5 lg-ps-3 lg-pe-3 xs-ps-15px xs-pe-15px">
|
|||
|
|
<div class="overflow-hidden bg-very-light-green border-radius-20px lg-border-radius-0px pt-7 pb-7 lg-pt-5 lg-pb-5 lg-ps-3 lg-pe-3 sm-pt-50px sm-pb-50px">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row align-items-center mb-5 sm-mb-9 text-center text-md-start" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="col-lg-5 col-md-6 md-mb-20px">
|
|||
|
|
<span class="fs-16 text-uppercase text-base-color fw-600 mb-5px d-block">Our successful project</span>
|
|||
|
|
<h3 class="text-dark-gray fw-700 mb-0 ls-minus-1px">Recent projects</h3>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-lg-5 col-md-6 last-paragraph-no-margin md-mb-20px">
|
|||
|
|
<p class="w-80 xl-w-100 mx-auto">We strive to develop real-world web solutions that are ideal for small to large projects with bespoke your custom project requirements.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-lg-2 d-flex justify-content-center justify-content-xl-end">
|
|||
|
|
|
|||
|
|
<div class="slider-one-slide-prev-1 icon-extra-medium text-dark-gray swiper-button-prev slider-navigation-style-04 bg-white box-shadow-medium-bottom">
|
|||
|
|
<i class="feather icon-feather-arrow-left"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="slider-one-slide-next-1 icon-extra-medium text-dark-gray swiper-button-next slider-navigation-style-04 bg-white box-shadow-medium-bottom">
|
|||
|
|
<i class="feather icon-feather-arrow-right"></i>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row align-items-center mb-5 xs-mb-30px">
|
|||
|
|
<div class="col-12" data-anime="{ "translateX": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="outside-box-right-25 sm-outside-box-right-0">
|
|||
|
|
<div class="swiper slider-one-slide" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": true, "navigation": { "nextEl": ".slider-one-slide-next-1", "prevEl": ".slider-one-slide-prev-1" }, "autoplay": { "delay": 4000, "disableOnInteraction": false }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "1200": { "slidesPerView": 4 }, "992": { "slidesPerView": 3 }, "768": { "slidesPerView": 2 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper image-gallery-style-01">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide transition-inner-all">
|
|||
|
|
<div class="gallery-box">
|
|||
|
|
<a href="images/demo-green-energy-home-slider-img-01.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden border-radius-6px">
|
|||
|
|
<img src="images/demo-green-energy-home-slider-img-01.jpg" alt />
|
|||
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|||
|
|
<div class="d-flex align-items-center justify-content-center w-60px h-60px rounded-circle bg-white">
|
|||
|
|
<i class="icon feather icon-feather-search icon-extra-medium text-dark-gray"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide transition-inner-all">
|
|||
|
|
<div class="gallery-box">
|
|||
|
|
<a href="images/demo-green-energy-home-slider-img-02.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden border-radius-6px">
|
|||
|
|
<img src="images/demo-green-energy-home-slider-img-02.jpg" alt />
|
|||
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|||
|
|
<div class="d-flex align-items-center justify-content-center w-60px h-60px rounded-circle bg-white">
|
|||
|
|
<i class="icon feather icon-feather-search icon-extra-medium text-dark-gray"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide transition-inner-all">
|
|||
|
|
<div class="gallery-box">
|
|||
|
|
<a href="images/demo-green-energy-home-slider-img-03.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden border-radius-6px">
|
|||
|
|
<img src="images/demo-green-energy-home-slider-img-03.jpg" alt />
|
|||
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|||
|
|
<div class="d-flex align-items-center justify-content-center w-60px h-60px rounded-circle bg-white">
|
|||
|
|
<i class="icon feather icon-feather-search icon-extra-medium text-dark-gray"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide transition-inner-all">
|
|||
|
|
<div class="gallery-box">
|
|||
|
|
<a href="images/demo-green-energy-home-slider-img-04.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden border-radius-6px">
|
|||
|
|
<img src="images/demo-green-energy-home-slider-img-04.jpg" alt />
|
|||
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|||
|
|
<div class="d-flex align-items-center justify-content-center w-60px h-60px rounded-circle bg-white">
|
|||
|
|
<i class="icon feather icon-feather-search icon-extra-medium text-dark-gray"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide transition-inner-all">
|
|||
|
|
<div class="gallery-box">
|
|||
|
|
<a href="images/demo-green-energy-home-slider-img-01.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden border-radius-6px">
|
|||
|
|
<img src="images/demo-green-energy-home-slider-img-01.jpg" alt />
|
|||
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|||
|
|
<div class="d-flex align-items-center justify-content-center w-60px h-60px rounded-circle bg-white">
|
|||
|
|
<i class="icon feather icon-feather-search icon-extra-medium text-dark-gray"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide transition-inner-all">
|
|||
|
|
<div class="gallery-box">
|
|||
|
|
<a href="images/demo-green-energy-home-slider-img-02.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden border-radius-6px">
|
|||
|
|
<img src="images/demo-green-energy-home-slider-img-02.jpg" alt />
|
|||
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|||
|
|
<div class="d-flex align-items-center justify-content-center w-60px h-60px rounded-circle bg-white">
|
|||
|
|
<i class="icon feather icon-feather-search icon-extra-medium text-dark-gray"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide transition-inner-all">
|
|||
|
|
<div class="gallery-box">
|
|||
|
|
<a href="images/demo-green-energy-home-slider-img-03.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="position-relative gallery-image bg-dark-gray overflow-hidden border-radius-6px">
|
|||
|
|
<img src="images/demo-green-energy-home-slider-img-03.jpg" alt />
|
|||
|
|
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
|||
|
|
<div class="d-flex align-items-center justify-content-center w-60px h-60px rounded-circle bg-white">
|
|||
|
|
<i class="icon feather icon-feather-search icon-extra-medium text-dark-gray"></i>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row justify-content-center">
|
|||
|
|
<div class="col-md-12 col-10 text-center" data-anime="{ "translateY": [30, 0], "opacity": [0,1], "duration": 600, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="bg-red fw-700 text-white text-uppercase border-radius-30px ps-15px pe-15px fs-13 me-5px d-inline-block align-middle">Free</div>
|
|||
|
|
<div class="fs-20 text-dark-gray d-inline-block align-middle">Let's make something great work together. <a href="demo-green-energy-contact.html" class="text-dark-gray text-dark-gray-hover text-decoration-line-bottom fw-600">Get free quote</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row text-center justify-content-center" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="col-xxl-6 col-lg-8 mb-4 xs-mb-30px">
|
|||
|
|
<span class="fs-16 text-uppercase text-base-color fw-600 mb-5px d-block">A world wide Distributor green energy</span>
|
|||
|
|
<h3 class="fw-700 mb-0 text-dark-gray ls-minus-1px">Our customers share their clean resources number.</h3>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-12">
|
|||
|
|
<img src="images/demo-green-energy-home-img-04.jpg" alt class="w-100">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="pt-0">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xxl-4 col-lg-5 md-mb-40px d-flex flex-column" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|||
|
|
<h3 class="fw-700 text-dark-gray ls-minus-1px mb-20px w-85 xs-w-100">We'd love to hear from you.</h3>
|
|||
|
|
<p class="mb-35px w-85 sm-w-100">Lorem ipsum dolor sit amet, consectetur adipiscing finibus a purus at fermentum. Praesent vitae quam sed dui.</p>
|
|||
|
|
<div class="feature-box feature-box-left-icon-middle mt-auto">
|
|||
|
|
<div class="feature-box-icon me-15px">
|
|||
|
|
<img src="images/demo-green-energy-home-03.png" alt>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-box-content">
|
|||
|
|
<span class="text-dark-gray fs-20 fw-600 d-block ls-minus-1px">Call us directly</span>
|
|||
|
|
<a href="tel:1800222000" class="fs-18">1 800 222 000</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-lg-7 offset-xxl-1" data-anime="{ "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|||
|
|
|
|||
|
|
<form action="email-templates/contact-form.php" method="post" class="contact-form-style-03">
|
|||
|
|
<div class="row justify-content-center">
|
|||
|
|
<div class="col-md-6 xs-mb-30px">
|
|||
|
|
<label for="exampleInputEmail1" class="form-label fw-600 text-dark-gray text-uppercase fs-14 mb-0">Enter your name*</label>
|
|||
|
|
<div class="position-relative form-group mb-25px xs-mb-0">
|
|||
|
|
<span class="form-icon"><i class="bi bi-emoji-smile text-dark-gray"></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="What's your good name?" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-6 xs-mb-30px">
|
|||
|
|
<label for="exampleInputEmail1" class="form-label fw-600 text-dark-gray text-uppercase fs-14 mb-0">Phone number</label>
|
|||
|
|
<div class="position-relative form-group mb-25px xs-mb-0">
|
|||
|
|
<span class="form-icon"><i class="bi bi-telephone text-dark-gray"></i></span>
|
|||
|
|
<input class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control" id="exampleInputEmail2" type="tel" name="phone" placeholder="Enter your phone number" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-6 xs-mb-30px">
|
|||
|
|
<label for="exampleInputEmail1" class="form-label fw-600 text-dark-gray text-uppercase fs-14 mb-0">Email address*</label>
|
|||
|
|
<div class="position-relative form-group mb-25px xs-mb-0">
|
|||
|
|
<span class="form-icon"><i class="bi bi-envelope text-dark-gray"></i></span>
|
|||
|
|
<input class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control required" id="exampleInputEmail3" type="email" name="email" placeholder="Enter your email address" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-6 xs-mb-30px">
|
|||
|
|
<label for="exampleInputEmail1" class="form-label fw-600 text-dark-gray text-uppercase fs-14 mb-0">Subject</label>
|
|||
|
|
<div class="position-relative form-group mb-25px xs-mb-0">
|
|||
|
|
<span class="form-icon"><i class="bi bi-journals text-dark-gray"></i></span>
|
|||
|
|
<input class="ps-0 border-radius-0px border-color-dark-gray bg-transparent form-control" id="exampleInputEmail4" type="text" name="subject" placeholder="How can we help you?" />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-12 mb-4 xs-mb-30px">
|
|||
|
|
<label for="exampleInputEmail1" class="form-label fw-600 text-dark-gray text-uppercase fs-14 mb-0">Your message</label>
|
|||
|
|
<div class="position-relative form-group form-textarea mb-0">
|
|||
|
|
<textarea class="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>
|
|||
|
|
<div class="col-xl-5 col-md-7">
|
|||
|
|
<p class="mb-0 fs-14 lh-24 text-center text-md-start">We will never collect information about you without your explicit consent.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-7 col-md-5 text-center text-md-end sm-mt-25px">
|
|||
|
|
<input id="exampleInputEmail5" type="hidden" name="redirect" value>
|
|||
|
|
<button class="btn btn-medium btn-dark-gray btn-rounded btn-switch-text btn-box-shadow fw-500 left-icon submit" type="submit">
|
|||
|
|
<span>
|
|||
|
|
<span><i class="fa-regular fa-envelope"></i></span>
|
|||
|
|
<span class="btn-double-text" data-text="Submit request">Submit request</span>
|
|||
|
|
</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-12">
|
|||
|
|
<div class="form-results mt-20px d-none"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="bg-gradient-green-transparent">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row mb-3 text-center">
|
|||
|
|
<div class="col" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|||
|
|
<span class="fs-16 text-uppercase text-base-color fw-600 mb-5px d-block">Browse the latest</span>
|
|||
|
|
<h3 class="fw-700 mb-0 text-dark-gray ls-minus-1px">Latest articles</h3>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-12">
|
|||
|
|
<ul class="blog-grid blog-wrapper grid-loading grid grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-extra-large" data-anime="{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|||
|
|
<li class="grid-sizer"></li>
|
|||
|
|
|
|||
|
|
<li class="grid-item">
|
|||
|
|
<div class="card border-0 border-radius-5px box-shadow-quadruple-large box-shadow-quadruple-large-hover">
|
|||
|
|
<div class="blog-image">
|
|||
|
|
<a href="demo-green-energy-blog-single-simple.html" class="d-block"><img src="images/demo-green-energy-blog-01.jpg" alt /></a>
|
|||
|
|
<div class="blog-categories">
|
|||
|
|
<a href="demo-green-energy-blog.html" class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase fw-700">Technology</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-body p-12 lg-p-10">
|
|||
|
|
<a href="demo-green-energy-blog-single-simple.html" class="card-title mb-15px fw-600 fs-20 text-dark-gray d-inline-block">Exploring the evolution of electric charging technology.</a>
|
|||
|
|
<p>Lorem ipsum dolor consectetur adipiscing eiusmod tempor...</p>
|
|||
|
|
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-14 text-uppercase">
|
|||
|
|
<div class="me-auto">
|
|||
|
|
<span class="blog-date d-inline-block fw-600 text-dark-gray">30 August 2024</span>
|
|||
|
|
<div class="d-inline-block author-name fw-600 text-dark-gray">By <a href="demo-green-energy-blog.html" class="text-dark-gray text-decoration-line-bottom">Den viliamson</a></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="like-count">
|
|||
|
|
<a href="demo-green-energy.html#"><i class="fa-regular fa-heart text-red"></i><span class="text-dark-gray align-middle fw-600">25</span></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<li class="grid-item">
|
|||
|
|
<div class="card border-0 border-radius-5px box-shadow-quadruple-large box-shadow-quadruple-large-hover">
|
|||
|
|
<div class="blog-image">
|
|||
|
|
<a href="demo-green-energy-blog-single-simple.html" class="d-block"><img src="images/demo-green-energy-blog-02.jpg" alt /></a>
|
|||
|
|
<div class="blog-categories">
|
|||
|
|
<a href="demo-green-energy-blog.html" class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase fw-700">Power</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-body p-12 lg-p-10">
|
|||
|
|
<a href="demo-green-energy-blog-single-simple.html" class="card-title mb-15px fw-600 fs-20 text-dark-gray d-inline-block">Renewable energy sources for a brighter tomorrow.</a>
|
|||
|
|
<p>Lorem ipsum dolor consectetur adipiscing eiusmod tempor...</p>
|
|||
|
|
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-14 text-uppercase">
|
|||
|
|
<div class="me-auto">
|
|||
|
|
<span class="blog-date d-inline-block fw-600 text-dark-gray">28 August 2024</span>
|
|||
|
|
<div class="d-inline-block author-name fw-600 text-dark-gray">By <a href="demo-green-energy-blog.html" class="text-dark-gray text-decoration-line-bottom">Hugh macleod</a></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="like-count">
|
|||
|
|
<a href="demo-green-energy.html#"><i class="fa-regular fa-heart text-red"></i><span class="text-dark-gray align-middle fw-600">58</span></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<li class="grid-item">
|
|||
|
|
<div class="card border-0 border-radius-5px box-shadow-quadruple-large box-shadow-quadruple-large-hover">
|
|||
|
|
<div class="blog-image">
|
|||
|
|
<a href="demo-green-energy-blog-single-simple.html" class="d-block"><img src="images/demo-green-energy-blog-03.jpg" alt /></a>
|
|||
|
|
<div class="blog-categories">
|
|||
|
|
<a href="demo-green-energy-blog.html" class="categories-btn bg-white text-dark-gray text-dark-gray-hover text-uppercase fw-700">Solar</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-body p-12 lg-p-10">
|
|||
|
|
<a href="demo-green-energy-blog-single-simple.html" class="card-title mb-15px fw-600 fs-20 text-dark-gray d-inline-block">Exploring green energy solutions for a cleaner future.</a>
|
|||
|
|
<p>Lorem ipsum dolor consectetur adipiscing eiusmod tempor...</p>
|
|||
|
|
<div class="author d-flex justify-content-center align-items-center position-relative overflow-hidden fs-14 text-uppercase">
|
|||
|
|
<div class="me-auto">
|
|||
|
|
<span class="blog-date d-inline-block fw-600 text-dark-gray">26 August 2024</span>
|
|||
|
|
<div class="d-inline-block author-name fw-600 text-dark-gray">By <a href="demo-green-energy-blog.html" class="text-dark-gray text-decoration-line-bottom">Walton smith</a></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="like-count">
|
|||
|
|
<a href="demo-green-energy.html#"><i class="fa-regular fa-heart text-red"></i><span class="text-dark-gray align-middle fw-600">75</span></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</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#5c35323a331c2533292e3833313d3532723f3331"><span class="__cf_email__" data-cfemail="bed7d0d8d1fec7d1cbccdad1d3dfd7d090ddd1d3">[email 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">© 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.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>
|