Criando um site do zero em WordPress - Aula 11 - Fatiando o layout III

Nessa vídeo-aula, finalizaremos a disposição do nosso layout utilizando HTML5 e CSS.

Criaremos os botões login e cadastre-se e o texto principal da página.

Código HTML (header.php)

<div class="BotaoLogin">
    <a href="">Login</a>
</div>
        
<div class="BotaoCadastrese">
    <a href="">Cadastre-se</a>
</div>

Código HTML (index.php)

<div class="TextosIniciais">
    <div class="TextosIniciaisTitulo">
        Encontre-se na natureza.
    </div>

    <div class="TextosIniciaisFrase">
        Participe da comunidade em prol da preservação <br>
        do meio ambiente em todo mundo.
    </div>

    <div class="TextosIniciaisBotao">
        <a href="">Cadastre-se</a>
    </div>
</div>

Código CSS

@media only screen and (max-width: 480px){
    .BotaoLogin{display:none;}

    .BotaoCadastrese{display:none;}

    .TextosIniciais{position: relative; width: 100%; top: 170px; color: #fff;}
        .TextosIniciaisTitulo{position: absolute; width: 90%; left: 5%; font-size: 25px; font-weight: 900; text-align: center;}
        .TextosIniciaisFrase{display:none;}
        .TextosIniciaisBotao a{position:absolute; top: 80px; right: 30%; font-weight: bold; background: #fff; color: #000; padding: 12px; border-radius: 7px; text-decoration: none;}
}

@media only screen and (min-width: 481px) and (max-width: 768px){
    .BotaoLogin{display:none;}

    .BotaoCadastrese{display:none;}

    .TextosIniciais{position: relative; width: 100%; top: 170px; color: #fff;}
        .TextosIniciaisTitulo{position: absolute; width: 80%; left: 10%; font-size: 30px; font-weight: 900;}
        .TextosIniciaisFrase{position: absolute; width: 80%; top: 60px; left: 15%; font-size: 21px; font-weight: bold; text-align: right;}
        .TextosIniciaisBotao a{position:absolute; top: 140px; right: 40%; font-weight: bold; background: #fff; color: #000; padding: 12px; border-radius: 7px; text-decoration: none;}
}

@media only screen and (min-width: 769px) and (max-width: 1199px){
    .BotaoLogin{position: absolute; top: 40px; right: 200px; font-weight: bold;}
        .BotaoLogin a{color:#fff; text-decoration: none;}

    .BotaoCadastrese a{position:absolute; top: 30px; right: 30px; font-weight: bold; background: #fff; color: #000; padding: 12px; border-radius: 7px; text-decoration: none;}

    .TextosIniciais{position: relative; width: 100%; top: 200px; color: #fff;}
        .TextosIniciaisTitulo{position: absolute; width: 70%; left: 10%; font-size: 40px; font-weight: 900;}
        .TextosIniciaisFrase{position: absolute; width: 70%; top: 80px; left: 20%; font-size: 25px; font-weight: bold; text-align: right;}
        .TextosIniciaisBotao a{position:absolute; top: 170px; right: 40%; font-weight: bold; background: #fff; color: #000; padding: 12px; border-radius: 7px; text-decoration: none;}
}

@media only screen and (min-width: 1200px){
    .BotaoLogin{position: absolute; top: 40px; right: 380px; font-weight: bold;}
        .BotaoLogin a{color:#fff; text-decoration: none;}

    .BotaoCadastrese a{position:absolute; top: 30px; right: 150px; font-weight: bold; background: #fff; color: #000; padding: 12px; border-radius: 7px; text-decoration: none;}

    .TextosIniciais{position: relative; width: 100%; top: 200px; color: #fff;}
        .TextosIniciaisTitulo{position: absolute; width: 70%; left: 20%; font-size: 40px; font-weight: 900;}
        .TextosIniciaisFrase{position: absolute; width: 50%; top: 80px; left: 30%; font-size: 25px; font-weight: bold; text-align: right;}
        .TextosIniciaisBotao a{position:absolute; top: 170px; right: 40%; font-weight: bold; background: #fff; color: #000; padding: 12px; border-radius: 7px; text-decoration: none;}
}

Sucesso nos códigos e na vida ;)