justgrey
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JUST GREY</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
margin: 0;
padding: 0;
line-height: 2em;
font : 80% "Trebuchet MS", "lucida sans", Arial, Helvetica, Tahoma, sans-serif;
color: #000;
background: #bbb;
}
/*TITLE BAR*/
#top {
height: 50px;
background: #677278;
margin-top: 0;
}
/*BANNER*/
#header {
height: 150px;
background: #666 url(justgrey-images/img.jpg) no-repeat;
margin:0;
border-bottom : 3px solid #eee;
}
/* TOP MENU */
#menu {
width:100%;
height: 40px;
background: #677278;
font-size:93%;
line-height:normal;
border-bottom: 3px solid #eee;
}
#menu ul {
margin:0;
padding: 13px 0 0 0;
list-style:none;
}
#menu li {
display:inline;
margin:0;
padding:0;
}
#menu a {
float:left;
background:url(justgrey-images/tableft6.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#menu a span {
float:left;
display:block;
background:url(justgrey-images/tabright6.gif) no-repeat right top;
padding: 5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu a span {float:none;}
/* End IE5-Mac hack */
#menu a:hover span {
color:#FFF;
}
#menu a:hover {
background-position:0% -42px;
}
#menu a:hover span {
background-position:100% -42px;
}
/*3 COLUMNS*/
#gutter {
clear:both;
float: left;
width: 3%;
height: 1px;
}
#col1 {
float: left;
width: 20%;
background: #bbb;
margin-bottom: 10px;
}
#col2 {
float: left;
width: 48%;
margin-left: 3%;
background: #bbb url(justgrey-images/main_bg.jpg) center no-repeat;
margin-bottom: 10px;
}
#col3 {
float: left;
width: 20%;
margin-left: 3%;
background-color: #bbb;
margin-bottom: 10px;
}
/*BOTTOM*/
#bottom {
border-top: 3px solid #eee;
height:200px;
clear:both;
color: #000;
background: #677278;
}
#bottom a {
color : #eee;
background : transparent;
text-decoration : none;
}
#bottom a:hover {
color : #484452;
text-decoration : none;
}
/*LIST*/
.list3,.list3center {
float: left;
width: 28%;
margin-left : 10px;
}
.list3center {
margin: 0 6%;
}
/*FOOTER*/
#footer {
border-top: 1px solid #bbb;
clear: both;
padding:5px;
background: #666;
color:#eee;
}
#footer a {
background: inherit;
color: #D5D9B4;
}
#footer a:hover {
background: inherit;
color: #333;
}
/*TYPOGRAPHY*/
h1 {
margin: 0;
padding : 10px 0 0 30px;
font-size : 200%;
letter-spacing: 5px;
color : #333;
background : inherit;
}
h2 {
margin-top: 10px;
font-size : 150%;
letter-spacing: 3px;
color : #666972;
background :transparent;
}
h3 {
margin : 10px 0 0 20px;
font-size : 160%;
letter-spacing: 5px;
text-transform: uppercase;
color : #484452;
background : inherit;
}
p {
margin-left: 7px;
margin-right: 7px;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #677278;
}
/*LINKS*/
a:link {
color : #677278;
background : transparent;
text-decoration : none;
}
a:visited {
color : #677278;
background : transparent;
text-decoration : none;
}
a:hover {
color : #484452;
text-decoration : none;
}
li {
list-style-image: url(justgrey-images/arrow.gif);
padding-left: 3px;
}
a img {
border : 0;
}
/*CLASS*/
.clear {
clear: left;
overflow: hidden;
width: 0;
height: 0;
}
</style>
</head>
<body>
<div id="top">
<h1>Your <span style="font-weight:bold; color:#bbb;">Company</span> Name</h1>
</div>
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/" title="Link 1"><span>Home</span></a></li>
<li><a href="http://www.free-css.com/" title="Link 2"><span>Link 2</span></a></li>
<li><a href="http://www.free-css.com/" title="Link 3"><span>Link 3</span></a></li>
<li><a href="http://www.free-css.com/" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="http://www.free-css.com/" title="Link 5"><span>Link 5</span></a></li>
<li><a href="http://www.free-css.com/" title="Link 6"><span>Link 6</span></a></li>
<li><a href="http://www.free-css.com/" title="Link 7"><span>Link 7</span></a></li>
</ul>
</div>
<div id="header"></div>
<div id="gutter"></div>
<div id="col1">
<h2>Navigation</h2>
<div class="navlist">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Open Designs</a></li>
<li><a href="http://www.free-css.com/">ANDREAS VIKLUND</a></li>
<li><a href="http://www.free-css.com/">JAMES KOSTER</a></li>
<li><a href="http://www.free-css.com/">CSS play</a></li>
<li><a href="http://www.free-css.com/">LISTAMATIC</a></li>
<li><a href="http://www.free-css.com/"> LAYOUTGALA</a></li>
<li><a href="http://www.free-css.com/"> BLUEROBOT</a></li>
</ul>
</div>
<h2>Login</h2>
<label for="tf1">Name: </label>
<br />
<input type="text" id="tf1" value="" />
<br />
<label for="tf2">Password: </label>
<br />
<input type="text" id="tf2" value="" />
<br />
<h2>Vote</h2>
Choose
<label for="rb1">Yes</label>
or
<label for="rb2">No</label>
:<br />
<input id="rb1" name="nlrb" type="radio" value="yes" />
<label for="rb1"> Yes</label>
<br />
<input id="rb2" name="nlrb" type="radio" value="no" />
<label for="rb2">No</label>
</div>
<div id="col2">
<h2>Introduction</h2>
<blockquote> The page has been tested in Mozilla and IE7. This page validates as XHTML 1.0 Transitional using valid CSS. The top menu is from Exploding Boy.com<br />
For more FREE CSS templates visit my website.</blockquote>
<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. 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.</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 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.</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 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.</p>
<p><a href="http://www.free-css.com/">< This is a link</a></p>
</div>
<div id="col3">
<h2>Search</h2>
<form method="get" id="searchform" action="#">
<div>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Search" />
</div>
</form>
<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. 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.</p>
</div>
<div id="bottom">
<div class="list3">
<h3>Updates</h3>
<div class="navlist">
<ul>
<li><a href="http://www.free-css.com/">Item two</a></li>
<li><a href="http://www.free-css.com/">Item three</a></li>
<li><a href="http://www.free-css.com/">Item four</a></li>
<li><a href="http://www.free-css.com/">Item five</a></li>
</ul>
</div>
</div>
<div class="list3center">
<h3>Resources</h3>
<div class="navlist">
<ul>
<li><a href="http://www.free-css.com/">Item two</a></li>
<li><a href="http://www.free-css.com/">Item three</a></li>
<li><a href="http://www.free-css.com/">Item four</a></li>
<li><a href="http://www.free-css.com/">Item five</a></li>
</ul>
</div>
</div>
<div class="list3">
<h3>Links</h3>
<div class="navlist">
<ul>
<li><a href="http://www.free-css.com/">Item two</a></li>
<li><a href="http://www.free-css.com/">Item three</a></li>
<li><a href="http://www.free-css.com/">Item four</a></li>
<li><a href="http://www.free-css.com/">Item five</a></li>
</ul>
</div>
</div>
</div>
<div class="clear"> </div>
<div id="footer"> <a href="http://www.free-css.com/">Homepage</a> | <a href="http://www.free-css.com/">contact</a> | <a href="http://validator.w3.org/check?uri=referer">html</a> | <a href="http://jigsaw.w3.org/css-validator">css</a> | © 2007 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a> | This work is licensed under a <a rel="license" target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a> </div>
</body>
</html>
Related examples in the same category