Estou tentando criar a seguinte disposição na minha landing page:
Porém, ao tentar criar isso em HTML, não consigo fazer com que as imagens façam essa lista. Estou tentando usar a classe "deck", sem sucesso.
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>ASSISTA</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<iframe src="https://player.vimeo.com/video/143313674" width="550" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/143313674"></p>
</div>
<div class="col-lg-6 col-md-push-2">
<div class="deck"> <img src="img/portfolio/submarine.png" width="100" height="100" style="display:block"> <div class="figure illustration ng-isolate-scope lazy-canceled" lazy-load="figures" style="display: block;"> <div class="lyft-classic"></div> </div> <div class="body grid-center"> <h3>SOCIAL</h3> <p>Com um viés social e espírito de equipe. </p> </div> </div>
<div class="deck"> <img src="img/portfolio/submarine.png" width="100" height="100" style="display:block"> <div class="figure illustration ng-isolate-scope lazy-canceled" lazy-load="figures" style="display: block;"> <div class="lyft-classic"></div> </div> <div class="body grid-center"> <h3>SOCIAL</h3> <p>Com um viés social e espírito de equipe. </p> </div> </div>
</div>
</div>
</div>
</section>
Lembrando que gostaria de fazer com que isso seja responsivo, gostaria de saber se pelo menos estou fazendo o nesting das divs da maneira correta.