WebStore
<!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=iso-8859-1" />
<title>Welcome to Online Web Store</title>
<style type='text/css'>
/* CSS Document */
body{
margin:0; color:#000;
background-color:#107EB7;
}
p, h2{
margin:0; padding:0;
}
.spacer{
margin:0; padding:0; clear:both; font-size:0; line-height:0;
}
#main{
margin:0px auto; width:778px;
}
#frame{
width:765px; background-color:#FFFFFF; padding:31px 3px 15px 10px; color:#000;
}
/*body start here*/
/*left start here*/
#left {
width:261px;
float:left;
}
ul#nav {
padding:0 21px 0 18px;
list-style-type:none;
margin:0;
}
ul#nav li {
margin:0px;
border:1px solid #BDBDBD;
border-bottom:0px solid #BDBDBD;
height:26px;
background-image:url(images/bullet.jpg);
background-position:left;
background-repeat:no-repeat;
padding:5px 0 0 54px;
}
ul#nav li a.nav {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#095881;
text-decoration:none;
background-color:inherit;
}
ul#nav li a.nav:hover {
color:#F95F2B;
text-decoration:none;
background-color:inherit;
}
#news_container {
color:#323D43;
background-color:#F6F6F6;
border-left:1px solid #CECECE;
border-right:1px solid #CECECE;
float:left;
width:194px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
padding-left:24px;
padding-right:41px;
padding-top:27px;
}
.newssurve {
float:left;
}
p.news {
padding:0px 0px 10px 0px;
}
a.more {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:bold;
text-decoration:none;
color:#323D43;
background-color:inherit;
}
a.more:hover {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
text-decoration:underline;
}
.views{
width:192px;
border:1px solid #DEDBDB;
background-color:#EEEDED;
height:18px;
text-align:center;
padding-top:5px;
color:#323D43;
}
/*left end here*/
/*right start here*/
#right
{
width:498px;
float:right;
padding:0 0 0 3px;
}
#banner {
float:left;
background-image:url(images/banner.jpg);
width:498px;
height:208px;
}
#banner img {
margin:15px 0 0 5px;
}
#products{
background-image:url(images/products.jpg);
width:202px; height:94px; float:left;
font-size:0; line-height:0; text-indent:-2000px;
}
#navtable {
width:286px;
background-color:#FB794D;
float:left;
border-left:1px solid #fff;
border-bottom:1px solid #fff;
height:21px;
color:#fff;
font-weight:bold;
font-size:11px;
padding:9px 0 0 9px;
}
a.topnav {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#fff;
font-weight:bold;
text-decoration:none;
padding:0 0 0 3px;
background-color:inherit;
}
a.topnav:hover {
text-decoration:underline;
background-color:inherit;
}
#banner_content {
width:271px;
background-color:#FB794D;
height:53px;
border-left:1px solid #fff;
float:left;
padding:10px 17px 0 7px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#fff;
}
#products01 {
width:460px;
padding:27px 19px 0;
}
.product {
width:460px;
margin:0px;
padding:0px;
list-style-type:none;
float:left;
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#323D43;
background-color:inherit;
}
#shopdiv {
height:141px;
border-bottom:1px solid #BDBDBD;
}
#shopdiv2 {
padding-top:16px;
height:141px;
}
.shop {
float:left;
width:92px;
font-size:10px;
}
.shop img {
display:block;
}
.shop a {
font:bold 10px Tahoma, Verdana, Arial, Helvetica, sans-serif; color:#323D43; text-decoration:none;
}
.shop a:hover{
color:#323D43; text-decoration:underline;
}
/*right end here*/
/*body end here*/
/*footer start here*/
#footer{
width:768px;
height:29px;
background-color:#fff;
border-top:1px solid #323D43;
float:left;
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
color:#323D43;
padding-left:10px;
padding-top:12px;
padding-bottom:7px;
}
#footer span{
font-weight:normal;
}
#footer span a{
color:#323D43; text-decoration:none; background-color:inherit;
}
#footer span a:hover{
color:#0F78AF; background-color:inherit;
}
/*footer start here*/
</style>
</head>
<body>
<div id="main">
<div id="frame">
<!-- body left start here -->
<div id="left">
<!-- start navigation -->
<ul id="nav">
<li><a href="#" class="nav" title="Home">Home</a></li>
<li><a href="#" class="nav" title="About Us">About Us</a> </li>
<li><a href="#" class="nav" title="Contact Us">Contact Us</a></li>
<li><a href="#" class="nav" title="Services">Services</a></li>
<li><a href="#" class="nav" title="Support">Support</a></li>
<li><a href="#" class="nav" title="Feedback">Feedback</a></li>
<li><a href="#" class="nav" title="Best offers">Best offers</a></li>
<li><a href="#" class="nav" title="Support Links">Support Links</a></li>
</ul>
<!-- end navigation -->
<!--news-->
<div class="newssurve"><img src="images/top-curve.jpg" alt="" /></div>
<div id="news_container">
<p class="news"><strong>News Heading goes here</strong><br />
This is Web Store, a free, fully standards-compliant CSS template designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>.
<br /> This free template is released under a Creative Commons Attributions 2.5 license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)
<a href="#" class="more">more</a></p>
<p class="news"><strong>News Heading goes here</strong><br />
Short details about the news goes here. This is a demo text and will be replaced with the original.<br />
<a href="#" class="more">more</a></p>
<p class="news"><strong>News Heading goes here</strong><br />
Short details about the news goes here. This is a demo text and will be replaced with the original.<br />
<a href="#" class="more">more</a></p>
<p class="news"><strong>News Heading goes here</strong><br />
Short details about the news goes here. This is a demo text and will be replaced with the original.<br />
<a href="#" class="more">more</a></p>
<p class="news"></p><div class="views"><a href="#" class="more">More News and Views</a></div>
</div>
<div class="newssurve"><img src="images/bottom-curve.jpg" alt="" width="261" height="12" /></div>
<!-- news end-->
<br class="spacer" />
</div>
<!-- body left end here -->
<!-- right start -->
<div id="right">
<div id="banner">
<a href="index.html"><img src="images/logo.jpg" alt="Welcome to Online Web Store" title="Welcome to Online Web Store" width="304" height="26" border="0" /></a>
</div>
<!-- start products -->
<h2 id="products">Products</h2>
<div id="navtable">
<a href="#" class="topnav" title="Products">Products</a> |
<a href="#" class="topnav" title="Services">Services</a> |
<a href="#" class="topnav" title="Accessaries">Accessaries</a> |
<a href="#" class="topnav" title="Books">Books</a>
</div>
<div id="banner_content">Some text will go here. This is a demo text and will be replaced with the original. Some text will go here. This is a demo text and will be replaced with the original.
</div>
<br class="spacer" />
<div id="products01">
<div id="shopdiv">
<ul class="product">
<li class="shop"><img src="images/printer.gif" alt="Printer" title="Printer" />Product Name<br />Price:$1000<br /><a href="#">More details</a> </li>
<li class="shop"><img src="images/scanner.gif" alt="Scanner" title="Scanner" width="71" height="75" />
Product Name<br />Price:$1000<br /> <a href="#">More details</a> </li>
<li class="shop"><img src="images/palmtop.gif" alt="Palmtop" title="Palmtop" width="67" height="75" />
Product Name<br />Price:$1000<br /><a href="#">More details</a> </li>
<li class="shop"><img src="images/joystick.gif" alt="Joystick" title="Joystick" width="72" height="75" />
Product Name<br />Price:$1000<br /><a href="#">More details</a> </li>
<li class="shop"><img src="images/scanner.gif" alt="Scanner" title="Scanner" width="71" height="75" />
Product Name<br />Price:$1000<br /><a href="#">More details</a> </li>
</ul>
</div>
<div id="shopdiv2">
<ul class="product">
<li class="shop"><img src="images/laptop.gif" alt="Laptop" title="Laptop" width="88" height="75" />
Product Name<br />Price:$1000<br /><a href="#">More details</a> </li>
<li class="shop"><img src="images/lcd.gif" alt="Lcd" title="Lcd" width="59" height="75" />
Product Name<br />Price:$1000<br /><a href="#">More details</a> </li>
<li class="shop"><img src="images/server.gif" alt="Server" title="Server" width="84" height="75" />
Product Name<br />Price:$1000<br /><a href="#">More details</a> </li>
<li class="shop"><img src="images/monitor.gif" alt="Monitor" title="Monitor" width="84" height="75" />
Product Name<br />Price:$1000<br /><a href="#">More details</a> </li>
<li class="shop"><img src="images/monitor2.gif" alt="Monitor2" title="Monitor2" width="63" height="75" />
Product Name<br />Price:$1000<br /><a href="#">More details</a> </li>
</ul>
</div>
</div>
<!-- end products -->
</div>
<!-- right end -->
<br class="spacer" />
</div>
<!-- start footer -->
<div id="footer">© All Right Reserve<br class="spacer" />
<span><a href="http://www.templatesold.com/" target="_blank">Website Templates</a> by <a href="http://www.free-css-templates.com/" target="_blank">Free CSS Templates</a></span></div>
</div>
<!-- end footer -->
</body>
</html>
Related examples in the same category