Entrar Ainda não tem acesso?
1
resposta

Não consigo alinhar corretamente o container secundário

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

por Estudante
| 168.9k xp | 30 posts

Todos os "container secundário" não estão distribuidos em linha, estão como se fossem uma coluna. Já baixei o código original, comparei e revisei , mas não encontro o problema. Seguem códigos. Obrigada.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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&family=Montserrat:wght@300&family=Open+Sans&family=Vujahday+Script&display=swap"
        rel="stylesheet">
    <title>Alura Plus</title>
</head>

<body>
    <section class="container principal">
        <div class="container__caixa">
            <h1 class="container__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 Combo+ é a junção do Alura+ e o Alura Língua" class="container__imagem">
            <a href="www.alura.com.br/" class="container__botao">Assine por 12x de R$ 120,00*</a>
            <a href="www.alura.com.br/" class="container__botao botao_secundario">Assinar somente o Alura+</a>
            <p class="container__aviso">*O preço pode variar caso a assinatura seja feita em outros planos.</p>
        </div>
    </section>
    <section class="container secundario">
        <img src="img/Plataformas.png" alt="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>
        </div>
    </section>
    <section class="container secundario">
        <div class="container__descricao">
            <p class="descricao__texto">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>
            <a href="www.alura.com.br" class="container__botao secundario__botao">Assinar o Combo+</a>
        </div>
        <img src="img/Telas.png" alt="Tela da Alura Plus e do Alura Língua" class="secundario__imagem">
    </section>

    <section class="container secundario">
        <img src="img/Notebook.png" alt="Um notebook com o Alura Plus aberto" class="secundario__imagem">
        <div class="container__descricao">
            <h2 class="descricao__titulo">Baixe seus cursos</h2>
            <p class="descricao__texto">Baixe e assista quando e onde quiser. Assim, seus favoritos estão sempre com
                você, até mesmo sem internet.</p>
        </div>
    </section>
</body>

</html>

CSS

:root {
    --branco-principal: #ffffff;
    --cinza-secundario: #C0C0C0;
    --botao-azul: #167BF7;
    --cor-de-fundo: #00030C;
    --fonte-principal: 'Inter';
}

body{
    background-color: var(--cor-de-fundo);
    color:var(--branco-principal);
    font-family: var(--fonte-principal);
    font-size: 16px;
    font-weight: 400;
}

* {
    margin: 0;
    padding: 0;
}

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

.container__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: 2px solid var(--branco-principal);

}
.container__aviso {
font-size: 12px;
color: var(--cinza-secundario);
}

.container__titulo {
    font-size: 28px;
    font-weight: 700;
}

.container__imagem {
    margin: 1em 0 2em 0;
}

.container__caixa {
    margin: 0 6em;
}

.secundario__imagem {
    width: 80%;
}

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

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

.descricao__texto {
    color: var(--cinza-secundario);
}

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

.container__descricao {
    padding: 2em;
}
1 resposta
por Carlos Eduardo Da Silva Santos
| 240k xp | 43 posts

Olá Rosele, boa noite!!

*Identificando o Problema: *

De acordo com a sua pergunta, você quer saber porque os elementos ".secundario" não estão alinhados um ao lado do outro, mas sim, na vertical.

*Solução do Problema: *

Para resolver isso, você precisa organiza o seu html primeiro. Desse jeito: 

<body>
    <section class="container principal">
        <div class="container__caixa">
            <h1 class="container__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 Combo+ é a junção do Alura+ e o Alura Língua" class="container__imagem">
            <a href="www.alura.com.br/" class="container__botao">Assine por 12x de R$ 120,00*</a>
            <a href="www.alura.com.br/" class="container__botao botao_secundario">Assinar somente o Alura+</a>
            <p class="container__aviso">*O preço pode variar caso a assinatura seja feita em outros planos.</p>
        </div>
    </section>

    // Envelope os elementos que você quer que sejam distribuídos na horizontal em um elemento pai:

    <div class="flex-container">
        <section class="container secundario">
            <img src="img/Plataformas.png" alt="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>
            </div>
        </section>
        <section class="container secundario">
            <div class="container__descricao">
                <p class="descricao__texto">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>
                <a href="www.alura.com.br" class="container__botao secundario__botao">Assinar o Combo+</a>
            </div>
            <img src="img/Telas.png" alt="Tela da Alura Plus e do Alura Língua" class="secundario__imagem">
        </section>

        <section class="container secundario">
            <img src="img/Notebook.png" alt="Um notebook com o Alura Plus aberto" class="secundario__imagem">
            <div class="container__descricao">
                <h2 class="descricao__titulo">Baixe seus cursos</h2>
                <p class="descricao__texto">Baixe e assista quando e onde quiser. Assim, seus favoritos estão sempre com
                    você, até mesmo sem internet.</p>
            </div>
        </section>
    </div>
</body>

Para casos assim em que você precisa dividir um conteúdo de outro, seja para fazer um posicionamento diferente dos elementos ou para estilos diferente, faça uso da tag "div" para fazer essa divisão, pois ela não tem semântica.

*Agora o css --> *

Faça o uso do flexbox para pode distribuir os elementos de forma flexível, ou seja, adicione a propriedade "display: flex;" em um elemento pai para distribui os seus elementos filhos. Desse jeito: 

// o elemento .flex-container é o pai de 3 sections, e queremos distribuir essas sections (ou seja, os seus filhos) na horizontal.

body  .flex-container {
    display: flex;
    justify-content: center;
}

// a propriedade display serve para definir como um elemento vai ser renderizado no layout (tela);

// a propriedade justify-content serve para definir como os elementos filhos vão ser distribuídos na horizontal, ou seja, distribuir eles ao centro, na esquerda, na direita e etc.

Com isso você vai conseguir alinhar elementos na horizontal.

*Conclusão: *

Para fazer esse alinhamento na horizontal, primeiro você precisa de um html organizado, pois ele será o estopim do estilo que você deseja. Depois disso, use a propriedade "display" com o valor "flex". Recomendo ver o curso de flexbox da alura, assim você vai aprender a como distribuir elementos de forma dinâmica e flexível.

*Despedida: *

Se a sua dúvida foi resolvida, não se esqueça de colocar a questão como resolvida, pois assim as pessoas que tiverem o mesmo problema que você, saberam que a sua pergunta foi resolvida e clicaram nela para saber como resolver.

Tenha um bom estudo!!