Boa tarde, estou fazendo a reutilização de parte do código porém está dando erro no meu index. html e não consegui identificar o motivo do erro https://github.com/stephanyborzi/Alura-Books Depois dessa alteração meu projeto ficou assim:
Solucionado
Boa tarde, estou fazendo a reutilização de parte do código porém está dando erro no meu index. html e não consegui identificar o motivo do erro https://github.com/stephanyborzi/Alura-Books Depois dessa alteração meu projeto ficou assim:
hoje, com a Alura e o Google Gemini
Oi, tudo bem?
Sinto muito que esteja com dificuldades, para realizar esta atividade. Mas vou te ajudar!
Há dois problemas no seu código, um no arquivo "index.html" e outro no arquivo "banner.css", que geram os problemas do tamanho dos livros do carrossel.
No primeiro caso há duas tags <scripts> adicionadas antes da segunda seção com o carrossel e o card. Isso faz com que antes da segunda seção ser renderizada, os componentes JavaScripts sejam lidos pelo navegador e a segunda seção não do carrossel não recebe o mesmo padrão que a primeira.
Dessa forma precisamos remover essa duplicidade de informação das tags <scripts>já informadas ao final do código HTML. Ficaria assim:
<!-- PRIMEIRA SEÇÃO DO CARROSSEL E DO CARD -->
<section class="carrosel">
...RESTANTE DO CÓDIGO
</section>
<!-- SEGUNDA SEÇÃO DO CARROSSEL E DO CARD -->
<section class="carrosel">
...RESTANTE DO CÓDIGO
</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>
Já no arquivo "banner.css" temos a classe carrosel que recebe informações de altura e largura (heighte width) que interferem no tamanho dos livros do carrossel, fazendo com que eles se sobreponham mutualmente, desformatando a página. Dessa forma, podemos remover todas as propriedades aplicadas a classe carrosel e incorporar a cor de fundo (background: var(---branco);) à classe .carrosel_titulo. Ficaria assim:
.carrosel_titulo{
font-family: var(---fonte-principal);
font-size: 18px;
font-weight: 700;
text-align: center;
color: var(---laranja);
padding:1em 0 0.5em 0;
background: var(---branco);
}
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!
Deu certo, muito obrigadaaaaa!!!!