Por algum motivo, meu card está muito desalinhado. Aplicação: https://github.com/Higor-Matos/ReactCursoAlura
Por algum motivo, meu card está muito desalinhado. Aplicação: https://github.com/Higor-Matos/ReactCursoAlura
Salve, Higor!
Os estilos que você aplicou no componente <Rodape />
estão alterando as propriedades de todos os elementos que possuem a classe CSS .rodape
.
Para ajustar, você pode alterar o componente <Rodape />
para o seguinte, por exemplo:
// src/componentes/Rodape/index.js
import "./Rodape.css";
const Rodape = () => {
return (
<footer className="rodape-organo">
<div className="logos">
<img src="/imagens/fb.png" alt="Facebook" />
<img src="/imagens/tw.png" alt="Twitter" />
<img src="/imagens/ig.png" alt="Instagram" />
</div>
<img src="/imagens/logo.png" alt="Organo" />
<p>Desenvolvido por Higor Matos</p>
</footer>
);
};
export default Rodape;
/* src/componentes/Rodape/Rodape.css */
.rodape-organo {
align-items: center;
background-color: #6272a4;
background-image: url(/public/imagens/fundo.png);
display: flex;
justify-content: space-around;
padding: 5px 0;
width: 100%;
}
.rodape-organo .logos {
display: flex;
gap: 32px;
}
.rodape-organo p {
color: white;
}
Além disso, no seu arquivo src/componentes/Colaborador/Colaborador.css
, você pode remover a linha 26, para manter o texto alinhado ao centro.
A linha 26 é o seguinte:
text-align: initial;
Acho que com essa alterações você vai conseguir ter o resultado que espera.