[Projeto] Lista de exercícios

HTML

<section class="carrossel">
    <h2 class="carrossel__titulo">Novos lançamentos</h2>
<div class="swiper">
    <div class="swiper-pagination"></div>
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="img/ApacheKafka.svg" alt="Livro sobre apache kafka e spring boot da alura books"></div>
      <div class="swiper-slide"><img src="img/Liderança.svg" alt="Livro sobre liderança en design da alura books"></div>
      <div class="swiper-slide"><img src="img/Javascript.svg" alt="Livro sobre javascript assertivo da alura books"></div>
      <div class="swiper-slide"><img src="img/Guia Front-end.svg" alt="Livro Guia front end"></div>
      <div class="swiper-slide"><img src="img/Portugol.svg" alt="Livro sobre portugol"></div>
      <div class="swiper-slide"><img src="img/Acessibilidade.svg" alt="Livro sobre acessibilidade"></div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
  <div class="card">
        <div class="card__descrição">
            <div class="descrição">
                <img src="img/Estrelinhas.svg" alt="Avaliação 5 estrelas">
                <h3 class="descrição__titulo">Autora do Mês</h3>
                <h2 class="descrição__titulo-livro">Juliana Agarikov</h2>
                <p class="descrição__texto">Analista de sistemas e escritora, Juliana é especialista em Front-End.
                </p>
            </div>
            <img src="img/Escritora.svg" class="descrição__imagem">
        </div>
        <div class="card__botões">
            <ul class="botões">
                <li class="botões__item"><img src="img/Favoritos.svg" alt="Favoritar livro"></li>
                <li class="botões__item"><img src="img/Compras.svg" alt="Adicionar no carrinho de compras"></li>
            </ul>
            <a href="#" class="botões__ancora">Saiba mais</a>
        </div>
    </div>
</section>
<section class="tópico">
    <h2 class="tópicos__titulo">Tópico visitados recentemente</h2>
    <ul class="tópicos__lista">
        <li class="tópico__item">
            <a href="#" class="tópicos__link">Android</a>
        </li>
        <li class="tópico__item">
            <a href="#" class="tópicos__link">Marketing Digital</a>
        </li>
        <li class="tópico__item">
            <a href="#" class="tópicos__link">Agile</a>
        </li>
        <li class="tópico__item">
            <a href="#" class="tópicos__link">Startups</a>
        </li>
        <li class="tópico__item">
            <a href="#" class="tópicos__link">HTML e CSS</a>
        </li>
        <li class="tópico__item">
            <a href="#" class="tópicos__link">Python</a>
        </li>
        <li class="tópico__item">
            <a href="#" class="tópicos__link">OO</a>
        </li>
        <li class="tópico__item">
            <a href="#" class="tópicos__link">Java</a>
        </li>
    </ul>
</section>
<section class="contato">
    <h2 class="contanto__titulo">Fique por dentro das novidades!</h2>
    <p class="contato__texto">Atualizações de e-books, novos livros, promoções e outros.</p>
    <input type="email" placeholder="Cadastre seu e-mail" class="contato__email">
</section>
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
    const swiper = new Swiper('.swiper', {
        spaceBetween: 10,
        slidesPerView: 3,
        pagination: {
            el: '.swiper-pagination',
            type:'bullets',
        },
});
</script>

CARROSSEL.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ção {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5em;
}
.card__botões {
    display: flex;
    justify-content: space-between;
}
.botões {
    display: flex;
}
.card {
    background: var(--branco);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    margin: 1em;
    padding: 1em;
}
.descrição__titulo {
    color: var(--laranja);
    font-weight: 700;
}
.descrição__titulo-livro {
    color: var(--azul);
    font-size: 18px;
    font-weight: 700;
    margin: 0.5em 0;
}
.descrição__texto {
    font-size: 14px;
}
.botões__item {
    margin: 0 0.5em;
}
.botões__ancora {
    background-color: var(--laranja);
    padding: 1em 2.2em;
    color: var(--branco);
    font-weight: 700;
    text-decoration: none;
}

RODAPÉ.CSS

hr {
    margin: 0;
}

.rodapé {
    background-color: var(--branco);
    padding: 1em;
}