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="blue"></div>
  <div id="wrap">
    <h2>404!</h2>
      <p>Uh oh, looks like Chicago is broken...</p>
      <div class="blue">
        <span class="made">Made at <a href="https://twitter.com/search?q=%23CodePenChicago">#CodePenChicago</a>, April 2015</span>
      </div>
  </div>
              
            
!

CSS

              
                /* --- RULES & INSTRUCTIONS --- 
  The rules are...there are no rules!
  Anything goes — change and use as much markup as you 
  like, use images, use JavaScript, use whatever you
  want! Just keep the reference to #CodePenChicago in there
  so we can have a frame of reference for what the pen
  was made for.  

  Create Chicago's 404 page — not Chicago's website's 404
  page, but if the city itself had a 404 page, what would
  it look like, what would it say? Do as much or as little
  as you like — just has to be original! While I want us 
  to have fun and be humorous, let's try not to be insulting 
  or inappropriate in any way!

  Fork this pen to create your submission for the challenge —
  further instructions on how to submit your pen will be given
  at the event, but feel free to leave a comment on the original
  pen linking to your fork for review. The forks with the most 
  hearts or something like that will win some killer CodePen 
  gear!

  Happy forking!
*/
@import url('https://www.google.com/fonts#UsePlace:use/Collection:Lato:100,300,400,700,100italic,300italic');

body {
  background-color:#FFF;
  font-family: 'Lato';
}
#wrap {
  width:100%;
  height:35vh;
  margin:0px auto;
  padding:10px 0px;
  background-color:#FFF;
  text-align:center;
  font-size:2em;
}
.blue {
  background:#b3dcf1;
  margin-top:60px;
  height:15vh;
}
h2 {
  font-size:20vh;
  margin:35px auto 0px auto;
  padding:0px;
  border:20px solid #CC0000;
  border-radius:200px;
  width:50%;
  -webkit-animation: fadein 2s;
  -moz-animation: fadein 2s;
  animation: fadein 2s;
}
p {
  margin:10px;
}
span.made {
  font-weight:300;
  font-size:0.6em;
  color:#FFF;
  animation: text-align 2s;
}
a {
  color:#6A91A4;
}

@keyframes fadein {
    from { opacity: 0;border: 20px solid #000000; }
    to   { opacity: 1;border: 20px solid #CC0000; }
}
@keyframes text-align { 
  from { margin-left:-200px; opacity:0;}
  to { opacity:1;}
}

              
            
!

JS

              
                
              
            
!
999px

Console