<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>sc.chinaz.com</title>
<meta name="author" content="ZERGE" />
<meta name="keywords" content="responsive html template, portfolio, creative, design, clean, minimal, light, dark, twitter, bootstrap" />
<meta name="description" content="Responsive HTML Template - Typography" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Styles -->
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" />
<link href="css/prettyPhoto.css" rel="stylesheet" />
<link href="css/docs.css" rel="stylesheet" /><!-- Only for demo -->
<link href="css/prettify.css" rel="stylesheet" /><!-- Only for demo -->
<link href="css/style.css" rel="stylesheet" />
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="shortcut icon" href="img/ico/favicon.ico" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/ico/apple-touch-icon-144-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/ico/apple-touch-icon-114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/ico/apple-touch-icon-72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" href="img/ico/apple-touch-icon-57-precomposed.png" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div class="container">
<!-- Masthead
================================================== -->
<header>
<!-- Top Panel
================================================== -->
<div id="top-panel">
<div class="login-box">
<form />
<div class="input-prepend">
<span class="add-on"><i class="icon-user"></i></span><input class="span2" id="username" type="text" name="username" placeholder="User Name" />
</div>
<div class="input-prepend">
<span class="add-on"><i class="icon-lock"></i></span><input class="span2" id="userpassword" type="password" name="userpassword" placeholder="Password" />
</div>
<label class="checkbox">
<input type="checkbox" /> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</form>
</div><!-- login-box -->
<div class="login-button toggle">
<a href="#">Sign in</a>
</div><!-- login-button -->
</div><!-- top-panel -->
<!-- Navbar
================================================== -->
<div class="row">
<div class="span3 logo">
<a href="index.html"><img src="img/logo.png" alt="" /></a>
</div><!-- logo -->
<div class="span9 navigation">
<div id="menu" class="fix-fish-menu clearfix">
<ul id="nav" class="sf-menu">
<li><a href="index.html">Home</a>
<ul>
<li><a href="index-flex.html">Home + Flex Slider</a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a>
<ul>
<li><a href="blog.html">Blog</a></li>
<li><a href="blog-post.html">Blog Post + Image</a></li>
<li><a href="blog-post-video.html">Blog Post + Video</a></li>
</ul>
</li>
<li> <a href="#">Portfolio</a>
<ul>
<li><a href="#">3 Columns <span class="sf-sub-indicator"></span></a>
<ul>
<li><a href="portfolio-3.html">3 Columns + Horizontal</a></li>
<li><a href="portfolio-vertical-3.html">3 Columns + Vertical</a></li>
<li><a href="portfolio-description-3.html">3 Columns + Description</a></li>
<li><a href="portfolio-big-3.html">3 Big Columns</a></li>
</ul>
</li>
<li><a href="#">4 Columns <span class="sf-sub-indicator"></span></a>
<ul>
<li><a href="portfolio-4.html">4 Columns + Horizontal</a></li>
<li><a href="portfolio-description-4.html">4 Columns + Description</a></li>
<li><a href="portfolio-vertical-4.html">4 Columns + Vertical</a></li>
</ul>
</li>
<li><a href="#">Portfolio Item <span class="sf-sub-indicator"></span></a>
<ul>
<li><a href="item.html">Standard</a></li>
<li><a href="item-slideshow.html">Slideshow</a></li>
<li><a href="item-video.html">Video</a></li>
</ul>
</li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
</li>
<li class="active"> <a href="typography.html">Typography</a></li>
<li> <a href="shortcodes.html">Shortcodes</a></li>
<li> <a href="#">Pages</a>
<ul>
<li><a href="left-content.html">Left + Content</a></li>
<li><a href="content-right.html">Content + Right</a></li>
<li><a href="full-width.html">Full Width Page</a></li>
<li><a href="#">Submenu <span class="sf-sub-indicator"></span></a>
<ul>
<li><a href="#">Item #1</a></li>
<li><a href="#">Item #2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="contacts.html">Contacts</a></li>
<li><a href="http://themeforest.net/item/claystone-responsive-html-template/2746744?ref=zerge"><i class="icon-shopping-cart icon-white"></i>Purchase</a></li>
</ul><!-- end #nav -->
</div><!-- end #menu -->
</div><!-- navigation -->
</div><!-- row -->
<div class="row">
<div class="span3"><div class="border-5-1"></div></div>
<div class="span9"><div class="border-5-1 hide-border"></div></div>
</div><!-- row -->
<div class="row">
<div class="span3 clearfix">
<ul class="social-icons">
<li class="pinterest"><a href="http://pinterest.com/zergev/"></a></li>
<li class="twitter"><a href="http://twitter.com"></a></li>
<li class="dribbble"><a href="http://dribbble.com"></a></li>
<li class="facebook"><a href="http://facebook.com"></a></li>
<li class="google"><a href="http://plus.google.com"></a></li>
<li class="linkedin"><a href="http://linkedin.com"></a></li>
<li class="behance"><a href="http://behance.net"></a></li>
<li class="rss"><a href="#"></a></li>
</ul>
</div><!-- span3 -->
<div class="span9">
<div class="separator">
<h3>Typography</h3>
</div><!-- separator -->
<span></span>
</div><!-- span9 -->
</div><!-- row -->
<div class="row">
<div class="span3"><div class="border-1-5"></div></div>
<div class="span9"><div class="border-1-5 hide-border"></div></div>
</div><!-- row -->
</header>
<!-- Typography
================================================== -->
<div id="entry-page">
<div class="page-header">
<h2>Default grid system <small style="display:block;">12 columns with a responsive twist</small></h2>
</div>
<div class="row show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
<div class="row show-grid">
<div class="span4">4</div>
<div class="span4">4</div>
<div class="span4">4</div>
</div>
<div class="row show-grid">
<div class="span4">4</div>
<div class="span8">8</div>
</div>
<div class="row show-grid">
<div class="span6">6</div>
<div class="span6">6</div>
</div>
<div class="r