### “HTML5 Portfolio and Business Template ”

# “HTML5 Portfolio and Business Template”

By: eGrappler.com

Thank you for downloading our HTML5 Portfolio and Business Template.

## Table of Contents

1. HTML Structure
2. CSS Files
3. JavaScript Files
4. PSD Files
5. Additional Notes

### A) HTML Structure - top

This HTML 5 template is a fixed layout with two columns. It has six sections:

- Main Full Screen Slider
- Header
- Sliding Tabs
  - Main
  - About Us
  - Our Work
  - Services
  - Contact Us
- Main Tab
  - it has a niva silder
  - div id="slider">
    <img src="images/slider/img01.jpg" alt="" class="pic">
    <img src="images/slider/img02.jpg" alt="" class="pic">
    <img src="images/slider/img03.jpg" alt="" class="pic">
    <img src="images/slider/img04.jpg" alt="" class="pic">
    </div>
- About us Tab
  - it has simple text and list.
- Our Work Tab
  - its has carousel scroll and thumbnail has sliding caption, On click PrettyPhoto popup activated.
- Services Tab
  - it has simple text and list.
- Contact us Tab
  - Workable contact form is here, fill up the form and you will get email, Field Validations are also applied.
- Privacy Policy Link
  - it has simple text.
- Footer

        { Header Section }

            {Sliding tabs }
    	 { Main Content }

    	{ Footer }

The index file given with the package has HTML 5 coded. Very easy to use just open in any HTML editor and make neccesary changes and its done. Also in this index.html file there is contact form.

### B) CSS Files - top

I'm using following four CSS files in this theme.

- Reset.css ( Generic reset file, Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this.)
- Nivo-slider.css ( Use for the setting and formatting of Nivo Slider.)
- PrettyPhoto.css ( Use for the popup styling of our work area.)
- jScrollPane.css (Use for custom scrollbar)
- Style.css (This file have all the styles used in the template)

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS files, and then scroll down until you find the appropriate style that needs to be edited.

### C) JavaScript Files - top

There are ten JavaScript files used in this HTML template

- general.js. - Sliding tabs, Structure defination, Clear input form field, Work thumbnail Caption scripts are define in it
- jquery.nivo.slider.pack.js - Use to run Nivo slider
- jquery.prettyPhoto.js - Used for popup related script.
- jquery.tinycarousel.min.js - Used for scrolling the images of the work area.
- jScrollPane.js - Used for custom scrollbar
- cufon-yui.js - Use for custom fonts of the template

Rest of the JS files are Polpular JQuery Libraries.

### D) PSD Files - top

I've included two layered psd with this template:

1. The main layout
   - This psd file is used to change main layout of the template
2. For Sliding Tabs
   - This psd file is used to change the title and colors of the tabs.

If you want any changes in the PSD file, simply open the desired file and make the necessary adjustments.

### E) Additional Notes - top

Credits

FONTS
I have used three free font

- Arizonia - (Use for Logo)
- Arimo - (Use for main text)
- Ubuntu - (Use for Slogan and main heading)

(http://www.google.com/webfonts) for the fonts. Search the name of the font above.
Although all above fonts are inculded in the package.

PHOTOS & ICONS
These are the photos form flickr.com

- http://www.flickr.com/photos/paolo979t/6691946749/
- http://www.flickr.com/photos/11746801@N04/5604654633/
- http://www.flickr.com/photos/tinaylin/3182880396/
- http://www.flickr.com/photos/momentoitalia/2202149142/
- http://www.flickr.com/photos/momentoitalia/2204505750/
- http://www.flickr.com/photos/momentoitalia/2204427434/
- http://www.flickr.com/photos/momentoitalia/4262085859/
- http://www.flickr.com/photos/kitchenplan/6251140501/
- http://www.flickr.com/photos/oceanic-group/4051188688/
- http://www.flickr.com/photos/momentoitalia/4262840428/
- http://www.flickr.com/photos/modloft/3808472496/
- http://www.flickr.com/photos/cantonidesign/4812275708/in/photostream/
- http://www.iconfinder.com/

eGrappler.com Team

Go To Table of Contents