Desafio: dando vida ao projeto | Bootstrap5: crie uma landing page responsiva

Desafio: dando vida ao projeto

html 1

 <div class="col-6 col-md-4 col-xxl-2">
      <div class="card">
        <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg"
          role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false">
          <title>Placeholder</title>
          <rect width="100%" height="100%" fill="#868e96"></rect>
          <text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text>
        </svg>
        <div class="card-header bg-black text-bg-dark">
          <p class="text-center card-text">
            Categoria
          </p>
        </div>
      </div>
    </div>

html 2

<section class="pb-4 bg-black text-bg-dark">

    <h2 class="text-center py-3">Conheça todas as nossas facilidades</h2>

    <div class="d-flex flex-column flex-lg-row align-items-center justify-content-center gap-3 px-3">
      <div class="divs-facilidades d-flex align-items-center">
        <div><i class="verde-limao bi bi-x-diamond fs-1"></i></div>
        <div>
          <div class="ms-3 mb-1 verde-limao">PAGUE PELO PIX</div>
          <div class="texto-menor ms-3">Ganhe 5% OFF em
            pagamentos via PIX</div>
        </div>
      </div>

      <div class="divs-facilidades d-flex">
        <div><i class="verde-limao bi bi-arrow-repeat fs-1"></i></div>
        <div>
          <div class="ms-3 mb-1 verde-limao">TROCA GRÁTIS</div>
          <div class="texto-menor ms-3">Fique livre para trocar em até 30 dias.</div>
        </div>
      </div>

      <div class="divs-facilidades d-flex">
        <div><i class="verde-limao bi bi-flower1 fs-1"></i></div>
        <div>
          <div class="ms-3 mb-1 verde-limao">SUSTENTABILIDADE</div>
          <div class="texto-menor ms-3">Moda responsável, que respeita o meio ambiente.</div>
        </div>
      </div>
    </div>

  </section>

html 3

<footer class="text-center bg-black text-bg-dark">
    <p class="card-text py-3">2023 <i class="bi bi-c-circle"></i> Desenvolvido por Alura | Projeto fictício sem fins comerciais.</p>
  </footer>

html 4


        <div class="col-12 col-md-6 col-xxl-4 pb-4">
      <div class="card">
        <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg"
          role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false">
          <title>Placeholder</title>
          <rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image
            cap</text>
        </svg>
        <div class="card-body">
          <h5 class="card-title">Produto</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
            content.</p>
          <p>R$30,00</p>
          <a href="#" class="btn btn-primary botao-lilas rounded-0 border-0">Ver mais</a>
        </div>
      </div>
    </div>

O meu deu erro!

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

Olá, Estanislau! Tudo bem?

Parece que o problema pode estar relacionado às cores que você precisa aplicar, especialmente porque o Bootstrap não possui por padrão as cores verde e lilás. Trouxe algumas dicas para resolver isso:

Criação de Classes Personalizadas:
- No arquivo estilos.css, você pode adicionar as seguintes classes para aplicar as cores específicas:

.verde-limao {
  color: #DAFF01;
}

.botao-lilas {
  background-color: #9353FF;
  color: #ffffff;
}

Aplicar as Classes no HTML:
- Certifique-se de que as classes personalizadas estão sendo aplicadas corretamente nos elementos HTML. Por exemplo, para os ícones e títulos, use a classe .verde-limao, e para o botão, use .botao-lilas.
Verificar a Ordem dos Arquivos CSS:
- Certifique-se de que o arquivo estilos.css está sendo carregado após o arquivo CSS do Bootstrap no seu HTML. Isso garante que suas personalizações não sejam sobrescritas pelo Bootstrap.
Verificar Erros no Console:
- Abra o console do seu navegador (F12 em muitos navegadores) e veja se há algum erro que possa estar afetando o carregamento do CSS.
Revisar o HTML:
- Verifique se não há erros de digitação ou de estrutura no HTML que possam estar impedindo a aplicação das classes.

Espero ter ajudado. Conte com nosso apoio :)

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Tópicos relacionados

Conteúdos Alura com o tema