Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

[Dúvida] Problema para alinhar os itens

Boa noite, estou tendo problemas nesse card. Mesmo fazendo igualzinho o vídeo ele não ficou certo. Tentei modificar mas mesmo assim não ficou 100%. Vou colocar o código que usei abaixo. E também esta aparecendo uma faixa acima da página.

Insira aqui a descrição dessa imagem para ajudar na acessibilidadeInsira aqui a descrição dessa imagem para ajudar na acessibilidade

.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-butoon-next {
    display: none;
}

.swiper-pagination {
    position:initial;
    margin: .5em 0;
}

.card__descricao {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5em;
    flex-direction: column;
    text-align: right;
}


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

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

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

.descricao__texto {
   font-size: 14px; 
}

.botoes__item {
    margin: 0 0.5em;
}

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

Opa Elizabethe, tudo certo?

Poderia por gentileza compartilhar o link do repositório do seu projeto completo pelo Github? Dessa forma posso analisar o seu código na totalidade e simular o problema para ajudá-lo de forma mais assertiva.

Fico à disposição.

Tenha um bom dia e bons estudos.

Bom dia. Aqui está. https://github.com/Elizabethe-Cristina/aula-alura.git

solução!

Oi, Elizabethe

Corrija o "head" do "index.html" e verifique se resolve o problema

<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="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
    <link rel="stylesheet" href="styles.css">
</head>

Boa tarde. A barra acima da página saiu, mas a formatação continua a mesma. Insira aqui a descrição dessa imagem para ajudar na acessibilidade