Localização da imagem

Olá, Rayssa! Tudo bom com você?

Consegue enviar o código, para que eu possa dar uma olhada?

index.html

• Categorias
• Programação
• Front-end
• Infraestrutura
• Business
• Disign & UX

Já sabe por onde começar?

Encontre em nossa estante o que precisa para seu desenvolvimento

Novos lançamentos

Talvez você também se interesse por...

Angular 11 e Firebase

Construindo uma aplicação integrada com a plataforma do Google

• 
• 

Saiba mais

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

        <div class="swiper-wrapper">
            <!-- Slides -->
        </div>

        <!-- If we need navigation buttons -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
    <div class="card">
        <div class="card__descricao>">
            <div class="descricao">
                <img src="img/Estrelinhas.svg" alt="Avaliação 5 estrelas">
                <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>  
            
            <img src="img/Escritora.svg" class="descricao__imagem ">
        </div>

    <div class="card__botoes">
        <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 no carrinho de compras"></li>
        </ul>   
        <a href="#" class="botoes__ancora">Saiba mais</a>  
    </div>
    </div>
</section>

header.css .cabecalho__menu-hamburguer { width: 24px; height: 24px; background-image: url("../img/Menu.svg"); background-repeat: no-repeat; background-position: center; display: inline-block; }

.cabecalho { background-color: var(--branco); display: flex; justify-content: space-between; align-items: center; position: relative; }

.container { display: flex; align-items: center; }

.container__imagem { padding: 1em; }

.lista-menu { display: none; position: absolute; top: 100%; width: 60vh; }

.container__botao:checked~.lista-menu { display: block; list-style-type: none; }

.lista-menu__titulo, .lista-menu__item { padding: 1em; background-color: var(--branco); }

.lista-menu__titulo { color: var(--laranja); font-weight: 700; }

.lista-menu__link { background: var(--azul-degrade); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-transform: uppercase; }

.container__botao { display: none; }

carrossel.css

.carrossel__titulo { color: var(--laranja); background-color: var(--branco); text-align: center; text-transform: uppercase; font-size: 18px; font-weight: 700; padding: 0.5em 0 0.5em 0; }

.swiper-slide img { width: 75%; }

.swiper-button-prev, .swiper-button-next { display: none; }

.swiper-pagination { position: initial;

}

.card__descricao { display: flex; justify-content: space-between; margin-bottom: 0.5em;

}

.card__botoes { display: flex; justify-content: space-between; }

.botoes { list-style-type: none; display: flex; }

.card { background: var(--branco); box-shadow: 0 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: 23px; font-weight: 700; margin: 0.5em 0; }

.descricao__texto { font-size: 18px; }

.botoes__item { margin: 0.5em; }

.botoes__ancora { background-color: var(--laranja); padding: 1em 2em; color: var(--branco); font-weight: 700; text-decoration: none; }

styles.css

@import url("styles/header.css"); @import url("styles/banner.css"); @import url("styles/carrossel.css"); @import url("styles/topicos.css");

:root { --cor-de-fundo: #EBECEE; --branco: #FFFFFF; --laranja: #EB9B00; --azul-degrade: linear-gradient(97.54deg, #002F52 35.49%, #326589 165.37%); --fonte-principal: 'Poppins'; --azul: #002F52;

}

body { background-color: var(--cor-de-fundo); font-family: var(--fonte-principal); font-size: 16px; font-weight: 400; }

banner.css

.banner { background: var(--azul-degrade); color: var(--branco); text-align: center; padding: 2.5em 2em; }

.banner__titulo { font-size: 18px; font-weight: 700; }

.banner__texto { font-weight: 500; margin: 1em 0; }

.banner__pesquisa { background-color: transparent; border: 1px solid var(--branco); color: var(--branco); border-radius: 24px; padding: 0.5em; width: 100%; }

.banner__pesquisa::placeholder { font-family: var(--fonte-principal); font-size: 14psx; font-weight: 400; color: var(--branco); background: url("../img/Lupa.svg") no-repeat; text-align: center;

}

Olá, Rayssa! Tudo bom?

Primeiramente, desculpe a demora para responder, eu acabei ficando um pouco preso em um projeto e não consegui analisar o seu a tempo. Mas eu dei uma olhada no seu projeto, e o problema está aqui:

<div class="card__descricao>">
            <div class="descricao">
                <img src="img/Estrelinhas.svg" alt="Avaliação 5 estrelas">
                <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>  

Acabou que ao invés de colocar a classe 'card__descricao', foi colocado 'card__descricao>', então na hora de fazer a referência no CSS, não estava pegando os estilos. É só fazer essa alteração e deve funcionar, tá certo.

Espero que tenha ajudado e peço desculpas novamente pela demora. Bons estudos e abraços!

Mdsssss muito obrigadaaa. Funcionou. haha ja te adoro

KKKKKKK por nada!!