Within the download you'll find the following file structure, logically grouped common assets.

Once downloaded, unzip the compressed folder to see the structure of the template. You'll see something like this:

   Habu Agency HTML Template /
    └───  css/
          ├───  all.min.css 
          ├───  bootstrap.min.css 
          ├───  bootstrap.min.css.map 
          ├───  default.css
          ├───  meanmenu.css
          ├───  normalize.css
          ├───  preloader.css
          ├───  responsive.css
          ├───  slick.css
          ├───  style.css
          └───  video.popup.css
    ├───  images/
          ├───  banner/
          ├───  blog/
          ├───  clients/
          ├───  logo/
          ├───  projects/
          ├───  shapes/
          ├───  svgs/
          ├───  team-members/
    ├───  js/
          ├───  vendor
                └───  modernizr-3.11.2.min.js
          ├───  all.min.js 
          ├───  bootstrap.min.js 
          ├───  bootstrap.min.js.map 
          ├───  isotope.min.js
          ├───  jquery.counterup.min.js
          ├───  jquery.meanmenu.min.js 
          ├───  jquery-1.12.4.min.js
          ├───  main.js
          ├───  slick.js
          ├───  video.popup.js
          ├───  waypoints.min.js   
          └───  wow.min.js
    ├───  webfonts/ 
    ├───  about.html 
    ├───  apple-touch-icon.png          
    ├───  blog.html
    ├───  blog-details.html
    ├───  career.html
    ├───  contact.html
    ├───  faq.html
    ├───  favicon.ico
    ├───  index.html
    ├───  index-2.html
    ├───  portfolio.html
    ├───  portfolio-details.html
    └───  pricing.html

You can easily change logo with some simple steps;

1 Prepare your image; resize it to the width of the current logo in .png or .jpg file for the optimal image size to have a fast loading page.

2 Copy your logo image to /images/logo/site-logo folder. Replace the logo name in the existing code.

<a href="index.html">
  <img class="logo" src="images/logo/site-logo/logo.png" alt="Habu">
</a>

You can easily change any image. Just copy your image url and replace it with the existing url;

<!-- index.html -->
<img src="images/banner/home_banner.png" alt="Habu"></img>

//style.css
section.home-02-banner {
  background-image: url(../images/banner/02_home_banner_bg.png);
}

This template uses 1 font icon set. They are all font icons (vector) and can be styled easily with css. They are also easy to drop in anywhere as you will see in some part of this template.

All Available Icons

Fontawesome Icons

Usage of the icons

Icon Replacement

• Go to Fontawesome Icons
• Select an icon
• Copy the HTML code of the icon

<i class="fas fa-long-arrow-alt-down"></i>

• Replace the existing code in the template with the code you've copied
• See the result in a web browser

Icon Customization

• Call the icon with specificity in .css file, and add styling.

<div class="social-icons">
  <i class="fas fa-long-arrow-alt-down"></i>
</div>

<style>
.social-icons svg {
  font-size: 18px;
  color: #b6b6b6;
  margin-right: 13px;
}
</style>

We have used animate.css and wow.js for the animations you see in homepage and other pages.

Remove Animation

• To remove an animation from an element, just remove the wow and animate__ prefixed classes from that element.

<a href="contact.html" class="wow animate__ animate__flipInX animate__delay-1s large-blue-button">Contact Us</a>

<!-- remove the "wow" and "animate__" prefixed classes, and the animations will be gone -->
<a href="contact.html" class="large-blue-button">Contact Us</a>
                

Add Animation

• To add animation to an element, select an animation from animate.css.
• Then add the selected animation class to the element. See the example for better understand.
• Remember you have to add 2 additional classes wow and animate__animated before that animation class to activate the animation.

<a href="contact.html" class="large-blue-button">Contact Us</a>

<!-- add "wow" and "animate__animated", and then the selected animation class. -->
<a href="contact.html" class="wow animate__animated animate__flipInX large-blue-button">Contact Us</a>
                  

Using Custom Fonts by Google Fonts

You can customize fonts with this simple steps;

1 Go to Google Fonts and select a font.

2 Copy the css embed code for your font and paste it at the top of style.css file

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap');

3 Finally add this custom css code in related css codes