Olá,
No exercício da aula 2 de inserir as palavras-chave na página inicial, acrescentei os trechos de CSS abaixo e obtive o resultado esperado para tela cheia do meu navegador. Porém ao redimensionar para meia tela, a palavra "JavaScript", por exemplo, ficou por cima da foto do João da Silva.
O que fazer para garantir que as palavras ficarão somente sobre o fundo roxo, independente da dimensão da tela?
.blog {
position: relative;
}
.palavra-home{
position: absolute;
font-family: "Shadows Into Light", cursive;
font-weight: bold;
color: #D5447E;
}
.responsivo{
left: 15%;
top: 15%;
}
.codigo-limpo{
left: 10%;
top: 50%;
}
.boas-praticas{
left: 20%;
bottom: 20%;
}
.agilidade{
left: 30%;
top: 10%;
}
.acessibilidade{
left: 25%;
top: 30%;
}
.css3{
left: 30%;
bottom: 45%;
}
.javascript{
right: 35%;
top: 10%;
}
.design{
right: 30%;
top: 30%;
}
.otimizacoes{
right: 25%;
bottom: 25%;
}
.eficiencia{
right: 15%;
top: 17%;
}
.html5{
right: 10%;
top: 32%;
}