clearpixels
<!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>ClearPixels - Cart</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
*{
margin: 0px;
padding: 0px;
}
a {
color: #0EA2CC;
text-decoration: none;
}
h1, h2, h3 {font-family:"Trebuchet MS", Verdana, sans-serif;}
h1 {font-size:26px;}
h2 {font-size:18px;}
h3 {font-size:16px;}
body {background:url(clearpixels-images/bg2.jpg) fixed center top; background-color:#ccc; font:12px Verdana, Arial, Helvetica, sans-serif;}
#wrap {width:950px; margin:0 auto 0 auto;}
#header {background:url(clearpixels-images/header.png) no-repeat; height:174px;}
#content {background:url(clearpixels-images/pagebg.png) repeat-y; padding:0 40px 0 40px;}
#right { float:right; width:610px;}
#right p {line-height:20px; margin-bottom:20px;}
#right a {border-bottom: solid 1px #0ea2cc;}
#right a:visited, active {border:none;}
#right a:hover {color:#000; border-bottom:solid 1px #000;}
h1 a, h2 a, h3 a, h4 a {text-decoration:none; border:none!important;}
.clear {clear:both;}
#sidebar {float:left; width:250px; background:url(clearpixels-images/sb2.jpg) left repeat-y;}
#sidebartop {background: url(clearpixels-images/sb1.jpg) left top no-repeat; height:10px;}
#sidebarbtm {background:url(clearpixels-images/sb3.jpg) left top no-repeat; height:9px;}
#sidebar ul {list-style:none; font:bold 14px "Trebuchet MS", Verdana, sans-serif; margin-bottom:15px;}
#sidebar li {display:block; height:36px; margin-bottom:2px;}
#sidebar a, #sidebar a:visited {
display:block;
background:url(clearpixels-images/menu1.jpg) right top no-repeat;
padding: 10px 10px 0 40px;
height: 26px;
color:#999;
}
#right h2 {
color:#014782; font:normal 18px "Trebuchet MS", Verdana, sans-serif;
}
#right h2 a {color:#014782}
#right h2 a:hover {color:#000; background:#ffffee; border:none;}
#sidebar a:hover {background:url(clearpixels-images/menu2.jpg) right top no-repeat; color:#333;}
#sidebar .active a{background:url(clearpixels-images/menu3.jpg) right top no-repeat; color:#000;}
#sidebar h2 {
display:block;
background:url(clearpixels-images/sidebarh2.jpg) no-repeat;
height:40px;
padding:14px 10px 0 40px;
color: #186185;
text-transform:uppercase;
}
#footer {background:url(clearpixels-images/footerbg.png) no-repeat; height:62px;}
#sitename {
display:block;
float:left;
width:210px;
padding:15px 0 0 40px;
text-align:center;
color: #FFFFFF;
font: normal 28px "Trebuchet MS", Verdana, sans-serif;
}
#sitename a{color:#fff;}
.caption {
display:block;
font: normal 12px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
padding-top:30px;}
#sitename a .blue {
color:#0F9EC8;
font-style: italic;
}
#sitename a:hover {color:#0f9ec8;}
#sitename a:hover .blue{color:#9c6; font-family:Georgia; font-weight:normal;}
#nav {float:right; width:645px; padding:0 40px 0 0; height:134px;}
#breadcrumb { background:url(clearpixels-images/breadcrumb.jpg) center bottom no-repeat;
padding:7px 40px 5px ;
height: 18px;
color:#999999; text-transform:uppercase;
font: bold 16px"Trebuchet MS", Verdana, sans-serif;}
#breadcrumb a.active {color:#000!important;}
#breadcrumb a{text-decoration:none; color:#999;}
#breadcrumb a:visited, breadcrumb a:active {color:#999;}
#breadcrumb a:hover {color:#333;}
#nav #search{
padding-left: 475px;
padding-top: 17px;
height: 48px;
}
#nav #search .keyword{
background: transparent url(clearpixels-images/search.png) no-repeat;
height: 33px;
width: 132px;
padding: 10px 20px 0 10px;
font-size: 12px;
color: #999;
border:none;
overflow:hidden;
}
#header form {padding:0; margin:0;}
#topmenu { height:51px; font:bold 14px "Trebuchet MS", Verdana, sans-serif; text-transform:uppercase; padding-top:15px;}
#topmenu ul {list-style:none; padding-left:10px;}
#topmenu li {display:inline; margin-left:3px;}
#topmenu a, #topmenu a:visited {display:block; float:left; background:url(clearpixels-images/nav2.png) repeat-x; text-align:center; padding:5px 25px 0 25px; height:25px; color:#999999;}
#topmenu .active a {background:url(clearpixels-images/nav1.png) repeat-x; color:#333;}
#topmenu .active a:hover {background:url(clearpixels-images/nav4.png) repeat-x; color:#333;}
#topmenu a:hover {background:url(clearpixels-images/nav3.png) repeat-x; color:#fff;}
#featured {
background:url(clearpixels-images/ftrdbox.jpg) no-repeat;
height:150px;
color:#00CCFF;
margin-bottom:15px;
}
#featured div {
padding:25px 10px 0 50px;
height: 90px;
font:normal 16px "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.ftd_btm {display:block; height:20px; padding:15px 5px 0 35px; background:url(clearpixels-images/ftrdlink.png)8px 12px no-repeat}
#featured a {color:#fff; border-bottom:none;}
#featured a:visited, #featured a:active{color:#E3F7FD;}
#featured a:hover { text-decoration:underline; color:#fff!important;}
.postbottom {background:url(clearpixels-images/postbttm.png) no-repeat; height:26px; margin-bottom:20px;}
.postbottom ul {list-style:none;}
.postbottom li {display:inline; margin:0!important; padding:0!important;}
.postbottom a, .postbottom a:visited, .postbottom a:active{color:#fff; border:none!important; display:block; float:left; height:20px; padding:6px 5px 0 30px;}
.postbottom a:hover {color:#000;}
.permalink a, .permalink a:visited, .permalink a:active {background:url(clearpixels-images/ico_more.png)5px 5px no-repeat;}
.cats a{background:url(clearpixels-images/ico_cat.png)5px 5px no-repeat;}
.auth a{background:url(clearpixels-images/ico_usr.png)5px 5px no-repeat;}
.date a{background:url(clearpixels-images/ico_date.png) 5px 5px no-repeat;}
.comnts a{background:url(clearpixels-images/comment.png)5px 5px no-repeat;}
.post h2 {display:block; margin-bottom:15px;}
.post .description {display:block; font-size:12px; color:#999;}
.post blockquote {background:#eee url(clearpixels-images/quote.png) 5px 5px no-repeat; padding:8px 8px 0 35px; font:normal 14px "Palatino Linotype", "Book Antiqua", Palatino, serif; display:block; border: solid 1px #ddd; }
.post .extract { float:left; margin-right:10px; width:250px;}
.post ul {margin-left:25px;}
.post ol {margin-left:25px;}
.post li {padding:3px;}
.post .leftalign {display:block; padding:5px; background:#eee; margin:8px; float:left; border:solid 1px #ddd;}
.post .rightalign {display:block; padding:5px; background:#eee; margin:8px; float:right;border:solid 1px #ddd;}
/*tables and Forms */
#right table {
width:90%;
border:1px solid #0075A4;
margin-bottom:20px;
background: #E3F6FF;
margin-top: 15px;
}
#right th {
background:#0075A4;
padding:5px 15px 5px 15px;
color:#8ADBFF;
text-align:center;
border-bottom:1px solid #000000;
font: bold 16px "Trebuchet MS", Verdana, sans-serif;
text-transform: uppercase;
}
#right td {
border-bottom:1px solid #0075A4;
padding:5px 15px 5px 15px;
border-right:1px solid #0075A4;
}
.textfield {
display: block;
width:50%;
margin:3px 3px 3px 30px;
padding:3px;
border: 1px solid #CBE0E7;
background: #E9F2F5;
}
label {
display: block;
margin:3px;
padding: 5px;
font-weight: bold;
}
.button {
display: block;
padding:0px;
margin:3px;
border: 1px solid #9DC6D2;
color:#000000;
background: #E9F2F5;
}
.textfield:hover {
background:#FFFFCC;
}
.textfield:focus {
background:#ffffff;
border: 1px solid #3A2C1B;
}
.hide {display:none;}
#bottom {padding:20px; background:url(clearpixels-images/bottombg.png) repeat-x; margin-top:15px;}
#bottom p {display:block; padding:3px; text-align:center;}
#credits {text-align:right; font-size:10px; padding:5px 40px 0 40px; }
.pagenavi { height:22px; padding: 5px 5px 0 5px; background: #eee; border: solid 1px #ddd; margin:25px 0 15px 0;}
.pagenavi .alignleft {display:block; text-align:left;}
.pagenavi .alignright {display:block; float:right;}
.pagenavi a, .pagenavi a :visited, .pagenavi a :active {color:#000; font-weight:bold; text-decoration:none; border:none!important;}
.pagenavi a:hover {color:#0099CC!important;}
/*shopping Cart */
#catalogue {margin:10px 0 10px 0; background:#eee; border:solid 1px #ddd; padding:5px;}
.item {width:135px; float:left; height:220px;}
.item h3 {display:block; padding:3px;}
.item span {display:block; padding:3px;}
.item .price {color:#993300; font-weight:bold; }
.item span img {border:none!important;}
.item span a {border:none!important; text-decoration:none;}
.item img {}
img.productimg {border:solid 1px #716148; margin:0 0 0 8px;}
.clear2 {width:100%; clear:left;}
.sec_head {
display:block;
background: #0077A2 url(clearpixels-images/ftrdbox.jpg) no-repeat 0px -60px;
padding:3px;
margin-bottom:15px;
color: #FFF !important;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1 id="sitename"><a href="http://www.free-css.com/"><span class="blue">Clear</span>Pixels</a><span class="caption">Free CSS Template</span></h1>
<div id="nav">
<form action="http://www.free-css.com/">
<div id="search">
<input type="text" class="keyword" value="Search" />
</div>
</form>
<div id="topmenu">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="styles.php">Styles</a></li>
<li class="active"><a href="cart.php">Shopping Cart</a></li>
<li><a href="notes.php">Notes</a></li>
<li><a href="http://www.free-css.com/">NoGo</a></li>
<li><a href="http://www.free-css.com/">NoLink</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
<div id="breadcrumb">RSBlues » <a href="http://www.free-css.com/">Home</a> » <a href="cart.php" class="active">Shopping Cart</a> »</div>
</div>
<div id="content">
<div id="right">
<div id="featured">
<div> ClearPixels is a free CSS Template released under the Creative Commons Attribution 2.5 License by RamblingSoul. You can download other quality css templates from my profile or website.</div>
<span class="ftd_btm"><a href="http://www.free-css.com/">Read More</a></span></div>
<h2 class="sec_head">Shopping Cart</h2>
<div id="catalogue">
<div class="item">
<h3>Apple MacBook</h3>
<img class="productimg" src="clearpixels-images/product1.jpg" alt="" width="120" height="95" /> <span class="price">$00000.00</span> <span>Dolor Sit Amet</span> <span> <a href="http://www.free-css.com/"><img src="clearpixels-images/buybutton.png" alt="" /></a></span></div>
<div class="item">
<h3>Apple iPod</h3>
<img class="productimg" src="clearpixels-images/product2.jpg" alt="" width="120" height="95" /> <span class="price">$0000.00</span> <span>Dolor Sit Amet</span> <span> <a href="http://www.free-css.com/"><img src="clearpixels-images/buybutton.png" alt="" /></a></span></div>
<div class="item">
<h3>Apple iPhone</h3>
<img class="productimg" src="clearpixels-images/product3.jpg" alt="" /> <span class="price">$0000.00</span> <span>Dolor Sit Amet</span> <span> <a href="http://www.free-css.com/"><img src="clearpixels-images/buybutton.png" alt="" /></a></span></div>
<div class="item">
<h3>Apple iPhone</h3>
<img class="productimg" src="clearpixels-images/product4.jpg" alt="" /> <span class="price">$0000</span> <span>Dolor Sit Amet</span> <span> <a href="http://www.free-css.com/"><img src="clearpixels-images/buybutton.png" alt="" /></a></span></div>
<div class="clear2"></div>
<div class="item">
<h3>Apple MacBook</h3>
<img class="productimg" src="clearpixels-images/product3.jpg" alt="" width="120" height="95" /> <span class="price">$00000.00</span> <span>Dolor Sit Amet</span> <span> <a href="http://www.free-css.com/"><img src="clearpixels-images/buybutton.png" alt="" /></a></span></div>
<div class="item">
<h3>Apple MacBook</h3>
<img class="productimg" src="clearpixels-images/product4.jpg" alt="" width="120" height="95" /> <span class="price">$00000.00</span> <span>Dolor Sit Amet</span> <span> <a href="http://www.free-css.com/"><img src="clearpixels-images/buybutton.png" alt="" /></a></span></div>
<div class="item">
<h3>Apple MacBook</h3>
<img class="productimg" src="clearpixels-images/product2.jpg" alt="" width="120" height="95" /> <span class="price">$00000.00</span> <span>Dolor Sit Amet</span> <span> <a href="http://www.free-css.com/"><img src="clearpixels-images/buybutton.png" alt="" /></a></span></div>
<div class="item">
<h3>Apple MacBook</h3>
<img class="productimg" src="clearpixels-images/product1.jpg" alt="" width="120" height="95" /> <span class="price">$00000.00</span> <span>Dolor Sit Amet</span> <span> <a href="http://www.free-css.com/"><img src="clearpixels-images/buybutton.png" alt="" /></a></span></div>
<div class="clear2"></div>
</div>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed dictum nunc quis elit. Mauris molestie. Nulla tristique porta turpis. Ut dui tortor, fermentum in, pellentesque a, ullamcorper gravida, sapien. Proin dignissim, velit vitae fringilla accumsan, metus elit adipiscing quam, ac accumsan urna lectus at justo. Ut placerat ipsum viverra nisl eleifend elementum. Praesent leo. In justo massa, pharetra vitae, malesuada viverra, facilisis at, neque. Etiam consectetuer, mauris ut venenatis porta, lorem tellus bibendum quam, rhoncus consequat mauris sem quis velit. Vestibulum ut ipsum. Aliquam non magna eget turpis placerat lacinia. Vivamus iaculis diam sit amet eros. Etiam ultricies nulla lobortis ligula. Nulla vitae elit. Morbi sed turpis. Donec rhoncus laoreet turpis. Phasellus quis arcu at orci venenatis hendrerit. Ut euismod. Sed pulvinar adipiscing ipsum. </p>
<p>Vestibulum mauris ligula, pretium nec, lacinia at, euismod ac, sem. Nunc mi. Vestibulum blandit interdum orci. Sed purus sem, varius quis, malesuada nec, suscipit vel, turpis. Nulla facilisi. Mauris eu quam eu turpis lacinia tincidunt. Maecenas justo ante, vulputate ut, mattis luctus, volutpat ac, felis. Vestibulum et nulla. Cras malesuada, risus sit amet ornare consequat, elit purus dignissim est, at tempus erat enim accumsan nibh. Praesent urna risus, vestibulum vel, vulputate at, suscipit id, neque. Duis vel pede. Vivamus posuere. Aliquam nibh nulla, pharetra nec, feugiat vel, pharetra nec, nunc. Aenean blandit eros nec pede venenatis sagittis. Duis malesuada hendrerit lectus. Duis non ante id ligula facilisis bibendum. Cras lectus. Phasellus eget massa quis erat varius semper. Donec porta feugiat massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
<p>Duis eget arcu id augue aliquam lobortis. Vivamus eget diam. Integer tincidunt mauris in nisi. Vestibulum tincidunt eleifend turpis. Ut quis tellus a nibh sodales lacinia. Maecenas sollicitudin. Maecenas a dui eget dui porta ultrices. Phasellus feugiat nunc id ipsum. Vestibulum tincidunt massa eget ipsum. Vestibulum nulla velit, semper sed, semper a, vehicula adipiscing, nulla. Donec congue volutpat mauris. Aliquam erat volutpat. Sed vitae lorem nec pede varius tristique. Aliquam erat volutpat. Ut pede leo, pharetra id, consequat vel, tristique id, pede. Nullam et mauris id dui egestas porttitor. Fusce mollis metus sed diam. Morbi malesuada arcu rutrum odio molestie ullamcorper. Suspendisse vel massa ut risus volutpat commodo. </p>
<p>Suspendisse fringilla nisi eu dui. Morbi sit amet ipsum sit amet dolor imperdiet eleifend. Vestibulum ultrices metus cursus velit. Nulla dignissim vehicula nibh. Nunc vestibulum erat vitae arcu. Curabitur eget sapien et purus fringilla congue. Nam nulla. Duis vitae est. Cras ac lacus. Mauris aliquam tellus quis massa. Praesent vel nunc. Sed ac leo. Praesent eu nisi sed nunc lacinia commodo. Donec aliquam rhoncus nibh. </p>
</div>
<div id="sidebar">
<div id="sidebartop"></div>
<h2>Sidebar</h2>
<ul>
<li class="active"><a href="http://www.free-css.com/">Lorem Ipsum</a></li>
<li><a href="http://www.free-css.com/">Dolor Sit Amet</a></li>
<li><a href="http://www.free-css.com/">Consectetuer</a></li>
<li><a href="http://www.free-css.com/">Adipiscing Elit</a></li>
<li><a href="http://www.free-css.com/">Sed Dictum</a></li>
<li><a href="http://www.free-css.com/">Nunc Quis Elit</a></li>
</ul>
<h2>Links</h2>
<ul>
<li><a href="http://www.free-css.com/">RamblingSoul</a></li>
<li><a href="http://www.free-css.com/">CSSFreebies</a></li>
<li><a href="http://www.free-css.com/">OpenDesigns</a></li>
</ul>
<div id="sidebarbtm"></div>
</div>
<div class="clear"></div>
<div id="bottom">
<p>Copyright © 2008 YourSiteName</p>
<p><a href="http://www.free-css.com/">You</a> | <a href="http://www.free-css.com/">Can</a> | <a href="http://www.free-css.com/">Put</a> | <a href="http://www.free-css.com/">Some</a> | <a href="http://www.free-css.com/">Links</a> | <a href="http://www.free-css.com/">Here</a></p>
</div>
</div>
<div id="footer">
<div id="credits"> <a href="http://ramblingsoul.com">CSS Template</a> by RamblingSoul</div>
</div>
</div>
</body>
</html>
Related examples in the same category