bermuda01
<!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>Bermuda 01</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
background-color: #4A4237;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}
* {
margin: 0px;
padding: 0px;
}
html {height:100%; margin-bottom:1px;} /* Forces vertical scroll bar to be visible */
#wrapper {
width: 700px;
margin-right: auto;
margin-left: auto;
background-image: url(bermuda01-images/column.jpg);
background-repeat: repeat-y;
text-align: left;
background-color: #FFFFFF;
}#logo {
background-image: url(bermuda01-images/logo.jpg);
background-repeat: repeat-x;
height: 130px;
width: 700px;
}
#mainphoto {
background-image: url(bermuda01-images/main_photo.jpg);
height: 248px;
width: 700px;
}
#nav {
background-color: #775d42;
padding-top: 10px;
padding-bottom: 5px;
padding-left: 15px;
}
#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
text-transform: capitalize;
}
#navlist a {
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 15px;
font-weight: bolder;
}
#navlist a:hover {
color: #AF9981;
}
#shadow {
height: 17px;
width: 700px;
background-image: url(bermuda01-images/shadow.jpg);
background-repeat: no-repeat;
}
#col1 {
float: left;
width: 500px;
}
#col2 {
float: left;
width: 200px;
}
#col1content p {
margin-bottom: 10px;
color: #666666;
font-size: 12px;
line-height: 140%;
text-align: justify;
}
#col1content {
padding: 0px 15px 15px;
}
#footer {
clear: both;
height: 20px;
width: 700px;
background-image: url(bermuda01-images/footer.jpg);
}
#col2content {
padding: 15px;
text-align: center;
}
.imageborder {
padding: 5px;
border: 1px solid #3A4A14;
background-color: #F2F3F4;
}
.subhead {
font-size: 11px;
color: #78442C;
margin-top: 5px;
margin-bottom: 5px;
}
.sidebar {
margin-bottom: 10px;
color: #666666;
font-size: 10px;
line-height: 140%;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 36px;
color: #DAD6CF;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
}
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
color: #B4AA9E;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 15px;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 20px;
color: #B4AA9E;
padding-bottom: 10px;
padding-top: 5px;
}
#footer p {
color: #EEEBE8;
font-size: 9px;
padding-top: 2px;
padding-bottom: 3px;
padding-left: 15px;
}
a:link {
color:#0059b4;
text-decoration: none;
}
a:visited {
color:#0059b4;
text-decoration: none;
}
a:hover {
color:#0059b4;
text-decoration: underline;
}
a:active { color:#0059b4;}
</style>
</head>
<body>
<div id="wrapper">
<div id="logo">
<h1>Trott & Co</h1>
<h2>Architects :: Designers</h2>
</div>
<div id="mainphoto"></div>
<div id="nav">
<ul id="navlist">
<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/">Our Services</a></li>
<li><a href="http://www.free-css.com/">Why Bermuda?</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<!-- end nav -->
<div id="shadow"></div>
<div id="col1">
<div id="col1content">
<h3>Welcome</h3>
<p>This is my first submission to oswd and I sincerly hope you like it. Should work fine in all browsers (tested in IE 6, Opera 8, Firefox and Netscape 6.1). Validates as XHTML 1.0 Transitional.</p>
<p>Photos are from stock.xchng. The layout is simple and very easy to modify. Open the layout.png file in a graphics program such as Fireworks and slot your own image in to replace the one I have used. To get it looking really great you should pick up some of the colours in your picture and use them for the header, right column, background, navigation bar and footer. Use the colour picker and just pick colours from your picture until you get the look you are after.</p>
<p>File size is quite small. Total size of the graphic elements used is around 16K. The html and css files are under 3K. In other words it loads FAST. </p>
<p>Another example of the the template can be found <a href="http://www.free-css.com/">here</a>. This uses graphics for the company name and headings (rather than text). </p>
<p>Feel free to use the design. All I ask is that you keep the link to my site in the footer OR link to my site from your links page using one of the links found on this page.</p>
<p> Would love to see what you do with it. Email me and tell me about any sites that use it. </p>
<p>Take care and good luck. David Mottershead.</p>
</div>
</div>
<!-- end col1 -->
<div id="col2">
<div id="col2content">
<p><img src="bermuda01-images/woman2.jpg" alt="" class="imageborder" /></p>
<p class="subhead">Profile: Mena Trott</p>
<p class="sidebar">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. </p>
</div>
<!-- end col2content -->
</div>
<!-- end col2 -->
<div id="footer">
<p>Design by YOU | Layout by <a href="http://www.bermuda4u.com/">Bermuda 4u</a></p>
</div>
</div>
<!-- end wrapper -->
</body>
</html>
Related examples in the same category