Solucionado
Alguém pode me ajudar? Não consigo alterar a cor do meu footer. Ele fica sempre branco. Meu código no CSS está assim:
.rodape {
background-color: #22D4FD;
padding: 24px;
font-family: 'Montserrat', sans-serif;
text-align: center;
color: #22D4FD;
font-weight: 400px;
font-size: 24px;
}
Oi Oigres, tudo bem?
O que você quer mudar? Porque você falou que ele sempre fica branco, mas na imagem ele está azul. Você quer mudar a cor do background do footer ou a cor da fonte do texto que tem nele?
Aguardo mais detalhes.
Um abraço e bons estudos.
Oi Lorena, realmente, esqueci de especificar. Eu quero alterar a cor da fonte do texto. Eu queria alterar para Black, mas como não esteva mudando, tentei outras cores também, e nada mudou. Por isso no código está a "color: #22D4FD;", que é a mesma do Background, e como pode ver, a fonte continua branca. já comparei com o exemplo da aula, e não encontro onde estou errando.
Oi!
Pode ser que tenha outra propriedade afetando seu CSS. Vou mandar aqui o código da aula da parte do rodapé, e se não funcionar, peço que você mande seu código completo HTML e CSS que assim podemos fazer testes e ver o que pode está acontecendo.
.rodape {
padding: 24px;
color: #000000;
background-color: #22D4FD;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 24px;
font-weight: 400;
}
Você pode usar a ferramenta de inserir bloco de código </>.
Caso haja alguma dúvida de como fazer, você pode assistir esse alura+ sobre como turbinar seus estudos com o fórum.
Um abraço e bons estudos.
Bom, tentei, e não consegui alterar a cor da fonte. Consigo alterar tudo em relação a ela (font-size, font-family, font-weight), ó não consigo a cor.
Seguem os códigos completos:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfólio</title>
<link rel="stylesheet" href="./styles/style.css">
</head>
<body>
<header class="cabecalho">
<nav class="cabecalho__menu">
<a class="cabecalho__menu__link" href="index.html">Home</a>
<a class="cabecalho__menu__link" href="about.html">Sobre Mim</a>
</nav>
</header>
<main class="apresentacao">
<section class="apresentacao__conteudo">
<h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="titulo-destaque">com um Front-end de qualidade!</strong></h1>
<p class="apresentacao__conteudo__texto">Olá! Sou Rafa Barbosa, desenvolvedor Front-end com especialidade em <span>React, HTML e CSS </span>. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
<div class="apresentacao__conteudo__links">
<h2 class="apresentacao__conteudo__links__subtitulo">Acesse minhas redes:</h2>
<a class="apresetacao__links__link" href="http://instagram.com/Oig_rafa"><img src="./assets/instagram.png">Instagram</a>
<a class="apresetacao__links__link"href="https://github.com/Rafy-dev"><img src="./assets/github.png">GitHub</a>
<a class="apresetacao__links__link"href="https://www.linkedin.com/in/rafael-barbosa-431961279/"><img src="./assets/linkedin.png">Linkedin</a>
</div>
</section>
<img src="./assets/perfil.jpeg" alt="Foto Rafa Barbosa" class="apresentacao__foto">
</main>
<footer class="rodape">
<p>Desenvolvido por Rafa Babosa</p>
</footer>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Noto+Sans:wght@400;600&display=swap');
*{
margin: 0;
padding: 0;
}
body {
box-sizing: border-box;
background-color: #5B3961;
color: white;
}
.titulo-destaque {
color: #22D4FD;
}
p {
font-size: 17px;
color: white;
}
span {
font-weight: bold;
color: #22D4FD;
}
.cabecalho {
padding: 2% 0% 0% 15%;
}
.cabecalho__menu{
display: flex;
gap: 80px;
}
.cabecalho__menu__link{
font-family: 'Montserrat', sans-serif;
font-size: 24px;
font-weight: 600px;
color: #22D4FD;
text-decoration: none;
}
.apresentacao {
padding: 5% 15%;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 58px;
}
.apresentacao__conteudo{
width: 615px; display: flex;
flex-direction: column;
gap: 40px;
}
.apresentacao__conteudo__titulo{
font-size: 36px;
font-family: 'Noto Sans', sans-serif;
}
.apresentacao__conteudo__texto{
font-size: 24;
font-family: 'Montserrat', sans-serif;
text-align: justify;
}
.apresentacao__conteudo__links{
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
}
.apresentacao__conteudo__links__subtitulo{
font-family: 'Noto Sans', sans-serif;
font-size: 24px;
}
.apresentacao__foto{
width: 450px;
height: 500px;
border-radius: 8px;
border: 3px double #22D4FD;
}
.apresetacao__links__link{
display: flex;
justify-content: center;
gap: 16px;
width: 368px;
border-radius: 8px;
border: 3px double #22D4FD;
font-family: 'Montserrat', sans-serif;
font-size: 24px;
font-weight: 600;
text-decoration: none;
color: white;
text-align: center;
padding: 21.5px 0;
}
.apresetacao__links__link:hover {
background-color: #6A1F8C;
width: 375px;
font-size: 25px;
}
.rodape {
padding: 24px;
color: BLACK;
background-color: #22D4FD;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 24px;
font-weight: 400;
}
Oie Rafael!
Então realmente tinha outro código afetando o texto do footer.
Você tem um uma tag <p> com uma estilização assim:
p {
font-size: 17px;
color: white;
}
E isso está afetando o <p> que tem no footer. Para estilizar somente o texto do footer você pode colocar uma class nele, por exemplo, fiz assim:
<p class="rodape__texto">Desenvolvido por Rafa Babosa</p>
E chamei no CSS, assim:
.rodape__texto {
color: #000000;
}
Você pode conferir aqui como ficou.
Espero que te ajude.
Um abraço e bons estudos.
Boa noite! Depois de muito quebrar a cabeça, descobri a fonte do problema. Eu havia esquecido no código do CSS esse trecho aqui:
p {
font-size: 17px;
color: white;
}
E de alguma forma que eu ainda não entendi, ele estava interferindo no footer.
Como já havíamos na aula criado uma classe para o parágrafo, este trecho estava sobrando no meu código.
Isso mesmo Rafael!
Dá uma olhada na minha resposta acima que dei uma dica de como você pode personalizar apenas o texto do footer. :)
Um abraço.