ruby
<!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>*RUBY*</title>
<style type='text/css'>
html, body {
margin : 0;
padding : 0;
}
body {
font : 73% Arial, "Trebuchet MS", Helvetica, Tahoma, sans-serif;
background : #ccc url(ruby-images/bg.jpg) top center repeat-y;
color : #555;
}
/*WRAP*/
#wrap {
width : 770px;
margin-left : auto;
margin-right : auto;
padding : 0;
color : #555;
background : transparent url(ruby-images/wrap_bg.jpg) repeat-x;
}
/*BANNER*/
#masthead {
height : 100px;
padding : 0;
margin-bottom : 0;
}
/*MAIN CONTAINER*/
#container {
width : 770px;
margin-left : auto;
margin-right : auto;
margin-top : 10px;
padding : 0;
line-height : 1.8em;
}
/*MAIN CONTENT*/
#content {
padding : 1em;
margin : 0 240px 0 0;
border-right : 1px solid #eee;
}
/*SIDEBAR*/
#sidebar {
float : right;
width : 200px;
margin-top : 0;
padding : 1em;
}
/*FOOTER*/
#footer {
clear : both;
height : 50px;
padding : 0;
margin-bottom : 0;
margin-top : 40px;
text-align : center;
border-top : 5px solid #E80202;
color : #fff;
background : #000;
}
/*TYPOGRAPHY*/
h1 {
float : left;
margin : 0;
padding : 50px 0 20px 25px;
font : 150% "Trebuchet MS", Helvetica, Arial, Tahoma, sans-serif;
letter-spacing : 5px;
color : #fff;
}
h2 {
float : right;
margin : 0;
padding : 25px 20px 20px 0;
font : 90% "Trebuchet MS", Helvetica, Arial, Tahoma, sans-serif;
letter-spacing : 3px;
color : #E80202;
}
h3 {
margin : 0;
padding : 20px 0 20px 0;
border-bottom : 1px solid #aaa;
font : 150% "Trebuchet MS", Helvetica, Arial, Tahoma, sans-serif;
text-transform : uppercase;
letter-spacing : 3px;
color : #E80202;
}
blockquote {
font-weight : bold;
font-style : italic;
border-bottom : 1px solid #aaa;
border-top : 1px solid #aaa;
color : #b29b35;
}
/*LINKS*/
a:link, a:visited {
color : #E80202;
background : inherit;
text-decoration : underline;
}
a:hover {
color : #636363;
background : inherit;
text-decoration : none;
}
a img {
border: 0;
}
/*IMAGES*/
.left {
float : left;
border : 0 solid #656c4a;
margin : 5px 0 10px 0;
padding : 10px;
}
/*SEARCH BOX*/
legend {
color : #E80202;
}
input {
background : #eee;
}
</style>
<link href="menu.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="wrap">
<div id="masthead">
<h1>Your Site Name</h1>
<h2><a href="http://www.free-css.com/">homepage</a> | <a href="http://www.free-css.com/">contact</a> </h2>
</div>
<div id="menucontainer">
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/" class="current">Services</a></li>
<li><a href="http://www.free-css.com/">Our Work</a></li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
</ul>
</div>
</div>
<div id="container">
<div id="sidebar">
<h3>Sidebar</h3>
<img src="ruby-images/rose.jpg" alt="" />
<h3>Archives</h3>
<ul>
<li><a href="http://www.free-css.com/">March 2007</a></li>
<li><a href="http://www.free-css.com/">February 2007</a></li>
<li><a href="http://www.free-css.com/">January 2007</a></li>
<li><a href="http://www.free-css.com/">December 2006</a></li>
</ul>
<p>Mauris ultricies neque nec augue. Aenean vehicula. Ut dictum. Vivamus placerat diam nec velit. Suspendisse ornare. Ut viverra. Mauris sagittis nisl sed ante.</p>
<div id="navcontainer">
<ul>
<li><a href="http://www.free-css.com/">Snapp Happy</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>
<form action="http://www.free-css.com/" method="post">
<fieldset>
<legend>Search</legend>
<div> <span>
<label for="txtsearch"> <img src="ruby-images/search.gif" alt="search" /> :search</label>
</span> <span>
<input type="text" value="demo only" name="txtsearch" title="Text input: search" id="txtsearch" size="25" />
</span> </div>
</fieldset>
</form>
</div>
<div id="content">
<h3>Welcome to <span style="color:#000;">Ruby</span> Template</h3>
<p>Mauris ultricies neque nec augue. Aenean vehicula. Ut dictum. Vivamus placerat diam nec velit. Suspendisse ornare. Ut viverra. Mauris sagittis nisl sed ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. </p>
<p>Mauris ultricies neque nec augue. Aenean vehicula. Ut dictum. Vivamus placerat diam nec velit. Suspendisse ornare. Ut viverra. Mauris sagittis nisl sed ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus placerat metus eu urna. Etiam dictum. Aliquam eu dui eu ante euismod tristique. Donec posuere augue varius mi. Nunc erat ligula, ultrices eu, ultrices sed, sodales ut, magna. Mauris ultricies neque nec augue. </p>
<blockquote>This template has been tested in Mozilla Firefox and IE7. The page validates as XHTML 1.0 Transitional using valid CSS. It will work in browser widths of 800x600, 1024x768 & 1280x1064. The images used in this template are courtesy of <a href="http://www.sxc.hu/" title="free images">stock xchng</a>. The top navigation menu is from <a href="http://www.13styles.com/" title="free CSS menus">13 Styles</a> and has been amended to suit this template. For more FREE CSS templates visit <a href="http://www.mitchinson.net">my website</a>.</blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse in odio et nibh volutpat eleifend. Donec rutrum, risus sed auctor malesuada, augue felis placerat neque, vel vestibulum odio erat eget felis. Phasellus id mauris eu urna sagittis posuere. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris elementum elit et ipsum. Cras ornare magna eu felis. Morbi convallis. Nunc fermentum, odio sed ornare ultricies, urna odio egestas sem, vel scelerisque nisi neque vitae lectus. Proin dolor. Vestibulum condimentum urna dignissim arcu. Nullam interdum. Proin lacinia, magna ut scelerisque facilisis, augue sem tempor purus, consequat suscipit tellus ligula et justo. Nam magna. Donec magna sapien, aliquam non, egestas eu, hendrerit nec, quam. Donec commodo auctor lectus. Suspendisse rhoncus. Proin tincidunt euismod nisi. Cras nibh ante, ultrices non, placerat quis, placerat id, est. Suspendisse sed quam volutpat lacus faucibus venenatis.</p>
</div>
</div>
<div id="footer"> <a href="http://www.free-css.com/">homepage</a> | <a href="mailto:denise@mitchinson.net">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><br/>
This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a> </div>
</div>
</body>
</html>
Related examples in the same category