Assim, como a mesma dúvida do Rafael, para que a minha página ficasse igual a do instrutor foi necessário que eu à deixasse o código css da seguinte maneira,]
E para mim sem a declaração: li , não funciona, fica tudo sobre-posto. Ainda coloquei font-size: 0.5em, para o tamanho da fonte não ficar muito grande, mais parecido com o proposto no exercício.
Meu Código: (`
)
No Index.html: `
João da Silva
Desenvolvedor web
- Eficiência
- Boas-práticas
- Código-limpo
- CSS3
- HTML5
- JavaScript
- Acessibilidade
- Responsivo
- Otimizações
- Agilidade
- Design
No Index.css:
.foto-home { height: 200px; }
.inicio-post { color: #000; background-color: #FFF; position: absolute; top: 1em; right: 1.5em; height: 6em; padding: 1em; }
.subtitulo-principal{ font-size: 0.3em; text-align: center; }
.saudacao p { font-size: 1.5em; color: #99A; line-height: 1; padding: 2em; }
.saudacao-inicio { font-size: 3em; color: #889; }
.saudacao-ultima-linha { text-align: right; display: block; }
.saudacao strong { font-size: 2em; color: #000; }
.saudacao em { color: #851944; font-size: 4em; }
.botao-index { font-size: 1.25em; background-color: #851944; color: #FFF; padding: .5em; border: .2em solid black; width: 40ch; margin: 2em auto; display: block; text-align: center; }
.secao-inicio { padding: 2em; }
.secao-inicio h2 { font-size: 3em; text-shadow: 2px 2px #000; text-transform: uppercase; margin-bottom: .5em; }
.trabalhos { background-color: #3C1D3D; border-top: .5em solid #000; border-bottom: .5em solid #000; }
.trabalhos h2 { color: #FFF; }
.trabalhos ul { overflow: hidden; border: .5em solid black; }
.trabalhos li { float: left; width: 33.333%; }
.trabalhos img { width: 100%; display: block; }
.blog { background-color: #999; color: #FFF; border-bottom: .5em solid #851944; position: relative; }
.blog small { position: relative; top: -2em; }
.blog li a { color: #FCF; padding: .5em; display: block; }
footer { background-color: #000; color: #FFF; padding: 2em; }
footer h2 { font-size: 3em; }
footer a { color: #F99; }
footer a { color: #F99; }
main { width: 100%; padding-bottom: 0; float: none; }
header{ position: relative; }
.palavra-home li { position: absolute; font-family: "Shadows Into Light", cursive; font-size: 0.5em; font-weight: bold; color: #D5447E; }
.eficiencia { top: 20%; left: 75%; }
.boas-praticas { top: 70%; left: 20%; }
.codigo-limpo { top: 45%; left: 10%; }
.css3 { top: 50%; left: 30%; }
.html5 { top: 40%; left: 80%; }
.javascript { top: 10%; left: 60%; }
.acessibilidade { top: 30%; left: 25%; }
.responsivo { top: 15%; left: 15%; }
.otimizacoes { top: 60%; left: 70%; }
.agilidade { top: 10%; left: 30%; }
.design { top: 35%; left: 65%; } `
(`
)