documentation

Altours

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 - Pages html file
  - HTML/pages/Destination - Destination html file
  - HTML/pages/Tour - Tour html files
  - HTML/pages/Blog - Blog html files
  - HTML/pages/Shop - Shop html file
  - 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 have these HTML files.:
- HTML/index.html - HomePage html file
- HTML/pages - Contains all the HTML pages:
  1. HTML/pages/About - About html Files
    - HTML/pages/About/About.html - About Us html file
    - HTML/pages/About/Team.html - Team html file
    - HTML/pages/About/Testimonials.html - Testimonials html file
    - HTML/pages/About/Faqs.html - Faqs html file
  2. HTML/pages/Pages - Other pages html Files
    - HTML/pages/Pages/Gallery.html - Gallery html file
    - HTML/pages/Pages/Login.html - Login html file
    - HTML/pages/Pages/Register.html - Register html file
    - HTML/pages/Pages/Reset-Password.html - Reset Password html file
  3. HTML/pages/Destination - Destination html files
    - HTML/pages/Destination/Destinations.html - Destinations html file
    - HTML/pages/Destination/Single-Destination.html - Single Destination html file
  4. HTML/pages/Tour - Tour html files
    - HTML/pages/Events/Tour-Packages.html - Tour Packages html file
    - HTML/pages/Events/Single-Tour.html - Single Tour html file
  5. HTML/pages/Blog - Blog html files
    - HTML/pages/Blog/Blog-Grid.html - Blog Grid html file
    - HTML/pages/Blog/Blog-List.html - Blog Standard html file
    - HTML/pages/Blog/Single-Blog.html - Single Blog html file
  6. HTML/pages/Shop - Shop html files
    - HTML/pages/Shop/Shop-Grid.html - Shop Grid html file
    - HTML/pages/Shop/Shop-List.html - Shop Standard html file
    - HTML/pages/Shop/Single-Product.html - Single Product html file
    - HTML/pages/Shop/Cart.html - Cart html file
    - HTML/pages/Shop/Checkout.html - Checkout html file
  7. HTML/pages/Contact – Contact html file
    - HTML/pages/Contact/contact.html - contact html file

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="#" class="scroll-top" >
    ......
  </a>
  <!-------------------- Scroll-Top Area (End) -------------------->



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



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



  <!-------------------- Search-Tour Area (Start) -------------------->
  <section class="home-search-tour" >
    ......
  </section>
  <!-------------------- Search-Tour Area (End) -------------------->



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


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



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


  
  <!-------------------- Gallery Area (Start) -------------------->
  <section class="gallery" >
    ......
  </section>
  <!-------------------- Gallery Area (End) -------------------->



  <!-------------------- Discount Area (Start) -------------------->
  <section class="discount-banner" >
    ......
  </section>
  <!-------------------- Discount Area (End) -------------------->



  <!-------------------- Popular Destinations Area (Start) -------------------->
  <section class="destinations" >
    ......
  </section>
  <!-------------------- Popular Destinations Area (End) -------------------->



  <!-------------------- Popular Tours Area (Start) -------------------->
  <section class="home-tours tours linear-bg" >
    ......
  </section>
  <!-------------------- Popular Tours Area (End) -------------------->



  <!-------------------- Team Area (Start) -------------------->
  <section class="team" >
    ......
  </section>
  <!-------------------- Team Area (End) -------------------->



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



  <!-------------------- Blogs Area (Start) -------------------->
  <section class="blog main" >
    ......
  </section>
  <!-------------------- Blogs 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- Swiper Pagination
10- Sidebar Heading CSS
11- Sidebar CSS
*/



/*------------------------------ (01)-Home ------------------------------*/

/*--------------- SECTIONS ---------------*/
/*
1- Home Slider
2- Home Search Tour
3- Services
4- Counter
5- Discount Banner
6- Tours 
7- Testimonials 
8- Blogs
*/



/*------------------------------ (02)-About ------------------------------*/
/*
1- About Us
2- Team
3- Testimonials
4- Faqs
*/



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

/*--------------- COMPONENTS ---------------*/
/* 01- Account-Form */

/*--------------- PAGES ---------------*/
/*
1- Gallery
2- Login
3- Register
*/



/*------------------------------ (04)-Destination ------------------------------*/
/*
1- Destinations
2- Single Destination
*/



/*------------------------------ (05)-Tours ------------------------------*/

/*--------------- COMPONENTS ---------------*/
/* 
01- Search-Tour Form 
02- Tour-Item
*/

/*--------------- PAGES ---------------*/
/*
1- Tour Packages
2- Single Tour
*/



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

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

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



/*------------------------------ (07)-Shop ------------------------------*/

/*--------------- COMPONENTS ---------------*/
/*
01- Filter 
02- Shop Header
03- Product-Item
04- Shop-Title
05- Cart-Summary
06- Quantity Box
*/

/*--------------- PAGES ---------------*/
/*
1- Shop Grid 
2- Shop Standard
3- Single Product
4- Cart
5- Checkout
*/



/*------------------------------ (08)-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 have these JS files.

Global JS files:
- script.js - Custom js file
- nav-link-toggler.js - Mobile navbar toggler
HomePage JS files:
- home-slider.js - Home Slider js files
About Page JS files:
- counter-up.js - Counter Up js file
- testi-slider.js - Testimonials Slider js files
Faqs Page JS files:
- faqs.js - Faqs Accordion
Gallery Page JS files:
- gallery.js - Gallery js file
Tours Page JS files:
- custom-dropdown.js - Custom Dropdown js file
Checkout Page JS files:
- payment-method.js - Payment Method Accordion
Cart & Order List Page JS files:
- quantity.js - Product quantity counter js file
Shop Page JS files:
- Price-Filter.js - Price filter js file
Product Details Page JS files:
- Product-Gallery.js - Product Image Gallery js file
- product-info.js - Product Information js file

In this template, contact 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
  - class.phpmailer.php
  - class.smtp.php
  - PHPMailerAutoload.php
- php/submit.php - Php file where you put your email address that will receive the message after sending through contact 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.

You only have to make little changes in submit.php to get started:

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

Now in 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 Here:

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

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='header-logo'> 
    <h3>Altours</h3> 
  </a>

Image Customization:

This template have these images folders.
- Home Slider Images => (images/Home/) => (1500 x 750)px
- About Images => (images/About/) => (400 x 500)px
- Counter Image => (images/Background/) => (1500 x 750)px
- Discount Background Image => (images/Background/) => (1500 x 750)px
- Tours Background Image => (images/Background/) => (1500 x 750)px
- Testimonials Background Image => (images/Background/) => (1500 x 750)px
- Team Images => (images/Team/) => (400 x 500)px
- Testimonials Images => (images/Testimonials/) => (400 x 400)px
- PageTitle Image => (images/PageTitle/) => (1500 x 500)px
- FAQs Image => (images/FAQS/) => (600 x 600)px
- Gallery Image => (images/Gallery/) => (600 x 400)px
- Destinations Images => (images/Destination/Destinations/) => (600 x 400)px
- Destination Gallery Images => (images/Destination/Des-Gallery/) => (600 x 400)px
- Tours Images => (images/Destination/Tours/) => (600 x 400)px
- Tour Gallery Images => (images/Destination/Tour-Gallery/) => (600 x 400)px
- Tours Reviews Image => (images/Destination/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
- Products Images => (images/Shop/Products/) => (500 x 500)px
- Product-Gallery Images => (images/Shop/Product-Gallery/) => (500 x 500)px
- Product Comments Images => (images/Shop/Comments/) => (200 x 200)px
- Logo Image => e.g. (200 x 200)px

AS_Docs

documentation

Altours

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: