Solucionado
O professor colocou um "contato" com e-mail genérico no rodapé, mas no Figma estão aparecendo dois quadrados cor-de-vinho no lugar em que deveria estar o e-mail. Embora o objetivo seja seguir as etapas da aula, quero também fazer do jeito que está no Figma.
Como faço para colocar os dois quadrados ao lado do contato e com o devido espaçamento? Tentei colocar uma div como foi feito no exemplo das pessoas e estilizar com uma cor de background, mas eles não aparecem.
Oi Eduardo, tudo bem?
Para posicionar o texto no footer da página e os quadrados no canto direito, você pode fazer as seguintes alterações no código HTML e CSS:
HTML:
<footer>
<div class="contato">
<span>contato@example.com</span>
<div class="quadrado"></div>
<div class="quadrado"></div>
</div>
</footer>
CSS:
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color:#bfbfbf;
}
.contato {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 10px;
}
.quadrado {
width: 20px;
height: 20px;
background-color: #800000;
margin-left: 10px;
}
span {
margin-right: 10px;
color: #fdfdfd;
}
Nesse código, foi adicionado um elemento <footer> ao redor do conteúdo para representar o footer da página. Além disso, foram feitas alterações no CSS para posicionar o footer no canto inferior da página (position: fixed; bottom: 0; left: 0;), e a classe .contato agora utiliza justify-content: flex-end; para alinhar os elementos à direita.
Dessa forma, o texto aparecerá antes dos quadrados e estará posicionado no footer da página, enquanto os quadrados estarão no canto direito.
Você pode conferir como ficou aqui no CodePen.
Um abraço e bons estudos.
Obrigado pela ajuda, Lorena!
Gostaria de fazer uma observação. Quando o footer está com a posição fixed, ele vai sempre estar visível na tela mesmo que eu suba a página. Daí eu troquei a posição para relative, e agora ele fica parado aonde deveria estar.
No meu arquivo, eu troquei os valores em pixels para valores relativos de em e rem, fazendo vários testes até achar uma medida legal. Ainda assim, sua resposta me ajudou bastante!