Consolidando Conhecimentos

HTML

<section>
      <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="img/Angular.svg" class="descrição_imagem"> 
      </div>

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

        <ul class="botoes">
            <li class="botoes_itens"><img src="img/coração.svg"></li>
            <li class="botoes_itens"><img src="img/Sacola.svg"></li>
        </ul>
      <!--2ºcoluna-->
        <a href="" class="botoes_ancora">Saiba mais</a>
        </div>
    </div>
    </section>

CSS

.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: #FFFFFF;
  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;
}