<div class="wrap">
  <div class="container">
    <div class="counted">
      <h1>Passaggio</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui quidem, amet unde harum, nisi fuga saepe autem ullam quos consectetur nesciunt vel iusto nulla eum sit deserunt, adipisci aliquam perferendis!</p>
    </div>
    <div class="counted">
      <h1>Sezione</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente ab laboriosam enim debitis quaerat! Quaerat rem cum nemo delectus libero saepe beatae nesciunt consequuntur non, voluptatum minima, enim amet est.</p>
    </div>
    <div class="counted">
      <h1>Altro titolo</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste nulla tenetur explicabo at temporibus natus vitae? Illo iste deleniti, alias, magni, ex labore obcaecati dolorem laborum quibusdam, unde vero blanditiis.</p>
    </div>
    <div class="counted">
      <h1>Ancora un titolo</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis nisi iusto voluptatum, aliquam quas doloremque tempore minus vero tenetur sint beatae perspiciatis eius delectus, saepe sequi nulla explicabo. Magnam, incidunt.</p>
    </div>
    <div class="counted">
      <h1>L'ultimo titolo</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias modi porro distinctio odit, harum explicabo, architecto quo, amet soluta quam adipisci enim veniam cum. Quis soluta perspiciatis, aperiam enim. Obcaecati.</p>
    </div>
  </div>
</div>
/* Stili per l'esempio */
.container{
  counter-reset: cont;
}
.counted{
  clear: both;
  overflow: hidden;
  margin: 50px 0;
}
.counted::before{
  counter-increment: cont;
  content: counter( cont );
  
  background-color: #4CAF50;
  color: #fff;
  float: left;
  font-size: 60px;
  padding: 30px 15px;
  margin-right: 15px;
}

/* Stili generali */
html, body{
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
}

.wrap{
  margin: 30px;
}

h1,p{
  margin: 2px 0;
}
.container{
  width: calc( 100% - 40px);
  margin: 0 20px;
}

/* Stili Call to Action */
.cta-sam{
  margin: 30px auto;
  text-align: center;
}
.cta-sam a{
  background-color: #EF6C00;
  display: inline-block;
  padding: 20px;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
}

.cta-sam a:hover{
  background-color: #333;
}
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Open+Sans

External JavaScript

This Pen doesn't use any external JavaScript resources.