Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Solução desafio

No geral foi só copiar e colar e mudar as informações referente a autora, também criei a class "descricao__stars" pq tem um espaçamento no bottom entre as estrelas e o título.

<section class="carrossel">
        <h2 class="carrossel__titulo">Mais vendidos</h2>
        <!-- Slider main container -->
    <div class="swiper">
        <!-- Additional required wrapper -->
        <!-- If we need pagination -->
        <div class="swiper-pagination"></div>

        <div class="swiper-wrapper">
        <!-- Slides -->
        <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="Livre sobre liderança em design da alura books"></div>
        <div class="swiper-slide"> <img src="./img/Javascript.svg" alt="Livre sobre javascript assertivo da alura books"></div>
        <div class="swiper-slide"> <img src="./img/Guia Front-end.svg" alt="Livro sobre guia front-end da alura books"></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>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div> 
    </div>

    <div class="card">
        <!-- Primeira linha -->
        <div class="card__descricao">
            <!-- Primeira Coluna -->
            <div class="descricao">
                <img src="./img/Estrelinhas.svg" class="descricao__stars">
                <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>
            <!-- Segunda coluna -->
            <img src="./img/Escritora.svg" alt="Autora do mês Juliana Agarikov" class="descricao__imagem">
        </div>

        <!-- Segunda linha -->
        <div class="card__botoes">
            <!-- Primeira coluna -->
            <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=""></li>
            </ul>
            <!-- Segunda coluna -->
            <a href="#" class="botoes__ancora">Saiba mais</a>
        </div>
    </div>

CSS

.descricao__stars {
    margin-bottom: 0.5em;
}
1 resposta
solução!

Olá, Eduardo.

Tudo bem?

Muito obrigado por compartilhar a sua solução aqui com a gente, ficamos felizes em saber que está aprendendo e principalmente colocando em prática. Parabéns.

Bons estudos.