modernworld
<!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" xml:lang="en" lang="en">
<head>
<title>Modern World</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* Modern World CSS Template
www.solucija.com */
body { font-family: Arial, Sans-Serif; font-size: 70%; color: #000; background: #595959 url(bg.gif) repeat-y top left; margin: 0; padding: 0; line-height: 140%; }
a { color: #A53512; background-color: inherit; }
a:hover { color: #000; background-color: inherit;}
.marked_green { background: #E8F7E6; color: inherit; }
.marked_blue { background: #ECF3FB; color: inherit; }
#content { margin: 0 0 0 10px; padding: 0; text-align: left; width: 720px; background: #595959 url(contentbg.gif) repeat-y top left; color: inherit; }
#message { font-size: 170%; font-weight: bold; color: #FFF; margin: 0 0 50px 0; background-color: inherit; }
#navigation { font-size: 100%; text-transform: uppercase; background: url(navbg.gif) repeat-x bottom left; padding: 0 0 22px 10px; }
#navigation a { color: #9f9f9f; display: inline; text-decoration: none; font-weight: bold; margin-right: 10px; padding-left: 5px; background-color: inherit; background-image: url(linkcorner.gif); background-repeat: no-repeat; background-position: top left; }
#navigation a:hover { color: #000; background-color: inherit; }
.left { margin-right: 500px; padding: 0px 10px 10px 0px; background: url(logo.gif) no-repeat top left; }
.left p { padding: 0 0 0 10px; }
.left h1 { font-size: 140%; letter-spacing: -1px; color: #74CF7A; margin: 10px 0 0 0; padding: 0 0 0 10px; background-color: inherit; }
#logo { padding: 44px 0 0 13px; margin-bottom: 50px; }
#logo h2 { font-size: 180%; letter-spacing: -1px; font-weight: bold; color: #000; margin: 0; padding: 0; background-color: inherit; }
#logo p { margin: 0; padding: 3px 0 0 2px; color: #95BAE3; background-color: inherit; }
.right { margin: 0; padding: 15px 10px 10px 12px; width: 478px; float: right; background: url(header.gif) repeat-x top left; }
.right h1 { font-size: 190%; letter-spacing: -1px; font-weight: bold; color: #2980DE; margin: 10px 0px 0px 0px; padding: 0px 0px 0px 0px; background-color: inherit; }
.quote { padding: 20px; background: #ECF3FB url(quotebg.gif) no-repeat center left; font-size:90%; color: inherit; }
#footer { clear:both; background: #FFF url(footerbg.gif) repeat-x bottom left; color: #808080; border-top: 1px solid #eee; padding: 4px 10px 4px 4px; font-family: Verdana, "lucida console", sans-serif; letter-spacing: -1px; font-size: 80%; text-align: right; text-transform: uppercase; }
#footer a { color: #2980DE; background-color: inherit; }
#footer a:hover { background: #FEFDD6; color: inherit; }
</style>
</head>
<body>
<div id="content">
<div class="right">
<div id="message">Do you like big bold letters?</div>
<div id="navigation"> <a href="http://www.free-css.com/">Home</a> <a href="http://www.free-css.com/">Modern world</a> <a href="http://www.free-css.com/">Behind the idea</a> <a href="http://www.free-css.com/">Join the movement</a> <a href="http://www.free-css.com/">Contact</a> </div>
<h1>Welcome to our Modern World!</h1>
<p><a href="http://www.free-css.com/">Modern World</a>, quite a simple layout but with rich graphics. Ideal for your blog or a complete web page. Once again, you are free to <span class="marked_blue">use this template</span> in any way you want. Make sure you visit Solucija and download your fresh copy of sNews, the <span class="marked_green">easiest</span> news publishing software, or just browse through our gallery of free CSS templates.</p>
<div class="quote">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
<h1>Just some Lorem Ipsum text</h1>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 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.</p>
<h1>Lorem Ipsum Strikes again!</h1>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 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.</p>
</div>
<div class="left">
<div id="logo">
<h2>Modern World</h2>
<p>A place for modern people</p>
</div>
<h1>News publishing script</h1>
<p>Do you need a news publishing script? Download sNews, cause it's all you need to start free and simple blogging.</p>
<p>sNews has only 3 files and it's <span class="marked_blue">template independent</span> which means that you can redesign your site whenever you want. We are constantly working on sNews <span class="marked_green">development</span> so everything you need to do is download a newer version and your site and design stays the same, but you're able to use more features.</p>
<h1>Lorem Ipsum again</h1>
<p>Lorem ipsum dolor <a href="http://www.free-css.com/">sit amet</a>, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut <span class="marked_blue">laoreet</span> dolore magna aliquam erat volutpat. </p>
<h1>Meta</h1>
<ul>
<li><a href="http://validator.w3.org/check/referer">XHTML</a></li>
<li><a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a></li>
</ul>
</div>
<div id="footer">
<p>© Copyright 2005, <a href="http://www.free-css.com/">YourSite.com</a> design by <a href="http://www.solucija.com">Solucija</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category