citynightlife
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>City Nightlife</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* project: city nightlife (OWD's contest entry)
author: luka cvrk (www.solucija.com) */
body { background: #515151 url(bg.gif) repeat-x; margin: 0; padding: 0; color: #999999; font: 0.8em "Trebuchet MS", Arial, Sans-Serif; text-align: center; }
h1 { font: bold 1.7em Arial, Sans-serif; letter-spacing: -1px; color: #FFF; background: inherit; padding: 0; margin: 20px 0; }
h2 { font: bold 1.6em Arial,Sans-Serif; letter-spacing: -1px; margin: 0; padding: 0; }
p { line-height:1.8em; }
a { text-decoration: none; color: #04B9FF; background: inherit; }
a:hover{ color: #999999; background: inherit; }
.content {
width:785px;
margin: 0 auto;
padding: 0px;
text-align:left;
}
.left {
float: left;
}
.left_content {
float: left;
width: 560px;
background-color: #393939;
color: #d2d2d2;
text-align: justify;
margin: 0 3px 10px 0;
padding: 10px;
}
.left_content img{
float: left;
color: #303030;
border: 1px solid #f5f5f5;
background-color: #FFFFFF;
margin: 3px 10px 7px 0;
}
.right {
float:right;
width: 192px;
margin: 0 0 20px 0;
line-height:1.3em;
font-size:1.0em;
}
.uppermenu {
padding: 10px;
margin: 0 0 3px 0;
background: #FFD06B url(yellowcorner.gif) no-repeat top right;
line-height:1.3em;
color: #5A410A;
font-size:1.0em;
}
.uppermenu ul, .uppermenu li {
list-style: none;
margin: 0;
padding: 0 0 5px 0;
}
.uppermenu a { color: #008DC9; background: #FFD06B; font: bold 1.2em Arial, Sans-Serif; }
.uppermenu a:hover { color: #FFF; background: #FFD06B; }
.lowermenu {
padding: 10px;
height: 90px;
background: #AFAFAF url(greycorner.gif) no-repeat bottom left;
line-height: 1.3em;
color: #5A410A;
font-size:1.0em;
}
.box {
float: left;
width: 85px;
height: 55px;
padding: 15px 0;
text-align: center;
color: #018EC5;
background: #AFAFAF url(smallbox.gif) no-repeat;
}
.box p { margin: 0; }
.bottom {
clear: both;
height: 258px;
background: #515151 url(bigbg.gif) no-repeat bottom left;
color: #FFF;
padding: 0 8px 0px 7px;
margin: 0 0 20px 0;
}
.related {
clear: both;
float: left;
width: 364px;
color: #FFD1CE;
background: #C40F01 url(redbg.gif) repeat-x;
padding: 10px;
height: 230px;
}
.related a { color: #FFF; background: inherit; }
.leftlist {
padding: 5px;
margin: 1px;
border-bottom: 1px dotted #FFF;
}
.leftlist:hover { color: #FFF; background: #A20B00; }
.worth {
background: #008EC5 url(bluebg.gif) repeat-x;
width: 364px;
float: right;
height: 230px;
padding: 10px;
margin: 0 0 10px 0;
color: #C7EFFF;
}
.worth a { color: #FFF; background: inherit; }
.rightlist {
padding: 5px;
margin: 1px;
border-bottom: 1px dotted #FFF;
}
.rightlist:hover { color: #FFF; background: #0183B6; }
.footer{
clear: both;
padding: 65px 0 15px 0;
font-size: 0.9em;
color: #999;
background: #333 url(footerbg.gif) repeat-x;
}
.footer a { color: #04B9FF; background: inherit; }
.footer a:hover { color:#FF1604; background: inherit; }
</style>
</head>
<body>
<div class="content">
<h1>City Nightlife</h1>
<div class="left">
<div class="left_content">
<h2><a href="http://www.free-css.com/">Perfect night on the town!</a></h2>
<p><img src="citynightlife-images/pic.gif" alt="X" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.</p>
</div>
<div class="left_content">
<h2><a href="http://www.free-css.com/">Lorem Ipsum</a></h2>
<p><img src="citynightlife-images/pic.gif" alt="X" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat.</p>
</div>
</div>
<div class="right">
<div class="uppermenu">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Gallery</a></li>
<li><a href="http://www.free-css.com/">Forum</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
<div class="lowermenu">
<div class="box">
<h2>1587</h2>
<p>users</p>
</div>
<div class="box">
<h2>12548</h2>
<p>images</p>
</div>
</div>
</div>
<div class="bottom">
<div class="related">
<h2>Related entries:</h2>
<p>ENTRIES YOU MIGHT WANT TO READ</p>
<p class="leftlist"><img src="citynightlife-images/redbullet.gif" alt="" /> <b><a href="http://www.free-css.com/">Lorem Ipsum</a></b> - 19.03.2006.</p>
<p class="leftlist"><img src="citynightlife-images/redbullet.gif" alt="" /> <b><a href="http://www.free-css.com/">Lorem Ipsum</a></b> - 15.03.2006.</p>
<p class="leftlist"><img src="citynightlife-images/redbullet.gif" alt="" /> <b><a href="http://www.free-css.com/">Lorem Ipsum</a></b> - 12.03.2006.</p>
<p class="leftlist"><img src="citynightlife-images/redbullet.gif" alt="" /> <b><a href="http://www.free-css.com/">Lorem Ipsum</a></b> - 27.02.2006.</p>
</div>
<div class="worth">
<h2>Worth visit:</h2>
<p>WEB SITES WORTH VISITING</p>
<p class="rightlist"><img src="citynightlife-images/bluebullet.gif" alt="" /> <b><a href="http://www.free-css.com/">Solucija</a></b> - The home of sNews and CSS templates</p>
<p class="rightlist"><img src="citynightlife-images/bluebullet.gif" alt="" /> <b><a href="http://www.free-css.com/">360 Web Design</a></b> - Accessible Web Design</p>
<p class="rightlist"><img src="citynightlife-images/bluebullet.gif" alt="" /> <b><a href="http://www.free-css.com/">Open Web Design</a></b> - Free CSS Templates</p>
<p class="rightlist"><img src="citynightlife-images/bluebullet.gif" alt="" /> <b><a href="http://www.free-css.com/">Concept Nova</a></b> - Accessible Web Frameworks</p>
</div>
</div>
</div>
<div class="footer">
<p>© 2006 Your Company, Design: Luka Cvrk, <a href="http://www.solucija.com/" title="What's your solution?">Solucija</a> - <a href="http://validator.w3.org/check?uri=referer" title="Validate">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Validate">CSS</a></p>
</div>
</body>
</html>
Related examples in the same category