computer-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>Computer Store</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* -- default style -- */
body {
margin:0; padding:0;
background-color:#fff; color:#393939;
font:normal 12px/15px Arial, Helvetica, sans-serif;}
div, h1, h2, h3, h4, p, a, img, ul, ol, li, form, input, textarea, select {
margin:0; padding:0;}
img {
border:none;}
ul {
list-style:none;}
a {
outline:none;}
.spacer {
clear:both; line-height:0; font-size:0;}
/* -- header style -- */
#header {
width:737px; height:276px; margin:0 auto; padding:45px 11px 0 33px;
background:url(computer-store-images/header-bg.jpg) no-repeat 223px 63px;}
#header img.logo {
margin:0 0 0 7px; float:left;}
#header ul.info {
float:right; font:bold 11px/18px Arial, Helvetica, sans-serif; background-color:#fff; color:#2F594F;}
#header ul.info li {
float:left; padding:0 0 0 12px;}
#header ul.info li.email {
color:#000; background-color:#fff;}
#header ul.info li.email a {
color:#000; background-color:#fff; text-decoration:none;}
#header ul.info li.email a:hover {
color:#000; background-color:#F0FBF6;}
#header ul.topNav {
clear:both; width:178px; padding:21px 0 0 0;}
#header ul.topNav li {
background:url(computer-store-images/dot-01.gif) repeat-x 0 100%; padding:0 0 1px;}
#header ul.topNav li a {
background:url(computer-store-images/arrow-01.gif) no-repeat 2px 50% #fff; color:#000; padding:0 0 0 13px;
font-size:11px; font-weight:bold; line-height:19px; text-decoration:none;
width:165px; display:block;}
#header ul.topNav li a:hover {
background:url(computer-store-images/arrow-01.gif) no-repeat 2px 50% #F0FBF6; color:#000;}
/* -- body style -- */
#body {
width:737px; margin:0 auto; padding:18px 11px 0 33px;}
/* -- lefta panel start -- */
#left {
width:512px; padding:0 12px 0 0; margin:0 20px 0 0; float:left;
background:url(computer-store-images/dot-02.gif) repeat-y 100% 0;}
#left h1.welcome {
height:23px; margin:0 0 14px; line-height:0; font-size:0; text-indent:-12000px;
background:url(computer-store-images/welcome-txt.gif) no-repeat 0 0; }
#left h2 {
font:normal 18px/20px Georgia, "Times New Roman", Times, serif; color:#323232; background-color:#fff;
padding:0; margin:6px 0 14px;}
#left h2 span {
color:#C90C0F;}
#left p {
padding:0 0 16px 7px;}
#left ul.catagory {
padding:0 0 20px 7px; float:left;}
#left ul.catagory li {
background:url(computer-store-images/dot-01.gif) repeat-x 0 100%;
width:110px; padding:0 0 1px; margin:0 12px 0 0; float:left;}
#left ul.catagory li.big {
width:135px; padding:0 0 1px; margin:0;}
#left ul.catagory li a {
background:url(computer-store-images/green-bullet.gif) no-repeat 2px 7px #fff; color:#000;
padding:0 0 0 13px; line-height:19px; display:block; text-decoration:none;}
#left ul.catagory li a:hover {
background:url(computer-store-images/green-bullet.gif) no-repeat 2px 7px #F0FBF6; color:#000;}
#left ul.product {
float:left; padding:18px 0; margin:2px 0 0 0;
background:url(computer-store-images/product-green-bg.gif) repeat-x 0 0;}
#left ul.product li {
float:left; background:url(computer-store-images/dot-02.gif) repeat-y 0 0;
padding:0 15px 0 16px; width:auto; margin:0; text-align:left; position:relative}
#left ul.product li.noDivider {
background:none; padding:0 15px;}
#left ul.product li img {
display:block; margin:0 0 5px;}
#left ul.product li span {
display:block; text-align:left;}
#left ul.product li a.details {
background:url(computer-store-images/detail-btn.gif) no-repeat 0 0;
width:50px; height:16px; display:block; margin:3px 0 0 0;
text-indent:-120000px; line-height:0; font-size:0;}
#left ul.product li a.details:hover {
background:url(computer-store-images/detail-btn-h.gif) no-repeat 0 0;}
/* -- right panel start -- */
#right {
width:180px; float:left;}
#right a.more {
background:url(computer-store-images/more-btn.gif) no-repeat 0 0; margin:0 0 29px;
width:59px; height:22px; float:right; line-height:0; font-size:0; text-indent:-12000px;}
#right a.more:hover {
background:url(computer-store-images/more-btn-h.gif) no-repeat 0 0;}
#right a.click {
font:bold 15px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#000; background-color:#fff; text-decoration:none; float:right;}
#right a.click:hover {
color:#C90C0F; background-color:#fff;}
/* -- footer style -- */
#footer {
background:url(computer-store-images/footer-bg.gif) repeat-x 0 0; color:#000; padding:18px; text-align:center;}
#footer p.nav {
font:bold 10px/15px Verdana, Arial, Helvetica, sans-serif; padding:0 0 12px; }
#footer p.nav a {
margin:0 10px; text-decoration:none; color:#000;}
#footer p.nav a:hover {
color:#2F594F;}
#footer p {
padding:0 0 5px; font-size:9px; line-height:12px;}
#footer p a {
color:#C90C0F; text-decoration:none;}
/* -- misc style -- */
.bottomDot {
background:url(computer-store-images/dot-01.gif) repeat-x 0 100%; padding:0 0 1px;}
.leftMarOne {
margin-left:47px !important}
.bottomMarZero {
margin-bottom:0 !important;}
</style>
</head>
<body>
<div id="header"> <a href="http://www.free-css.com/"><img src="computer-store-images/logo.jpg" alt="" border="0" class="logo" /></a>
<ul class="info">
<li>Phone :215-799-0685</li>
<li>Toll free :866-637-2474</li>
<li>Phone exts :102</li>
<li class="email">E-mail : <a href="http://www.free-css.com/">computer@company.com</a></li>
</ul>
<ul class="topNav">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Faq</a></li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Products</a></li>
<li><a href="http://www.free-css.com/">Support</a></li>
<li><a href="http://www.free-css.com/">Technology</a></li>
<li><a href="http://www.free-css.com/">Clients</a></li>
<li><a href="http://www.free-css.com/">Testimonials </a></li>
</ul>
<br class="spacer" />
</div>
<div id="body">
<div id="left">
<h1 class="welcome">WELCOME to Computer Store</h1>
<p>This is <strong>Computer Store</strong> Website, a free, fully standards-compliant CSS template designed by Free CSS Templates. <br />
This free template is released under a Creative Commons Attributions 2.5 license, so youre 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 :) </p>
<p>The point of using Lorem Ipsum is that it has a more-or-less normal distributionasopposed to using 'Content here, content heretmaking it look liscrambledof letters, as opposed to using 'Content here, content heretmaking it look lieadable English. Many desktop publishing packages.</p>
<h2 class="bottomDot"><span>CATEGORY</span> we have</h2>
<ul class="catagory">
<li><a href="http://www.free-css.com/">Desktop</a></li>
<li><a href="http://www.free-css.com/">Modems</a></li>
<li><a href="http://www.free-css.com/">Keybords</a></li>
<li class="big"><a href="http://www.free-css.com/">lenovo300</a></li>
<li><a href="http://www.free-css.com/">Notbooks</a></li>
<li><a href="http://www.free-css.com/">Processors</a></li>
<li><a href="http://www.free-css.com/">Mouses</a></li>
<li class="big"><a href="http://www.free-css.com/">linspirom1911</a></li>
<li><a href="http://www.free-css.com/">Monitors</a></li>
<li><a href="http://www.free-css.com/">Systemhoards</a></li>
<li><a href="http://www.free-css.com/">PocketPc</a></li>
<li class="big"><a href="http://www.free-css.com/">dellinspirom B200</a></li>
<li><a href="http://www.free-css.com/">Printers</a></li>
<li><a href="http://www.free-css.com/">Display cards</a></li>
<li><a href="http://www.free-css.com/">lenovo100</a></li>
<li class="big"><a href="http://www.free-css.com/">dellinspirom c1100</a></li>
</ul>
<br class="spacer" />
<h2 class="bottomMarZero">FEATURED <span>product</span></h2>
<ul class="product">
<li class="noDivider"><img src="computer-store-images/pro-pic-01.gif" alt="" width="107" height="170" /> <span>Price : $ 250.00</span> <a href="http://www.free-css.com/" class="details">Details</a></li>
<li><img src="computer-store-images/pro-pic-02.gif" alt="" /><span>Price : $ 250.00</span> <a href="http://www.free-css.com/" class="details">Details</a> </li>
<li><img src="computer-store-images/pro-pic-03.gif" alt="" /> <span>Price : $ 250.00</span> <a href="http://www.free-css.com/" class="details">Details</a> </li>
</ul>
<br class="spacer" />
</div>
<div id="right"><img src="computer-store-images/right-pic-01.gif" alt="" /> <a href="http://www.free-css.com/" class="more">More</a> <img src="computer-store-images/right-pic-02.gif" alt="" /> <a href="http://www.free-css.com/" class="click">Click Here</a> <img src="computer-store-images/right-pic-03.gif" alt="" /> <a href="http://www.free-css.com/" class="click">Click Here</a> </div>
<br class="spacer" />
</div>
<div id="footer">
<p class="nav"> <a href="http://www.free-css.com/">Home</a> <a href="http://www.free-css.com/">About Us</a> <a href="http://www.free-css.com/">Faq</a> <a href="http://www.free-css.com/">Contact Us</a> <a href="http://www.free-css.com/">Services</a> <a href="http://www.free-css.com/">Products</a> <a href="http://www.free-css.com/">Support</a> <a href="http://www.free-css.com/">Technology</a> <a href="http://www.free-css.com/">Clients</a> <a href="http://www.free-css.com/">Testimonials</a> </p>
<p>Copyright information goes here</p>
<p>Designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>, Thanks to <a href="http://www.dubaiapartments.biz/">Dubai Apartments</a></p>
</div>
</body>
</html>
Related examples in the same category