.apresentacao__creditos {
padding: 24px;
color: #000000;
background-color:aqua;
text-align: center;
font-family: "montserrat" , sans-serif;
font-size: 24px;
font-weight: 400;
}
.apresentacao__creditos {
padding: 24px;
color: #000000;
background-color:aqua;
text-align: center;
font-family: "montserrat" , sans-serif;
font-size: 24px;
font-weight: 400;
}
OiA boa notícia é que você já tem quase tudo pronto — só faltam alguns detalhes de semântica, variáveis e reset de estilos que costumam “travar” o visual.
Troque o container atual pelo elemento <footer>
:
<footer class="rodape">
<p class="rodape__creditos">
Os dados desse site são de autoria de Hiago Viana. Contato: (84) 98103-1614
</p>
</footer>
Isso ajuda na acessibilidade e no SEO.
O parágrafo <p>
vem com margin-block: 1em
por padrão, e isso pode “empurrar” o bloco no layout.
.rodape__creditos {
margin: 0; /* zera margens internas do <p> */
}
.rodape {
width: 100%;
background-color: var(--cor-terciaria);
display: flex; /* mantém tudo centralizado */
justify-content: center;
align-items: center;
padding-block: 24px; /* padding acima/abaixo */
}
.rodape__creditos {
color: var(--cor-secundaria);
font-family: var(--fonte-secundaria);
font-size: 1.5rem; /* 24 px ≈ 1.5 rem */
font-weight: 400;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--fonte-primaria);
background-color: var(--cor-primaria);
}
Isso garante que o rodapé grude na lateral esquerda/direita sem “sobras” de margem.
Bomtrabalho.