1
resposta

Minha solução

Olá,

Segue minha solução para o rodapé:

// index.js

import './Rodape.css'

const Rodape = () => {
    return (
        <section className='rodape'>
            <div className='logos'>
                <a href='http://facebook.com'><img src='/img/fb.png' alt='Facebook logo'/></a>
                <a href='http://twitter.com'><img src='/img/tw.png' alt='Twitter logo'/></a>
                <a href='http://instagram.com/'><img src='/img/ig.png' alt='Instagram logo'/></a>
            </div>

            <img className='logo' src='/img/logo.png' alt='Logo organo' />

            <p className='texto'>Desenvolvido por Alura.</p>

        </section>
    )
}

export default Rodape

// Rodape.css

.rodape {
    background-color: #6278F7;    
    display: flex;
    padding: 50px;
    justify-content: space-around;
    align-items: center;
    background-image: url('../../../public/img/fundo.png');
}

.rodape .logos {
    size: 80%;
    width: 20%;
    display: flex;
    justify-content: space-around;
}

.rodape .texto {
    color: white;
}
1 resposta

Olá Moisés!

Obrigada por compartilhar sua solução de rodapé! Ficou muito legal!

Apenas uma observação: na classe .rodape .logos, a propriedade size não existe. Talvez você tenha querido utilizar font-size ou width.

Espero ter ajudado e bons estudos!