Please note that you will need to know some HTML / CSS and a little Javascript scripting to follow. Ready to get started? Let’s begin:

Set up the HTML:

First and foremost – we need the markup. We need this so we know what we are styling and manipulating. We are going to use semantic and valid HTML. In addition, we will keep it as clean as possible – with no unnecessary DIVs and classes in our code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<ul id="tabs">
      <li><a href="#tab1">Files and Folders</a></li>
      <li><a href="#tab2">User Profiles</a></li>
      <li><a href="#tab3">Contacts</a></li>
      <li><a href="#tab4">Applications</a></li>
      <li><a href="#tab5">Monthly Cost</a></li> 
</ul>
<div class="container" id="tab1">
    ...content goes here
</div>
<div class="container" id="tab2">
    ...content goes here
</div>
<div class="container" id="tab3">
    ...content goes here
</div>
<div class="container" id="tab4">
    ...content goes here
</div>
<div class="container" id="tab5">
    ...content goes here
</div>

As you can see, our markup is pretty self-explanatory. The UL items will be our tabs, while the DIVs below it are the containers. Save your file and view it in the browser:

Add Some Sweet Styles:

I usually like to style the HTML right after. This way – I can write the script exactly how to behave. Moreover, we can decide if what classes to add via Javascript.

The Tabs

Let’s convert our unordered list into tabs:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

#tabs {
	border:1px solid #ccc; 
	height:28px; 
	background:#eff5f9; 
	padding-left: 40px;
	padding-top:45px;
	-moz-box-shadow: inset 0 -2px 2px #dadada;
	-webkit-box-shadow:inset  0 -2px 2px #dadada;
	box-shadow: inset 0 -2px 2px #dadada;
	border-top-left-radius:4px;  
	border-top-right-radius:4px;
}
#tabs li {
	float:left; 
	list-style:none; 
	border-top:1px solid #ccc; 
	border-left:1px solid #ccc; 
	border-right:1px solid #ccc; 
	margin-right:5px; 
	border-top-left-radius:3px;  
	border-top-right-radius:3px;
	-moz-box-shadow: 0 -2px 2px #dadada;
	-webkit-box-shadow:  0 -2px 2px #dadada;
	box-shadow: 0 -2px 2px #dadada;
}
#tabs li a {
	font-family:Arial, Helvetica, sans-serif; 
	font-size:13px;
	font-weight:bold; 
	color:#000000; 
	padding:7px 14px 6px 12px; 
	display:block; 
	background:#FFFFFF;  
	border-top-left-radius:3px; 
	border-top-right-radius:3px; 
	text-decoration:none;
	background: -moz-linear-gradient(top, #ebebeb, white 10%);  
	background: -webkit-gradient(linear, 0 0, 0 10%, from(#ebebeb), to(white));  
	border-top: 1px solid white; 
	text-shadow:-1px -1px 0 #fff;
	outline:none;
}

Save your file and view it in the browser:

Beautiful right? Things are coming along. We also want to add a style for the “inactive” state of the tabs. This will be how the tabs will look when they’re not in focus. Add the code below to your stylesheet:

1
2
3
4
5
6
7
8
9
10
11
12

#tabs li a.inactive{
	padding-top:5px;
	padding-bottom:5px;
	color:#666666;
	background: -moz-linear-gradient(top, #dedede, white 75%);  
	background: -webkit-gradient(linear, 0 0, 0 75%, from(#dedede), to(white));  
	border-top: 1px solid white; 
}
#tabs li a:hover, #tabs li a.inactive:hover {
	border-top: 1px solid #dedede;
	color:#000000;
}

Notice that I also added a separate style for :hover. To see how these styles look, you have to manually add class “inactive” to the anchor tags in our tabs, and refresh your browser:

The Containers

The containers styles really depend on you. I just added some general rules such as width and appropriate paddings:

1
2
3
4
5
6
7

.container{ 
	clear:both; 	 	 
	padding:10px 0px; 
	width:664px; 
	background-color:#fff; 
	text-align:left; 	 
}

Now we have a solid look and we can continue with the scripting. Be sure to add some dummy content to your containers before we go on.

The jQuery

This part may have the shortest code, but will do a lot of work. Lets include the jQuery library into our page and start our document ready event. Append this code into your HTML:

1
2
3
4
5
6

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {	
    //our script goes here...
});
</script>

Now we need a way make our tabs inactive and hide the containers. Add the lines of code inside our document ready block:

1
2

$('#tabs li a:not(:first)').addClass('inactive');
$('.container:not(:first)').hide();

The code above adds the class “inactive” to all our our tabs – except the first one using the “:not(:first)” filter. The second line hides all of our container divs – except the first one, again using the said filter.
Refresh your browser and you shall see the effects:

Now let’s add a click handler to our tabs along with the events. Add the lines of code also inside document ready:

1
2
3
4
5
6
7
8

$('#tabs li a').click(function(){
    var t = $(this).attr('href');
    $('#tabs li a').addClass('inactive');		
    $(this).removeClass('inactive');
    $('.container').hide();
    $(t).fadeIn('slow');
    return false;
})

A lot of things are happening here – first – we’ve established a click handler to our tabs. We also created a variable “t” that represents the value of the “href” attribute for whichever anchor tag that was clicked. For instance, if the first tab was clicked, then “t” will be “#tab1″. Then we add class “inactive” to all of the tabs, while removing “inactive” to whichever one was clicked. Then, we hide all of the containers while fading in the one that is “t”, i.e. #tab1 or #tab2 and so on. Return false just prevents the anchor links from their default behavior.

Refresh your browser and try it out. So our tabs are in full action. There is one problem though: when you click the current tab – it still attempts to hide all the containers and show the current one – we don’t want this to happen. Let’s add a conditional block to our code:

1
2
3
4
5
6

if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('#tabs li a').addClass('inactive');		 
    $(this).removeClass('inactive');
    $('.container').hide();
    $(t).fadeIn('slow');	
}

Wrapping our events inside this if block prevents this unwanted behavior.

Conclusion

And there you have it. Wasn’t that easy? Super Easy? The best thing about this code is it doesn’t use any images. All of the gradients and shadows are CSS3. Also, it is backwards compatible for users without Javascript. It won’t work as tabs – but it will show the full content, and the tabs will still lead them to the right area when clicked.

This tutorial will walk you through how to create full page background images that rotate like a slideshow. We will be using CSS and jQuery – particularly the nifty cycle plugin. Ready to get started? Let’s begin:

The HTML Markup:

First we create the background images. Place them in your root folder, in a directory called “images”. We wrap them around a special DIV which houses all the images. We need this DIV so we can target it from our script later:

1
2
3
4
5
6
7
8
9
10
11
12

<div id="slideshow">
<img src="/images/b1.jpg" class="bgM"/>
<img src="/images/b2.jpg" class="bgM"/>
<img src="/images/b3.jpg" class="bgM"/>
<img src="/images/b4.jpg" class="bgM"/>
<img src="/images/b5.jpg" class="bgM"/>
<img src="/images/b6.jpg" class="bgM"/>
<img src="/images/b7.jpg" class="bgM"/>
</div>
<div id="wrap">
...your content here
</div>

Make sure your image is a good sized horizontal shot. For almost all screen resolutions have wider width vs height. Our images will scale to the width of the screen. The DIV id=”wrap” is the container for your content. This is directly underneath our slideshow container. Save your HTML and view it in the browser. You should see a series of images on top of each other.

The CSS

Add this code to your page. This will set the images width to span the entire page.

1
2
3
4
5
6
7
8
9
10

#slideshow, img.bgM {
        min-height: 100%;
        min-width: 1024px;
        width: 100%;
        height: auto;
        position: fixed;
        top: 0;
        left: 0;
        z-index:-9999;
}

View Refresh your page. You should see only the first image. The rest of the images are tucked away underneath the first one. This is what “z-index” and “position” properties in our code did. Now for the slideshow effect, we use some jQuery magic.

The jQuery

Download the jQuery Cycle plugin from here, and place it inside a directory called “scripts” in your root folder. Add the jQuery library and a reference to the plugin inside the head section of your HTML:

1
2

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="scripts/jquery.cycle.all.2.74.js"></script>

Then add this code that will pickup our slideshow DIV, and apply the cycle functionality from our plugin:

1
2
3
4
5
6
7
8
9

$(document).ready(function() {
				$('#slideshow').cycle({
				fx: 'fade',
				pager: '#smallnav', 
				pause:   1, 
				speed: 1800,
				timeout:  3500 
			});			
		});

You can choose to edit the plugin options by tweaking the above code. For the list of available options such as transition effects, timing and callbacks – refer to the jQuery Cycle docs.

Conclusion:

Now refresh your browser and you should see your background fade into the next image and to another. Like I said, this style can be quite refreshing – to vary your page from a million other websites out there with large image backgrounds. The only problem with this is when browser is resized, the image stays in the original size and doesn’t resize on the fly. Maybe one of you guys can improve the image handling with javascript or something.

Bonus Tip: for added functionality, you can add individual links to the background images by wrapping each image into an anchor tag:

1
2
3
4

<div id="slideshow">
<a href="http://yahoo.com"><img src="images/b1.jpg" </a>
<img src="images/b3.jpg" class="bgM"/>
class="bgM"/></a>

This is especially useful if you’re using your background as advertising space of some sort (hint hint).

So go on and try it out for yourself. Please leave me a comment below if you have suggestions on how to improve the code, show off your stuff, or simply say hello.

The Goal:

We will use clean markup. We’re trying to integrate this into exsting HTML – so we will be generating all extra classes and tags using Javascript. I imagine most web documents follow the same constant pattern: Heading tags, followed by some content which are a mixture of different DIVS, paragraphs, images etc. This goes on until the next heading tag – which is usually the same type as the first heading.

Look at the sample mark up below:

1
2
3
4
5
6

<h5>Some Heading</h5>
       <!--content in here-->
<h5>Some Heading</h5>
       <!--content in here-->
<h5>Some Heading</h5>
        <!--content in here-->

We will use the H5 tags as our “Clicker” – once clicked, will hide the contents right underneath it. Click it again, and it will show the contents again.

The Script:

We start by calling the jQuery library, followed by the document.ready() call:

1
2
3
4
5
6
7
8

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
 
               <!--script goes here-->
 
});
</script>

We then loop through each of our particular heading tag (in this case, all of H5). Once it finds all of them, it checks to see if right next to it is another H5 tag; if it’s not, it adds a class of “clicker” to it and appends a span with a minus (-) sign in it:

1
2
3
4
5

$("h5").each(function(e){
	if(!($(this).next().is("h5"))){				
	    $(this).addClass("clicker").append('<span>-</span>');				
	}					
});

If you investigate your code so far – you will see that only the H5 tags that have content OTHER than H5 tags have the class “clicker” and the span tag with a minus (-) sign in it:

Now let’s code the click events:

1
2
3
4
5
6
7
8
9

$("h5.clicker").toggle(
		function(){			
			$(this).nextUntil("h5").slideUp('slow');
			$(this).find('span').html('+');	
			},
		function(){  
			$(this).nextUntil("h5").slideDown('fast');
			$(this).find('span').html('-');	
		})

Now that we have our designated clickers, we create a couple of functions that toggle at every click.

The first action, hides the contents below “$(this)” – which is the tag you just clicked. Remember – we only want to hide the contents up until the next H5 tag. It also changes the content of the span into a plus (+) symbol.

The second action shows the contents below, and changes the span to a minus (-) symbol.

Optional Styling:

At this point you already have a functional accordion. If you’re applying the code to an existing page, you are already working with the current styles. Although, using CSS3 for say the plus (+) and minus (-) span looks pretty cool – which I’m sure you’d want to use.

Add this code to your styles:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

#wrap h5 span, #wrap h5 span:visited {
	background: #2daebf url(alert-overlay.png) repeat-x; 
	display: inline-block; 
	padding: 1px 9px 2px 9px; 
	color: #fff; 
	text-decoration: none;
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
	border-bottom: 1px solid rgba(0,0,0,0.25);
	position: relative;
	cursor: pointer;
	float:right;
	font-family:Arial, Helvetica, sans-serif; font-weight:bold;
	*top: -47px; /*ie 7*/
}
 
#wrap h5 span:hover{ background-color: #007d9a; color: #fff; }
#wrap h5 span:active{ top: 1px; }
#wrap h5 span, #wrap h5 span:visited { font-size: 23px; font-weight: bold; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25);  }

Of course you have to replace the #wrap h5 with your own class / ids. This creates the css3 button you see in the demo. This code is courtesy of Zurb’s Super Awesome buttons with CSS3 and RGBA:

Conclusion

And that is it! You have yourself an accordion page powered by jQuery. Feel free to grab this code and improve it. Maybe refactor it into a more plugin like code – make it more reusable. Or even – fix the choppiness issue in the slideUp / slideDown animation in certain browsers. In any case, please leave a comment on what you think of this code.

You might also be interested in these articles regarding jQuery accordions:

• Simple Accordion w/ CSS and jQuery
• Exactly How to Create a Custom jQuery Accordion
• Grid Accordion with jQuery

So are you ready to get started? Let’s begin:

Step 1: Create the Base Mark Up

What we need is a series of images in an unordered list:

1
2
3
4
5
6
7

<ul>
<li><img src="image1.jpg" /></li>
<li><img src="image2.jpg" /></li>
<li><img src="image3.jpg" /></li>
<li><img src="image4.jpg" /></li>
<li><img src="image6.jpg" /></li>
</ul>

Pretty straightforward code – view it in the browser and see a bunch of images listed from top to bottom.

Step 2: Add jQuery Code to hide unfocused images:

What we’re trying to achieve is to only show the first image of the list and hide the rest. We do this by applying some CSS rules via jQuery to the mark up we’ve created. We also want to line up the hidden images to the right – so we can add controls that animate the entire ul a little bit to the left at a time (see illustration below):

Add the following code right above the closing head tag:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$(window).load (function() {
	var theImage = $('ul li img');
	var theWidth = theImage.width()
	//wrap into mother div
	$('ul').wrap('<div id="mother" />');					
	//assign height width and overflow hidden to mother
	$('#mother').css({
		width: function() {
		return theWidth;
	  }, 
		height: function() {
		return theImage.height();
	  }, 
		position: 'relative',
		overflow: 'hidden'  	
	});
		//get total of image sizes and set as width for ul 
	var totalWidth = theImage.length * theWidth;
	$('ul').css({
		width: function(){
		return totalWidth;	
	}				
	});		
 
});//doc ready
 
</script>

In English: in the first script tag – we have connected to the jQuery library online. Then we go in the window.load() event *as supposed to document.ready() – because of an issue detecting image width and height with webkit browsers. Then we set up a couple of variables which are all the images inside the unordered list, along with their widths. We wrap the unordered list (using the .wrap() function) inside a div called “mother” with the CSS rules I mentioned.

Step 3: Add “Next” and “Previous” Buttons

In our HTML – add anchor tags with the class “next” (If you want to move forward the slider) and “previous” (to go backward) inside the list items:

1
2
3
4
5
6
7

<ul>
<li><img src="image1.jpg" /><a class="next" href="#">next</a></li>
<li><img src="image2.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="image3.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="image4.jpg" /><a class="next" href="#">next</a><a class="previous" href="#">prev</a></li>
<li><img src="image6.jpg" /><a class="previous" href="#">prev</a><a class="startover" href="#">startover</a></li>
</ul>

Note that you will not see these links when you preview the page. This is because they are tucked away outside the visible region of the overflow property we’ve created:

Step 3: The Nifty .Animate()Method

Okay, now we’ve come to the part where we actually see some action. The whole point of what we’re trying to do is to move the list a little to the right – when the “next” link is clicked, and to the left if “previous” is clicked:

Add the following javascript code inside the existing script tags:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

$(theImage).each(		
function(intIndex){				
$(this).nextAll('a')
	.bind("click", function(){
		if($(this).is(".next"))	{
			$(this).parent('li').parent('ul').animate({
				"margin-left": (-(intIndex + 1) * theWidth)				
					}, 1000)	
			} else if($(this).is(".previous")){
			$(this).parent('li').parent('ul').animate({
				"margin-left": (-(intIndex - 1) * theWidth)				
			}, 1000)	
			} else if($(this).is(".startover")){
			$(this).parent('li').parent('ul').animate({
				"margin-left": (0)				
			}, 1000)
	}
	});//close .bind()									 
});//close .each()

Explanation: the code above starts out with the “.each” function – which is essentially a loop that looks for each of our images in the list. Then it finds all of the anchor tags next to the images (through .nextAll) and checks them for the assigned class. If the class says “next” – animate the parent (ul) to the left by applying a margin-left CSS property to it. The same thing goes for class “previous”. The only difference is the index is advanced vs. deducted multiplied by the image width. Lastly – is class “startover” which resets the slider to its original position.

Add the CSS code below inside the “head” tag so you can see the links and start testing them:

1
2
3
4
5
6
7
8

<style>
*{padding:0; margin:0;}
ul {}
ul li {float:left; list-style:none; position:relative; }
ul li a.next {position:absolute; left:100px;}
ul li a.previous{position:absolute; left:0px;}
ul li a.startover{position:absolute; left:200px;}
</style>

Step 4: Make ‘er Nice and Purrty

Technically – our slider is done. This section mainly focuses on making it look nice and presentable. So I grab this file: Slider Constructor from Graphic River. Slider Constructor is a high quality Photoshop filled with shiny slider buttons and controls that will surely bring life to your new slider. Create the buttons of your choice from this file and save them as individual .pngs.

You can set a different button for each anchor tag in each slide. You can also place them anywhere you want with some CSS positioning. Either add an “id” attribute to the individual anchor tags, or an additional class (which is what I did). Below is the CSS for my demo – of course, you might want to code yours differently:

1
2
3
4
5
6
7
8
9

ul li a.next.red{background:url(next-red.png); width:57px; height:73px; position:absolute; left:560px; top:237px;}
ul li a.next.green{background:url(next-green.png); width:67px; height:67px; position:absolute; top:286px; left:486px; }
ul li a.previous.green{background:url(prev-green.png); width:67px; height:67px; position:absolute; top:286px; left:105px;}
ul li a.next.orange{background:url(next-orange.png); width:239px; height:62px; position:absolute; left:360px; top:300px; }
ul li a.previous.orange{background:url(prev-orange.png); width:239px; height:62px; position:absolute; left:20px; top:300px; }
ul li a.next.blue{background:url(next-blue.png); width:57px; height:129px; position:absolute; top:150px; left:562px;}
ul li a.previous.blue{background:url(prev-blue.png); width:58px; height:129px; position:absolute; top:150px;}
ul li a.previous.silver{background:url(previous-silver.png); width:49px; height:50px; position:absolute; top:305px; left:360px;}
ul li a.startover { background:url(startover.png); width:176px; height:73px; position:absolute; top:280px; left:420px;}

Also – the good thing about this code is you can place and style the buttons individually.

Conclusion

There, there – you’ve just done yourself some good coding Sparky! Feel free to modify, re-factor and make the code better. This is as basic as it gets – so have fun tweaking it. Make sure you leave a comment or spread the word by retweeting or liking it in facebook. Until next time!

Bokeh and Blurry Backgrounds

I first saw this style from this popular Tumblr theme. Bokeh is an effect where a colorful palette of round reflections are so washed and blurred from an out of focus lens of some sort. This mystique of photography somehow brings the subject (the content in our case) a much more focused and sharper look. The Bokeh effect gives the entire page an overall feeling of harmony and beauty.

Blur

Bokeh in combination with transparencies as well as rounded corners give this template a thumbs up from me!

You can view the Item here, or Demo from Here

Modern Business 3

This template uses bokeh in the inner frames of the page. Very sleek, professional and elegant.

You can view the Item here, or Demo from Here

Dark ‘n Clean

Another Bokeh Beauty, don’t miss the amazing typography from this theme!

You can view the Item here, or Demo from Here

Overlapping Folds

This style has been around for a while, but still doesn’t fail to amaze me. It is when the designer takes page elements and wraps them among sections of the page, as if it was three dimensional.

Unite

Definitely one of my favorites. Exceptionaly detailed – the folds even change in orientation when scrolling up and down

You can view the Item here, or Demo from Here

Stage

This one is very unorthodox. Folds, peels – 3d everywhere!

You can view the Item here, or Demo from Here

Fancy Folio

More in the safe and conservative style, checkout the folded navigation button

You can view the Item here, or Demo from Here

Wild Slideshow Transitions

May it be Flash or Javascript – I’ve noticed a trend in transitions. The “fade” and the “sweep” no longer suffice, check out the slideshows in the templates below for a better demonstration.

Perception

Sliced, reversed, waves – the slideshow on Perception will leave you breathless.

You can view the Item here, or Demo from Here

CleanCut

The transition effects on CleanCut will give your images that “Wow” factor.

You can view the Item here, or Demo from Here

Infinite xHTML/CSS Theme

The slideshow on this template is a combination of many styles, played in random order. Tastefully done.

You can view the Item here, or Demo from Here

Accordions

Instead of the regular slideshow, some templates integrate an Accordion effect (or both) right in the home page. Both are somewhat similar, though the Accordion is a new trend that gives your website that out of the ordinary style.

Innovation + Science

Definitely of of my favorites – Innovation + Science is very sleek, sharp and clean. The accordion is a good choice for this template.

You can view the Item here, or Demo from Here

Newscast

Again, one of my favorites – this template’s got it all: typography, spacing, color, javascript effects – and of course the accordion. Probably the best magazine styled theme I’ve ever seen.

You can view the Item here, or Demo from Here

Echoes

Awesome, awesome, awesome!!! This template simply echoes “awesome!”

You can view the Item here, or Demo from Here

Minimalist

Just as the title describes, minimalist styled websites try to achieve the best look out of the least styling. The aim of the minimalist is to present beauty out of pure simplicity.

Europa

Big solid fonts, grayscale schema, massive spacing – this template speaks simple yet beauty.

You can view the Item here, or Demo from Here

Squared3

Squared3 has good typography, as well as excellent color scheme.

You can view the Item here, or Demo from Here

Minimalistic Studio

This template should also have been in the “Wild Slideshow Transitions” category, again – a nice solid template with simple accents and design applications yet effective results.

You can view the Item here, or Demo from Here

Conclusion

There you have it, a collection of tasty design trends in themeforest templates. What did you think of them? Would you buy any of these templates? Did you at least get inspired to build something as beautiful? Do you notice any other trends in Themeforest or elsewhere that is worth mentioning? Let me know your thoughts in the comments section:

Take a look at our markup:

1
2
3
4
5
6
7
8

<ul>
<li><img src="images/77335_4871.jpg" title="Autumn Leaves" /></li>
<li><img src="images/107023_5283.jpg" title="Cloudy Skies"  /></li>
<li><img src="images/1282015_12556521.jpg" title="Nice Horsy"  /></li>
<li><img src="images/1262387_19591724.jpg"  title="Grassy Meadows" /></li>
<li><img src="images/220121_3233.jpg" title="Jigsaw Pieces"  /></li>
<li><img src="images/1282209_96954111.jpg" title="Retro Groove"  /></li>
</ul>

Pretty clean right? Ok, now we start manipulating and styling with code:

Step 1: Wrapping Elements with jQuery

We are going to use jQuery to find all these images in a list item and check if it has a title attribute. If it does, it will wrap the image in a DIV with class name “wrapper”.

1
2
3
4
5
6
7

$(document).ready(function(){									
		var thumbs = $("ul li img");		
 
		for (var i = 0, ii = thumbs.length; i < ii; i++){
			if (thumbs[i].title && thumbs[i].title.length > 0)
			{								
				$(thumbs[i]).wrap('<div class="wrapper" />')

jQuery will also take the contents of the image’s title and place it inside another DIV called “caption” and place it inside wrapper, right after the image itself. Finally, let’s remove the title attribute from the image tag.

1
2
3
4
5
6

var imgtitle = thumbs[i].title;	
after('<div class=\'caption\'>' + imgtitle + '</div>').
				removeAttr('title');
 
			}					
		}

Now take a look at our mark up when the document loads:

1
2
3
4
5
6
7

<ul>
<li>
<div class=”wrapper”><img src="images/77335_4871.jpg" /></div>
<div class=”caption”> Autumn Leaves</a>
</li>
...
</ul>

Pretty slick right? Now let’s move forward.

Step 2: General Styling with CSS

Now that we have our DIVs in place, we can now set up the general styles with our stylesheet. What we’re trying to achieve is to hide the caption from a viewing area set on its containing DIV: wrapper.

Take a look at our stylesheet:

1
2

div.wrapper{width:218px; height:218px; overflow:hidden; position:relative;  }
div.caption {position:relative; text-align:center; padding:55px 15px}

Note that the wrapper dimensions are taken from how wide and tall the images are.

Step 3: Events and More Styling with jQuery

Now back to our script, all we need to do now is assign a couple of events to the hover method of our wrapper DIV. Thankfully, jQuery’s .hover() simplifies this action by letting us bind two handlers (in and out) all within the same context.

All we need to achieve is a way to slide the caption DIV upwards when we hover (maybe decrease the opacity of the image), then slide the DIV back downwards when we mouse out:

1
2
3
4
5
6
7
8
9
10

$('.wrapper').hover(
		function(){
			$(this).find('img').animate({opacity: ".6"}, 300);		
			$(this).find('.caption').animate({top:"-85px"}, 300);			
		}, 
		function(){
			$(this).find('img').animate({opacity: "1.0"}, 300);					
			$(this).find('.caption').animate({top:"85px"}, 100);
		}		
		);

Notice that I also used the .animate() function for manipulating the CSS properties which renders all of our effects smoothly.

Optional Pretty Styling:

For demonstration purposes I’ve added pretty backgrounds, as well as font types to maximize the effect. Simply add a background to the DIV caption, and assign different font types and styles (check out Google Fonts).

There you have it. You have just created your own image hover effects using jQuery and CSS. You can download the source code from here, or view the live demo.

Please feel free to comment below on what you think of this tutorial.

Features

The one pager Sifiso has all the right stuff for a strong personal portfolio:

How to Edit

The source code is very pretty straightforward – simply edit the HTML with your own. The PSD contains 4 files – one for each main section of the page. All files are layered, grouped and labeled. To edit a text section – find the layer and edit the text within. Fonts used are “AR Blanca” (for the logo), and “Helvetica Nueu LT Std” for everything else.

Conclusion

Keep in mind that even though Sifiso may be full of images, it is still coded professionally to conform to standards and SEO. I hardly used any “image” tags (except for the portfolio section), and still used HTML text where it should be (see screenshot below).

*Note that I talked about how to code this way in my 3 part post: How to create a single page portfolio from scratch.

Credits to the icon developers:Coffee Mug by Omercitin, Paintbrushes by ArtDesigner.lv and Briefcase by thirteen eightyone.

Are you ready to get your hands dirty? Let’s start coding:

Convert the Feature into a jQuery Powered Slideshow:

Our feature section looks good as it is. Though it would be better if the large image on the right would change and cycle through other images. In other words, we need to convert it into a slideshow of our best work.

Adding the Script Files

First thing we need to do is download jQuery. jQuery will be powering all of the javascript we’re using for our page. Head on to http://jquery.com/, download and save it into our current directory.

Inside the head section of our HTML, insert our script tag:

<script src="jquery-1.3.2.min.js"></script>

Now all of jQuery’s magic is in our fingertips. Download the slideshow plugin from: http://jquery.malsup.com/cycle/. Right below our first script tag, insert directly below:

1
2
3
4
5
6
7
8

<script src="jquery.cycle.all.2.72.js"></script>
<script>
	$(document).ready(function(){
		//cycle plugin
		$('.slideshow').cycle({
			fx: 'fade' 
		});
</script>

Getting the images ready:

Now that our scripts are intact, let’s get our images and our stylesheet ready so the animation will take place. Open feature.png in Photoshop and create new guides as shown below. Make sure you cut right down to the pixel.

Cut out the center image and fill with solid color.

Save the file under the same name.

Create several images that will go inside the slideshow - all must have the same dimensions – in our case: 476 pixels and 349 pixels.

Insert the HMTL right below the feature div. Of course you will replace the image names with your images, along with the right path:

1
2
3
4
5
6
7

<div class="slideshow">
<img src="images/feature-1.jpg"/>
<img src="images/feature-2.jpg"/>
<img src="images/feature-3.jpg"/>
<img src="images/feature-4.jpg"/>
<img src="images/feature-5.jpg"/>		
</div>

Append this code inside your existing style.css file:

#feature .slideshow {float:right; position:relative; left:-24px; top:21px;}

This ensures that the slideshow will sit on top of the designated box in the feature div:

Preview index.html in your browser. By now you should see your new slideshow swapping your images in your feature section:

Next up: The expanding sections, and the “lightbox” effect.

Adding the “More” click events on the sections below the fold:

We have two sections below the fold that showcase what our work is all about. One is the useful “Testimonials” section – where visitors read what others are saying about our services. And of course, the “Previous Work” area – where you plug in screenshots of work that you’ve done. This may be websites, photographs, software; anything that can be screen captured you can apply.

The point is to only show a few of testimonials, and a few thumbnails of your previous work. When visitors click on the “More” buttons, the section expands to show the rest.

This approach is also best for people who have plenty of work, but only would like to show a little at first.

Insert the code below inside the $(document).ready function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$(".column:gt(2), #previous-work ul li:gt(3)").hide();		
		$("#testimonials").append("<div class='more'><a id='more-testimonials'>More Testimonials</a></div>");
		$("#previous-work").append("<div class='more'><a id='more-previous-work'>More Previous Work</a></div>");	
		$("a#more-testimonials").click(function(event){		
			if ($(".column:gt(2)").is(":hidden")){							
				$(".column:gt(2)").slideDown('slow');
				$("a#more-testimonials").text("Less Testimonials");				
			}else{
				$(".column:gt(2)").slideUp('slow');
				$("a#more-testimonials").text("More Testimonials");	
			}			
			event.preventDefault();					  	
		});
		$("a#more-previous-work").click(function(event){							
			if ($("#previous-work ul li:gt(3)").is(":hidden")){
				$("#previous-work ul li:gt(3)").slideDown('slow');
				$("a#more-previous-work").text("Less Previous Work");				
			}else{
				$("#previous-work ul li:gt(3)").slideUp('slow');
				$("a#more-previous-work").text("More Previous Work");
			}			
			event.preventDefault();	
		});

The above code first hides our testimonial DIVS (that are greater than 3) and our previous work list items (that are greater than 4). Then it alters the HTML of our buttons, as well as toggle our hidden sections to appear while sliding slowly.

Adding the light show effect for the Portfolio gallery:

For the portfolio thumbnails – it would really be nice to add a “lightbox” effect once the images are clicked. Lightbox provide a way for viewers to see the detailed image without physically leaving the page. For our portfolio – we’re using http://fancybox.net/

Download: http://fancybox.googlecode.com/files/jquery.fancybox-1.2.6.zip
Extract the files and copy the folder “fancybox” from the unzipped file and place in the root folder of our portfolio. Inside index.html, place the code in the head section:

1
2

<script type="text/javascript" src="./fancybox/jquery.fancybox-1.2.6.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.2.6.css" media="screen" />

Inside our custom script tag, (right after the last “});”) insert the block of code:

1
2
3
4

$("a.zoom").fancybox({
			'zoomSpeedIn'	: 500,
			'zoomSpeedOut' : 500
	});

In our unordered list of thumbnails, insert this “class” and “rel” attributes for each anchor tag:

class="zoom" rel="group"

Refresh index.html in your browser and click a thumbnail. You should now see the effects of Fancy box from your portfolio:

Last step: The contact form.

Completing the Contact Form with PHP

Since HTML and javascript doesn’t support contents of a form to be sent through email, we need a little help from PHP to bring our contact form to life. We are now working with server side technology, so won’t be able to test our file without a web server. So in order to test our code, upload your file to your web host or run apache locally using WAMP or MAMP.

First thing we have to do is change the extension of index.html to .php. We will be working with the .php file from now on. You can discard the .html version – or keep it for archive.

Look for the form tag inside index.php; add a method and an action attribute:

<form id="contact-form" method="post" action="">

This enables our form to use the $_POST array and be processed by the same page. To test the contents of our post array, type the following code right above the form:

1
2

<pre>
<?php print_r($_POST) ?>

Now, add some stuff to the form fields, click “Submit” and see what our pre tags have spitted out:

Now we know what we need to work with as far as the contents of our post array. We can now remove the pre tags and continue to work on our code. Add the following code on the very top of the page (even before the !DOCTYPE declaration):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?php
//see number 1
 if (array_key_exists('send', $_POST)){
		//see number 2
$to = 'youremail@mail.com'; //this is your email address
	$subject = 'From Your Contact Form';
	$name = $_POST['name'];
	$email = $_POST['email']; 
	$comments = $_POST['comments'];  
		//see number 3
$message = "Name: $name\n"; 
	$message .= "Email: $email\n";
	$message .= "Comments: $comments";
		//see number 4
	mail($to, $subject, $message);
}
?>

What the above code is doing:

Now it’s time to test the code. Enter your email address into the $to variable then upload index.php to your web server. Fill out the form fields and click “submit”. You should receive an email similar to below:

Now remember that this is a stripped down version of a contact form. You should seriously consider adding several things such as form validation and formatting the entries for safe and legitimate values. Also add error and success messages to let the user know what’s going on. (I won’t cover such things because as you can see – this tutorial has gone waaay too long).

Final Words

There you have it - a complete single page portfolio. We started all the way from scratch: Mocked up the concept in Photoshop, hand coded the HTML, while slicing the images and writing the CSS. We've added some jQuery magic as well as a little bit of PHP functionality. As you see - a lot of work does go into it (and that's just a single page!)

In closing, I hope that you may learn something from this 3 part series. I also would like to thank the script and plugin developers which I included in this tutorial. You can download the finished product from this link, and of course view the live demo from here.

I also suggest that you find a web hosting server that works well with HTML, PHP and jQuery. This will take care of all your hosting needs.

As I was searching the net for good restaurant websites, I stumbled upon these 16 sites which had all the elements that my client needed. In addition, some of these websites look so good – that it would inspire many of you designers out there. Note that I included my work in the list (its my blog – I can do whatever I want).

http://thenoodlebox.net/

http://www.rubytuesday.com

http://www.twelve-restaurant.co.uk/

http://www.pizzaza.ca/

http://www.nuevo-aurich.de/

http://www.pomonavalleyminingco.com/

http://www.lapizarraproject.com/

http://www.villagerkent.com/

http://www.bertoldis.ca/

http://www.caferouge.co.uk/

http://jakesrh.net/

http://www.belgo-restaurants.co.uk/

http://www.giraffe.net/

http://www.sandiegobrewing.com/

http://www.hoddows-gastwerk.de/

http://www.strada.co.uk/

To preview what we are going to build – see the demo page. Just in case you missed the first tutorial, click here. So are you ready to get started? Let’s begin:

The Wrap, Header and Feature Divs

First of all, you will notice that our layout doesn’t really have anything in the header. This is because I’m sure you will use your own logo for your design – so I left that out. Second, is there really is no need for a navigation bar because we’re only building a single page. Although we may include some anchors in this area so we can quickly jump from one section of the page to another. Also important to recognize that most modern websites now have a large “feature” section which packs the main message of the website. This effect is proven to be pretty effective – that’s why we’re applying the same concept to our portfolio site.

In Dreamweaver, create a new HTML page, name it “index.html” and save it.

Create a CSS document – name it “styles.css” and save it in the same location as “index.html”. Link to the stylesheet from index.html by using a link tag:

<link type="text/css"  href="styles.css" rel="stylesheet" />

Now, we create the main DIV – we’ll call this the “wrap”. In this DIV we’ll house almost all of our elements (all but one: the footer – which I’ll explain later). In index.html, enter the code:

<div id="wrap">  </div><!--wrap-->

Next, we grab the body style of our page. Go to Photoshop and open our mockup. Flatten the image (“Layer” > “Flatten Image”) and grab a piece of background:

Still in Photoshop, press Ctrl + C to copy the selected area, create a new document – and paste (this will be our HTML body background that will span horizontally). Save this file as “body-bg.gif” inside a folder called “images” in our root directory.

Next is we apply some fixin’s to our CSS:

* {padding:0; margin:0}
  body{background: url(images/body-bg.gif) repeat-x #f3f2ed;}

The above code tells everything to reset to 0 padding and 0 margin. It also applies the body background to the image we just created, repeat it horizontally and apply the color #f3f2ed everywhere else. View your file in the browser, you should have something like below:

Now remember we created the main div? That is just sitting in somewhere in the page. Let’s apply some standard measurements to it and align it so it settles perfectly in the middle of our browser.

Note that in the beginning of this tutorial – I was going to use the 960.gs framework, but feel as though I’m cheating because the tutorial calls for “from scratch”. So I decided, I’m not using the framework and code everything by hand, hence – “from scratch”.

Add this code to your style.css:

#wrap {margin:0 auto; width:960px; background:#CCCCCC;  min-height:500px;}

This centers our wrap in the middle of the page, as well as set the default 960 pixels width. The background color and the minimum height properties are added temporarily so we can tell from the browser what we’re working with. Refresh your page and you should have something like below:

Go back to index.html and add the header div inside the wrap div:

<div  id="header"></div><!--header-->

Back to our style.css – add this piece of code:

#header {height:32px; background:#333333;}

Refresh your browser – and you can see where our header sits nicely on top. The background color again is temporary.

Next is our feature div. Create a new div tag in your index.html with the id of “feature”, place in between the “feature” divs. Add two paragraph tags inside with your own text. In my case – I’m using the default Lorem latin filler text:

1
2
3
4

<div id="feature">
<p id="slogan"><!--your fantastic slogan goes here--></p>
<p><!--followed by a smaller, but also fantastic slogan here--></p>
</div><!--feature-->

Notice the first paragraph tag has an id of “slogan”. This is because this is the primary text that we are going to style with an image. We are treating it as regular text for SEO purposes.

Go back to your mock up in Photoshop and press “Step Backward” (ctrl + z + alt) several times until you get the fully layered version once again. Make sure the guides are showing – select the feature section like below:

In your layers panel, make sure you hide all the layers that shouldn’t be shown. This includes all the background layers and text elements. The only layer that should remain is the large feature image and the borders and glow to the left. Select the feature area and hit crop (“image” > “crop”). Save this as “feature.png” inside our images folder. This will be our feature div background image:

Now in our styles.css – add the following code:

#feature {background:url(images/feature.png)  no-repeat; height:394px;}

Go back to your mockup and click “Step Backward” (“Edit” > “Step Backward”) to uncrop. Unhide the slogan layer and select it according to the guides. Crop once again and save this as “slogan.png”.

Now add this code to your styles.css:

1
2

#feature p#slogan {background:url(images/slogan.png)  no-repeat; width:390px; height:192px; text-indent:-9999px; position:relative;  top:30px; margin:0;}
#feature p {font-family:verdana; font-size:12px;  color:#FFFFFF; width:320px; line-height:20px; margin:48px 0 0 28px;}

The above code styles the two paragraph tags inside the feature div. The first one with a background image, and the next one as plain text. Now when search engines crawl our page – it still thinks both are plain text – which is a good thing.

I’ve also taken out the color property in our wrap div to see how our feature looks like. Another thing to remember is that since our feature sits in its own div – it will be easy to add a slideshow or something to that effect as replacement.

Now that our wrap, header and feature is in place, we’re ready to move to the next sections: Testimonials and Previous Work:

Testimonials and Previous Work Sections

If the feature section is our hard hitter – a testimonials area is our “counter punch”. Testimonials are a sure fire way of telling our viewers: “we’re good – read what others are saying about me!”. Also another proven way of increasing business, it is also the reason why we’re putting testimonials right below our feature section. Ready to continue coding? Let’s keep going.

In our index.html, add the code for our testimonials. Place this directly below our feature div:

1
2
3
4
5
6
7
8
9
10

<div class="column first">
<p><!--your content here--></p><strong><!--author here--></strong>
</div><!--column-->
<div class="column">
<p><!--your content here--></p><strong><!--author here--></strong>
</div><!--column-->
<div class="column last">
<p><!--your content here--></p><strong><!--author here--></strong>
</div><!--column-->
</div><!--testimonials-->

Of course, you substitute real testimonials and authors in its place. Notice the “first” and “last” additional classes to the columns – we need this to fix our margins in our css. Next, go back to Photoshop and go backwards again so you get back to the original uncropped file. Select the Testimonials title all the way to the rightmost guide. Crop and save as “testimonials-title.jpg” inside our images folder.

Inside styles.css, append the below code:

1
2
3
4

#testimonials {clear:both;  background:url(images/testimonials-title.jpg) no-repeat top left;  overflow:hidden; padding:65px 0 0 0; margin:0 10px 0 10px;}
#testimonials .column {width:260px; float:left;  background:#ccc; padding:20px; margin:10px; font-family:georgia, helvetica,  arial, serif; font-size:13px; line-height:19px;}
#testimonials .column.first{margin-left:0px;}
#testimonials .column.last{margin-right:0px;}

This code adds the background image that we just created to the main testimonials div. It also adds proper styling to the columns inside the div, and fixes to the margins so it remains inside our imaginary grid.

The optional “more” tab

The more tab is only necessary if you have more than 3 columns of testimonials that you would like to show. The point is just show 3 columns at first, and by clicking the “more” tab – more testimonial columns will slide below – most likely to be achieved by jQuery (I haven’t gotten there yet – remember – I’m writing this tutorial as I go!).

To add a more tab – add this code to your HMTL, right underneath the last column div:

1
2
3

<div class="more">
<a id="more-testimonials">More  Testimonials</a>
</div><span id="more-1035"></span>

Note that we used a class for our div instead of an id. This is because this div can actually be reused in another section of our page.

Go back to your Photoshop file – click “Step Backwards” to the uncropped version – select the section that shows the “more testimonials” border and button according to your guides. Remember to hide the text layer over the button.

Crop and save this as “more-bg.jpg” inside the images folder. Add the code below to your .css file:

1
2
3
4

.more {clear:both; background:url(images/more-bg.jpg)  no-repeat; height:31px;}
.more a{float:right; font-family:verdana; font-size:10px;}
.more a:hover {color:#999999;}
a#more-testimonials {padding:10px 16px 0 0;}

For the “Previous Work” section – it’s pretty much the same process as testimonials. The difference is – we are actually using an unordered list instead of div columns. Add the following code inside your HTML:

1
2
3
4
5
6
7
8
9
10
11

<div id="previous-work">
<ul>
<li><a  href="images/thumbnail.jpg"><img  src="images/thumbnail.jpg" /></a></li>
<li><a href="images/thumbnail.jpg"><img  src="images/thumbnail.jpg" /></a></li>
<li><a  href="images/thumbnail.jpg"><img  src="images/thumbnail.jpg" /></a></li>
<li class="last"><a  href="images/thumbnail.jpg"><img  src="images/thumbnail.jpg" /></a></li>
</ul>
<div class="more">
<a id="more-previous-work">More Previous  Work</a>
</div><!--more-->
</div><!--previous-work-->

The thumbnail sizes are going to be 200 pixels width by152 pixels height. My sample code contains dummy thumbnails along with temporary images for the bigger image. We are incorporating a light box effect in the final product so users do not actually leave the page when viewing your gallery. Notice the addition of the “more” tab – which is again, purely optional.

For the “Previous Work” title – you do the same exact process in Photoshop as you did previously in the Testimonials title. Save this image in the images folder – name it: “previous-work-title.jpg”.

Now we add some styling to the list items, thumbnails and the entire div section:

1
2
3
4
5
6
7
8

#previous-work {clear:both; background:url(images/previous-work-title.jpg)  no-repeat top left; overflow:hidden; padding:65px 0 0 0; margin:0 10px 0 10px;  text-shadow:0 1px 0 #fff;}
#previous-work ul {padding-left:7px;}
#previous-work ul li{float:left; list-style:none;  margin:20px 15px 20px 0;}
#previous-work ul li.last{margin:20px 0 20px 0;}
#previous-work ul li a{background:url(images/thumb-bg.jpg);  width:209px; height:165px; display:block; padding:11px 0 0 10px;}
#previous-work ul li a:hover  {background:url(images/thumb-bg-hover.jpg);}
#previous-work ul li a img {border:none; outline:none;}
a#more-previous-work {padding:10px 10px 0 0;}

I also created a couple of thumbnail image backgrounds for the active and hover states. Again this is purely optional and I won’t go over in this tutorial.

Now refresh your page in your browser. You should have something like the image below. It is also good practice to start viewing your page in different browsers. This way – you can start fixing bugs this early in the development process. Next stop is the footer.

The Footer

Let’s go back to our Photoshop file – you may have to go back in history a couple of times to get you to the uncropped, fully layered version. Another thing to remember is NOT to save your original mock up file. This file is to stay in its original form – we are just cropping, hiding layers as we go to get the parts we want. But in the whole, this mockup .psd file remains in its original state. Select the footer area – starting from the guide a few pixels above the dark brown area.

Once selected – crop the selection – but don’t save as of yet; we’re going to save a couple of images from this selection – one is the footer wrap, the other is the actual footer background.

Once cropped, select the first 20 pixels from the left and crop once again. Save this file as “footer-wrap.gif” inside our images folder. Now go back to the Photoshop file and step backwards a couple of times to bring us to entire cropped footer image. Hide the layer group named “form”, as well as all the text layers in the footer area.

Save this file as “footer.jpg” in the images folder. Unhide the text layer that says “Hire Me for Professional Work”, and hide all the background layers so you get full transparency. Select the text area using the rectangular marquee tool and crop. Save this file as “slogan2.png” in our images folder.

Now hit “Step Backward” (ctrl + alt + z) a couple of times to get to the uncropped footer image and unhide the “form” group of layers. Make sure you hide all the layers inside the form – all we need is the rounded container that embodies the form. Select this area, crop and save this file as “form-bg.png” in our images folder.

Finally, unhide the button text, shape and glow. Create guides that surround the button image and select accordingly. Crop and save as “submit.png” in our images folder.

Now go back to our index.html, add the following code right underneath the entire wrap div.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div id="footer-wrap">
<div id="footer">
<div id="left-container">
<p id="slogan2">Hire Me for Professional  Work</p>
<p><!--your footer slogan in this section</p>
</div><!--left-container-->
 
<form id="contact-form">
 
<div id="split-left">
  <label  for="name">Name:</label><br/>
  <input name="name" id="name"  type="text" class="formbox"/><br />
  <label  for="email">Email:</label><br />
  <input name="email" id="email"  type="text" class="formbox" /><br />
</div><!--split-left-->
  <label  for="comments">Comments:</label><br />
  <textarea name="comments"  id="comments" type="textarea" class="formbox"  /></textarea>
  <input name="send" id="send"  type="submit" value="" class="send"  />
</form>
 
</div><!--footer-->
</div><!--footer-wrap-->

The above code sets up all the content in the footer. This includes the two paragraphs on the left side and the contact form. Note that the form is still static. We will be converting this into a working form once we convert this to PHP.

Next up, is to style the contact form. Add the following code to your styles.css:

1
2
3
4
5
6
7
8
9

#footer-wrap {clear:both;  background:url(images/footer-wrap.gif) repeat-x; height:377px;  margin-top:20px;}
#footer {width:940px; margin:0 auto;  background:url(images/footer.jpg); height:377px;}
#footer #left-container {width:400px; float:left;}
#contact-form {background:url(images/form-bg.png) no-repeat;  width:427px; height:169px; float:right; padding:40px 0 0 0; margin:78px 0 0 0;}
#split-left {width:170px; float:left; margin:0 0 0 30px;}
#contact-form label{color:#9e876b; font-family:verdana;  font-size:10px;}
#contact-form .formbox {padding:2px; margin:4px 0 7px 0;}
input.send {background:url(images/submit.png); width:101px;  height:37px; border:none; display:block; margin-top:10px;}
input:hover.send {background:url(images/submit2.png);}

The above code sets up our footer wrap to span the entire width of the page with its own background image repeating horizontally. Now you understand why we excluded this from the main wrap div? The rest of the code applies the styling to the footer and contact form – tied to the images we created in the previous steps.

Finally, we add the final touches to the two paragraph tags on the left side. Add this code to your styles.css:

1
2

#footer p#slogan2 {background:url(images/slogan2.png);  width:400px; height:123px; text-indent:-9999px; }
#footer p {width:400px; float:left; font-family:verdana;  color:#FFFFFF;  text-shadow:0 1px 0 #000;  font-size:12px; line-height:20px; }

That concludes are HTML and CSS tutorial on our single page portfolio. Remember, we still have the scripting side to do – which is handled by PHP and jQuery, which we’ll cover in the next series. Click Here to see the DEMO Version of what we just created. The source code is also available to download – which includes all the files covered in this tutorial.