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 Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                 <a id="google1" href="https://google.com" title="go to Google"></a>
 <a id="google2" href="#"></a>
 
 <div id="content">
 
 <div>
  <a href="https://twitter.com">twitter</a>
  <a href="https://sitepoint.com">sitepoint</a>
  <a href="https://facebook.com">facebook</a>
 </div>
  
  <h1>page description</h1>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eleifend rhoncus nisl, in aliquam tellus sollicitudin sit amet. Sed quis placerat felis. Vivamus sed libero euismod, congue massa vel, bibendum augue. Curabitur tempus pharetra laoreet. Suspendisse et mattis dolor, vitae molestie dolor. Sed varius neque vitae erat tincidunt, in gravida nunc scelerisque. Proin ultricies leo non dui commodo, id cursus nulla posuere. Nulla placerat bibendum nisi, sit amet dictum ligula auctor vel. Morbi dignissim lorem varius nulla tristique rutrum. Donec elementum aliquet tellus vel tristique. Proin gravida faucibus finibus. Morbi tincidunt libero metus, vel maximus eros molestie eget. Curabitur blandit sapien quam, sed aliquet eros tempor eget. Morbi enim turpis, interdum et massa ut, vehicula pretium risus. Sed ac gravida nunc. Nunc volutpat cursus lacus, a tempus ligula tempus sit amet.</p>

  <p>Vestibulum elementum leo rutrum mattis consectetur. Integer ac finibus ipsum. Fusce in enim vel ligula efficitur ultricies. Quisque interdum sit amet leo in aliquet. Donec elementum nisl vel nisl cursus ullamcorper. Vivamus accumsan magna at ullamcorper commodo. Maecenas consectetur nisl quis ligula molestie posuere. Donec vel placerat nisi, vitae feugiat erat.</p>

  <p>Quisque non augue mauris. Donec scelerisque augue tellus, sit amet fringilla est imperdiet laoreet. In risus elit, molestie et malesuada eget, efficitur non ligula. Quisque imperdiet orci facilisis, dictum tellus ut, sollicitudin arcu. Phasellus gravida elit a commodo dictum. Aenean commodo tellus et neque varius ultricies. Sed imperdiet odio sed magna sagittis finibus. Morbi egestas lectus id rhoncus tempor. Nullam nec ultricies eros. Aliquam at dui sapien.</p>

  <p>Nullam viverra eget sem eu hendrerit. Etiam sollicitudin placerat odio, ut posuere nisi vehicula id. Etiam faucibus nunc ante. Suspendisse id placerat felis. In ultrices eu dui eget finibus. Nam ultricies vehicula massa sit amet consectetur. Curabitur sodales, ex quis interdum blandit, ligula quam tempor nisl, id cursus tellus lorem ut enim. Sed ut fringilla leo. Sed lacinia varius finibus. Nullam non interdum mauris. Suspendisse ante ipsum, vehicula et nisi vitae, accumsan porttitor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque gravida lorem eros, id eleifend nibh vehicula at. Maecenas vulputate diam neque, in fringilla nisl lacinia id. Pellentesque at dolor sit amet velit lacinia ultrices. Praesent nec velit vitae erat lobortis gravida.</p>

  <p>Mauris non neque facilisis, scelerisque leo eget, congue nunc. Integer posuere ut mi ac dapibus. Phasellus velit nisl, cursus sit amet lorem eget, iaculis porttitor nulla. Donec id euismod nisl, sit amet dignissim turpis. Phasellus quis nisi malesuada, consequat leo sit amet, interdum turpis. Sed dapibus mattis turpis, nec ultricies neque lobortis nec. Phasellus ultrices odio at tempus convallis. Vestibulum et magna accumsan, posuere magna id, commodo quam.</p>   

 </div>
              
            
!

CSS

              
                body {
    margin: 0;
    background-color: #fff;
    font: normal 1em / 150% sans-serif;
 }
 
#google1, 
#google2 {
    position: fixed;
    width: 100%;
    height: 6em;
    display: block;
 }

#google2 {
    z-index:-1;
    border-bottom: 1px solid #666;
    background-color: #ff0;
    background-image: linear-gradient( to bottom, #ff0, #bb0 );
    box-shadow: 0 0.5em 0.5em rgba( 0, 0, 0, 0.4 );
 }

#content > div:nth-of-type(1) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 6em;
 }
 
#content > div:nth-of-type(1) a {
    position:relative;
    z-index: 2;
    padding: 0.25em 0.5em;
    margin: 0.5em;
    background-color: #0ff;
    border: 1px solid #003;
    border-radius: 0.4em;
    color: #003;
    text-decoration: none;
 }

h1 {
    text-align: center;
    text-transform: capitalize;
 }
 
#content p {
    margin: 1em 2em;
 }
              
            
!

JS

              
                
              
            
!
999px

Console