Thanks MTBRider it worked.

I have one more query, how can i apply custom styles to my visualforce page?

I have uploaded the following css file to static resources along with the respective images.

html, body {
height: 100%;
}

body {
margin: 0px;
padding: 0px;
background: #080808 url(images/main-bg.png) repeat;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
color: #2B2B2B;
}

h1, h2, h3 {
margin: 0;
padding: 0;
}

p, ol, ul {
margin-top: 0px;
}

p {
line-height: 180%;
}

strong {
}

a {
color: #0000FF;
}

a:hover {
text-decoration: none;
}

a img {
border: none;
}

img.border {
}

img.alignleft {
float: left;
}

img.alignright {
float: right;
}

img.aligncenter {
margin: 0px auto;
}

hr {
display: none;
}

/** WRAPPER */

#wrapper {
}

.container {
width: 1000px;
margin: 0px auto;
}

.clearfix {
clear: both;
}

/** HEADER */

#header {
overflow: hidden;
width: 900px;
height: 150px;
padding: 0px 50px;
background: url(images/gradient-bg.png) no-repeat center top;
}

/** LOGO */

#logo {
float: left;
width: 300px;
height: 150px;
}

#logo h1, #logo p {
margin: 0px;
line-height: normal;
}

#logo h1 a {
display: block;
line-height: 150px;
text-transform: uppercase;
text-decoration: none;
font-family: 'Archivo Narrow', sans-serif;
font-size: 1.3em;
color: #FFFFFF;
}

/** MENU */

#menu {
float: right;
width: 600px;
height: 99px;
}

#menu ul {
float: right;
margin: 0px;
padding: 60px 0px 0px 0px;
list-style: none;
line-height: normal;
}

#menu li {
float: left;
margin-left: 2em;
}

#menu a {
display: block;
padding: 10px 15px;
letter-spacing: 2px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Archivo Narrow', sans-serif;
font-size: 1.10em;
font-weight: 600;
color: #B6B6B6;
}

#menu .active a
{
background: #0091E6;
border-radius: 5px;
color: #FFFFFF;
}

#menu a:hover {
text-decoration: underline;
}

/** PAGE */

#page {
overflow: hidden;
width: 900px;
padding: 70px 50px 50px 50px;
background-color: #FFFFFF;
border-radius: 10px 10px 0px 0px;
}

#page h2
{
margin-bottom: 30px;
}

/** CONTENT */

#content {
float: right;
width: 580px;
}

#content #onecolumn
{
padding-bottom: 30px;
border-bottom: 1px solid #D4D4D4;
}

#content h2
{
letter-spacing: -1px;
font-size: 3em;
}

/** SIDEBAR */

#sidebar {
float: left;
width: 260px;
padding-top: 10px;
}

#sidebar #sbox1
{
margin-bottom: 40px;
}

#sidebar #sbox2
{
overflow: hidden;
margin-bottom: 50px;
}

#sidebar #sbox3
{
overflow: hidden;
}
/** BANNER */

#banner {
overflow: hidden;
padding: 50px 0px 0px 0px;
background: #A11C47 url(images/banner-bg.png) repeat;
border-radius: 10px 10px 0px 0px;
}

#banner:before
{
content: '';
width: 100%;
height: 100%;
display: block;
position: absolute;
background: url('images/gradient-bg.png') no-repeat right top;
background-size: 100% 100%;
top: 0px;
right: 0px;
}

/* Footer */

#footer {
overflow: hidden;
width: 900px;
padding: 70px 50px 50px 50px;
background-color: #161616;
border-top: 6px solid #000000;
border-radius: 0px 0px 10px 10px;
}

#footer h2
{
padding: 0px 0px 50px 0px;
font-weight: 400;
color: #D3D3D3;
}

#footer p {
color: #4E4E4E;
}

#footer #fbox1 {
float: left;
width: 260px;
margin-right: 60px;
}

#footer #fbox2 {
float: left;
width: 260px;
}

#footer #fbox3 {
float: right;
width: 260px;
}

#copyright
{
overflow: hidden;
width: 900px;
padding: 50px;
}

#copyright p
{
text-align: center;
text-shadow: 1px 1px 1px rgba(0,0,0,1);
}

#copyright a
{
color: #4E4E4E;
}

ul.style1
{
margin: 0px;
padding: 0px;
list-style: none;
}

ul.style1 li
{
padding: 10px 0px 20px 0px;
border-top: 1px solid #242424;
}

ul.style1 a
{
color: #4E4E4E;
}

ul.style1 .first
{
padding-top: 0px;
border-top: none;
}

ul.style2
{
margin: 30px 0px 0px 0px;
padding: 0px;
list-style: none;
}

ul.style2 li
{
float: left;
margin-right: 10px;
}

ul.style3
{
margin: 0px;
padding: 0px;
list-style: none;
}

ul.style3 li
{
padding: 10px 0px 20px 0px;
border-top: 1px solid #E0E0E0;
}

ul.style3 a
{
color: #4E4E4E;
}

ul.style3 .first
{
padding-top: 0px;
border-top: none;
}
/** Slider */

#slider
{
overflow: hidden;
margin: 0 auto;
position: relative;
}

#slider .button
{
display: inline-block;
background: #0074C6;
color: #ffffff;
text-align: center;
line-height: 50px;
height: 50px;
text-decoration: none;
outline: 0;
border-radius: 8px;
font-size: 1.25em;
border-bottom: solid 2px #0054A6;
text-shadow: 0 1px 1px #003A6C;
}

#slider .button:hover
{
background: #2094E6;
}

#slider .viewer
{
width: 900px;
height: 400px;
margin: 0 auto 50px auto;
overflow: hidden;
}

#slider .viewer .reel
{
display: none;
}

#slider .viewer .reel .slide
{
position: relative;
width: 900px;
height: 500px;
}

#slider .viewer .reel h2
{
position: absolute;
top: 230px;
left: 0;
padding: 0px 30px;
line-height: 80px;
background: #111111;
text-align: center;
opacity: 0.75;
font-weight: normal;
font-family: 'Archivo Narrow', sans-serif;
color: #ffffff;
font-size: 4.50em;
}

#slider .viewer .reel p
{
position: absolute;
top: 310px;
left: 0;
display: block;
padding: 5px 35px;
background: #0074C6;
text-align: center;
opacity: 0.75;
font-family: 'Archivo Narrow', sans-serif;
font-weight: normal;
color: #ffffff;
font-size: 2.00em;
}

#slider .indicator
{
padding: 30px 0px;
background-color: #7A0C30;
margin: 0 auto 0 auto;
}

#slider .indicator ul
{
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}

#slider .indicator ul li
{
display: inline-block;
width: 12px;
height: 12px;
text-indent: -9999em;
background: #970D39;
margin: 0 2px 0 2px;
border-radius: 8px;
}

#slider .indicator ul li.active
{
background: #C4164E;
}

#two-column
{
padding-top: 50px;
}

.box-content
{
overflow: hidden;
margin-bottom: 4em;
}

.box-content p
{
padding-left: 60px;
}

.title
{
display: block;
padding-left: 60px;
padding-bottom: 1em;
font-size: 1.70em !important;
font-weight: 600;
color: #333333;
}

.title01
{
background: url(images/icon01.png) no-repeat left top;
}

.title02
{
background: url(images/icon02.png) no-repeat left top;
}

/* List Style 1 */

.list-style1 {
margin: 0px;
padding: 0px;
list-style: none;
}

.list-style1 li {
padding: 20px 0px 20px 0px;
border-top: 1px solid #D4D4D4;
}

.list-style1 .date {
font-weight: bold;
color: #212121;
}

.list-style1 img {
float: left;
margin-right: 25px;
}

.list-style1 .first {
padding-top: 0px;
border-top: none;
}

/* List Style 1 */

.link-style {
display: inline-block;
margin-top: 10px;
padding: 5px 15px;
background: #0091E6;
border-radius: 5px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
}

.testimonial
{
font-style: italic;
color: #878787;
}

.author
{
padding-top: 20px;
font-style: italic;
}

.author .name
{
display: block;
padding: 5px 0px;
font-size: 1.2em;
font-weight: 700;
font-style: normal;
}

.author .position
{
display: block;
padding: 5px 0px;
}

.author img
{
float: left;
margin-right: 30px;
border-radius: 10px;
border: 5px solid rgba(0,0,0,.1);
}

 But it is not changing my styles as required.

I am using this code :  <apex:stylesheet value="{URLFOR($Resource.opentools.zip,'default.css')}"/> after <apex:page > tag

Kindly help.