A Pen by Rohan Puri

Thumbnail
This awesome code was written by -HAN-, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright -HAN- ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Rohan Puri</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="main-container">
  <div class="child">
    <div class="image-block"></div>
    <div class="text-block">Dummy Text</div>
    <div class="lob-container">
      <div class="lob">Lob1</div>
      <div class="lob">Lob2</div>
      <div class="lob">Lob3</div>
      <div class="lob">Lob4</div>
    </div>
    <div class="price-container">$20.00</div>
  </div>
  <div class="child">
    <div class="image-block"></div>
    <div class="text-block">Dummy Text</div>
    <div class="lob-container">
      <div class="lob">Lob1</div>
      <div class="lob">Lob2</div>
    </div>
    <div class="price-container">$20.00</div>
  </div>
  <div class="child">
    <div class="image-block"></div>
    <div class="text-block">Dummy Text</div>
    <div class="lob-container">
      <div class="lob">Lob1</div>
      <div class="lob">Lob2</div>
      <div class="lob">Lob3</div>
    </div>
    <div class="price-container">$20.00</div>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/-HAN-/a-pen-by-rohan-puri-YwMvxq */
*{
  box-sizing:border-box;
}

.image-block{
  background-color:#d0d0d0;
  width:50px;
  height:50px;
}

.main-container{
  background-color:#f6f6f6;
  display:table;
  width:100%;
}
.main-container:after {
  content:"";
  clear:both;
  display:table;
}

.child {
  float:left;
  width:33%;
  padding:15px;
}

.lob-container{
  border:1px solid #d0d0d0;
  display:table-cell;
}

Comments