Bom dia! Não consegui alinhar o botão âncora "Saiba Mais" conforme o figma!!
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Bom dia! Não consegui alinhar o botão âncora "Saiba Mais" conforme o figma!!
.carrosel__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__descricao {
display: flex;
justify-content: space-between;
margin-bottom: 0.5em;
}
.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: 1em;
padding: 1em;
}
.descricao__titulo {
color: var(--laranja);
font-weight: 700;
}
.descricao__titulo-livro {
color: var(--azul);
font-size: 18px;
font-weight: 700;
margin: 0.5em 0;
}
.descricao__texto {
font-size: 14px;
}
.botoes__item {
margin: 0 0.5em;
}
.botoes__ancora {
background-color: var(--laranja);
padding: 1em 2.2em;
color: var(--branco);
font-weight: 700;
text-decoration: none;
}
<section class="carrosel">
<h2 class="carrosel__titulo"> Mais Vendidos</h2>
<!-- Slider main container -->
<div class="swiper">
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide"><img src="img/Construct2.svg" alt="livro Construct2 da alura books">
</div>
<div class="swiper-slide"> <img src="img/Arquitetura.svg"
alt="livro sobre Arquitetura da alura books"></div>
<div class="swiper-slide"><img src="img/Gestão2.svg" alt="livro sobre Gestão2 da alura books">
</div>
<div class="swiper-slide"><img src="img/MetricasAgeis.svg"
alt="livro sobre MetricasAgeis da Alura Books"></div>
<div class="swiper-slide"><img src="img/Portugol.svg" alt="livro sobre Portugol Books"></div>
<div class="swiper-slide"><img src="img/Gestão.svg " alt="livro sobre Gestão da Alura Books"> </div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="card">
<!-- 1º linha -->
<div class="card__descricao">
<!--1º coluna-->
<div class="descricao">
<h3 class="descricao__titulo"> Autora do Mês</h3>
<h2 class="descricao__titulo-livro">Juliana Agarikov</h2>
<p class="descricao__texto"> Analista de sistemas e escritora, Juliana é especialista em
Front-End</p>
</div>
<!--2º coluna-->
<img src="img/juliana.svg" class="descricao__imagem">
</div>
<!--2linha-->
<div class="card__bortoes">
<!--1coluna-->
<ul class="botoes">
<li class="botoes__item"> <img src="img/Favoritos.svg" alt="Favoritar livro" </li>
<li class="botoes__item"> <img src="img/Compras.svg" alt="Adicionar carrinho" </li>
</ul>
<!--2coluna-->
<a href="#" class="botoes__ancora">Saiba mais</a>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script> swiper = new Swiper('.swiper', {
spaceBetween: 10,
slidesPerView: 3,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
}
});
</script>
Encontrei o erro, estava na digitação da classe botoes, havia digitado bortoes. Gratidão