new-year
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>New Year Template</title>
<style type='text/css'>
body {
background-image: url(new-year-images/bg.png);
background-repeat: repeat-x;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
}
a {
color: #0099FF;
}
#wrap #left a {
text-decoration: none;
color: #000000;
}
#wrap #left li {
margin-bottom: 3px;
display: block;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #0099FF;
}
#wrap #left ul {
margin: 0px;
padding: 5px;
list-style-type: none;
}
#wrap #left .posts {
background-color: #E8F2F9;
}
.menuhead {
font-size: 14px;
font-weight: bold;
color: #0099FF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
text-transform: uppercase;
}
#wrap {
width: 755px;
margin-right: auto;
margin-left: auto;
}
#logo {
background-image: url(new-year-images/logobg.png);
height: 35px;
width: 249px;
display: block;
margin-top: 18px;
font-family: "Century Gothic", Arial, Verdana;
font-size: 35px;
font-weight: bold;
color: #0099CC;
text-align: center;
padding-top: 43px;
float: left;
background-position: center bottom;
padding-bottom: 5px;
}
#wrap #header h1 {
display: block;
background-image: url(new-year-images/balloon_07.png);
background-repeat: repeat-x;
margin-top: 18px;
float: left;
width: 465px;
margin-right: 5px;
margin-left: 5px;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
color: #FFCC00;
font-weight: normal;
padding-top: 58px;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 0px;
padding-bottom: 5px;
}
#wrap #right p {
line-height: 18px;
}
#wrap #header #logo span {
color: #FF9900;
}
.spacer {
margin: 0px;
padding: 0px;
clear: both;
font-size: 2px;
}
#wrap #left {
width: 249px;
float: left;
}
#wrap #left .categories {
background-color: #FEFEE9;
}
#wrap #right {
float: left;
padding: 10px;
width: 475px;
background-color: #FFFFFF;
background-image: url(new-year-images/contentbg.png);
background-repeat: repeat-x;
margin-left: 5px;
}
#wrap #left a:visited,active {
text-decoration: none;
color: #000000;
}
#wrap #left a:hover {
text-decoration: none;
color: #0099FF;
background-color: #FEF1C0;
}
#wrap #right h1 {
font-size: 25px;
color: #0066CC;
font-family: Georgia, "Times New Roman", Times, serif;
margin: 0px;
padding: 0px;
font-weight: normal;
}
#wrap #right .date {
display: block;
margin: 0px;
padding: 0px;
color: #666666;
font-family: Georgia, "Times New Roman", Times, serif;
}
#wrap #footer {
background-image: url(new-year-images/balloon_07.png);
background-repeat: repeat-x;
padding: 10px;
height: 25px;
}
#wrap #right blockquote {
margin: 15px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
border-left-width: 5px;
border-left-style: solid;
border-left-color: #FFCC66;
}
a:visited,active {
color: #0099FF;
}
a:hover {
color: #000000;
text-decoration: none;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header"> <span id="logo">New<span>Year</span></span>
<h1>Happy New year to you!</h1>
</div>
<div class="spacer"> </div>
<div id="left">
<ul class="categories">
<li class="menuhead">Categories</li>
<li><a href="http://www.free-css.com/">Yesterday</a></li>
<li><a href="http://www.free-css.com/">Tomorrow</a></li>
<li><a href="http://www.free-css.com/">Hope</a></li>
<li><a href="http://www.free-css.com/">Memories</a></li>
<li><a href="http://www.free-css.com/">Dreams</a></li>
<li><a href="http://www.free-css.com/">Aspirations</a></li>
<li><a href="http://www.free-css.com/">Desire</a></li>
<li><a href="http://www.free-css.com/">Love</a></li>
<li><a href="http://www.free-css.com/">Innocense</a></li>
</ul>
<ul class="posts">
<li class="menuhead">New year Resolutions</li>
<li><a href="http://www.free-css.com/">Tomorrow</a></li>
<li><a href="http://www.free-css.com/">Hope</a></li>
<li><a href="http://www.free-css.com/">Memories</a></li>
<li><a href="http://www.free-css.com/">Dreams</a></li>
<li><a href="http://www.free-css.com/">Aspirations</a></li>
<li><a href="http://www.free-css.com/">Desire</a></li>
<li><a href="http://www.free-css.com/">Love</a></li>
<li><a href="http://www.free-css.com/">Innocense</a></li>
</ul>
</div>
<div id="right">
<h1>Did I wish you happy new year ?</h1>
<span class="date">I was quiet busy... Sorry I forgot</span>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque aliquam tempus sapien. Sed vel nisi. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla molestie. Etiam quam tellus, mattis eget, mattis quis, posuere at, elit. Fusce interdum molestie nisi. Praesent suscipit sem a nibh. Quisque vestibulum erat ut purus. Donec sodales sapien nec nulla. Nam adipiscing sapien vitae risus. Aliquam id lorem eget risus pharetra aliquet. Sed nec sem id arcu sagittis tincidunt. Nullam eget nibh id nisl sollicitudin adipiscing. Nullam eu ante. Phasellus risus est, feugiat sed, scelerisque ac, gravida eu, sem. In sapien pede, molestie eu, rutrum ut, pharetra ut, pede. Aenean nulla massa, congue malesuada, auctor sed, dictum sed, nisi. Integer ut enim. </p>
<blockquote>
<p>Duis sagittis euismod turpis. Vivamus egestas pede non urna. In dapibus lorem scelerisque dui. Pellentesque vehicula laoreet dui. Quisque ac risus. Donec sodales, sapien in egestas semper, erat dolor ullamcorper urna, eget gravida quam urna sed dui. In dolor magna, sagittis placerat, elementum id, elementum sed, eros. Sed placerat, enim facilisis cursus adipiscing, felis libero congue orci, at pulvinar enim diam a diam. Phasellus ultricies. Curabitur ornare iaculis purus. Nam lacus risus, iaculis vel, tristique et, ultrices id, mauris. Aliquam erat volutpat. </p>
</blockquote>
<p>Pellentesque facilisis vehicula tortor. Sed pretium faucibus augue. Nullam eu erat id mi elementum eleifend. Curabitur adipiscing mauris sit amet mauris. Cras pharetra elit eu enim. Mauris pharetra fermentum nunc. Donec porttitor. Suspendisse sit amet felis. Maecenas sodales pellentesque orci. Nullam eu tortor eget mauris sodales fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam viverra tellus eu sem. Pellentesque porta justo sit amet sapien. Phasellus euismod erat. </p>
<p> </p>
</div>
<div class="spacer"></div>
<div id="footer"> © Put your Copyright text here<br />
Designed by <a href="http://ramblingsoul.com">Rambling Soul </a></div>
</div>
</body>
</html>
Related examples in the same category