fruitopia
<!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>Fruitopia</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/*
Copyright: Darren Hester 2006, http://www.designsbydarren.com
License: Released Under the "Creative Commons License",
http://creativecommons.org/licenses/by-nc/2.5/
*/
body {
text-align: center;
background: #F4FDE5 url('fruitopia-img/bg.jpg') top center no-repeat fixed;
margin-top:10px;
margin-bottom:10px;
}
A:link {
COLOR: #FF6600; text-decoration: none
}
A:visited {
COLOR: #FF6600; text-decoration: none
}
A:active {
COLOR: #FF6600; text-decoration: none
}
A:hover {
COLOR: #FF6600; text-decoration: underline
}
#page_wrapper {
margin-left: auto;
margin-right: auto;
width: 760px;
text-align: left;
background: #FFFFFF url('fruitopia-img/content_bg.jpg') top right repeat-y;
border: 1px solid #018843;
}
#page_header {
height: 120px;
background: #9ACD34 url('fruitopia-img/header.jpg') top right no-repeat;
clear: both;
}
#page_header h1 {
margin: 0px;
padding-top:30px;
padding-left:25px;
font-family: verdana, arial, sans-serif;
font-size:32px;
font-weight: bold;
letter-spacing: -1px;
color: #FFFFFF;
}
#page_header h2 {
margin: 0px;
padding-left:25px;
font-family: verdana, arial, sans-serif;
font-size:13px;
font-weight: bold;
letter-spacing: 2px;
color: #018843;
}
#menu_bar {
height:40px;
background: #FFFFFF url('fruitopia-img/drop_shadow.gif') top left repeat-x;
clear: both;
}
#menu_bar ul {
margin-top: 0px;
padding-left: 0px;
margin-left: 0px;
background: #FF6600 url('fruitopia-img/menu_bg.gif') top left repeat-x;
color: White;
float: left;
width: 100%;
font-family: verdana, arial, sans-serif;
font-size:14px;
font-weight: bold;
}
#menu_bar ul li { display: inline; }
#menu_bar ul li a
{
padding-top:5px;
padding-bottom:5px;
padding-left:15px;
padding-right:15px;
background: #FF6600 url('fruitopia-img/menu_bg.gif') top left repeat-x;
color: #EFEFEF;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}
#menu_bar ul li a:hover
{
background: #FF6600 url('fruitopia-img/menu_hover_bg.gif') top left repeat-x;
color: #FFFFFF;
}
#content_wrapper {
margin-top:10px;
margin-bottom:0px;
margin-left:15px;
margin-right:15px;
clear:both;
}
#right_side {
margin-top:5px;
float: right;
width:160px;
border:0px dashed #cccccc;
}
#right_side h3 {
margin-top:0px;
margin-bottom:10px;
font-family: verdana, arial, sans-serif;
font-size: 14px;
color: #FF6600;
padding:4px;
border: 1px solid #AAE5A4;
background-color:#F4FDE5;
}
#right_side p {
margin-top:0px;
margin-bottom:15px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #666666;
line-height: 16px;
padding-left:4px;
}
#left_side {
float: left;
width:540px;
background-color: #FFFFFF;
border:0px dashed #cccccc;
}
#left_side h3 {
margin-top:0px;
margin-bottom:10px;
font-family: verdana, arial, sans-serif;
font-size: 18px;
color: #FF6600;
background-color:#FFFFFF;
padding:4px;
border-bottom: 1px solid #018843;
clear:both;
}
#left_side p {
margin-top:0px;
margin-bottom:15px;
font-family: verdana, arial, sans-serif;
font-size: 12px;
color: #666666;
line-height: 18px;
padding-left:4px;
}
.float_left {
float: left;
margin-right: 10px;
}
.float_right {
float: right;
margin-left: 10px;
}
#feature_box {
float:left;
width:250px;
background-color: #F6FCEC;
border:1px solid #AAE5A4;
padding:10px;
margin-top:10px;
margin-bottom:5px;
margin-right:8px;
}
#feature_box h4 {
padding-left:5px;
margin-top:0px;
margin-bottom:5px;
font-family: verdana, arial, sans-serif;
font-size: 12px;
color: #779E28;
}
#feature_box p {
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #555555;
line-height: 16px;
margin-bottom:5px;
}
#page_footer {
height: 60px;
background-color: #99CC33;
clear: both;
}
#page_footer p {
padding-top:18px;
text-align: center;
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #FFFFFF;
letter-spacing:1px;
}
#spacer {
height:20px;
clear:both;
}
.arrow_list {
margin-left: 10px;
padding-left: 0;
list-style: none;
}
.arrow_list li {
padding-left: 10px;
background-image: url(fruitopia-img/arrow.gif);
background-repeat: no-repeat;
background-position: 0 7px;
font-family: verdana, arial, sans-serif;
font-size: 11px;
line-height:18px;
}
</style>
</head>
<body>
<div id="page_wrapper">
<div id="page_header">
<h1>Fruitopia</h1>
<h2>Free 2-Column CSS Web Design Template</h2>
</div>
<div id="menu_bar">
<ul>
<li><a href="http://www.free-css.com/">Item one</a></li>
<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 id="content_wrapper">
<div id="left_side">
<h3>Ne Modo Quas Appareat Meat Repudiare</h3>
<img src="fruitopia-img/strawberries.jpg" class="float_right" alt="" />
<p><a href="http://www.free-css.com/">Lorem ipsum te invenire</a> assentior usu, viderer accusamus elaboraret te quo, usu at quas mutat. <a href="http://www.free-css.com/"> At vivendum adipiscing nec</a>, nec sale pericula ullamcorper ea. Veritus adolescens expetendis vim at, tollit scripta usu eu. Sea debet commune iracundia in. Sea no posse corrumpit, te elit aperiri forensibus nam.Diam persequeris has ut. <a href="http://www.free-css.com/">Dolorum</a> volumus splendide cu mei, cu eros aliquyam praesent ius. Vix invidunt voluptaria no, no cum dicat dolor. Ex ius aliquid eleifend, ei has lorem viderer eripuit. </p>
<div id="feature_box">
<h4>Feature Box</h4>
<p>Quas facilisi persecuti cum eu, ad qui vidit denique instructior. At stet volumus usu. Ne modo quas appareat mea, et ius salutandi quaerendum sadipscing, ad aperiam <a href="http://www.free-css.com/">invenire interpretaris mei</a>. </p>
</div>
<p>Prodesset reprimique pri ut, in elitr debitis persecuti sit, dolores propriae suscipiantur pri ad. <a href="http://www.free-css.com/">Melius nonummy facilis</a> per no. Duo et adipisci vituperata, mea semper nusquam mediocritatem at, eos saperet vulputate ullamcorper te. Aperiam legendos ut eos, et sit inani propriae iudicabit, ea iusto habemus volumus vis.Pro at possit dissentias, <a href="http://www.free-css.com/">tale oratio</a> takimata ad vis. Vis an probo nemore sensibus, menandri similique no duo. Pro ea audire appareat adipiscing, tibique copiosae deseruisse no ius. Per patrioque consectetuer an, simul repudiare delicatissimi ei eum. Alii quando dolore id sit. </p>
<h3>Per Patrioque Consectetuer An Simul</h3>
<p><a href="http://www.free-css.com/">Per noster accusata</a> mandamus an, facer partem definitionem eam ea. Vix inermis repudiare in, <a href="http://www.free-css.com/">deleniti</a> maluisset rationibus sea te. <a href="http://www.free-css.com/">Vis ne sale</a> partiendo persequeris. Vis ei autem reformidans conclusionemque. Dicta summo vix ea. </p>
<p>Prodesset reprimique pri ut, in elitr debitis persecuti sit, dolores propriae suscipiantur pri ad. <a href="http://www.free-css.com/">Melius nonummy facilis</a> per no. Duo et adipisci vituperata. Pro at possit dissentias, <a href="http://www.free-css.com/"> tale oratio</a> takimata ad vis. Vis an probo nemore sensibus, menandri similique no duo. </p>
<p><a href="http://www.free-css.com/">Prodesset reprimique</a> pri ut, in elitr debitis persecuti sit, dolores propriae suscipiantur pri ad. Melius nonummy facilis per no. Duo et adipisci vituperata, mea semper nusquam mediocritatem at. </p>
<ul class="arrow_list">
<li><a href="http://www.free-css.com/">Melius nonummy facilis per no.</a></li>
<li><a href="http://www.free-css.com/">Aperiam legendos ut eos, et sit inani propriae iudicabit.</a></li>
<li><a href="http://www.free-css.com/">Prodesset reprimique pri ut, in elitr debitis persecuti sit.</a></li>
</ul>
</div>
<div id="right_side">
<h3>Vis Sale Tiendo</h3>
<p>Per noster accusata <a href="http://www.free-css.com/">mandamus</a> an, facer partem definitionem eam ea. Vix inermis repudiare in, <a href="http://www.free-css.com/">deleniti</a> maluisset rationibus sea te. Vis ne sale partiendo persequeris. Vis ei autem reformidans conclusionemque. </p>
<h3>Per Nost Accusata</h3>
<ul class="arrow_list">
<li><a href="http://www.free-css.com/">Item one</a></li>
<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>
<p><a href="http://www.free-css.com/">Per noster accusata mandamus</a> an, facer partem definitionem eam ea. Vix inermis repudiare in, deleniti maluisset rationibus sea te. Vis ne sale partiendo persequeris. Vis ei autem <a href="http://www.free-css.com/">reformidans</a> conclusionemque. </p>
<h3>Menandri Similique</h3>
<p>Prodesset reprimique pri ut, in elitr debitis persecuti sit, dolores propriae suscipiantur pri ad. <a href="http://www.free-css.com/">Melius nonummy facilis</a> per no. Duo et adipisci vituperata, mea semper nusquam mediocritatem at, eos saperet vulputate ullamcorper te. Aperiam legendos ut eos, et sit inani propriae iudicabit, ea iusto habemus volumus. </p>
</div>
<div id="spacer"></div>
</div>
<div id="page_footer">
<p>© 2006 Darren Hester, <a href="http://www.designsbydarren.com/">DesignsByDarren.com</a>, Some Rights Reserved.<br />
<a target="_blank" href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0 Transitional</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category