Web Tutorial: Designing and Coding a Clean Multi Purpose Website

Web Tutorial: Designing and Coding a Clean Multi Purpose Website

Making a nice little website for yourself or your freelancing company is not as hard as it may seem. This tutorial is aimed at everyone that needs a fairly simple (doesn’t mean dull and boring) yet stylish solution for their own small corner of the web, without having to go the extra mile. Besides, the example website created in this tutorial does not have a specific theme so it can be used by mostly anyone, no matter what niche they are in. It is also very easy to customize, and tweaking it to match your brand style won’t take but a few minutes.

Preview:

Here’s what we’re going to be creating:

See live demo

Wireframe

I had a clear image in my head of what I wanted this website to look like, so instead of sketching I went straight into Photoshop and put together this simple wireframe:

Photoshop

Step 0 – Preparations

I used the 960.gs 12-column grid template for this design. If you’re working in Photoshop and didn’t try it before, I’d suggest you get the 960gs Photoshop actions. With these actions you can create a new file of any desired dimensions and then it will take care of the guides and the grid overlay. Now you might say that it’s not that hard to open up the psd template and change the canvas size, and I’d agree with you. But I like the action method better simply because you don’t have to store the PSDs and look for them every time you start a new design.
If you have already downloaded the 960.gs template pack, you’ll find the Photoshop action in it. If you haven’t, then go ahead and download it from its creator’s website: 960-grid-actions
Once the actions are loaded into Photoshop, you’ll need to work on them a little, because by default the action dialogs are not working as you’d want them to.
Let’s find the action (12 column grid in this case) on the action panel and look at its dialogs state. If it is on, toggle it off by clicking on this little icon:

Then go ahead and twirl down the action menu and click on its dialog toggle switch to turn it on. This is the only dialog that we need to pop up when we play the action. It will let us specify the document’s size.

Play the said action and it should prompt you with a new document window. Set it to 1020x1420px (our content will be contained within 940px) and hit OK, the guides should be created in a second.
Also make sure you start organizing your PSD from the get-go.

Step 1 – The Logo

Drag out the horizontal guide at 50px and below it type out the wordmark. I used Apricot set at 46pt and in #e35e35. Drag another guide below the logo, for the sake of easy slicing later on. It this case the guide is placed at 109px.

Step 2 – Navigation Menu

Let’s move on the navigation. It will be floated to the right, so align it accordingly.The font I used for the navigation was Museo500, 14pt, #454545. The distance between each word is 34px.
In case you don’t have it or haven’t heard of it (which is unlikely), you can get it from here. Museo family is not entirely free, but some of the weights are. Grab the 500 one.
At this point we don’t need to design the hover and active states for this menu. As you can tell from the preview, it will only be a matter of a few lines of CSS.

Step 3 – Slider Section

Make a new horizontal guide 40px below the last one – at 149px, and another one 373px further down – at 522px. This will be the slider section. Fill it using ‘clean pattern 3 light’ from this Minimal Patterns for Backgrounds set.

Drag another horizontal guide 30px down from the top of the slider section, that would be 179px.
The slider window’s height is 280px, that’s another guide, at 459px. The width is 940px. Call this layer as ‘window’ and fill it with any color for now.

To finish off the slider window, go to the layer’s blending options and apply a 5px, light-grey stroke to it.

Step 4 – Slider Controls

In this example I used 4 images for the slider, hence 4 bullets. Drag out 2 new horizontal guide at 489px and 497px, and a vertical one at 55px. Using the Ellipse Tool (U) draw four identical circles between the two horizontal guides you just created.
Apply to three of them a 1px inside stroke using #e35e35 for the color, using white as its fill or reducing it all the way down to to 0%. The active state bullet’s diameter is 10px (instead of 8px for normal state). To make it, either re-draw the circle or just change the fill color to #e35e35 and switch the stroke to be outside. Align the bullets as shown here:

This how it should look like at this point:

Step 5 – About Us Section – 1st column

Make a new horizontal guide at 565px (about 40px below the slider section) and type out the first heading, ‘Who we are’, in Museo500, 19pt, #454545.
The paragraph text is 25px below the heading, has a 5px padding on the left, and is set in Museo Sans 500, 13pt.
Again, the font can be downloaded from here.

Make sure the width of this paragraph does not exceed 240px, a new vertical guide at 295px will help you control this.

Now onto the border next to the paragraph. First of all, load the square brushes using the Brush Presets panel and select the 3px one.

Use the following settings to make the brush draw vertical(!) dashed lines:

Holding Shift, draw the border like this:

Duplicate this whole little section (you still keep everything organized and it’s all in one dedicated folder, right?) and move it down 35px.

Step 6 – 2nd column

Create a new column the same way as the first one, keeping the paragraph width from going over 345px. A vertical guide at 705px will do the trick.
Below the text paragraph create a button of a size of 104×28 px, set the fill to white, add a 1px #ffbca4 stroke and center-align the text inside it. The font for it is Museo500 at 14pt, #e35e35.

Clean view:

Step 7 – 3rd column

Last, 3rd column’s width is 205px.
These are the font settings:

The distance between these little paragraphs is 25px.

Step 8 – Divider (<hr />)

Make a new horizontal line at 868px. Get back to the square brushes and pick the 2px one. Use the following settings…

…and draw the divider like so (the color is #ffbca4):

Step 9 – Recent Projects Section

Make a new guide at 932px and type out the section heading. Font settings are: Museo500 16pt, #454545. Copy the button from the previous section, adjust its size (118x28px in this case) and put it 30px below the ‘recent projects’ heading.

Step 10 – Project Thumbnails

Using the Rectangular Marquee Tool (M) create one 140x140px thumbnail. Duplicate it and move 40px to the right. Repeat 2 more times.

Move the whole group down 10px. Duplicate it, to make the second row, and move it down 40px below the first row.

And this is how it all looks at this point:

Duplicate the <hr /> divider and place it 60px below the ‘recent projects’ section.

And the final step of the design part is to add links to the footer, 45px below the last divider. These are the settings for type, color and spacing:

Slicing

Slice out the logo, the bullets (as a sprite, on a transparent background!) and the project thumbnail.
The project thumbnail is a sprite too. We’ll make it go from grayscale to full-color on hover.

As for the slider section background, where we used a pattern, go back to that layer’s blending options and hover over the pattern to see its title. In this case, ‘clean pattern 3 light’ says it’s 5x5px, which means it will be enough to slice out a 5 by 5 piece to make the background seamless.

Markup

Step 0 – Preparations

I know it should go without saying, but don’t forget to create separate folders for the images, stylesheets and scripts.

Step 1 – Basic Document Structure

We’re using HTML5 and declaring HTML5 DOCTYPE is as easy as . IE doesn’t not support the new HTML5 elements so we need to call the ‘html5shiv’ script from the of the document.

<!--[if IE]>     <mce:script _mce_src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script>     <![endif]-->
Step 2 – The Logo

For the logo we’re using the h1 tag, but in this case we don’t have a webfont we need, so we’ll replace it with the image later in the CSS part.

<h1><a title="WeGraphics - high quality design resources and tutorials" href="http://wegraphics.net">WeGraphics</a></h1>
Step 3 – Navigation Menu

In the preview you saw the dropdown in the nav menu, which is exactly what this code is creating.
We’re using an unordered list for our navigation and the dropdown is simply another unordered list inside one of the main list items. The first link has a class of ‘active’ so we could style the active state of the navigation.

<ul>
<li><a class="active" href="#">home</a></li>
<li><a href="#">work</a>
<ul class="dropdown">
	<li><a href="#">web</a></li>
 	<li><a href="#">print</a></li>
	<li><a href="#">illustration</a></li>
	<li><a href="#">motion</a></li>
</ul>

</li>
<li><a href="#">about</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">contact</a></li>
 </ul>
Step 4 – Slider

Let’s save a room for the slider but keep it empty for now. We’ll get back to it at the end of the tutorial and I’ll explain why…

<hr />
Step 5 – About Us Section

We’ve got 3 columns, each of which is a

with a class of ‘column’, and the last two also need an additional class each, to style them as we want, and we want them different from each other. ;) The second column has an additional class of ‘pitch’ (as in elevator pitch). The third column was dedicated to contact information so it gets an additional class of ‘contacts’.

<div class="column">
<h2>Who we are</h2>
WeGraphics is a team of creative professionals working hard to             produce top-notch design goodies.

<h2>Where we are</h2>
WeGraphics HQ is located in Philadelphia, but the team is             international. We've gathered a great bunch of talented and skilled             designers to provide people with amazing resources.
</div>

<div class="column pitch">
<h2>How we can help you</h2>
We work with different mediums such as web, print and motion.         Having worked in different niches, we posses the invaluable             knowledge and outstanding skillset that we use to solve             clients' problems and bring their ideas to life.
<a href="#">we blog too</a> <!-- this will be a button -->
</div>

 <!-- We'll style the third column's paragraphs and links a bit         differently from the rest. The telephone number needs to be wrapped into         a <span> tag in order for the whole column to be styled with         consistency-->

<div class="column contacts">
<h2>How to contact</h2>
Send an email to <a href="mailto:#">[email protected]</a>
Chat with us on Skype <a href="callto:#">wegraphics</a>
Call us at <span>+1 (23) 456-78-99</span>
Socialize with us <a href="#footer">See footer for the links</a>
</div>

<hr />
Step 6 – Latest Projects Section

Everything here is self-explanatory:

<h3>Recent projects:</h3>
<a href="#">view portfolio</a>
<ul>
	<li class="item1"><a href="#"></a></li>
	<li class="item2"><a href="#"></a></li>
	<li class="item3"><a href="#"></a></li>
	<li class="item4"><a href="#"></a></li>
	<li class="item5"><a href="#"></a></li>
	<li class="item6"><a href="#"></a></li>
	<li class="item7"><a href="#"></a></li>
	<li class="item8"><a href="#"></a></li>
</ul>

 <hr />
Step 7 – Footer
<a href="#">Facebook</a>             <a href="#">Twitter</a>             <a href="#">Flickr</a>             <a href="#">Dribbble</a>             <a href="#">Forrst</a>
All content © 2011 WeGraphics &amp; DesignerOnDuty. All rights reserved.

CSS

Step 1 – CSS Reset

CSS reset is a very important part of every project, always start with it.

 /*** CSS RESET ***/  html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{     margin:0;     padding:0;     border:0;     outline:0;     font-size:100%;     vertical-align:baseline;     background:transparent;     } body{     line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section{          display:block; } nav ul{     list-style:none; } blockquote, q{     quotes:none; } blockquote:before, blockquote:after, q:before, q:after{     content:'';     content:none; } a{     margin:0;     padding:0;     font-size:100%;     vertical-align:baseline;     background:transparent;     text-decoration: none; } ins{     background-color:#ff9;     color:#000;     text-decoration:none; } mark{     background-color:#ff9;     color:#000;      font-style:italic;     font-weight:bold; } del{     text-decoration: line-through; } abbr[title], dfn[title]{     border-bottom:1px dotted;     cursor:help; } table{     border-collapse:collapse;     border-spacing:0; } /****** This content separator is already styled to match the look we are after ******/ hr{     clear: both;     display:block;     height:1px;     border:0;        border-top: 1px dashed #ffbca4; /* Change this color and border style to suit your needs */     margin:2.5em 0 3em 0;     padding:0; } input, select{     vertical-align:middle; }

PS: note that I’ve already changed the HR style beforehand so that it would match the style of the separator we designed in Photoshop.

Step 2 – @font-face Declaration

Different browsers require different formats of the font in order for it to work with @font-face. If you don’t have Museo web kit, you can get one over at MyFonts (use the links from the beginning of this post). Also, there’s a @font-face kit generator over at fontsquirrel.com

You can learn more about @font-face in this great article

/* @font-face DECLARATION */

@font-face{
    font-family: 'Museo-500';
    src: url('../webfonts/eot/museo500.eot');
    src: url('../webfonts/woff/museo500.woff') format('woff'),
         url('../webfonts/ttf/museo500.ttf') format('truetype'),
         url('../webfonts/museo500.svg#Museo-500') format('svg');
}
@font-face{
    font-family: 'MuseoSans-500';
    src: url('../webfonts/eot/museosans500.eot');
    src: url('../webfonts/woff/museosans500.woff') format('woff'),
         url('../webfonts/ttf/museosans500.ttf') format('truetype'),
         url('../webfonts/museosans500.svg#MuseoSans-500') format('svg');
}
Step 3 – General

Now that we have declared our custom fonts using the @font-face feature, let’s specify it the body selector.

html{
    width: 100%; height: 100%;
}
body{
    font-family: 'MuseoSans-500', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color:#454545;
    background:#fff;
}
header{
    width: 940px;
    margin: 50px auto 30px; /* this will center the header on the page (horizontally) and apply the top and bottom margins */
}
Step 4 – The Logo

Time to replace the text of our logo with the image.

header h1 a{
    background: url('../img/logo.png');
    width: 268px;  height: 59px;
    float: left;  display: block;
    text-indent: -99999px;
}
Step 5 – Navigation

As you remember from the Photoshop part, we’re using Museo-500 for the navigation text, and as I said, the hover and active states style is just a couple of lines of code.

header nav{
    float: right;
    margin: 10px 0 0 0;
    font-family: 'Museo-500', Helvetica, Arial, sans-serif;
}
header li{
    float: left;  display: inline;
    position:relative; /* We'll need this for the dropdown to work properly */
}
header li a{
    display: block;
    color: #454545;
    padding: 8px 16px; /* Spacing out the links */
}
header li a:hover, header li a.active{
    color: #fff;
    background: #e35e35;
}
Step 6 – Dropdown

This will hide the contents of the dropdown from the screen when it’s not called by the user (it’s parent element is not hovered over). There’s also a CSS3 transition applied to the opacity of the dropdown, making for its nice fadeout.

.dropdown{
    list-style: none;
    position: absolute;
    left: -9999px;
    z-index: 10; /* So the dropdown stays on top of everything else */
    opacity: 0;
    -webkit-transition: opacity 0.35s linear;
    -moz-transition: opacity 0.35s linear;
    -o-transition: opacity 0.35s linear;
    transition: opacity 0.35s linear;
}

This will even the size of all of the list items in the dropdown and prevent the text from wrapping to the next line, unless the
tag is used ;).

.dropdown li{
    padding: 0;
    margin: 0;
    float: none;
}
.dropdown a{
    white-space: nowrap;
    text-align: left;
    display: block;
    font-size: 13px;
}

This is the style for the dropdown’s appearance and behavior when it’s active:

header li:hover ul{
    left: 0;
    opacity: 1;
}
header li:hover ul a{
    color: #e35e35;
    background: #fff;
    -webkit-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    transition: all 0.15s linear;
}
header li:hover ul a:hover{
    color: #fff;
    background: #e35e35;
}

PS: I’ve learned this great pure-CSS dropdown technique from Harry Roberts and used it as a base for this example.
Check out the original article here.

Step 7 – Slider*

*We’ll get back to it later but for now let there be a background:

#slider{
    clear: both;
    height: 340px;
    background: url('../img/slider_bg.png') repeat;
    padding: 25px 0 8px 0;
    position: relative;
    top: 40px;
}
Step 8 – About Us section

First column:

#about{
    width: 940px;
    margin: 30px auto 0;
}
.column{
    float: left;  display: inline;
    width: 240px;
    margin: 0 40px 0 15px;
    text-align: left;
}

2nd and 3rd columns:

      .pitch{     width: 345px;     margin: 0 40px 0 25px; } .contacts{     width: 205px;     margin: 0 15px 30px 15px; }

Typography etc.

 #about h2{
    font: 19px 'Museo-500', Helvetica, Arial, sans-serif;
    margin-bottom: 14px;
}
.column p{
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 18px;
    padding: 0 5px;
    border-left: 1px dashed #ffbca4; /* That vertical dashed line we've drawn in photoshop */
}
.contacts a, span{
    font-size: 12px;
    display: block;
    color: #454545;
    -webkit-transition: 0.15s linear color;
}
.contacts a:hover{
    color: #e35e35; /* Everything but the telephone number will change the color when hovered over */
}

Button:

.pitch p{
    margin: 0 0 28px 0;
}
.pitch a{
    font: 14px 'Museo-500', Helvetica, Arial, sans-serif;
    text-align: left;
    color: #e35e35;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #ffbca4;
    -webkit-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    transition: all 0.15s linear;
}
pitch a:hover{
    padding: 6px 18px;
}
.pitch a:active{
    color: #fff;
    background: #e35e35;
}
Step 9 – Recent Projects section
#recent_projects{
    overflow: hidden;
    width:940px;
    margin: 60px auto 0;
}
#recent_projects h3{
    font: 16px 'Museo-500', Helvetica, Arial, sans-serif;
    margin: 0 0 35px 15px;
}

Button again, let’s just copy the button style from one of the sections above.

#recent_projects p a{
    font: 14px 'Museo-500', Helvetica, Arial, sans-serif;
    text-align: left;
    color: #e35e35;
    margin: 0 0 0 15px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #ffbca4;
    -webkit-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    transition: all 0.15s linear;
}
#recent_projects p a:hover{
    padding: 6px 18px;
}
#recent_projects p a:active{
    color: #fff;
    background: #e35e35;
}
Step 10 – Project thumbnails
#recent_projects li a{
    display: block;
    width: 140px;  height: 140px;
}

#recent_projects li{
    float: left;  display: inline;
    margin: 20px;
}

Using the border radius to fake the circle shape.
If you want the same for IE, take a look at CSS3 Pie.

#recent_projects li{
    float: left;  display: inline;
    margin: 20px;
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    border-radius: 80px;
}

CSS3 transitions to reveal the original square shape on hover:

#recent_projects li{
    float: left;  display: inline;
    margin: 20px;
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    border-radius: 80px;
    -webkit-transition: -webkit-border-radius 0.20s linear;
    -moz-transition: -moz-border-radius 0.20s linear;
    -o-transition: all 0.20s linear;
    transition: border-radius 0.20s linear;
}
#recent_projects li:hover{
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

Using sprites for grayscale-to-color transition:

 .item1{
    background: url('../img/portfolio_item1.jpg') 0 140px;
}
.item2{
    background: url('../img/portfolio_item2.jpg') 0 140px;
}
.item3{
    background: url('../img/portfolio_item3.jpg') 0 140px;
}
.item4{
    background: url('../img/portfolio_item4.jpg') 0 140px;
}
.item5{
    background: url('../img/portfolio_item5.jpg') 0 140px;
}
.item6{
    background: url('../img/portfolio_item6.jpg') 0 140px;
}
.item7{
    background: url('../img/portfolio_item7.jpg') 0 140px;
}
.item8{
    background: url('../img/portfolio_item8.jpg') 0 140px;
}

Right now we only have a grayscale image, so let’s go back to the previous declaration and add ‘background-position: 0 0;’ so that the color version reveals on hover as planned.

#recent_projects li:hover{
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    background-position: 0 0; /* This is what we just added */
}
Step 11 – Footer
footer{
    clear:both;
    width: 940px;
    margin: 0 auto;
    padding: 0 0 50px 0;
}
footer nav{
    font-size: 13px;
    width: 660px;
}
footer a{
    float: left;
    display: inline;
    color: #ffbca4;
    margin: 0 0 0 20px;
}

Let’s enliven these footer links with some CSS3 magic.

footer a{
    float: left;
    display: inline;
    color: #ffbca4;
    margin: 0 0 0 20px;
    padding: 5px 10px;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
}
footer a:hover{
    padding: 10px 10px;
    color: #fff;
    background: #e35e35;
}
footer a:active{
    color: #fff;
    background: #454545;
}

Copyright info.

footer p{
    float: right;  display: inline;
    color: #454545;
    font-size: 11px;
    line-height: 1.5;
    text-align: left;
}

Back to the slider!

What and why

I can’t say I know Javascript very well, the truth is I barely know anything about it. But frameworks such as jQuery are so easy to understand and learn, and they’re powerful enough to add a lot of functionality to your site and make you (and the visitors) happier.
When writing this tutorial I first opted-in for the well known Nivo slider, which is definitely great. It gives you lots of options for customization and is pretty easy to skin.
But in the end I decided to ditch the dear Nivo for what I’m always using in my projects – a slider based on Soh Tanaka’s one.
Soh is a genius and I’ve learned a lot from reading his blog. This slider does not offer any transition styles or captions, but it is super easy to implement and skin. I think it’s a great solution for such projects where you don’t need all the fanciest features that Nivo and alike offer.

Markup for the slider

Go back to our #slider section, add this:

<section id="slider">

        <div class="window">
        <div class="image_reel">
            <a href="#"><img src="img/slide1.jpg" alt="" /></a>
            <a href="#"><img src="img/slide2.jpg" alt="" /></a>
            <a href="#"><img src="img/slide3.jpg" alt="" /></a>
            <a href="#"><img src="img/slide4.jpg" alt="" /></a>
        </div>
        </div>

        <div class="paging">
        <a class="bullet1" href="#" rel="1">1</a> <!-- this is the active control bullet -->
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
        </div>
</section>
Styling the slider

We’ve already started styling it and added the background, let’s go back there and continue.

 .window{
    width: 940px;  height: 280px;
    position: relative;
    margin: 0 auto;
    overflow: hidden; /*--Hides anything outside of the set width/height--*/
    border: 5px solid #e3e3e3;
}
.image_reel{
    position: absolute;
    top: 0;
    left: 0;
}
.image_reel img{
    float: left; display: inline;
}
.paging{
    width: 940px;
    margin: 18px auto 22px;
}
.paging a{
    float: left;  display: inline;
    padding: 5px 11px;
    background: url('../img/bullets.png') 0 0;
    text-indent: -9999px;
}
.paging a.active{
    background-position: 0 22px;
}
.bullet1 {
    margin: 0 0 0 9px;
}
jQuery

Now’s finally the time for the script itself. First of all, call the jQuery script from the head of our HTML file.
Now create a new JS file, call it ‘slider.js’ and paste in it the following code. It’s all commented by the author so no one will get lost. ;)

  $(document).ready(function() {

    //Show the paging and activate its first link
    $(".paging").show();
    $(".paging a:first").addClass("active");

    //Get size of the image, how many images there are, then determin the size of the image reel.
    var imageWidth = $(".window").width();
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;

    //Adjust the image reel to its new size
    $(".image_reel").css({'width' : imageReelWidth});

    //Paging  and Slider Function
    rotate = function(){
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

    $(".paging a").removeClass('active'); //Remove all active class
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

    //Slider Animation
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500 );

    }; 

  //Rotation  and Timing Event
    rotateSwitch = function(){
    play = setInterval(function(){ //Set timer - this will repeat itself every 5 seconds
        $active = $('.paging a.active').next(); //Move to the next paging
        if ( $active.length === 0) { //If paging reaches the end...
            $active = $('.paging a:first'); //go back to first
        }
        rotate(); //Trigger the paging and slider function
    }, 5000); //Timer speed in milliseconds (5 seconds)
    };

    rotateSwitch(); //Run function on launch

   //On Hover
    $(".image_reel a").hover(function() {
    clearInterval(play); //Stop the rotation
    }, function() {
    rotateSwitch(); //Resume rotation timer
    });        

    //On Click
    $(".paging a").click(function() {
    $active = $(this); //Activate the clicked paging
    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation timer
    return false; //Prevent browser jump to link anchor
    });
    });

Don’t forget to go back to the HTML file and call this freshly created script: .

Done!

That’s it. live demo

Related Posts

high quality vectors

2500+ premium design resources for only $7!

We do the best to provide high-quality products that you can use in your commercial projects.
You bet!

take a tour

Sergei Tatarinov

Sergei is a multidisciplinary designer and an amateur photographer from Russia. With over 3 years of professional experience, he has developed a diverse skill set including web design, print design, illustration and animation. Sergei is passionate about all things design and works hard to improve his skills every day. He is also a very nice person so go follow him on Twitter and say hi!

36 Comments

(+add yours)
  1. Live demo page link broken..

  2. Live demo is fixed, thanks for the catch!

  3. That’s fabulous… awesome.
    Every point is well explained.
    I liked this so much…!

  4. This is awesome! I will be using this for sure :)

  5. Nice post! Thank you for sharing..

  6. Good tutorial! Very nice use of css transitions as well :), and clever grid based design.

  7. Great post! Tanks for sharing.

  8. Wow, this is filled with knowledge! Will share this with my followers!

  9. such a complete article, from start to finish! Thanks!

  10. Great tut!!! thanks!!

  11. Thanks for the feedback everyone! I’m glad you find it useful!

  12. Wow!! very impressive job!! it’s a long but also clear awesome tutorial! you rock! very nice!

  13. shanice

    Is it possible if u can develop this template further, I would definitely even buy it if u could design the blog page as well. Thanks for the tutorial – I would have a video, portfolio, mp3 (artists), page or just use social networks for showcasing.

  14. lundz

    GREAT HAND!

  15. First of all Great tutorial!
    But I must say I got stuck on the slicing part ’cause it was my first time doing sprites, but i learned about it in other blogs and i understood why you didn’t explain the process (it’s really easy).
    At the end the only thing i couldn’t do was to place the thumbnail projects on the right side of the “view portfolio” button. They appear under the button :s I checked the code a thousand times but i couldn’t change that. I’ll have to keep on learning.
    Thanks Sergei!

  16. I like the way of explained step by step, awesome keep it up!

  17. Renate

    I wanted to add that you should ad that this tutorial isn’t for beginners, since you don’t add everything in the markup. (Like header and footer-sections)

  18. Sue

    Great and simple tutorial! Thanks for that!

    Just one thing:
    the slider seems buggy after a while, it changes pics too fast and doesn’t respond to any clicks on the bullets… this occurs especially if you change to another browsertab and back…
    Somebody else has this problem? Is there a fix for it?

    • MrParis

      Yes, I have the same problem on Firefox for Mac at least.

  19. Very good info. Lucky me I discovered your website by chance (stumbleupon).
    I’ve book-marked it for later!

  20. Great and simple tutorial! Thanks for that!;))

  21. kamal

    great tutorial but you write #about without “id=”about” in the code …where is it ?

    please answer as soon as possiable?

  22. Fundamentally, psychiatry department they can give you for direct mailing.

    The big challenge now is how you integrate mailing services
    with your direct mail packages to be delivered to
    and from the mailing list. This means that instead
    of having to fin a handful oof fields that you really need to understand the business end of it, maybe you haven’t.

  23. Have yyou ever tthought about including a litle bit more than just your articles?
    I mean, what you say is fundamental and everything. However jjust imagine if you added some great pictures
    or videos to give your posts more, “pop”! Your content is excellent but with pics and videos, this website could certainly bbe one of thhe mozt
    beneficial in its field. Fantastic blog!

  24. It’s amazing to pay a quick vizit this site and reading the views of all friends
    about this article, while I am also eager of getting familiarity.

  25. I believe what you wrote waas very reasonable.
    However, what about this? what if you were to create a killedr
    post title? I mean, I don’t want to tell you how to
    run your blog, howewver suppose you added a post title that makes people want more?
    I meean Web Tutorial: Designig and Coding a
    Clean Multi Purpose Website is a little boring. You could glance at Yahoo’s
    home page andd see how they write postt titles to
    get people to click. You might add a related
    vidreo or a pic or two to grab people interested about everything’ve written. In my opinion,
    it could make your website a little bit more interesting.

  26. Find more information on Auto Parts Warehouse Coupon Code here.
    Before taking warehouse for rent, it is very important to
    make clear to the property owner that for how much duration you are taking
    the warehouse. The worst real estate investment
    is one unit (a house); the next worst is two units, and so on.

  27. If you think about it, the search engines want to gauge your websites popularity based on other webmasters’
    assessment of your site. Is it accurate to say that you are
    starting to get the picture however. An additional 80,900 feet is available and 36,100 feet has been ordered.

  28. As we finish the job you can choose to collect hand
    images, 100 cm canvas wall art, 14 HD digital negatives, HD slide show with 30 images, custom printed CD, gift prints, table book with pet images and so on based on the package.
    Digital photography is an psychological and user-friendly procedure for me.

    This area in photography might not be their first option in this field.

  29. Heya are using WordPress for your site platform?
    I’m new to the blog world but I’m trying to get started and create my own. Do you
    need any html coding expertise to make your own blog?
    Any help would be greatly appreciated!

  30. The stimulus is a question or statement which encapsulates a topic of research and
    gives students some scope for response. Akira Kurosawa is generally a fully comprehend of filming fight
    action, and the man pioneered many tips for filming behavior and wrestling that has to supply for
    the following half a century. There exist several holiday cottages in Dorset that overlook the ocean and also
    spectacular countryside.

  31. Attractive section of content. I just stumbled upon your blog and in accession capital to asdsert that I acquire in fact enjoyed account your blog
    posts. Any way I’ll be subscribing to your augment and even I achievement you access consistently
    quickly.

  32. Greate post. Keep posting such kind of info on your blog. Im really impressed by your site.

    Hi there, You’ve done a great job. I’ll definitely digg it and
    in my view suggest to my friends. I’m confident they will
    be benefited from this website.

  33. Dont be concerned about paying income now days
    needed forr the application. Frolo (The Hunchback of Notre Dame)One of many scariest
    issues about Choose Claude Frollo is his utter self-righteousness throughout all of his actions.
    Girls particularly appear to be in tune with their intestine emotions and these is usually a nice defence mechanism.

  34. Contemplating I could never evsr are living with no Best 10 Hack Best 11 sports
    manager Bridal party hack best 14 comromise electrical generator simply by my own side.
    Not to mention that should you use these methods you are damaging Zynga, the provider in the game you love.

    Donald Trump and his daughter Ivanka resigned from the board on Friday in protest, with rumored intentions to sue the bondholders according to a February
    14 article in the Wall Street Journal.

Leave your comment

© Copyright 2010 WeGraphics.net - All rights reserved. Design and code by WeGraphics Team