Não estou conseguindo ver onde errei, tentei com o meu código que venho implementando desde o início e não deu certo. Então fiz o download do código que o alura disponibiliza deixando tudo como foi pedido nos exercícios mesmo assim, a palavra que escolhi testar, eficiência, some da tela. Segue meu código:
HTML
<header class="titulo-principal">
<img class="foto-home" src="imagens/eu.jpg" alt="Foto de João da Silva">
<h1>João da Silva</h1>
<p class="subtitulo-principal">Desenvolvedor web</p>
<ul class="palavras-home">
<li class="palavra-home eficiencia">Eficiência</li>
<li class="palavra-home boas-praticas">Boas práticas</li>
<li class="palavra-home codigo-limpo">Código limpo</li>
<li class="palavra-home css3">CSS3</li>
<li class="palavra-home html5">HTML5</li>
<li class="palavra-home javascript">JavaScript</li>
<li class="palavra-home acessibilidade">Acessibilidade</li>
<li class="palavra-home responsivo">Responsivo</li>
<li class="palavra-home otimizacoes">Otimizações</li>
<li class="palavra-home agilidade">Agilidade</li>
<li class="palavra-home design">Design</li>
</ul>
<a class="siga-me" href="#">Siga-me no Twitter.</a>
</header>CSS:
.palavras-home{
perspective: 6px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.palavra-home {
font-family: "Shadows Into Light", cursive;
font-weight: bold;
color: #D5447E;
position: absolute;
perspective: 6px;
}
.eficiencia {
top: 40%;
left: 80%;
transform: translate(-50%, -50%) rotate(5deg) translateZ(4px);
}"Plisi me Helpi".
