green-day
<!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>Green Day</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com/
*/
body {
margin:0;
padding:0;
line-height: 1.5em;
font-family: Arial, "Trebuchet MS", Helvetica;
font-size: 12px;
color: #373737;
background: #6bcf06;
}
a:link, a:visited { color: #d44601; text-decoration: none; font-weight:bold;}
a:active, a:hover { color: #000; text-decoration: underline}
h1 {
margin:0px 0px 10px 0px;
padding-top: 20px;
padding-bottom: 8px;
font-weight: bold;
font-size: 20px;
color:#60b509;
text-decoration: underline;
}
h2 {
padding-bottom: 8px;
font-weight: bold;
font-size: 13px;
color:#8b8d01;
text-decoration: underline; margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px;
}
#container {
margin: 0px auto;
width: 800px;
height: auto;
background: url(green-day-images/bg.gif);
}
#header {
width: 800px;
height: 275px;
background: url(green-day-images/header.jpg) ;
}
#site_title {
padding-top: 120px;
padding-left: 400px;
font-size: 30px;
color: #ffffff;
font-weight: bold;
}
#site_slogam {
padding-top: 10px;
padding-left: 450px;
font-size: 13px;
font-weight: bold;
color: #fff;
}
#right_column {
float: right;
margin: 0px 40px 0px 0px;
width: 166px;
}
.menu {
margin: 10px 5px 30px 0px;
height: 162px;
width: 150px;
background: url(green-day-images/right_button.gif);
line-height: 24px;
}
.menu ul {
margin: 0px 0px 0px 15px;
padding: 0px;
list-style: none;
}
.menu ul li {
display: block;
}
.menu ul li a {
font-size: 12px;
font-weight: bold;
display: block;
padding-left: 2px;
margin: 3px;
color: #499200;
text-decoration: none;
}
.menu ul li a:hover {
color: #c2c400;
}
.news {
font-weight: normal;
margin: 10px;
padding: 10px;
border: 1px solid #838402;
background: #9bb821;
color: #ffffff;
}
.subtitle{
font-weight: bold;
text-decoration: underline;
font-size: 14px;
color: #ffffff;
}
#left_column{
float: left;
width: 520px;
padding-left: 60px;
}
.post_box {
clear: left;
margin-top: 0px;
}
.text_area {
float: left;
clear: left;
background: #e8ffd1;
padding: 10px;
border: 0px solid #ffffff;
}
.pic {
float: left;
margin-right: 10px;
margin-bottom: 0px;
}
.text_area p{
margin: 0px;
padding: 0px 5px 5px 0px;
}
.publish_date {
clear: both;
padding-top: 15px;
color: #499200;
font-size: 11px;
font-weight: bold;
}
#footer {
clear: both;
height: 30px;
width: 800px;
padding-top: 10px;
font-size: 12px;
color: #fff;
text-align: center;
background: url(green-day-images/footer.jpg) repeat-y;
}
#footer a {
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="site_title">Green Day</div>
<div id="site_slogam">Free CSS Template</div>
</div>
<div id="right_column">
<div class="menu">
<ul>
<li><a href="http://www.free-css.com/">Main Page</a></li>
<li><a href="http://www.free-css.com/">Testimonials</a></li>
<li><a href="http://www.free-css.com/">Design Services</a></li>
<li><a href="http://www.free-css.com/">Portfolio Gallery</a></li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
</ul>
</div>
<div class="news" align="justify">
<div class="subtitle"> Latest Updates </div>
<p>Integer imperdiet odio ac eros. Ut id massa. Integer imperdiet odio ac eros. Ut id massa. Nullam nunc. <br />
<br />
Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula</p>
</div>
</div>
<div id="left_column">
<h1>Welcome to our Website</h1>
<img src="green-day-images/pic1.gif" alt="" width="210" height="180" align= "right" hspace="10" />
<p>This is a <b>free CSS website template</b> provided by TemplateMo.com. Feel free to modify and use this layout for your personal or business websites. It would be great if you put a credit link back to templatemo.com website. Thank you.</p>
<p>Proin vel libero id erat venenatis accumsan. Nunc blandit orci sit amet risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque dolor nulla, congue vitae, fringilla in, varius a, orci. Mauris convallis.</p>
<div class="post_box" align="justify">
<div class="text_area">
<h2>Quisque in diam a justo condimentum molestie</h2>
<img src="green-day-images/pic2.gif" alt="" align="left" class="pic" />
<p> Cras magna velit, pellentesque mattis, faucibus vitae, feugiat vitae, sapien. Donec ante. Nam sit amet justo vel libero tincidunt dignissim. Fusce ac orci sit amet velit ultrices condimentum. Integer imperdiet odio ac eros. Ut id massa. Nullam nunc. Vivamus sagittis varius lorem.<br />
</p>
<div class="publish_date">Post Date: 25-11-2020 | <a href="http://www.free-css.com/">Full Story</a></div>
</div>
</div>
<div class="post_box" align="justify">
<div class="text_area">
<h2>Website Template Development</h2>
<img src="green-day-images/pic3.gif" alt="" align="left" class="pic"/>
<p>Nam sit amet justo vel libero tincidunt dignissim. Fusce ac orci sit amet velit ultrices condimentum. Integer imperdiet odio ac eros. Ut id massa. Nullam nunc. Vivamus sagittis varius lorem. Quisque in diam a justo condimentum molestie. </p>
<div class="publish_date">Post Date: 21-10-2020 | <a href="http://www.free-css.com/">Full Story</a></div>
</div>
</div>
</div>
<p align="center"> </p>
<p align="center"><a target="_blank" href="http://validator.w3.org/check?uri=referer"><img height="31" alt="" src="http://www.w3.org/Icons/valid-xhtml10" width="88" vspace="8" border="0" /></a><br />
<a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer"><img alt="" src="http://jigsaw.w3.org/css-validator/green-day-images/vcss-blue" vspace="8" border="0" /></a> </p>
<div id="footer">Copyright 2008 Your Company Name | Designed by <a href="http://www.templatemo.com">templatemo.com</a></div>
</div>
</body>
</html>
Related examples in the same category