book-store
<!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>Book Store</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com/
*/
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family: Verdana, Arial, san-serif;
font-size: 11px;
color: #ffffff;
background: #4b4743;
}
a:link, a:visited { color: #e6e154; text-decoration: none; font-weight: bold;}
a:active, a:hover { color: #e6e154; text-decoration: underline;}
p {
margin: 0px;
padding: 0px;
}
img {
margin: 0px;
padding: 0px;
border: none;
}
.cleaner {
clear: both;
width: 100%;
height: 1px;
font-size: 1px;
}
.cleaner_with_height {
clear: both;
width: 100%;
height: 30px;
font-size: 1px;
}
.cleaner_with_width {
float: left;
width: 20px;
height: 30px;
font-size: 1px;
}
.buy_now_button a{
clear: both;
text-align: center;
display: block;
width: 100px;
padding: 4px 0 5px 0;
margin-bottom: 10px;
background: url(book-store-images/btn_02.jpg) no-repeat;
color: #FFFFFF;
font-weight: bold;
text-decoration: none;
}
.detail_button a{
clear: both;
text-align: center;
display: block;
width: 100px;
padding: 4px 0 5px 0;
margin-bottom: 10px;
background: url(book-store-images/btn_01.jpg) no-repeat;
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
#container{
width: 960px;
margin: 0 auto;
padding: 0 10px;
background: #1c1c1b url(book-store-images/bg.jpg) repeat-y;
}
/* menu */
#menu {
clear: both;
width: 960px;
height: 45px;
background: url(book-store-images/menu_bg.jpg) no-repeat;
}
#menu ul {
padding: 13px 0 0 0;
margin: 0;
list-style: none;
}
#menu ul li{
display: inline;
}
#menu ul li a{
float: left;
padding: 0 20px;
font-size: 12px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #969547;
}
#menu li a:hover, #menu li .current{
color: #fcf88e;
}
/* end of menu*/
/* header */
#header {
clear: both;
width: 960px;
height: 285px;
padding: 0;
margin: 0;
background: url(book-store-images/header_bg.jpg) no-repeat;
}
#header a,a:hover {
color: #ffffff;
}
#header #special_offers {
float: left;
font-size: 14px;
margin-top: 95px;
margin-left: 490px;
width: 180px;
}
#special_offers a {
font-size: 12px;
}
#special_offers p {
margin: 0 0 20px 0;
}
#special_offers p span {
font-size: 18px;
}
#header #new_books {
float: left;
margin-top: 90px;
margin-left: 55px;
width: 180px;
}
#new_books ul {
margin: 0 0 10px 0;
padding: 0 0 0 20px;
}
#new_books li {
margin: 0;
padding: 0;
}
/* end of header */
/* content */
#content {
clear: both;
width: 920px;
padding: 0 20px;
}
#content #content_left {
float: left;
width: 188px;
padding: 10px;
background-color: #171716;
border: 1px solid #212120;
}
#content #content_right {
float: right;
width: 670px;
}
#content_left .content_left_section{
clear: both;
padding-bottom: 10px;
border-bottom: 1px solid #2b2b2a;
margin-bottom: 20px;
}
.content_left_section h1 {
font-size: 14px;
color: #cbc750;
padding: 0 0 5px 0;
margin: 0 0 10px 0;
border-bottom: 1px dotted #cbc750;
}
.content_left_section ul {
padding: 0;
margin: 0;
}
.content_left_section ul li{
padding: 0 0 3px 10px;
list-style: none;
}
.content_left_section ul li a{
font-weight: normal;
text-decoration: none;
color: #969547;
}
.content_left_section li a:hover, .content_left_section li .current{
color: #fcf88e;
}
#content_right .product_box {
float: left;
width: 303px;
height: 210px;
padding: 10px;
border: 1px solid #333;
}
#content_right h1 {
padding: 10px;
margin: 0 0 20px 0;
font-size: 15px;
color: #cbc750;
background: url(book-store-images/h1_bg.jpg);
}
#content_right h2 {
padding: 0 0 0 0;
margin: 0 0 20px 0;
font-size: 12px;
color: #e6e154;
}
#content_right h3 {
padding: 0;
margin: 0 0 20px 0;
font-size: 18px;
color: #85391f;
}
#content_right ul {
margin: 0 0 20px 0;
padding: 0 0 0 20px;
list-style: none;
}
#content_right li {
padding: 0 0 3px 0;
}
#content_right .image_panel {
float: left;
width: 100px;
margin-right: 20px;
}
#content_right p {
text-align: justify;
padding: 0 0 8px 0;
}
.product_box h1 span {
font-weight: normal;
}
.product_box img {
float: left;
margin-right: 20px;
}
.product_box .product_info {
float: left;
width: 180px;
}
.product_info p {
margin-bottom: 15px;
}
/* end of content */
/* footer */
#footer {
clear: both;
width: 960px;
padding: 20px 0px 20px 0;
text-align: center;
border-top: 1px solid #25211e;
color: #999;
background-color: #111110;
}
#footer a{
color: #fff;
font-weight: normal;
}
/* end of footer */
</style>
</head>
<body>
<div id="container">
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/" class="current">Home</a></li>
<li><a href="subpage.html">Product</a></li>
<li><a href="http://www.free-css.com/">Books</a></li>
<li><a href="http://www.free-css.com/">New Releases</a></li>
<li><a href="http://www.free-css.com/">Company</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
</div>
<!-- end of menu -->
<div id="header">
<div id="special_offers">
<p> <span>25%</span> discounts for purchase over $80 </p>
<a href="http://www.free-css.com/" style="margin-left: 50px;">Read more...</a> </div>
<div id="new_books">
<ul>
<li>Suspen disse</li>
<li>Maece nas metus</li>
<li>In sed risus ac feli</li>
</ul>
<a href="http://www.free-css.com/" style="margin-left: 50px;">Read more...</a> </div>
</div>
<!-- end of header -->
<div id="content">
<div id="content_left">
<div class="content_left_section">
<h1>Categories</h1>
<ul>
<li><a href="http://www.free-css.com/">Donec accumsan urna</a></li>
<li><a href="http://www.free-css.com/">Proin vulputate justo</a></li>
<li><a href="http://www.free-css.com/">In sed risus ac feli</a></li>
<li><a href="http://www.free-css.com/">Aliquam tristique dolor</a></li>
<li><a href="http://www.free-css.com/">Maece nas metus</a></li>
<li><a href="http://www.free-css.com/">Sed pellentesque placerat</a></li>
<li><a href="http://www.free-css.com/">Suspen disse</a></li>
<li><a href="http://www.free-css.com/">Maece nas metus</a></li>
<li><a href="http://www.free-css.com/">In sed risus ac feli</a></li>
</ul>
</div>
<div class="content_left_section">
<h1>Bestsellers</h1>
<ul>
<li><a href="http://www.free-css.com/">Vestibulum ullamcorper</a></li>
<li><a href="http://www.free-css.com/">Maece nas metus</a></li>
<li><a href="http://www.free-css.com/">In sed risus ac feli</a></li>
<li><a href="http://www.free-css.com/">Praesent mattis varius</a></li>
<li><a href="http://www.free-css.com/">Maece nas metus</a></li>
<li><a href="http://www.free-css.com/">In sed risus ac feli</a></li>
<li><a href="http://www.free-css.com/">Flash Templates</a></li>
<li><a href="http://www.free-css.com/">CSS Templates</a></li>
<li><a href="http://www.free-css.com/">Web Design</a></li>
<li><a href="http://www.free-css.com/">Free Photos</a></li>
</ul>
</div>
<div class="content_left_section"> <a href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="" width="88" height="31" vspace="8" border="0" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/book-store-images/vcss-blue" alt="" vspace="8" border="0" /></a> </div>
</div>
<!-- end of content left -->
<div id="content_right">
<div class="product_box">
<h1>Photography <span>(by Best Author)</span></h1>
<img src="book-store-images/image_01.jpg" alt="" />
<div class="product_info">
<p>Etiam luctus. Quisque facilisis suscipit elit. Curabitur...</p>
<h3>$55</h3>
<div class="buy_now_button"><a href="http://www.free-css.com/">Buy Now</a></div>
<div class="detail_button"><a href="http://www.free-css.com/">Detail</a></div>
</div>
<div class="cleaner"> </div>
</div>
<div class="cleaner_with_width"> </div>
<div class="product_box">
<h1>Cooking <span>(by New Author)</span></h1>
<img src="book-store-images/image_02.jpg" alt="" />
<div class="product_info">
<p>Aliquam a dui, ac magna quis est eleifend dictum.</p>
<h3>$35</h3>
<div class="buy_now_button"><a href="http://www.free-css.com/">Buy Now</a></div>
<div class="detail_button"><a href="http://www.free-css.com/">Detail</a></div>
</div>
<div class="cleaner"> </div>
</div>
<div class="cleaner_with_height"> </div>
<div class="product_box">
<h1>Gardening <span>(by Famous Author)</span></h1>
<img src="book-store-images/image_03.jpg" alt="" />
<div class="product_info">
<p>Ut fringilla enim sed turpis. Sed justo dolor, convallis at.</p>
<h3>$65</h3>
<div class="buy_now_button"><a href="http://www.free-css.com/">Buy Now</a></div>
<div class="detail_button"><a href="http://www.free-css.com/">Detail</a></div>
</div>
<div class="cleaner"> </div>
</div>
<div class="cleaner_with_width"> </div>
<div class="product_box">
<h1>Sushi Book <span>(by Japanese Name)</span></h1>
<img src="book-store-images/image_04.jpg" alt="" />
<div class="product_info">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<h3>$45</h3>
<div class="buy_now_button"><a href="http://www.free-css.com/">Buy Now</a></div>
<div class="detail_button"><a href="http://www.free-css.com/">Detail</a></div>
</div>
<div class="cleaner"> </div>
</div>
<div class="cleaner_with_height"> </div>
<a href="http://www.free-css.com/"><img src="book-store-images/ads.jpg" alt="ads" /></a> </div>
<!-- end of content right -->
<div class="cleaner_with_height"> </div>
</div>
<!-- end of content -->
<div id="footer"> <a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">Search</a> | <a href="http://www.free-css.com/">Books</a> | <a href="http://www.free-css.com/">New Releases</a> | <a href="http://www.free-css.com/">FAQs</a> | <a href="http://www.free-css.com/">Contact Us</a><br />
Copyright © 2024 <a href="http://www.free-css.com/"><strong>Your Company Name</strong></a> | Designed by <a href="http://www.templatemo.com">Free CSS Templates</a> </div>
<!-- end of footer -->
</div>
<!-- end of container -->
</body>
</html>
Related examples in the same category