thebluecompany
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="description of page" />
<meta name="keywords" content="keywords of site" />
<meta name="author" content="name of author - Manjeet Singh Sawhney www.manjeetss.com" />
<style type='text/css'>
/* This website template was created by myself Manjeet Singh Sawhney (http://www.manjeetss.com)
You are free to copy, distribute and adapt any of the work under the following condition:
You must attribute the work by keeping the "Designed by Manjeet Singh Sawhney" link in the footer.
If you wish, you can remove the footer link by paying a small fee of only $5. For this please drop me an e-mail to manjeetss@gmail.com with your details and I will then send you my PayPal account details. Thanks.
*/
body
{
margin: 0 0 60px 0;
padding: 0;
background: #fff;
font-size: 100%;
font-family: Helvetica, Arial, Verdana;
color: #666;
}
img
{
border: 0;
}
#container
{
margin: 0 auto;
width: 800px;
}
#navbar
{
width: 800px;
height: 85px;
border-bottom: 2px solid #00baff;
}
#navleft
{
float: left;
width: 300px;
height: 100px;
}
#navleft h1
{
margin: 45px 0 0 15px;
padding: 0;
font-size: 170%;
font-weight: normal;
color: #00baff;
}
#navleft a
{
color: #00baff;
text-decoration: none;
}
#navright
{
float: left;
width: 500px;
height: 100px;
}
#navright ul
{
margin: 55px 15px 0 0;
padding: 0;
list-style-type: none;
text-align: right;
color: #ccc;
}
#navright ul li
{
display: inline;
margin: 0 0 0 10px;
}
a
{
text-decoration: none;
color: #00baff;
}
a:hover
{
color: #2eff29;
}
#navright ul li a
{
text-decoration: none;
color: #999;
font-weight: bold;
}
#navright ul li a.active
{
text-decoration: none;
color: #00baff;
font-weight: bold;
}
#navright ul li a:hover
{
color: #2eff29;
}
#main
{
width: 800px;
line-height: 160%;
padding: 15px 0 0 0;
border-bottom: 2px solid #00baff;
}
#main p
{
margin: 0 15px 15px 15px;
}
#main h2, h3
{
margin: 0 0 15px 0;
padding: 5px 15px;
font-size: 120%;
font-weight: normal;
color: #00baff;
border-bottom: 1px solid #E5E5E5;
}
#mainright
{
float: left;
width: 485px;
padding: 0 15px 0 0;
}
#mainright img.left
{
float: left;
border: 1px solid #CDCDCD;
padding: 5px;
margin: 0 15px 5px 15px;
}
#mainright img:hover.left
{
border: 1px solid #2eff29;
}
#mainright img.right
{
float: right;
border: 1px solid #cdcdcd;
padding: 5px;
margin: 0 15px 5px 15px;
}
#mainright img:hover.right
{
border: 1px solid #2eff29;
}
#mainleft
{
float: left;
width: 255px;
padding: 0 30px 0 15px;
}
#mainleft .leftmenu
{
text-align: left;
margin: 5px 10px 5px 10px;
font-weight: bold;
}
#mainleft .leftmenu a
{
display: block;
padding: 0px 5px 0px 5px;
color: #00baff;
text-decoration: none;
}
#mainleft .leftmenu a:hover
{
color: #2eff29;
}
#bottom
{
clear: both;
width: 800px;
}
#footer
{
float: left;
width: 800px;
height: 50px;
color: #999;
}
#footer p
{
margin: 0;
padding: 15px;
}
#footer a
{
color: #999;
text-decoration: none;
}
#footer a:hover
{
color: #00baff;
text-decoration: none;
}
#footerleft
{
float: left;
width: 300px;
height: 50px;
}
#footerright
{
float: left;
width: 500px;
height: 50px;
text-align: right;
}
#footerleft a, #footerright a
{
font-weight: bold;
}
#footerleft a:hover, #footerright a:hover
{
color: #2eff29;
}
</style>
<title>the blue company - www.manjeetss.com</title>
</head>
<body>
<div id="container">
<div id="navbar">
<div id="navleft">
<h1><a href="index.html">the blue company</a></h1>
</div>
<div id="navright">
<ul>
<li><a class="active" href="index.html">home</a></li>
<li><a href="http://www.manjeetss.com/websitetemplates.html">Website Templates</a></li>
<li><a href="http://www.manjeetss.com/fitnessnutrition.html">Fitness & Nutrition</a></li>
</ul>
</div>
</div>
<div id="main">
<div id="mainleft">
<h2>navigation menu</h2>
<div class="leftmenu"><a href="#">link 1</a></div>
<div class="leftmenu"><a href="#">link 2</a></div>
<div class="leftmenu"><a href="#">link 3</a></div>
<h2>news</h2>
<p>Proin magna erat, accumsan sed, faucibus a, tristique vestibulum,
lectus. Nulla lorem dolor, placerat at, adipiscing suscipit, mollis
at, nisi. Praesent at magna.</p>
<h3>upcoming meetings</h3>
<p>Proin magna erat, accumsan sed, faucibus a, tristique vestibulum,
lectus. Nulla lorem dolor, placerat at, adipiscing suscipit, mollis
at, nisi. Praesent at magna.</p>
</div>
<div id="mainright">
<h2>header</h2>
<p>This is another one of my free website templates which I am offering
for anyone to use and adapt. Please take a minute to read the important
note below regarding the usage of this template.</p>
<p>If you need a customised template design according to your requirements
then please let me know by dropping me an e-mail to
<a href="mailto:manjeetss@gmail.com">manjeetss@gmail.com</a>.</p>
<p>You are free to copy, distribute and adapt any of the work under the
condition that you must attribute the work by keeping the "Designed by
Manjeet Singh Sawhney" link in the footer.</p>
<p>If you wish, you can remove the footer link by paying a small fee of
only $5. For this please drop me an e-mail to
<a href="mailto:manjeetss@gmail.com">manjeetss@gmail.com</a> with your
details and I will then send you my PayPal account details. Thanks.</p>
<img alt="image" src="thebluecompany-images/image.jpg" width="150" height="100" class="left" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis
ligula. Donec tortor purus, ornare vel, tincidunt at, lacinia ac, leo.
Nunc fermentum congue odio. Mauris cursus, pede vitae sagittis luctus,
dolor felis aliquam arcu, ac pulvinar lacus massa non ipsum.</p>
<p>Praesent volutpat, felis in consectetuer lobortis, nibh orci nonummy
quam, nec lobortis tellus purus eget turpis. Vestibulum placerat sagittis
lorem. Praesent interdum ultricies massa. Morbi dolor. Donec sit amet
ligula ut ipsum ullamcorper imperdiet. Aliquam id lorem.</p>
<h3>header</h3>
<p>Aliquam dolor. Nunc egestas ipsum et odio.Nulla facilisi. In hac
habitasse platea dictumst. Aliquam nec dolor. Morbi eleifend
fermentum orci.Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.</p>
<img alt="image" src="thebluecompany-images/image.jpg" width="150" height="100" class="right" />
<p>Nunc elementum. Suspendisse et purus eget felis ultricies euismod.
Nulla facilisi. Donec euismod lacinia ante. Morbi lacus dui,
ultrices eget, rutrum eget, volutpat a, felis. Aenean nec libero ac
urna semper fringilla. Donec commodo. Donec rhoncus.</p>
</div>
<div id="bottom"></div>
</div>
<div id="footer">
<div id="footerleft">
<!--
This website template was created by myself Manjeet Singh Sawhney (http://www.manjeetss.com)
You are free to copy, distribute and adapt any of the work under the following condition:
You must attribute the work by keeping the "Designed by Manjeet Singh Sawhney" link in the footer.
If you wish, you can remove the footer link by paying a small fee of only $5. For this please drop
me an e-mail to manjeetss@gmail.com with your details and I will then send you my PayPal account details.
Thanks.
-->
<p>Copyright © 2011 Your Site</p>
</div>
<div id="footerright">
<p>Designed by Manjeet Singh Sawhney - <a href="http://www.manjeetss.com">www.manjeetss.com</a></p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category