Boa noite, eu fiz o código baseado nos exercicios, mas me perdi e não tenho ideia do que fiz errado. Poderiam me ajudar?
h1{
font-size: 60px;
background-color: #851944;
color:#FFF;
text-align: center;
font-family:"Open Sans Condensed","Arial", sans-serif;
padding:25px;
margin: 0px;
border: solid 10px;
border-bottom: 10px solid black;
text-transform: uppercase;
}
figure{
background-color: #FAFFFC;
border: 8px solid black;
margin: 16px;
padding: 16px;
box-sizing: border-box;
display: inline-block;
}
.uol, .bmw{
float: left;
}
.g1, .ibm{
float: right;
}
.foto, .navegacao-site {
float: right;
box-sizing: border-box;
border-left: 10px solid black;
border-bottom: 10px solid black;
}
.foto {
width: 250px;
position: absolute;
top: 0;
right: 0;
}
.navegacao-site {
width: 15%;
position: relative;
top: 220px;
}
.icones-sociais li{
display: inline-block;
}
footer {
background-color: black;
color: #F2FFFC;
padding: 20px;
position: fixed;
bottom: 0;
width: 100%;
}
.clearfix {
clear: both;
}
aside {
background-color: #3C1D3D;
color: #F2FFFC;
text-align: center;
padding: 20px;
font-family: "Open Sans Condensed", sans-serif;
}
aside a {
color: inherit;
font-family: "Open Sans Condensed", sans-serif;
}
.github {
background-image: url(../img/github.png);
}
.twitter {
background-image: url(../img/twitter.png);
}
.linkedin {
background-image: url(../img/linkedin.png);
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> Portifólio </title>
<link rel="stylesheet" href="css/portifolio.css">
<!-- carrega a fonte Crimson Text nas versões normal, itálico e negrito -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
<!-- carrega a fonte Open Sans Condensed na versão negrito, -->
<!-- que é a única necessária para os cabeçalhos -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
</head>
<body>
<main>
<h1> Portifólio</h1>
<figure class="uol">
<img src="img/uol.png" alt="página UOL">
<figcaption>Página da UOL desenvolvida em HTML por Joao</figcaption>
</figure>
<figure class="g1">
<img src="img/g1.png" alt="página G1">
<figcaption>Página da G1 desenvolvida em HTML por Joao</figcaption>
</figure>
<figure class="bmw">
<img src="img/bmw.png" alt="Página da BMW">
<figcaption>Página da BMW desenvolvida em HTML por Joao</figcaption>
</figure>
<figure class="ibm">
<img src="img/ibm.png" alt="Página da IBM">
<figcaption>Página da IBM desenvolvida em HTML por Joao</figcaption>
</figure>
<img class="foto" src="img/eu.jpg" alt="Foto de João da Silva">
<aside class="navegacao-site">
<h1> João da Silva</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="bio.html">Sobre mim</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
<ul class="icones-sociais">
<li> <a class="github" href="http://github.com/joaodasilva"> Github </a></li>
<li> <a class="twitter" href="https://twitter.com/joaodasilva"> Twitter </a></li>
<li> <a class="linkedin" href="https://br.linkedin.com/pub/linkedin-joao-da-silva/32/4/508"> Linkedin </a></li>
</ul>
</aside>
<footer class="clearfix">
© João da Silva 2014
</footer>
</main>
</body>
</html>