1

Preciso que minha <section> fique igual a desse site aqui segue a imagem da parte que eu precisoinserir a descrição da imagem aqui

Eu tentei codificar porem não fica de forma alguma desse jeito não sei onde estou errando.

Segue meu código:

CSS

ul li {
  list-style-type: none;
}
.imagem {
  background-image: url(http://nerdreactor.com/wp-content/uploads/2013/09/destiny_thumbnail-500x300_c.jpg);
  background-size: cover;
  padding-top: 59.42%;
}
.info li {
  width: 33.3333%;
  float: left;
  box-sizing: border-box;
  padding-left: 5px;
  padding-bottom: 5px;
}
.text {
  background-color: lime;
  height: 320px;
}
.text p {
  width: 300px;
  max-width: 95%;
  text-align: left;
}

HTML

<section id="info-geral">
  <ul class="info">
    <li>
      <div class="imagem">
        <div class="text">
          <h3>DEI UMA ATUALIZADA CONFORME FUI MECBHENDO AQUI</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>

    </li>


  </ul>
</section>

OBS: Estava mexendo aqui e dei uma atualizada deu uma melhorada mais ainda acho que não esta correto

4
  • 1
    tente fazer um padding no h3 e no paragrafo.
    – RFL
    30/07/2015 às 19:46
  • como assim um padding de que top bottom ? 30/07/2015 às 19:50
  • use: .text h3, p { padding: 5px 10px; } esse trecho vai criar um espaço entre as bordas e deixar os textos mais centralizados dentro da div text
    – RFL
    30/07/2015 às 20:11
  • Seu CSS está certo. O problema é que só tem um li. Pra ficar igual no site você precisa de três <li>. 31/07/2015 às 0:40

1 Resposta 1

2

Pelo que entendi, só faltou você adicionar mais elementos li dentro da tag ul.

ul li {
  list-style-type: none;
}
.imagem {
  background-image: url(http://nerdreactor.com/wp-content/uploads/2013/09/destiny_thumbnail-500x300_c.jpg);
  background-size: cover;
  padding-top: 59.42%;
}
.info li {
  width: 33.3333%;
  float: left;
  box-sizing: border-box;
  padding-left: 5px;
  padding-bottom: 5px;
}
.text {
  background-color: lime;
  height: 320px;
}
.text p {
  width: 300px;
  max-width: 95%;
  text-align: left;
}
<section id="info-geral">
  <ul class="info">
    <li>
      <div class="imagem">
        <div class="text">
          <h3>DEI UMA ATUALIZADA CONFORME FUI MECBHENDO AQUI</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>

    </li>
<li>
      <div class="imagem">
        <div class="text">
          <h3>DEI UMA ATUALIZADA CONFORME FUI MECBHENDO AQUI</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
      </li>
      <li>
      <div class="imagem">
        <div class="text">
          <h3>DEI UMA ATUALIZADA CONFORME FUI MECBHENDO AQUI</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
      </li>
  </ul>
</section>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .