Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
210 lines (172 sloc) 8.18 KB
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Default 1</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src=""></script>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/bootstrap-dropdown.js"></script>
<script type='text/javascript'>
<!-- Le styles -->
<link href="styles/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
/* Override some defaults */
html, body {
background: url('images/background.png') repeat top center;
body {
padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
.container > footer p {
text-align: center; /* center align it with the container */
.container {
width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */
/* The white background content wrapper */
.content {
background-color: #fff;
padding: 20px;
margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
/* Page header tweaks */
.page-header {
background-color: #f5f5f5;
padding: 20px 20px 10px;
margin: -20px -20px 20px;
/* Styles you shouldn't keep as they are for displaying this base example only */
.content .span10,
.content .span4 {
min-height: 500px;
/* Give a quick and non-cross-browser friendly divider */
.content .span4 {
margin-left: 0;
padding-left: 19px;
border-left: 1px solid #eee;
.topbar .btn {
border: 0;
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<div class="topbar">
<div class="fill">
<div class="container">
<a class="brand" href="index.html">Project X</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="">Sherzod Kutfiddinov</a></li>
<div class="container">
<div class="content">
<div class="page-header">
<h1>Sample Page Layouts <small>Making your life easier</small></h1>
<div class="row">
<div class="span10">
<h2>Purpose of this project.</h2>
<div class='cleaner_h20'></div>
After a lot of successful web projects, I found myself writing almost same code over
and over again. Sometimes, I copied codes I wrote before, and sometimes I had to create
a new one. Even though there are a lot of websites which share web designs, I decided to
create one to share layouts. I try to focus more on layout rather than anything else. So,
you may find some high quality images used as thumbnails. Obviously, it's the bad practice,
and it's only for demo purposes.
<div class='cleaner_h20'></div>
<h2>How this project can help you?</h2>
<div class='cleaner_h20'></div>
These layouts are basic layouts you will be using in most of your web projects.
I try not to add any designs other than basic CSS, so that you can add them to fit
your needs and style.
<div class='cleaner_h20'></div>
<h2>How can you contribute to this project?</h2>
<div class='cleaner_h20'></div>
Pull the code from github or download as a zipped file. Create new unique layout
and commit your codes or send them as an attachment to
<a href=''></a>. I will check the code for a
valid HTML and CSS, and will post it on github. Or at least send me your PSD file or some
kind of sketch of the layout you would like to see in this project, and I will try my
best to create one.
<div class='cleaner_h20'></div>
<h2>Why Twitter Bootstrap?</h2>
<div class='cleaner_h20'></div>
As you can see, I chose to use Twitter Bootstrap as a main library for creating layouts,
and there are a lot of good reasons for it. First of all, it's fast to create layouts
and it's easy to understand the code. It has nice pre-built CSS and couple JS Libraries,
which are very helpful. For a full info about Twitter Bootstrap, refer to its <a href='' target='_blank'>github page</a>.
<div class="span4">
<h3>Sample Layouts</h3>
<div class='cleaner_h20'></div>
<a href="default1.html">Default 1</a><div class='cleaner_h5'></div>
<a href="default2.html">Default 2</a><div class='cleaner_h5'></div>
<a href="default3.html">Default 3</a>
<div class='separator cleaner_h10'></div>
<div class='cleaner_h10'></div>
<a href="homepage1.html">Homepage 1</a><div class='cleaner_h5'></div>
<a href="homepage2.html">Homepage 2 - classifieds</a><div class='cleaner_h5'></div>
<a href="homepage2.1.html">Homepage 2.1 - classifieds</a><div class='cleaner_h5'></div>
<a href="homepage2.2.html">Homepage 2.2 - auction</a>
<div class='separator cleaner_h10'></div>
<div class='cleaner_h10'></div>
<a href="login1.html">Login 1</a>
<div class='separator cleaner_h10'></div>
<div class='cleaner_h10'></div>
<a href="account1.html">Account 1</a><div class='cleaner_h5'></div>
<a href="account1.settings.html">Account 1 - settings page</a>
<div class='separator cleaner_h10'></div>
<div class='cleaner_h10'></div>
<a href="product1.html">Product 1 - eBay</a><div class='cleaner_h5'></div>
<a href="product2.html">Product 2 - classifieds</a>
<div class='separator cleaner_h10'></div>
<div class='cleaner_h10'></div>
<a href="contact1.html">Contact 1</a>
<div class='separator cleaner_h10'></div>
<div class='cleaner_h10'></div>
<a href="catalog1.html">Catalog 1</a>
<div class='separator cleaner_h10'></div>
<div class='cleaner_h10'></div>
<a href="search1.html">Search 1</a>
<p>&copy; Company 2011 by <a href='' target='_blank'>Sherzod Kutfiddinov</a></p>
</div> <!-- /container -->