octocatstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Want a Run Button?

If active, the preview will update automatically when you change code.

            
              $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);
            
          
!
            
              /*
Inspired by: http://www.joeharrison.co.uk/projects/responsiveicons
*/
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console