<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" type="text/css" href ="bio.css"/>
<link rel="icon" href="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">
<title> Biografia-João da Silva</title>
</head>
<body>
<main>
<h1>sobre mim</h1>
<div>
<p> Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade</em
durabilidade e que agregam valor para meus clientes.</p>
<p>Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript),<a href="#"> leia mais</a>
Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.</p>
<h2>Como trabalho</h2>
<blockquote class="Fiat">João é o melhor desenvolvedor front-end com quem já trabalhei.Muito eficiente e muito capaz. Recomendo sem dúvidas!
<cite>
José Souza, Fiat.
</cite>
</blockquote>
<p>Já desenvolvi projetos para grandes empresas como ,<a href="http://www.bmw.com">BMW</a>,
<a href="http://www.uol.com.br/">UOL,</a> e <a href="www.ibm.com/br">IBM</a>. Neles,
o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.</p>
<p>Também já fui contratado para transformar grandes portais, como <a href="http://www.terra.com.br">terra</a> e <a href="http://g1.globo.com/">G1</a>,
em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</P>
<h2>Comunidade</h2>
<blockquote class="petrobras">João domina as tecnologias como ninguém. Eu apresentava um problema, ele tinha na ponta da língua a solução mais adequada com as
tecnologias mais recentes.
<cite>
-- Manoel Santos
</cite>
</blockquote>
<p>Procuro repassar meu conhecimento para a comunidade. Para isso, <a href="portfolio.html">já dei diversas palestras e mantenho um blog.</a></p>
</div>
</main>
<img src=eu.jpg alt="Foto de João da silva">
<aside>
<div>
<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>
<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>
</div>
</aside>
<footer>
© João da Silva
</footer>
</body>
</body>
</html>
Css:
body{
font-family:"Crimson Text", serif;
background-color:#F2FFFC;
line-height: 1.5;
margin:0;
}
h1,h2{
font-family: "Open Sans Condensed","Arial", sans-serif;
}
main div{
width:720px;
margin:auto;
padding: 30px 0
}
main h1{
text-align:center;
background-color:#851944;
color:#FFF;
padding:25px;
border-bottom:10px solid black;
font-size: 60px;
margin:0;
text-transform:uppercase;
}
main a{
text-decoration:none;
}
p {
text-align: justify;
margin:20px 0;
}
blockquote{
background-color:#d9e5e3;
padding:10px;
margin:0;
border:10px solid #C2CCCA;
box-sizing:border-box;
width:250px;
}
aside{
background-color:#3C1D3D;
color:#F2FFFC;
}
footer{
background-color:#000000;
color:#F2FFFC;
padding:20px;
}
a link{
background-color:inherit;
}
aside a {
color: inherit;
font-family: "Open Sans Condensed", sans-serif;
padding:20px;
text-transform:lowercase;
}
aside {
text-align:center;
}
aside h1 {
font-size: 30px;
margin-bottom: 25px;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
.icones-sociais li{
display:inline-block;
}
.icones-sociais a {
width: 40px;
height: 40px;
display:inline-block;
text-indent: -99999px;
}
.github {
background-image: url(github.png);
}
.twitter {
background-image: url(twitter.png);
}
.linkedin {
background-image: url(linkedin.png);
}
Estou com problemas no css, pois imagens, do Github,Twitter e linkedin estão repedindo 2 vezes em cima e me baixo.