Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Projeto] Minha solução

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;
}
1 resposta
solução!

Excelente! Gostei do CSS, usando background-blend-mode! :)