1. Item Name : Natha – Personal Portfolio HTML Template
2. Created: 26 April 2026
3. Item Version : v 1.0.0
4. Author : Alif Theme
5. Support: themealif@gmial.com

We would like to thank you for choosing Natha – Personal Portfolio HTML Template.

Getting started

Natha is a clean and modern HTML5 , Bootstrap Construction Template. We have built Natha to be as compatible as possible so that you can use it for any of your needs. It’s suitable for any Construction website.

Template Features

After purchasing Natha HTML template on themeforest.net with your Envato account, go to your Download page. You can choose to download Natha HTML template package which contains the following files:

The contents of the template package downloaded from ThemeForest

Articles

• HTML Structure
• CSS Files and Structure
• JavaScript Files

HTML Structure

This template is a fixed layout with four columns. The main contents are inside the 'body' tag divided into differt section (i.e. header, banner, services,... footer etc.). The general template structure is the same throughout the template. Here is the general structure.

SCSS Files and Structure

This template is built with SCSS for easy customization and better code organization. All style files are separated into reusable partials, and the main stylesheet compiles everything into a single main.css file.

CSS Files and Structure

We are using one customed CSS files (main.css) and several vendor css files. CSS file structure is as follows:

JavaScript Files

There is a custom .js file named main.js and are several vendor js files as plugins. We are using jQuery(a javascript library) instead of vanilla javascript. Our file structure is a follows:

• Changing Images
• Changing Brand Logo

Changing Images

To change any images of the website

1. Carefully collect the source name of the image (i.e. hero.jpg)
2. Open the file called images.
3. Find the particular image file.
4. Replace the file with your image.
5. Make sure that the file name does not change.The file name should be the same.

Example: Suppose you want to change the following image file:

You have to do the following to change this image with your own image:

1. Open the file called images.
2. Find the particular image file called team-1.jpg
3. Replace the file with your image
4. Make sure that the file name does not change.

Note

Images seen in the live preview are only set for preview purposes. They are not included in the download files.

Changing Brand Logo

To change any images of the website

1. Carefully collect the source name of the image (i.e. logo.svg)
2. Open the file called images.
3. Find the particular image file.
4. Replace the file with your image.
5. Make sure that the file name does not change.The file name should be the same.

Example: Suppose you want to change the following image file for change your logo:

We have used scss for this project to write css. If you are familiar with scss you should customize only the .scss files. Please make sure you compile the main.scss file after you have made changes in any of the .scss files.

Changing default template colors

• Bootstrap
• jQuery
• GSAP
• Swiper.js
• Magnific Popup
• Isotope
• imagesLoaded
• Splitting.js
• Nice Select
• Odometer