clean-web-2.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Clean Web 2.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* CSS Reset */
* { margin:0; padding:0; }
body {
background:#59d3fa url(clean-web-2.0-img/body_bg.jpg) repeat-x 0 0;
}
#container {
width:1024px;
margin:0 auto;
}
#header {
height:125px;
width:960px;
margin:90px auto 0 auto;
}
#header h1 {
display:block;
float:left;
width:320px;
height:125px;
background:url(clean-web-2.0-img/logo.jpg) no-repeat 0 0;
text-indent:-10000px;
}
#header h1 a {
display:block;
width:100%;
height:100%;
}
#header h1 a:hover {
background:url(clean-web-2.0-img/logo.jpg) no-repeat 0 -125px;
}
span.logoHover {
display: block;
width: 100%;
height:100%;
background:#ccc url(clean-web-2.0-img/logo.jpg) no-repeat 0 -125px;
}
span.logoHover a {
display: block;
width: 100%;
height:100%;
}
#header ul {
display:block;
float:right;
width:640px;
height:125px;
background:url(clean-web-2.0-img/menu.jpg) no-repeat 0 0;
list-style:none;
}
#header ul li {
display:block;
float:left;
height:125px;
text-indent:-10000px;
}
#home {
width:160px;
}
#about {
width:137px;
}
#work {
width:129px;
}
#contact {
width:210px;
}
#header ul li a {
display:block;
width:100%;
height:100%;
}
#home a:hover {
background:url(clean-web-2.0-img/menu.jpg) no-repeat 0 -125px;
}
#about a:hover {
background:url(clean-web-2.0-img/menu.jpg) no-repeat -160px -125px;
}
#work a:hover {
background:url(clean-web-2.0-img/menu.jpg) no-repeat -297px -125px;
}
#contact a:hover {
background:url(clean-web-2.0-img/menu.jpg) no-repeat -426px -125px;
}
p#featuredText {
display:block;
position:relative;
float:left;
width:100%;
height:375px;
background:url(clean-web-2.0-img/featured_bg.jpg) no-repeat 0 0;
text-indent:-10000px;
}
a#learnMoreButton {
display:block;
width:280px;
height:60px;
background:url(clean-web-2.0-img/learnmore.jpg) no-repeat 0 0;
margin:200px 0 0 132px;
}
a:hover#learnMoreButton {
background-position:0 -60px;
}
#monitor {
position:absolute;
top:0;
right:0;
}
.box {
width:320px;
height:185px;
float:left;
}
.box h2 {
font:bold 20px Verdana, Geneva, sans-serif;
color:#0f83bc;
text-transform:uppercase;
margin:35px 0 0 140px;
}
.box p {
font:normal 12px/18px Verdana, Geneva, sans-serif;
color:#0c3b4a;
margin:0 30px 0 140px;
}
.client {
background:url(clean-web-2.0-img/box1.jpg) no-repeat 0 0;
}
.work {
background:url(clean-web-2.0-img/box2.jpg) no-repeat 0 0;
}
.book {
background:url(clean-web-2.0-img/box3.jpg) no-repeat 0 0;
}
#leftCol {
width:630px;
float:left;
margin:20px 0 0 10px;
}
#leftCol h2 {
font:bold 20px/24px Verdana, Geneva, sans-serif;
color:#094e64;
}
#leftCol p {
font:normal 14px/20px Arial, Helvetica, sans-serif;
color:#094e64;
margin-top:10px;
}
#newsletter {
position:relative;
width:320px;
height:110px;
float:left;
background:url(clean-web-2.0-img/newsletter_bg.jpg) no-repeat 0 0;
margin:20px 0 50px 0;
}
#newsletter label {
font:bold 16px Verdana, Geneva, sans-serif;
letter-spacing:-1px;
margin-top:26px;
width:100%;
display:block;
color:#fff;
text-align:center;
}
#emailInput {
position:absolute;
top:51px;
left:5px;
width:200px;
margin:0px 0 0 30px;
font:bold 20px Verdana, Geneva, sans-serif;
color:#999;
border:0;
background-color:transparent;
border:none;
}
#submitButton {
position:absolute;
top:43px;
right:27px;
width:50px;
height:40px;
margin-top:5px;
padding:0;
}
#footer {
clear:both;
width:940px;
border-top:1px dashed #094e64;
}
#footer p {
margin:15px 0;
font:bold 12px Arial, Helvetica, sans-serif;
color:#094e64;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1><a href="http://www.free-css.com/">Creativo</a></h1>
<ul>
<li id="home"><a href="http://www.free-css.com/">Home</a></li>
<li id="about"><a href="http://www.free-css.com/">About</a></li>
<li id="work"><a href="http://www.free-css.com/">Work</a></li>
<li id="contact"><a href="http://www.free-css.com/">Contact</a></li>
</ul>
<p id="featuredText"> We build websites that blow you away. Here at Creativo, we build state-of-the-art and cost-effective website <a href="http://www.free-css.com/" id="learnMoreButton">learn more.</a> <img id="monitor" src="clean-web-2.0-img/monitor.jpg" width="375" height="370" alt="" /> </p>
<div id="boxContainer">
<div class="box client">
<h2>Client list</h2>
<p>We have a wide range of clients from all over the world including the USA, North America, Europe, Asia and Australia.</p>
</div>
<div class="box work">
<h2>Our work</h2>
<p>Check out the work we have done for our various clients - from print to web designs.</p>
</div>
<div class="box work">
<h2>Book now!</h2>
<p>We are currently available to book new projects. Click here to get a <strong>free quote</strong>!</p>
</div>
</div>
<div id="leftCol">
<h2>Need us say more?</h2>
<p>Creativo is a Web Design and Development company that has been around since 1998. We specialize in clean and corporate design, usability, front and back end development including the building of Content Management Systems and blogs.</p>
</div>
<form id="newsletter" action="http://www.free-css.com/" method="get">
<label for="emailInput">Sign Up for Our Monthly Newsletter: </label>
<input id="emailInput" name="emailInput" type="text" />
<input id="submitButton" name="submitButton" value="Go" type="image" src="clean-web-2.0-img/go.jpg" />
</form>
<div id="footer">
<p>Creativo Design © 2009. All Rights Reserved | Template by: <a href="http://www.dawghousedesignstudio.com/">Jan Cavan</a></p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category