section does not work correctly

1

I need my <section> to look like this site here follow the image of the part I need

ItriedcodingbutitdoesnotstaythatwayIdonotknowwhereI'mgoingwrong.

Followmycode:

CSS

ulli{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%;}.infoli{width:33.3333%;float:left;box-sizing:border-box;padding-left:5px;padding-bottom:5px;}.text{background-color:lime;height:320px;}.textp{width:300px;max-width:95%;text-align:left;}

HTML

<sectionid="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>

NOTE: I was moving here and gave an update gave an improvement even more I think it is not correct

    
asked by anonymous 30.07.2015 / 19:43

1 answer

2

As I understand it, all you have to do is add more elements li inside the ul tag.

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>
    
31.07.2015 / 02:42