Segue o código HTML e o "site.css".
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Portifólio-João da Silva</title>
<link rel='stylesheet' href='C:\Users\leona\Desktop\Cursos Alura\HTML & CSS\HTML & CSS5 1\css\reset_meyer.css'>
<link rel='stylesheet' href='C:\Users\leona\Desktop\Cursos Alura\HTML & CSS\HTML & CSS5 1\css\site.css'>
<link rel='stylesheet' href='C:\Users\leona\Desktop\Cursos Alura\HTML & CSS\HTML & CSS5 1\css\portifolio.css'>
<link rel='icon' href='C:\Users\leona\Desktop\Cursos Alura\HTML & CSS\HTML & CSS5 1\img\favicon.png'>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
</head>
<body>
<main>
<h1 class='titulo'>Portifólio</h1>
<div class='conteudo'>
<p>Veja abaixo a lista dos meus projetos relevantes:</p>
<ul>
<li>
<figure class='projeto'>
<img class='img-projeto' src='img/bmw.png' alt='Trabalho na BMW'>
<figcaption><a href='http://bmw.com'>BMW.com: reformulação do design e implementação de HTML, CSS, JAVASCRIPT.</a></figcaption>
</figure>
</li>
<li>
<figure class='projeto'>
<img class='img-projeto' src='img/uol.png' alt='Trabalho na UOL'>
<figcaption><a href='http://uol.com.br'>UOL.com.br: reformulação do design e implementação de HTML, CSS, JAVASCRIPT.</a></figcaption>
</figure>
</li>
<li>
<figure class='projeto'>
<img class='img-projeto' src='img/ibm.png' alt='Trabalho na IBM'>
<figcaption><a href='http://ibm.com'>IBM.com: aplicação de progressive enhacement em conjunto com aplicação back-end.</a></figcaption>
</figure>
</li>
<li>
<figure class='projeto'>
<img class='img-projeto' src='img/g1.png' alt='Trabalho no G1'>
<figcaption><a href='http://g1.com.br'>G1.com.br: reformulação do design e implementação de HTML, CSS, JAVASCRIPT</a></figcaption>
</figure>
</li>
</ul>
</div>
</main>
<img class='foto' src='img/eu.jpg' alt='Foto de João da Silva'>
<aside class='navegação'>
<h1>João da Silva</h1>
<nav>
<ul>
<li><a href='index.html'>Home</a></li>
<li><a href='portifolio.html'>Portifólio</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>
<ul class="icones-sociais">
<li>
<a href="https://github.com/joaodasilva" class='github'>
Github
</a>
</li>
<li>
<a href="https://twitter.com/joaodasilva" class='twitter'>
Twitter
</a>
</li>
<li>
<a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508" class='linkedin'>
LinkedIn
</a>
</li>
</ul>
</nav>
</aside>
<footer id='rodape'>
© João da Silva 2014
</footer>
</body>
</html>
body{
font-family: 'Crimson Text', 'Times New Roman', serif;
background-color: #F2FFFC;
font-size: 120%;
line-height: 1.5;
}
main{
float: left;
width:85%;
padding-bottom:80px;
}
.titulo {
text-align: center;
color: rgb(255,255,255);
background-color: #851944;
padding: 25px;
border-bottom: 10px solid #000;
font-size: 60px;
text-transform:uppercase;
}
h1, h2 {
font-family: 'Open Sans Condensed', 'Arial', sans-serif;
}
h2 {
font-size: 30px;
clear:both;
}
p{
text-align: justify;
margin:20px 0;
}
.navegação {
background-color: #3C1D3D;
color: #F2FFFC;
text-align: center;
float: right;
box-sizing: border-box;
border: 10px solid black;
width: 15%;
position:relative;
top:300px;
}
.foto {
float: right;
border-bottom:10px solid black;
border-left:10px solid black;
box-sizing:border-box;
position:absolute;
top:0;
right:0;
}
.navegação a {
color: inherit;
font-family: "Open Sans Condensed", sans-serif;
}
.navegação h1 {
font-size: 30px;
margin-bottom:25px;
}
.icones-sociais li {
display:inline-block;
}
.icones-sociais a {
width: 40px;
height: 40px;
display: block;
font-size:0px;
}
.github {
background-image: url("../img/github.png");
}
.twitter {
background-image: url("../img/twitter.png");
}
.linkedin {
background-image: url("../img/linkedin.png");
}
#rodape {
color: #F2FFFC;
background-color: rgb(0, 0, 0);
padding:5px;
clear:both;
position:fixed;
bottom:0;
width:100%;
}
.navegação {
padding: 20px;
}
nav a {
color: #F2FFFC;
}
main a {
color: #851944;
}
.conteudo {
width: 720px;
padding:30px 0;
margin:auto;
}
em {
font-style: italic;
}
strong {
font-weight: bold;
}
cite {
float:right;
font-style: italic;
display: block;
}
