<div class='step'>
    <h3>step 1</h3>
    <ul>
        <li>Markup </li>
        <li>Static content </li>
        <li>Presentation and content are mixed </li>
        <li>Clientside only </li>
    </ul>
</div>


<div class='step'>
    <h3>step 2</h3>
    <ul>
        <li>Markup / templating </li>
        <li>Dynamic content</li>
        <li>Presentation and content are separated</li>
        <li>Clientside only </li>
    </ul>
</div>

<div class='step'>
    <h3>step 3</h3>
    <ul>
        <li>Markup / templating </li>
        <li>Dynamic content</li>
        <li>Presentation and content are separated</li>
        <li>Clientside and Serverside </li>
        <li>Content from server</li>
    </ul>
</div>
@import "lesshat";

*{
  margin: 0;
  box-sizing: border-box; 
}

.step{
  float: left;
  margin: 10px;
  padding: 10px;
  border: 1px solid black; 
  max-width: 200px;
  border-radius: 4px;
  font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
  font-size: 14px;  
  
  h3{
    margin-bottom: 10px;
    text-transform: capitalize;
  }
  
  li{
    padding-bottom: 8px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.