3
respostas

Referente ao curso HTML e CSS: praticando HTML/CSS, no capítulo Finalizando nossa página e atividade Flexbox

por Gabriel

| 29.2k xp | 20 posts

Fiz todas as alterações e o texto ainda fica embaixo das imagens fiz algo errado será? Meu CSS:

:root {
    --branco-principal:#FFFFFF;
    --cinza-secundaria: #c0c0c0;
    --botao-azul: #167BF7;
    --cor-de-fundo: #00030C;
    --fonte-principal: 'Inter';
}

body{
     font-family: 'Inter', sans-serif;
     font-style: normal;
     font-size: 16px;
     font-weight: 400;
     display: block;
     background-color: var(--cor-de-fundo);
     color: var(--branco-principal);
}
*{  

    margin: 0;
    padding: 0;
}
.principal{
    background-image: url("img/Background.png");
    background-repeat: no-repeat;
    background-size: contain;
    align-items: center;
    text-align: center;
}
footer{
    text-align: center;
}
.conteiner{
    height: 100vh;
    display: grid;
    grid-template-columns: 50% 50%;
}

.conteiner__botao{
    background-color: var(--botao-azul);
    border-radius: 5px;
    padding: 1em;
    color: var(--branco-principal);
    display: block;
    text-decoration: none;
    margin-bottom: 1em;
}

.botao_secundario{

    background-color: transparent;
    border: 12px; 
    color: var(--branco-principal)

}
.conteiner__aviso{
    font-size: 12px;
    color: var(--cinza-secundaria);
}

.conteiner__titulo{
    font-size: 28px;
    font-weight: 700;
}
.__imagem{
    margin: 1em 0 2em 0;
}

.ct__caixa{
    margin: 0 6em;
}

.secundario__imagem{
    width: 60%;


}

.secundario{
    align-items: center;
    margin: 0 10em;

}
.descricao__titulo{
    font-weight: 700;
    font-size: 48px;
    color: var(--branco-principal);
    margin-bottom: 0.1em;
    padding: 0.2%;


}
.descricao__texto{
    color: var(--cinza-secundaria);
    padding: 2%;
}

.secundario_botao{
    display: inline-block;
    margin-top: 1em;
}

.container__descricao{
    padding: 2em;
}

.container__ingles{
    width: 40%;
    height: 30%;
    color: var(--branco-principal);
    display: inline-block;
    text-decoration: none;
    padding: 2%;



}


.terceiro__botao{
    width: 2%;
    background-color: var(--botao-azul);
    border-radius: 5px;
    padding: 6px;
    color: var(--branco-principal);
    margin-bottom:1em;
    text-decoration: none;



}

.baixe__cursos{
    width: 80%;
    padding: 5em;




}
.notebook__titulo{
    font-weight: 700;
    font-size: 48px;
    color: var(--branco-principal);
    margin-bottom: 0.1em;
    padding: 0.2%;


}

3 respostas

por Gabriel

| 29.2k xp | 20 posts

29/11/2022

Meu HTML:

<!DOCTYPE html>
<html>
    <head>

        <meta charset="UTF-8">
        <meta name="Viewport" content="width=device-width, initial scale=1">
        <title>Alura plus</title>
        <link rel="stylesheet" href="style.css">
        <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<style>
    @import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
    </style>
        </head>

    <body>
        <section class=" conteiner principal">
    <div class="ct__caixa">
        <h1 class="conteiner__titulo">Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.</h1>
        <img src="img/Combo.png" alt="O Alura combo é a junção do Alura+ eo Alura Lingua" class="__imagem" >
        <a href="https://www.alura.com.br/" class="conteiner__botao">Assine por 12x de R$ 120,00*</a>
        <a href="https://www.alura.com.br/" class="conteiner__botao botao_secundario">Assinar somente com o Alura+</a>
        <p class="conteiner__aviso">*O preço pode variar caso a assinatura seja feita em outros planos.</p>
    </div>
        </section>
        <section class="secundario">
            <img src="./img/Plataformas.png" alt="" srcset="Um monitor e um celular com o Alura plus aberto" class="secundario__imagem">
            <div class="container__descricao">
                <h2 class="descricao__titulo">Assista do seu jeito</h2>
                <p class="descricao__texto">Aproveite a tela grande da TV ou assista no tablet, laptop, celular e outros aparelhos. Nossa seleção de cursos não para de crescer.</p>
                <section class="Terceira__imagem">
                    <img src="/img/Telas.png" alt="" srcset="Faça um curso de inglês com a alura" class="imagem__inglês">
                    <div class="conteiner__ingles">
                        <br>
                       <p>Só o Combo+ oferece Alura+ e Alura Língua juntos para você ter acesso a cursos de diversas áreas da tecnologia e aprender inglês ou espanhol, onde e como quiser.</p>
                       <br><a href="https://www.alura.com.br/" class="terceiro__botao">Assine o combo+</a>

                    </div>

                    <div class="baixe__cursos">
                        <img src="/img/Notebook.png" alt="" srcset="notebook com seus cursos baixados.">

                        <br>
                        <h2 class="notebook__titulo">
                            Baixe seus cursos
                        </h2>
                        <p class="notebook__descricao">
                            Baixe e assista quando e onde quiser. Assim, seus favoritos estão sempre com você, até mesmo sem internet.
                        </p>

                    </div>

                </section>

            </div>

        </section> 
    </body>
</html>

por Renan Lima

| 3599.4k xp | 7588 posts

Alura Scuba Team Apoio Educacional - Alura

30/11/2022

Olá, Gabriel.

Tudo bem?

Na sua <section> que tem uma classe secundario, não deveria ter uma classe container também?

Veja:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Espero ter ajudado. Qualquer dúvida manda aqui de novo. Valeu.

por Noberto Luis Martins Ferreira Filho

| 127.3k xp | 77 posts

Frontend developer

30/11/2022

ola, na estrutura do seu HTML deveria existir 3 section de classe secundário mas você acabou colocando uma dentro da outra.

Acredito que reorganizando elas e separando em 3 "< section>" diferentes cada uma com a classe "secundario" aplicada, vá resolver.

    <section class="principal container">
        <div class="container__caixa">
            <h1 class="container__titulo"></h1>
            <img src="" alt="" class="container__imagem">
            <a href="" class="container__botao"></a>
            <a href="" class="container__botao botao_secundario"></a>
            <p class="container__aviso"></p>
        </div>
    </section>

    <section class="container secundario">
        <img src="" alt="" class="secundario__imagem">
        <div class="container__descricao">
            <h2 class="descricao__titulo"></h2>
            <p class="descricao__texto"></p>
        </div>
    </section>

    <section class="container secundario">
        <div class="container__descricao">
            <p class="descricao__texto"></p>
            <a href="" class="container__botao secundario__botao" container></a>
        </div>
        <img src="" alt="" class="secundario__imagem">
    </section>

    <section class="container secundario">
        <img src="" alt=""
            class="secundario__imagem">
        <div class="container__descricao">
            <h2 class="descricao__titulo"></h2>
            <p class="descricao__texto"></p>
        </div>
    </section>

Mergulhe em programação

Veja: