CodePen

HTML

            
              <div class='house'></div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              $bg-colour: #2E303D;
$house-brown: #b8492e;
$house-orange: #e55c3c;
$house-light-orange: #e98158;

/* House 9 */

@function extend-shadow($a) {
  $val: 0px 0px $a;
  @for $i from 0 through 50 {
    $val: #{$val}, #{$i}px #{-$i}px $a;
  }
  @return $val;
}

@mixin roof-shadow($a){
  box-shadow: extend-shadow($a),
    /* chimney shadow */
    -78px 40px $house-brown,
    /* chimney */
    -148px 30px 0 10px $house-orange;
}
      
.house{
  width: 70px;
  height: 70px;
  background: $house-brown;
  position: relative;
  display: inline-block;
  transform: rotate(45deg);
  @include roof-shadow($house-brown);

&:before{
  content: "";
  width: 0;
  height: 0;
  border-bottom: solid 120px #e98158;
  border-right: solid 120px transparent;
  border-left: solid 120px transparent;
  border-top: solid 120px transparent;
  position: absolute;
  top: -130px;
  left: -190px;
  transform: rotate(-45deg);
  box-shadow: 
    /* Right window */
    50px 180px 0 -112px $bg-colour,
    72px 180px 0 -112px $bg-colour,
    50px 202px 0 -112px $bg-colour,
    72px 202px 0 -112px $bg-colour,
    40px 217px 0 -117px $bg-colour,
    45px 217px 0 -117px $bg-colour,
    50px 217px 0 -117px $bg-colour,
    55px 217px 0 -117px $bg-colour,
    60px 217px 0 -117px $bg-colour,
    65px 217px 0 -117px $bg-colour,
    70px 217px 0 -117px $bg-colour,
    75px 217px 0 -117px $bg-colour,
    80px 217px 0 -117px $bg-colour,
    82px 217px 0 -117px $bg-colour,
    /* Left window */
    -71px 180px 0 -112px $bg-colour,
    -49px 180px 0 -112px $bg-colour,
    -71px 202px 0 -112px $bg-colour,
    -49px 202px 0 -112px $bg-colour,
    -81px 217px 0 -117px $bg-colour,
    -76px 217px 0 -117px $bg-colour,
    -71px 217px 0 -117px $bg-colour,
    -66px 217px 0 -117px $bg-colour,
    -61px 217px 0 -117px $bg-colour,
    -56px 217px 0 -117px $bg-colour,
    -51px 217px 0 -117px $bg-colour,
    -46px 217px 0 -117px $bg-colour,
    -41px 217px 0 -117px $bg-colour,
    -39px 217px 0 -117px $bg-colour,
    /* Doorstep */
    0 283px 0 -90px $bg-colour,
    /* Doorknob */
    -8px 221px 0 -118px $bg-colour,
    /* Door */
    -3px 238px 0 -98px $house-orange,
    -3px 207px 0 -98px $house-orange,
    0 204px 0 -95px $house-brown,
    0 235px 0 -95px $house-brown,
    /* House body */
    0 362px 0 -18px $bg-colour,
    0 218px 0 -20px $house-light-orange;
}

&:after{
  content: "";
  width: 140px;
  height: 140px;
  background: $house-orange;
  transform: rotate(-45deg);
  position: absolute;
  top: -10px;
  left: 39px;
  z-index: -1;
  box-shadow:
    /* Roof lip */
    20px 0 $bg-colour,
    /* Chimney cutout */
    -150px -235px 0 0 $bg-colour,
    -213px -130px 0 -20px $bg-colour,
    -92px -125px 0 -40px $bg-colour,
    -208px -105px 0 -20px $bg-colour,
    -77px -140px 0 -30px $bg-colour;
}
}

/* House 8 */
@media only screen and (max-width: 1040px) {
  
@function extend-sill($b, $c) {
  $val: -10px 137px 0 -13px $c;
    @for $j from -10 through 30 {
      $val: #{$val}, #{$j + $b}px 137px 0 -13px $c;
    }
  @return $val;
}

@mixin sill-shadow-left($b, $c){
  box-shadow:
    /* Chimney bitz */
    0 -50px 0 5px $bg-colour,
    0 -39px 0 4px $house-orange,
    -10px 26px 0 -10px $house-orange,
    -5px 14px 0 -5px $house-orange,
    /* Window left */
    0 103px 0 -7px $bg-colour,
    20px 103px 0 -7px $bg-colour,
    0 123px 0 -7px $bg-colour,
    20px 123px 0 -7px $bg-colour,
    /* Window right */
    126px 103px 0 -7px $bg-colour,
    146px 103px 0 -7px $bg-colour,
    126px 123px 0 -7px $bg-colour,
    146px 123px 0 -7px $bg-colour,
    /* Window sills */
    115px 137px 0 -13px $bg-colour,
    extend-sill(0, $c),
    extend-sill($b, $c),
    /* Doorstep */
    73px 199px 0 11px $bg-colour,
    /* Doorknob */
    65px 145px 0 -13px $house-orange,
    /* Door */
    73px 132px 0 5px $bg-colour,
    73px 169px 0 5px $bg-colour,
    /* House bottom */
    70px 285px 0 90px $bg-colour;
}
  
.house{
  width: 135px;
  height: 135px;
  background: $house-light-orange;
  box-shadow:
    0 0 0 5px $bg-colour,
    0 0 0 15px $house-orange;

&:before {
  width: 30px;
  height: 30px;
  background: $house-orange;
  position: absolute;
  border: none;
  top: 62px;
  left: -41px;
  @include sill-shadow-left(128, $bg-colour);
}

&:after{
  width: 191px;
  height: 191px;
  background: $house-light-orange;
  transform: rotate(-45deg);
  left: 39px;
  top: 39px;
  box-shadow:
    22px 1px $bg-colour,
    -22px 1px $bg-colour;
}
}

}

/* House 7 */
@media only screen and (max-width: 960px) {
  
.house{
  transform: rotate(0deg);
  width: 164px;
  height: 164px;
  box-shadow: none;
  background: $house-orange;
  margin-top: 10px;

&:before{
  width: 28px;
  height: 28px;
  transform: rotate(0deg);
  position: absolute;
  top: -20px;
  left: 4px;
  box-shadow:
    /* Window */
    110px 96px 0 -5px $bg-colour,
    87px 96px 0 -5px $bg-colour,
    110px 119px 0 -5px $bg-colour,
    87px 119px 0 -5px $bg-colour,
    /* Window sill */
    98px 107px 0 12px $house-orange,
    98px 111px 0 12px $bg-colour,
    /* Doorknob */
    19px 140px 0 -12px $house-orange,
    /* Doorstep */
    27px 188px 0 10px $bg-colour,
    /* Door */
    27px 129px 0 5px $bg-colour,
    27px 151px 0 5px $bg-colour,
    /* Chimney */
    0 -48px 0 5px $bg-colour,
    0 -38px 0 5px $house-orange,
    0 20px $house-orange;
}

&:after{
  width: 0;
  height: 0;
  transform: rotate(0deg);
  position: absolute;
  background: transparent;
  top: -58px;
  left: -28px;
  border-right: solid 110px $bg-colour;
  border-left: solid 110px $bg-colour;
  border-bottom: solid 110px $house-orange;
  box-shadow: 0 5px $bg-colour;
}

}

}

/* House 6 */
@media only screen and (max-width: 880px) {

.house{
  width: 132px;
  height: 132px;
  margin-top: 20px;

&:before,{
  width: 22px;
  height: 22px;
  top: -27px;
  left: 6px;
  box-shadow:
    /* Chimney */
    0 -37px 0 8px $bg-colour,
    0 -26px 0 5px $house-orange,
    0 20px $house-orange,
    /* Door */
    20px 110px 0 4px $bg-colour,
    20px 139px 0 4px $bg-colour,
    /* Window */
    66px 82px 0 -3px $bg-colour,
    87px 82px 0 -3px $bg-colour,
    66px 103px 0 -3px $bg-colour,
    87px 103px 0 -3px $bg-colour;
}

&:after{
  border-left: solid 86px $bg-colour;
  border-right: solid 86px $bg-colour;
  border-bottom: solid 86px $house-orange;
  box-shadow: 0;
  top: -49px;
  left: -20px;
}

}

}

/* House 5 */
@media only screen and (max-width: 800px) {

.house{
  width: 108px;
  height: 108px;
    margin-top: 25px;

&:before{
  width: 20px;
  height: 20px;
  top: -31px;
  box-shadow: 
    /* Chimney */
    0 15px $house-orange,
    /* Door */
    18px 98px 0 3px $bg-colour,
    18px 122px 0 3px $bg-colour,
    /* Window */
    62px 74px $bg-colour;
}

&:after{
  border-bottom: solid 74px $house-orange;
  border-left: solid 74px $bg-colour;
  border-right: solid 74px $bg-colour;
}

}

}

/* House 4 */
@media only screen and (max-width: 720px) {

.house{
  width: 84px;
  height: 84px;
  margin-top: 28px;

&:before{
  left: 0;
  top: -21px;
  box-shadow:
    /* Door */
    32px 69px 0 4px $bg-colour,
    32px 83px 0 4px $bg-colour,
    /* Chimney */
    0 18px $house-orange;
}

&:after{
  border-bottom: solid 58px $house-orange;
  border-right: solid 58px $bg-colour;
  border-left: solid 58px $bg-colour;
  left: -16px;
  top: -34px;
  box-shadow: none;
}

}

}

/* House 3 */
@media only screen and (max-width: 640px) {

.house{
  width: 46px;
  height: 46px;
  margin-top: 42px;

&:before{
  background: $bg-colour;
  width: 16px;
  height: 23px;
  left: 50%;
  top: auto;
  bottom: 0;
  margin-left: -8px;
  box-shadow: none;
}

&:after{
  border-bottom: solid 30px $house-orange;
  border-left: solid 30px $bg-colour;
  border-right: solid 30px $bg-colour;
  left: -7px;
  top: -14px;
}

}

}

/* House 2 */
@media only screen and (max-width: 560px) {

.house{
  width: 40px;
  height: 40px;

&:before{
  width: 12px;
  height: 16px;
  margin-left: -6px;
}

&:after{
  border-bottom: solid 20px $house-orange;
  border-right: solid 20px $bg-colour;
  border-left: solid 20px $bg-colour;
  left: 0;
  top: 0;
}

}

}

/* House 1 */
@media only screen and (max-width: 480px) {

.house{
  width: 24px;
  height: 24px;
    margin-top: 50px;

&:before{
  display: none;
}

&:after{
  border-bottom: solid 12px $house-orange;
  border-left: solid 12px $bg-colour;
  border-right: solid 12px $bg-colour;
  top: -5px;
}

}

}

// Housekeeping
body{
  background: $bg-colour;
  text-align: center;
  padding-top: 200px;
  font-family: 'Roboto', sans-serif;
  color: #00b698;
}

body:before{
  content: "Resize your browser";
  background: url(http://www.responsiveicons.co.uk/_client/images/general/scale_icon.svg);
  background-repeat: no-repeat;
  background-position: right -4px;
  background-size: 29px 29px;
  transform: rotate(90deg);
  position: absolute;
  width: 175px;
  height: 40px;
  right: -50px;
  top: 40%;
  text-align: left;
}

body:before{
  content: "Resize your browser";
  font-family: 'Roboto', sans-serif;
  background: url(http://www.responsiveicons.co.uk/_client/images/general/scale_icon.svg);
  background-repeat: no-repeat;
  background-position: right -4px;
  background-size: 29px 29px;
  transform: rotate(90deg);
  position: absolute;
  width: 175px;
  height: 40px;
  right: -50px;
  top: 40%;
  text-align: left;
}

body:after{
  content: "Responsive Icons";
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  font-weight: 900;
  font-size: 2.2rem;
}

@import url(http://fonts.googleapis.com/css?family=Roboto:400,900);
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /*
Inspired by: http://www.joeharrison.co.uk/projects/responsiveicons
*/
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................