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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <a href="#m" class="sr-only">Skip to Content</a>
<header role="banner"><div class="c flexr">
<a href="http://www.modx.com" title="Company Logo"><span class="sr-only">Company Logo</span><svg fill="#FFF" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="119.917px" height="28.072px" viewBox="0 0 119.917 28.072" enable-background="new 0 0 119.917 28.072" xml:space="preserve"><path d="M0,24.948h3.486L5.273,3.125H1.698V0.085h7.868l7.156,17.079c0.445,1.164,0.623,2.061,0.623,2.061h0.089 c0,0,0.178-0.897,0.629-2.061l7.15-17.079h7.874v3.041h-3.581l1.787,21.823h3.492v3.124H24.05v-3.124h3.313L26.11,8.224 c0-0.897,0.089-2.325,0.089-2.325H26.11c0,0-0.362,1.339-0.624,2.144l-6.354,14.756h-3.486L9.299,8.042 C8.943,7.238,8.67,5.898,8.67,5.898H8.586c0,0,0.178,1.428,0.083,2.325L7.423,24.948h3.308v3.124H0V24.948z"/><path d="M51.235-0.452c8.052,0,14.311,6.259,14.311,14.308c0,8.23-6.259,14.668-14.311,14.668 c-8.047,0-14.306-6.438-14.306-14.668C36.93,5.807,43.188-0.452,51.235-0.452z M51.235,25.032c5.635,0,10.196-4.828,10.196-11.176 c0-6.081-4.561-10.819-10.196-10.819c-5.63,0-10.285,4.649-10.285,10.819C40.95,20.115,45.605,25.032,51.235,25.032z"/><path d="M68.136,24.948h3.491V3.125h-3.491V0.085h11.899c2.322,0,4.021,0.089,5.903,0.716 c5.272,1.698,8.759,6.526,8.759,13.322c0,6.799-3.308,11.538-8.759,13.236c-1.794,0.63-3.67,0.713-5.903,0.713H68.136V24.948z M79.857,24.764c1.781,0,3.302-0.178,4.738-0.719c3.753-1.336,6.081-4.917,6.081-10.012c0-5.187-2.328-8.762-5.997-10.104 c-1.521-0.537-2.946-0.626-4.739-0.626h-4.287v21.46H79.857z"/><path d="M96.128,24.948h2.59l7.161-11.092L98.812,3.037h-2.595v-3.041h8.765v3.041h-2.061l4.655,7.331 c0.445,0.626,0.712,1.075,0.712,1.075h0.09c0,0,0.268-0.537,0.624-1.075l4.477-7.331h-1.972v-3.041H120v3.041h-2.589l-7.245,11.175 l7.066,10.736h2.685v3.124h-8.765v-3.124h2.055l-4.65-7.339c-0.444-0.624-0.719-1.164-0.719-1.164h-0.082 c0,0-0.273,0.541-0.63,1.164l-4.466,7.339h2.055v3.124h-8.587V24.948z"/></svg></a>
<input id="trig" type="checkbox" value=""><label for="trig" class="trig-label">MENU</label>
<nav><ul class="flexr" role="menubar"><li role="menuitem"><a href="cms.html">CMS</a></li><li role="menuitem"><a href="cloud.html">CLOUD</a></li><li role="menuitem"><a href="services.html">SERVICES</a></li><li role="menuitem"><a href="community.html">COMMUNITY</a></li></ul></nav>
</div></header>
<main>
    <article role="region" id="m" aria-labelledby="h" tabindex="0">
        <section class="hero" data-src="https://dl.dropboxusercontent.com/u/4277345/codepen/hero.jpg"><div class="c flexc"><h1 id="h">What Exactly Is MODX?</h1></div></section>
        <section class="p light">
            <div class="c flexr" tabindex="0">
                <div class="p1">
                    <h2 class="orange">Product</h2>
                    <p>The world’s fastest, most customizable Open Source PHP CMS. Your creative vision, no restrictions, no compromise.</p><p><a href="" class="b">Join the Revolution</a></p>
                </div>
                <div class="p1">
                    <h2 class="orange">Platform</h2>
                    <p>Blazing fast, secure, maintained, and scalable cloud hosting platform with guaranteed uptime. Push button: get amazing.</p><p><a href="" class="b">Get Hosting Done Right</a></p>
                </div>
                <div class="p1">
                    <h2 class="orange">People</h2>
                    <p>Enterprise development from MODX, awesome vetted professionals, and the greatest Community in Open Source.</p><p><a href="" class="b">Get the Help You Need</a></p>
                </div>
        </section>
        <section class="p dark">
        <div class="c flexr blue" tabindex="0">
            <div class="ct"><i class="ico">11</i><br><span class="h3">Years</span><br>In Business</div>
            <div class="ct"><i class="ico" title="100 times">100×</i><br><span class="h3">Fewer Security</span><br>Vulnerabilities</div>
            <div class="ct"><i class="ico" title="4 Million plus">4M+</i><br><span class="h3">CMS</span><br>Downloads</div>
            <div class="ct"><i class="ico" title="1 Billion plus">1B+</i><br><span class="h3">Billions of Pages</span><br>Served Monthly</div>
            <div class="ct"><i class="ico">98</i><br><span class="h3">Versions</span><br>Released</div>
        </div>
        </section>
        <section class="p light">
        <div class="c flexr" tabindex="0">
            <div class="p1">
                <h2 class="ct green">MODX CLOUD</h2><p class="ct">A web development and Cloud hosting platform like no other.<br><img src="https://dl.dropboxusercontent.com/u/4277345/codepen/b.svg" data-src="https://dl.dropboxusercontent.com/u/4277345/codepen/cloud.svg" class="laz" alt="MODX CLoud Icon"></p>
                <ul><li>Optimized for MODX Revolution</li><li>Unparalleled Staging Workflow</li><li>Fast, Dependable</li><li>Automatic Offsite Backups</li><li>MODX Support & Maintenance</li><li>Powered by Softlayer/IBM Cloud</li></ul>
            </div>
            <div class="p1">
                <h2 class="ct green">MODX CMS</h2><p class="ct">The content management system that makes awesome easy.<br><img src="https://dl.dropboxusercontent.com/u/4277345/codepen/b.svg" data-src="https://dl.dropboxusercontent.com/u/4277345/codepen/laptop.svg" class="laz" alt="MODX CMS Icon"></p>
                <ul><li>Open Source CMS</li><li>Free to Download, Free to Use</li><li>Complete Creative Freedom</li><li>Secure and Scalable</li><li>Easy to Use, Accessible CMS</li><li>Amazing Community and Resources</li></ul>
            </div>
            <div class="p1">
                <h2 class="ct green">MODX SERVICES</h2><p class="ct">We built MODX and know it inside and out. Let us assist you.<br><img src="https://dl.dropboxusercontent.com/u/4277345/codepen/b.svg" data-src="https://dl.dropboxusercontent.com/u/4277345/codepen/services.svg" class="laz" alt="MODX Services Icon"></p>
                <ul><li>Turnkey Website Development</li><li>MODX Consulting</li><li>Custom Application Development</li><li>Commercial Support</li><li>MODX Diagnostics & Troubleshooting</li><li>MODX CMS Training</li></ul>
            </div>
        </div>
        </section>
    </article>
</main>
<footer role="contentinfo"><div class="p dark ct grey">&copy; MODX 2016. Making Awesome Easy Since 2004.</div></footer>
<script defer>
var lz = document.getElementsByClassName("laz");for(var i=0;i<lz.length;i++){var img=lz[i].getAttribute("data-src");lz[i].setAttribute("src",img);}
var hero = document.getElementsByClassName("hero");for(var i=0;i<hero.length;i++){var img=hero[i].getAttribute("data-src");hero[i].style.backgroundImage="url('"+img+"')";}
</script>
              
            
!

CSS

              
                /*
This is my page for the 10k Apart Contest. 
https://a-k-apart.com/
-mobile nav
-a11y color contrast
-lazy loading
*/

.sr-only{position: absolute !important;height: 1px; width: 1px;border: 0; padding: 0;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);}
*{margin:0;padding:0;}body{background:#f9f9f9;font-family:"Helvetica Neue", "Helvetica", "Arial", sans-serif;color:#333;}.c{width:1120px;max-width:97%;margin:0 auto;}
#trig,.trig-label{display:none;}.trig-label{position:fixed;top:0;right:0;padding:14px 7px;color:#FFF;z-index:999;width:50px;padding-left:25px;}
.trig-label:before {content: "";position: absolute;left: 5px;top: 16px;width: 15px;height: 2px;background: white;box-shadow: 0 6px 0 0 white, 0 12px 0 0 white;}
.ct{text-align:center;}i{font-style:normal;}.grey{color:#777;}.blue{color:#6ebbff;}.green{color:#3a7816;}.orange{color:#ff931e;}.dark .grey,.dark.grey{color:#b8b8b8;}
p{padding-bottom:10px;}.p1{padding:10px;}ul{margin:5px 5px 10px 30px;line-height:24px;}
header{background:#5f7545;border-bottom:1px solid #7F8F76;}header svg{margin-top:5px;}nav{transition: all 0.6s;width:50%;border-right:1px solid #7F8F76;}nav ul, nav ul li{list-style:none;margin:0;}nav ul li{display:flex;width:100%;}
nav a{border-left:1px solid #7F8F76;color:#FFF;letter-spacing:1px;text-decoration:none;display:block;text-align:center;padding:10px;width:100%;font-weight:bold;}nav a:hover{background:#3E4E35;}
h1{font-size:30px;font-weight:bold;}h2{margin-bottom:10px;}
.hero{height:250px;background-size:cover;background-position:center center;}.hero .flexc{height:250px;}
.b{border-radius:16px;border: 1px solid #ff931e;color:#ff931e;text-align:center;padding:8px 12px;display:inline-block;text-decoration:none;transition: all .2s;}.b:hover{background:#e88314;color:#FFF;}
#m .orange,#m .b{color:#a36424;}#m .b{border-color:#a36424;}#m .b:hover{background:#a36424;color:#FFF;}
.p{padding:40px 0;}.p.dark{background:#333;}.p.light{background:#FFF;}.p.dark .ico{border:2px solid #6ebbff;}
.flexr{display:flex;flex-direction:row;justify-content:space-between;}.flexc{display:flex;flex-direction:column;justify-content:center;}.ico{width:80px;height:80px;font-size:30px;border-radius:50px;display:inline-block;line-height:80px;margin-bottom:10px;}
@media (max-width: 768px){
    #m{padding-top:50px;}header{position:fixed;}.trig-label{display:block;}.flexr{flex-direction:column;}.flexr > div{margin-bottom:10px;}
    nav{border:none !important;width:100%;display:none;opacity:0;}nav a{padding:10px 0;border:none !important;text-align:left;}
    header svg{margin:10px 0;}#trig:checked ~ nav{display:block !important;opacity:1;}
}
              
            
!

JS

              
                
              
            
!
999px

Console