Generated by SassMeister.com.

SassMeister-input-HTML.html

<section class="wrapper">
  <article class="content">
    <table class="table">
      <tr class="row1">
        <td class="box1"></td>
        <td class="box2"></td>
        <td class="box3"></td>
        <td class="box4"></td>
        <td class="box5"></td>
      </tr> <!--end row1 -->
      <tr class="row2">
        <td class="box1">
          <div class="div211"></div>
          <div class="div212"></div>
          <div class="div213"></div>
        </td>
        <td class="box2">
          <div class="div221"></div>
          <div class="div222"></div>
          <div class="div223"></div>
        </td>
        <td class="box3">
          <div class="div231"></div>
          <div class="div232"></div>
          <div class="div233"></div>
        </td>
        <td class="box4">
          <div class="div241"></div>
          <div class="div242"></div>
          <div class="div243"></div>
        </td>
        <td class="box5">
        </td>
      </tr> <!--end row2 -->
      <tr class="row3">
        <td class="box1">
          <div class="div311"></div>
          <div class="div312"></div>
          <div class="div313"></div>
        </td>
        <td class="box2">
          <div class="div321"></div>
          <div class="div322"></div>
          <div class="div323"></div>
        </td>
        <td class="box3">
          <div class="div331"></div>
          <div class="div332"></div>
          <div class="div333"></div>
        </td>
        <td class="box4">
          <div class="div341"></div>
          <div class="div342"></div>
          <div class="div343"></div>
        </td>
        <td class="box5">
        </td>
      </tr><!--end row3 -->
    </table> <!--end of table1 -->
    <table class="table2">
     <tr class="t2row1">
      <td class="t2box1">
      </td>
      <td class="t2box2">
      </td>
      <td class="t2box3">
      </td>
      <td class="t2box4">
      </td>
      <td class="t2box5">
      </td>
      <td class="t2box6">
      </td>
      <td class="t2box7">
      </td>
      <td class="t2box8">
      </td>
      <td class="t2box9">
      </td>
      <td class="t2box10"> 
    </tr>
    <tr class="t2row2">
      <td class="t2box21">
      </td>
      <td class="t2box22">
      </td>
      <td class="t2box23">
      </td>
      <td class="t2box24">
      </td>
      <td class="t2box25">
      </td>
      <td class="t2box26">
      </td>
      <td class="t2box27">
      </td>
      <td class="t2box28">
      </td>
      <td class="t2box29">
      </td>
      <td class="t2box210"> 
    </tr>
  </table> <!--end of table2 -->
  </article>
  <article class="carnet">
    <img src= "http://www2.my-favorite-coloring.biz/colorino/Images/Large/Heroes-para-ninos-Troll-face-Genius-740767.png">
    <aside class="genius-info">
      <h3> Felipe Andres Henao</h3>
      <p>I enjoy solving new challenges and learning everyday, also get to know diferent tools to solve those challenges.</p>
    </aside>
  </article>
</section> <!--Color palette -->

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@import "bourbon/bourbon";
@import "neat/neat";
@mixin bgc($x) {
  background-color: $x;
  }
@mixin nospace($y) {
    cellspacing:$y;
    cellpadding:$y;
  }
$color1: #3336A0;
$color2: #B52E3C;
$color3: #FECF30;
$color4: #337059;
$color5: #FBF9F9;
.wrapper {
  @include outer-container;
  height: 100%;
}
.content {
  @include span-columns(12);
  min-width: em(500);
  min-height: em(250);
}
.table {
  @include nospace(0);
  width: 100%;
  height: 225px;
}
.table2 {
  @include nospace(0);
  width: 89%;
  height: 150px;
}
div {
  height: 100%;
  width: 33%;
  float: left;
}
.row1 {
  .box1 {
      @include bgc($color1);
    }
  .box2 {
    @include bgc($color2);
  }
  .box3 {
    @include bgc($color3);
  }
  .box4 {
    @include bgc($color4);
  }
  .box5 {
    @include bgc($color5);
  }
}
.row2{
  .box1 {
    .div211{
      background-color: lighten($color1,40%);
    }
    .div212{
      background-color: lighten($color1,30%);
    }
    .div213{
      background-color: lighten($color1,20%);
    }
  }
  .box2 {
    .div221 {
      background-color: lighten($color2,40%);
    }
    .div222 {
      background-color: lighten($color2,30%);
    }
    .div223 {
      background-color: lighten($color2,20%);
    }
  }
   .box3 {
    .div231 {
      background-color: lighten($color3,40%);
    }
    .div232 {
      background-color: lighten($color3,30%);
    }
    .div233 {
      background-color: lighten($color3,20%);
    }
  }
   .box4 {
    .div241 {
      background-color: lighten($color4,40%);
    }
    .div242 {
      background-color: lighten($color4,30%);
    }
    .div243 {
      background-color: lighten($color4,20%);
    }
  }
  .box5 {
    background-color: darken($color5, 15%);
  }
}
.row3 {
  .box1{
    .div311 {
      background-color: darken($color1,20%);
    }
    .div312 {
      background-color: darken($color1,15%);
    }
    .div313 {
      background-color: $color1;
    }
  }
  .box2{
    .div321 {
      background-color: darken($color2,20%);
    }
    .div322 {
      background-color: darken($color2,15%);
    }
    .div323 {
      background-color: $color2;
    }
  }
  .box3{
    .div331 {
      background-color: darken($color3,20%);
    }
    .div332 {
      background-color: darken($color3,15%);
    }
    .div333 {
      background-color: $color3;
    }
  }
  .box4{
    .div341 {
      background-color: darken($color4,20%);
    }
    .div342 {
      background-color: darken($color4,15%);
    }
    .div343 {
      background-color: $color4;
    }
  }
  .box5 {
    background-color: darken($color5, 40%);
  }
}
.t2row1 {
  .t2box1 {background-color: grayscale(darken($color5,45%));}
  .t2box2 {background-color: grayscale(darken($color5,40%));}
  .t2box3 {background-color: grayscale(darken($color5,35%));}
  .t2box4 {background-color: grayscale(darken($color5,30%));}
  .t2box5 {background-color: grayscale(darken($color5,25%));}
  .t2box6 {background-color: grayscale(darken($color5,20%));}
  .t2box7 {background-color: grayscale(darken($color5,15%));}
  .t2box8 {background-color: grayscale(darken($color5,10%));}
  .t2box9 {background-color: grayscale(darken($color5,5%));}
  .t2box10 {background-color:$color5;}
}
.t2row2 {
  .t2box21 {background-color: grayscale(darken($color5,50%));}
  .t2box22 {background-color: grayscale(darken($color5,55%));}
  .t2box23 {background-color: grayscale(darken($color5,60%));}
  .t2box24 {background-color: grayscale(darken($color5,65%));}
  .t2box25 {background-color: grayscale(darken($color5,70%));}
  .t2box26 {background-color: grayscale(darken($color5,75%));}
  .t2box27 {background-color: grayscale(darken($color5,85%));}
  .t2box28 {background-color: grayscale(darken($color5,90%));}
  .t2box29 {background-color: grayscale(darken($color5,95%));}
  .t2box210 {background-color: grayscale(darken($color5,100%));}
}
.carnet {
  display: inline-block;
  border:1px solid gray;
  height: 100%;
  width: 50%;
    img {
      min-width: 300px;
      max-height: 250px;
      border: 1px solid black;
    }
    .genius-info {
      width: 100%;
      margin-bottom: 0px;
      height: 100%;
      @mixin info($x,$y) {
        text-align: center;
        min-height: 125px;
        margin: 0 0 0 0px;
        font-size: $x;
        padding-top:$y;
      }
        h3 {
          @include info(50px, 30px);
          border:1px solid gray;
        }
        p {
          @include info(25px, 15px);
        }
    }
}

SassMeister-output.css

html {
  box-sizing: border-box;
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

.wrapper {
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
}

.wrapper::after {
  clear: both;
  content: "";
  display: table;
}

.content {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 100%;
  min-width: 31.25em;
  min-height: 15.625em;
}

.content:last-child {
  margin-right: 0;
}

.table {
  cellspacing: 0;
  cellpadding: 0;
  width: 100%;
  height: 225px;
}

.table2 {
  cellspacing: 0;
  cellpadding: 0;
  width: 89%;
  height: 150px;
}

div {
  height: 100%;
  width: 33%;
  float: left;
}

.row1 .box1 {
  background-color: #3336A0;
}

.row1 .box2 {
  background-color: #B52E3C;
}

.row1 .box3 {
  background-color: #FECF30;
}

.row1 .box4 {
  background-color: #337059;
}

.row1 .box5 {
  background-color: #FBF9F9;
}

.row2 .box1 .div211 {
  background-color: #b7b8e8;
}

.row2 .box1 .div212 {
  background-color: #9092dc;
}

.row2 .box1 .div213 {
  background-color: #6a6ccf;
}

.row2 .box2 .div221 {
  background-color: #efc0c5;
}

.row2 .box2 .div222 {
  background-color: #e5979f;
}

.row2 .box2 .div223 {
  background-color: #da6f7a;
}

.row2 .box3 .div231 {
  background-color: #fffefb;
}

.row2 .box3 .div232 {
  background-color: #fff2c8;
}

.row2 .box3 .div233 {
  background-color: #fee796;
}

.row2 .box4 .div241 {
  background-color: #9dd2be;
}

.row2 .box4 .div242 {
  background-color: #7ac2a7;
}

.row2 .box4 .div243 {
  background-color: #57b290;
}

.row2 .box5 {
  background-color: #dccbcb;
}

.row3 .box1 .div311 {
  background-color: #1a1c53;
}

.row3 .box1 .div312 {
  background-color: #212266;
}

.row3 .box1 .div313 {
  background-color: #3336A0;
}

.row3 .box2 .div321 {
  background-color: #641921;
}

.row3 .box2 .div322 {
  background-color: #781e28;
}

.row3 .box2 .div323 {
  background-color: #B52E3C;
}

.row3 .box3 .div331 {
  background-color: #c79a01;
}

.row3 .box3 .div332 {
  background-color: #e0ad01;
}

.row3 .box3 .div333 {
  background-color: #FECF30;
}

.row3 .box4 .div341 {
  background-color: #132a21;
}

.row3 .box4 .div342 {
  background-color: #1b3b2f;
}

.row3 .box4 .div343 {
  background-color: #337059;
}

.row3 .box5 {
  background-color: #a97f7f;
}

.t2row1 .t2box1 {
  background-color: #878787;
}

.t2row1 .t2box2 {
  background-color: #949494;
}

.t2row1 .t2box3 {
  background-color: #a1a1a1;
}

.t2row1 .t2box4 {
  background-color: #adadad;
}

.t2row1 .t2box5 {
  background-color: #bababa;
}

.t2row1 .t2box6 {
  background-color: #c7c7c7;
}

.t2row1 .t2box7 {
  background-color: #d4d4d4;
}

.t2row1 .t2box8 {
  background-color: #e1e1e1;
}

.t2row1 .t2box9 {
  background-color: #ededed;
}

.t2row1 .t2box10 {
  background-color: #FBF9F9;
}

.t2row2 .t2box21 {
  background-color: #7a7a7a;
}

.t2row2 .t2box22 {
  background-color: #6e6e6e;
}

.t2row2 .t2box23 {
  background-color: #616161;
}

.t2row2 .t2box24 {
  background-color: #545454;
}

.t2row2 .t2box25 {
  background-color: #474747;
}

.t2row2 .t2box26 {
  background-color: #3b3b3b;
}

.t2row2 .t2box27 {
  background-color: #212121;
}

.t2row2 .t2box28 {
  background-color: #141414;
}

.t2row2 .t2box29 {
  background-color: #080808;
}

.t2row2 .t2box210 {
  background-color: black;
}

.carnet {
  display: inline-block;
  border: 1px solid gray;
  height: 100%;
  width: 50%;
}

.carnet img {
  min-width: 300px;
  max-height: 250px;
  border: 1px solid black;
}

.carnet .genius-info {
  width: 100%;
  margin-bottom: 0px;
  height: 100%;
}

.carnet .genius-info h3 {
  text-align: center;
  min-height: 125px;
  margin: 0 0 0 0px;
  font-size: 50px;
  padding-top: 30px;
  border: 1px solid gray;
}

.carnet .genius-info p {
  text-align: center;
  min-height: 125px;
  margin: 0 0 0 0px;
  font-size: 25px;
  padding-top: 15px;
}

SassMeister-rendered.html

<section class="wrapper">
  <article class="content">
    <table class="table">
      <tr class="row1">
        <td class="box1"></td>
        <td class="box2"></td>
        <td class="box3"></td>
        <td class="box4"></td>
        <td class="box5"></td>
      </tr> <!--end row1 -->
      <tr class="row2">
        <td class="box1">
          <div class="div211"></div>
          <div class="div212"></div>
          <div class="div213"></div>
        </td>
        <td class="box2">
          <div class="div221"></div>
          <div class="div222"></div>
          <div class="div223"></div>
        </td>
        <td class="box3">
          <div class="div231"></div>
          <div class="div232"></div>
          <div class="div233"></div>
        </td>
        <td class="box4">
          <div class="div241"></div>
          <div class="div242"></div>
          <div class="div243"></div>
        </td>
        <td class="box5">
        </td>
      </tr> <!--end row2 -->
      <tr class="row3">
        <td class="box1">
          <div class="div311"></div>
          <div class="div312"></div>
          <div class="div313"></div>
        </td>
        <td class="box2">
          <div class="div321"></div>
          <div class="div322"></div>
          <div class="div323"></div>
        </td>
        <td class="box3">
          <div class="div331"></div>
          <div class="div332"></div>
          <div class="div333"></div>
        </td>
        <td class="box4">
          <div class="div341"></div>
          <div class="div342"></div>
          <div class="div343"></div>
        </td>
        <td class="box5">
        </td>
      </tr><!--end row3 -->
    </table> <!--end of table1 -->
    <table class="table2">
     <tr class="t2row1">
      <td class="t2box1">
      </td>
      <td class="t2box2">
      </td>
      <td class="t2box3">
      </td>
      <td class="t2box4">
      </td>
      <td class="t2box5">
      </td>
      <td class="t2box6">
      </td>
      <td class="t2box7">
      </td>
      <td class="t2box8">
      </td>
      <td class="t2box9">
      </td>
      <td class="t2box10"> 
    </tr>
    <tr class="t2row2">
      <td class="t2box21">
      </td>
      <td class="t2box22">
      </td>
      <td class="t2box23">
      </td>
      <td class="t2box24">
      </td>
      <td class="t2box25">
      </td>
      <td class="t2box26">
      </td>
      <td class="t2box27">
      </td>
      <td class="t2box28">
      </td>
      <td class="t2box29">
      </td>
      <td class="t2box210"> 
    </tr>
  </table> <!--end of table2 -->
  </article>
  <article class="carnet">
    <img src= "http://www2.my-favorite-coloring.biz/colorino/Images/Large/Heroes-para-ninos-Troll-face-Genius-740767.png">
    <aside class="genius-info">
      <h3> Felipe Andres Henao</h3>
      <p>I enjoy solving new challenges and learning everyday, also get to know diferent tools to solve those challenges.</p>
    </aside>
  </article>
</section> <!--Color palette -->