Copyright © 2024. Cargon All Rights Reserved.
Created: 11 May 2024
Latest Update: 11 May 2024
By: Vikinglab
Email: vikinglab007@gmail.com
Thank you for purchasing our theme. Cargon - Logistics HTML Templete. 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 "Cargon" 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/
| ├── bootstrap.min.css
| ├── all.css
| ├── aos.css
| ├── magnific-popup.css
| ├── nice-select.css
| ├── slick.css
| ├── slick-theme.css
| ├── style.css
| ├── typography.css
| ├── responsive.css
|
|
├── style.css
|
|
├── assets/fonts/
| ├── fa-brands-400.ttf
| ├── fa-brands-400.woff2
| ├── fa-duotone-900.ttf
| ├── fa-duotone-900.woff2
| ├── fa-light-300.ttf
| ├── fa-light-300.woff2
| ├── fa-regular-400.ttf
| ├── fa-regular-400.woff2
| ├── fa-sharp-light-300.ttf
| ├── fa-sharp-light-300.woff2
| ├── fa-sharp-regular-400.ttf
| ├── fa-sharp-regular-400.woff2
| ├── fa-sharp-solid-900.ttf
| ├── fa-sharp-solid-900.woff2
| ├── fa-sharp-light-300.ttf
| ├── fa-solid-900.ttf
| ├── fa-solid-900.woff2
| ├── fa-thin-100.ttf
| ├── fa-thin-100.woff2
| ├── fa-v4compatibility.ttf
| ├── fa-v4compatibility.woff2
|
├── assets/js/
│ ├── bootstrap.bundle.min.js
| ├── aos.js
│ ├── isotope.pkgd.min.js
│ ├── jquery.counterup.min.js
│ ├── jquery.magnific-popup.min.js
│ ├── jquery.nice-select.js
│ ├── jquery-3.7.1.min.js
│ ├── main.js
│ ├── slick.min.js
│ ├── waypoints.min.js
├── main.js
│
├── index.html
├── index2.html
├── index3.html
├── index4.html
├── about.html
├── blog.html
├── blog-left.html
├── blog-right.html
├── blog-single.html
├── service.html
├── service-left.html
├── service-right.html
├── service-single.html
├── project.html
├── project-left.html
├── project-right.html
├── project-single.html
├── contact.html
├── team.html
├── testimonials.html
├── 404.html
├── pricing.html
├── faq.html
<!--===== HERO AREA STARTS =======--> <div class="slider-header-carousel owl-carousel"> <div class="hero1-section-area"> <img src="assets/img/bg/header-img4.png" alt="" class="header-img1"> <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="hero-heading-area heading1"> <h5>Cargon Logistics Services</h5> <h1 class="main-heading">Power for Seamless Logistics Solutions</h1> <p class="pera">Whether you're a homeowner, business owner, or community leader, a we're here to light up your life with sustainable energy solutions that.</p> <div class="btn-area"> <a href="contact.html" class="header-btn1">Get A Free Estimate <i class="fa-solid fa-arrow-right"></i></a> <a href="contact.html" class="header-btn2">Discover More <i class="fa-solid fa-arrow-right"></i></a> </div> <div class="header-bottom-images"> <div class="img1"> <img src="assets/img/all-images/header-bottom.png" alt=""> </div> <div class="content"> <ul> <li><i class="fa-solid fa-star"></i></li> <li><i class="fa-solid fa-star"></i></li> <li><i class="fa-solid fa-star"></i></li> <li><i class="fa-solid fa-star"></i></li> <li><i class="fa-solid fa-star"></i></li> </ul> <p><span>4k</span>Happy Client</p> </div> </div> </div> </div> <div class="col-lg-6"> <div class="circle-arrow"> <a href="#"> <img src="assets/img/elements/circle1.png" alt="" class="keyframe5 circle1"> <img src="assets/img/icons/arrow1.svg" alt="" class="arrow1"> </a> </div> </div> </div> </div> </div> <div class="hero1-section-area"> <img src="assets/img/bg/header-img2.png" alt="" class="header-img1"> <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="hero-heading-area heading1"> <h5>Cargon Logistics Services</h5> <h1 class="main-heading">Power for Seamless Logistics Solutions</h1> <p class="pera">Whether you're a homeowner, business owner, or community leader, a we're here to light up your life with sustainable energy solutions that.</p> <div class="btn-area"> <a href="contact.html" class="header-btn1">Get A Free Estimate <i class="fa-solid fa-arrow-right"></i></a> <a href="contact.html" class="header-btn2">Discover More <i class="fa-solid fa-arrow-right"></i></a> </div> <div class="header-bottom-images"> <div class="img1"> <img src="assets/img/all-images/header-bottom.png" alt=""> </div> <div class="content"> <ul> <li><i class="fa-solid fa-star"></i></li> <li><i class="fa-solid fa-star"></i></li> <li><i class="fa-solid fa-star"></i></li> <li><i class="fa-solid fa-star"></i></li> <li><i class="fa-solid fa-star"></i></li> </ul> <p><span>4k</span>Happy Client</p> </div> </div> </div> </div> <div class="col-lg-6"> <div class="circle-arrow"> <a href="#"> <img src="assets/img/elements/circle1.png" alt="" class="keyframe5 circle1"> <img src="assets/img/icons/arrow1.svg" alt="" class="arrow1"> </a> </div> </div> </div> </div> </div> <div class="hero1-section-area"> <img src="assets/img/bg/header-img3.png" alt="" class="header-img1"> <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="hero-heading-area heading1"> <h5>Cargonn Logistics Services</h5> <h1 class="main-heading">Power for Seamless Logistics Solutions</h1> <p class="pera">Whether you're a homeowner, business owner, or community leader, a we're here to light up your life with sustainable energy solutions that.</p> <div class="btn-area"> <a href="contact.html" class="header-btn1">Get A Free Estimate <i class="fa-solid fa-arrow-right"></i></a> <a href="contact.html" class="header-btn2">Discover More <i class="fa-solid fa-arrow-right"></i></a> </div> <div class="header-bottom-images"> <div class="img1"> <img src="assets/img/all-images/header-bottom.png" alt=""> </div> <div class="content"> <ul> <li><i class="fa-solid fa-star"></i></li> <li><i class="fa-solid fa-star"></i></li> <li><i class="fa-solid fa-star"></i></li> <li><i class="fa-solid fa-star"></i></li> <li><i class="fa-solid fa-star"></i></li> </ul> <p><span>4k</span>Happy Client</p> </div> </div> </div> </div> <div class="col-lg-6"> <div class="circle-arrow"> <a href="#"> <img src="assets/img/elements/circle1.png" alt="" class="keyframe5 circle1"> <img src="assets/img/icons/arrow1.svg" alt="" class="arrow1"> </a> </div> </div> </div> </div> </div> </div> <!--===== HERO AREA ENDS =======--> <!--===== ABOUT AREA STARTS =======--> <div class="about1-section-area sp1"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6"> <div class="about-images-area"> <div class="img1" data-aos="zoom-out" data-aos-duration="1000"> <img src="assets/img/all-images/about-img1.png" alt=""> </div> <div class="img2" data-aos="zoom-out" data-aos-duration="1100"> <img src="assets/img/all-images/about-img2.png" alt=""> </div> <div class="conter-area" data-aos="zoom-out" data-aos-duration="1200"> <h3><span class="counter">12</span>+</h3> <p>Years of Experienced</p> </div> </div> </div> <div class="col-lg-6"> <div class="about-header-area heading2"> <h5>About Us</h5> <h2 class="tg-element-title">Charged with Purpose to Shaping Future of Energy</h2> <p data-aos="fade-left" data-aos-duration="1000">We more than just a provider of Logistics services - we're pioneers in the energy industry, dedicated to shaping a brighter, more sustainable future for all.</p> <div class="space10"></div> <ul data-aos="fade-left" data-aos-duration="1100"> <li><img src="assets/img/icons/check1.svg" alt="">Highlight the unique features or benefits</li> <li><img src="assets/img/icons/check1.svg" alt="">Our Commitment to Sustainable Energy</li> <li><img src="assets/img/icons/check1.svg" alt="">Present your main solutions/services.</li> </ul> <div class="btn-area" data-aos="fade-left" data-aos-duration="1200"> <a href="about.html" class="header-btn1">About Us <i class="fa-solid fa-arrow-right"></i></a> </div> </div> </div> </div> </div> </div> <!--===== ABOUT AREA ENDS =======-->
// HOMEPAGE1 HEADER STARTS // .homepage1-body{ .header-area.homepage1 { position: absolute; width: 100%; z-index:9999; padding: 16px 0; transition: all .4s; .header-elements { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; position: relative; border-radius: 4px; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(10px); transition: all .4s; .main-menu{ position: relative; ul { li { display: inline-block; position: relative; &:hover { ul.dropdown-padding{ visibility: visible; transition: all 0.5s ease-in-out; opacity: 1; z-index: 9; top: 50px; position: absolute; transition: all .4s; } } a { font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s18); font-weight: var(--ztc-weight-medium); color:var(--ztc-text-text-1); display: inline-block; transition: all .4s; padding: 0 20px; } &:hover > a{ transition: all .4s; color:var(--ztc-text-text-2)!important; } ul.dropdown-padding { visibility: hidden; opacity: 0; box-shadow: rgb(0 0 0 / 20%) 0px 20px 30px; position: absolute; background:var(--ztc-text-text-1); top: 100px; width: 225px; z-index: 1; transition: all .4s; border-radius: 5px; padding: 15px; li.main-small-menu { position: relative; &:hover > a{ transition: all .4s; padding-left: 25px; color: var(--ztc-text-text-2); } &:hover > a::after{ background: var(--ztc-text-text-2); transition: all .4s; visibility: visible; opacity: 1; color: var(--ztc-text-text-2); } } li { display: block; a { font-family: var(--ztc-family-font1); font-weight: var(--ztc-weight-medium); transition: all .4s; padding: 8px; display: inline-block; position: relative; z-index: 1; border-radius: 4px; color: var(--ztc-text-text-3); &::after{ position: absolute; content: ""; height: 2px; width: 10px; transition: all .4s; z-index: -1; left: 10px; top: 21px; border-radius: 4px; display: inline-block; visibility: hidden; opacity: 0; background: var(--ztc-text-text-2); } &:hover{ padding-left: 25px; color: var(--ztc-text-text-2); &::after{ border-radius: 4px; visibility: visible; transition: all .4s; opacity: 1; } } } } } } } } } } } .header-area.homepage1.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: var(--ztc-text-text-3); padding: 0; transition: all .4s; .header-elements { background: none; transition: all .4s; padding: 20px 0; } } // HOMEPAGE1 HEADER ENDS //
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.
Vikinglab