Create a fancy footer and sexy front page – Part 3

Step 3: Tweak the CSS

Now that we have new sections in our template, all that’s needed is a bit of CSS tweaking.

Let’s add the following to our style.css:

/* Home page area
------------------------------------------------------------*/
#banner {
	width:900px;
}
#banner  p {
	margin:0;
	padding:0;
}
#banner  img {
	background:#FFF;
	padding:10px;
	-webkit-box-shadow: 0px 2px 2px 2px #ccc;
	-moz-box-shadow: 0px 2px 2px 2px #ccc;
	box-shadow: 0px 2px 2px 2px #ccc;
}
.column {
	float:left;
	width:440px;
	padding: 20px 20px 10px 0;
}
.second {padding-right:0;}

Your homepage should now be looking like our PSD.

Moving on the footer next.

Comments are closed.