Footer/index.js
import './Footer.css';
const Footer = () => {
return (
<section className='rodape'>
<div className='icones'>
<img src="/imagens/fb.png" alt="icone do Facebook" />
<img src="/imagens/tw.png" alt="icone do Twitter" />
<img src="/imagens/ig.png" alt="icone do Instagram" />
</div>
<div className='logo'>
<img src="/imagens/logo.png" alt="logotipo da Organo" />
</div>
<div className='alura'>Desenvolvido por Alura.</div>
</section>
)
}
export default Footer
Footer/Footer.css
.rodape {
background-color: #6278F7;
background-image: url("/public/imagens/fundo.png");
background-position: top;
background-size: cover;
background-blend-mode: color-dodge;
max-width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
padding: 48px;
}
.rodape .icones img {
height: 35px;
padding: 32px;
}
.rodape .alura {
font-size: 20px;
color: #fff;
}