## Getting Started A bit about getting started with your Html project.

### 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
      - icon.woff2
      - bootstrap.css
      - fileinput.min.css
      - fonts.css icon.woff2
      - jquery-ui.css
      - style.css
      - theme-color.css
    - font
    - images
    - js
      - slick.js
      - blazy.min.js
      - bootstrap.min.js
      - custom.js
      - custom_validation.js
      - html5shiv.js
      - image-upload-24.js
      - imageuploadify.min.js
      - jquery.min.js
      - jquery.simplePagination.min.js
      - jquery.validate.min.js
      - jquery-ui.js popper.min.js
      - respond.min.js
      - select-opt.js
    - index.html
    - all-listing.html
    - listing-details.html
    - login.html
    - pricing-details.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:

- Visual Studio Code (Recommended)
- Sublime Text (Recommended)
- Notepad++ (Windows)
- TextMate (Mac)

## Included Files A bit about the template files included in the theme.

### Html Files

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

File Name | Description
--- | ---
All main folder files | Admin files
admin/ | Listing files
classifieds/ | Classifieds Ads files
jobs/ | Job files
news/ | News & Magazines files
places/ | Explore travel files
service-experts/ | Service experts files
Files start with "db-" prefix | User dashboard files
index.html | The main home page template, this page has covered search option, services, trending category, top service provider, feature events and more..
all-listing.html | All listing page have lot of special features like instent search, quick view, quick enquiry, get quote, category filter, feature filter, sub category filter, rating filter, post ads and more
listing-details.html | This detail page show up the listing details like listing name, address, contact details, listing guarantee, services offer, photogallery, special offers, 360 degree view, map, rating and reviews and more options
login.html | This login page help ful to make user login, sign-up and forgot password
pricing-details.html | This page showing listing pricing details and all.

The main html template file is `index.html`

### Css Files

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

- css/
  - bootstrap.css
  - fileinput.min.css
  - jquery-ui.css
  - style.css
  - theme-color.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/
  - slick.js
  - blazy.min.js
  - bootstrap.min.js
  - custom.js
  - custom_validation.js
  - html5shiv.js
  - image-upload-24.js
  - imageuploadify.min.js
  - jquery.min.js
  - jquery.simplePagination.min.js
  - jquery.validate.min.js
  - jquery-ui.js popper.min.js
  - respond.min.js
  - select-opt.js

The main javascript files of the theme is `custom.js`

### Icon Files

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

- css/
  - Materializecss Icons
  - fonts.css
  - icon.woff2

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

view more Materializecss Icons MaterializeCSS Icons

## Coding Structure A bit about the usuage of the advanced functions.

##### 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, login details and search options
3. Services category : This section showing the service category
4. Trending cetegory : Contain the trending categoy listings
5. Top service providers : This section showing the top service provider details
6. Feature events : This section showing the feature event with image and caption
7. Footer add business banner :
8. Footer : This footer section common for all pages and it's covered quick support, top category, trending category and more quick links.

##### 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.

## Tutorials A bit about the usuage of the advanced functions.

### HOME PAGE

##### 3.1.1: Change logo

1. Open up `index.html` from the /HTML/ folder
2. On find this class".ic-logo ", here update your logo path.

##### 3.1.2: Searchbox value update

1. Open up `custom.js` from the /HTML/js folder
2. Go to search function
3. Common search: Update your search terms one by one.
4. City search: Update your city names one by one.

##### 3.1.3: Home page services box

1. Open up `index.html` from the /HTML/ folder
2. Image size: Service category image size should be 640 X 480 px
3. Image format: You better to use .JPG, .PNG or .JPEG image format
4. Image compressed: Please compressed your images before upload to server, it's helpful for increase page loading time. You can use this website for compress your images www.tinypng.com

##### 3.1.4: Home page trending category

1. Open up `index.html` from the /HTML/ folder
2. Image size: Trending category background image size should be 640 X 960 px
3. Image size: Trending category tail image size should be 150 X 150 px
4. Image format: You better to use .JPG, .PNG or .JPEG image format
5. Image compressed: Please compressed your images before upload to server, it's helpful for increase page loading time. You can use this website for compress your images www.tinypng.com

##### 3.1.5: Youtube video

1. Open www.youtube.com
2. Get iframe code from your video(Ex:Right click over the video and copy your iframe code)
3. Open up `index.html` from the /HTML/ folder
4. Find the class name ".country-inn" and replace your ifame code to execting code

### ALL LISTING

##### 3.1.6: All listing page: Add new feature in LHS feature filter

1. Open up `all-listing.html` from the /HTML/ folder
2. You can copy one "li" tag and page it the same place.

##### 3.1.7: All listing page: Add new sub-category

1. Open up `all-listing.html` from the /HTML/ folder
2. You can copy one "li" tag and page it the same place.

##### 3.1.8: ADS banners on LHS

1. Open up `all-listing.html` from the /HTML/ folder
2. Image size: Service category image size should be 590 X 300 px
3. Image format: You better to use .JPG, .PNG or .JPEG image format
4. Image compressed: Please compressed your images before upload to server, it's helpful for increase page loading time. You can use this website for compress your images www.tinypng.com

##### 3.1.9: Add new listing in all listing page

1. Open up `all-listing.html` from the /HTML/ folder
2. Find this class name "all-list-sh".
3. Each and every listings inside the "li" tag
4. If you need any additional listing means you just copy and past "li" tag like below

##### 3.1.10: Listing quick view

1. Open up `all-listing.html` from the /HTML/ folder
2. Once you clicking the "Quick view" button then showing short information on right panel.
3. Mouse leaveing option disable: Just remove below code from `js/custom.js`

##### 3.1.11: Listing rating

1. Open up `all-listing.html` from the /HTML/ folder
2. Rating icons you can refer this link `www.materializecss.com/icons.html`

### LISTING DETAILS

##### 3.1.12: Listing detail: profile and banner image

1. Profile image size: listing banner image size should be 250 X 250 px
2. Banner image size: listing banner image size should be 1600 X 400 px
3. Image format: You better to use .JPG, .PNG or .JPEG image format
4. Image compressed: Please compressed your images before upload to server, it's helpful for increase page loading time. You can use this website for compress your images www.tinypng.com

##### 3.1.13: Listing detail: slider

1. Slider image size should be 700 X 450 px
2. Copy "carousel-item" div and paste it bottom
3. Image format: You better to use .JPG, .PNG or .JPEG image format
4. Image compressed: Please compressed your images before upload to server, it's helpful for increase page loading time. You can use this website for compress your images www.tinypng.com

##### 3.1.14: 360 Degree MAP

1. Find this class name("list-360") on `listing-details.html` from the /HTML/ folder
2. Copy your code from execting code
3. Open your 360 image on google(click share or embed image)
4. Get your iframe code from google and paste execting code
5. Note: Remove all inline css

##### 3.1.14: GOOGLE MAP

1. Open up `listing-details.html` from the /HTML/ folder
2. Get your iframe code from google map
3. Note: Remove all inline css

### LOGIN AND REGISTER

##### 3.1.6: Login

1. Open up `login.html` from the /HTML/ folder

##### 3.1.7: Register

1. Open up `login.html` from the /HTML/ folder

##### 3.1.8: Forgot password

1. Open up `login.html` from the /HTML/ folder

## File Sources A bit about credits & file resources of assets used in theme.

##### Script Sources

- jQuery
- Bootstrap

##### Font Sources

- Google Webfonts
- FontAwesome

##### Css Sources

- Bootstrap 5

##### Image Sources

- Allfreephotos

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

🎉 Tyr our Fully-functioal PHP Bizbook Directory template Try demo now