<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;
}
This Pen doesn't use any external JavaScript resources.