Busca en el resumen del documento
• Introduction • Prominent Features • JQuery Files • Css Files • How to • Credits
Restinn Multipurpose Hotel One Page Template Premium Html5 Templates and WP Themes by webinane.com
Introduction: With the exponential growth in the hotel industry, the competition is getting more and more intensity. So, for the success of any newly emerging firm, there arises the need for the application of modern tactics and the innovative tools. That is why the intuitively designed RestInn hotel premium HTML template comes powered with every single feature essential for the immediate success of your project. With this magnificent web product, you can quickly launch a fully-embellished website related to multiple niches, for example, Hotel, Restaurant, Sea-side Destination, a Resort, a Marriage Hall, and so on.
Two unique and finely framed Homepage layouts not only add to its multipurpose utility but also cater to demands of the individuals with versatile tastes. Being light, exceptionally attractive, 100% responsive and fully SEO optimized, the all new RestInn is sure to fetch maximum traffic over the World Wide Web and serve as a source of great inspiration for the global clients. The extraordinary appeal of this easy-to- work-with web building tool rests in its economy, perfect symmetry, super awesome graphics, ultra-fine coding, and bonus plugins, i.e. save at least $18 on account of the free-of-cost provision of Revolution Slider ($14) and fully functional Contact Form ($4).
On either of the available Homepage layouts, you will find a number of unique features, such as unparalleled Header designs, pleasant Main Menu styles, sophisticated color schemes and wonderful background pattern of the boxed layout that will fascinate the onlookers at the very first sight. The first of the Main Menu styles is horizontally placed, while the second one comes in the form of an awe-inspiring dropdown style. The majority of the sections, in both the Homepages, have parallax backgrounds, but in the first section of Homepage 2, there is a video background. On the top of the header, you have options for the Google Maps and Booking Form. If you click on the latter, a full-fledged Booking Form appears as a pop-up window with step-by-step filling options, which will enable the clients reserve a room, a meeting hall or any other thing of their interest in the hotel.
Versatile additional features include social media buttons, Google Fonts & Font Awesome icons, extra- pleasant mouse-hover animations, and multiple post formats, namely, Standard, Image, Audio, Video, Gallery, Blog, and the like. In addition, two Testimonial Styles, Masonry Blog and Single Post pages, hotel history timeline and parallax footer are considered to be of great appeal for the modern web- builders.
Our Moto The sole determination of our highly skilled and devoted team workers is to bring innovation in the field of template development that will provide the users with something that they would have never experienced ever before. While the website designing is becoming a promising business, there are also many serious and complex issues that are being faced by the global web community. The same, otherwise, disappointing problems are being addressed here for the utmost facilitation and convenience of the clients.
Prominent Features: • Neat, clean, symmetrical, attractive and fully flexible layout • 100% Responsive and cross-browser compatible • Two Unique and fully-featured Homepage Styles • Extremely lightweight & quick page loading • Uniquely styled sticky Header • Fully Functional Contact Form (save $4) • Boxed and wide layout • Free Revolution Slider plugin (save $14) • Buttons for Google Maps and Booking Form on Header • Advanced built-in SEO features • Parallax & Video Backgrounds • 5 Predefined Color Schemes • Boxed and Wide Layouts with multiple background patterns • Multiple post formats, i.e. Blog, Audio, Video, Standard Post, Simple Text Post, Gallery, etc. • Cool & catchy mouse hover animations • Parallax Footer • Filterable Rooms Categories • Hotel History Timeline • "Make a Reservation" Parallax Form • Two Testimonial Styles • Beautiful "Tabs & FAQs" section • Masonry Blog Post and Single Post Page • Our Branches and Special Rooms sections • Complete and detailed documentation • 5-Stars fetching post-purchase customer support
JQuery Files: • BOOTSTRAP.MIN.JS
It is a BootStrap file which has been named as “bootstrap.min.js”. Certain elements (such as tabs) in the template have been designed with the help of this file.
It has been used in the Date Picker Calendar in the section of “Room Booking Form”.
The feature of Light Box, present anywhere on the theme, is rendered by html5lightbox. It is also to be noted that the Dastak template is fully responsive and can be displayed on any screen size
• jquery.isotope.js & Masonary.js
The Masonary styles are built with the help of these plugins
It has been used in the working AJAX Contact Form.
This plugin has been used for the customizing the “select box”.
The changing text tags in the template have been made functional with the help of this plugin.
• jquery.themepunch.plugins.min.js & jquery.themepunch.revolution.min.js
Both of these jQuery files are being used in the Revolution Slider.
This particular jQuery file renders functionality to all the other jQuery files featured in the Dastak template.
The feature of Owl Carousel, provided at different places in the template, owes its functionality to owl.carousel.min.
As the very name suggests, the animations appearing on the screen items are based on this jQuery file.
It contains all the jQuery functions that have been incorporated in the template.
The “Scroll to Top” button, provided on every page of the template, makes use of this file.
Css Files: • animate.css
This CSS file renders animation effects to different items on the screen which seem to be
pleasantly dynamic as you scroll down the page.
As the theme has been developed on ‘bootstrap’, all the styles of this framework are based on this CSS file.
It has been used in the Date Picker Calendar in the section of “Book the Event”.
It is being used in the Owl Carousel and renders it charming effects.
This CSS file gets automatically activated when you are using the template on smaller or larger screen sizes.
As the name suggests, this file belongs to the Revolution Slider.
This is the main style file on which the overall styling of the template is based.
• blue.css, brown.css, green.css, purple.css & red.css
There are 5 color schemes featured in the template, each of which is contained in an individual CSS file. Each of the 5 files, present in the “CSS” folder, is named after respective color.
HOW TO CHANGE THE COLOR SCHEME ON ANY OF THE BUILT-IN HTML PAGES? 5 different color schemes are provided with the Restinn HTML template, namely, Blue, Red, Green, Brown, Purple. As default, Brown color scheme has been applied on all the pages. In case you want to change the color scheme from Brown to any other, just go to the HTML coding of that page and locate the following ‘link tag’ inside the ‘head tag’:
<link rel="stylesheet" type="text/css" href="css/brown.css" title="brown" />
Here, you need to replace brown” in ‘red.css’ and ‘title=“red’ with any other color name that you want to apply, such as Blue, Brown, Green, Purple, Red. For example, you replace Brown with Red, as shown below:
<link rel="stylesheet" type="text/css" href="css/red.css" title="red" />
In this way, the pink color scheme will be applied to the given page of the template.
HOW TO CHANGE THE BACKGROUND IMAGE FOR THE PARALLAX SECTIONS? The background image for the parallax sections appears due to the following code:
<div class="fixed-bg sec-bg"></div>
There are 7 background images given in this template. You can use any image in any parallax section, just by changing the class name i.e. "sec-bg1", "sec-bg2", "sec-bg3" … "sec-bg7". You can use any one from the following for each parallax section:
<div class="fixed-bg sec-bg1"></div> <div class="fixed-bg sec- bg2"></div> <div class="fixed-bg sec-bg3"></div> <div class="fixed-bg sec-bg4"></div> <div class="fixed-bg sec-bg5"></div> <div class="fixed- bg sec-bg6"></div> <div class="fixed-bg sec-bg7"></div>
HOW TO CONVERT THE TEMPLATE LAYOUT from “Wide Style” TO “BOXED STYLE? It is very simple to display your website in boxed style. On every html page, there is a div given with the class name "theme-layout" , i.e.
You just need to add a class "boxed" with this, and that html page will be converted to the boxed layout.
When your website is converted to boxed style, you will also need an attractive body background to make it look beautiful. For this purpose, you need to add a class in <body> tag. For the sake of your convenience, we have given four background patterns and four background images. You can apply any of these according to your taste.
If you want to use any of the 10 given background images in the boxed version, you need to choose and add one class with the <body> tag from the following classes:
If you want to use background image in the boxed version, you need to choose and add one class with the <body> tag from the following classes
<body class="bg1"> <body class="bg2"> <body class="bg3">
HOW TO MANAGE GAPS BETWEEN THE SECTIONS? For the top and bottom spacing for each section, the class "block" has been used, which applies 90 pixels spacing to the section from the top and bottom. (NOTE: THE BLOCK CLASS HAS NOT BEEN USED IN THE PARALLAX SECTIONS. PARALLAX SECTIONS HAVE DEFAULT SPACING OF 80 PIXELS FROM TOP AND BOTTOM.)
You can manage the inter-section spacing easily according to your page flow. If you are using the white section and the parallax section alternately, you will be using <section class="block"> class in white sections only, as the parallax sections already have same spacing by default.
If you wish to use white sections consecutively one after the other, then there is some work to do. When you use white sections one after another, the "block" class will apply spacing to every white section from top and bottom, and you will face extra spacing between the two white sections. To avoid this just add
class "remove-gap" in the "block" class, of the sections in which you don’t want the top space.
Credits The credit for the development of this Restinn Multipurpose Hotel One Page Template goes to:
• Font Awesome Icons: http://fortawesome.github.io/Font-Awesome/icons/ • Elements : http://codepen.io/ • Wizard From : http://www.dynamicdrive.com/ • Bootstrap : http://getbootstrap.com/