HTML
<!DOCTYPE html>
<html>
<head>
<title>The Fray Fan Web Site</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<header>
<h1>Fan Web Site The Fray</h1>
<nav>
<ul>
<li><a href="index.html"class="current">Home</a></li>
<li><a href="bio.html">Biography</a></li>
<li><a href="about.html">About</a></li>
</li>
<li><a href="news.html">News</a>
</li>
<li><a href="releases.html">Releases</a>
<ul>
<li><a href="albums.html">Albums</a></li>
<li><a href="singles.html">Singles</a></li>
</li>
</ul>
</nav>
</header>
<section class="border">
<article>
<figure>
<img src="images/100468-fray_617_409.jpg" id="normalimg" alt="The Fray" />
<figcaption>The Fray</figcaption>
</figure>
<hgroup>
<h2> H2 Title Lorem ipsum dolor sit amet</h2>
<h3> H3 Lorem ipsum dolor sit amet</h3>
</hgroup>
<p>Paragraph Lorem ipsum dolor sit amet</p>
</article>
<article>
<figure>
<img src="images/The Fray.png" alt="The Fray" />
<figcaption>The Fray</figcaption>
</figure>
<hgroup>
<h2> H2 Title Lorem ipsum dolor sit amet</h2>
<h3> H3 Lorem ipsum dolor sit amet</h3>
</hgroup>
<p>Paragraph Lorem ipsum dolor sit amet</p>
</article>
</section>
<aside>
<section class="popular-songs">
<h2>Top 5 Songs</h2>
<a href="http://open.spotify.com/track/5fVZC9GiM4e8vu99W0Xf6J">1. How to Save a Life</a>
<a href="http://open.spotify.com/track/4IoYz8XqqdowINzfRrFnhi">2. You Found Me</a>
<a href="http://open.spotify.com/track/57uX2vR9j9DNiANDYfXw1i">3. Never Say Never</a>
<a href="http://open.spotify.com/track/1N62wozuHCvczCkY4QidpP">4. Over My Head(Cable Car)</a>
<a href="http://open.spotify.com/track/6IDDwI0YOCAUDhMZltQekS">5. Love don't die</a>
</section>
<section class="contact-details">
<h2>Contact</h2>
<p>Raar<br />
CSS<br />
Nog meer onzin<br />
Onzin</p>
</section>
<section class="Shit">
<h2>News</h2>
<p>Raar<br />
CSS<br />
Nog meer onzin<br />
Onzin</p>
</section>
</aside>
<footer>
© Maker
<a href="https://www.facebook.com/TheFray" target="_blank" align="right"><img id="imgfooter" src="http://www.niftybuttons.com/webicons2/facebook.png" border="0" style="margin:1px;"></a>
<a href="https://twitter.com/thefray" target="_blank" align="right"><img id="imgfooter" src="http://www.niftybuttons.com/webicons2/twitter.png" border="0" style="margin:1px;"></a>
</footer>
</div><!-- .wrapper -->
</body>
CSS
body {
color: #666666;
background-color: #1f4643;
background-image: url("images/Greenpower.png");
background-position: center;
font-family: "Cuprum", Arial;
line-height: 1.4em;
margin: 0px;
text-align: auto;
}
.wrapper {
width: 940px;
margin: 20px auto 20px auto;
/*border: 1px solid #000000;*/
background-color: #ffffff;
}
header {
height: 160px;
background-image: url(images/header3.png);
background-repeat: no-repeat;
}
h1 {
text-indent: -9999px;
width: 940px;
height: 130px;
margin: 0px;
}
footer {
clear: both;
color: #ffffff;
background-color: #1f4643;
height: 30px;
}
nav {
clear: both;
color: #ffffff;
background-color: #ffffff;
height: 30px;
}
/*(OLD BODY) body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
}
*/
ul {
text-align: center;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
width: 147px;
}
ul li:hover {
background: #efefef;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #ffffff;
display: block;
color: #fff;
border: 1px solid #eeeeee;
}
ul li ul li:hover, ul li .current { background: #efefef; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
section.border {
float: left;
width: 659px;
border-right: 1px solid #eeeeee;
}
article {
clear: both;
overflow: auto;
width: 100%;
}
hgroup {
margin-top: 40px;
}
figure {
float: left;
width: auto;
height: auto;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;
}
#bio1 {
float: left;
width: auto;
height: auto;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;
}
#bio2 {
float: left;
width: auto;
height: auto;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;
}
#bio3 {
float: left;
width: auto;
height: auto;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;
}
#bio4 {
float: left;
width: auto;
height: auto;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;
}
#imgfooter {
float: right;
}
figcaption {
font-size: 90%;
text-align: left;
}
aside {
width: 230px;
float: left;
padding: 0px 0px 0px 20px;
}
aside section a {
display: block;
padding: 10px;
border-bottom: 1px solid #eeeeee;
}
aside section a:hover {
color: #985d6a;
background-color: #efefef;
}
a {
color: #02536f;
text-decoration: none;
}
h1, h2, h3 {
font-weight: normal;
}
h2 {
margin: 10px 0px 5px 0px;
padding: 10px;
}
h3 {
margin: 0px 0px 10px 0px;
padding: 5px;
color: ##02536f
}
aside h2 {
padding: 30px 0px 10px 0px;
color: #02536f;
}
footer {
font-size: 80%;
padding: 7px 0px 0px 20px;
height: 50px;
}
p {
padding: 5px;
}
@font-face {
font-family: "Cuprum";
src: url('349121094-Cuprum-Regular.eot');
src: url('349121094-Cuprum-Regular.eot?#iefix') format('embedded-opentype'),
url('349121094-Cuprum-Regular.svg#Cuprum') format('svg'),
url('349121094-Cuprum-Regular.woff') format('woff'),
url('349121094-Cuprum-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@media screen and (max-width: 939px) {
.wrapper {
width: 100%;
max-width: 600px;
}
img #normalimg {
}
figure {
}
img #imgfooter {
width: 100%;
}
section.border {
width: 85%;
}
ul li {
width: 78px;
}
}
@media screen and (max-width: 600px) {
.wrapper {
width: 100%;
max-width: 340px;
}
img #normalimg {
width: 50%;
}
img #imgfooter {
width: 100%;
}
ul li {
width: 95px;
}
section.border {
}
figure {
}
ul li {
font: bold 12px/18px sans-serif;
display: block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
width: 300px;
}
}
@media only screen and (max-width: 600px) {
#normalimg {
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
