4GREEN Landing Page Bootstrap Template

4GREEN documentation version 1.0


Basic information

  • Template Name : 4GREEN Landing Page Bootstrap Template
  • Template Version : v 1.0
  • Author : UI2Fly

Pages & Structure of Template #back to top

Pages

  • index.html is the main landing page with default header
  • project-info.html is the single project details page
  • carousel-header.html is the carousel header version
  • video-header.html is the video header version


Folders

  • assets contains 2 folders: css (style.css and venobox.css) and img folders
  • js contains the main.js and venobox.min.js
  • lib contains the folders of the external libraries used in the template
  • vendor contains third-party libraries used by Bootstrap

Fonts #back to top

In the head section you find the fonts used in the template

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap" rel="stylesheet">

Template Customization #back to top


How To Change the Logo - #back to top

You can change the Logo in the NAVIGATION section in the lines:

<img class="logo horizontal-logo" src="assets/img/logo.png" alt="4GREEN logo">


How To Customize the Carousel Header - #back to top

You can change the Carousel Header slide text in carousel-header.html in the HEADER section, in the lines:

<h1 class="animate__animated animate__fadeInLeft">Your title</h1>
<p class="animate__animated animate__fadeInRight">Your text... </p>


You can change the Carousel Header background image in assets/css/style.css in the lines:

#carousel .carousel-item.first { background-image: url("../img/slides/your_slide.jpg"); }

How To Customize the Header Video Background - #back to top

You can change the Header Video Background text in video-header.html in the HERO section, in the lines:

<p data-aos="fade-up">Your small text</p>
<h1 class="display-3" data-aos="fade-left">Your TITLE</h1>
<h2 data-aos="fade-right">Your tagline</h2>


You can change the video in the Header Video Background in video-header.html in the HERO section, in the lines:

<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
<source src="assets/img/your-video.mp4" type="video/mp4"> </video>

How To Customize the Skills Bars - #back to top

You can customize the Skills Bars in the SKILLS section in the lines:

<div class="skill">YOUR SKILL</div>
<div class="bar" data-width="95%">
<div class="bar-inner">
</div> <div class="bar-percent">95%</div>
</div>

How To Add a Project - #back to top

You can add a project filter navigation item in the PORTFOLIO section in the lines:

<ul id="portfolio-flters"> <li data-filter="*" class="filter-active">All</li> <li data-filter=".deforestration">Your item</li> <li data-filter=".deforestration">Your item</li> </ul>

You can add a project in the PORTFOLIO section in the lines:

<figure> <img src="assets/img/portfolio/your-project1.jpg" alt="Portfolio Image">
<a href="assets/img/portfolio/your-project1.jpg" class="link-prev" data-lightbox="portfolio"> <i class="far fa-eye"></i></a>
<a href="project-info.html#project-info" class="link-details" target="_blank"> <i class="fa fa-link"></i></a>
<a class="portfolio-title" href="#">Project One</a> </figure>

How To Customize Single Project carousel - #back to top

You can customize Single Project carousel in project-info.html the PORTFOLIO DETAILS section, in the lines:

<div class="owl-carousel project-info-carousel"> <img src="assets/img/portfolio/yourProject-img1.jpg" class="img-fluid" alt="Project information">
<img src="assets/img/portfolio/yourProject-img2.jpg" class="img-fluid" alt="Project information">
<img src="assets/img/portfolio/yourProject-img3.jpg" class="img-fluid" alt="Project information">
</div>

Thank you for purchasing 4GREEN template.
Best Regards!