easybreeze
<!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">
<head>
<title>EasyBreeze</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/*#############################################################
© 2007
Author: Igor Jovic
URL: http://spinz.se
#############################################################*/
/* default elements */
*{margin:0px;padding:0px}
h1
{
font-family:arial, verdana, helvetica, sans-serif;
font-size:1.9em;
font-weight: bold;
color:#333333;
line-height:1.6em
}
p
{
font-family:Verdana, Arial, helvetica, sans-serif;
font-size:0.8em;
font-weight: normal;
color:#333333;
padding-left:5px;
line-height:1.6em
}
.quote
{
font-family:Verdana, Arial, helvetica, sans-serif;
font-style: italic;
margin-left:0px;
padding-left:0px;
padding-top:0px;
line-height:1.6em;
float:left;
}
.right
{
background-color:black;
float:right;
}
a
{
color:#467AA7;
font-size:0.9em;
font-weight:normal;
font-style:normal;
text-decoration:none;
}
a:link
{
color:#467AA7;
font-weight:normal;
font-style:normal;
text-decoration:none;
}
a:visited
{
color:#467aa7;
font-style:normal;
font-weight:normal;
text-decoration:none;
}
a:hover
{
color:#ff6600;
font-style:normal;
text-decoration:none;
}
/* Layout */
body
{
margin: 0;
padding:0;
font-family: Verdana,'Lucida Grande', Verdana, Helvetica, sans-serif;
background-image: url(easybreeze-Img/bg.jpg);
background-repeat: repeat-x;
background-color:#ffffff;
list-style:none;
}
#wrapper
{
margin-top: 0pt;
margin-right: auto;
margin-bottom: 0pt;
margin-left: auto;
padding-top: 0pt;
padding-right: 0pt;
padding-bottom: 0pt;
padding-left: 0pt;
width:1000px;
background:transparent;
}
#header
{
width: 950px;
background: url(easybreeze-Img/b.jpg) repeat-x;
}
#header .logo
{
float:left;
padding-top:0px;
padding-left:45px;
border: none;
}
#nav ul
{
display:block;
float:right;
list-style:none;
margin-top:80px;
margin-right:20px;
}
#nav li
{
float:left;
margin-bottom:0px;
padding-bottom:0px;
padding-right:19px;
}
#nav ul li a
{
float:left;
border-left:4px solid #858383;
display:block;
margin-right:1px;
padding-right:5px;
padding-left:5px;
padding-top:10px;
padding-bottom:10px;
color: #ffffff;
font-weight: normal;
font-size: 0.9em;
text-decoration: none;
font-family:Arial, Helvetica, sans-serif;
}
#nav li a:hover
{
color: #ffffff;
border-left:4px solid #facd00;
}
#nav .selected {
color: #ffffff;
border-left:4px solid #facd00;
}
#content
{
float:left;
background-color:transparent;
margin-top:0px;
margin-bottom:0px;
padding:10px;
width:920px;
border-bottom:1px solid #eaeaea;
}
#col1
{
float:left;
background-color:transparent;
margin-top:20px;
margin-bottom:5px;
padding:10px;
width: 570px;
border-right:1px solid #eaeaea;
}
#col1 p
{
font-size:0.8em;
padding:0 20px 20px 0;
color:#555555;
}
#col1 h1
{
font-family:Arial, verdana, helvetica, sans-serif;
font-size:1.4em;
color: #6d6d6d;
font-weight:normal;
padding-bottom:10px;
}
#col2
{
float:right;
background-color:transparent;
margin-top:20px;
margin-bottom:5px;
padding:10px 0 10px 15px;
width: 310px;
}
#col2 p
{
font-size:0.8em;
padding:0 20px 20px 0;
color:#555555;
}
#col2 h1
{
font-family:Arial, verdana, helvetica, sans-serif;
font-size:1.4em;
color: #6d6d6d;
font-weight:normal;
padding-bottom:10px;
}
#boxcontainer
{
float:left;
clear:both;
background-color:transaprent;
margin-top:0px;
margin-bottom:15px;
padding:10px;
width: 920px;
}
.box1
{
width:167px;
float:left;
margin-left:0px;
padding-right:5px;
margin-top: 8px;
padding-left: 20px;
padding-top: 0px;
padding-bottom:8px;
border-right:1px dotted #dadada;
}
.box1 p
{
font-size:0.7em;
padding-top:10px;
padding-left:10px;
padding-right:10px;
color:#555555;
}
.box1 h1
{
background-image:url(easybreeze-Img/one.gif);
background-repeat:no-repeat;
background-position:top left;
display:block;
font-family: 'Trebuchet MS';
font-size:1em;
padding-top:0px;
padding-left:30px;
color:#619fde;
}
.box2
{
width:167px;
float: left;
margin-left:25px;
margin-top: 8px;
padding-right:5px;
padding-left: 20px;
padding-top: 0px;
padding-bottom:8px;
border-right:1px dotted #dadada;
}
.box2 p
{
padding-top:10px;
padding-left:4px;
padding-right:10px;
color:#555555;
font-size:0.7em;
}
.box2 h1
{
background-image:url(easybreeze-Img/two.gif);
background-repeat:no-repeat;
background-position:top left;
display:block;
font-family: 'Trebuchet MS';
font-size:1em;
padding-top:0px;
padding-left:30px;
color:#619fde;
}
.box3
{
width:167px;
float:left;
margin-top: 8px;
padding-left: 20px;
margin-left:25px;
padding-top: 0px;
padding-bottom:8px;
}
.box3 p
{
font-size:0.7em;
padding-top:10px;
padding-left:4px;
padding-right:10px;
color:#555555;
}
.box3 h1
{
background-image:url(easybreeze-Img/three.gif);
background-repeat:no-repeat;
background-position:top left;
font-family: 'Trebuchet MS';
font-size:1em;
padding-top:0px;
color:#619fde;
padding-left:30px;
}
#footer
{
clear: both;
margin-right: 0px;
margin-bottom:0px;
margin-left: 0px;
padding:8px;
background-color:#191718;
text-align:center;
}
#footer p
{
font-size: 0.7em;
line-height:3em;
font-family: arial;
font-weight: normal;
color: #5b5b5b;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 10px;
text-align: center;
}
#footer a
{
font-size: 1em;
font-weight: normal;
color: #facd00;
text-align: center;
}
#footer a:hover
{
text-decoration: underline;
font-weight: normal;
color: #facd00;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><a href="http://www.free-css.com/"> <img src="easybreeze-Img/logo.jpg" class="logo" alt="" /> </a>
<div id="nav">
<ul>
<li><a href="http://www.free-css.com/" class="selected">LINK 1</a> </li>
<li><a href="http://www.free-css.com/">LINK 2</a></li>
<li><a href="http://www.free-css.com/">LINK 3</a></li>
<li><a href="http://www.free-css.com/">LINK 4</a></li>
<li><a href="http://www.free-css.com/">LINK 5</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="col1">
<h1>Welcome </h1>
<p class="quote"><img src="easybreeze-Img/quote.jpg" alt="" class="quote"/>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce posuere. Nulla nibh diam, accumsan vel, sagittis et, accumsan nec, nulla.Nulla id libero. Nullam urna nibh, vehicula vel, commodo id, interdum quis, est. </p>
<p>Praesent eu nisi a purus ultrices faucibus. Morbi eget purus. Pellentesque imperdiet, nisi ut laoreet molestie, risus risus bibendum sapien, nec suscipit metus orci ac elit. Nulla facilisi. Ut ornare lorem sit amet
Nunc mauris augue, venenatis id, mattis et, hendrerit rutrum, est. Aliquam <a href="http://www.free-css.com/"> Link here </a>malesuada, libero a malesuada accumsan, metus tortor viverra dui, in euismod dolor velit id nulla. Donec viverra congue lectus. Etiam porttitor, arcu non pellentesque sagittis, ante nisi mattis felis, viverra tempor purus magna vel elit. Nulla tincidunt. Mauris bibendum pulvinar diam.</p>
<p>Vivamus aliquam. Nulla semper, odio sit amet convallis pulvinar, ligula magna euismod justo, eget sodales nulla pede id mi. Donec non sapien eget metus posuere vulputate. Etiam lacinia <a href="http://www.free-css.com/"> Link here </a>mi id libero. Donec magna. Nam accumsan tristique leo. Morbi eu metus ac enim iaculis aliquam. Nam metus augue, rutrum eu, elementum quis, posuere ac, turpis. Cras non nisl. Cras in nisl. Sed sapien. Nulla lobortis felis eu nisl. Donec vel risus. Nullam nunc odio, ullamcorper a, ultrices ut, volutpat imperdiet, justo.</p>
</div>
<div id="col2">
<h1>Sidebar - Col2 </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis dictum vulputate lacus. Cras placerat, lectus fringilla placerat porttitor, augue turpis imperdiet tortor, nec elementum lacus lectus ac augue. </p>
<p>Quisque lacinia. Ut cursus auctor pede. Fusce ipsum lorem, eleifend sed, rutrum nec, aliquam eget, erat. Phasellus facilisis elementum nibh. Sed placerat ante at nibh.</p>
</div>
</div>
<div id="boxcontainer">
<div class="box1">
<h1> This is Box 1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus luctus. Curabitur vitae velit ac nisi ultricies venenatis. Praesent ultricies. <a href="http://www.free-css.com/"> Read More </a></p>
</div>
<div class="box2">
<h1> This is Box 2</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus luctus. Curabitur vitae velit ac nisi ultricies venenatis. Praesent ultricies.<a href="http://www.free-css.com/"> Read More </a> </p>
</div>
<div class="box3">
<h1> This is Box 3</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus luctus. Curabitur vitae velit ac nisi ultricies venenatis. Praesent ultricies. <a href="http://www.free-css.com/"> Read More </a></p>
</div>
</div>
</div>
<div id="footer">
<p>© 2007 (Your Site) Design by <a href="http://www.spinz.se/om.htm">Igor Jovic </a></p>
</div>
</body>
</html>
Related examples in the same category