distinctive
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Robots" content="index,follow" />
<meta name="author" content="Luka Cvrk (www.solucija.com)" />
<meta name="description" content="Description" />
<meta name="keywords" content="key, words" />
<style type='text/css'>
/*
project: Distinctive
author: Luka Cvrk (www.solucija.com)
-------------------------------------
2009. Solucija
*/
*{margin:0;padding:0}:focus,:active {outline:0}img{border: 0}
body { font: .8em Arial, Tahoma, Verdana; background: #fff url(distinctive-images/bg.gif) repeat-x; color: #777; }
a { text-decoration: none; color: #B20F0F; }
h1 { font-size: 1.4em; font-weight: normal; }
h1 a { color: #fff; font-size: 1.6em; }
h2 { font-size: 1.2em; }
h3 { font-size: 1.2em; background: #B00A0A url(distinctive-images/redbg.gif) repeat-x left bottom; padding: 6px 7px; color: #fff; font-weight: normal; margin: 0 0 15px; float: left; }
h4 { margin: 0 0 15px; color: #555; font-weight: normal; font-size: 1.6em; font-weight: normal; }
p { clear: both; line-height: 1.64em; margin: 0 0 15px; }
.line { clear: both; border-bottom: 1px solid #ddd; margin: 0 0 45px; }
.clear { clear: both; }
#content { width: 970px; margin: 0 auto; }
#top { color: #ccc; padding: 6px 20px 0; font-size: .84em; text-align: right; }
#logo { float: left; background: url(distinctive-images/redbg.gif) repeat-x; padding: 100px 25px 15px; margin: -46px 0 20px; }
#logo h1 { text-shadow: 1px 1px 1px #7E0E0E; }
#menu { float: right; margin: 63px 20px 0; }
#menu li { display: inline; font-size: 1.3em; }
#menu li a { float: left; color: #808080; padding: 0 0 5px; margin: 0 0 0 55px; }
#menu li a:hover, #menu li.current a, #menu li a:focus { color: #000; border-bottom: 1px solid #ddd; }
#pitch { background: url(distinctive-images/monitor.gif) no-repeat right top; padding: 30px 350px 0 0; border-bottom: 1px solid #ddd; height: 210px; margin: 0 0 35px; }
#pitch h1 { font-size: 2.6em; color: #000; margin: 0 0 20px; }
#pitch h2 { line-height: 1.5em; }
.left { float: left; width: 250px; }
.right { float: right; width: 630px; margin: 0 0 20px; }
.right h3 { background: #808080; font-size: .84em; }
.third { float: left; width: 296px; margin: 0 40px 20px 0; }
.last { margin-right: 0; }
#footer { clear: both; font-size: .84em; border-top: 1px solid #ddd; padding: 20px 0 0; }
</style>
<title>Distinctive - web development company</title>
</head>
<body>
<div id="content">
<p id="top">Duis rutrum dapibus diam. Sed turpis sem, suscipit et, ullamcorper vel, aliquam in, tellus.</p>
<div id="logo">
<h1><a href="index.html">distinctive</a></h1>
</div>
<ul id="menu">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="line"></div>
<div id="pitch">
<h1>We provide turnkey, high-quality<br />solutions regardless of the project size.</h1>
<h2>We're a professional, full service web development company that creates elegant website designs and build innovative web applications.</h2>
</div>
<div class="third">
<h3>Consulting and Planning</h3>
<p>An effective website requires a clear definition of goals, comprehensive planning, and expert execution. For sites that have not yet been built or are ready to undergo a transformation, we can provide information on architecture planning. Contact us for a free consultation.</p>
</div>
<div class="third">
<h3>Architecture and Design</h3>
<p>While constantly communicating with the client, we organize all aspects of the project to set paths for further design and development process. We create smart and usable interfaces with a strong accent on accessibility and semantically correct markup.</p>
</div>
<div class="third last">
<h3>Application Development</h3>
<p>Regardless of the project size, we offer robust and sophisticated "out of the box" or custom built solutions. From a typical content management system to specifically targeted web applications, we produce highly usable, modular and search engine optimized solutions.</p>
</div>
<div class="line"></div>
<div class="left">
<h4>Join the Movement</h4>
<p><em>Laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</em></p>
</div>
<div class="right">
<h3>12 / 2009</h3>
<p>Duis rutrum dapibus diam. Sed turpis sem, suscipit et, ullamcorper vel, aliquam in, tellus. Phasellus interdum. Sed pede. Fusce semper tellus quis sapien.</p>
<br />
<h3>12 / 2009</h3>
<p>Duis rutrum dapibus diam. Sed turpis sem, suscipit et, ullamcorper vel, aliquam in, tellus. Phasellus interdum. Sed pede. Fusce semper tellus quis sapien.</p>
</div>
<div id="footer">
<p>© Copyright 2009 Distinctive − Design: Luka Cvrk, <a href="http://www.solucija.com" title="Free CSS Templates">Solucija</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category