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

Aula 9 - Video 2

Na parte do

, o poisicionamento fica embaixo, ao contrario do site do Instrutor.

HTML:

<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%;
}
1 resposta
solução!

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