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.

            
              $back: #9CFFFA;
$paperTop: #E85F5C;
$line: grey;

body,html{
  display:flex;
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  background:$back;
}

.wrapper{
  background:black;
  width: 400px;
  height:600px;
  margin:auto;
  
  .paperTop{
    width:100%;
    height: 70px;
    background:$paperTop;
  }
  .paper{
    background:white;
    background-image:
      linear-gradient(to right,
        transparent 50px,
        $paperTop 50px,$paperTop 53px,
        white 53px,transparent 53px),
      linear-gradient(to bottom,
        white 50px, $line 50px, $line 52px, white 52px,
        white 102px, $line 102px, $line 104px, white 104px,
        white 152px, $line 152px, $line 154px, white 154px,
        white 202px, $line 202px, $line 204px, white 204px,
        white 252px, $line 252px, $line 254px, white 254px,
        white 302px, $line 302px, $line 304px, white 304px,
        white 352px, $line 352px, $line 354px, white 354px,
        white 402px, $line 402px, $line 404px, white 404px,
        white 452px, $line 452px, $line 454px, white 454px,
        white 502px, $line 502px, $line 504px, white 504px
        );
    width:100%;
    height:92%;
  }
}
            
          
!
999px
Loading ..................

Console