Senhores,
Reparei que até mexemos com a alteração do da imagem do João da Silva e o aside para top a página estava responsiva, com as alterações em questão e positions a página deixou de ser.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Senhores,
Reparei que até mexemos com a alteração do da imagem do João da Silva e o aside para top a página estava responsiva, com as alterações em questão e positions a página deixou de ser.
Bom dia, Lorran!
A partir de qual capítulo, exatamente, você observou que a página deixou de ser responsiva? Eu testei aqui e me parece que está responsivo, mas posso dar uma olhada um pouco melhor nos exercícios aos quais você se refere e o porquê de você achar que deixou de ser responsiva. =)
Posta aqui que eu dou uma olhadinha. =)
Fábio
Veja: http://prntscr.com/eb6wbk
Pagina HTML:
<!DOCTYPE html>
<html>
<head>
<title>Biografia - João da Silva</title>
<meta charset="utf-8">
<link rel="icon" href="favicon.png">
<!-- 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">
<link rel="stylesheet" href="reset.css" >
<link rel="stylesheet" href="site.css">
</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>, <em>durabilidade</em> e que <em>agregam valor</em> para meus clientes.</p>
<p>Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). 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">
<p>João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!</p>
<cite>José Souza, Fiat</cite>
</blockquote>
<p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. <strong>Não trabalho com escopo fechado</strong>: o cliente é que decide quando o produto está pronto.</p>
<p>Também não trabalho com prazos fechados: <strong>qualidade é importante demais para ser sacrificada</strong>.</p>
<h2>Experiência</h2>
<blockquote class="petrobras">
<p>João domina as tecnologias como ninguém</p>
<cite>Manoel Santos, Petrobrás</cite>
</blockquote>
<p>Já desenvolvi projetos para grandes empresas como <a href="http://www.bmw.com/">BMW</a>, UOL e IBM. 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 Terra e G1, 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>
<p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei <a href="http://meusite.com/portfolio.html">diversas palestras</a> e mantenho um <a href="http://meusite.com/blog.html">blog</a>.</p>
</div>
</main>
<img class="minha-foto" src="eu.jpg" alt="Foto João da Silva">
<aside>
<h1>João da Silva</h1>
<nav class="navegacao-site">
<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</a></li>
<li><a href="contato.html">Contato</a></li>
</nav>
<!-- links das redes sociais -->
<ul class="icones-sociais">
<li class="github"><a href="#">GitHub</a></li>
<li class="linkedin"><a href="#">Linkedin</a></li>
<li class="twitter"><a href="#">Twitter</a></li>
</ul>
</aside>
<footer class="rodape-pagina">
© João da Silva 2017
</footer>
</body>
</html>Pagina CSS:
h2 {
font-size: 40px;
clear: both;
font-family: "Open Sans Condensed", sans-serif;
}
h1, h2 {
font-family: "Open Sans Condensed", sans-serif;
}
main h1 {
background-color: #851944;
color: #FFFFFF;
text-align: center;
color: #FFF;
padding: 25px;
margin: 0;
border-bottom: 10px solid black;
font-size: 60px;
text-transform: uppercase;
}
body {
font-family: "Crimson Text", "Times New Roman", serif;
background-color: #F2FFFC;
font-size: 120%;
line-height: 1.5;
}
p {
text-align: justify;
margin: 20px 0;
}
main a {
color: #851944;
}
main div {
width: 720px;
margin: auto;
padding: 30px 0;
}
aside a {
color: inherit;
font-family: "Open Sans Condensed", sans-serif;
}
aside h1 {
font-size: 30px;
margin-bottom: 25px;
}
blockquote {
background-color:gainsboro;
padding: 20px;
border: 10px solid #C2CCCA;
margin: 0px;
width: 250px;
box-sizing: border-box;
}
blockquote, aside, footer {
padding: 20px;
}
.icones-sociais li {
display: inline-block;
}
.icones-sociais a {
/* background-image: url(github.png); */
width: 40px;
height: 40px;
display: inline-block;
text-indent: -9999999px;
}
.github {
background-image: url(github.png);
}
.linkedin {
background-image: url(linkedin.png);
}
.twitter {
background-image: url(twitter.png)
}
footer {
background-color: #000;
color: #F2FFFC;
clear: both;
}
.fiat {
float: right;
}
.petrobras {
float: left;
}
aside, img {
float: right;
width: 15%;
}
aside {
background-color: #3C1D3D;
text-align: center;
color: #F2FFFC;
clear: right;
box-sizing: border-box;
}
main {
float: left;
width: 85%;
padding-bottom: 80px;
}
Lorran,
Desculpe a demora em responder... Você conseguiu resolver o problema?
Fábio
Nem olhei mais Fábio, estou fazendo outro curso, depois pego a versão final do professor pra comparar. Valeu.