The code for this one is pretty simple.

1 HTML5 page with 1 CSS3 Stylesheet.

The HTML

<html>
<head>
<title>1st Division Music</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body>
<div id="top">
<a href="http://www.beatport.com/label/1st-division-house-recordings/25523" target="_blank"><span id="beatport"></span></a>
<a href="http://www.apple.com/itunes/" target="_blank"><span id="itunes"></span></a>
<a href="https://play.spotify.com/artist/0sOzhZRQMKofZc4aqZUYZf" target="_blank"><span id="spotify"></span></a>
</div>
<div id="middle"><div id="logo"></div></div>
<div id="bottom">
<a href="mailto:info@1st-division.nl" ><span id="email"></span></a>
<a href="https://soundcloud.com/#1st-division-music" target="_blank"><span id="soundcloud"></span></a>
<a href="http://www.youtube.com/1stDivisionMusic" target="_blank"><span id="youtube"></span></a>
<a href="https://www.facebook.com/1stDivisionMusic" target="_blank"><span id="facebook"></span></a>
</div>
</body>
</html>

The CSS

body {
margin:6% 0 0 0;
background:#000000;
}

#top {
background:#131313;
height:14%;
border-top:solid 1px #4d4d4d;
margin-bottom:1%;
border-bottom:solid 1px #4d4d4d;
}

#beatport {
background: url('img/beatport.png') no-repeat center;
background-size:contain;
width:16%;
height:100%;
float:left;
}

#itunes {
background: url('img/itunes.png') no-repeat center;
background-size:contain;
width:16%;
height:100%;
float:left;
}

#spotify {
background: url('img/spotify.png') no-repeat center;
background-size:contain;
width:16%;
height:100%;
float:left;
}

#facebook {
background: url('img/facebook.png') no-repeat center;
background-size:contain;
width:4%;
height:100%;
float:right;
}

#facebooksmall {
background: url('img/facebooks.png') no-repeat center;
background-size:contain;
width:4%;
height:100%;
float:right;
}

#twitter {
background: url('img/twitter.png') no-repeat center;
background-size:contain;
width:4%;
height:100%;
float:right;
}

#youtube {
background: url('img/youtube.png') no-repeat center;
background-size:contain;
width:4%;
height:100%;
float:right;
}

#youtubesmall {
background: url('img/youtubes.png') no-repeat center;
background-size:contain;
width:4%;
height:100%;
float:right;
}

#soundcloud {
background: url('img/soundcloud.png') no-repeat center;
background-size:contain;
width:4%;
height:100%;
float:right;
}

#email {
background: url('img/email.png') no-repeat center;
background-size:contain;
width:4%;
height:100%;
float:right;
margin-right:2%;
}

#middle {
background: url('img/bg.png') no-repeat center;
background-size:cover;
height:50%;
border-top:solid 1px #4d4d4d;
border-bottom:solid 1px #4d4d4d;
}

#bottom {
background:#131313;
height:14%;
margin-top:1%;
border-top:solid 1px #4d4d4d;
border-bottom:solid 1px #4d4d4d;
}

#bloom {
background: url('img/bloom.png') no-repeat center;
background-size:contain;
width:16%;
margin-left:1%;
height:100%;
float:left;
}

#malloy {
background: url('img/malloy.png') no-repeat center;
background-size:contain;
width:16%;
margin-right:1%;
height:100%;
float:right;
}

#dlcg {
background: url('img/dlcg.png') no-repeat center;
background-size:contain;
width:30%;
margin-left:10%;
height:100%;
float:left;
}

CHOOSE SOMETHING ELSE PROJECTS