<h2 class="text-center">Busque por categoria:</h2>
<div class="container row mx-auto g-4">
<div class="col-6 col-md-4 col-xxl-2">
<div>
<div class="card">
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg"
role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect>
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
</svg>
<div class="card-header bg-black text-bg-dark">
<p class="text-center card-text">
Categoria
</p>
</div>
</div>
</div>
<section class="pb-4 bg-black text-bg-dark">
<h2 class="text-center py-3">Conheça todas as nossas facilidades</h2>
<div class="d-flex flex-column flex-lg-row align-items-center justify-content-center gap-3 px-3">
<div class="divs-facilidades d-flex align-items-center">
<div><i class="verde-limao bi bi-x-diamond fs-1"></i></div>
<div>
<div class="ms-3 mb-1 verde-limao">PAGUE PELO PIX</div>
<div class="texto-menor ms-3">Ganhe 5% OFF em
pagamentos via PIX</div>
</div>
</div>
<div class="divs-facilidades d-flex ">
<div><i class="verde-limao bi bi-arrow-repeat fs-1"></i></div>
<div>
<div class="ms-3 mb-1 verde-limao">TROCA GRÁTIS</div>
<div class="texto-menor ms-3">Fique livre para trocar em até 30 dias.</div>
</div>
</div>
<div class="divs-facilidades d-flex ">
<div><i class="verde-limao bi bi-flower1 fs-1"></i></div>
<div>
<div class="ms-3 mb-1 verde-limao">SUSTENTABILIDADE</div>
<div class="texto-menor ms-3">Moda responsável, que respeita o meio ambiente.</div>
</div>
</div>
</div>
</section>
<footer class="text-center bg-black text-bg-dark">
<p class="card-text py-3">2023 <i class="bi bi-c-circle"></i> Desenvolvido por Alura | Projeto fictício sem fins comerciais.</p>
</footer>
<h2 class="text-center">Produtos que estão bombando!</h2>
<div class="container row mx-auto">
<div class="col-12 col-md-6 col-xxl-4 pb-4">
<div class="card">
<svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg"
role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false">
<title>Placeholder</title>
<rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image
cap</text>
</svg>
<div class="card-body">
<h5 class="card-title">Produto</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
content.</p>
<p>R$30,00</p>
<a href="#" class="btn btn-primary botao-lilas rounded-0 border-0">Ver mais</a>
</div>
</div>
</div>
Css
.texto-menor{
font-size:13px;
}
.divs-facilidades{
width: 325px;
}
.botao-lilas{
background-color: #9353FF;
color:#fff;
}
.verde-limao{
color:#DAFF01;
}
O meu contuinua com erro!
 ]()
