TravelHotel, Tour and Travels Booking HTML Responsive Template

Overview

After downloaded the template package from Themeforest, unzip it if you haven't already. Inside the package you will find the following files and folders:

• World Tour
  • Documentation
  • HTML
    • css
      • bootstrap.css
      • font-awesome.min.css
      • animate.css
      • radio.css
      • mob.css
      • style.css
      • materialize.css
    • font
    • images
    • js
      • bootstrap.js
      • custom.js
      • html5shiv.js
      • jquery-latest.min.js
      • respond.min.js
      • wow.min.js
      • materialize.min.js
      • jquery-ui.js
    • index.html
    • about.html
    • family-package.html
    • group-package.html
    • honeymoon-package.html
    • regular-package.html
    • weekend-package.html
    • places.html
    • places-1.html
    • places-2.html
    • tour-book.html
    • tour-details.html
    • hotels-list.html
    • hotel-details.html
    • booking.html
    • booking1.html
    • events.html
    • price-list.html
    • testimonials.html
    • tips.html
    • discount.html
    • blog.html
    • blog-inner.html
    • contact.html
    • faq.html
    • sitemap.html
    • 404.html
    • dashboard.html
    • db-all-payment.html
    • db-event-booking.html
    • db-event-details.html
    • db-hotel-booking.html
    • db-hotel-details.html
    • db-my-profile.html
    • db-my-profile-edit.html
    • db-payment.html
    • db-refund.html
    • db-travel-booking.html
    • db-travel-details.html
    • register.html
    • login.html
    • forgot-pass.html

Installion

Follow these easy steps to install the template from scratch:

1. Connect to your website with an Ftp client (eg. FileZilla)
2. Upload the contents of the whole /Template folder to your desired root folder
3. Once uploaded, edit the template files according to your needs, than save
4. Refresh your browser in order to see the modifications

Editing

To edit the files in this template, you need a text / code editor software installed on your computer. Below, there are some popular free code editor softwares:

• Sublime Text (Recommended)
• Notepad++ (Windows)
• TextMate (Mac)

Html Files

In the unzipped archive, you will find the following html template files:

The main html template file is index.html

Css Files

In the HTML/css folder, you will find the following structure:

• css/
  • bootstrap.css
  • font-awesome.min.css
  • animate.css
  • radio.css
  • mob.css
  • style.css

The default css stylesheet of the theme is style.css

Script Files

In the HTML/js/ folder, you will find the following structure:

• js/
  • bootstrap.js
  • custom.js
  • html5shiv.js
  • jquery-latest.min.js
  • respond.min.js
  • wow.min.js

The main javascript files of the theme is custom.js

Font Files

In the HTML/fonts/ folder, you will find the following structure:

• fonts/
  • FontAwesome
  • fontawesome-webfont.eot
  • fontawesome-webfont.svg
  • fontawesome-webfont
  • fontawesome-webfont.woff
  • fontawesome-webfont.woff2

The above fonts are same font family and it's support all browsers.

view more Font Awesome Icons FontAwesome

3.1: SOURCE CODE STRUCTURE: HEADER SECTION

The header section defind for meta tags, website title, fav icon, google fonts and style sheets(css files)

1. Meta tag : The meta tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document and more
2. Title tag : Title for your website
3. Fav icon : Favicons appear in the browser tab, address bar, browser history, bookmarks bar, etc
4. Google Font : A simple and easy way to add custom google fonts to your website.
5. Style Sheets(CSS Files) Style Sheet files

3.2: SOURCE CODE STRUCTURE: BODY SECTION

The body section defind for header, slider, band, services, free consultant and more..

1. Pre loader : This division shows from before website loading.
2. Header : Contain logo,help line and social media
3. Navigation : Website navigation
4. Slider : Contain slide show
5. Quick Enquiry : Contain phone, email, social media and quick enquiry
6. Top tour packages(Home Package) : This section show some important tour packages
7. Free Consultant : Contain contact details
8. Events : This section shows world event list
9. Popular places : This section shows world popular places
10. Request a quotes : Qutes enquiry send from your mail id using PHP form

3.3: SOURCE CODE STRUCTURE: FOOTER SECTION

The footer section defind for tips before travel, popular travels, contact details and copyrights

1. Tips before travel This section contain Tips before travel, customer testimonials and Arrangements..
2. Footer 1 This section show Offer tour packages and Popular Vacations
3. Footer 2 This section show Address,Subscribe,FAQ,Locations and Social Media.
4. Footer Copyrights Copy rights section
5. Script files All Jquery and JavaScript files here.

3.1.1: TO A CUSTOM COLOR FOR TITLE

1. Open up style.css from the /HTML/css/ folder
2. On find this class".home_title h1 span ", change the value of the color code("#00BCD4") to what ever you needs.

3.1.2: PACKAGE OFFER - TAG

Need a yellow band use "band.png" image

Need a red band use "band1.png" image

3.1.3: Free Consultant

1. Open up index.html from the /HTML/ folder
2. You can modify every thing like title,help line and contact now link

3.1.4: EVENTS

1. Open up events.html from the /HTML/ folder
2. You can add multiple events in this list

3.1.5: TOP TOUR PACKAGES

1. Open up index.html from the /HTML/ folder
2. You can modify and add multiple packages

3.1.6: REQUEST A QUOTE

1. Open up index.html from the /HTML/ folder
2. You don't need any required fields you can remove "required"

3.1.7: TIPS BEFORE TRAVEL

1. Open up index.html from the /HTML/ folder

3.1.8: CUSTOMER TESTIMONIALS

1. Open up index.html from the /HTML/ folder
2. Here you can write one testimonial
3. You can add multiple testimonials to "testimonials.html" page

3.1.9: TOP FAMILY PACKAGES AND ALL PACKAGES

1. Open up family-package.html from the /HTML/ folder
2. Here we have two sections, Left side package image and Right side package descriptions.
3. image size 550px X 350px

3.1.10: BLOG

1. Open up blog.html from the /HTML/ folder
2. Here we have two sections, Left side blog image and Right side blog descriptions.
3. image size 550px X 350px

3.1.11: DISCOUNT

1. Open up discount.html from the /HTML/ folder
2. Here you can add multiple discount packages..

3. open style.css and find class ".pack_title", here you change background image

3.1.12: GOOGLE MAP

1. Open up contact.html from the /HTML/ folder

2. Get your iframe code from google map
3. Note: Remove all inline css

3.1.13: SITEMAP

1. Open up sitemap.html from the /HTML/ folder

Script Sources

• jQuery
• Bootstrap

Font Sources

• Google Webfonts
• FontAwesome

Css Sources

• Bootstrap 3

Image Sources

• Allfreephotos

Note: Images used in the theme preview are only for demo purposes and not included in the main download.