Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] O meu ficou em miniatura a descricao e imagem (

Referente ao curso HTML e CSS: praticando HTML/CSS, no capítulo Posicionando elementos e atividade Reutilizando estilos

por Jordach Schveitzer
| 2.9k xp | 10 posts

Não consigo descobrir o erro

HTML

Só o Combo+ oferece Alura Plus e Alura Língua juntos para você ter acesso a cursos de diversas áreas de tecnologia e aprender ou espanhol onde e como quiser

Assinar o Combo+>
Tela da Alura Plus e do Alura Língua

CSS

.principal{

background-image: url(./img/Background.png); background-repeat: no-repeat; background-size: contain; align-items: center;/*quando ele está no grid e que só definimos coluna, não definimos linha, ele vai alinhar ao centro dessa coluna. */ text-align: center; /alinha tudo inclusive a imagem dentro do bloco/ }

.container{

height: 100vh; display: grid; grid-template-columns: 50% 50%;

}

.container__botao{

background-color:var(--botao-azul);

border-radius: 5px; padding: 1em; color: var(--branco-principal); display: block; text-decoration: none; /* tira o sublinhado e outras cositas do texo*/ 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;

}

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

3 respostas
por Lorena Garcia
| 8258.5k xp | 12081 posts
Alura Scuba Team Suporte Educacional

Oi Jordach! Tudo bem?

Você poderia mandar seu código completo aqui? Não conseguimos visualizar o HTML. Você pode usar a ferramenta de inserir bloco de código </>.

Caso haja alguma dúvida de como fazer, você pode assistir esse alura+ sobre como turbinar seus estudos com o fórum.

Um abraço e bons estudos.

por Jordach Schveitzer
| 2.9k xp | 10 posts

Oi @lorena vou enviar o HTml

!DOCTYPE html>/>
<html>
     <head> 
        <title> Alura Plus</title>
        <meta charset="name="viewport width-deviceowidth, initial-scale="1">" <!-- identifica tamanho da tela do dispositivo; pega largura do dispositivo; e escala-->
        <link rel="stylesheet" href="2.styles.css">

        <meta charset="UTF-8"> <!-- vai reconehcer todos os caracteres especiais-->
       <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=Kdam+Thmor+Pro&display=swap" rel="stylesheet">
    </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 lingua" 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/Imagem 2.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 class="container secundario">
            <div class="container__descricao">
                <p class="descricao__texto">Só o Combo+ oferece Alura Plus e Alura Língua juntos para você ter acesso a cursos de diversas áreas de tecnologia e aprender 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>
    
         

     </body>

     </html>
solução!
por Lorena Garcia
| 8258.5k xp | 12081 posts
Alura Scuba Team Suporte Educacional

Oie! Analisei o seu código e o erro está aqui:

<section class="container secundario">
           <img src="./img/Imagem 2.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>

Você abriu a <section> mas não a fechou.

Corrige para:

<section class="container secundario">
        <img src="./img/Imagem 2.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>

Corrige também aqui no CSS:

.principal {
    background-image: url(./img/Background.png);
    background-repeat: no-repeat;
    background-size: contain;
    align-items: center;
    /*quando ele está no grid e que só definimos coluna, não definimos linha, ele vai alinhar ao centro dessa coluna. */
    text-align: center;/alinha tudo inclusive a imagem dentro do bloco/
}

Perceba que não está comentado de fato, você precisa ajustar para:

.principal {
    background-image: url(./img/Background.png);
    background-repeat: no-repeat;
    background-size: contain;
    align-items: center;
    /*quando ele está no grid e que só definimos coluna, não definimos linha, ele vai alinhar ao centro dessa coluna. */
    text-align: center; /*alinha tudo inclusive a imagem dentro do bloco*/
}

Fazendo esses ajustes fica certinho:

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

Um abraço e bons estudos.