cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              .box
  .rupee
    .rupee-inner
  .potion-glass
    .potion-fill
    .potion-fill-overlay
    .potion-lid
    .potion-cork
  .bomb-container
    .bomb
      .rope
      .bomb-lid
      .bomb-overlay 
  .stripe-horizontal-1
  .stripe-horizontal-2
  .stripe-horizontal-3
  .stripe-horizontal-4
  .stripe-horizontal-5
  .heart-container-1
    .heart-circle-left
    .heart-circle-left-white
    .heart-rhombus
    .heart-rhombus-white
    .heart-circle-right
    .heart-circle-right-white
  .heart-container-2
    .heart-circle-left
    .heart-circle-left-white
    .heart-rhombus
    .heart-rhombus-white
    .heart-circle-right
    .heart-circle-right-white
  .heart-container-3
    .heart-circle-left
    .heart-circle-left-white
    .heart-rhombus
    .heart-rhombus-white
    .heart-circle-right
    .heart-circle-right-white
  .heart-container-4
    .heart-circle-left
    .heart-circle-left-white
    .heart-rhombus
    .heart-rhombus-white
    .heart-circle-right
    .heart-circle-right-white
  .heart-container-5
    .heart-circle-left
    .heart-circle-left-white
    .heart-rhombus
    .heart-rhombus-white
    .heart-circle-right
    .heart-circle-right-white
  .heart-container-6
    .heart-circle-left
    .heart-circle-left-white
    .heart-rhombus
    .heart-rhombus-white
    .heart-circle-right
    .heart-circle-right-white
  .heart-container-7
    .heart-circle-left
    .heart-circle-left-white
    .heart-rhombus
    .heart-rhombus-white
    .heart-circle-right
    .heart-circle-right-white
  .heart-container-8
    .heart-circle-left
    .heart-circle-left-white
    .heart-rhombus
    .heart-rhombus-white
    .heart-circle-right
    .heart-circle-right-white
  .chest-top
    .chest-top-bottom-stripe
    .chest-white-stripe
    .chest-col-1
      .top-white
      .top-black
      .bottom-white
      .bottom-black
    .chest-col-2
      .top-white
      .top-black
      .bottom-white
      .bottom-black
  .chest-bottom
    .burgundy-square
      .lock
        .inner-lock
  .tube
  .fire-left-bottom
    .orange-fire
    .yellow-ring
    .white-ring
  .fire-right-bottom
    .orange-fire
    .yellow-ring
    .white-ring
  .fire-left-top
    .orange-fire
    .yellow-ring
    .white-ring
  .fire-right-top
    .orange-fire
    .yellow-ring
    .white-ring
  .floor
    .tri-force-1
    .tri-force-2
    .tri-force-3
    .tile1
    .tile2
    .tile3
    .tile4
    .tile5
    .tile6
    .tile7
    .tile8
    .tile9
    .tile10
    .tile11
    .tile12
    .tile13
    .tile14
    .tile15
    .tile16
            
          
!
            
              $green: #638463;
$light-green: #8CAD8C;
$bright-green: #21C629;
$yellow-green: #8DE15E;
$yellow: #DECE84;
$brown: #8C6339;
$dark-brown: #5A3921;
$white: #D6E8F9;
$orange: #CE7B4A;
$dark-yellow: #DEB529;
$vermillion: #D85335;
$goldenrod: #DAB407;
$eerie-black: #1F1A20;
$burgundy: #971F2D;
$platinum: #E8E9E0;
$mordant-red: #B40303;
$seashell: #FBECEF;
$light-blue: #0069FD;
$dark-blue: #00347D;
$aero: #7BB9E3;
$bright-red: #E32028;
body{
  background: $white;
}
.box{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  border: solid 3px $dark-brown;
  height: 400px;
  width: 600px;
  background: $brown;
}

.floor{
  position: absolute;
  width: 30%;
  height: 35%;
  background: $green;
  top: 32.5%;
  left: 35%;
}

.tile1{
  position: absolute;
  top: 3%;
  left: 3%;
  height: 18%;
  width: 18%;
  border: solid 2px $light-green;
}

.tile2{
  position: absolute;
  top: 27%;
  left: 3%;
  height: 18%;
  width: 18%;
  border-top: solid 1px $light-green;
  border: solid 2px $light-green;
}

.tile3{
  position: absolute;
  top: 52%;
  left: 3%;
  height: 18%;
  width: 18%;
  border-top: solid 1px $light-green;
  border: solid 2px $light-green;
}

.tile4{
  position: absolute;
  top: 77%;
  left: 3%;
  height: 18%;
  width: 18%;
  border-top: solid 1px $light-green;
  border: solid 2px $light-green;
}


.tile9{
  position: absolute;
  top: 3%;
  left: 52%;
  height: 18%;
  width: 18%;
  border: solid 2px $light-green;
}

.tile10{
  position: absolute;
  top: 27%;
  left: 52%;
  height: 18%;
  width: 18%;
  border-top: solid 1px $light-green;
  border: solid 2px $light-green;
}

.tile11{
  position: absolute;
  top: 52%;
  left: 52%;
  height: 18%;
  width: 18%;
  border-top: solid 1px $light-green;
  border: solid 2px $light-green;
}

.tile12{
  position: absolute;
  top: 77%;
  left: 52%;
  height: 18%;
  width: 18%;
  border-top: solid 1px $light-green;
  border: solid 2px $light-green;
}

.tile5{
  position: absolute;
  top: 3%;
  left: 28%;
  height: 18%;
  width: 18%;
  border: solid 2px $light-green;
}

.tile6{
  position: absolute;
  top: 27%;
  left: 28%;
  height: 18%;
  width: 18%;
  border-top: solid 1px $light-green;
  border: solid 2px $light-green;
}

.tile7{
  position: absolute;
  top: 52%;
  left: 28%;
  height: 18%;
  width: 18%;
  border-top: solid 1px $light-green;
  border: solid 2px $light-green;
}

.tile8{
  position: absolute;
  top: 77%;
  left: 28%;
  height: 18%;
  width: 18%;
  border-top: solid 1px $light-green;
  border: solid 2px $light-green;
}


.tile13{
  position: absolute;
  top: 3%;
  right: 3%;
  height: 18%;
  width: 18%;
  border: solid 2px $light-green;
}

.tile14{
  position: absolute;
  top: 27%;
  right: 3%;
  height: 18%;
  width: 18%;
  border-top: solid 1px $light-green;
  border: solid 2px $light-green;
}

.tile15{
  position: absolute;
  top: 52%;
  right: 3%;
  height: 18%;
  width: 18%;
  border-top: solid 1px $light-green;
  border: solid 2px $light-green;
}

.tile16{
  position: absolute;
  top: 77%;
  right: 3%;
  height: 18%;
  width: 18%;
  border-top: solid 1px $light-green;
  border: solid 2px $light-green;
}

.tri-force-1{
  position: absolute;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  height: 30%;
  width: 30%;
  background: $yellow;
  left: 35%;
  top: 15%;
  z-index: 2;
  opacity: 0.9;
}

.tri-force-2{
  position: absolute;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  height: 30%;
  width: 30%;
  background: $yellow;
  left: 20%;
  top: 45%;
  z-index: 2;
  opacity: 0.9;
}

.tri-force-3{
  position: absolute;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  height: 30%;
  width: 30%;
  background: $yellow;
  right: 20%;
  top: 45%;
  z-index: 2;
  opacity: 0.9;
}

.tube{
  position: absolute;
  top: 3%;
  left: 5%;
  background: $bright-green;
  border: solid 3px white;
  width: 3%;
  height: 15%;
  border-radius: 10px;
}

.fire-left-bottom{
  position: absolute;
  bottom: 8%;
  background: $white;
  height: 10%;
  width: 8%;
  left: 20%;
  border-radius: 10px;
}
.fire-right-bottom{
  position: absolute;
  bottom: 8%;
  background: $white;
  height: 10%;
  width: 8%;
  right: 20%;
  border-radius: 10px;
}

.fire-left-top{
  position: absolute;
  top: 20%;
  background: $white;
  height: 10%;
  width: 8%;
  left: 20%;
  border-radius: 10px;
}
.fire-right-top{
  position: absolute;
  top: 20%;
  background: $white;
  height: 10%;
  width: 8%;
  right: 20%;
  border-radius: 10px;
}

.orange-fire{
  position: absolute;
  top: 10%;
  background: $orange;
  height: 80%;
  width: 80%;
  left: 10%;
  border-radius: 10px;
}

.yellow-ring{
  position: absolute;
  top: 25%;
  background: $dark-yellow;
  height: 50%;
  width: 40%;
  left: 30%;
  border-radius: 50%;
}

.white-ring{
  position: absolute;
  top: 40%;
  background: $white;
  height: 20%;
  width: 15%;
  left: 42.5%;
  border-radius: 50%;
}

.chest-top{
  position: absolute;
  top: 20%;
  height: 15%;
  width: 15%;
  left: 41.5%;
  background: $goldenrod;
  border: solid 6px $eerie-black;
  z-index: 4;
}

.chest-white-stripe{
  position: absolute;
  height: 20%;
  width: 100%;
  background: $platinum;
  top: 20%;
}

.chest-col-1{
  position: absolute;
  height: 80%;
  left: 10%;
  width: 20%;
  background: $burgundy;
  opacity: 0.9;
  border-left: solid 6px $eerie-black;
  border-right: solid 6px $eerie-black;
  border-bottom: solid 6px $eerie-black;
}

.chest-col-2{
  position: absolute;
  height: 80%;
  right: 10%;
  width: 20%;
  background: $burgundy;
  opacity: 0.9;
  border-left: solid 6px $eerie-black;
  border-right: solid 6px $eerie-black;
  border-bottom: solid 6px $eerie-black;
}

.top-white{
  position: absolute;
  background: $platinum;
  height: 20%;
  width: 50%;
  left: 25%;
  z-index: 2;
}

.top-black{
  position: absolute;
  background: $eerie-black;
  height: 20%;
  width: 50%;
  top: 15%;
  left: 25%;
  z-index: 1;
}

.bottom-white{
  position: absolute;
  background: $platinum;
  height: 20%;
  width: 50%;
  left: 25%;
  top: 60%;
  z-index: 2;
}

.bottom-black{
  position: absolute;
  background: $eerie-black;
  height: 20%;
  width: 50%;
  top: 75%;
  left: 25%;
  z-index: 1;
}

.chest-top-bottom-stripe{
  position: absolute;
  height: 10%;
  width: 30%;
  left: 35%;
  background: $platinum;
  bottom: 0%;
}

.burgundy-square{
  position: absolute;
  top: 40%;
  height: 25%;
  width: 80%;
  left: 5%;
  background: $burgundy;
  border-left: solid 6px $eerie-black;
  border-right: solid 6px $eerie-black;
  border-bottom: solid 6px $eerie-black;
  z-index: 3;
}


.chest-bottom{
  position: absolute;
  top: 33%;
  height: 8%;
  width: 15%;
  left: 41.5%;
  background: $goldenrod;
  border: solid 6px $eerie-black;
  z-index: 3;
}

.lock{
  position: absolute;
  top: 0%;
  width: 40%;
  height: 100%;
  left: 30%;
  background: $goldenrod;
}

.inner-lock{
  position: absolute;
  background: $eerie-black;
  top: 0%;
  width: 50%;
  height: 80%;
  left: 25%;
}

.heart-container-1{
  position: absolute;
  top: 3%;
  right: 50%;
  background: none;
  height: 9%;
  width: 6%;
}

.heart-container-2{
  position: absolute;
  top: 3%;
  right: 43%;
  background: none;
  height: 9%;
  width: 6%;
}

.heart-container-3{
  position: absolute;
  top: 3%;
  right: 36%;
  background: none;
  height: 9%;
  width: 6%;
}

.heart-container-4{
  position: absolute;
  top: 3%;
  right: 29%;
  background: none;
  height: 9%;
  width: 6%;
}
.heart-container-5{
  position: absolute;
  top: 3%;
  right: 22%;
  background: none;
  height: 9%;
  width: 6%;
}

.heart-container-6{
  position: absolute;
  top: 3%;
  right: 15%;
  background: none;
  height: 9%;
  width: 6%;
}

.heart-container-7{
  position: absolute;
  top: 3%;
  right: 8%;
  background: none;
  height: 9%;
  width: 6%;
}

.heart-container-8{
  position: absolute;
  top: 3%;
  right: 1%;
  background: none;
  height: 9%;
  width: 6%;
}

.heart-rhombus{
  position: absolute;
  height: 70%;
  width: 70%;
  top: 25%;
  left: 15%;
  background: $mordant-red;
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  z-index: 2;
}

.heart-rhombus-white{
  position: absolute;
  height: 75%;
  width: 75%;
  top: 25%;
  left: 12.5%;
  background: $seashell;
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  z-index: 1;
}

.heart-circle-left{
  position: absolute;
  top: 12%;
  left: 4%;
  height: 50%;
  width: 50%;
  background: $mordant-red;
  border-radius: 50%;
  z-index: 2;
}

.heart-circle-left-white{
  position: absolute;
  top: 9%;
  left: 1%;
  height: 60%;
  width: 60%;
  background: $seashell;
  border-radius: 50%;
  z-index: 1;
}

.heart-circle-right{
  position: absolute;
  top: 12%;
  right: 4%;
  height: 50%;
  width: 50%;
  background: $mordant-red;
  border-radius: 50%;
  z-index: 2;
}

.heart-circle-right-white{
  position: absolute;
  top: 9%;
  right: 1%;
  height: 60%;
  width: 60%;
  background: $seashell;
  border-radius: 50%;
  z-index: 1;
}

.stripe-horizontal-1{
  position: absolute;
  width: 100%;
  height: 10%;
  opacity: 0.2;
  background: $dark-brown;
  z-index: 0;
}

.stripe-horizontal-2{
  position: absolute;
  width: 100%;
  height: 10%;
  opacity: 0.2;
  top: 20%;
  background: $dark-brown;
  z-index: 0;
}

.stripe-horizontal-3{
  position: absolute;
  width: 100%;
  height: 10%;
  opacity: 0.2;
  top: 40%;
  background: $dark-brown;
  z-index: 0;
}

.stripe-horizontal-4{
  position: absolute;
  width: 100%;
  height: 10%;
  opacity: 0.2;
  top: 60%;
  background: $dark-brown;
  z-index: 0;
}

.stripe-horizontal-5{
  position: absolute;
  width: 100%;
  height: 10%;
  opacity: 0.2;
  top: 80%;
  background: $dark-brown;
  z-index: 0;
}

.bomb-container{
  position: absolute;
  height: 10%;
  width: 8%;
  top: 4%;
  left: 11%  
}

.bomb{
  position: absolute;
  height: 70%;
  width: 55%;
  background: $dark-blue;
  border-radius: 50%;
  top: 20%;
  left: 15%;
  z-index: 2;
}

.bomb-overlay{
  position: absolute;
  height: 70%;
  width: 70%;
  opacity: 0.3;
  background: $light-blue;
  border-radius: 50%;
  top: 6%;
  left: 22%;
}

.bomb-lid{
  position: absolute;
  top: 0%;
  height: 5%;
  width: 40%;
  left: 30%;
  background: $platinum;
}

.rope{
  position: absolute;
  height: 30%;
  width: 15%;
  top: -30%;
  left: 42.5%;
  background: $goldenrod;
}

.potion-glass{
  position: absolute;
  left: 20%;
  top: 5.5%;
  background: $aero;
  height: 7%;
  width: 4%;
  border-radius: 7px;
  z-index: 2;
}
.potion-fill{
  background: $mordant-red;
  position: absolute;
  height: 60%;
  width: 100%;
  bottom: 0%;
  opacity: 1.0;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
}

.potion-fill-overlay{
  background: $bright-red;
  position: absolute;
  height: 40%;
  width: 100%;
  bottom: 40%;
  opacity: 0.8;
  border-radius: 50%;
}
.potion-cork{
  position: absolute;
  width: 40%;
  height: 20%;
  background: $goldenrod;
  top: -20%;
  left: 30%;
}
.potion-lid{
  position: absolute;
  width: 40%;
  height: 10%;
  background: $aero;
  top: -10%;
  left: 30%;
  border-radius: 10px;
  z-index: 2;
}

.rupee{
  position: absolute;
  height: 10%;
  WIDTH: 4.5%;
  background: $bright-green;
  z-index: 2;
  left: 28%;
  top: 3%;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.rupee-inner{
  position: absolute;
  height: 60%;
  WIDTH: 50%;
  background: $yellow-green;
  z-index: 2;
  left: 28%;
  top: 20%;
  left: 25%;
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
@media all and (max-width: 600px) {
   .box{
    margin-top: 100px;
    width: 250px;
    height: 175px;
  }
  
.chest-col-1{
  border-left: solid 2px $eerie-black;
  border-right: solid 2px $eerie-black;
  border-bottom: solid 2px $eerie-black;
}

.chest-col-2{
  border-left: solid 2px $eerie-black;
  border-right: solid 2px $eerie-black;
  border-bottom: solid 2px $eerie-black;
}
  .burgundy-square{
  border-left: solid 2px $eerie-black;
  border-right: solid 2px $eerie-black;
  border-bottom: solid 2px $eerie-black;
  z-index: 3;
}


.chest-bottom{
  position: absolute;
  top: 33%;
  height: 8%;
  width: 15%;
  left: 41.5%;
  background: $goldenrod;
  border: solid 2px $eerie-black;
  z-index: 3;
}
  
.chest-top{
  position: absolute;
  top: 20%;
  height: 15%;
  width: 15%;
  left: 41.5%;
  background: $goldenrod;
  border: solid 2px $eerie-black;
  z-index: 4;
}
}
            
          
!
999px
Loading ..................

Console