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

grid

Esse é o meu código, nomeie diferente com o que estou fazendo mas seguindo as orientações, porém quando coloco o grid ele não alinha as colunas. O que estou fazendo de errado?

   <section class="container" id="álbuns">
     <div class="row">

       <article class="card borda-cor-especial card-largura">
         <img src="img/fotoquatro.jpg" class="card-img-top card-posicao-imagem" alt="retrato pessoal de uma moça">
         <div class="card-body">
           <h5 class="card-title">Lidy</h5>
           <p class="card-text">Prévia do ensaio fotográfico da Lidy.</p>
           <a href="#" class="btn botao-cor-especial">Álbum</a>
         </div>
       </acticle>

       <article class="card borda-cor-especial card-largura">
         <img src="img/fotoseis.jpg" class="card-img-top card-posicao-imagem" alt="retrato pessoal de uma moça">
         <div class="card-body">
           <h5 class="card-title">Renata</h5>
           <p class="card-text">Prévia do ensaio fotográfico da Renata.</p>
           <a href="#" class="btn botao-cor-especial">Álbum</a>
         </div>
       </acticle>

       <article class="card borda-cor-especial card-largura">
         <img src="img/fotooito.jpg" class="card-img-top card-posicao-imagem" alt="retrato pessoal de um homem">
         <div class="card-body">
           <h5 class="card-title">Guilherme</h5>
           <p class="card-text">Prévia do ensaio fotográfico do Guilherme.</p>
           <a href="#" class="btn botao-cor-especial">Álbum</a>
         </div>
       </acticle>

       <article class="card borda-cor-especial card-largura">
         <img src="img/fotosete.jpg" class="card-img-top card-posicao-imagem" alt="retrato pessoal de uma mulher no metrô">
         <div class="card-body">
           <h5 class="card-title">Júlia</h5>
           <p class="card-text">Prévia do ensaio fotográfico da Júlia.</p>
           <a href="#" class="btn botao-cor-especial">Álbum</a>
         </div>
       </acticle>

       <article class="card borda-cor-especial card-largura">
         <img src="img/fotonove.jpg" class="card-img-top card-posicao-imagem" alt="retrato pessoal de uma mulher">
         <div class="card-body">
           <h5 class="card-title">Mariana</h5>
           <p class="card-text">Prévia do ensaio fotográfico da Mariana.</p>
           <a href="#" class="btn botao-cor-especial">Álbum</a>
         </div>
       </acticle>

       <article class="card borda-cor-especial card-largura">
         <img src="img/fotoonze.jpg" class="card-img-top card-posicao-imagem" alt="retrato pessoal de uma mulher">
         <div class="card-body">
           <h5 class="card-title">Isabella</h5>
           <p class="card-text">Prévia do ensaio fotográfico da Isabella.</p>
           <a href="#" class="btn botao-cor-especial">Álbum</a>
         </div>
       </acticle>
    </div>
 </section>

no css: .card-largura { width: 18rem; }

.imagem-carrossel-um{ height: 500px; object-position: 0 20%; object-fit: cover; }

.imagem-carrossel-dois{ height: 500px; object-position: 25 0; object-fit: cover; }

.fonte-titulo{ font-family: 'Satisfy', cursive; }

.cor-especial { color: pink; }

.botao-cor-especial{ background-color: pink; color: black; }

.borda-cor-especial{ border-color: pink; }

.card-posicao-imagem { object-fit: cover; height: 200px; }

3 respostas
solução!

Olá Marina.

Tudo bem ?

A sua tag article está sendo fechada como acticle, creio que isso possa está dando alguma zoado no seu código.

Espero ter ajudado :D

Oi Raphael, muito obrigada!! :D Eu revisei várias vezes e não tinha percebido.

Marina, vou te confessar, muitas vezes nós não encontramos o erro porque os nosso olhos estão viciados naquilo, isso é muito comum, boa sorte ai com os estudos :D