tattoopatt
<!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=utf-8" />
<title>tattooPattern</title>
<style type='text/css'>
body {
text-align:center;
background:url(tattoopatt-images/bg.jpg) bottom;
}
a {
text-decoration:none;
color:#FFFFFF
}
a:hover {
text-decoration: underline;
}
#wrap {
width:949px;
text-align:left;
margin:0 auto;
}
.float-l {
float:left
}
.folat-r {
float:right
}
.clearfix {
clear:both
}
/* header */
#header {
height:186px;
background:url(tattoopatt-images/hd.jpg);
position:relative
}
#nav {
background:url(tattoopatt-images/nav.gif);
height:43px;
position:absolute;
top:148px;
width:847px;
}
#logo {
position:absolute;
top:50px;
left:100px;
color:#fff
}
#logo h1 {
font-size:34px;
}
#logo div {
padding-left:100px
}
/* content */
#content {
height:540px;
}
#content .left {
width:694px;
height:517px;
background: url(tattoopatt-images/main.gif) no-repeat;
padding:0 50px 0 50px;
}
#content .left h2 {
color:#608803;
font-size:34px;
padding:50px 0 20px 0
}
#content .left p {
padding: 0 0 10px 0;
font-family:Verdana, Arial, Helvetica, sans-serif
}
#content .left a {
color:#336633
}
#content .left img {
float: left;
padding: 0 20px 0 0
}
#content .right {
width:255px;
background:#e2e2e2 url(tattoopatt-images/side.jpg);
height:517px;
}
#content .in {
width:594px;
}
#side {
margin-left: 45px;
}
#side #top {
background:url(tattoopatt-images/g_top.gif);
height:237px;
}
#side h2 {
font-size:24px;
color:#000;
padding:20px 0 13px 0
}
#side li {
list-style: url(tattoopatt-images/ar.gif) inside;
line-height:20px
}
#side li a {
color:#333300
}
/* footer */
#footer {
clear:both
}
#footer {
height:70px;
color: #fff;
margin-left: 50px;
position:relative
}
#xhtml {
position: absolute;
top:20px;
left:650px
}
</style>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrap">
<div id="header">
<div id="logo">
<h1>tattooPattern</h1>
<div>short slogan here</div>
</div>
</div>
<!-- /header -->
<div id="content">
<div id="inner">
<div class="left float-l in">
<h2>Free CSS Templates</h2>
<img src="tattoopatt-images/img.jpg" alt="" />
<p>This is tattooPattern, a free, fully standards-compliant CSS template designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>.
This free template is released under a Creative Commons Attributions 2.5 license, so you?re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :) </p>
<p> Lorem Ipsum is not simply random text. It has roots in a piece of classical McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the Extremes of Good and Evil) by Cicero, written in 45 BC. </p>
</div>
<div class="right folat-r">
<div id="side">
<div id="top">
<h2>Sections</h2>
<ul class="meun">
<li><a href="#">Latin literature </a></li>
<li><a href="#">making over years </a></li>
<li><a href="#">Richard Clintock </a></li>
<li><a href="#">Latin professor </a></li>
<li><a href="#">Hampden Sydney </a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /content -->
<div id="footer">
<div id="ftlink"> <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Production</a> | <a href="#">Submission</a> | <a href="#">Contact</a> </div>
<p id="copyright"> 2008. All Rights Reserved. <br/>
<a href="http://www.templatesold.com/" target="_blank">Website Templates</a> by <a href="http://www.free-css-templates.com/" target="_blank">Free CSS Templates</a></p>
<div id="xhtml"><img src="tattoopatt-images/xhtml.jpg" alt=" xhtml valid" /> <img src="tattoopatt-images/css.jpg" alt="css valid" /></div>
</div>
<!-- /footer -->
</div>
</body>
</html>
Related examples in the same category