Jewerly-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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Jewelry Shop</title>
<style type='text/css'>
body
{
background:url(Jewerly-Store-images/bg.jpg) repeat-x top #fff;
font-family:Arial, Helvetica, sans-serif;
padding:0;
font-size:12px;
margin:0px auto auto auto;
color:#000000;
}
a{
color:#d81e7a;
}
.clear{
clear:both;
}
p{
padding:5px 0 5px 0;
margin:0px;
text-align:justify;
line-height:19px;
}
p.details{
padding:5px 15px 5px 15px;
font-size:11px;
}
p.details_cart{
clear:both;
padding:25px 30px 5px 0px;
font-size:11px;
font-style:italic;
}
p.more_details{
padding:25px 20px 0px 20px;
font-size:11px;
}
#wrap{
width:900px;
height: auto;
margin:auto;
background-color:#FFFFFF;
}
.header{
width:900px;
height:181px;
background:url(Jewerly-Store-images/header.jpg) no-repeat center;
}
.logo{
padding:30px 0 0 20px;
}
/*-----------------------------menu-------------------*/
#menu{
width:628px;
height:30px;
float:left;
padding:3px 0 0 10px;
}
#menu ul{
display:block;
list-style:none;
padding:9px 0 0 10px;
margin:0px;
}
#menu ul li{
display:inline;
padding:0px;
margin:0px;
height:20px;
}
#menu ul li a{
height:27px;
display:block;
padding:0px 10px 0 10px;
margin:0 4px 0 4px;
_margin:0 2px 0 2px;
float:left;
text-decoration:none;
text-align:center;
color:#37728e;
font-size:13px;
line-height:25px;
}
#menu ul li.selected a{
height:27px;
display:block;
padding:0px 10px 0 10px;
margin:0 5px 0 5px;
float:left;
text-decoration:underline;
text-align:center;
color:#37728e;
font-size:13px;
line-height:25px;
}
#menu ul li a:hover{
color:#37728e;
text-decoration:underline;
}
/*----------------crumb_nav------------------*/
.crumb_nav{
padding:5px 0 10px 0px;
}
.crumb_nav a{
color:#ee4699;
}
span.red{
color:#42b1e5;
}
.price{
font-size:14px;
padding:0 0 0 15px;
margin:2px 0 5px 0;
}
span.colors{
padding:2px 2px 0 2px;
}
/*------------------------------------center content--------------------*/
.center_content{
width:900px;
padding:0px 0 0 0;
background:url(Jewerly-Store-images/center_bg.gif) no-repeat center top;
}
.left_content{
width:490px;
float:left;
padding:20px 0 20px 20px;
}
.right_content{
width:370px;
float:left;
padding:20px 0 20px 20px;
}
.title{
color:#ee4699;
padding:0px;
float:left;
font-size:19px;
margin:10px 0 10px 0;
}
span.title_icon{
float:left;
padding:0 5px 0 0;
}
.prod_title{
color:#42b1e5;
padding:5px 0 0 15px;
font-size:13px;
}
a.more{
font-style:italic;
color:#42b1e5;
float:right;
text-decoration:none;
font-size:11px;
padding:0px 15px 0 0 ;
}
.about{
width:337px;
clear:both;
background:url(Jewerly-Store-images/border.gif) no-repeat bottom center;
padding:0 0 40px 0;
}
img.right{
float:right;
padding:0 0 0 30px;
}
.right_box{
width:170px;
float:left;
padding:10px 0 0 0;
}
/*--------feat_prod_box-----------*/
.feat_prod_box{
padding:10px 0 10px 10px;
margin:0 20px 20px 0;
border-bottom:1px #b2b2b2 dashed;
clear:both;
}
.feat_prod_box_details{
padding:10px 0 10px 0;
margin:0 20px 10px 0;
clear:both;
}
.prod_img{
float:left;
padding:0 5px 0 0;
text-align:center;
}
.prod_det_box{
width:295px;
float:left;
padding:0 0 0 25px;
position:relative;
}
.box_top{
width:295px;
height:9px;
background:url(Jewerly-Store-images/box_top.gif) no-repeat center bottom;
}
.box_center{
width:295px;
height:auto;
background:url(Jewerly-Store-images/box_center.gif) repeat-y center;
}
.box_bottom{
width:295px;
height:9px;
background:url(Jewerly-Store-images/box_bottom.gif) no-repeat center top;
}
.new_prod_box{
float:left;
text-align:center;
padding:10px;
}
.new_prod_box a{
padding:5px 0 5px 0;
color:#b5b5b6;
text-decoration:none;
display:block;
}
.new_prod_bg{
width:132px;
height:119px;
text-align:center;
background:url(Jewerly-Store-images/new_prod_box.gif) no-repeat center;
position:relative;
}
.new_icon{
position:absolute;
top:0px;
right:0px;
z-index:200;
}
.special_icon{
position:absolute;
top:0px;
_top:6px;
right:2px;
z-index:250;
}
img.thumb{
padding:10px 0 0 0;
}
.new_products{
clear:both;
padding:0px;
}
ul.list{
clear:both;
padding:10px 0 0 20px;
margin:0px;
}
ul.list li{
list-style:none;
padding:2px 0 2px 0;
}
ul.list li a{
list-style:none;
text-decoration:none;
color:#000000;
background:url(Jewerly-Store-images/left_menu_bullet.gif) no-repeat left;
padding:0 0 0 17px;
}
ul.list li a:hover{
text-decoration:underline;
}
/* demo */
div.demolayout {
width:460px;
margin: 0 0 20px 0;
}
ul.demolayout {
list-style-type: none;
float: left;
margin:0px;
padding:0px;
}
ul.demolayout li {
margin: 0 10px 0 0;
float: left;
}
.tab{
border:1px #DFDFDF solid;
padding:0 0 25px 0;
}
ul.demolayout a {
float: left;
display: block;
padding: 5px 25px;
border: 1px solid #DFDFDF;
border-bottom: 0;
color: #666;
background: #eee;
text-decoration: none;
font-weight: bold;
}
ul.demolayout a:hover {
background: #fff;
}
ul.demolayout a.active {
background: #fff;
padding-bottom: 5px;
cursor: default;
color:#ee4699;
}
.tabs-container {
clear: left;
padding:0px;
}
/*-----------------------languages_box---------*/
.languages_box{
padding:0 0 5px 0;
float:left;
}
.languages_box a{
padding:0 2px 0 2px;
}
.languages_box a.selected{
padding:2px 2px 0 2px;
border:1px #CCCCCC solid;
}
.currency{
float:left;
padding:0 0 0 20px;
}
.currency a{
text-decoration:none;
color:#333333;
padding:3px;
border:1px #eeedee solid;
}
.currency a.selected{
text-decoration:none;
color:#fff;
padding:3px;
border:1px #eeedee solid;
background-color:#1ca8e9;
font-weight:bold;
}
.currency a:hover{
border:1px #990000 solid;
}
/*------------------------cart---------------------*/
.cart{
width:337px;
float:left;
height:40px;
margin:10px 0 10px 0;
background:url(Jewerly-Store-images/border.gif) no-repeat bottom center;
padding:0 0 40px 0;
}
.home_cart_content{
float:left;
padding:3px;
border:1px #eeedee solid;
margin:10px 0 0 15px;
}
a.view_cart{
display:block;
float:left;
margin:12px 0 0 10px;
color:#ee4699;
}
/*---------------contact_form------------------*/
.contact_form{
width:355px;
float:left;
padding:25px;
margin:20px 0 0 15px;
_margin:20px 0 0 5px;
border:1px #DFD1D2 dashed;
position:relative;
}
.form_row{
width:335px;
_width:355px;
clear:both;
padding:10px 0 10px 0;
_padding:5px 0 5px 0;
color:#a53d17;
}
label.contact{
width:75px;
float:left;
font-size:12px;
text-align:right;
padding:4px 5px 0 0;
color: #333333;
}
input.contact_input{
width:253px;
height:18px;
background-color:#fff;
color:#999999;
border:1px #DFDFDF solid;
float:left;
}
textarea.contact_textarea{
width:253px;
height:120px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color: #999999;
background-color:#fff;
border:1px #DFDFDF solid;
float:left;
}
input.register{
width:71px;
height:25px;
border:none;
cursor:pointer;
text-align:center;
float:right;
color:#FFFFFF;
background:url(Jewerly-Store-images/register_bt.gif) no-repeat center;
}
a.contact{
width:53px;
height:24px;
display:block;
float:right;
margin:0 0 0 10px;
background:url(Jewerly-Store-images/contact_bt.gif) no-repeat center;
text-decoration:none;
text-align:center;
line-height:24px;
color:#fff;
}
a.checkout{
width:71px;
height:25px;
display:block;
float:right;
margin:10px 30px 0 10px;
background:url(Jewerly-Store-images/register_bt.gif) no-repeat center;
text-decoration:none;
text-align:center;
line-height:25px;
color:#fff;
}
a.continue{
width:71px;
height:25px;
display:block;
float:left;
margin:10px 0 0 0px;
background:url(Jewerly-Store-images/register_bt.gif) no-repeat center;
text-decoration:none;
text-align:center;
line-height:25px;
color:#fff;
}
.terms{
padding:0 0 0 80px;
}
.form_subtitle{
position:absolute;
top:-11px;
left:7px;
width:auto;
height:20px;
background-color:#d81e7a;
text-align:center;
padding:0 7px 0 7px;
color:#FFFFFF;
font-size:11px;
line-height:20px;
}
/*--------------cart_table-------------*/
.cart_table{
width:440px;
border:1px #CCCCCC solid;
text-align:center;
}
tr.cart_title{
background-color:#DFDFDF;
}
td{
padding:3px;
}
td.cart_total{
text-align:right;
padding:5px 15px 5px 0;
}
img.cart_thumb{
border:1px #b2b2b2 solid;
padding:2px;
}
/*--------------*/
div.pagination {
width:420px;
padding:5px;
margin:5px;
text-align:center;
float:left;
clear:both;
font-size:10px;
}
div.pagination a {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #1e94cb;
text-decoration: none;
color: #1e94cb;
}
div.pagination a:hover, div.pagination a:active {
border:1px solid #1e94cb;
color: #fff;
background-color: #1e94cb;
}
div.pagination span.current {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #1e94cb;
font-weight: bold;
background-color: #1e94cb;
color: #FFF;
}
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #f3f3f3;
color: #ccc;
}
/*---------------footer------------------------*/
.footer{
height:100px;
background:url(Jewerly-Store-images/footer_bg.gif) no-repeat top center;
}
.left_footer{
float:left;
padding:10px 0 0 10px;
}
.right_footer{
float:right;
padding:10px 10px 0 0;
}
.footer a{
text-decoration:none;
padding:0 5px 0 5px;
color:#afaeaf;
}
</style>
</head>
<body>
<div id="wrap">
<div class="header">
<div class="logo"><a href="index.html"><img src="Jewerly-Store-images/logo.png" alt="" title="" border="0" /></a></div>
<div id="menu">
<ul>
<li><a href="index.html">home</a></li>
<li class="selected"><a href="about.html">about us</a></li>
<li><a href="category.html">jewels</a></li>
<li><a href="specials.html">specials jewels</a></li>
<li><a href="myaccount.html">my accout</a></li>
<li><a href="register.html">register</a></li>
<li><a href="details.html">prices</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</div>
</div>
<div class="center_content">
<div class="left_content">
<div class="title"><span class="title_icon"><img src="Jewerly-Store-images/bullet1.gif" alt="" title="" /></span>About us</div>
<div class="feat_prod_box_details">
<p class="details">
<img src="Jewerly-Store-images/about.gif" alt="" title="" class="right" />
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 nostrud. 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 nostrud. <br /><br />
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 nostrud. 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 nostrud.<br /><br />
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 nostrud. 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 nostrud.
</p>
</div>
<div class="clear"></div>
</div><!--end of left content-->
<div class="right_content">
<div class="languages_box">
<span class="red">Languages:</span>
<a href="#"><img src="Jewerly-Store-images/gb.gif" alt="" title="" border="0" /></a>
<a href="#"><img src="Jewerly-Store-images/fr.gif" alt="" title="" border="0" /></a>
<a href="#"><img src="Jewerly-Store-images/de.gif" alt="" title="" border="0" /></a>
</div>
<div class="currency">
<span class="red">Currency: </span>
<a href="#">GBP</a>
<a href="#">EUR</a>
<a href="#"><strong>USD</strong></a>
</div>
<div class="cart">
<div class="title"><span class="title_icon"><img src="Jewerly-Store-images/cart.gif" alt="" title="" /></span>My cart</div>
<div class="home_cart_content">
3 x items | <span class="red">TOTAL: 100$</span>
</div>
<a href="cart.html" class="view_cart">view cart</a>
</div>
<div class="title"><span class="title_icon"><img src="Jewerly-Store-images/bullet3.gif" alt="" title="" /></span>About Our Shop</div>
<div class="about">
<p>
<img src="Jewerly-Store-images/about.gif" alt="" title="" class="right" />
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 nostrud.
</p>
</div>
<div class="right_box">
<div class="title"><span class="title_icon"><img src="Jewerly-Store-images/bullet4.gif" alt="" title="" /></span>Promotions</div>
<div class="new_prod_box">
<a href="details.html">product name</a>
<div class="new_prod_bg">
<span class="new_icon"><img src="Jewerly-Store-images/promo_icon.gif" alt="" title="" /></span>
<a href="details.html"><img src="Jewerly-Store-images/thumb1.gif" alt="" title="" class="thumb" border="0" /></a>
</div>
</div>
<div class="new_prod_box">
<a href="details.html">product name</a>
<div class="new_prod_bg">
<span class="new_icon"><img src="Jewerly-Store-images/promo_icon.gif" alt="" title="" /></span>
<a href="details.html"><img src="Jewerly-Store-images/thumb2.gif" alt="" title="" class="thumb" border="0" /></a>
</div>
</div>
<div class="new_prod_box">
<a href="details.html">product name</a>
<div class="new_prod_bg">
<span class="new_icon"><img src="Jewerly-Store-images/promo_icon.gif" alt="" title="" /></span>
<a href="details.html"><img src="Jewerly-Store-images/thumb3.gif" alt="" title="" class="thumb" border="0" /></a>
</div>
</div>
</div>
<div class="right_box">
<div class="title"><span class="title_icon"><img src="Jewerly-Store-images/bullet5.gif" alt="" title="" /></span>Categories</div>
<ul class="list">
<li><a href="#">accesories</a></li>
<li><a href="#">jewel gifts</a></li>
<li><a href="#">specials</a></li>
<li><a href="#">hollidays gifts</a></li>
<li><a href="#">accesories</a></li>
<li><a href="#">jewel gifts</a></li>
<li><a href="#">specials</a></li>
<li><a href="#">hollidays gifts</a></li>
<li><a href="#">accesories</a></li>
<li><a href="#">jewel gifts</a></li>
<li><a href="#">specials</a></li>
</ul>
<div class="title"><span class="title_icon"><img src="Jewerly-Store-images/bullet6.gif" alt="" title="" /></span>Partners</div>
<ul class="list">
<li><a href="#">accesories</a></li>
<li><a href="#">jewel gifts</a></li>
<li><a href="#">specials</a></li>
<li><a href="#">hollidays gifts</a></li>
<li><a href="#">accesories</a></li>
<li><a href="#">jewel gifts</a></li>
<li><a href="#">specials</a></li>
<li><a href="#">hollidays gifts</a></li>
<li><a href="#">accesories</a></li>
</ul>
</div>
</div><!--end of right content-->
<div class="clear"></div>
</div><!--end of center content-->
<div class="footer">
<div class="left_footer"><img src="Jewerly-Store-images/footer_logo.gif" alt="" title="" /><br /> <a href="http://csscreme.com/freecsstemplates/" title="free css templates"><img src="Jewerly-Store-images/csscreme.gif" alt="free css templates" border="0" /></a></div>
<div class="right_footer">
<a href="#">home</a>
<a href="#">about us</a>
<a href="#">services</a>
<a href="#">privacy policy</a>
<a href="#">contact us</a>
</div>
<p>Powered by premium <a href="http://www.flashmint.com/">Flash Templates</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category