REACTJS - Aplicação de Página �nica - #5 Logomarca e Endereço

Neste vídeo-tutorial trabalharemos com a criação da logomarca do empreendimento no CorelDraw e trataremos da construção dos componentes address e logo.

Criando os componentes de logomarca e endereço

Após a criação da logomarca e do ícone do WhatsApp conforme demonstrado no vídeo vamos salvar como png dentro do diretório img.

Vamos editar agora os componentes address:

import React from 'react';

export default class Address extends React.Component {

    render(){
        return(
            <div className="address"<
                <picture<
                    <source media="(max-width: 768px)" srcSet="/img/whatsapp-wef-imoveis-S.png" /<
                    <source media="(min-width: 769px)" srcSet="/img/whatsapp-wef-imoveis-L.png" /<
                    <img src="/img/whatsapp-wef-imoveis-L.png" alt="WhatsApp de Imóveis no Barreiro"/<
                </picture<

                <strong< (xx) xxxx-xxxx</strong<<br/<
                Endereço
            </div<
        );
    }
}

E o componente logo:

import React from 'react';

export default class Logo extends React.Component {

    render(){
        return(
            <div className="logo">
                <picture>
                    <source media="(max-width: 768px)" srcSet="/img/logomarca-wef-imoveis-S.png" />
                    <source media="(min-width: 769px)" srcSet="/img/logomarca-wef-imoveis-L.png" />
                    <img src="/img/logomarca-wef-imoveis-L.png" alt="Logomarca WEF Imóveis"/>
                </picture>
            </div>
        );
    }
}

Agora só falta a estilização no CSS:

@media screen and (max-width: 480px) {
    .logo{position: absolute; top: 0; left: 5%;}

    .address{order:3; padding: 10px 5%; line-height: 30px; color:#fff; text-align: center; background: #51A8B1;}
        .address img{vertical-align: middle;}
        .address strong{font-size: 27px;}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    .logo{position: absolute; top: 0; left: 5%;}

    .address{order:3; padding: 10px 5%; line-height: 30px; color:#fff; text-align: center; background: #51A8B1;}
        .address img{vertical-align: middle;}
        .address strong{font-size: 27px;}
}

@media screen and (min-width: 769px) and (max-width: 1199px) {
    .logo{float:left; width: 30%; padding: 15px 0 15px 10%;}

    .address{float:left; width: 70%; padding: 20px 5% 10px 20%; line-height: 35px; text-align: center;}
        .address img{vertical-align: middle;}
        .address strong{color: #51A8B1; font-size: 27px;}
}

@media screen and (min-width: 1200px) {
    .logo{float:left; width: 30%; padding: 15px 0 15px 10%;}

    .address{float:left; width: 70%; padding: 20px 5% 10px 20%; line-height: 35px; text-align: center;}
        .address img{vertical-align: middle;}
        .address strong{color: #51A8B1; font-size: 27px;}
}

Sucesso nos códigos e na vida!