roundy
<!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>Roundy Site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/*************************************************************
Empire Elements Web design services
www.empire-elements.co.uk
*************************************************************/
body {
background-color: #FFFFFF;
background-image: url(roundy-images/body-bg.jpg);
background-repeat: repeat-x;
top: 0px;
margin: 0px;
}
/********************** HOLDERS *****************************/
#MainHolder {
}
#TOP {
padding-left: 150px;
}
#TOP-Message {
color: #84a3ae;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
font-weight: bold;
padding-left: 150px;
clear: both;
}
#TOP img{
float: left;
}
/********************* MENU ***********************************************/
#TOP-Menu {
background-image: url(roundy-images/menu-bg-1.jpg);
background-repeat: repeat-x;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 150px;
height: 27px;
padding-top: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#TOP-Menu a{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
padding-right: 10px;
padding-left: 10px;
}
#TOP-Menu a:hover{
color: #2F7E9C;
text-decoration: underline;
}
#TOP-Menu a:visited{}
#TOP-Menu p{
margin: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/********************* SUB-MENU ***********************************************/
/* change a and a:hover if you add link to the submenu */
#TOP-SubMenu {
background-image: url(roundy-images/menu-bg-2.jpg);
height: 31px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: normal;
color: #666666;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 150px;
}
#TOP-SubMenu a{}
#TOP-SubMenu a:hover{}
#TOP-SubMenu a:visited{}
#TOP-SubMenu p{
margin: 0px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.BottomIMG {
clear: none;
margin: 0px;
padding: 0px;
}
/********************* CONTENT NOW ***********************************************/
#Content-Holder {
overflow: auto;
}
#Content-Left {
float: left;
background-color: #ffb124;
background-image: url(roundy-images/menu-left-BG-top.gif);
background-repeat: no-repeat;
width: 143px;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 5px;
padding: 0px;
}
#Content-Left h3{
color: #FFFFFF;
padding-left: 10px;
margin: 0px;
padding-top: 5px;
}
#Content-Left p{
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #FFFFFF;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
#Content-Left a{
color: #FFFFFF;
text-decoration: underline;
}
#Content-Left a:hover{
color: #B77700;
text-decoration: none;
}
#Content-Left a.submenu{
display: block;
padding-top: 1px;
padding-right: 10px;
padding-bottom: 1px;
padding-left: 10px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 5px;
margin-left: 10px;
background-color: #FDA500;
color: #FFFFFF;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFCB6A;
border-bottom-color: #FFCB6A;
}
#Content-Left a.submenu:hover{
background-color: #FFCB6A;
}
/****************/
#Content-Right {
width: 600px;
float: left;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}
#Content-Right p{
margin: 0px;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #666666;
}
#Content-Right h4{
padding-left: 10px;
margin: 0px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
font-family: Geneva, Arial, Helvetica, sans-serif;
color: #2c7d9a;
font-size: 20px;
}
/********************************************************************************************/
h1 {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 36px;
font-weight: bold;
text-decoration: none;
color: #FFD83B;
padding-top: 50px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#Banner {
background-image: url(roundy-images/banner.jpg);
background-repeat: no-repeat;
height: 182px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
background-color: #639735;
text-align: right;
}
#Banner h2{
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 40px;
padding-right: 40px;
padding-bottom: 0px;
padding-left: 0px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 36px;
font-weight: bold;
color: #9EBE7F;
}
#Banner h3{
margin: 0px;
padding-top: 0px;
padding-right: 40px;
padding-bottom: 0px;
padding-left: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #9EBE7F;
font-weight: normal;
}
/********************** FOOTER *********************************************************/
#Footer {
clear: both;
background-image: url(roundy-images/footer-bg.jpg);
background-repeat: repeat-x;
width: auto;
height: 34px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#Footer p{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 20px;
margin: 0px;
}
#Footer a{
color: #FFFFFF;
text-decoration: underline;
}
#Footer a:hover{
color: #2E7D9A;
text-decoration: none;
}
#Footer a:visited{}
/********************** TEXT *********************************************************/
.MarketMessage1 {
padding: 5px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
background-color: #ebebeb;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #e67501;
font-weight: bold;
text-align: center;
}
/********************** Slopes *********************************************************/
#ThreeSlopes {
overflow: auto;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 5px;
padding: 10px;
}
#ThreeSlopes h4{
color: #FFFFFF;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
margin: 0px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
#ThreeSlopes p{
color: #AED8E8;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
margin: 0px;
}
#ThreeSlopes a{
color: #FFFFFF;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#ThreeSlopes a:hover{
color: #FFB124;
text-decoration: none;
}
#SlopeOne {
width: 180px;
float: left;
background-image: url(roundy-images/slope-top.gif);
background-color: #2E7D9A;
background-repeat: no-repeat;
}
#SlopeTwo {
float: left;
width: 180px;
margin-right: 10px;
margin-left: 10px;
background-image: url(roundy-images/slope-top.gif);
background-color: #2E7D9A;
background-repeat: no-repeat;
}
#SlopeThree {
float: left;
width: 180px;
background-image: url(roundy-images/slope-top.gif);
background-color: #2E7D9A;
background-repeat: no-repeat;
}
/********************** Forms *********************************************************/
.textinput {
background-color: #2E7D9A;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
}
.button {
font-family: Arial, Helvetica, sans-serif;
color: #2E7D9A;
background-color: #EBEBEB;
margin-top: 5px;
}
</style>
</head>
<body>
<div id="MainHolder">
<div id="TOP"><img src="roundy-images/logo_02.jpg" alt="Loan Detective" width="119" height="150" /></div>
<div id="TOP-Message">Roundy Site Template from Empire Elements <br />
to fit 800x600 screen resolution</div>
<div id="TOP-Menu">
<p><a href="http://www.free-css.com/">home</a> <a href="http://www.free-css.com/">services</a> <a href="http://www.free-css.com/">search</a> <a href="http://www.free-css.com/">something else</a> <a href="http://www.free-css.com/">contact us</a></p>
</div>
<div id="TOP-SubMenu">
<p>Licenced under <a href="http://creativecommons.org/licenses/by-nc-sa/2.0/uk/">Creative Commons Attribution-Noncommercial-Share Alike 2.0 UK</a></p>
</div>
<div id="Content-Holder">
<div id="Content-Left">
<h3>Submenu</h3>
<a href="http://www.free-css.com/" class="submenu">Submenu</a> <a href="http://www.free-css.com/" class="submenu">Submenu</a> <a href="http://www.free-css.com/" class="submenu">Submenu</a> <a href="http://www.free-css.com/" class="submenu">Submenu</a> <a href="http://www.free-css.com/" class="submenu">Submenu</a> <a href="http://www.free-css.com/" class="submenu">Submenu</a> <a href="http://www.free-css.com/" class="submenu">Submenu</a>
<p>Integer nulla nulla, vulputate ac, mattis a, laoreet nec, dolor. Pellentesque commodo, quam ut dapibus varius, ante turpis rhoncus lacus, a iaculis dui sem et lectus. In hac habitasse platea dictumst. Nullam fermentum blandit nisi. Mauris ac libero. Proin sagittis. <a href="http://www.free-css.com/">Quisque ornare nulla vitae tellus.</a> <br />
<br />
Login:<br />
<input name="textfield" type="text" class="textinput" size="23" />
<br />
Pass:<br />
<input name="textfield" type="text" class="textinput" size="23" />
<br />
<input type="button" class="button" value=" Login " />
</p>
<img src="roundy-images/menu-left-BG-bottom.gif" width="143" height="10" class="BottomIMG" alt="Loan Detective"/></div>
<div id="Content-Right">
<div id="Banner">
<h2>BIG H2 title</h2>
<h3>smaller H3 title is here</h3>
</div>
<h4>Smaller H4 title is here</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vel quam. In at massa quis leo pretium mattis. Aliquam orci leo, tempus a, ultricies vitae, aliquet ac, sapien. Fusce quis est. In posuere varius tellus. Mauris magna tortor, mollis nec, euismod id, scelerisque sed, erat. Donec mollis consequat odio. Aliquam ligula. Pellentesque tristique aliquet orci. Vivamus purus urna, pellentesque sit amet, ornare id, congue mattis, quam. Phasellus eleifend, lacus at iaculis placerat, nisl velit adipiscing enim, at gravida odio lacus id enim. Donec lascinia sagittis felis. Sed eu orci. Integer et diam. Donec aliquet auctor dolor. Nullam rhoncus, urna at mattis ultrices, est metus malesuada arcu, vitae pulvinar diam felis id metus. Sed eu quam et sapien blandit aliquet.</p>
<div class="MarketMessage1">Class aptent taciti sociosqu ad litora torquent per conubia nostra</div>
<div id="ThreeSlopes">
<div id="SlopeOne">
<h4>Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vel quam. In at massa quis leo pretium mattis. Aliquam orci leo, tempus a, ultricies vitae, aliquet ac, sapien.</p>
<p><img src="roundy-images/e03.gif" alt="Story Title" width="16" height="9" /> <a href="http://www.free-css.com/">read more</a></p>
<img src="roundy-images/slope-bottom.gif" alt="Lorem ipsum dolor sit amet" width="180" height="9" /></div>
<div id="SlopeTwo">
<h4>Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vel quam. In at massa quis leo pretium mattis. Aliquam orci leo, tempus a, ultricies vitae, aliquet ac, sapien.</p>
<p><img src="roundy-images/e03.gif" alt="Story Title" width="16" height="9" /> <a href="http://www.free-css.com/">read more</a></p>
<img src="roundy-images/slope-bottom.gif" alt="Lorem ipsum dolor sit amet" width="180" height="9" /></div>
<div id="SlopeThree">
<h4>Lorem ipsum dolor sit amet</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vel quam. In at massa quis leo pretium mattis. Aliquam orci leo, tempus a, ultricies vitae, aliquet ac, sapien.</p>
<p><img src="roundy-images/e03.gif" alt="Story Title" width="16" height="9" /> <a href="http://www.free-css.com/">read more</a></p>
<img src="roundy-images/slope-bottom.gif" alt="Lorem ipsum dolor sit amet" width="180" height="9" /></div>
</div>
</div>
<div id="Footer">
<p>Copyright 2003-2006 © <a href="http://www.empire-elements.co.uk/">Professional web design services</a> by Empire Elements All rights reserved | <a href="http://validator.w3.org/check?uri=referer">Validation service</a></p>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category