Estou fazendo igual esta sendo ensinado e mesmo assim sempre me deparo com algum problema que dá errado, como posso obter ajuda?
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!
Solucionado
Estou fazendo igual esta sendo ensinado e mesmo assim sempre me deparo com algum problema que dá errado, como posso obter ajuda?
Código o index
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
</style>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AluraBooks</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="cabeçalho">
<div class="container">
<input type="checkbox" id="menu" class="container__botao">
<label for="menu">
<span class="cabeçalho__menu-hamburguer container__imagem" ></span>
</label>
<ul class="lista-menu";>
<li class="lista-menu__titulo">categorias</li>
<li class="lista-menu__item"><a href="#" class="lista-menu__link">Programação</li>
<li class="lista-menu__item"><a href="#" class="lista-menu__link">Front-end</li>
<li class="lista-menu__item"><a href="#" class="lista-menu__link">Infraestrutura</li>
<li class="lista-menu__item"><a href="#" class="lista-menu__link">Business</li>
<li class="lista-menu__item"><a href="#" class="lista-menu__link">Design & UX</li>
</ul>
<img src="img/Logo.svg" alt="Logo da Alurabooks" class="container__imagem">
</div>
<div class="container">
<a href="#"><img src="img/Favoritos.svg" alt="Meus favoritos" class="container__imagem"></a>
<a href="#"><img src="img/Compras.svg" alt="Carrinho de compras" class="container__imagem"></a>
<a href="#"><img src="img/Usuario.svg" alt="Meu perfil" class="container__imagem"></a>
</div>
</header>
<section class="banner">
<h2 class="banner__titulo">Já sabe por onde começar?</h2>
<p class="banner__texto">Encontre em nossa estante o que precisa para seu desenvolvimento!</p>
<input type="search" class="banner__pesquisa" placeholder="Qual será sua próxima leitura">
</section>
<section class="carrrossel">
<h2 class="carrossel__titulo"> Novos lançamentos</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"></div>
<div class="swiper-slide"><img src="img/Liderança.svg"></div>
<div class="swiper-slide"><img src="img/Javascript.svg"></div>
<div class="swiper-slide"><img src="img/Guia Front-end.svg"></div>
<div class="swiper-slide"><img src="img/Portugol.svg"></div>
<div class="swiper-slide"><img src="img/Acessibilidade.svg"></div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</section>
<section class="card">
<!-- 1º linha -->
<div class="card__descrição">
<!-- 1º coluna -->
<div class="descrição">
<h3 class="descrição__titulo">Talvez você também se interesse por...</h3>
<h2 class="descrição__titulo-livro">Angular 11 e Firebase</h2>
<p class="descrição__texto">Construindo uma aplicação integrada com a plataforma do Google.</p>
</div>
<!-- 2º coluna -->
<img src="img/Angular.svg" class="descrição__imagem">
</div>
<!-- 2º linha -->
<div class="card__botões">
<!-- 1ª coluna -->
<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 ao carrinho de compras">
</li>
</ul>
<!-- 2ª coluna -->
<a href="#" class="botão__ancora">Saiba Mais</a>
</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>
</body>
</html>
Código do Carrossel
.carrossel__titulo{
color: var(--cor-01);
background-color: var(--branco);
text-align: center;
text-transform: uppercase;
font-size: 18px;
font-weight: 700;
padding: 1em 0 0.5em 0;
font-family: var(--fonte-principal);
}
.swiper-slide img{
width: 100%;
}
.swiper-button-prev,
.swiper-button-next {
display: none;
}
.swiper-pagination{
position: initial;
margin: 0.5em 0em;
}
.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;
align-items: center;
}
.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(--cor-01);
font-size: 16px;
font-weight: 700;
font-family: var(--fonte-principal);
}
.descrição__titulo-livro{
color: var(--cor-02);
font-size: 18px;
font-weight: 700;
font-family: var(--fonte-principal);
margin: 0.5em 0;
}
.descrição__texto {
font-size: 14px;
font-family: var(--fonte-principal);
}
.botões__item{
margin: 0 0.5em;
}
.botão__ancora{
background-color: var(--cor-01);
padding: 1em 2.2em;
color: var(--branco);
font-weight: 700;
text-decoration: none;
font-family: var(--fonte-principal);
}
Código do banner
.banner{
background: var(--azul-degrade);
color: var(--branco);
text-align: center;
padding: 2.5em 2em;
font-family: "Poppins", sans-serif;
}
.banner__titulo{
font-size: 18px;
font-weight: 700;
}
.banner__texto{
font-size: 16px;
font-weight: 400;
margin: 1em 0;
}
.banner__pesquisa{
background-color: transparent;
border: 2px solid var(--branco);
color: var(--branco);
border-radius: 24px;
padding: 1em;
width: 100%;
}
.banner__pesquisa::placeholder{
font-family: var(--fonte-principal);
font-size: 14px;
font-weight: 400;
text-align: center;
color: var(--branco);
background: url("../img/lupa.svg");
background-repeat: no-repeat;
background-position: 1em;
}
Código do header
.cabeçalho__menu-hamburguer {
width: 24px;
height: 24px;
background-image: url("../img/Menu.svg");
background-repeat: no-repeat;
background-position: center;
display: inline-block;
}
.cabeçalho{
background-color: var(--branco);
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.container {
display: flex;
align-items: center;
margin: 0 0.2em 0 1em;
}
.container__imagem{
padding: 1em;
}
.lista-menu{
display:none;
position: absolute;
top: 100%;
width: 70vw;
}
.container__botao:checked ~ .lista-menu {
display:block;
}
.container__botao{
display:none;
}
.lista-menu__titulo,
.lista-menu__item {
padding: 1em;
background-color: var(--branco);
}
.lista-menu__titulo{
color: var(--cor-01);
font-size: 16px;
font-weight: 700;
font-family: "Poppins", sans-serif;
}
.lista-menu__link{
background: var(--azul-degrade);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-transform: uppercase;
font-size: 16px;
font-weight: 400;
font-family: "Poppins", sans-serif;
}
Código do Style
@import url("styles/header.css");
@import url("styles/banner.css");
@import url("styles/carrossel.css");
:root {
--color-de-fundo_01: #EBECEE;
--branco: #FFFFFF;
--cor-01: #EB9B00;
--cor-02: #002F52;
--cor-03: #000000;
--azul-degrade: linear-gradient(97.54deg, #002F52 35.49%, #326589 165.37%);
--fonte-principal: "Poppins", sans-serif;
}
body{
background-color: var(--color-de-fundo_01);
overflow-x: hidden;
}
esses códigos são os que usei, tirando quando copiei e colei os que estavam na Transcrição, gostaria de saber o que deu errado e onde errei, como posso corrigir isso, quero entender melhor o que esta dando errado.
Me ajudaram pelo Discord, gostaria de agradecer e deixar aqui um obrigado pela ajuda e paciencia para a Nádia ^^
Luis, estou sempre à disposição. Fico muito feliz que tenha dado certo.
Conte conosco!