ikonik
<!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>iKonik | About</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type='text/css'>
* {
padding:0;
margin:0;
}
html, body {
height:100%;
margin:0 0 1px;
padding:0;
}
html, body, #wrap {
text-align:center;
height:100%;
}
body > #wrap {
height:auto;
min-height:100%;
}
#main {
padding-bottom:45px;
}
body {
font-size:81.3%;
font-family:"Lucida Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.grid {
width:970px;
margin:0 auto;
position:relative;
text-align:left;
}
.grid .inside {
display:inline;
float:left;
position:relative;
margin:0 10px;
height:20px;
}
body {
font-size:81.3%;
font-family:"Lucida Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
}
* {
outline:none;
}
h1, h2, h3, h4, h5, h6 {
font-weight:normal;
color:#111;
}
h1 {
font-size:3em;
line-height:1;
}
h2 {
font-size:2.4em;
}
h3 {
font-size:1.5em;
line-height:1;
}
h4 {
font-size:1.2em;
line-height:1.25;
}
h5 {
font-size:1em;
font-weight:bold;
}
h6 {
font-size:1em;
font-weight:bold;
}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {
margin:0;
}
a {
text-decoration:none;
}
img {
border:none;
}
#cart {
height:140px;
display:none;
}
#things {
position:relative;
height:140px;
}
#checkout {
width:300px;
float:right;
margin-top:30px;
margin-right:30px;
}
.cart-slider {
position:relative;
width:525px;
height:100px;
overflow:hidden;
margin-top:20px;
padding-top:10px;
float:left;
}
.cart-belt {
width:20000em;
position:absolute;
list-style:none;
clear:both;
}
.cart-divider {
float:left;
}
.cart-item {
display:block;
position:relative;
float:left;
width:74px;
height:74px;
margin:0 16px 0 15px;
background:#fff;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.cart-cancel {
display:block;
width:22px;
height:22px;
overflow:hidden;
position:absolute;
top:-10px;
left:-10px;
background:url(ikonik-images/x.png) no-repeat top left;
text-indent:-9999px;
cursor:pointer;
}
.cart-zip {
display:block;
width:25px;
height:25px;
overflow:hidden;
background:url(ikonik-images/zip.png) no-repeat top left;
text-indent:-9999px;
position:absolute;
top:50px;
left:-8px;
}
.cart-icon {
border:none;
width:64px;
height:64px;
margin:5px;
}
.cart-icon img {
position:absolute;
float:left;
}
.cart-price {
display:block;
width:37px;
height:37px;
position:absolute;
top:50px;
right:-10px;
text-align:center;
font-size:0.8em;
line-height:39px;
font-family:Helvetica, Arial, sans-serif;
}
#cart #checkout-left {
width:130px;
float:left;
}
#cart #checkout-right {
width:130px;
float:right;
}
#cart #checkout-right a {
display:block;
float:right;
}
#carttoggle:hover {
cursor:pointer;
}
#full {
border-top:10px solid #111;
}
#head {
height:120px;
margin-bottom:10px;
}
#cartstatus {
width:218px;
height:33px;
background:url(ikonik-images/drawer.png) no-repeat top left;
position:absolute;
right:20px;
}
#cartstatus p {
text-align:center;
padding:0 10px;
line-height:30px;
font-size:0.85em;
}
#cartstatus a {
margin-right:5px;
}
#cartstatus span {
margin-left:5px;
padding-left:20px;
background:url(ikonik-images/icon-cart.png) no-repeat left center;
}
#logo {
display:block;
position:absolute;
top:30px;
}
#navigation {
list-style:none;
position:absolute;
top:60px;
right:270px;
}
#navigation li {
display:block;
float:left;
margin-right:6px;
}
#navigation li a {
display:block;
}
#search {
position:absolute;
top:60px;
right:20px;
height:28px;
width:235px;
}
#blog-search {
position:relative;
height:28px;
width:235px;
}
#search form, #blog-search form {
padding:5px 15px;
position:relative;
}
#search #s, #blog-search #blog-s {
border:none;
width:175px;
}
#search #searchsubmit {
position:absolute;
right:0;
top:0;
width:45px;
height:28px;
background:transparent;
border:none;
overflow:hidden;
text-indent:1000px;
cursor:pointer;
}
#blog-search #blog-searchsubmit {
position:absolute;
right:0;
top:0;
width:45px;
height:28px;
background:transparent;
border:none;
overflow:hidden;
text-indent:1000px;
cursor:pointer;
}
#featured {
position:relative;
}
.featured {
margin:25px 0 0;
position:relative;
overflow:hidden;
width:970px;
height:225px;
}
.featured-wrap {
height:20000em;
position:absolute;
}
.featured-item {
width:970px;
height:225px;
position:relative;
float:left;
}
.featured-text {
width:520px;
float:left;
margin:0 15px;
text-align:right;
position:relative;
height:220px;
}
.featured-title {
text-transform:uppercase;
}
.featured-image {
width:400px;
float:left;
margin:0 10px;
}
.feat-image-left, .feat-image-right {
width:25px;
float:left;
height:237px;
background-position:top left;
background-repeat:no-repeat;
}
.feat-image-left {
background-image:url(ikonik-images/feat-left.png);
}
.feat-image-right {
background-image:url(ikonik-images/feat-right.png);
}
.feat-image {
width:350px;
float:left;
height:217px;
background:transparent url(ikonik-images/feat-middle.png) repeat-x top left;
text-align:center;
padding-top:20px;
}
.featured-basket {
position:absolute;
bottom:15px;
right:0;
}
.featured-basket p, .featured-basket .add-cart {
float:right;
}
.featured-basket p {
margin-right:15px;
}
.featured-basket p span {
font-size:1.5em;
}
.feat-image {
width:350px;
float:left;
height:217px;
background:transparent url(ikonik-images/feat-middle.png) repeat-x top left;
text-align:center;
padding-top:20px;
}
.newest-divider {
float:left;
}
.newest-left, .newest-right {
width:25px;
float:left;
height:225px;
background-position:top left;
background-repeat:no-repeat;
}
.newest-left {
background-image:url(ikonik-images/feat-left.png);
}
.newest-right {
background-image:url(ikonik-images/feat-right.png);
}
.newest {
width:910px;
float:left;
height:225px;
background:url(ikonik-images/feat-middle.png) repeat-x top left;
text-align:center;
position:relative;
overflow:hidden;
}
.newest-wrap {
width:20000em;
position:absolute;
}
.newest-item {
width:151px;
float:left;
position:relative;
height:200px;
border-right:1px solid #ddd;
}
.newest-item:hover {
background:#bbb url(ikonik-images/newest-bg.png) repeat-x top left;
}
.newest-desc {
font-size:0.85em;
margin:0 5px;
}
.newest-img {
margin:5px;
}
.newest-img a {
display:block;
}
.newest-item .add-cart {
position:absolute;
bottom:7px;
left:22px;
}
#newest .left {
left:-6px;
top:85px;
}
#newest .right {
right:4px;
top:85px;
}
.big-block {
width:950px;
margin:0 auto 20px;
}
.big-block-top {
height:25px;
background:url(ikonik-images/big-top.png) no-repeat center bottom;
}
.big-block-bottom {
height:25px;
background:url(ikonik-images/big-bottom.png) no-repeat center top;
}
.big-block-content {
padding:15px 0;
min-height:280px;
background:url(ikonik-images/big-middle.png) repeat-y center top;
}
.block-left {
width:565px;
float:left;
margin:0 10px 0 30px;
}
.block-right {
width:290px;
float:left;
margin-left:30px;
}
.blog-entry {
margin-bottom:25px;
}
.blog-title {
padding-bottom:5px;
background:url(ikonik-images/dots.png) repeat-x left bottom;
margin-bottom:5px;
font-weight:bold;
}
.blog-meta {
font-size:0.85em;
margin-bottom:15px;
height:17px;
line-height:17px;
}
.blog-thumb {
margin-bottom:10px;
}
.blog-more {
margin:10px 0 40px;
}
.blog-more .round {
float:left;
text-transform:none;
}
.blog-share {
line-height:28px;
float:right;
text-align:right;
}
.blog-share a {
position:relative;
top:4px;
margin:0 1px;
}
.blog-content h1, .blog-content h2, .blog-content h3, .blog-content h4, .blog-content h5, .blog-content h6, .blog-content ul, .blog-content ol, .blog-content p {
margin-bottom:13px;
}
.blog-content h1, .blog-content h2, .blog-content h3 {
padding-top:7px;
}
.blog-content p, .blog-content ul li, .blog-content ol li {
line-height:1.5em;
}
.blog-content ul, .blog-content ol {
margin-left:20px;
}
.blog-content ul li, .blog-content ol li {
margin-bottom:4px;
}
.blog-content blockquote {
padding-left:60px;
background:url(ikonik-images/blog-quote.png) no-repeat left top;
}
.wp-caption {
text-align:center;
font-size:0.85em;
font-style:italic;
}
.blog-content .alignright {
float:right;
margin:0 0 10px 10px;
}
.blog-content .alignleft {
float:left;
margin:0 10px 10px 0;
}
.blog-content .aligncenter {
display:block;
clear:both;
}
.preview-link, .download-link {
font-size:1.3em;
line-height:2.4;
padding:5px 10px 5px 30px;
margin-right:5px;
}
.preview-link {
background:url(ikonik-images/icon-preview.png) no-repeat left center;
}
.download-link {
background:url(ikonik-images/icon-download.png) no-repeat left center;
}
.page-title {
font-size:1.6em;
line-height:30px;
font-weight:bold;
letter-spacing:-1px;
float:left;
margin-left:20px;
}
.pagination {
float:right;
text-aligm:right;
margin-right:30px;
height:30px;
line-height:30px;
font-size:0.85em;
}
.pagination a {
margin-left:3px;
}
.pagination select {
padding:3px;
width:135px;
font-size:1em;
}
.pagination span.none {
margin-left:3px;
}
hr.pagination-break {
clear:both;
border-width:0 0 1px;
border-style:solid;
border-color:#ccc;
height:10px;
margin:0 30px 0 20px;
}
hr.break {
clear:both;
border-width:0 0 1px;
border-style:solid;
border-color:#ccc;
height:10px;
margin:0 0 15px;
}
.icon-list {
margin:10px 30px 0 20px;
}
.icon-title {
font-weight:bold;
font-size:1.1em;
height:20px;
line-height:20px;
margin-bottom:5px;
padding:0 5px;
}
.icon-title a {
float:right;
font-size:0.8em;
}
.icon-item {
float:left;
width:430px;
position:relative;
margin:10px;
}
.icon-top {
height:10px;
background:url(ikonik-images/list-top.png) no-repeat center bottom;
}
.icon-bottom {
height:10px;
background:url(ikonik-images/list-bottom.png) no-repeat center top;
}
.icon-middle {
height:200px;
width:410px;
padding:0 10px;
background:url(ikonik-images/list-middle.png) repeat-y center top;
text-align:center;
overflow:hidden;
}
.icon-description {
display:none;
position:absolute;
bottom:0;
left:0;
width:400px;
padding:10px 15px 15px;
background:url(ikonik-images/list-hover.png) no-repeat bottom left;
}
.icon-description p {
margin:5px 0;
}
.icon-description ul {
margin-left:15px;
list-style-image:url(ikonik-images/arrow-right-white.png);
}
ul.tabs-nav {
list-style:none;
border-bottom:1px solid #aaa;
font-size:0.85em;
}
ul.tabs-nav li {
float:left;
position:relative;
margin-left:10px;
}
ul.tabs-nav li a {
position:relative;
bottom:-1px;
display:block;
padding:3px 7px;
border-width:1px;
border-style:solid;
border-color:#bbb #bbb #aaa #bbb;
background:#aaa;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
}
ul.tabs-nav li a.current {
border-color:#aaa #aaa #fff #aaa;
background:#fff;
}
div.tabs-panels {
margin:10px;
}
div.tabs-panel {
position:relative;
display:none;
}
.posts-list {
list-style:none;
}
.posts-list li {
position:relative;
padding:10px 0 10px;
min-height:42px;
margin-bottom:5px;
background:url(ikonik-images/dots.png) repeat-x bottom left;
}
.posts-list li:after {
clear:both;
content:' ';
display:block;
font-size:0;
line-height:0;
visibility:hidden;
width:0;
height:0;
}
* html .posts-list li {
height:1%;
}
li p.titles {
float:left;
width:440px;
}
li p.counts {
float:right;
width:95px;
text-align:center;
}
li p.titles a, li p.counts {
font-size:1.2em;
}
li p.titles span, li p.counts span {
display:block;
font-size:11px;
}
li p.counts img {
width:24px;
height:24px;
}
.tabs-subscribe {
position:absolute;
top:-30px;
right:0px;
}
.tabs-subscribe a {
padding-right:22px;
background:url(ikonik-images/icon-rss.png) no-repeat right center;
}
#checkout-head {
font-size:1.6em;
line-height:30px;
font-weight:bold;
letter-spacing:-1px;
float:left;
margin:0;
}
#checkout-head span {
font-size:0.6em;
font-style:italic;
line-height:30px;
font-weight:normal;
letter-spacing:0;
}
.checkout-pagination {
float:right;
text-aligm:right;
font-size:0.85em;
height:30px;
line-height:40px;
margin-right:0;
}
table.payment {
margin:0 0 20px;
border-width:1px;
border-style:solid;
border-collapse:collapse;
}
table.payment th, table.payment td {
padding:5px;
}
.td-first img {
float:left;
width:64px;
height:64px;
margin-right:5px;
}
.td-first strong, .td-first em {
display:block;
margin-left:70px;
}
table.payment tr.total {
font-weight:bold;
}
div.form h4 {
margin:20px 0 10px;
padding-bottom:5px;
}
div.form label {
float:left;
width:100px;
text-align:right;
margin-right:10px;
}
div.form .clear {
height:10px;
}
.wpsc_checkout_forms input.broap {
display:block;
width:130px;
border:none;
height:27px;
cursor:pointer;
text-transform:uppercase;
font-size:0.9em;
}
.single-image-box {
width:400px;
position:relative;
float:left;
margin:20px 10px 0;
}
.single-image-left, .single-image-right {
width:25px;
float:left;
height:237px;
background-position:top left;
background-repeat:no-repeat;
}
.single-image-left {
background-image:url(ikonik-images/feat-left.png);
}
.single-image-right {
background-image:url(ikonik-images/feat-right.png);
}
.single-image {
width:350px;
float:left;
height:217px;
background:transparent url(ikonik-images/feat-middle.png) repeat-x top left;
text-align:center;
padding-top:20px;
}
.single-write {
float:left;
width:470px;
margin:20px 0 10px 20px;
}
.single-write h3 {
font-weight:bold;
}
.single-write h1, .single-write h2, .single-write h3, .single-write h4, .single-write h5, .single-write h6, .single-write p, .single-write ul, .single-write ol {
margin-bottom:10px;
line-height:1.2;
}
.single-write ul {
list-style-image:url("ikonik-images/arrow-right.png");
margin-left:15px;
}
.single-set-preview h3 {
float:left;
margin-left:40px;
}
.single-set-preview h3 span {
font-size:0.85em;
margin-left:10px;
}
.single-set-preview .add-cart {
float:right;
margin-right:62px;
}
.single-set-icon {
margin:10px 50px 10px 40px;
text-align:center;
padding:20px;
border:1px solid #ddd;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.comment-count {
display:block;
float:right;
height:17px;
line-height:17px;
padding-left:25px;
background:url(ikonik-images/icon-comment.png) no-repeat left center;
}
#comments {
margin-top:30px;
}
#comments h3 {
margin-bottom:25px;
}
.comment {
margin-bottom:15px;
}
.comment-left {
width:65px;
height:52px;
float:left;
background:url(ikonik-images/avatar-bubble.png) no-repeat top left;
margin-right:10px;
position:relative;
}
.comment-left img {
position:absolute;
top:6px;
left:6px;
width:40px;
height:40px;
}
.comment-right {
border:1px solid #e5e5e5;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding:15px;
margin-left:75px;
line-height:1.5;
}
.comment cite {
display:block;
font-style:normal;
font-weight:bold;
font-size:1.1em;
padding-bottom:10px;
margin-bottom:10px;
background:url(ikonik-images/dots.png) repeat-x bottom left;
}
.comment cite small {
float:right;
margin-top:3px;
font-weight:normal;
}
#respond {
margin-top:30px;
}
#comment_form fieldset {
border:1px solid #e5e5e5;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding:15px;
}
#comment_form p {
margin-bottom:10px;
}
.text {
border:1px solid #e5e5e5;
-moz-border-radius:10px;
-webkit-border-radius:10px;
padding:3px 10px;
margin-right:10px;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
}
.sidebar-box {
margin-bottom:15px;
}
.sidebar-top {
height:10px;
width:280px;
background:url(ikonik-images/sidebar-top.png) no-repeat top left;
}
.sidebar-bottom {
height:10px;
width:280px;
background:url(ikonik-images/sidebar-bottom.png) no-repeat top left;
}
.sidebar-content {
font-size:0.85em;
padding:0 0 0 10px;
background:url(ikonik-images/sidebar-middle.png) repeat-y top left;
}
.sidebar-content h3 {
font-size:1.45em;
margin-bottom:5px;
}
.sidebar-content ul {
list-style-image:url(ikonik-images/arrow-right.png);
}
.sidebar-content ul li {
margin-left:16px;
line-height:1.5;
}
.sidebar-box {
width:280px;
position:relative;
}
.sidebar-blocks {
list-style:none;
}
.sidebar-blocks li {
width:280px;
height:64px;
position:relative;
background-position:bottom left;
background-attachment:scroll;
background-repeat:no-repeat;
background-image:url(ikonik-images/sidebar-block.png);
margin-bottom:10px;
}
.sidebar-blocks li:hover {
background-position:top left;
}
.sidebar-blocks li img {
float:left;
position:relative;
width:48px;
height:48px;
margin:8px;
z-index:1;
}
.sidebar-blocks li h4, .sidebar-blocks li p {
margin:0 0 0 64px;
position:relative;
z-index:1;
}
.sidebar-blocks li h4 {
font-weight:bold;
padding:10px 0 0;
}
.sidebar-blocks li p {
font-size:0.9em;
}
.sidebar-blocks li a {
display:block;
width:280px;
height:64px;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
overflow:hidden;
text-indent:-10000px;
z-index:2;
}
.subscibe-big a {
display:block;
width:238px;
height:48px;
background:url(ikonik-images/subscribe.png) no-repeat top left;
margin-bottom:15px;
overflow:hidden;
text-indent:-1000px;
}
.round {
height:28px;
line-height:28px;
font-size:0.9em;
text-transform:uppercase;
margin-right:12px;
}
.roundbutton {
border:medium none;
display:block;
font-size:0.9em;
height:28px;
margin:10px 0;
padding-bottom:5px;
text-align:center;
text-transform:uppercase;
width:130px;
cursor:pointer;
}
.add-cart {
text-align:right;
display:block;
width:95px;
height:28px;
line-height:28px;
font-size:0.9em;
margin-right:12px;
}
.round span, .add-cart span {
display:block;
position:relative;
right:-12px;
padding-right:12px;
}
.badge {
position:absolute;
top:0;
right:0;
z-index:4;
}
.icon-list .badge {
top:25px;
right:1px;
}
.single-image-box .badge {
right:12px;
}
.banner {
text-align:center;
margin:20px 0;
}
a.browse {
display:block;
width:32px;
height:32px;
float:left;
cursor:pointer;
font-size:1px;
position:absolute;
z-index:100;
}
#things .next {
top:50px;
right:-35px;
}
#things .prev {
top:50px;
left:-35px;
}
#featured .next {
top:85px;
right:3px;
}
#featured .prev {
top:85px;
right:385px;
}
.blog-pagination {
font-size:1.2em;
margin-top:35px;
text-transform:lowercase;
}
.prev-page {
float:left;
}
.next-page {
float:right;
}
.pagination span.indicator {
margin:0 10px;
}
.ad-125 {
margin-bottom:0;
}
.ad-125 a {
display:block;
width:125px;
height:125px;
overflow:hidden;
float:left;
margin:5px 10px 5px 0;
}
.clear {
clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:0;
}
.clearfix:after {
clear:both;
content:' ';
display:block;
font-size:0;
line-height:0;
visibility:hidden;
width:0;
height:0;
}
* html .clearfix {
height:1%;
}
img, div, a, input {
behavior:url(script/iepngfix.htc);
}
#footer {
position:relative;
margin:-45px auto 0;
height:20px;
border-bottom:5px solid #000;
padding-bottom:20px;
font-size:11px;
text-transform:uppercase;
}
#footer a {
color:#FFF;
text-decoration:none;
}
.footer-left {
float:left;
margin-left:10px;
}
.footer-right {
float:right;
margin-right:25px;
}
</style>
<link media="screen" rel="stylesheet" type="text/css" href="themes/blue/style.css" />
<script type="text/javascript" src="script/jquery-1.4.2.js"></script>
<script type="text/javascript" src="script/jquery.tools.js"></script>
<script type="text/javascript" src="script/ikonik.js"></script>
</head>
<body>
<div id="wrap">
<div id="main" class="clearfix">
<div id="cart" class="container">
<div id="cart-content" class="grid">
<div id="things" class="inside"> <a class="next right browse"></a>
<div class="cart-slider">
<div class="cart-belt">
<div class="cart-divider">
<div class="cart-item">
<div class="cart-icon"><img class="" src="uploads/icon1.png" width="64" height="64" alt="" /></div>
<a class="cart-cancel" href="#">Cancel</a>
<div class="cart-zip">A pack</div>
<div class="cart-price">$99</div>
</div>
<div class="cart-item">
<div class="cart-icon"><img class="" src="uploads/icon2.png" width="64" height="64" alt="" /></div>
<a class="cart-cancel" href="#">Cancel</a>
<div class="cart-price">$99</div>
</div>
<div class="cart-item">
<div class="cart-icon"><img class="" src="uploads/icon3.png" width="64" height="64" alt="" /></div>
<a class="cart-cancel" href="#">Cancel</a>
<div class="cart-zip">A pack</div>
<div class="cart-price">$99</div>
</div>
</div>
<div class="cart-divider">
<div class="cart-item">
<div class="cart-icon"><img class="" src="uploads/icon2.png" width="64" height="64" alt="" /></div>
<a class="cart-cancel" href="#">Cancel</a>
<div class="cart-price">$99</div>
</div>
<div class="cart-item">
<div class="cart-icon"><img class="" src="uploads/icon3.png" width="64" height="64" alt="" /></div>
<a class="cart-cancel" href="#">Cancel</a>
<div class="cart-zip">A pack</div>
<div class="cart-price">$99</div>
</div>
<div class="cart-item">
<div class="cart-icon"><img class="" src="uploads/icon1.png" width="64" height="64" alt="" /></div>
<a class="cart-cancel" href="#">Cancel</a>
<div class="cart-price">$99</div>
</div>
</div>
</div>
</div>
<a class="prev left browse"></a> </div>
<div id="checkout" class="inside">
<p>You Have <span class="x">6 items</span> in your shopping cart.</p>
<div class="clear" style="height:20px;"></div>
<div id="checkout-left">
<p>Total Payment :</p>
<h3 class="x">$350.00</h3>
</div>
<div id="checkout-right"><a href="checkout.html" class="round"><span>Checkout</span></a></div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="clearfix"></div>
<div id="full" class="container clearfix">
<div id="head">
<div class="grid">
<div id="cartstatus">
<p> <a id="carttoggle">Review Purchase</a> | <span id="pricestatus">$ 350.00</span> </p>
</div>
<h1 id="logo"><a href="index.html">iKonik</a></h1>
<ul id="navigation">
<li><a class="round" href="index.html"><span>Home</span></a></li>
<li><a class="round" href="blog.html"><span>Blog</span></a></li>
<li><a class="round" href="product-overview.html"><span>Icons</span></a></li>
<li><a class="round round-current" href="about.html"><span>About</span></a></li>
<li><a class="round" href="checkout.html"><span>Checkout</span></a></li>
</ul>
<div id="search">
<form action="#" method="get">
<input type="text" value="Search" id="s" name="s" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" />
<input type="submit" id="searchsubmit" value="Search" />
</form>
</div>
</div>
</div>
<div class="big-block grid">
<div class="big-block-top"></div>
<div class="big-block-content clearfix">
<div class="block-left">
<div class="blog-entry">
<h3 class="blog-title"><a href="#">About Us</a></h3>
<div class="blog-meta">Posted <strong>3 weeks ago</strong> in <a href="#">Uncategorized</a> > <a href="#">12 Comments</a></div>
<div class="blog-content">
<div class="wp-caption alignright" id="attachment_142"><img src="uploads/blog2.jpg" alt="" />
<p class="wp-caption-text">testing image caption</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci. Duis libero orci, pretium a, <a href="#">convallis quis</a>, pellentesque a, dolor. Curabitur vitae nisi non dolor vestibulum consequat.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur quam augue, vehicula quis, tincidunt vel, varius vitae, nulla. Sed convallis orci. Duis libero orci, pretium a, <a href="#">convallis quis</a>, pellentesque a, dolor. Curabitur vitae nisi non dolor vestibulum consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. vivamus tempor justo sit amet metus cursus consequat. Nulla viverra, felis vel accumsan fermentum, nisl enim aliquam risus, id convallis mauris turpis iaculis felis. Etiam sollucitudin augue et turpis. Vivamus rutrum metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. vivamus tempor justo sit amet metus cursus consequat. Nulla viverra, felis vel accumsan fermentum, nisl enim aliquam risus, id convallis mauris turpis iaculis felis.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. vivamus tempor justo sit amet metus cursus consequat. Nulla viverra, felis vel accumsan fermentum, nisl enim aliquam risus, id convallis mauris turpis iaculis felis. Etiam sollucitudin augue et turpis. Vivamus rutrum metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. vivamus tempor justo sit amet metus cursus consequat. Nulla viverra, felis vel accumsan fermentum, nisl enim aliquam risus, id convallis mauris turpis iaculis felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. vivamus tempor justo sit amet metus cursus consequat. Nulla viverra, felis vel accumsan fermentum, nisl enim aliquam risus, id convallis mauris turpis iaculis felis. Etiam sollucitudin augue et turpis. Vivamus rutrum metus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. vivamus tempor justo sit amet metus cursus consequat.</p>
</div>
</div>
</div>
<div class="block-right">
<div class="sidebar-wrap">
<div class="sidebar-box">
<div class="sidebar-top"></div>
<div class="sidebar-content">
<div id="blog-search">
<form action="#" method="get">
<input type="text" value="Blog Search" id="blog-s" name="s" onfocus="if (this.value == 'Blog Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Blog Search';}" />
<input type="submit" id="blog-searchsubmit" value="Search" />
</form>
</div>
</div>
<div class="sidebar-bottom"></div>
</div>
<div class="subscibe-big"> <a href="#">Subscribe - Don't miss the good news</a> </div>
<div class="sidebar-box">
<div class="sidebar-top"></div>
<div class="sidebar-content">
<h3>Categories</h3>
<ul>
<li><a href="#">Category One</a></li>
<li><a href="#">Category Two</a></li>
<li><a href="#">Category Three</a></li>
</ul>
</div>
<div class="sidebar-bottom"></div>
</div>
<ul class="sidebar-blocks">
<li> <img src="uploads/icon1.png" alt="" />
<h4>Collection One</h4>
<p>123 glossy icons</p>
<a href="#">Collection One</a> </li>
<li> <img src="uploads/icon2.png" alt="" />
<h4>Collection Two</h4>
<p>123 glossy icons</p>
<a href="#">Collection Two</a> </li>
<li> <img src="uploads/icon3.png" alt="" />
<h4>Collection Three</h4>
<p>123 glossy icons</p>
<a href="#">Collection Three</a> </li>
</ul>
</div>
</div>
</div>
<div class="big-block-bottom"></div>
</div>
</div>
</div>
</div>
<div id="footer" class="container">
<div class="grid clearfix">
<div class="footer-left">Copyright © 2010, Your Company Here, All Rights Reserved</div>
<div class="footer-right"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://www.tokokoo.com/">tokokoo</a></div>
</div>
</div>
</body>
</html>
Related examples in the same category