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

[Projeto] Minha resolução do desafio

index.js

import './Rodape.css'

const Rodape = () => {
    return (
        <footer>
            <img src="/imagens/fundo.png" alt="Rodape" className="rodape__imagem" />
            <div className="icones">
                <a href="https://facebook.com" target={'_blank'}><img src="/imagens/fb.png" alt="Ícone do Facebook" /></a>
                <a href="https://twitter.com"><img src="/imagens/tw.png" alt="Ícone do Twitter" /></a>
                <a href="https://instagram.com"><img src="/imagens/ig.png" alt="Ícone do Instagram" /></a>
            </div>

            <img src="/imagens/logo.png" alt="Logo do Organo" />

            <p>Desenvolvido por Alura</p>

        </footer>
    )
}

export default Rodape

Rodape.css

footer {
    background-color: #6278f7;
    width: 100%;
    height: 213px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.rodape__imagem {
    width: 100%;
    height: 213px;
    position: absolute;
}



.icones a {
    cursor: pointer;
    position: sticky;
}

.icones img {
    padding: 1em;
}

footer p {
    color: white;
    font-weight: 500;
    font-size: 1.25rem;
}

resultado: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
solução!

Olá, Leonardo.

Tudo bem?

Muito obrigado por compartilhar a sua solução aqui com a gente. Meus parabéns, ficou muito bom! É bem legal ver que você está praticando e evoluindo, contnue assim. E se precisar de ajuda conta com a gente.

Valeu.