Rentalcars HTML5 Website Template

Premium HTML 5 website

Created: September 2016
By: themetony - Envato author Profile

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us via our support forum http://support.ethemeuk.com/. Thank you very much!

Rentalcars HTML5 Website Template is Html5 + CSS3 Website template and works fine in all major browsers and IE from version 9. It's powered by jQuery and you'll find nice and discreet interactivity. The code is clearly written and you will find comments for each considerable parts.

Lets take a closer look at the structure of Html, Css, JavaScript.

Folder Structure

When you unpack downloaded archive from ThemeForest.net you'll get folder containing 3 folders.

Here they are, sorted alphabetically:

Documentation - Documentation for Rentalcars Website Template HTML site template
HTML - Main folder for template
PSD - Design source files

HTML folder structure:

/HTML
- /assets
  - /css (Template CSS)
  - /images (All Images)
  - - // Default Skin Images
    - /gallery (Gallery Images)
    - /slider (Sliders Images)
  - /js (JS files)
  - /js/plugins (JS external plugins)
  - /scss (SCSS files)
- /font (Font Iconmoon)

CONTENT

Content divided on fourteen pages:

index.html - Home page
about.html - About Us page
fleet.html, details.html - Car fleet page
services.html, services-post.html - Service pages
rates.html - Rate page
ourdrivers.html - Our drivers
tipstesti.html - Tips page
blog.html, single-post.html, blog-masonry.html - Blog pages
contact.html - Contact page
typography.html - Typography page

HTML Structure

Body part of the Html file is divided in three main sections: header, content and footer.

HEADER

Header HTML structure:

	
	
		
		
		
			
				...
				...
				...

Navigation

Default menu HTML structure:

			
				
					Menu Link
					Menu Link
					Menu Link
					...

Navigation menu in resolution more than 768px looks like horizontal navbar:

And navigation menu is collapsed for smaller viewports:

Each menu link is provided in two variants: simple and multilevel

Simple menu link

		Menu Link

Multilevel menu link HTML structure:

						Link Level 1
							
								Link Level 2
									
										Link Level 3
										Link Level 3
											...
										
										Link Level 3
									
								
								Link Level 2

Slider

Main Slider HTML structure:

				
						
						
							 
								 
								 
								
							
							
								
									HTML caption for slide 1
								
							
							
								
									HTML caption for slide 2
								
							
							
								
									HTML caption for slide N

Content

Content HTML structure:

						
						
							
							
								
									
										
											Block Tilte
					                		Block Content
										
									
					            
					        
					        
					        ....
					        
							
								
									
										
											Block Tilte
					                		Block Content

You can add any number of blocks in the content.
Every blocks can be boxed or fullwidth

Boxed block html code

						
						
							
								
									
										Block Tilte 
										Block Content

Fullwidth block html code

						
						
							Block Tilte 
							Block Content

FOOTER

Footer toggle HTML structure:

Page Preloader

Page preloader code:



	
		
		
			
		
	
	Loading...

Grid:

Grid system Bootstrap4 (Flexbox), a sleek, intuitive, and powerful front-end framework.

Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.

		<!DOCTYPE html>
        <html lang="en">
            ...
        </html>

The default Bootstrap grid system utilizes 12 columns.

For a simple two column layout, create a.rowand add the appropriate number of.col-lg-*columns. As this is a 12-column grid, each.col-lg-*spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

		<div class="row">
		  	<div class="col-lg-4">...</div>
		  	<div class="col-lg-8">...</div>
		</div>

Given this example, we have .col-lg-4 and .col-lg-8, making for 12 total columns and a complete row.

Move columns to the right using.col-lg-offset-*classes. Each class increases the left margin of a column by a whole column. For example,.col-lg-offset-4moves.col-lg-4over four columns.

		<div class="row">
            <div class="col-lg-4">...</div>
            <div class="col-lg-4 col-lg-offset-2">...</div>
        </div>

If you need more information about Bootstrap4, please visit this site: https://v4-alpha.getbootstrap.com/layout/grid/

CSS Files

Theme css files is located at css folder.

main-style.css - Theme main CSS file
plugins/*.css - Theme plugins CSS file

SCSS Files

All SCSS files are located at SCSS folder. You can change them and compile new CSS files.

JavaScript

Custom JS file is located at js folder. All external JS plugins are located at js/plugins folder.

If you need more information about external plugins, please visit plugins official sites.

Icons

Icons set was generated by Icomoon App Service. You can see all demo icons in file iconfontfont/demo.html.
Use the icon class on "display:inline" elements:

        	...
        	<i class="icon-arrow-down-sign-to-navigate"></i>
            ...

or

        	...
        	<span class="icon-arrow-down-sign-to-navigate"></span>
            ...

Fonts

To change the custom font, please change these line in HEAD section of the page:

To change fonts, go to http://www.google.com/webfonts, choose new fonts and use the generated code.

Contact Form

You can use default pattern for contact form in contact.html. The HTML form validation script (jquery.validate.min.js) makes sure the data sent through the form is accurate and well formatted. For change the email recipient for those form change the address listed in process-contact.php or in process-contact.php:

 $to = "youremail here";

PSD Files

Design source files located at PSD folder.

Sources and Credits

We have used the following files as listed.

jQuery - JavaScript Library
Bootstrap - Bootstrap by Twitter
jQuery Nivo Slider - jQuery Nivo Slider
Swiper - Most modern mobile touch slider
IntlTelInput - International Telephone Input
Stickup menu - stickup menu plugin
Light Slider - JQuery lightSlider is a lightweight responsive Content slider with carousel thumbnails navigation
Smartmenu - Website menus that work on all devices.
WOW effects - Reveal Animations When You Scroll.
Isotope - jQuery plugin filter & sort plugin
Images Loaded - jQuery plugin for detect when images are loaded
Magnific Popup - jQuery popup plugin
jQuery Validation Plugin
jQuery Form Plugin

Once again, thank you for purchasing this Theme. As mentioned at the beginning of this documentation, we would be glad to help you if you have any questions related to this Theme. For more general question related to this Theme on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

If you are satisfied with Rentalcars HTML5 Website Template please go to your downloads section on ThemeForest.net and rate Rentalcars Website Template HTML with 5 stars. Otherwise, send an Email and I will try to find nice and easy solution for you :)

Hope that you will enjoy in Rentalcars HTML5 Website Template as much as I've enjoyed designing this template.

Kind Regards,
themetony