Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Ei, Luiz! Tudo bem?
Baixei o seu projeto e notei que falta a pasta Styles com o arquivo rodape.css contendo os códigos que ajustam essa parte do projeto e que a instrutora monta na aula Um novo footer.
O código é:
.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: .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;
}
@media screen and (min-width: 1024px) {
.carrossel__titulo {
font-size: 26px;
}
.swiper-pagination {
margin: 2em 0 3em 0;
}
.swiper {
width: 60%;
}
.swiper-button-prev,
.swiper-button-next {
display: block;
top: 60%;
}
.card {
width: 40%;
margin: 2em auto;
}
}
Sendo assim, recomendo que assista a aula e monte em conjunto a pasta e o css do rodapé completinho para poder deixar o projeto certinho. Deixo abaixo o link do repositório da instrutora para poder consultar e comparar enquanto estiver montando o seu:
Qualquer dúvida, compartilhe no fórum para podermos te auxiliar.
Bons estudos e até mais!