Aula 9 - Video 2 | Bootstrap: criação de uma single-page responsiva

<div class="container topCasaFina-bannerWrapper"> <div class="ziitech-banner"> <h1>Zii Tech</h1> <p> Nossos principais segmentos de mercado são Telecomunicações, Tecnologia da Informação (TI), Energia Elétrica, Automação, Agropecuária e Construção Civil. Aplicação industrial, rural, comercial e residêncial. </p> <button type="button" class="btn btn-primary btn-lg">Contate-nos</button> </div> </div> CSS: @media(min-width:992px) { .ziitech-banner { left: 0; transform: translate(0, -40%); } } .topCasaFina-bannerWrapper { position: relative; height: 100%; }

Olá, Adriano! Tudo certo? =)

Como você só postou parte do código, não tenho como lhe dar uma resposta definitiva, mas aqui vão alguns possíveis problemas:

1- Seu wrapper deve ficar no <header>, abaixo do <nav>, assim:

<header>
    <nav>
        <...>
    </nav>
    <div class="container topCasaFina-bannerWrapper">
        <div class="ziitech-banner">
            <h1>TopCasaFina Arquitetura</h1>
            <p>Projetando a casa dos sonhos desde 2000 A.C</p>
            <button class="btn btn-primary btn-lg">Contate-nos agora</button>
        </div>
    </div>
</header>

2- Não se esqueça de importar o CSS, no <head>. Caso esteja seguindo a mesma estrutura de pastas:

<head>
    <...>
    <link rel="stylesheet" href="assets/css/estilos.css">
</head>

3- Verifique seu CSS. Me parece que há um pequeno erro com seu CSS, pois a única coisa que você está fazendo em sua media-query é estilizar a classe .ziitech-banner, mas o wrapper também deveria ficar... Assim:

/* Observe que essa classe não está dentro de nenhum media-query. */
.ziitech-banner {
    color: #FFF;
    background-color: rgba(0, 0, 0, .5);
    padding: 20px;
    width: 80%;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .3s;
}

/* Na media-query, alteramos tanto o wrapper quanto o banner em si. *.
@media(min-width: 992px) {
    .topCasaFina-banner {
        left: 0;
        transform: translate(0, -80%);
        width: 50%;
    }

    .topCasaFina-bannerWrapper {
        position: absolute;
        height: 100%;
    }
}

Espero ter ajudado! =)

Abraço e bons estudos,

Fábio