Copyright © 2023. FAST ENERGY All Rights Reserved.
Created: 1 June 2023
Latest Update: 27 June 2023
By: demo
Email: demo@gmail.com
Thank you for purchasing our theme. Consultore - App Landing page html5 template. If you have any question, please feel free to contact us.
All the file are well organized, its so easy to work with the template.
1. Unzip the files.
2. Open "Coachly" folder.
You will find the
two folder one is for lite version and other is for dark version
file on the root that will be edited.
Also you will see 5 directories, css, js, fonts, logo, img and images.
In the first folder Content you will find style.css and other styling files the all the other files expect the htmls.
Js folder contain only the jquery library. Fonts folder contain essetial font files for fonts.
appside/
├── assets/css/plugins/
| ├── bootstrap.min.css
| ├── swiper.bundle.css.css
| ├── owl.carousel.min.css
| ├── stellarnav.css
| ├── aos.css
| ├── modal-video.min.css
| ├── fontawesome.css
| ├── responsive.css
| ├── master.css
| ├── fontawesome.css
| ├── nice-select.css
| ├── typhograpy.css
| ├── style.css
|
├── style.css
|
|
├── assets/fonts
|
├── assets/js/plugins/
│ ├── jquery-3.6.0.min.js
│ ├── swiper.bundle.min.js
│ ├── aos.js
│ ├── bootstrap.min.js
│ ├── owl.carousel.min.js
│ ├── jquery-modal-video.min.js
│ ├── jquery.countup.js
│ ├── main.js
| ├── jquery.nice-select.js
| ├── swiper.bundle.js
| ├── fontawesome.js
| ├── jquery.countup.js
| ├── mobile-menu.js
│
├── index.html
├── index-2.html
├── index-3.html
├── index-4.html
├── blog.html
├── blog-deatils.html
├── service.html
├── service-single.html
<!-- header area start --> <div class="welcome-section-area"> <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="welcome-text-area"> <div class="welcome-heading-text"> <span class="font-rubik font-16 weight-500 color margin-b ">Ready To Grow More Energy</span> <h1 class="font-rubik font-70 weight-700 color margin-b24">Top Rated Solar Installer Sustainable Energy. </h1> <p class="font-rubik font-16 weight-500 color">Power Company offers turn-key Design/Build installations. We also offer General Contractors, Architects, and Equity Investors with menu options of installation, project management.</p> <div class="welget-btn"> <a href="#" class="welcome-get font-16 weight-700 font-rubik color-1">Get Started </a> <span class="long-arrow"><i class="fa-solid fa-arrow-right-long"></i></span> </div> </div> <div class="compound-img"> <img src="assets/img/others/compound-img.png" alt=""> </div> </div> </div> <div class="col-lg-6"> <div class="welcome-lite-area"> <div class="welcom-img"> <img src="assets/img/others/complex-img.png" alt="" class="quito"> <img src="assets/img/section-img/welcome-1.png" alt="" class="balb"> </div> <div class="out-text text-center side-absoulate"> <div class="homo"> <span class="home-icons"><img src="assets/img/icons/home.svg" alt=""></span> </div> <p class="font-rubik font-16 lineh-24 weight-700 text-center ">Save money on your <br> electrical bills and help the <br> environment,</p> </div> </div> </div> </div> </div> </div> <!-- header area end --> <!-- about us area start --> <div class="about-section-area section-padding"> <img src="assets/img/others/npath.png" alt="" class="npath-img"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6"> <div class="about-img-area"> <img src="assets/img/section-img/solar-lab.png" alt=""> </div> </div> <div class="col-lg-6"> <div class="about-others-text"> <span class="font-rubik font-16 weight-500 color-2 about">About Company</span> <h1 class="font-rubik font-40 weight-700 lineh-48 ">Solar Union is a full-service solar elec<span class="after-before">tricity deve</span>loper founder. </h1> <p class="font-rubik font-20 lineh-30 weight-500 color-3">Our goal is to be your energy partner, which is why we make sure you are fully satisfied with our services. We have handled thousands of jobs and our experienced specialists are ready to help you with your every solar need.</p> <div class="welget-btn about-btn"> <a href="about-1.html" class="welcome-get font-16 weight-700 font-rubik color-1">Learn More About Us </a> <span class="long-arrow"><i class="fa-solid fa-arrow-right-long"></i></span> </div> </div> </div> </div> </div> </div>
/*----===========HEADER AREA CSS----============*/ .header-elements { display: flex; align-items: center; justify-content: space-between; /* padding: 12px 0; */ } .quick_contact { position: relative; z-index: 2; padding-left: 60px; align-items: center; display: flex; } .quick_contact_icon { position: absolute; top: 50%; left: 0; width: 50px; height: 50px; text-align: center; line-height: 50px; background: #fee6e5; border-radius: 50px; margin-top: -25px; } .quick_contact_content small { font-weight: 400; font-size: 14px; line-height: 14px; color: #161540; opacity: 0.7; } .quick_contact_content h5 { font-weight: 500; font-size: 20px; line-height: 20px; color: #161540; } .welcome-area { display: flex; align-items: center; height: 100%; } .hero-img-elements { height: 700px; display: flex; align-items: center; justify-content: end; margin-right: -100px; } .stellarnav ul ul { width: 160px; border-radius: 5px; padding: 10px 0; } ul.theme-mega-menu li.mega-menu { width: 1000px; } .stellarnav ul ul li a { padding: 10px 30px; } .stellarnav ul ul li a:hover { color: #fca311; margin-left: 5px; } .cta-btn.d-none.d-lg-block.btn-after.button.action-btn.home1-header-btn a svg { margin-right: 4px; } .main-menu-ex li { display: inline-block; } .main-menu-ex li a { color: #000; font-size: 16px; display: block; font-weight: 500; padding: 10px 15px; } .main-menu-ex li { position: relative; z-index: 9; } .main-menu-ex li ul { position: absolute; left: 0; top: 50px; background: #fff; width: 190px; border-radius: 4px; box-shadow: rgb(0 0 0 / 20%) 0px 20px 30px; padding: 10px; } .main-menu-ex li li { display: block; } .main-menu-ex li li a { padding: 10px 20px; color: #0e1124; font-weight: 500; transition: all.4s; border-radius: 4px; position: relative; } .main-menu-ex li li a:hover { color: #fff; transition: all.4s; } .main-menu-ex li li a::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotateX(60deg); color: #fff; border-radius: 4px; transition: all.4s; z-index: -1; } .main-menu-ex li li a:hover::after { transform: rotateX(0deg); background-color: #d4aeff; border-radius: 4px; } .main-menu-ex li li a .main-menu-ex li li a:hover { background-color: #00bf71; transform: rotateX(0deg); border-radius: 4px; } .main-menu-ex li > ul { opacity: 0; visibility: hidden; top: 60px; transition: all 0.3s; transform: rotateX(60deg); } .main-menu-ex li:hover > ul { visibility: visible; opacity: 1; top: 50px; transition: all 0.3s; z-index: 99; transform: rotateX(0deg); } .main-menu-ex.home4-menu li li a { padding: 10px 20px; color: #0e1124; font-weight: 500; transition: all.4s; border-radius: 4px; position: relative; } .main-menu-ex.home4-menu li li a:hover { color: #fff; transition: all.4s; } .main-menu-ex.home4-menu li li a::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotateX(60deg); color: #fff; border-radius: 4px; transition: all.4s; z-index: -1; } .main-menu-ex.home4-menu li li a:hover::after { transform: rotateX(0deg); background-color: #ff3e55; border-radius: 4px; } .main-menu-ex.home2-menu li li a { padding: 10px 20px; color: #0e1124; font-weight: 500; transition: all.4s; border-radius: 4px; position: relative; } .main-menu-ex.home2-menu li li a:hover { color: #fff; transition: all.4s; } .main-menu-ex.home2-menu li li a::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotateX(60deg); color: #fff; border-radius: 4px; transition: all.4s; z-index: -1; } .main-menu-ex.home2-menu li li a:hover::after { transform: rotateX(0deg); background-color: #00bf71; border-radius: 4px; } .stellarnav.mobile > ul > li > a { padding: 15px; border-bottom: 1px solid #d4aeff; color: #0e1124; } .main-menu-ex.dropdown li a { color: #fff; font-weight: 600; } .main-menu-ex.dropdown ul li ul li a { color: #000; } .main-menu-ex.dropdown-shadow ul li a{ color: #08121E; } .main-menu-ex.dropdown-shadow ul li ul{ background: #08121E; } .main-menu-ex.dropdown-shadow ul li ul li a{ color: #fff; } .header.about-bg { background: #fff; } .main-menu-ex.dropdown-shadow-area ul li ul{ background:#085855; color: #000; } .main-menu-ex.dropdown-shadow-area ul li ul li a{ color: #fff; } .header-elements { display: flex; align-items: center; justify-content: space-between; } .header-btn a { background: #FEDC00; color: #000; padding: 16px 32px; } .header-top-text-area { display: flex; justify-content: space-between; align-items: center; } .haeder-top-social ul li { display: inline-block; padding: 0 12px; } .haeder-top-social ul li a svg{ height: 18px; width: 22px; } .header-top-text-area { padding: 24px 0; } .header-area { padding: 30px 0; } img.white-line-img { width: 100%; object-fit: cover; } .header-btn span img { height: 24px; width: 30px; display: inline-block; padding-right: 12px; object-fit: cover; } .header-btn span img { height: 24px; width: 30px; display: inline-block; padding-right: 12px; object-fit: cover; } .header-btn a:hover { background: #F6ECA8; transition: all .3s ease-in-out; color: #121313; } .header-btn a { transition: all .3s ease-in-out; } header { position: absolute; width: 100%; z-index: 9; } .header.sticky { position: fixed; top: 0; left: 0; width: 100%; transform: translate3d(0, 0, 0); z-index: 111; -webkit-animation-name: fade-in-down; animation-name: fade-in-down; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; background-color: #ffffff; transition: all 0.3s ease-in-out; z-index: 99; } @-webkit-keyframes fade-in-down { 0% { opacity: 0; -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fade-in-down { 0% { -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .mobile-nav-icon { margin-top: 20px; color: #fff; } span.bars span { display: none; } a.menu-toggle.full span.bars { display: none; } .mobile-nav-icon { width: 30px; height: 30px; display: inline-flex; } .mobile-nav-icon svg { font-size: 18px; } .main-menu.homepage-color ul li a{ color: #08121E; font-family: 'Roboto', sans-serif; } .contact-3 a { background: #538B60; border: 1px solid #538B60; box-shadow: 0px 4px 12px rgba(223, 106, 37, 0.12); border-radius: 35px; color: #fff; padding: 12px 24px; transition: all .3s ease-in-out; } .contact-3 a:hover{ background: #112437; color: #fff; transition: all .3s ease-in-out; } .all-3-btn.theme-btn a { background: none; color: #08121E; border-radius: 50px; border: 1px solid var(--font-color, #08121E); box-shadow: 0px 4px 12px 0px rgba(83, 139, 96, 0.12); } .all-3-btn.theme-btn a:hover{ background: #538B60; color: #fff; border: 1px solid transparent; } .all-3-btn.theme-btn a:hover span{ background: #fff; } .all-3-btn.theme-btn a:hover svg{ color: #08121E; } .all-3-btn.theme-btn a span { background: #538B60; color: #fff; } .all-3-btn.theme-btn a span svg { color: #fff; } ul.dropdown-padding.color-s-4 li { color: #000; } ul.dropdown-padding.color-s-4 li:hover { color: #000; } .mobile-nav-icon.black-nav.header-mainlogo { color: #fff; } .mobile-nav-icon.black-nav { border: 1px solid #000; } .mobile-nav-icon.black-nav.header-mainlogo { border: 1px solid #fff; } .box-text a:hover { color: #fff; } .mobile-nav-icon.black-nav.border-black.mobile-menu-color { color: #fff; border: 1px solid #fff; } .main-menu-ex li li a:hover::after { background: #eebf3f; } /*----===========HEADER AREA CSS----============*/
Thank you for reading the documentaion. If you still have any question or any problem, please contact with us. We will give you best support. Thanks.
demo