Entrar Ainda não tem acesso?
6
respostas

Erro no codigo.

Referente ao curso Bootstrap 5: novos recursos e práticas recomendadas de HTML, CSS e JavaScript, no capítulo Iniciando projeto e atividade Faça como eu fiz: construir os banners

por Matheus
| 11.3k xp | 5 posts

Professor, sobre a parte de "Faça como eu fiz: construir os banners" O código apresenta um bug, poderia me auxiliar nesse tema?

Esse é o codigo que fiz, mas mesmo assim as imagens ficam uma em cima da outra.

Portas abertas para todos os públicos.

Nosso espaço é aconchegante, pet friendly, preparado para receber crianças, pessoas com deficiência e ambiente para coworking.

.banners { width: 100%; height: 100vh; background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; }

.banners-titulo { --bs-bg-opacity: .2; }

.banner-2{ background-image: url(./assets/banner-2.png); }

.banner-3{ background-image: url(./assets/banner-3.png); }

6 respostas
por Danilo Thiago Alves de Oliveira
| 47.3k xp | 70 posts
Desenvolvedor Fullstack Sr

Boa noite Matheus, na maioria das vezes que acaba ajudando a galera é a própria comunidade, então se conseguir compartilhar teu código, de preferencia no Github, fica melhor da gente analisar e te dar uma ajuda. Fico no aguardo do compartilhamento do projeto.

por Matheus
| 11.3k xp | 5 posts

Boa noite Danilo, Segue link: https://github.com/mch-gih/Cafeteria-Serenatto/tree/main/bootstrap-2985-preparando-ambiente

por Danilo Thiago Alves de Oliveira
| 47.3k xp | 70 posts
Desenvolvedor Fullstack Sr

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

por Matheus
| 11.3k xp | 5 posts

HTML: `

Logo da cafeteria Serenatto 
<main>
  <section class="banners banner-1 d-flex flex-column justify-content-center text-center">
    <div class="banners-titulo bg-body-secondary py-5">
      <h2 class="fw-bold">Sua pausa para desfrutar a vida.</h2>
      <p>Boas-vindas ao Bistrô Serenatto! Um ambiente aconchegante e acolhedor para apreciar um bom café.</p>
    </div>

    <section class="banners banner-2 d-flex flex-column justify-content-center align-items-center text-center">
      <div class="banners-titulo bg-body-secondary text-center py-5 px-3">
        <h2 class="fw-bold">Portas abertas para todos os públicos.</h2>
        <p>Nosso espaço é aconchegante, pet friendly, preparado para receber crianças, pessoas com deficiência e ambiente para coworking.</p>
      </div>
    </section>
    
    <section class="banners banner-3 d-flex flex-column justify-content-center align-items-center">
    </section>
    
</main>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N"
crossorigin="anonymous"></script>
`
por Matheus
| 11.3k xp | 5 posts

CSS: `body { --bege: #E6E0D6; --marrom-escuro: #816D4F; --marrom-claro: #B29463; font-family: 'Barlow', sans-serif; height: 4000px; }

input[type=checkbox] { border: 2px solid var(--marrom-claro); box-shadow: none; }

input[type=checkbox]:checked, input[type="checkbox"]:focus { background-color: var(--marrom-claro); border-color: var(--marrom-claro); box-shadow: none; outline: none; }

.banner-1 { background-image: url(./assets/banner-1.png); }

.banners { width: 100%; min-height: 100vh; /* Ocupa toda a altura da janela de visualização */ background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; }

.banners-titulo { --bs-bg-opacity: .2; background-color: rgba(255, 255, 255, 0.8); /* Adiciona uma opacidade no fundo */ padding: 20px; border-radius: 10px; }

.banner-2 { background-image: url(./assets/banner-2.png); }

.banner-3 { background-image: url(./assets/banner-3.png); } `

por Matheus
| 11.3k xp | 5 posts

Olhando o código a cima qual seria o erro?