Prosperity
<!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>Prosperity</title>
<style type='text/css'>
body {
text-align:center;
}
a {
text-decoration:none;
}
a:hover {text-decoration:underline }
#wrap {
position:relative;
width:800px;
text-align:left;
background:url(Prosperity-images/bg.jpg) no-repeat;
height:1000px;
margin:0 auto;
}
#logo {
position:absolute;
top:10px;
font-size:24px;
margin-left:140px;
padding-left:30px;
margin-top:10px;
background:url(Prosperity-images/logo.gif) no-repeat;
}
#logo span {
font-size:14px;
color:red;
}
#header {
height:200px;
}
ul#nav {
position:absolute;
top:130px;
right:165px;
font-size:14px;
}
ul#nav li {
display:inline;
padding:0 40px;
}
ul#nav a {
color:red;
}
#content {
width:410px;
position:absolute;
left:140px;
padding:0 40px;
}
#content h2 {
font-size:30px;
padding-bottom:20px;
color:#400d09;
}
#content img {
float:left;
}
#content p {
float:right;
width:200px;
}
#blog {
position:absolute;
top:380px;
width:200px;
padding-left:110px;
}
#blog img {
padding-left:50px;
}
#footer {
position:relative;
margin-top:-100px;
color:red;
}
#ftlink a {
color:red;
padding:0 15px;
}
#copyright, #copyright a{
color:#afafaf;
}
#copyright a:hover{
color:#000;
}
#ftlink, #copyright {
padding-bottom:8px;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE]>
<style>
#blog {
padding-left: 00px;
margin-left:-60px
}
</style> <![endif]-->
</head>
<body>
<div id="wrap">
<div id="header">
<h1 id="logo">Prosperity <span>short slogan here</span></h1>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blogs</a></li>
</ul>
</div>
<div id="content">
<h2>Successful CSS life</h2>
<img src="Prosperity-images/ct_img.jpg" />
<p>This is Prosperity, 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 youre 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>
<div id="blog">
<h2>My blog with gallery</h2>
<p>Lorem Ipsum is not simply random BC, making it over 2000 years old.</p>
<img src="Prosperity-images/img.jpg" alt="" /> </div>
</div>
</div>
<div id="footer">
<div id="ftlink"> <a href="#">Home</a> | <a href="#">About Us</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="Prosperity-images/xhtml.gif" alt=" xhtml vaild" /> <img src="Prosperity-images/css.gif" alt="css vaild" /></div>
</div>
</body>
</html>
Related examples in the same category