internetsharing
<!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>Internet Sharing</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-2" />
<style type='text/css'>
/*
project: internet sharing template
author: luka cvrk (www.solucija.com)
*/
body { padding: 0; margin: 0; font: 0.7em Tahoma, Arial, sans-serif; line-height: 1.6em; background: #fff; color: #454545; }
/* links */
a { color: #003B6E; background: inherit; }
a:hover { color: #9EC068; background: inherit; }
/* headings */
h1 { font: bold 2.5em "Arial", Sans-Serif; margin: 0; letter-spacing: -1px; }
h2 { font: bold 2em Arial, Sans-Serif; margin: 0; padding: 0; }
h1 a, h2 a { color: #2b2b2b; background: #fff; text-decoration: none; }
h1 a:hover, h2 a:hover { color: #2b2b2b; background: #FFF; }
.title { color: #808080; background: #fff; }
/* lists and form elements */
ul { margin: 0; padding : 0; list-style : none; }
form { margin: 0; }
input.search { width: 279px; border: none; background: #fff url(internetsharing-images/input.gif) no-repeat; padding: 6px 10px; color: #1E67A8; font-weight: bold; }
input.button { padding: 3px; }
/* content holder */
#content { margin: 10px auto; width: 960px; }
/* header */
#header { height: 75px; }
#logo { padding: 15px 0 0 8px; }
#logo p { margin: 0; padding: 0 0 0 10px; color: #808080; background: #fff; }
#top_info { float: right; width: 570px; margin: 20px 5px 0 0; text-align: right; }
/* horizontal tabbed menu */
#tabs { background: #fff url(internetsharing-images/bigbox.gif) no-repeat top left; color: #000; height: 64px; text-align: center; padding: 0 0 0 210px; }
#tabs li { display: inline; height: 45px; }
#tabs li a { float: left; background: #fff url(internetsharing-images/barbg.gif) no-repeat; color: #808080; padding: 7px 0; width: 82px; text-align: center; font-weight: bold; text-decoration: none; }
#tabs li a:hover { background: #fff url(internetsharing-images/barcurrent.gif) no-repeat; color: #000; }
#tabs li a.current { background: #fff url(internetsharing-images/barcurrent.gif) no-repeat; color: #2C71AE; }
.key { text-decoration: underline; }
/* search form */
#search {
float: left;
clear: both;
color: #000;
background: #fff url(internetsharing-images/searchbg.gif) no-repeat;
padding: 14px 0 20px 5px;
width: 500px;
margin: 5px 0 0 0;
}
#search p { padding: 0; margin: 0; }
/* grey subheader */
.gboxtop { clear: both; height: 8px; background: #dedede url(internetsharing-images/gboxtop.gif) no-repeat; color: #000; }
.gbox { background: #dedede url(internetsharing-images/gbox.gif) no-repeat bottom left; color: #444; padding: 1px 13px 7px 13px; margin: 0 0 20px 0; }
.gbox p { padding: 7px 0; margin: 0;}
/* left side */
.left { float: left; width: 650px; margin: 0 0 10px 0; }
.left_articles {
margin: 0 20px 15px 10px;
padding: 10px 0 0 0;
text-align: justify;
border-bottom: 1px dotted #ccc;
color: #000;
background: #fff;
}
.calendar { height: 50px; float: left; background: #fff url(internetsharing-images/calendar.gif) no-repeat; width: 50px; padding: 5px 0 0 9px; color: #808080;}
.calendar p { padding: 0; margin: 0; }
.description { padding: 0 0 2px 0; margin: 0 10px 5px 0; border-bottom: 1px dotted #ccc; }
.thumbnail { float: left; margin: 0 18px 8px 0; border: 1px solid #dedede; }
/* bottom thirds */
.thirds { float: left; width: 203px; background: #eee; margin: 0 12px 0 0; color: #5d5d5d; }
.smallboxtop { height: 14px; background: #fff url(internetsharing-images/smallboxtop.gif) no-repeat; color: #000; }
.smallbox { background: #fff url(internetsharing-images/smallbox.gif) no-repeat bottom left; color: #444; padding: 1px 10px 10px 10px; }
.smallbox p { padding: 0; margin: 0; }
/* right side */
#right {
float: right;
width: 295px;
margin: 0 0 10px 0;
}
.boxtop { height: 19px; background: #fff url(internetsharing-images/boxtop.gif) no-repeat; color: #000; }
.box { background: #fff url(internetsharing-images/box.gif) no-repeat bottom left; color: #5b5b5b; padding: 0 10px 15px 10px; margin: 0 0 10px 0; }
.box p { padding: 0; margin: 0;}
.image { float: left; margin: 0 9px 3px 0; }
/* misc */
.buttons { text-align: right; padding: 4px 3px 0 0;}
.left_articles .buttons { float: right; height: 20px; }
.bluebtn { background: #488EB2 url(internetsharing-images/bluebtn.gif) no-repeat; width: 100px; padding: 1px 16px 5px 16px; color: #fff; text-decoration: none; }
.greenbtn { background: #488EB2 url(internetsharing-images/greenbtn.gif) no-repeat; padding: 1px 17px 5px 16px; color: #fff; text-decoration: none; }
.bluebtn:hover, .greenbtn:hover { background: #488EB2 url(internetsharing-images/hoverbtn.gif) no-repeat; color: #fff; }
/* footer */
.footer { clear: both; text-align: center; line-height: 1.8em; padding: 10px 0 10px 0; border-top: 1px solid #ccc; }
</style>
</head>
<body>
<div id="content">
<div id="header">
<p id="top_info">Browse <a href="http://www.free-css.com/">Today's favorites</a> or <a href="http://www.free-css.com/">All time favorites</a>.<br />
Please <a href="http://www.free-css.com/">Log in</a> to share and download files.</p>
<div id="logo">
<h1><a href="http://www.free-css.com/">Internet <span class="title">Sharing</span></a></h1>
<p>What do you want to share today?</p>
</div>
</div>
<div id="tabs">
<ul>
<li><a href="http://www.free-css.com/" accesskey="m"><span class="key">M</span>usic</a></li>
<li><a class="current" href="http://www.free-css.com/" accesskey="v"><span class="key">V</span>ideos</a></li>
<li><a href="http://www.free-css.com/" accesskey="r">A<span class="key">r</span>chives</a></li>
<li><a href="http://www.free-css.com/" accesskey="i"><span class="key">I</span>mages</a></li>
<li><a href="http://www.free-css.com/" accesskey="d"><span class="key">D</span>ocs</a></li>
<li><a href="http://www.free-css.com/" accesskey="a"><span class="key">A</span>ll</a></li>
</ul>
<div id="search">
<form method="post" action="http://www.free-css.com/">
<p>
<input type="text" name="search" class="search" />
<input type="submit" value="Search" class="button" />
</p>
</form>
</div>
</div>
<div class="gboxtop"></div>
<div class="gbox">
<p><a href="http://www.free-css.com/">Lorem ipsum dolor</a> 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. Ut wisi enim ad minim veniam, quis nostrud <a href="http://www.free-css.com/">exerci tation</a> ullamcorper suscipit lobortis nisl ut aliquip ex.</p>
</div>
<div class="left">
<div class="left_articles">
<div class="buttons">
<p><a href="http://www.free-css.com/" class="bluebtn">Read</a> <a href="http://www.free-css.com/" class="greenbtn">Mark</a></p>
</div>
<div class="calendar">
<p>NOV<br />
13th</p>
</div>
<h2><a href="http://www.free-css.com/">The Future of P2P Networks</a></h2>
<p class="description">People like to share files, but what will the future bring?</p>
<p><img src="internetsharing-images/thumb.jpg" class="thumbnail" alt="thumbnail" /><a href="http://www.free-css.com/">Lorem ipsum dolor sit amet</a>, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="http://www.free-css.com/">Ut wisi enim ad minim veniam</a>, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. 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 nulla facilisis at vero eros et accumsan et iusto odio dignissim qui.</p>
</div>
<div class="thirds">
<div class="smallboxtop"></div>
<div class="smallbox">
<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>
<div class="thirds">
<div class="smallboxtop"></div>
<div class="smallbox">
<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>
<div class="thirds">
<div class="smallboxtop"></div>
<div class="smallbox">
<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>
</div>
<div id="right">
<div class="boxtop"></div>
<div class="box">
<p><img src="internetsharing-images/image.gif" alt="Image" title="Image" class="image" /><b>Lorem ipsum dolor sit amet</b><br />
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.<br />
</p>
<div class="buttons">
<p><a href="http://www.free-css.com/" class="bluebtn">Read</a> <a href="http://www.free-css.com/" class="greenbtn">Mark</a></p>
</div>
</div>
<div class="boxtop"></div>
<div class="box">
<p><img src="internetsharing-images/image.gif" alt="Image" title="Image" class="image" /><b>Lorem ipsum dolor sit amet</b><br />
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.<br />
</p>
<div class="buttons">
<p><a href="http://www.free-css.com/" class="bluebtn">Read</a> <a href="http://www.free-css.com/" class="greenbtn">Mark</a></p>
</div>
</div>
</div>
<div class="footer">
<p><a href="http://www.free-css.com/">RSS Feed</a> · <a href="http://www.free-css.com/">Most Popular</a> · <a href="http://www.free-css.com/">Today's Favorites</a> · <a href="http://www.free-css.com/">All Time Favorites</a> · <a href="http://www.free-css.com/">Sharing Policy</a> · <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> and <a href="http://validator.w3.org/check?uri=referer">XHTML</a><br />
© Copyright 2006 Internet Sharing, Design: Luka Cvrk - <a href="http://www.solucija.com/" title="Information Architecture and Web Design">Solucija</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category