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.

            
              <head>
          <meta charset="utf-8">
          <style>
body
{
     background-color: #834aa1;
     background-image: url(http://i5.cmail20.com/ei/r/75/9DD/76B/025208/grid-32.png);
     background-size: 16px 16px;
     background-repeat: repeat;
     margin: 0;     
     padding: 0;
     font: 20px/24px 'GillSans-Light', Helvetica, Arial, sans-serif;
     color: white;
     text-rendering: optimizeLegibility;
      min-width: 569px;
}
#content
{
  width: 529px;
  margin: 0 auto;
}
h2
{
     color: #ffe372;
     font-size: 1.5em;
     line-height: 1em;
}
a
{
     color: white;
     text-decoration: none;
}
a:hover
{
     text-decoration: underline;
}
header
{
     padding-top: 0;
     color: transparent;
     text-indent: -9999px;
}
h1
{
     margin: 0px auto;
     padding: 0;
     background-image: url(http://i8.cmail20.com/ei/r/75/9DD/76B/025208/stagehand-title.png);
     width: 569px;
     height: 521px;
     background-size: 569px 521px;
     background-position: center top;
     background-repeat: no-repeat;
     text-indent: -99999px;     
     color: transparent;
}
main
{
     position: relative;
     top: -50px;
     margin: 0;
      padding: 0;
}
#appStoreButtonContainer
{
     display: block;
     width: 100%;
     text-align: center;
}
#appStoreButton
{
     margin: 20px 0px;
     text-indent: -99999px;     
     color: transparent;
     display: inline-block;
     background: url(http://i6.cmail20.com/ei/r/75/9DD/76B/025208/app-store-button.png), url(http://i7.cmail20.com/ei/r/75/9DD/76B/025208/splat2.png);
     background-repeat: no-repeat, no-repeat;
     background-position: center center, center center;
     background-size: 176px 52px, 220px 148px;
     width: 266px;
     height: 150px;
     transition: .2s all ease;
}
#appStoreButton:hover
{
     width: 286px;
     height: 154px;
     margin: 10px 0px 24px 0px;
     background-size: 200px 59px, 230px 154px;
}
#introduction
{
     padding: 0px;
     text-shadow: 1px 1px 0px #603172;
}
#introduction b
{
}
#introduction a, #signup a, a.fun
{
     color: white;
     text-decoration: none;
     border-bottom: 1px solid #ffc89f;
}
#introduction a:hover, #signup a:hover
{
     color: #ffc89f;     
}
footer
{
     padding: 0px;
     margin: 0 0 20px 0;
}
footer a
{
     color: #ffc89f;
}
footer a:hover
{
     color: white;
     text-decoration: none;
     border-bottom: 1px solid #ffc89f;
}
     </style>
     </head>
     <body style="background-color:#834aa1;background-image:url(http://i5.cmail20.com/ei/r/75/9DD/76B/025208/grid-32.png);background-size:16px 16px;background-repeat:repeat;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;font-style:normal;font-variant:normal;font-weight:normal;font-size:20px;font-family:'GillSans-Light', Helvetica, Arial, sans-serif;line-height:24px;color:white;text-rendering:optimizeLegibility;min-width:569px;">
       <header style="padding-top:0;color:transparent;text-indent:-9999px;">
         <a href="https://itunes.apple.com/us/app/stagehand-reverse-platformer/id977536934?mt=8" style="color:white;text-decoration:none;" target="_blank"><h1 style="margin-top:0px;margin-bottom:0px;margin-right:auto;margin-left:auto;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;background-image:url(http://i8.cmail20.com/ei/r/75/9DD/76B/025208/stagehand-title.png);width:569px;height:521px;background-size:569px 521px;background-position:center top;background-repeat:no-repeat;text-indent:-99999px;color:transparent;">Stagehand: A Reverse Platformer</h1></a>
       </header>     
     
        <div id="content" style="width:529px;margin-top:0;margin-bottom:0;margin-right:auto;margin-left:auto;">          
         <main style="position:relative;top:-50px;margin-top:0;margin-bottom:0;margin-right:0;margin-left:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;">               
           <section id="introduction" style="padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;text-shadow:1px 1px 0px #603172;">                    
             <h2 style="color:#ffe372;font-size:1.5em;line-height:1em;">Our new game is out! Get it <a href="https://itunes.apple.com/us/app/stagehand-reverse-platformer/id977536934?mt=8" style="color:white;text-decoration:none;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#ffc89f;" target="_blank"> NOW!</a></h2>
                <p>We asked you to imagine a game that looks just like the state-of-the-art arcade jumpers we all know or love… but <i>plays nothing like them</i>. A "platformer" where you control everything  in the level <i>except</i> your character. Time to stop imagining; <i>this game exists today</i>. You're going to have a fantastic time with it.</p>
                <p>From <a href="http://www.bigbucketgames.com/" style="color:white;text-decoration:none;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#ffc89f;" target="_blank"><b>Big Bucket</b></a>, the team behind the modern classics <a href="http://www.theincidentapp.com/" style="color:white;text-decoration:none;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#ffc89f;" target="_blank"><b>The Incident</b></a> 
and <a href="http://www.spaceageapp.com/" style="color:white;text-decoration:none;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#ffc89f;" target="_blank"><b>Space Age</b></a>, comes this unmissable new phone game. And guess who's back for another run—<i>Frank Solway</i>, The Incident's everyday hero. With drastically improved graphics, unique gameplay, and a wild new soundtrack from Cabel Sasser, <b>Stagehand</b> is everyone's favorite new flavor of the summer. Grab a spoon and <a href="https://itunes.apple.com/us/app/stagehand-reverse-platformer/id977536934?mt=8" style="color:white;text-decoration:none;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#ffc89f;" target="_blank"><i>dig in</i></a>.
             </p>
                    
           </section>
               
               <a href="https://itunes.apple.com/us/app/stagehand-reverse-platformer/id977536934?mt=8" id="appStoreButtonContainer" style="color:white;text-decoration:none;display:block;width:100%;text-align:center;" target="_blank"><div id="appStoreButton" style="margin-top:20px;margin-bottom:20px;margin-right:0px;margin-left:0px;text-indent:-99999px;color:transparent;display:inline-block;background-color:, url(http://i;background-image:url(http://i6.cmail20.com/ei/r/75/9DD/76B/025208/app-store-button.png);background-repeat:no-repeat, no-repeat;background-position:center center, center center;background-attachment:scroll;background-size:176px 52px, 220px 148px;width:266px;height:150px;transition:.2s all ease;">
                    Download on the App Store
               </div></a>
               
          </main>
          
          <footer style="padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;margin-top:0;margin-bottom:20px;margin-right:0;margin-left:0;">
               • <a href="http://www.stagehandgame.com/" style="text-decoration:none;color:#ffc89f;" target="_blank">Stagehand Website</a>
               • <a href="#" style="text-decoration:none;color:#ffc89f;" target="_blank">Unsubscribe</a>               
          </footer>
        </div>
    



</body>
            
          
!
999px
Loading ..................

Console