documentation

NatureHills

Thank you so much for purchasing our item from templatemonster.

Follow the steps below to setup your site template:

Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP or localhost in order to use it on your website.
Below is the folder structure and needs to be uploaded to your website or localhost root directory:
- HTML/assets - Contains all of the assets referenced
  - HTML/assets/css - Stylesheet files
  - HTML/assets/images - Images
  - HTML/assets/js - Javacript files
  - HTML/assets/php - Php files
  - HTML/assets/vendors – All external libs.
- HTML/pages - Contains all of the assets referenced
  - HTML/pages/About - About html files
  - HTML/pages/Pages - Other pages html files
  - HTML/pages/Service - Service html file
  - HTML/pages/Project - Project html file
  - HTML/pages/Blog - Blog html files
  - HTML/pages/Shop - Shop html files
  - HTML/pages/Contact – Contact html file
- HTML/index.html - Homepage
You should upload all or specific HTML files as per your need.
You are good to go for adding your content now!

This template contains the following HTML files:
- HTML/index.html – Main homepage of the website.
- HTML/pages – Contains all inner HTML pages:
  1. HTML/pages/About – About-related pages
    - About.html – Company or brand introduction page.
    - Testimonials.html – Customer and client testimonials page.
    - Team.html – Team members listing page.
    - Team-Single.html – Individual team member profile page.
    - Faqs.html – Frequently asked questions page.
  2. HTML/pages/Pages – General informational pages
    - Gallery.html – Image gallery showcasing work or media.
    - Pricing.html – Pricing plans and packages page.
    - Features.html – Key features and highlights page.
    - Process.html – Step-by-step workflow or process explanation.
    - Order-Now.html – Order or service request page.
    - Partners.html – Partners, sponsors, or clients showcase page.
    - Error-404.html – Custom 404 error page.
    - Privacy-Policy.html – Privacy policy and data usage information.
    - Terms.html – Terms and conditions page.
  3. HTML/pages/Service – Services-related pages
    - Services.html – Services overview and listing page.
    - Service-Single.html – Detailed single service information page.
  4. HTML/pages/Project – Project and portfolio pages
    - Projects.html – Portfolio or projects listing page.
    - Project-Single.html – Detailed individual project page.
  5. HTML/pages/Blog – Blog-related pages
    - Blog-Grid.html – Blog posts displayed in grid layout.
    - Blog-List.html – Blog posts displayed in list layout.
    - Blog-Single.html – Single blog post detail page.
  6. HTML/pages/Shop – E-commerce and shopping pages
    - Shop-Grid.html – Products displayed in grid layout.
    - Shop-List.html – Products displayed in list layout.
    - Product-Single.html – Individual product details page.
    - Wishlist.html – Saved or favorite products page.
    - Cart.html – Shopping cart overview page.
    - Checkout.html – Checkout, billing, and payment page.
    - Confirmation.html – Order confirmation and success page.
    - Login.html – Customer login page.
    - Register.html – New account registration page.
    - Reset-Password.html – Password recovery and reset page.
  7. HTML/pages/Contact – Contact-related pages
    - Contact.html – Contact form and business information page.

Open index.html to start editing. Following you can see HTML structure of this file:

<!DOCTYPE html>

<html lang="en">
<head>

<!-- Your Title, Css Libraries, Custom Stylesheets
============================================= -->

</head>

<body>

  <!-------------------- Scroll-Top Area (Start) -------------------->
  <a href="#" id="scroll-top" >
    ......
  </a>
  <!-------------------- Scroll-Top Area (End) -------------------->



  <!-------------------- Header Area (Start) -------------------->
  <header class="header" >
    ......
  </header>
  <!-------------------- Header Area (End) -------------------->



  <!-------------------- Home-Slider Area (Start) -------------------->
  <section class="home" >
    ......
  </section>
  <!-------------------- Home-Slider Area (End) -------------------->



  <!-------------------- Features Area (Start) -------------------->
  <section class="features home-features" >
    ......
  </section>
  <!-------------------- Features Area (End) -------------------->



  <!-------------------- About Area (Start) -------------------->
  <section class="about" >
    ......
  </section>
  <!-------------------- About Area (End) -------------------->



  <!-------------------- Counter Area (Start) -------------------->
  <section class="counting" >
    ......
  </section>
  <!-------------------- Counter Area (End) -------------------->



  <!-------------------- Services Area (Start) -------------------->
  <section class="services">
    ......
  </section>
  <!-------------------- Services Area (End) -------------------->



  <!-------------------- Benefits Area (Start) -------------------->
  <section class="benefits">
    ......
  </section>
  <!-------------------- Benefits Area (End) -------------------->



  <!-------------------- Deal Area (Start) -------------------->
  <section class="deal">
    ......
  </section>
  <!-------------------- Deal Area (End) -------------------->



  <!-------------------- Categories Area (Start) -------------------->
  <section class="categories">
    ......
  </section>
  <!-------------------- Categories Area (End) -------------------->



  <!-------------------- Products Area (Start) -------------------->
  <section class="products">
    ......
  </section>
  <!-------------------- Products Area (End) -------------------->



  <!-------------------- Testimonials Area (Start) -------------------->
  <section class="testimonial-bg" >
    ......
  </section>
  <!-------------------- Testimonials Area (End) -------------------->



  <!-------------------- Process Area (Start) -------------------->
  <section class="process" >
    ......
  </section>
  <!-------------------- Process Area (End) -------------------->



  <!-------------------- Projects Area (Start) -------------------->
  <section class="projects" >
    ......
  </section>
  <!-------------------- Projects Area (End) -------------------->



  <!-------------------- Newsletter Area (Start) -------------------->
  <section class="newsletter-subscribe" >
    ......
  </section>
  <!-------------------- Newsletter Area (End) -------------------->



  <!-------------------- Blogs Area (Start) -------------------->
  <section class="blog main" >
    ......
  </section>
  <!-------------------- Blogs Area (End) -------------------->



  <!-------------------- Partners Area (Start) -------------------->
  <section class="partners home-partners" >
    ......
  </section>
  <!-------------------- Partners Area (End) -------------------->



  <!-------------------- Footer Area (Start) -------------------->
  <footer class="footer" >
    ......
  </footer>
  <!-------------------- Footer Area (End) -------------------->


<!-- JavaScript -->


</body>
</html>

Open any HTML file to start editing in other pages. Following you can see HTML structure of the file:

<!DOCTYPE html>

<html lang="en">
<head>

<!-- Your Title, Css Libraries, Custom Stylesheets
============================================= -->

</head>

<body>

<!-------------------- Scroll-Top Area (Start) -------------------->
<a href="#" id="scroll-top" >
......
</a>
<!-------------------- Scroll-Top Area (End) -------------------->



<!-------------------- Header Area (Start) -------------------->
<header >
......
</header>
<!-------------------- Header Area (End) -------------------->



<!-------------------- Page-Title (Start) -------------------->
<div class="page-title" >
......
</div>
<!-------------------- Page-Title (End) -------------------->



<!-------------------- Page Body (Start) -------------------->
<section class="" >
......
</section>
<!-------------------- Page Body (End) -------------------->



<!-------------------- Footer Area (Start) -------------------->
<footer class="footer" >
......
</footer>
<!-------------------- Footer Area (End) -------------------->




<!-- JavaScript -->


</body>

This template have these CSS files.
- main.css - Stylesheet for main styling
- responsive.css - Stylesheet for responsive styling

The main.css contains specific styling for the page. This file is separated into section using comments.

/*------------------------------ (00)-Global CSS ------------------------------*/
/* 
0- Global CSS
1- Heading CSS  
2- Button CSS
3- Logo Area CSS
4- Page Title CSS
5- Header Area CSS 
6- Footer Area CSS
7- Scroll-Top Area CSS
8- Form CSS
9- Dark Form CSS
10- Swiper Pagination
11- Swiper Navigation
12- CheckBox CSS
13- Sidebar Heading CSS
14- Sidebar CSS
*/



/*------------------------------ (01)-Home ------------------------------*/
/*
1- Home Slider
2- Features
3- Counter
4- Section Slider
5- Benefits
6- Deal
7- Category
8- Products
9- Testimonials
10- Newsletter
11- Blogs
12- Partners Slider
*/



/*------------------------------ (02)-About ------------------------------*/
/*
1- About Us
2- Team
3- Team Single
4- Testimonials
5- FAQs
*/



/*------------------------------ (03)-Pages ------------------------------*/

/*--------------- COMPONENTS ---------------*/
/* 
01- Tab Information
02- Page Single
03- Policy
*/

/*--------------- PAGES ---------------*/
/*
1- Gallery
2- Pricing
3- Features
4- Work Process
5- Order Now
6- Partners
7- Error 404
*/



/*------------------------------ (04)-Service ------------------------------*/
/*
1- Services
2- Service Single
*/



/*------------------------------ (05)-Project ------------------------------*/
/*
1- Projects
2- Project Single
*/



/*------------------------------ (05)-Shop ------------------------------*/

/*--------------- COMPONENTS ---------------*/
/* 
01- Filter
02- Shop Header
03- Quantity Box
04- Product-Item
05- Shop-Title
06- Cart-Summary
07- Address
08- Account-Form  
09- Radio Button
*/

/*--------------- PAGES ---------------*/
/*
1- Shop Grid 
2- Shop Standard
3- Product Single
4- Wishlist
5- Cart
6- Checkout
7- Order Confirmation
8- Login
9- Register
*/



/*------------------------------ (06)-Blog ------------------------------*/

/*--------------- COMPONENTS ---------------*/
/*
01- Blog-Item
02- Comment 
03- Pages-No
*/

/*--------------- PAGES ---------------*/
/*
1- Blog Grid
2- Blog List
3- Blog Single 
*/



/*------------------------------ (07)-Contact ------------------------------*/

If you want to edit specific section of the file, just find the right label in the CSS file, and then start editing the appropriate style that you want to edit.

This template includes the following JS files:

Global JS files:
- script.js – Handles common site-wide JavaScript functionality.
- nav-link-toggler.js – Controls mobile navigation menu toggle behavior.
- page-gallery.js – Enables lightbox popup for page-level image galleries.
Home Page JS files:
- home-slider.js – Controls the main homepage slider using Swiper.
- partner-slider.js – Displays and animates partner/client logos carousel.
- category-slider.js – Manages category-based slider layout and behavior.
- deal-counter.js – Runs countdown timer for deals and promotions.
- section-slider.js – Controls reusable content sliders across sections.
- products-tab.js – Switches product tabs and category content dynamically.
About Page JS files:
- counter-up.js – Animates numeric counters when they appear in view.
- testi-slider.js – Controls the testimonial slider animation.
FAQs Page JS files:
- faqs.js – Handles FAQ accordion open and close functionality.
Order Form JS files:
- order.js – Submits the order form via AJAX and shows feedback messages.
Newsletter Form JS files:
- newsletter.js – Handles newsletter form submission and validation.
Contact Form JS files:
- contact.js – Manages contact form submission with AJAX.
Checkout Page JS files:
- payment-method.js – Toggles active payment method sections.
Cart Page JS files:
- quantity.js – Increases or decreases product quantity values.
Shop Page JS files:
- Price-Filter.js – Filters products based on selected price range.
Gallery Page JS files:
- gallery.js – Initializes gallery layout and image popup interactions.
Projects Page JS files:
- projects.js – Filters project items and enables image lightbox.
Product Single Page JS files:
- Product-Gallery.js – Switches product preview images on thumbnail click.
- product-info.js – Toggles product information tabs (description, reviews, etc.).

In this template, contact, Newsletter and Order form is created using PHP. It include sending email using SMTP server and the PHPMailer library.

This template have these PHP files and folder.
- php/smtp - Contains php mailer files
  - Exception.php
  - PHPMailer.php
  - SMTP.php
- php/submit.php - PHP file where you configure your email address to receive messages sent through the general contact form.
- php/newsletter.php - PHP file where you configure your email address to receive messages sent through the newsletter subscription form.
- php/order.php - PHP file where you configure your email address to receive messages sent through the order form.
creating an app password:
- Step#1: Login to Google Account
- Step#2: Enable 2-Step Verification
  - First, you have to enable the 2-Step Verification on your account before you set up the app password.
  - Click on the Security tab on the left-hand side.
  - Go to the Security page and within the section Signing in to Google, click on 2-Step Verification.
  - Click on Get Started and on the next page enter your password to verify your account and hit Next.
  - enter the phone number you want to use for verification and then select the method to receive your code.
  - Enter the verification code & hit Next.
- Step#3: Setup Application password
  - Within the section Signing in to Google, you will notice a new option that says App passwords.
  - Click on App passwords and verify your account.
  - select Mail from Select app and Other (custom name) from Select device and provide it a name and hit generate.
  - Now you have successfully generated your app password. The App Password is the 16-character code in the yellow bar on your device.
  - Copy this code and save it somewhere safe to use it later as instructed.

To make your contact, newsletter and order form functional, you only need to make a few changes in the following files: submit.php, newsletter.php and order.php .

In the Username field, you have to enter your Gmail ID which you want to use as an SMTP server:

    // Gmail ID which you want to use as SMTP server
    $mail->Username = "your_email@gmail.com"; // (Your Mail)

In the Password field, you have to enter your Gmail App password (that you have created above):

    // App Password
    $mail->Password = "Your App Password"; // Your app password

Update the addAddress field, you have to enter another email id in which you want to receive form submission mails

    // Recipient Email ID where you want to receive emails
    $mail->addAddress("your_email@gmail.com", "your name"); // (Your Mail)

Change the Subject of the Notification Email:

    $mail->Subject = "(NatureHills) New Contact Info";

Set the sender's email and name for the confirmation email sent to the user. This sender's email is usually your email address

    $mail->setFrom('your_email@gmail.com', 'your name');  // Sender's email and name

Logo:

you can change logo text here... OR you can put image rather than text.

  
  <!-- Logo -->
  <a class="logo" href="./index.html">
    <img src="assets/images/Logo/Logo.png" alt="logo"> 
    <div class="logo-name">
      <h3><span>Nature</span>Hills</h3>
      <p>agriculture Farm</p>
    </div>
  </a>

Image Customization:

This template have these images folders.
- Home Slider Images => (images/Home/) => (1500 x 1000)px
- Benefits Image => (images/Benefits/) => (500 x 500)px & (300 x 250)px
- Partners Images => (images/Partners/) => (350 x 200)px
- Counter Background Image => (images/Background/) => (1500 x 1000)px
- Contact Background Image => (images/Background/) => (1500 x 1000)px
- Testimonials Background Image => (images/Background/) => (1500 x 1000)px
- Deal Background Image => (images/Background/) => (1500 x 1000)px
- Error Background Image => (images/Background/) => (1500 x 1000)px
- Footer Background Image => (images/Background/) => (1500 x 1000)px
- Newsletter Background Image => (images/Background/) => (1500 x 1000)px
- PageTitle Background Image => (images/Background/) => (1500 x 1000)px
- Order Background Image => (images/Background/) => (1500 x 1000)px
- About Images => (images/About/) => (500 x 500)px
- Teams Images => (images/Team/) => (400 x 400)px
- Testimonials Images => (images/Testimonials/) => (200 x 200)px
- Process Images => (images/Process/) => (600 x 400)px
- Gallery Images => (images/Gallery/) => (1500 x 1000)px
- FAQs Images => (images/FAQs/) => (500 x 500)px
- Services Images => (images/Service/Services/) => (600 x 400)px
- Service Gallery Images => (images/Service/Service-Gallery/) => (600 x 400)px
- Projects Images => (images/Project/Projects/) => (600 x 400)px
- Project Gallery Images => (images/Project/Project-Gallery/) => (600 x 400)px
- Product Category Images => (images/Shop/Category/) => (500 x 500)px
- Products Images => (images/Shop/Products/) => (500 x 500)px
- Product Gallery Images => (images/Shop/Product-Gallery/) => (500 x 500)px
- Product Reviews Images => (images/Shop/Reviews/) => (200 x 200)px
- Blogs Images => (images/Blog/Blogs/) => (600 x 400)px
- Blog Gallery Images => (images/Blog/Blog-Gallery/) => (600 x 400)px
- Blog Comments Images => (images/Blog/Comments/) => (200 x 200)px
- Logo Image => e.g. (200 x 200)px

AS_Docs

documentation

NatureHills

Installation

HTML structure

CSS Files and Structure

Javascript Files

php

Step#1: Login to Google Account

Step#2: Enable 2-Step Verification

Step#3: Setup Application password

Customization

Logo:

Image Customization:

Source & Credits

Images:

Icons:

Google Font:

Scripts: