coffe
<!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>Coffe</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* CSS Document */
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align: center;
background-color: #745a4d;
}
body div {
margin: auto;
}
#contenedor {
width: 800px;
position: relative;
top: 40px;
background: url(coffe-imagenes/contenedorFondo.jpg);
}
#contenedorArriba {
height: 11px;
width: 801px;
background: url(coffe-imagenes/contenedorArriba.jpg);
}
#contenedorCuerpo {
width: 100%;
text-align:left;
position:relative;
}
#contenedorAbajo {
height: 10px;
width: 801px;
background: url(coffe-imagenes/contenedorAbajo.jpg);
clear: both;
}
#cuadro{
margin-top: 6px;
width: 761px;
height: 116px;
background: url(coffe-imagenes/cuadro.jpg);
text-align: left;
}
#slogan {
left: 200px;
width: 400px;
font: 0.7em Tahoma, sans-serif;
font-size:18px;
font-weight:bold;
color:#745a4d;
margin-left: 40px;
}
#logo {
position: absolute;
top: 50%;
left: 230px;
width: 200px;
font: 0.7em Tahoma, sans-serif;
font-size:24px;
font-weight:bold;
color:#FFFFFF;
}
#cuerpo {
margin: 20px;
}
#izquierdo {
width: 150px;
float: left;
}
#derecho {
width: 580px;
float: right;
text-align: justify;
vertical-align: top;
}
#menu {
font: 0.7em Tahoma, sans-serif;
font-size:10px;
font-weight:bold;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
padding: 5px 15px;
border-bottom: 1px solid #FFFFFF;
text-decoration: none;
color: #3B3B3B;
background-color: #964d3a;
}
#menu a:hover {
background: #ed6413;
color: #FFFFFF;
}
#menu .active a {
background: #BABABA;
color: #000000;
}
.titulo {
font: 0.7em Tahoma, sans-serif;
font-size:18px;
font-weight:bold;
color:#ed6413;
}
.subTitulo {
font: 0.7em Tahoma, sans-serif;
font-size:14px;
font-weight:bold;
color:#ed6413;
}
.textoNormal {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
}
#design {
top: 50px;
position: relative;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
clear: both;
}
#design a{
color: #FFFFFF;
text-decoration:none;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="contenedorArriba"></div>
<div id="contenedorCuerpo"> <span id="slogan">YOUR SLOGAN</span>
<div id="cuadro"> <span id="logo">COMPANY NAME </span> </div>
</div>
<div id="cuerpo">
<div id="izquierdo">
<div id="menu">
<li class="active"><a href="http://www.free-css.com/">Homepage</a></li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Products</a></li>
<li><a href="http://www.free-css.com/">Clients</a></li>
<li><a href="http://www.free-css.com/">Support</a></li>
</div>
</div>
<div id="derecho">
<p><span class="titulo">Welcome/Bienvenido</span><br />
<img src="coffe-imagenes/separador.jpg" height="50" alt="" /><br />
<span class="textoNormal"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce lorem. Etiam vel lacus quis erat rutrum porta. Nunc nonummy blandit tortor. Aliquam nec felis in massa bibendum sollicitudin. Donec elementum ante et nunc. Nullam felis. Nulla facilisi. Suspendisse non sapien. Aenean suscipit aliquam quam. Vestibulum in nibh sed lacus gravida fringilla. Nulla nec ante. Nulla facilisi.<br />
<br />
Etiam sagittis mollis nulla. Nam ac diam. Proin felis. Ut a dui. Sed eget dolor ornare elit vehicula hendrerit. Phasellus at libero vitae ligula ornare varius. Etiam pellentesque augue elementum erat. Suspendisse potenti. Proin dictum elementum arcu. Proin leo est, ultrices non, tempor non, ullamcorper sed, ante. Duis dui metus, tempor in, sagittis a, varius sit amet, metus. Maecenas iaculis diam non lacus. Integer tortor justo, iaculis nec, semper ullamcorper, posuere ut, purus. Ut venenatis. <br />
<br />
Maecenas gravida elementum sapien. Pellentesque euismod rutrum eros. Nunc vel massa nec ante dignissim placerat. Pellentesque augue eros, semper et, faucibus sit amet, dictum non, neque. Aenean nec urna hendrerit nibh laoreet tincidunt. Vestibulum justo dui, congue sed, adipiscing sed, viverra vitae, ipsum. Integer massa. Morbi lectus. </span><br />
<br />
<span class="subTitulo">Utilice esta plantilla gratis pero por favor conserve el link a Colombia Hosting<br />
Use this template free, but please don't delete "Colombia Hosting" link</span>
</div>
</div>
<div id="contenedorAbajo"></div>
</div>
<div id="design"> Design by <a href="http://www.colombiahosting.com.co" target="_blank">Colombia Hosting</a> </div>
</body>
</html>
Related examples in the same category