internetmanagement
<!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>Internet Management</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
/*
template: internet management
author: luka cvrk (www.solucija.com)
*/
body { color: #303030; background: #ebebeb; font: .74em Arial, Verdana, sans-serif; text-align: center; line-height: 1.6em; margin: 2.5em 0; }
a { color: #214466; background: inherit; }
a:hover { color: #000; background: inherit; }
h2 {font-size: 1.4em;}
ul { margin: .6em 0; padding: 0;}
.clear { clear: both; margin: 0 0 .5em 0; }
#wrapper { width: 90%; margin: 0 auto; text-align: left; }
#logo h1 {
float: left;
color: #000;
background: inherit;
margin: 0 0 .8em .3em;
padding: 0;
font-size: 2.4em;
}
#top {
float: right;
margin: 0 2em 0 0;
}
#menu { clear: both; margin: 0 2% 1em 1%; padding: 7px 0 7px 0; border-bottom: 1px solid #DCDBD5; border-top: 1px solid #DCDBD5;}
#menu li { display: inline; }
#menu a { padding: 3px 15px; margin: 0 3px 0 0; text-decoration: none; color: #808080; background: inherit; }
#menu a.current { color: #fff; background: #3D648A; }
#menu a:hover { background: #fff; color: #444;}
.column {
float: left;
width: 29%;
margin: .3em 1.1%;
background: #fff;
color: #303030;
padding: 1% 1%;
}
.column h1 {
margin: 1% 0;
padding: 0;
color: #214466;
background: inherit;
font-size: 1.5em;
}
.number {
background: #ccc;
padding: .6% 3%;
color: #FFF;
}
.half {
float: left;
width: 45.6%;
margin: 1em 1.1%;
background: #fff;
color: #303030;
padding: .5% 1%;
}
.date { border-top: 1px dotted #ccc; padding: 5px 0;}
.news { background: #fff; color: #808080; padding: .7em 1em; margin: 0 1%; }
#footer { margin: 2em 3%; text-align: right; }
</style>
</head>
<body>
<div id="wrapper">
<div id="logo">
<h1>Internet Management</h1>
</div>
<p id="top">Let us make your ideas reality.</p>
<ul id="menu">
<li><a class="current" href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Content Management</a></li>
<li><a href="http://www.free-css.com/">Presentations</a></li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
<li><a href="http://www.free-css.com/">Site Map</a></li>
</ul>
<div class="column">
<h1><span class="number">1</span> Set Goals</h1>
<p>Lorem ipsum dolor sit amet, consectetuer <a href="http://www.free-css.com/">adipiscing elit</a>, sed diam nonummy nibh.</p>
</div>
<div class="column">
<h1><span class="number">2</span> Visualize</h1>
<p><a href="http://www.free-css.com/">Lorem ipsum</a> dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>
<div class="column">
<h1><span class="number">3</span> Discuss</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, <a href="http://www.free-css.com/">sed diam</a> nonummy nibh.</p>
</div>
<div class="clear"></div>
<div class="half">
<h2>Lorem Ipsum</h2>
<p>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>
<p>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 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.</p>
<p class="date">September 9th · <a href="http://www.free-css.com/">Comment(11)</a></p>
</div>
<div class="half">
<p>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>
<p>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 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.</p>
<p>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.</p>
</div>
<div class="clear"></div>
<div class="news">
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum.</p>
</div>
<div id="footer">
<p>© Copyright YourSite · Design: <a href="http://www.solucija.com/" title="Visit Solucija">Luka Cvrk</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category