Alpine • Hotel HTML5 • Template

Template & Documentation by Gomal Themes


First of all, thank you for purchasing the template!
If you have any questions that are beyond the scope of this help file, please feel free to ask your question at: http://themeforest.net/user/GomalThemes.

Template available only on Themeforest.

Author: Gomal Themes
Email: gomalthemes@gmail.com
Created: Tuesday, May 10, 2017
Latest Update: Tuesday, May 10, 2017

PHP files are not integrated on this version! (v1.0)
You can use them if you want to but please, wait until next update!

Due to local security restrictions, some things will not work locally, especially in Chrome.
Everything will work once the files have been uploaded to a webserver.

  1. Folder Structure
  2. HTML Structure
  3. CSS Structure
  4. JavaScript
  5. Icons
  6. Image Slider & Carousel
  7. Swipebox
  8. Rooms
  9. Social Icons
  10. Responsive
  11. Miscellaneous
  12. Contact Form
  13. Sources and Credits
  14. Updates

Plugins

  1. Weather Widget
  2. Owl Carousel

1. Template Folder Structure top

1. Help
2. /HTML/
|-- fonts
|-- css/
|-- images/
|-- js/


2. HTML Structure top

The template is based on Bootstrap Framework - http://getbootstrap.com/

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

	

        
.col-md-1

        
.col-md-1

        
.col-md-1

        
.col-md-1

        
.col-md-1

        
.col-md-1

        
.col-md-1

        
.col-md-1

        
.col-md-1

        
.col-md-1

        
.col-md-1

        
.col-md-1

    

	

        
.col-md-8

        
.col-md-4

    

	

        
.col-md-4

        
.col-md-4

        
.col-md-4

    

	

        
.col-md-6

        
.col-md-6

If you need more info, please visit http://getbootstrap.com/css/#grid


W3C Valid
HTML code is fully valid on validator.w3.org.

3. CSS Structure top

The organization of the CSS is one of our priorities.


Fonts
Icon font is Font Awesome.
Other fonts are included in html fonts folder.

4. Javascript top

The template uses some advanced jQuery functions.
Almost everything is controlled by custom.js

If you want to add more jquery plugins, it's recommended to use custom javascript file.


• Google Map
Edit custom.js for any slider JS and for contact map look into map.js file. For Slides look into below code for of each relevant page.

You can use this code anywhere, just change the class name and image src.


• Javascript Structure
- custom.js - main javascript

5. Icons top

Font Awesome gives you scalable vector icons that can instantly be customized - size, color, drop shadow, and anything that can be done with the power of CSS.

If you need more information, please visit http://fontawesome.io/.

Usage


...
Font Awesome.
Glyph Icons

6. Image Slider & Carousel top

See the Documentation for each slider .

Please see the carousel Shortcodes section (self exploanatory): Carousel

7. Swipebox top

For image popup add following classes to your element link anchor tag, image popup's are applied to only homepage. 

            class="swipebox"
            title="LOREM IPSUM DOLOR SIT AMET"
USAGE
	IMAGE
	LOREM IPSUM DOLOR SIT AMET

8. Rooms top

Use Rooms box anywhere for column sizes follow bootstrap grid.


    

        

            Room 1
            

                

                
            

        

        

            
STANDARD ROOM $199/ Night

            Check Details

10. Current Weather Widget top

A simple jQuery plugin to display current weather data for any location
Weather Widget Source

10. Social Icons top

Icons are retina redy, (font awsome).

Also, you can use all social icons that fontawsome supports. Please note: if you want rounded icons, add class 'rounded'

11. Responsive top

This template is fully responsive.

12. Miscellaneous top

	style.css useful classes:

		MARGINS CLASSES:
			space10
			space20
			space30
			space40
			space50
			space60
			space70
			space80
			space90
			space100
			space110
			space120
            space130
            space140
            space150
            For more useful classes, see style.css && style HTML page.

Javascript effects (lightweight): 
		animated span from bottom

		Available Javascript Effects (add to class):
			- bounce
			- fadeOut
			- fadeIn
			- fadeInLeft
			- fadeInRight
Also, please see Animation Effects - use animation.css.

13. Contact Form top

1- Replace with your URL for ajax call to contact.php

Contact Ajax


2- Replace with your email address

Contact Ajax

15. Updates top

IMPORTANT: Create a backup of your project before any update.
It's highly recommended to create your own css/js files if you make changes.






Carousel/Slider

Carousels
Background Slides

CONTACT US IF YOU HAVE QUESTIONS
- gomalthemes -