rupertqin/index.html

## index.html

<html>
  <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="leilei.css">
  </head>
  <body>
    <div class="wrapper">
      <header>
        <div class="branding">
          <a href="#"></a>
        </div>
      </header>
      <main>
        <ul class="list">
          <li>
           <a href="#">Bottled for your pleasure</a>
           <a href="#"></a>
           <img src="http://colly.com/images/site/n-pig.png"></img>
           <a href="#">. I'm a designer. I also do plenty of writing, speaking, and sleeping. I'm based in Nottingham, England, but my work means I'm often found in all sorts of other fine places. </a>
          </li>
          <li>
           <a href="#">Bottled for your pleasure</a>
           <a href="#"></a>
           <img src="http://colly.com/images/site/n-pig.png"></img>
           <a href="#">. I'm a designer. I also do plenty of writing, speaking, and sleeping. I'm based in Nottingham, England, but my work means I'm often found in all sorts of other fine places. </a>
          </li>
          <li>
           <a href="#">Bottled for your pleasure</a>
           <a href="#"></a>
           <img src="http://colly.com/images/site/n-pig.png"></img>
           <a href="#">. I'm a designer. I also do plenty of writing, speaking, and sleeping. I'm based in Nottingham, England, but my work means I'm often found in all sorts of other fine places. </a>
          </li>
          <li>
           <a href="#">Bottled for your pleasure</a>
           <a href="#"></a>
           <img src="http://colly.com/images/site/n-pig.png"></img>
           <a href="#">. I'm a designer. I also do plenty of writing, speaking, and sleeping. I'm based in Nottingham, England, but my work means I'm often found in all sorts of other fine places. </a>
          </li>
        </ul>
      </main>
      <footer>
        footer
      </footer>
    </div>
  </body>
</html>

## lei.css
header{
}
body{
	background:url(http://colly.com/images/site/paper-tile.jpg);
	color:#000000;
}
.branding{
   background:url(http://colly.com/images/site/div-akacolly.png) no-repeat center bottom;
   height: 112px;
}
.branding a{
	background:url(http://colly.com/images/site/logo.png) no-repeat 0 0;
	width:460px;
	height:86px;
	display: block;
	margin:0 auto;
}
.branding a:hover{
    background-position: 0 -90px;
}
.list{
	width:980px;
	margin:0 auto;
	list-style:none;
	margin-top:30px;
	padding:0;
}
.list li{
	width: 220px;
    float: left;
	margin-right:10px;
	text-align: center;
	background-color: #fff;
}
.list li a{
	text-decoration:none;
	color:#999;
	display:inline-block;
	margin:10px;
}
.list li img{
	height:100px;
	width:207;
}
footer{
	clear: both;
}
@media screen and (min-width: 1000px) {
  .list{
    width:980;
  }
}

@media screen and (max-width: 980px) and (min-width: 520px) {
  .list {
    width:460px;
  }
}
@media screen and (max-width: 520px) {
  .list {
    width:230px;
  }
}

	<html>
	<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="leilei.css">
	</head>
	<body>
	<div class="wrapper">
	<header>
	<div class="branding">
	<a href="#"></a>
	</div>
	</header>
	<main>
	<ul class="list">
	<li>
	<a href="#">Bottled for your pleasure</a>
	<a href="#"></a>
	<img src="http://colly.com/images/site/n-pig.png"></img>
	<a href="#">. I'm a designer. I also do plenty of writing, speaking, and sleeping. I'm based in Nottingham, England, but my work means I'm often found in all sorts of other fine places. </a>
	</li>
	<li>
	<a href="#">Bottled for your pleasure</a>
	<a href="#"></a>
	<img src="http://colly.com/images/site/n-pig.png"></img>
	<a href="#">. I'm a designer. I also do plenty of writing, speaking, and sleeping. I'm based in Nottingham, England, but my work means I'm often found in all sorts of other fine places. </a>
	</li>
	<li>
	<a href="#">Bottled for your pleasure</a>
	<a href="#"></a>
	<img src="http://colly.com/images/site/n-pig.png"></img>
	<a href="#">. I'm a designer. I also do plenty of writing, speaking, and sleeping. I'm based in Nottingham, England, but my work means I'm often found in all sorts of other fine places. </a>
	</li>
	<li>
	<a href="#">Bottled for your pleasure</a>
	<a href="#"></a>
	<img src="http://colly.com/images/site/n-pig.png"></img>
	<a href="#">. I'm a designer. I also do plenty of writing, speaking, and sleeping. I'm based in Nottingham, England, but my work means I'm often found in all sorts of other fine places. </a>
	</li>
	</ul>
	</main>
	<footer>
	footer
	</footer>
	</div>
	</body>
	</html>
	header{
	}
	body{
	background:url(http://colly.com/images/site/paper-tile.jpg);
	color:#000000;
	}
	.branding{
	background:url(http://colly.com/images/site/div-akacolly.png) no-repeat center bottom;
	height: 112px;
	}
	.branding a{
	background:url(http://colly.com/images/site/logo.png) no-repeat 0 0;
	width:460px;
	height:86px;
	display: block;
	margin:0 auto;
	}
	.branding a:hover{
	background-position: 0 -90px;
	}
	.list{
	width:980px;
	margin:0 auto;
	list-style:none;
	margin-top:30px;
	padding:0;
	}
	.list li{
	width: 220px;
	float: left;
	margin-right:10px;
	text-align: center;
	background-color: #fff;
	}
	.list li a{
	text-decoration:none;
	color:#999;
	display:inline-block;
	margin:10px;
	}
	.list li img{
	height:100px;
	width:207;
	}
	footer{
	clear: both;
	}
	@media screen and (min-width: 1000px) {
	.list{
	width:980;
	}
	}

	@media screen and (max-width: 980px) and (min-width: 520px) {
	.list {
	width:460px;
	}
	}
	@media screen and (max-width: 520px) {
	.list {
	width:230px;
	}
	}