Templatation wiki

Vento Demo

• A One-page template using HTML5 and CSS3.
• 5 Color variations to choose from.
• Blue(default), Red, Yellow, Purple and Green.
• Responsive design (i.e. template looks and works fine on varied device screen resolutions)
• Rotating slider (minimum 3 slides required)
• Section headlines have H2 level.
• Primary google font used: Arimo
• Neatly commented clean HTML code for useful reference when editing template.
• 5 basic menu items (Home, About, Skills, Work, Contact)
• 'Sticky' menu bar never disappears out of site even after scrolling at bottom keeping navigation purpose of user-friendliness always intact.
• 'Contact' form has google maps.
• 'Work' section has two display modes:
  1. 3 rows with four thumbnails in each row having approx. 235×185 width x height thumbnails
  2. Another scroll slider displaying 5 thumbs having approx. 165×140 width x height thumbnails
• 'Phone' and 'Email' situated in top-left always visible which adds usability enhancement.
• HTML code is successfully ✔ checked and validated as HTML5 from official Markup Validation Service

Open up 'index.html' You will find in the source code the sections are properly tagged and commented where you can edit and change info as per your requirements.

Open up 'slider.html' See list item's tags inside <ul class=“roundabout”>…</ul> and put in relevant image source path to configure images. Images will need to have width=“444” height=“278”

Open up 'email-action.php' from your folder. On the 3rd line, change the email 'youremail@gmail.com' to the one where you want contact form submissions to receive. Optionally, you can also change site's name also. Just search for the default ”© 2011 http://Vento.com” and replace with your own.

In 'index.html' you just need to copy whole block of this HTML tag <div class=“testWrapCont”>… </div> and replicate it below. But please note that it has to stay withing this HTML tag <article class=“testWrap”> … </article>

This is an alternative slider as shown in this vento bxslider demo because in this bxslider one whole image spans width of the content.

Open up 'slider-bxslider.html' See list item's tags inside <ul class=“bxslider”>…</ul> and put in relevant image source path to configure images. Images will need to have width=“837” height=“350”

Other Notes: Please open up 'index.html' and search for this comment 'below line is for DEMO site only…' That commented block can be removed if you want to.