Laundry & Dry Cleaning HTML5 Website Template
Premium HTML 5 website
- Created: December 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!
Laundry & Dry Cleaning 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 the downloaded archive from ThemeForest.net you'll get the folder containing 3 folders.
Here they are, sorted alphabetically:
- Documentation - Documentation for Laundry & Dry Cleaning Website Template HTML site template
- HTML - Main folder for template
- PSD - Design source files
The HTML folder structure:
- /HTML
- /css (Template CSS)
- /font (Font Iconmoon)
- /images (All Images)
-
- // Default Skin Images
- /gallery (Gallery Images)
- /slider (Sliders Images)
- /js (JS files)
- /external (JS external plugins)
- /scss (SCSS file)
CONTENT
The content divided on seven pages:
- index.html - Home page
- about.html - About Us page
- faq.html - Frequently Answered Questions page
- prices.html - Price Table page
- services.html - Services page
- contact.html - Contact page
- blog.html, blog-single.html, blog-card.html - Blog pages
HTML Structure
The BODY part of each HTML file is divided in three main sections: header, content and footer.
HEADER
Header HTML structure:
Navigation
Default menu HTML structure:
The navigation menu in resolution more than 991px looks like a horizontal navbar:
And the navigation menu is collapsed for the smaller viewports:
Each menu link is provided in two variants: simple and dropdown
Simple menu link
Multilevel menu link HTML structure:
Slider
Laundry & Dry Cleaner HTML Template uses Slider Revolution. It is an innovative, responsive jQuery Slider Plugin that displays your content the beautiful way. Whether it's a Slider, Carousel, Hero Scene or even a whole Front Page, you will be telling your own stories in no time! For more details on the Slider Revolution, please visit its official website.
Content
Content HTML structure:
....
FOOTER
Footer HTML structure:
Page Preloader
Page preloader code:
For remove the preloader remove this html code
Grid
Based on Bootstrap, 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, please visit this site: http://getbootstrap.com/css/#grid
CSS Files
Theme css files is located at css folder.
- custom.css - Theme main CSS file
- plugins/*.css - Theme plugins CSS file
SCSS Files
SCSS file is located at SCSS folder. You can change it and compile the new CSS files.
JavaScript
Custom JS file is located at js folder. All external JS plugins are located at external folder.
If you need more information about external plugins, please visit plugins official sites.
Icons
Our Template uses simply and flexible icon library Icomoon. IcoMoon is striving to build and provide the best iconography and icon management tool for perfectionists. You can see all demo icons in file fonts/demo.html.
Use the icon class on "display:inline" elements:
...
<i class="icon icon-telephone"></i>
...
or
...
<span class="icon icon-telephone"></span>
...
Fonts
To change the custom font, please change these line on style.css:/* Fonts */ @import url(https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700,700i|Rubik:300,300i,400,400i,500,500i,700,700i);To change fonts, go to http://www.google.com/webfonts, choose the new fonts and use the generated code.
Contact Form
You can use the default pattern for the 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
- Slider Revolution - jQuery Slider Revolution
- Slick - jQuery carousel plugin
- Waypoint - jQuery 'inview' event plugin
- Waypoint - jQuery 'inview' event plugin
- jQuery Validation Plugin
- jQuery Form Plugin
- CSS Animation Library
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 Laundry & Dry Cleaning HTML5 Website Template please go to your downloads section on ThemeForest.net and rate Laundry & Dry Cleaning 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 Laundry & Dry Cleaning HTML5 Website Template as much as I've enjoyed designing this template.
Kind Regards,
themetony