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;
}