interactive-media
<!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">
<head>
<title>Interactive Media</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
project: interactive media (free css template)
author: luka cvrk (www.solucija.com)
*/
* { margin:0; padding:0; }
body { font: 72.5%/1.7em "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif; color:#555; background: #fff url(interactive-media-images/headerbg.gif) repeat-x; }
/* general styling */
a { color:#007898; background: inherit; border-bottom:1px dotted #ccc; text-decoration:none; }
a:hover { border-bottom:1px solid #ccc; color: #808080; background: inherit; }
a:focus { outline: 0; }
ul { margin:10px 10px 10px 0; padding:0 0 0 15px; }
li { margin:0 0 0 10px; padding:3px; }
img { border: 0; text-decoration: none; }
/* content */
.wrap { padding:0 10px 10px 10px; width:860px; margin:0 auto; }
#logo {float:left; margin: 26px 20px 14px 5px; color:#768998; }
h1 { margin: 0 0 10px; letter-spacing: 1px; font-size: 2em; }
h1 a { color: #fff; }
h1 a:hover { color: #FFFCB3; }
/* main navigation */
#nav { float:right; border:none; padding:0; margin: 47px 10px 60px 0; }
#nav li { float:left; list-style:none; margin:0 4px 0 0; padding:0; font-size: 1.1em; }
#nav li a { display:block; padding: 10px 12px 15px; color:#768998; text-decoration:none; border: 0; margin:0 1px 0 0; }
#nav li a:hover, #nav li a.current { background: url(interactive-media-images/barbg.gif) no-repeat bottom center; color:#fff; }
.akey { border-bottom: 1px dotted #4B5761; }
/* main content */
#left { float: left; width: 570px; margin: 0 0 20px 0; }
#left h2 { float: left; font: 2.1em "Trebuchet MS", Arial; background: url(interactive-media-images/h2bg.gif) repeat-x bottom; color:#121212; letter-spacing:-1px; margin: 0px 0 20px 0; clear:left; }
#left h2 a { color:#121212; text-decoration:none; border: 0; }
#left p { clear: both; margin: 5px 0 20px 0; font-size:110%; line-height:21px; }
/* sidebar */
#right { width:230px; float:right; margin: 0 0 20px 0; }
#right h2 { color:#fff; margin: 0 0 5px 0; font: bold 1.2em "Trebuchet MS", Arial; background: #fff url(interactive-media-images/sideh2bg.gif) repeat-x; padding: 4px 10px; border-bottom: 2px solid #000; }
#right ul { list-style:none; border-top:1px solid #eee; border:none; padding:0; margin:0 0 15px 0; }
#right ul li { border-bottom:1px solid #eee; padding:5px; margin:0; }
#right ul li a { border: 0; }
#tagcloud { margin: 0 0 20px; }
#tagcloud a { margin: 0 5px 0 0; color: #25771F; }
#tagcloud a:hover { background: #E7FEE5; color: #007898; }
#info { border: 1px solid #ccc; padding: 3px 5px; margin: 0 0 10px; }
#footer { clear: both; border-top: 1px solid #ccc; padding: 20px 0; color:#808080; }
#footer p { line-height: 2.5em; }
</style>
</head>
<body id="home">
<div class="wrap">
<div id="logo">
<h1><a href="http://www.free-css.com/">INTERACTIVE MEDIA</a></h1>
<p>using media to broadcast content</p>
</div>
<ul id="nav">
<li><a class="current" href="http://www.free-css.com/" accesskey="h"><span class="akey">H</span>ome</a></li>
<li><a href="http://www.free-css.com/" accesskey="a"><span class="akey">A</span>bout</a></li>
<li><a href="http://www.free-css.com/" accesskey="m"><span class="akey">M</span>edia</a></li>
<li><a href="http://www.free-css.com/" accesskey="r"><span class="akey">R</span>eferences</a></li>
<li><a href="http://www.free-css.com/" accesskey="c"><span class="akey">C</span>onsulting</a></li>
<li><a href="http://www.free-css.com/" accesskey="t">Con<span class="akey">t</span>act</a></li>
</ul>
</div>
<div class="wrap">
<div id="left">
<h2>Welcome to my new blog!</h2>
<p>Suspendisse egestas fringilla odio. Donec lacinia tristique ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam blandit ultricies nisl. Nullam dapibus, mauris id scelerisque feugiat, sapien augue porta ipsum, ut blandit tellus enim vel mauris. Praesent accumsan metus vel ipsum. Maecenas aliquam blandit mi. Pellentesque dolor magna, posuere vel, condimentum id, accumsan ac, diam. Phasellus vel leo. Aenean velit nisl, hendrerit eget, rutrum quis, lobortis nec, libero. Nulla venenatis, turpis eu vestibulum tincidunt, felis diam luctus velit, facilisis cursus mi ligula vitae nunc. Curabitur libero. Fusce felis. Nam gravida nulla non eros. Donec non nisl. Nulla ut odio. Curabitur sollicitudin nonummy est. Nullam molestie lectus quis nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut pretium mauris nec arcu. Integer at leo vel ipsum elementum sodales. Nam est quam, posuere non, feugiat nec, consectetuer ac, lectus. Aenean faucibus. Suspendisse euismod, leo ut pretium ornare, libero arcu malesuada ipsum, at convallis pede augue at arcu. Aliquam lacus massa, pellentesque sit amet, feugiat et, cursus volutpat, massa. Integer nibh. Maecenas mattis ipsum a felis. Curabitur sodales lacus at massa. In hac habitasse platea dictumst.</p>
</div>
<div id="right">
<h2>Latest Entries</h2>
<ul>
<li><a href="http://www.free-css.com/">Aenean justo nisl, luctus sit amet</a></li>
<li><a href="http://www.free-css.com/">Ut pretium mauris nec arcu</a></li>
<li><a href="http://www.free-css.com/">Praesent accumsan metus vel</a></li>
<li><a href="http://www.free-css.com/">Cum sociis natoque et magnis</a></li>
<li><a href="http://www.free-css.com/">Maecenas mattis ipsum a felis</a></li>
<li><a href="http://www.free-css.com/">Praesent accumsan metus vel</a></li>
<li><a href="http://www.free-css.com/">Ut pretium mauris nec arcu</a></li>
</ul>
<div id="tagcloud">
<p> <span style="font-size: 1.3em"><a href="http://www.free-css.com/">google</a></span> <span style="font-size: 1.1em"><a href="http://www.free-css.com/">solucija</a></span> <span style="font-size: 1.6em"><a href="http://www.free-css.com/">snews</a></span> <span style="font-size: 1.5em"><a href="http://www.free-css.com/">css</a></span> <span style="font-size: 1em"><a href="http://www.free-css.com/">templates</a></span> <span style="font-size: .9em"><a href="http://www.free-css.com/">apple</a></span> <span style="font-size: 1.6em"><a href="http://www.free-css.com/">web 2.0</a></span> <span style="font-size: 1.4em"><a href="http://www.free-css.com/">social</a></span> <span style="font-size: 1.5em"><a href="http://www.free-css.com/">facebook</a></span> <span style="font-size: 1.7em"><a href="http://www.free-css.com/">layoutica</a></span> </p>
</div>
<p id="info">If you liked this template, you might like some other Free or Commercial CSS templates from Solucija!</p>
</div>
<div id="footer">
<p><strong>Blog:</strong> <a href="http://www.free-css.com/">Home</a> · <a href="http://www.free-css.com/">About</a> · <a href="http://www.free-css.com/">Media</a> · <a href="http://www.free-css.com/">References</a> · <a href="http://www.free-css.com/">Consulting</a> · <a href="http://www.free-css.com/">Contact</a></p>
<p><strong>Network:</strong> <a href="http://www.free-css.com/">Network site #1</a> · <a href="http://www.free-css.com/">Network site #2</a> · <a href="http://www.free-css.com/">Network site #3</a> · <a href="http://www.free-css.com/">Network site #4</a></p>
<p>Design: <a href="http://www.solucija.com/">Luka Cvrk</a> · Sponsored by <a href="http://webpoint.wordpress.com/">B4Contact</a> · Released under a <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons Licence</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category