lusciouscandy
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Luscious Candy</title>
<style type='text/css'>
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #666666;
background-color: #FFFFFF;
font-size: 12px;
background-image:url(lusciouscandy-images/bg-tile.gif);
background-repeat:repeat;
}
.wrapper {
width: 782px;
margin: 0 auto;
}
#border {
border: 1px solid #8ECE5F;
margin: 20px 0px 5px 0px;
background-color: #fff;
min-height: 776px;
float: right;
width: 780px;
}
* html #border {height:776px} /* IE Min-Height Hack */
/* ------------------------ Start Header -----------------*/
.header {
text-align: center;
margin: 6px 0px 0px 0px;
}
/* ------------------------ End Header -----------------*/
/* ------------------------ Start Navigation Bar -----------------*/
#nav-bar {
color: #fff;
font-weight: bold;
margin: 8px 0px 0px 6px;
background-image: url(lusciouscandy-images/nav-bar.gif);
background-repeat: no-repeat;
height: 21px;
padding: 5px 0px 0px 10px;
}
/* ------------------------ End Navigation Bar -----------------*/
/* ------------------------ Start Images -----------------*/
img {
display: inline;
border: none;
}
img.block {
display: block;
}
img.float {
float: left;
margin: 0px 14px 10px 0px;
}
/* ------------------------ End Images -----------------*/
/* ------------------------ Start Main Columns -----------------*/
#leftcolumn { /* Parent Wrapper for inside boxes */
margin: 6px 0px 0px 4px;
display: inline; /* IE Hack */
width: 240px;
float: left;
background-image:url(lusciouscandy-images/search-box.gif);
background-repeat: no-repeat;
min-height: 300px;
padding: 0;
}
* html #leftcolumn {height:300px} /* IE Min-Height Hack */
.leftcolumn-inner { /* Parent Wrapper for inside boxes */
display: inline; /* IE Hack */
width: 220px;
float: left;
background-image:url(lusciouscandy-images/search-box.gif);
background-repeat: no-repeat;
min-height: 40px;
padding: 10px;
margin-bottom: 7px;
}
* html .leftcolumn-inner {height:40px} /* IE Min-Height Hack */
.in-the-news { /* Parent Wrapper for inside boxes */
display: inline; /* IE Hack */
width: 235px;
float: left;
min-height: 125px;
margin-bottom: 7px;
}
* html .in-the-news {height:125px} /* IE Min-Height Hack */
#rightcolumn {
/* border: 1px solid red;*/
margin: 6px 0px 0px 0px;
display: inline; /* IE Hack */
width: 513px;
float: left;
min-height: 300px;
}
* html #rightcolumn {height:300px} /* IE Min-Height Hack */
.sponsor {
background-image:url(lusciouscandy-images/sponsor.gif);
min-height: 80px;
background-repeat: no-repeat;
text-align: center;
padding: 15px 10px 10px 13px;
display: inline; /* IE Hack */
float: left;
width: 510px;
}
* html .sponsor {height:80px} /* IE Min-Height Hack */
.maincontent {
min-height: 80px;
display: inline; /* IE Hack */
float: left;
margin-bottom: 7px;
width: 530px;
}
* html .maincontent {height:80px} /* IE Min-Height Hack */
.content-mid {
background-image:url(lusciouscandy-images/content-mid.gif);
background-repeat: repeat;
padding: 5px 14px 5px 14px;
}
.left-mid {
background-image:url(lusciouscandy-images/left-mid.gif);
background-repeat: repeat;
padding: 5px 14px 10px 14px;
}
.left-heading {
background-image:url(lusciouscandy-images/left-heading.gif);
background-repeat: no-repeat;
padding: 9px 14px 5px 10px;
font-size: 16px;
color: #fff;
min-height: 11px;
font-weight: bold;
}
* html .left-heading {height:11px} /* IE Min-Height Hack */
/* ------------------------ End Main Columns -----------------*/
/* ------------------------- Start Headings ---------------------*/
h1 {
font-size: 16px;
color: #72C236;
}
/* ------------------------- End Headings ---------------------*/
input {
border: 1px solid #8ECE5F;
width: 200px;
}
#footer {
font-size: 10px;
clear: both;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin-bottom: 5px;
}
#nav-bar li {
list-style: none;
}
ul#daily-links li {
list-style: none;
margin-left: 2px;
}
ul#nav-links li {
display: inline;
margin-left: 0px;
padding-left: 12px;
}
ul#daily-links li a:link{
color: #333;
text-decoration: none;
font-weight: bold;
}
ul#daily-links li a:visited{
color: #333;
text-decoration: none;
font-weight: bold;
}
ul#daily-links li a:hover{
color: #999;
text-decoration: none;
font-weight: bold;
}
#nav-bar a:link {
color: #fff;
text-decoration: none;
}
#nav-bar a:visited {
color: #fff;
text-decoration: none;
}
#nav-bar a:hover {
color: #fff;
text-decoration: none;
}
a:link {
color: #006600;
text-decoration: none;
}
a:visited {
color: #006600;
text-decoration: none;
}
.valid {
margin: 10px 0px 0px 10px;
}
</style>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>
<div class="wrapper">
<!-- Start Border-->
<div id="border">
<!-- Start Header -->
<div class="header"> <img src="lusciouscandy-images/header.gif" alt="Header" /> </div>
<!-- End Header -->
<!-- Start Navigation Bar -->
<div id="nav-bar">
<ul>
<li><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/">Portfolio</a> <a href="http://www.free-css.com/">Our Team</a> <a href="http://www.free-css.com/">Location</a> <a href="http://www.free-css.com/">Special Offers</a> <a href="http://www.free-css.com/">News</a></li>
</ul>
</div>
<!-- End Navigation Bar -->
<!-- Start Left Column -->
<div id="leftcolumn">
<!-- Start Left Column Inner -->
<div class="leftcolumn-inner">
<h1>Search</h1>
<form action="#" method="post">
<p>
<input name="search" id="search" />
</p>
</form>
</div>
<!-- End Left Column Inner -->
<!-- Start Box -->
<div class="in-the-news">
<div class="left-heading"> In the News </div>
<div class="left-mid"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</div>
<div class="content-bottom"> <img src="lusciouscandy-images/left-bottom.gif" class="block" alt="" /> </div>
</div>
<!-- End Box -->
<!-- Start Box -->
<div class="in-the-news">
<div class="left-heading"> What's Happening? </div>
<div class="left-mid"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</div>
<div class="content-bottom"> <img src="lusciouscandy-images/left-bottom.gif" class="block" alt="" /> </div>
</div>
<!-- End Box -->
<!-- Start Box -->
<div class="in-the-news">
<div class="left-heading">Feature Categories</div>
<div class="left-mid">
<ul id="daily-links">
<li><a href="http://www.free-css.com/">Link</a></li>
<li><a href="http://www.free-css.com/">Link</a></li>
<li><a href="http://www.free-css.com/">Wicked Fire</a></li>
<li><a href="http://www.free-css.com/">Code Sucks</a></li>
<li><a href="http://www.free-css.com/">Link</a></li>
<li><a href="http://www.free-css.com/">Link</a></li>
<li><a href="http://www.free-css.com/">CSS Beauty</a></li>
</ul>
</div>
<div class="content-bottom"> <img src="lusciouscandy-images/left-bottom.gif" class="block" alt="" /> </div>
<p> <a href="http://jigsaw.w3.org/css-validator/"> <img class="valid"
src="http://jigsaw.w3.org/css-validator/lusciouscandy-images/vcss"
alt="Valid CSS!" style="border:0;width:88px;height:31px" /></a> <a href="http://validator.w3.org/check?uri=referer"><img
class="valid" src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a> </p>
</div>
<!-- End Box -->
</div>
<!-- End Left Column -->
<!-- Start Right Column -->
<div id="rightcolumn">
<!-- Start Sponsor Ads Box -->
<div class="sponsor"> Sponsors Here </div>
<!-- End Sponsor Ads Box -->
<!-- Start Main Content -->
<div class="maincontent">
<div class="content-top"> <img src="lusciouscandy-images/content-top.gif" class="block" alt="" /> </div>
<div class="content-mid">
<h1>Here, There and Everywhere</h1>
<img src="lusciouscandy-images/small-pic.gif" class="float" alt="Picture" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostris nostrud e xercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolois nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in </div>
<div class="content-bottom"> <img src="lusciouscandy-images/content-bottom.gif" class="block" alt="" /> </div>
</div>
<!-- End Main Content -->
<div class="maincontent">
<div class="content-top"> <img src="lusciouscandy-images/content-top.gif" class="block" alt="" /> </div>
<div class="content-mid">
<h1>Here, There and Everywhere</h1>
<img src="lusciouscandy-images/small-pic.gif" class="float" alt="Picture" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostris nostrud e xercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolois nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in </div>
<div class="content-bottom"> <img src="lusciouscandy-images/content-bottom.gif" class="block" alt="" /> </div>
</div>
<!-- End Main Content -->
<!-- Start Main Content -->
<div class="maincontent">
<div class="content-top"> <img src="lusciouscandy-images/content-top.gif" class="block" alt="" /> </div>
<div class="content-mid">
<h1>Here, There and Everywhere</h1>
<img src="lusciouscandy-images/small-pic.gif" class="float" alt="Picture" /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostris nostrud e xercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolois nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in </div>
<div class="content-bottom"> <img src="lusciouscandy-images/content-bottom.gif" class="block" alt="" /> </div>
<div style="display: block; clear: left; margin: -0.66em 0; visibility: hidden;"> HACK </div>
</div>
<!-- End Main Content -->
</div>
<!-- End Right Column -->
</div>
<!-- End Border -->
<!-- Start Footer -->
<div id="footer"> © Copyright with <a href="http://www.code-sucks.com/">Code-sucks.com</a> 2006 </div>
<!-- End Footer -->
</div>
</body>
</html>
Related examples in the same category