sixties_style
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sixties Style by Svein Erik Storkaas 2008 | www.csstemplateheaven.com</title>
<style type='text/css'>
?/* CSS Document by Svein Erik Storkaas 2008 | www.csstemplatesweb.com */
* {margin: 0; padding: 0;}
body{ background-color:#222222;}
#container
{
width: 1024px;
margin: 40px auto;
height:768px;
background-color:#ffffff;
}
#header {height: 80px;
background: #e2dbaf;}
#leftColumn {width: 450px;
height:608px;
float: left;
}
#rightColumn
{
width: 574px;
height:608px;
float: right;
background-image:url(sixties_style-images/1960Asia.png);
background-repeat:no-repeat;
background-position:bottom right;
}
#footer
{
clear: both;
height:80px;
background: #e2dbaf;
text-align:center;
}
#footer p
{
color:#656363;
padding-top:35px;
font-family:Arial;
font-size:10px;
}
#menucontainer
{
width:400px;
height:400px;
margin-top:30px;
margin-left:0px;
}
#logotext
{
width:396px;
height:119px;
margin-top:20px;
margin-left:45px;
font-family:Times New Roman;
font-size:50px;
color:#c12a2d;
}
#logotext h2
{
margin-left:70px;
font-family:Times New Roman;
font-size:25px;
color:#dd2b2b;
}
#textbox
{
width:360px;
height:auto;
margin:60px 0px 0px 0px;
}
#textbox p
{
padding:10px 10px 10px 10px;
font-family:Tahoma, "ms Sans-Serif";
font-size:14px;
color:#393939;
}
h3{ font-family:Arial;
font-size:17px;
color:#c12a2d;
padding:5px 0px 0px 10px;
}
a {color:#434343;}
a:visited {color:#434343;}
a:active {color:#434343;}
a:hover {text-decoration:none;}
#hex {padding:0; margin:0 auto; list-style:none; width:325px;}
#hex li {display:block; float:left; width:104px; margin-right:4px; height:120px;}
#hex li.p1 {padding-left:54px;}
#hex li.p2 {margin-top:-26px;}
#hex li a {text-decoration:none; color:#000; cursor:pointer;}
#hex li a b {display:block; width:0; height:0; overflow:hidden; border-bottom:30px solid #ec0; border-left:52px dotted transparent; border-right:52px dotted transparent;}
#hex li a span {display:block; width:104px; height:60px; line-height:59px; text-align:center; background:#ec0; font-size:11px; font-family: arial, veradana, sans-serif;}
#hex li a em {display:block; width:0; height:0; overflow:hidden; border-top:30px solid #ec0; border-left:52px dotted transparent; border-right:52px dotted transparent;}
/* hack for IE5.5 */
* html #hex li a b, * html #hex li a em {width:104px; height:30px; w\idth:0; he\ight:0;}
#hex li a.inner b {border-bottom-color:#c60;}
#hex li a.inner span {background:#c60;}
#hex li a.inner em {border-top-color:#c60;}
#hex li a:hover {white-space:normal;}
#hex li a:hover b {border-bottom-color:#c90;}
#hex li a:hover span {background:#c90;}
#hex li a:hover em {border-top-color:#c90;}
#hex li a.inner:hover b {border-bottom-color:#a40;}
#hex li a.inner:hover span {background:#a40;}
#hex li a.inner:hover em {border-top-color:#a40;}
</style>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="leftColumn">
<div id="menucontainer">
<ul id="hex">
<li class="p1"><a href="index.htm"><b></b><span>ITEM 1</span><em></em></a></li>
<li><a href="index.htm"><b></b><span>ITEM 2</span><em></em></a></li>
<li class="p2"><a href="index.htm"><b></b><span>ITEM 3</span><em></em></a></li>
<li class="p2"><a class="inner" href="index.htm"><b></b><span>ITEM 7</span><em></em></a></li>
<li class="p2"><a href="index.htm"><b></b><span>ITEM 4</span><em></em></a></li>
<li class="p1 p2"><a href="index.htm"><b></b><span>ITEM 5</span><em></em></a></li>
<li class="p2"><a href="index.htm"><b></b><span>ITEM 6</span><em></em></a></li>
</ul>
</div>
<div id="logotext">SIXTIES STYLE
<h2>CLASSIC & STYLISH</h2></div>
</div>
<div id="rightColumn">
<div id="textbox">
<h3>Lorem Ipsum</h3>
<p>This template is created by Svein Erik Storkaas, february 2008. It's valid Xhtml 1.0! If you want the PSD file for this template you can purchase it at CssTemplatesWeb.com, this will give you more flexibility. I kindly ask you to not remove the copyright in the footer if you have the free version of this template.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum felis purus, pulvinar id, aliquam a, malesuada eget, sapien. Etiam luctus, orci in tempus vestibulum, arcu velit mattis orci, eu commodo pede nisl at turpis. Proin congue hendrerit ligula. In vehicula eros eu sem. Etiam lobortis. Nunc pellentesque accumsan diam. Morbi congue. Sed vulputate risus eget sem. Proin id odio sed tellus egestas porttitor. Curabitur orci. Etiam hendrerit ornare pede.</p>
</div>
</div>
<div id="footer"><p>Created by Svein Erik Storkaas for <a href="http://www.csstemplatesWeb.com">CssTemplatesWeb</a> |
<a href="http://free-templates.ru">free-templates.ru</a></p></div>
</div>
</body>
</html>
Related examples in the same category