Pen Settings

HTML

CSS

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.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container">
  <div class="image">
    <!-- base64 encoded so I don't have to host this image somewhere... --> 
    <img alt="totally old-skool under construction image" src="data:image/gif;base64,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" /> 
  </div>
  <div class="content">
    <h1>Website currently under maintenance</h1>
    <p>Please stand by</p>
  </div>
</div>
              
            
!

CSS

              
                html, body {
  margin: 0;
}
body {
  font-family: "Helvetica","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
  color: #333;
  text-align: center;
  background-repeat: repeat;
	background-position: center center;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAACXBIWXMAAA7CAAAOwgEVKEqAAAAAGnRFWHRTb2Z0d2FyZQBQYWludC5ORVQgdjMuNS4xMDD0cqEAAAFiSURBVChTTVPRjsMgDOP/f5QBTUvvCQitznZ20lWssoxLbJKl98Gzxxintb0dYLtflwlM95lzBj/HwK/mnB7sr9FKxh4/hdoagDs/uO9OsB0751EBEhQ4Q0qnovf9pyDvBKgLHhVwaCqfPPT4mqhDhYxBPcXjpEMaCPBOpKQwqzC3pKiV6uBbg1sC6HFKwgYMn2ahQFHUEaCB3s9JJws5Iz1D9/N4FeLZ++e+kfjV6nYEwB7SS+CJaViEhxak3ATbV2d6WgFjLRNHBrlgODsaGBrzhepD0qn0K27F5wcZYC7YoHx+cTz1Hw4eFYahayrCPFeRQ7auXyZAk/d9QwOckAY6DcgDRUR8qOhAWO/79NNCgG9oSU0Z59EItHiDjK7+VNYcmiX2QVPwHK0ARB96v3jHMqAZW5HeagXNTpfynQK8q/KEAresmxxSl4ie1L8d4xkpN8d2awpXRLb2UTb+C34BQ9XkCNuoXd4AAAAASUVORK5CYII=');
}

h1 { 
	font-size: 1.6em;
  color: #333;
}
img {max-width: 100%;}

.container{
  background-color: #fff;
  width: 250px;
  margin: 0 auto;
  padding: 3em 1em 1em;
  position: relative;
  border: 1px solid #ddd;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
}

.content p {
  font-style: italic;
  font-size: .8em;
}

.image {
  width: 180px;
  margin: 0 auto;
}


.container:before,
.container:after {
  content: '';
  z-index: -1;
  position: absolute;
  left: 20px;
  bottom: 10px;
  width: 70%;
  max-width: 300px;
  max-height: 100px;
  height: 55%;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  transform: skew(-15deg) rotate(-6deg); 
}

.container:after {
  left: auto;
  right: 20px;
  transform: skew(15deg) rotate(6deg); 
}

              
            
!

JS

              
                
              
            
!
999px

Console