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!
Ola galera, poderiam me ajudar? É o seguinte: O meu projeto final do curso HTML e CSS3 II deu problema. as páginas 'Bibliografia' e 'Blog' deram ficaram boas. Aqui estão elas, respectivamente: https://imgur.com/6v26C5G e https://imgur.com/CVJ5B60. Porém , a ultima página a ser feita, a do portfólioficou defeituosa . ficou assim https://imgur.com/dgrq7e5 , ao invés de ficar assim : https://imgur.com/Oo7MIMX. Todas elas compartilham o Mesmo CSS e RESET CSS. O códigos estão a seguir:
Os seguintes códigos são : Bibliografia-
<!DOCTYPE html>
<html>
<head>
<title>Biografia - João da Silva</title>
<meta charset="UTF-8">
<link rel="icon" href="img/favicon.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href=" css/site.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
<link rel="stylesheet" href="http://footernts.googleapis.com/css?family=Open+Sans+Condensed:700">
</head>
<body>
<main>
<h1 class="titulo-principal">Sobre mim</h1>
<div class="container">
<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 class="subtitulo-texto">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 class="subtitulo-texto">Experiência</h2>
<blockquote class="petrobras">
<p> 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.</p>
<cite> -- Manoel Santos, Petrobrás </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= "http://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.
Também já fui contratado para transformar grandes portais, como <a href="http://www.terra.com.br">Terra</a> e <a href="http://www.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 class="subtitulo-texto">Comunidade</h2>
<p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei diversas palestras e mantenho um <a href="blog.html">blog.</a></p>
</div>
</main>
<img src ="img/eu.jpg" alt="Foto de João da Silva">
<aside class="navegaçao-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">Contatos</a></li>
</ul>
</nav>
<ul class="icones-redes-sociais">
<li><a class="github" href="http://github.com/joaodasilva">Github</a></li>
<li><a class="twitter" href="http://twitter.com/joãodasilva">Twiter</a></li>
<li><a class="linkedin" href="http://br.linkedin.com/pub/linedin-joao-da-silva/32/4/508">
Linkedin</a></li>
</ul>
</aside>
<footer class="rodape-pagina">
© João da Silva 2014
</footer>
</body>
</html>Blog -
<!DOCTYPE html>
<html>
<head>
<title>Blog - João da Silva</title>
<meta charset="UTF-8">
<link rel = "icon" href="img/favicon.png">
<link rel = "stylesheet" href="css/reset.css">
<link rel = "stylesheet" href="css/site.css">
<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-principal">Blog</h1>
<div class="container">
<article class="artigo">
<h2 class="subtitulo-texto">O essencial de design responsivos</h2>
<time datetime="2014-07-01">01 de julho de 2014</time>
<p>Design responsivo tem ganho cada vez mais atenção como técnica de desenvolvimento de páginas
para dispositivos móveis. Mas como começar?</p>
<a class="leia mais" href="#"> Leia mais</a>
<footer>Tags: <a href ="#"> design responsivos</a>,<a href ="#">mobile</a>,<a href="#">css</a></footer>
</article>
<article class="artigo">
<h2 class="subtitulo-texto">Por que fazer páginas acessíveis?</h2>
<time datetime="2014-06-15">15 de junho de 2014</time>
<p>Tem se falado cada vez sobre acessibilidade na web.Há diversas técnicas a serem seguidas, inclusive da própria W3C. Mas vale investir nisso?</p>
<a class="leia-mais" href="#">Leia mais</a>
<footer>Tags:<a href ="#">acessibilidade</a>,<a href="#">Boas práticas</a></footer>
</article>
<article class="artigo">
<h2 class="subtitulo-texto">JavaScript não obstrusivos</h2>
<time datetime="2014-05-28">28 de maio de 2014</time>
<p>JavaScript é uma linguagem essencial hoje em dia para criar páginas ricas, interativas e dinâmicas. Porém, há alguns cuidados que devem ser tomados ao colocarmos código JavaScript em
nossas páginas.</p>
<a class="leia-mais" href="#">leia mais</a>
<footer>Tags: <a href = "#">JavaScript</a>, <a href="#">Boas práticas</a></footer>
</article>
</div>
</main>
<img src="img/eu.jpg" alt="Foto de joão da Silva" >
<aside class="navegaçao-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-redes-sociais">
<li><a class="github" href="http://github.com/joaodasilva">github</a></li>
<li><a class="twitter" href="http://twitter.com/joaodasilva">twitter</a></li>
<li><a class="linkedin" href="http://br.linkedin.com/pub/joao-da-silva/32/4/508">linkedin</a></li>
</ul>
</aside>
<footer class="rodape-pagina">
© João da Silva 2014
</footer>
</body>
</html>
E Portfólio -
<!DOCTYPE html>
<html>
<head>
<title>Portfolio - João da Silva</title>
<meta charset="utf-8">
<link rel="icon" href="img/favicon.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/site.css">
<link rel="stylesheet" href="css/portfolio.css">
<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-principal">Portfolio</h1>
<div class="container">
<p>Veja abaixo a lista dos meus projetos mais relevantes</p>
<ul class="portfolio">
<li>
<a href="http://bmw.com">
<figure>
<img src="img/bmw.png" alt="Site da BMW">
<figcaption>BMW.com: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
</figure>
</a>
</li>
<li>
<a href="http://uol.com.br">
<figure>
<img src="img/uol.png" alt="Front-page da UOL">
<figcaption>UOL.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
</figure>
</a>
</li>
<li>
<a href="http://www.ibm.com.br">
<figure>
<img src="img/ibm.png" alt="Site da IBM">
<figcaption>IBM.com: aplicação de progressive enhancement em conjunto com aplicação back-end</figcaption>
</figure>
</a>
</li>
<li>
<a href="http://g1.com.br">
<figure>
<img src="img/g1.png" alt="Front-page do portal G1">
<figcaption>G1.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
</figure>
</a>
</li>
</ul>
</div>
</main>
<img src="img/eu.jpg" alt="Minha foto" class="minha-foto">
<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-redes-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>
</aside>
<footer class="rodape-pagina">
© João da Silva 2014
</footer>
</body>
</html>CSS-
insira seu códibody{
font-family: "Crimson Text","Times New Roman" serif;
background-color:#F2FFFC;
font-size: 120%px;
line-height: 1.5;
}
.titulo-principal {
font-size: 60px;
background-color: #851744;
color: #FFF;
text-align: center;
font-family: "Open Sans Condensed",,Sans-serif;
border-bottom: 10px solid black;
padding:25px;
text-transform: uppercase;
}
p {
text-align: justify;
margin:20px 0;
}
blockquote {
background-color:#D9E5E3;
border:10px solid #C2CCCA;
width: 250px;
box-sizing: border-box;
margin:20px 40px;
}
.navegaçao-site {
text-align: center;
background-color: #3C1D3D;
color: #F2FFFC;
}
.rodape-pagina {
background-color:#000;
color:#F2FFFC;
clear: both;
position: fixed;
bottom: 0;
left: 0;
width:100%;
}
main a{
color:#851944;
}
.navegaçao-site a {
color: inherit;
font-family:"open Sans Condensed",Sans-serif;
}
blockquote , .navegaçao-site, .rodape-pagina{
padding: 20px;
}
.container{
width: 720px;
margin:auto;
padding :30px 0;
}
.navegaçao-site h1 {
font-size: 30px;
margin-bottom: 25px;
}
strong{
font-weight: bold;
}
em{
font-style:italic;
}
.subtitulo-texto {
font-size: 30px;
font-family: "Open Sans Condensed ","Arial"Sans-serif;
clear: both;
}
.icones-redes-sociais li {
display:inline-block;
}
.artigo {
padding-bottom: 30px
border-bottom:1px solid #ccc;
margin-bottom: 20px;
}
.leia-mais{
padding:8px;
margin:16px;
display:block;
font-size:24px;
text-align:center;
background-color:#E6E7E8;
}
nav a {
text-transform: lowercase;
}
.icones-redes-sociais a{
width:40px;
height:40px;
display: inline-block;
text-indent: 1000px;
}
.github {
background-image: url(../img/github.png);
}
.twitter {
background-image: url(../img/twitter.png);
}
.linkedin {
background-image: url(../img/linkedin.png);
}
.fiat {
float:right;
}
.petrobras {
float:left;
}
aside , img {
float:right;
box-sizing: border-box;
border-left: 10px solid black;
border-bottom: 10px solid black;
}
aside {
clear:right; width: 15%;
position: relative;
top:310px;
}
main {
float:left;
width: 85%;
}
footer {
clear:both;
position: fixed;
bottom: 0;
width: 100%;
}
img {
position: absolute;
top:0px;
right: 0px;
}go aquiReset CSS-
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}E portfólio CSS-
.portfolio li {
display: inline-block;
border: 8px solid black;
background-color: #FAFFFC;
width: 45%;
box-sizing: border-box;
padding: 16px;
margin-right: 16px;
margin-bottom: 16px;
}
.portfolio img{
width: 100%;
}Desde ja, agradeço galera!!!
Olá Luciano, o que eu encontrei no seu código está relacionado à classe da tag aside. Nas páginas que você disse que estão corretas, a classe está definida como navegaçao-site, assim como no CSS.
Mas na sua página do portfólio, a classe está como navegacao-site, ou seja, sem o ç.
Valeu Rômulo, resolveu a parte do aside, álias, que olho hein!! kkkk Mas a parte das 4 imagens com os sites da UOL, BMW ,IBM e G1 ainda tão bugadas.. kkk
Sobre as 4 imagens, o problema está no site.css. Em dois momentos, você se refere à tag img, por causa da foto do João da Silva:
aside, img {
float:right;
box-sizing: border-box;
border-left: 10px solid black;
border-bottom: 10px solid black;
}
img {
position: absolute;
top:0px;
right: 0px;
}Mas esse CSS está influenciando também nas 4 imagens do portfólio. Substitua o img pela classe .minha-foto, que o problema será solucionado:
aside, .minha-foto {
float:right;
box-sizing: border-box;
border-left: 10px solid black;
border-bottom: 10px solid black;
}
.minha-foto {
position: absolute;
top:0px;
right: 0px;
}Olá novamente, Luciano! O seu problema foi resolvido?
E ai Rômulo. Não mano, adicionei a classe nos códigos e troquei as tags img no CSS por class, mas o problema persiste.
Oi Luciano, não é para adicionar a classe nos códigos HTML, pois ela já está lá, na tag img da foto do João da Silva:
<img src="img/eu.jpg" alt="Minha foto" class="minha-foto">As outras imagens não devem ter essa classe.
Aí é só mexer no site.css, como eu havia falado, substituindo o img pela classe .minha-foto:
aside, .minha-foto {
float:right;
box-sizing: border-box;
border-left: 10px solid black;
border-bottom: 10px solid black;
}
.minha-foto {
position: absolute;
top:0px;
right: 0px;
}Então Rômulo, desfiz as classes nas imagens e deixei apenas na foto do João da Silva, mas o problema ainda persiste mano.
Oi Luciano, me mande os arquivos alterados, para eu dar uma olhada: portfolio.html, site.css e potfolio.css
O Rômulo, desculpe a demora, tive alguns contratempos mas estão aqui: Portifolio.Html
<!DOCTYPE html>
<html>
<head>
<title>Portfolio - João da Silva</title>
<meta charset="utf-8">
<link rel="icon" href="img/favicon.png">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/site.css">
<link rel="stylesheet" href="css/portfolio.css">
<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-principal">Portfolio</h1>
<div class="container">
<p>Veja abaixo a lista dos meus projetos mais relevantes</p>
<ul class="portfolio">
<li>
<a href="http://bmw.com">
<figure>
<img src="img/bmw.png" alt="Site da BMW">
<figcaption>BMW.com: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
</figure>
</a>
</li>
<li>
<a href="http://uol.com.br">
<figure>
<img src="img/uol.png" alt="Front-page da UOL">
<figcaption>UOL.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
</figure>
</a>
</li>
<li>
<a href="http://www.ibm.com.br">
<figure>
<img src="img/ibm.png" alt="Site da IBM">
<figcaption>IBM.com: aplicação de progressive enhancement em conjunto com aplicação back-end</figcaption>
</figure>
</a>
</li>
<li>
<a href="http://g1.com.br">
<figure>
<img src="img/g1.png" alt="Front-page do portal G1">
<figcaption>G1.com.br: reformulação de design e implementação de HTML, CSS e JavaScript</figcaption>
</figure>
</a>
</li>
</ul>
</div>
</main>
<img src="img/eu.jpg" alt="Minha foto" class="minha-foto">
<aside class="navegaçao-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-redes-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>
</aside>
<footer class="rodape-pagina">
© João da Silva 2014
</footer>
</body>
</html>Portifolio.css
.portfolio li {
display: inline-block;
border: 8px solid black;
background-color: #FAFFFC;
width: 45%;
box-sizing: border-box;
padding: 16px;
margin-right: 16px;
margin-bottom: 16px;
}
.portfolio img{
width: 100%;
}Site.css
body{
font-family: "Crimson Text","Times New Roman" serif;
background-color:#F2FFFC;
font-size: 120%px;
line-height: 1.5;
}
.titulo-principal {
font-size: 60px;
background-color: #851744;
color: #FFF;
text-align: center;
font-family: "Open Sans Condensed",,Sans-serif;
border-bottom: 10px solid black;
padding:25px;
text-transform: uppercase;
}
p {
text-align: justify;
margin:20px 0;
}
blockquote {
background-color:#D9E5E3;
border:10px solid #C2CCCA;
width: 250px;
box-sizing: border-box;
margin:20px 40px;
}
.navegaçao-site {
text-align: center;
background-color: #3C1D3D;
color: #F2FFFC;
}
.rodape-pagina {
background-color:#000;
color:#F2FFFC;
clear: both;
position: fixed;
bottom: 0;
left: 0;
width:100%;
}
main a{
color:#851944;
}
.navegaçao-site a {
color: inherit;
font-family:"open Sans Condensed",Sans-serif;
}
blockquote , .navegaçao-site, .rodape-pagina{
padding: 20px;
}
.container{
width: 720px;
margin:auto;
padding :30px 0;
}
.navegaçao-site h1 {
font-size: 30px;
margin-bottom: 25px;
}
strong{
font-weight: bold;
}
em{
font-style:italic;
}
.subtitulo-texto {
font-size: 30px;
font-family: "Open Sans Condensed ","Arial"Sans-serif;
clear: both;
}
.icones-redes-sociais li {
display:inline-block;
}
.artigo {
padding-bottom: 30px
border-bottom:1px solid #ccc;
margin-bottom: 20px;
}
.leia-mais{
padding:8px;
margin:16px;
display:block;
font-size:24px;
text-align:center;
background-color:#E6E7E8;
}
nav a {
text-transform: lowercase;
}
.icones-redes-sociais a{
width:40px;
height:40px;
display: inline-block;
text-indent: 1000px;
}
.github {
background-image: url(../img/github.png);
}
.twitter {
background-image: url(../img/twitter.png);
}
.linkedin {
background-image: url(../img/linkedin.png);
}
.fiat {
float:right;
}
.petrobras {
float:left;
}
aside , .minha-foto {
float:right;
box-sizing: border-box;
border-left: 10px solid black;
border-bottom: 10px solid black;
}
aside {
clear:right; width: 15%;
position: relative;
top:310px;
}
main {
float:left;
width: 85%;
}
footer {
clear:both;
position: fixed;
bottom: 0;
width: 100%;
}
.minha-foto {
position: absolute;
top:0px;
right: 0px;
}Olá Luciano! Então, eu abri a página com o código atual que você me enviou, e aparentemente ela está correta:
É estranho, pq pra mim ,tirando os ajustes que deram certo com relação a tag aside, as quatro imagens do portifolio continuam aparecendo borradas pra mim. https://imgur.com/hsKS4F4. será que as paginas Blog e Bibliografia estão afetando a pagina Portfólio de alguma forma?
Olá Luciano, creio que não há interferência das páginas do Blog e Bibliografia. Qual navegador você está utilizando? Outra coisa, verifique se você está editando/importando os CSSs corretor no seu HTML.
Aqui você encontra o projeto que você mesmo me enviou (portfolio.html, site.css e portfolio.css), eu só adicionei as imagens. Depois teste aí para ver se funciona ou não, por favor.
Fala Rômulo, desculpa a demora, olha, eu uso o chrome véio de guerra kkk, eu refiz o código e o mesmo erro se repete. aqui a a pasta do projeto https://github.com/BC738144/teste-2. ainda to perdido com esse projeto. kkk
Olá Luciano! Olhando novamente o seu código do Github, a página portfolio.html está usando os CSSs da pasta css.
Abrindo o arquivo Site.css, que está dentro da pasta css, ocorre o problema que eu mencionei anteriormente, que em dois momentos você se refere à tag img, por causa da foto do João da Silva:
aside, img {
float:right;
box-sizing: border-box;
border-left: 10px solid black;
border-bottom: 10px solid black;
}
img {
position: absolute;
top:0px;
right: 0px;
}Mas esse CSS está influenciando também nas 4 imagens do portfólio. Substitua a tag img pela classe .minha-foto, que o problema será solucionado:
aside, .minha-foto {
float:right;
box-sizing: border-box;
border-left: 10px solid black;
border-bottom: 10px solid black;
}
.minha-foto {
position: absolute;
top:0px;
right: 0px;
}Eu só fiz essa alteração, ou seja, no arquivo css/Site.css, onde tem img, troquei por .minha-foto. Só com essa alteração, a página voltou ao normal.