REACTJS - Aplicação de Página �nica - #8 Footer

Hoje faremos a construção e estilização do componente footer do nosso website.

Criando componente Footer no ReactJS

Primeiramente faremos a criação de uma logomarca em cor branca para compor o rodapé do nosso site. Vamos salvá-la dentro da pasta public/img.

Em seguida desenvolveremos nosso componente:

import React from 'react';

export default class Footer extends React.Component {

    render(){
        return(
            <div className="footer">
                <div>
                    <img src="/img/logomarca-footer.png" alt="Logomarca WEF Imóveis Footer"/>
                </div>
                <div>
                    Endereço <br/>
                    Telefone <br/>
                    Email
                </div>
            </div>
        );
    }
}

Vamos estilizar nosso componente:

.footer{display:flex;width: 100%;background: #38777E;padding: 15px 5%;font-weight: bold;line-height: 35px;}
    .footer div:nth-child(2){color:#fff;}

@media screen and (max-width: 480px) {
    .footer{flex-direction:column; text-align: center;}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
.footer div:nth-child(1){flex-grow: 1; text-align: center;}
    .footer div:nth-child(2){flex-grow: 5;}
}

@media screen and (min-width: 769px) and (max-width: 1199px) {
.footer div:nth-child(1){flex-grow: 1; text-align: center;}
    .footer div:nth-child(2){flex-grow: 5;}
}

@media screen and (min-width: 1200px) {
.footer div:nth-child(1){flex-grow: 1; text-align: center;}
    .footer div:nth-child(2){flex-grow: 5;}
}

Até a próxima aula!