1
resposta

Está ficando bagunçado e não consigo encontrar o erro.

HTML

  <div class="card">
            <!-- 1º linha -->
                <div class="card__descriçao">
                    <!-- 1ºcoluna--> 
                    <div class="descriçao">
                         <h2 class="descrição__titulo">Talvez você também se interesse por...</h2>
                         <h3 class="descrição__titulo-livro">Angular 11 e Firebase</h3>
                         <p class="descrição__texto">Construindo uma aplicação integrada com a plataforma do Google.</p>
                    </div>
                    <!--2ºcoluna-->
                    <img src="assets/Angular.svg" class="descrição__imagem"> 
                </div>

                 <!--2º linha-->
            <div class="card__botoes">

                <ul class="botoes">
                    <li class="botoes__itens"><img src="assets/Favoritos.svg"></li>
                    <li class="botoes__itens"><img src="assets/Compras.svg"></li>
                </ul>
                <!--2ºcoluna-->
                <a href="#" class="botoes__ancora">Saiba mais</a>
        </div>

CSS

    .carrossel__titulo{
    color: var(--laranja);
    background-color: var(--branco);
    text-align: center;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
    padding: 1em 0 0.5em 0;
}

.swiper-slide img{
    width: 100%;
}

.swiper-button-prev, .swiper-button-next{
    display: none;
}

.swiper-pagination{
    position: initial;
    margin: 0.5em 0;
}

.card_descriçao {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1em;
  }

  .card_botoes {
    display: flex;
    justify-content: space-between;
  }

  .botoes {
    display: flex;
  }

  .card {
    background: var(--branco);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    margin: 1.5em;
    padding: 1em;
    font-family: var(--fonte-principal);
  }

  .descrição__titulo{
    color: var(--laranja);
  font-weight: 700;
  font-size: 16px;
  text-transform: uppercase;
  }

  .descrição__titulo-livro {
    color: var(--azul-escuro);
    font-weight: 700;
    font-size: 18px; 
    text-transform: uppercase;
    margin: 0.5em 0;
  }

  .descrição__texto {
    color: black;
    font-weight: 400;
    font-size: 14px;
  }

  .botoes__itens {
    margin: 0.5em;
  }

  .botoes__ancora {
    color: var(--branco);
    background-color: var(--laranja);
    padding: 1.5em 2em;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
  }
1 resposta

Olá, Andersson.

Tudo bem?

Pelo que vi no seu código, algumas das classes no CSS estão com um underline card_descriçao, sendo que no HTML elas estão com dois card__descriçao tem que ser igual tanto no HTML quanto no CSS.

Espero ter ajudado.

Qualquer dúvida, conta com a gente!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software