Solucionado
Oie gente, estou aqui quebrando minha cabeça, com algo que parece ser simples, porém não consigo resolver. Preciso fazer com o texto fique abaixo do dos icones das redes sociais, mas não consigo.
Preciso que eles fiquem assim, nesse rodape:
o jeito que consegui colocar:
Se alguém puder ajudar, eu agradeceria.
Meu código html:
<footer class="rodape">
<div class="rodape-rede">
<ul class="rodape-rede-itens">
<li><i class="fa-brands fa-facebook-f" style="color: white;"></i><a
href="https://www.facebook.com/netflixbrasil/?locale=pt_BR"></a></li>
<li class="rodape-lista-rede"><i class="fa-brands fa-instagram" style="color: white;"></i><a
href="https://www.instagram.com/netflixbrasil/"></a></li>
<li class="rodape-lista-rede"><i class="fa-brands fa-twitter" style="color: white;"></i><a
href="https://twitter.com/NetflixBrasil"></a></li>
<li class="rodape-lista-rede"><i class="fa-brands fa-youtube" style="color: white;"></i><a
href="https://www.youtube.com/@NetflixBrasil"></a></li>
</ul>
</div>
<ul class="rodape-lista">
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Idiomas e legendas</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Imprensa</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" class="rodape-texto" href="#">Privacidade</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Enetre em contato</a>
</li>
<li class="rodape-lista-item-especial">
<a class="rodape-texto" href="https://www.netflix.com/browse">Código de Serviço</a>
</li>
</ul>
<ul class="rodape-lista">
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Autodescrição</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Relações com investidores</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Avisos Legais</a>
</li>
</ul>
<ul class="rodape-lista">
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Centro de Ajuda</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Carreiras</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Preferência de cookies</a>
</li>
</ul>
<ul class="rodape-lista">
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Cartão pré-pago</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Termos de uso</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Informações corporativas</a>
</li>
</ul>
</footer>
meu código css:
.rodape {
display: flex;
justify-content: space-around;
align-items: center;
color: var(--cor-branco);
padding: 1rem;
}
.rodape-lista {
list-style: none;
display: flex;
flex-direction: column;
}
.rodape-lista-item {
padding: 0.5rem;
}
.rodape-texto {
color: var(--cor-cinza-rodape);
font-size: 1rem;
text-decoration: none;
}
.rodape-rede-itens {
display: flex;
list-style: none;
gap: 3rem;
}
.rodape-lista-item-especial {
display: flex;
margin-top: 1rem;
border: 1px solid var(--cor-cinza-rodape);
padding: 1rem;
}
Boa tarde Lívia.
Tente no (.rodape-rede-itens) utilizar o margin-top, isso fara os ícones subir. Seria a distância da margem decima em relação aos itens. Já com a parte escrita do footer, para mover a parte escrita para a direita, você também pode utilizar o margin-right.
Olá Livia!
Nesse caso podemos organizar, o seu HTML criando uma div para a segunda sessão depois dos ícones, que pode se chamar de organiza-uls, seu código deve fica assim:
<div class="organiza-uls">
<ul class="rodape-lista">
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Idiomas e legendas</a>
</li>
/*Continua Código ... */
</div>
Depois podemos organizar o seu CSS, ficando desse modo:
.rodape {
display: flex;
flex-direction: column;
justify-content: space-around;
color: var(--cor-branco);
padding: 1rem;
}
.rodape-lista {
list-style: none;
display: flex;
flex-direction: column;
}
.rodape-lista-item {
padding: 0.5rem;
}
.rodape-texto {
color: var(--cor-cinza-rodape);
font-size: 1rem;
text-decoration: none;
}
.rodape-rede-itens {
display: flex;
list-style: none;
gap: 3rem;
}
.rodape-lista-item-especial {
display: flex;
margin-top: 1rem;
border: 1px solid var(--cor-cinza-rodape);
padding: 1rem;
}
.organiza-uls{
display: flex;
flex-direction: row;
}
Com esse código, deixamos a redes sociais na parte superior com a ajuda do flex-direction: column assim o conteúdo, das redes vem e logo após vem a lista de ul organizada de forma horizontal, além de ter usado o flex-start para se assemelhar mais a imagem do figma.
Com este código, obtive o seguinte resultado. No entanto, devido à falta de acesso às imagens utilizadas e outras possíveis diferenças em relação ao seu código, pode haver algumas disparidades no meu resultado, mas a ideia é deixar o exemplo.
Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!
Infelizmente não funcionou!
Olá Livia!
Eu modifiquei algumas condições no meu código para que se assemelhasse ao seu, pois havia alguns detalhes faltando. Talvez quando você testou essas diferenças, elas tenham ficado faltando, por exemplo, tive que buscar minhas próprias imagens para preencher, além de mudar a lógica por trás dos ícones.
Nesse caso vou enviar meu código HTML completo o css já está mais acima, e você vai ajustando conforme necessário, ok?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<footer class="rodape">
<div class="rodape-rede">
<ul class="rodape-rede-itens">
<li><i class="fa-brands fa-facebook-f" style="color: white;"></i><a
href="https://www.facebook.com/netflixbrasil/?locale=pt_BR"><img src="https://socialmediaicons.biz/wp-content/uploads/2021/01/facebook-6-jpg.webp" alt=""></a></li>
<li class="rodape-lista-rede"><a
href="https://www.instagram.com/netflixbrasil/"><img src="https://socialmediaicons.biz/wp-content/uploads/2021/01/Instagram-5-jpg.webp" alt=""></a></li>
<li class="rodape-lista-rede"><a
href="https://twitter.com/NetflixBrasil"></a><img src="https://socialmediaicons.biz/wp-content/uploads/2021/01/discord-2-jpg.webp" alt=""></li>
<li class="rodape-lista-rede"><a
href="https://www.youtube.com/@NetflixBrasil"><img src="https://socialmediaicons.biz/wp-content/uploads/2021/01/Youtube-5-jpg.webp" alt=""></a></li>
</ul>
</div>
<div >
<ul class="rodape-lista">
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Idiomas e legendas</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Imprensa</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" class="rodape-texto" href="#">Privacidade</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Enetre em contato</a>
</li>
<li class="rodape-lista-item-especial">
<a class="rodape-texto" href="https://www.netflix.com/browse">Código de Serviço</a>
</li>
</ul>
<ul class="rodape-lista">
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Autodescrição</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Relações com investidores</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Avisos Legais</a>
</li>
</ul>
<ul class="rodape-lista">
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Centro de Ajuda</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Carreiras</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Preferência de cookies</a>
</li>
</ul>
<ul class="rodape-lista">
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Cartão pré-pago</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Termos de uso</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Informações corporativas</a>
</li>
</ul>
</div>
</footer>
</body>
</html>
Teste novamente por gentileza. Se a persistência continuar, forneça o seu código completo. Será mais fácil para mim fazer os ajustes necessários, e não será necessário adicionar blocos extras de código, qeu pode acabar causando erros ao testar em sua máquina como nesse caso.
Oiee, ainda assim não funcionou. Segue o link do arquivo no github https://github.com/livmarinho/Netflix
Olá Livia!
Gostaria de agradecer por compartilhar o projeto, assim fica mais fácil fornecer a solução.
E parabenizar o projeto, que está ficando muito bonito mesmo, parabéns!
No mais Livia, vamos à solução. Primeiro, devemos criar uma div que servirá de separação dentro do seu rodapé. Você já tem uma div que agrupa todos os ícones de redes sociais, certo? É a rodape-rede. Agora, ainda dentro do seu rodapé, vamos criar uma div que vai agrupar todas as suas rodape-lista.
<footer class="rodape">
<div class="rodape-rede">
<ul class="rodape-rede-itens">
<li><i class="fa-brands fa-facebook-f" style="color: white;"></i><a
href="https://www.facebook.com/netflixbrasil/?locale=pt_BR"></a></li>
<li class="rodape-lista-rede"><i class="fa-brands fa-instagram" style="color: white;"></i><a
href="https://www.instagram.com/netflixbrasil/"></a></li>
<li class="rodape-lista-rede"><i class="fa-brands fa-twitter" style="color: white;"></i><a
href="https://twitter.com/NetflixBrasil"></a></li>
<li class="rodape-lista-rede"><i class="fa-brands fa-youtube" style="color: white;"></i><a
href="https://www.youtube.com/@NetflixBrasil"></a></li>
</ul>
</div>
<div class="organiza-uls"> <!--Nova div adicionada -->
<ul class="rodape-lista">
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Idiomas e legendas</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Imprensa</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" class="rodape-texto" href="#">Privacidade</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Enetre em contato</a>
</li>
<li class="rodape-lista-item-especial">
<a class="rodape-texto" href="https://www.netflix.com/browse">Código de Serviço</a>
</li>
</ul>
<ul class="rodape-lista">
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Autodescrição</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Relações com investidores</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Avisos Legais</a>
</li>
</ul>
<ul class="rodape-lista">
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Centro de Ajuda</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Carreiras</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Preferência de cookies</a>
</li>
</ul>
<ul class="rodape-lista">
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Cartão pré-pago</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Termos de uso</a>
</li>
<li class="rodape-lista-item">
<a class="rodape-texto" href="#">Informações corporativas</a>
</li>
</ul>
</div>
</footer>
Nesse código apenas adicinei uma div chamada <div class="organiza-uls"> que agrupos as lista de textos, fique a vontade para renomear a class.
Depois vamos ajustar apenas o seu CSS, então no arquivo style.css, vamos alterar a class rodapé e adicionar a nova class ornaniza-uls, ficando assim seu código:
.rodape {
display: flex;
flex-direction: column;
justify-content: space-around;
color: var(--cor-branco);
padding: 3rem;
}
.organiza-uls{
display: flex;
}
Seu projeto agora ficou assim:
Espero ter ajudado!
Agora foi. Muito obrigada pela ajuda e paciênciaaa!!!