A Pen by José Pino.

index.html

<!-- Pineres pineapple responsive -->
<h1>Pineres3</h1>

<!-- pr-6 -->
 <div class="space">
        <div class="pr-6">
            <div class="core">10%</div></div>
     </div>

<!-- pr-5 -->
 <div class="space">
        <div class="pr-5">
            <div class="core">20%</div></div>
     </div>

<!-- pr-4 -->
 <div class="space">
        <div class="pr-4">
            <div class="core">30%</div></div>
     </div>

<!-- pr-3 -->
 <div class="space">
        <div class="pr-3">
            <div class="core">40%</div></div>
     </div>

<!-- pr-2 -->
 <div class="space">
        <div class="pr-2">
            <div class="core">50%</div></div>
     </div>

<!-- pr-1 -->
 <div class="space">
        <div class="pr-1">
            <div class="core">100%</div></div>
     </div>

Pineres-demo-3.markdown

Pineres demo 3

pineapple responsive > Pineres author: @mrjopino

A Pen by José Pino on CodePen.

License.

style.css

/*
*
* Style demo pineres 3
* Copyright 2014, @mrjopino
*
*/
@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Condiment);
body {
  background: #e74c3c;
}

.core {
  text-align: center;
  font: 15px "Source Sans Pro",sans-serif;
  background: #3498db;
  color: #fff;
  padding: 15px 0 15px 0;
}

h1 {
  text-align: center;
  font: 6em "Condiment";
  color: #fff;
  font-weight: 100;
  padding: 40px;
  padding-bottom: 0;
}

a,a:link,a:visited,a:hover,a:active {
  text-decoration: inherit;
  font-weight: inherit;
  color: #2c90e8;
}

@media (max-width: 480px) {
  h1 {
    font-size: 3em;
  }
}