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 Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

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.

            
              <body>
 <br><br><br><br>
 <p align="center">endless nyc apartment</p>
 <br><br>
 <div class="building">
  <div class="rooftop">
  </div>
  <!-- flex parent -->
  <div class="windowwrapper">
   <div class="window">
    <div class="fireescape">
     <div class="stairs">
     </div>
     <div class="railings">
      <div class="wrapper">
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
      </div>
     </div>
    </div>
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
    <div class="section"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>

   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="fireescape">

     <div class="stairs">
     </div>

     <div class="railings">
      <div class="wrapper">
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
      </div>
     </div>

    </div>
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
    <div class="section"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="fireescape">

     <div class="stairs">
     </div>

     <div class="railings">
      <div class="wrapper">
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
      </div>
     </div>

    </div>
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
    <div class="section"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="fireescape">

     <div class="stairs">
     </div>
     <div class="railings">
      <div class="wrapper">
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
      </div>
     </div>

    </div>
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
    <div class="section"></div>
   </div>
   <div class="window">

    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>

   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="fireescape">

     <div class="stairs">
     </div>

     <div class="railings">
      <div class="wrapper">
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
      </div>
     </div>

    </div>
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
    <div class="section"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="fireescape">

     <div class="stairs">
     </div>

     <div class="railings">
      <div class="wrapper">
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
      </div>
     </div>

    </div>
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
    <div class="section"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="fireescape">

     <div class="stairs">
     </div>
     <div class="railings">
      <div class="wrapper">
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
      </div>
     </div>

    </div>
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
    <div class="section"></div>
   </div>
   <div class="window">

    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>

   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="fireescape">

     <div class="stairs">
     </div>

     <div class="railings">
      <div class="wrapper">
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
      </div>
     </div>

    </div>
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
    <div class="section"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="fireescape">

     <div class="stairs">
     </div>

     <div class="railings">
      <div class="wrapper">
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
      </div>
     </div>

    </div>
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
    <div class="section"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="fireescape">

     <div class="stairs">
     </div>
     <div class="railings">
      <div class="wrapper">
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
      </div>
     </div>

    </div>
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
    <div class="section"></div>
   </div>
   <div class="window">

    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>

   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="fireescape">

     <div class="stairs">
     </div>

     <div class="railings">
      <div class="wrapper">
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
      </div>
     </div>

    </div>
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
    <div class="section"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="fireescape">

     <div class="stairs">
     </div>

     <div class="railings">
      <div class="wrapper">
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
      </div>
     </div>

    </div>
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
    <div class="section"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="fireescape">

     <div class="stairs">
     </div>
     <div class="railings">
      <div class="wrapper">
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
      </div>
     </div>

    </div>
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
    <div class="section"></div>
   </div>
   <div class="window">

    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>

   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="fireescape">

     <div class="stairs">
     </div>

     <div class="railings">
      <div class="wrapper">
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
      </div>
     </div>

    </div>
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
    <div class="section"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="fireescape">

     <div class="stairs">
     </div>

     <div class="railings">
      <div class="wrapper">
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
      </div>
     </div>

    </div>
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
    <div class="section"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="fireescape">

     <div class="stairs">
     </div>
     <div class="railings">
      <div class="wrapper">
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
      </div>
     </div>

    </div>
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
    <div class="section"></div>
   </div>
   <div class="window">

    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>

   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="fireescape">

     <div class="stairs">
     </div>

     <div class="railings">
      <div class="wrapper">
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
      </div>
     </div>

    </div>
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
    <div class="section"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="fireescape">

     <div class="stairs">
     </div>

     <div class="railings">
      <div class="wrapper">
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
       <span></span>
      </div>
     </div>

    </div>
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
    <div class="section"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
   <div class="window">
    <div class="deco"></div>
    <div class="top"></div>
    <div class="frame"></div>
    <div class="sill"></div>
    <div class="slice"></div>
   </div>
  </div>
  <div class="lowwall"></div>
  <div class="door">
   <div class="toppane"></div>
   <div class="middlepane"></div>
  </div>
  <div class="step"></div>
 </div>
 <body>
            
          
!
            
              $dark-red: #D84F48
$red: #F65026
$redshadow: #ECA57D
$lightred: #F47973
$darkgrey: #E4E6E54
$grey: #F1F2F2
$windowpanecolor: #705FAD
// #C4B999 705FAD
$green: #4B8B7B

$darkgreen: #667252
$lightyellow: #FFFAC3
$brownshadow: #914A3C
$black: #000
//building width
$buildingwidth: 60rem
$buildingheight: 90rem*5+19rem

//borders
$borderbottom: 0.5rem solid $redshadow
//animiation transition time:
$transitiontime: 0.3s 
//mixin for size
@mixin size($width: null, $height: null) 
  width: $width
  height: $height
  
//mixin for absolute positioning
@mixin position($position, $z-index: null, $top: null, $right: null, $bottom: null, $left: null) 
  position: $position
  z-index: $z-index
  top: $top
  right: $right
  bottom: $bottom
  left: $left

//mixin for background image
@mixin backgroundimage($url, $background-size)
  background-image: $url
  background-size: $background-size
	



    
//rooftop
.rooftop
  background: $black
  @include size($buildingwidth,4rem) 
  @include position(absolute,1, $top:0)
    
        
    
//building    
.building
  @include size($buildingwidth,$buildingheight)
  @include position(relative)
  background: $red
  margin: 0 auto

//lowwall
.lowwall
  background: $black
  @include size($buildingwidth,10rem)
  @include position(absolute,3, $bottom:0rem)  
//door
.door
  background: $windowpanecolor
  border: 1rem solid $black
  @include size(15rem,25rem)
  @include position(absolute,3, $bottom:0rem, $left:10rem)
  .toppane
    background: $black
    border-bottom: $borderbottom
    @include size(13rem,5rem)
    @include position(absolute,4, $top:0rem)
  .middlepane
    background: $black
    @include size(1rem,24rem)
    @include position(absolute,4, $left:6rem)
.step
  background: $lightyellow
  @include size(17rem,2rem)
  @include position(absolute,5, $bottom:0rem, $left: 9rem)
  border-radius: 0.2rem
  bottom-bottom: $borderbottom
  
  

.fireescape
  margin: 5rem
  @include size($buildingwidth*0.6,16rem)
  @include position(relative)
 
  .stairs
    background: $black
    @include size($buildingwidth*0.47,1rem)
    @include position(absolute, 7, $bottom: 12rem)
    transform: rotate(60deg)

  .railings
    @include position(absolute, 8, $bottom:0rem, $right: 1rem)
    border-top: 0.5rem solid $black
    border-bottom: 1rem solid $black
    .wrapper
      width: $buildingwidth*0.6
      display: flex
      flex-flow: row nowrap
      justify-content: space-between
      span
        background: $black
        @include size(0.5rem,9rem)
        
     
.section
  background: $lightyellow
  @include size($buildingwidth, 2rem)
  @include position(absolute, 2, 5rem, 0, 0, 0)

    
.windowwrapper
  width: $buildingwidth
  // height: $buildingheight
  padding: 4rem 0 1rem 0
  display: flex
  flex-flow: row wrap
  
.window
  width: $buildingwidth/3
  height: 20rem
  margin: 2rem 0 
  @include position(relative) 
  .deco
    background: $lightyellow
    border-bottom: 0.01rem solid $redshadow
    border-radius: 1rem
    @include size(9.5rem, 0.8rem)
    @include position(absolute, 5, 1rem, 0, 0, 5.25rem) 
  .top
    background: $lightyellow
    border-radius: 0.2rem
    @include size(9rem, 1.8rem)
    @include position(absolute, 4, 1rem, 0, 0, 5.5rem) 
  .frame
    background: $windowpanecolor
    border: 0.8rem solid $black
    @include size(8rem, 14rem) 
    @include position(absolute, 4, 3rem, 0, 0, 6rem)         
  .sill
    background: $lightyellow
    border-radius: 0.2rem
    border-bottom: 0.25em solid $redshadow 
    @include size(9rem, 1.5rem)
    @include position(absolute, 4, 17rem, 0, 0, 5.5rem)     
  .slice
    background: #463A73
    border-bottom: 0.5rem solid $black
    @include size(6.5rem, 6rem)
    @include position(absolute, 4, 3.75rem, 0, 0, 6.75rem)

  
  

  
  
  
  
  
  //setup
*, :after, :before
  box-sizing: border-box


html
  font-size: 10px
  font-family: inconsolata  
  // @include backgroundimage(url(https://cdn.pbrd.co/images/grRYaLJY.png), cover)
	
body
  background: #fff
  width: 80vw
  margin: 0 auto

	
		
p
  font-size: 2rem
  color: $black

//animation
//on hover, windowpanel lights up
.window:hover .slice
  height: 2rem
  transition: $transitiontime
  transform-origin: top
.window:hover .frame
  background: #FED700
  transition: $transitiontime


            
          
!
            
              //using scrollreveal.js 
window.sr = ScrollReveal({ scale: 0.9, easing: 'cubic-bezier(0.6, 0.2, 0.1, 1)', reset: true });

// Customizing a reveal set
// sr.reveal('.column', { duration: 500 });
sr.reveal('.deco', { duration: 1000 });
sr.reveal('.top', { duration: 1000 });
sr.reveal('.frame', { duration: 1000 });
sr.reveal('.sill', { duration: 1000 });
sr.reveal('.section', { duration: 800 });
// sr.reveal('', { duration: 800 });



            
          
!
999px
Loading ..................

Console