Web_Application
<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Web Application</title>
<meta name="description" content="Web Application" />
<meta name="keywords" content="web, application" />
<style type='text/css'>
/*
project: web application template
author: luka cvrk (www.solucija.com)
*/
*{ margin: 0; padding: 0; }*
body { margin: 50px 0 0; background: #fff url(Web_Application-images/bg.gif) repeat-x; font: .74em "Trebuchet MS", Arial, Sans-Serif; color: #444; }
h1 { font-size: 3em; font-weight: normal; float: left; }
h1 a { text-decoration: none; }
h2 { font-size: 2em; color: #FFF2B3; font-weight: normal; margin: 0 0 .8em; }
h3 { font-size: 1.5em; border-bottom: 1px solid #eee; margin: 0 0 .8em; }
p { margin: 0 0 2em 0; line-height: 1.8em; }
em { border-bottom: 1px dotted #fff; cursor: pointer; }
a { color: #9D2900; }
a:hover { color: #A0000E; text-decoration: none; }
img { border: 0; }
.red { color: #9D2900; }
.wrap { width: 900px; margin: 0 auto; }
#header { width: 900px; height: 50px; margin: 0 auto; }
#menu { float: right; padding: 6px 0 0 0; list-style: none; }
#menu li { display: inline; }
#menu a { display: block; float: left; margin-left: 30px; padding: 7px; text-decoration: none; font-size: 13px; color: #000000; }
#menu a:hover { color: #000; border-bottom: 2px solid #ccc; }
#menu .active a { border-bottom: 2px solid #C70012; color: #9D2900;}
#teaser { clear: both; height: 259px; background: #fff url(Web_Application-images/teaserbg.jpg) repeat-x; }
.box { float: left; padding: 66px 0 0; width: 480px; color: #C7E3EE; }
#image { float: right; width: 388px; position: relative; top: 16px; background: url(Web_Application-images/logotype.jpg) no-repeat top right; height: 258px; }
#bar { height: 40px; margin: 0 0 30px; padding: 8px 0 0 0; background: url(Web_Application-images/bar.gif) repeat-x; }
.step { cursor: pointer; color: #FAFDDD; padding: 4px 0 0 11px; margin: 0 35px 0 0; font-size: 1.4em; float: left; text-align: center; background: url(Web_Application-images/step.gif) no-repeat; height: 30px; }
.step a { color: #fff; margin: 0 10px 0 0; }
.col { float: left; width: 276px; margin: 0 30px 16px 0; }
.last { float: right; margin: 0; }
.info { border: 1px solid #e0e0e0; background: #f4f4f4; padding: 7px; }
#footer { clear: both; width: 900px; margin: 0 auto; padding: 15px; border-top: 1px solid #e0e0e0; background: #fff url(Web_Application-images/small_logotype.jpg) no-repeat right 13px; }
#footer .right { float: right; margin: 0 55px 0 0; }
#footer a { color: #808080; font-weight: bold; }
</style>
</head>
<body>
<div id="header">
<h1><a href="#">Web Application</a></h1>
<ul id="menu">
<li class="active"><a href="#">about application</a></li>
<li><a href="#">register</a></li>
<li><a href="#">demo</a></li>
<li><a href="#">help</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
<div id="teaser">
<div class="wrap">
<div id="image"></div>
<div class="box">
<h2>Welcome to <em title="Sharing, Data Management and Collaboration">Web Application</em></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis justo viverra nunc. Donec eu ipsum molestie eros condimentum malesuada. Sed quis velit vel augue sollicitudin aliquet. Quisque dignissim. Proin vehicula sem tempor velit. Pellentesque aliquam ante vitae pede. Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec iaculis justo viverra nunc.</p>
</div>
</div>
</div>
<div id="bar">
<div class="wrap">
<span class="step"><a>1</a> sharing</span>
<span class="step"><a>2</a> data management</span>
<span class="step"><a>3</a> collaboration</span>
</div>
</div>
<div class="wrap">
<div class="col">
<h3>What's <span class="red">New?</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer porta, ipsum sit amet ultricies congue, ante pede congue pede, id venenatis ante elit et nulla. Ut lectus nisi, convallis in, eleifend vitae, blandit non, orci. Aliquam eget ante. Cras orci ante, interdum ac, euismod et, euismod in, eros. Cras vestibulum elit quis arcu. Suspendisse lectus ligula, posuere ut, ullamcorper eget, lobortis et, tellus. Suspendisse pulvinar metus.</p>
</div>
<div class="col">
<h3>User <span class="red">Statistics</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer porta, ipsum sit amet ultricies congue, ante pede congue pede, id venenatis ante elit et nulla. Ut lectus nisi, convallis in, eleifend vitae, blandit non, orci. Aliquam eget ante. Cras orci ante, interdum ac, euismod et, euismod in, eros. Cras vestibulum elit quis arcu. Suspendisse lectus ligula, posuere ut, ullamcorper eget, lobortis et, tellus. Suspendisse pulvinar metus.</p>
</div>
<div class="col last">
<h3>About <span class="red">Web Application</span></h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer porta, ipsum sit amet ultricies congue, ante pede congue pede, id venenatis ante elit et nulla. Ut lectus nisi, convallis in, eleifend vitae, blandit non, orci.</p>
<p class="info">If you liked this template, you might like some other <a href="http://www.solucija.com/home/css-templates/" title="Free CSS Templates">Free</a> or <a href="http://www.solucija.com/home/commercial-templates/" title="Commercial CSS Templates">Commercial</a> CSS templates from <a href="http://www.solucija.com" title="Information Architecture and Web Design">Solucija</a>.</p>
</div>
</div>
<div id="footer">
<p class="right">Design: <a href="http://www.solucija.com/" title="Information Architecture and Web Design">Luka Cvrk</a> · Sponsor: <a href="http://www.fool.co.uk/credit-cards/credit-cards-comparison.aspx">Credit Cards</a></p>
<p>© Copyright 2007 <a href="#">Web Application</a> · All Rights Reserved | <a href="http://free-templates.ru">free-templates.ru</a></p>
</div>
</body>
</html>
Related examples in the same category