Step 6: Featured Panel Tutorial

<< Index

This is what we are going to create in this step by step tutorial. Click on the image to view the website in new tab.

CSS Example Website Step6
Featured Panel - Step 6.1

In Step 6.1, CSS3 style is applied to the Featured Panel.

The style is provided below with HTML comment explanation.

/* Featured Panel */		

.bottom-sidebar {   /* Style applied to side-bar */
	width: 20%;
	float: left;
	margin-left: 2%;
	padding: 2% 3%;
}

.featured {   /* Style applied to featured panel */
	background: none repeat scroll 0 0 #F2F2F2;
    border-color: #D9D9D9;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 1.25em;
    padding: 1.25em; 
}
		

Featured Panel Step is now complete

Now the website will look like this. Click on the image to view the website in new tab.

CSS Example Website Step6
Next Lesson > Step 7: Footer