Solucionado
Fiz o código .css exatamente como descrito no exercício, porém não funcionou. Não apareceu nada na tela:
.artigo-blog {
padding-bottom: 1.5rem;
/*border-bottom: 1px solid #ccc;*/
margin-bottom: 1rem;
background-image: linear-gradient(to right, transparent, black, transparent);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: center bottom;
}Obs: testo o código em um navegador firefox para ubuntu, versão mais atualizada.
Oi Chará,
Repara aqui que esse codigo serve pra fazer uma tenue linha divisora na parte inferior do elemento.
Just this.
Se nao tiver pegando, da uma conferida no HTML se esta puxando a classe certa, ok?
Abcs!
Natan, os outros seletores CSS estão funcionando ? poste o HTML para a gente dar uma conferida.
Verifiquei que o código funcionou no Link que o meu chará mostrou ali em cima. Porém aqui ainda não funciona e o seletor está correto. Segue o html completo:
<body>
<main>
<h1 class="titulo-principal">Blog</h1>
<div class="texto">
<article class="artigo-blog">
<h2>O essencial de design responsivo</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 web para dispositivos móveis. Mas como começar?</p>
<a href="#" class="leia-mais">Leia mais</a>
<footer class="rodape-post">
<p>Tags: <a href="#">design responsivo</a>, <a href="#">mobile</a>, <a href="#">css</a></p>
</footer>
</article>
<article class="artigo-blog">
<h2>Por que fazer páginas acessíveis?</h2>
<time datetime="2014-07-01">01 de Julho de 2014</time>
<p>Tem se falado cada vez sobre acessibilidade na web. Há diversas técnicas e diretivas a serem seguidas, inclusive da própria W3C. Mas vale a pena investir nisso?</p>
<a href="#" class="leia-mais">Leia mais</a>
<footer class="rodape-post">
<p>Tags: <a href="#">Acessibilidade</a>, <a href="#">W3C</a></p>
</footer>
</article>
<article class="artigo-blog">
<h2>JavaScript não obstrusivo</h2>
<time datetime="2014-07-01">01 de Julho 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 href="#" class="leia-mais">Leia mais</a>
<footer class="rodape-post">
<p>Tags: <a href="#">Javascript</a>, <a href="#">Linguagem Dinâmica</a></p>
</footer>
</article>
</div>
</main>
<img src="img/eu.jpg" alt="Foto de João da Silva" class="minha-foto">
<aside class="navegacao">
<h1>João da Silva</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfó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>
</nav>
<ul class="icones-sociais">
<li><a class="github" href="https://github.com/git-joaodasilva">Github</a></li>
<li><a class="twitter" href="https://twitter.com/twitter-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="rodape-pagina">
© João da Silva
<ul class="icones-sociais">
<li><a class="github" href="https://github.com/git-joaodasilva">Github</a></li>
<li><a class="twitter" href="https://twitter.com/twitter-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>
</footer>
</body>Oi Xará!
Testei o mesmo código aqui nesse Jsbin e está funcionando.
Tenta testar em outro browser?
Abcs!
Cara, é impressionante.
Vi que o código funciona nesse link do jsbin. Baixei o Google Chrome e testei o meu código e não funcionou. Tentei fazer alterações: mudei a cor transparent para a cor do fundo da página (#F2FFFC). Troquei o black por #000. Mudei a altura de 1px para 50px. Troquei o seletor .artigo-blog para article. Tudo isso não funcionou.
Rapaz... deve ser um espirito no seu PC.
Tenta ir fazendo no Jsbin entao, e depois joga num HTML offline mesmo.
Soh pra voce nao ficar travado no curso.
Olá xará! Enfim descobri o que aconteceu e estou me sentindo bastante tolo por isso hahaha.
No <head> do meu html eu não estava linkando para o arquivo blog.css... o link estava <link rel="stylesheet" href="css/blog.html">. Como o outro arquivo genérico site.css já deixava a página com um visual bem completo, eu nunca me toquei que faltavam as alterações de visual do arquivo blog.css (na verdade eu até já tinha percebido que não estava exatamente como era pra estar, no início do curso, mas pensei que fosse um ou outro erro pontual e acabei seguindo em frente assim mesmo). Agora já corrigi o problema e está tudo certo. Agradeço muito pela paciência!
Aeeee!
Voce poderia tambem ter dado botao direito, inspecionar no elemento. Ai ali onde mostra o CSS voce ia ver que a regra CSS nao estava pegando. Se nao tava pegando ou era seletor errado, ou a classe errada no HTML, ou o CSS todo que nao tava puxando!
Anyway...
Verdade, se eu tivesse inspecionado com o navegador teria descoberto muito rápido isso. Enfim, vou seguir no curso!