Skip to content

Instantly share code, notes, and snippets.

@rupertqin

rupertqin/index.html

Created October 12, 2014 09:06
Show Gist options
  • Save rupertqin/40f2791678ccec60c26c to your computer and use it in GitHub Desktop.
Save rupertqin/40f2791678ccec60c26c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Raw
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment