Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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 

              
                <svg viewBox="0 0 805 337" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <path id="path-1" d="M2.89896,2.24834211 C3.26556,1.00215789 4.82126,0 6.37414,0 L17.33172,0 C18.88554,0 19.89792,0.998684211 19.58866,2.24834211 L17.44452,10.9256053 C17.11928,12.2421316 15.54478,13.3181053 13.93268,13.3181053 L2.5568,13.3181053 C0.94376,13.3181053 -0.04888,12.2473421 0.34122,10.9256053 L2.89896,2.24834211"></path>
        <path id="path-3" d="M2.09808,2.24834211 C2.3876,1.00215789 3.88126,0 5.43414,0 L16.39172,0 C17.94554,0 19.01996,0.998684211 18.78872,2.24834211 L17.18226,10.9256053 C16.9388,12.2421316 15.43104,13.3181053 13.81894,13.3181053 L2.44306,13.3181053 C0.83002,13.3181053 -0.22842,12.2473421 0.07896,10.9256053 L2.09808,2.24834211"></path>
        <path id="path-5" d="M2.24378,2.24834211 C2.45246,1.00215789 3.88126,0 5.43414,0 L16.39172,0 C17.94554,0 19.08482,0.998684211 18.93442,2.24834211 L17.88914,10.9256053 C17.73122,12.2421316 16.29302,13.3181053 14.68092,13.3181053 L3.30504,13.3181053 C1.692,13.3181053 0.564,12.2473421 0.78584,10.9256053 L2.24378,2.24834211"></path>
        <path id="path-7" d="M0.77268,3.10460526 C0.39104,1.72728947 1.40812,0.617447368 3.0409,0.617447368 L14.56342,0.617447368 C16.19808,0.617447368 17.88162,1.72207895 18.33,3.10460526 L21.44986,12.7188947 C21.92456,14.1813158 20.9338,15.3745263 19.23522,15.3745263 L7.24834,15.3745263 C5.54788,15.3745263 3.84178,14.1856579 3.4357,12.7188947 L0.77268,3.10460526"></path>
        <path id="path-9" d="M0.44368,3.10460526 C0.14664,1.72728947 1.23234,0.617447368 2.86606,0.617447368 L14.38858,0.617447368 C16.0223,0.617447368 17.63628,1.72207895 18.00006,3.10460526 L20.52396,12.7188947 C20.90748,14.1813158 19.84246,15.3745263 18.14294,15.3745263 L6.157,15.3745263 C4.45748,15.3745263 2.8247,14.1856579 2.5098,12.7188947 L0.44368,3.10460526"></path>
        <path id="path-11" d="M0.05734,3.10460526 C-0.14946,1.72728947 1.00862,0.617447368 2.64234,0.617447368 L14.16392,0.617447368 C15.79858,0.617447368 17.34112,1.72207895 17.61466,3.10460526 L19.51628,12.7188947 C19.80486,14.1813158 18.66276,15.3745263 16.96418,15.3745263 L4.9773,15.3745263 C3.27872,15.3745263 1.72208,14.1856579 1.50212,12.7188947 L0.05734,3.10460526"></path>
        <path id="path-13" d="M0.61288,3.10460526 C0.49444,1.72728947 1.7249,0.617447368 3.35768,0.617447368 L14.8802,0.617447368 C16.51392,0.617447368 17.98596,1.72207895 18.1702,3.10460526 L19.4486,12.7188947 C19.64412,14.1813158 18.42494,15.3745263 16.72448,15.3745263 L4.73854,15.3745263 C3.03902,15.3745263 1.55946,14.1856579 1.43444,12.7188947 L0.61288,3.10460526"></path>
        <path id="path-15" d="M0.28294,3.10460526 C0.25098,1.72728947 1.54818,0.617447368 3.1819,0.617447368 L14.70536,0.617447368 C16.33908,0.617447368 17.74156,1.72207895 17.84026,3.10460526 L18.52364,12.7188947 C18.62704,14.1813158 17.3336,15.3745263 15.63408,15.3745263 L3.64814,15.3745263 C1.94862,15.3745263 0.54238,14.1856579 0.50854,12.7188947 L0.28294,3.10460526"></path>
        <path id="path-17" d="M0.83848,3.10460526 C0.89488,1.72728947 2.26446,0.617447368 3.89818,0.617447368 L15.41976,0.617447368 C17.05536,0.617447368 18.3864,1.72207895 18.39486,3.10460526 L18.45596,12.7188947 C18.46536,14.1813158 17.0939,15.3745263 15.39532,15.3745263 L3.40844,15.3745263 C1.70986,15.3745263 0.37976,14.1856579 0.44086,12.7188947 L0.83848,3.10460526"></path>
        <path id="path-19" d="M1.39214,3.10460526 C1.53784,1.72728947 2.9798,0.617447368 4.61352,0.617447368 L16.13604,0.617447368 C17.76976,0.617447368 19.0303,1.72207895 18.94946,3.10460526 L18.38922,12.7188947 C18.30274,14.1813158 16.85514,15.3745263 15.15562,15.3745263 L3.16968,15.3745263 C1.47016,15.3745263 0.21808,14.1856579 0.37318,12.7188947 L1.39214,3.10460526"></path>
        <path id="path-21" d="M2.0022,3.10460526 C2.23344,1.72728947 3.74496,0.617447368 5.37774,0.617447368 L16.9012,0.617447368 C18.53492,0.617447368 19.7259,1.72207895 19.56046,3.10460526 L18.40238,12.7188947 C18.2266,14.1813158 16.7038,15.3745263 15.00522,15.3745263 L3.01834,15.3745263 C1.31882,15.3745263 0.141,14.1856579 0.38728,12.7188947 L2.0022,3.10460526"></path>
        <path id="path-23" d="M2.5568,3.10460526 C2.87828,1.72728947 4.46124,0.617447368 6.09402,0.617447368 L17.61748,0.617447368 C19.25026,0.617447368 20.37074,1.72207895 20.11412,3.10460526 L18.3347,12.7188947 C18.06492,14.1813158 16.46504,15.3745263 14.76646,15.3745263 L2.77958,15.3745263 C1.08006,15.3745263 -0.02162,14.1856579 0.3196,12.7188947 L2.5568,3.10460526"></path>
        <path id="path-25" d="M3.10764,3.16192105 C3.50056,1.78373684 5.14556,0.666078947 6.7821,0.655657895 L18.32436,0.580973684 C19.95996,0.570552632 21.02404,1.66563158 20.69598,3.04815789 L18.40802,12.6589737 C18.06022,14.1196579 16.39454,15.3232895 14.69314,15.3337105 L2.68652,15.4144737 C0.98324,15.4257632 -0.05828,14.2464474 0.36096,12.7788158 L3.10764,3.16192105"></path>
        <path id="path-27" d="M0.42394,2.24834211 C0.07896,1.00215789 1.06126,0 2.61414,0 L13.57078,0 C15.12554,0 16.7085,0.998684211 17.11458,2.24834211 L19.93082,10.9256053 C20.35852,12.243 19.39878,13.3181053 17.78668,13.3181053 L6.4108,13.3181053 C4.79776,13.3181053 3.19412,12.2473421 2.82752,10.9256053 L0.42394,2.24834211"></path>
        <path id="path-29" d="M0.28482,2.24834211 C0.01786,1.00215789 1.06126,0 2.61414,0 L13.57078,0 C15.12554,0 16.6474,0.998684211 16.97546,2.24834211 L19.25308,10.9256053 C19.599,12.243 18.57346,13.3181053 16.95948,13.3181053 L5.58454,13.3181053 C3.97244,13.3181053 2.4346,12.2473421 2.14978,10.9256053 L0.28482,2.24834211"></path>
        <path id="path-31" d="M0.13912,2.24834211 C-0.047,1.00215789 1.06126,0 2.61414,0 L13.57078,0 C15.12554,0 16.58348,0.998684211 16.82882,2.24834211 L18.5462,10.9256053 C18.80658,12.243 17.71054,13.3181053 16.09844,13.3181053 L4.72256,13.3181053 C3.11046,13.3181053 1.64218,12.2473421 1.4429,10.9256053 L0.13912,2.24834211"></path>
        <path id="path-33" d="M0.93342,2.24834211 C0.8272,1.00215789 2.00126,0 3.55414,0 L14.51078,0 C16.06554,0 17.45768,0.998684211 17.62406,2.24834211 L18.77932,10.9256053 C18.95416,12.243 17.7895,13.3181053 16.17646,13.3181053 L4.80058,13.3181053 C3.18848,13.3181053 1.78882,12.2473421 1.67602,10.9256053 L0.93342,2.24834211"></path>
        <path id="path-35" d="M0.79524,2.24834211 C0.7661,1.00215789 2.00126,0 3.55414,0 L14.51172,0 C16.06554,0 17.39564,0.998684211 17.48494,2.24834211 L18.10158,10.9256053 C18.19464,12.243 16.9623,13.3181053 15.3502,13.3181053 L3.97526,13.3181053 C2.36222,13.3181053 1.0293,12.2473421 0.99828,10.9256053 L0.79524,2.24834211"></path>
        <path id="path-37" d="M0.6486,2.24834211 C0.7003,1.00215789 2.00126,0 3.55414,0 L14.51172,0 C16.06554,0 17.33172,0.998684211 17.3383,2.24834211 L17.3947,10.9256053 C17.40316,12.243 16.10032,13.3181053 14.48822,13.3181053 L3.11328,13.3181053 C1.50024,13.3181053 0.23688,12.2473421 0.2914,10.9256053 L0.6486,2.24834211"></path>
        <path id="path-39" d="M1.4429,2.24834211 C1.5745,1.00215789 2.94126,0 4.49414,0 L15.45172,0 C17.00554,0 18.20592,0.998684211 18.13354,2.24834211 L17.62688,10.9256053 C17.5498,12.243 16.17928,13.3181053 14.56624,13.3181053 L3.1913,13.3181053 C1.57732,13.3181053 0.38352,12.2473421 0.52358,10.9256053 L1.4429,2.24834211"></path>
    </defs>
    <g id="front" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="gc-front" transform="translate(0.000000, 6.000000)">
            <rect id="desk" fill="#5B6168" x="0" y="306" width="805" height="2"></rect>
            <g id="display" transform="translate(22.000000, 0.000000)">
                <rect id="foot" stroke="#979797" stroke-width="0.5" fill="#D8D8D8" x="160.794715" y="315.657719" width="113.495165" height="5"></rect>
                <path d="M175.963902,252 L259.036098,252 L259.036098,252 C259.574373,285.445552 266.069693,312.349186 274.289879,315.657719 L161.25336,315.657719 C161.097411,315.657719 160.944243,315.645797 160.794715,315.622812 C168.974832,312.164393 175.427475,285.330736 175.963902,252 Z" id="stand" stroke="#979797" fill="#BFBFBF"></path>
                <rect id="frame" stroke="#979797" stroke-width="6" fill="#D8D8D8" x="0.509765625" y="0" width="434.980469" height="269" rx="3"></rect>
                <rect id="screen-back" fill="#111111" x="16.8897833" y="17" width="402.220433" height="235" rx="2"></rect>
                <g id="app" transform="translate(221.000000, 19.000000)">
                    <rect id="app-window" fill="#FFFFFF" x="0.73046875" y="17" width="195.269531" height="213"></rect>
                    <g id="bulb-desktop" transform="translate(49.000000, 55.000000)">
                        <path d="M105.614679,53.3919811 C105.154451,69.3264245 95.7148831,80.5703395 87.0913134,91.3073711 C84.4768704,94.5627014 81.9422628,97.7872263 79.7591995,101.107516 L79.7594008,101.107382 C75.8011729,107.126495 72.970235,113.286978 72.970235,120.686309 L72.9294451,120.686108 L72.9600739,138.437335 C72.9600739,138.437335 58.4803397,147.924738 53.0012132,147.924738 C47.5220866,147.924738 33.0423524,138.437335 33.0423524,138.437335 L33.0423524,120.858149 C33.0423524,113.475561 30.2235239,106.98171 26.2786803,100.974651 L18.952403,91.3083757 L18.9522018,91.3077729 C10.1515182,80.3497458 0.468619492,69.042144 0.381404303,52.5732933 C1.41523975,23.5539087 24.5735562,0.14780914 53.0010119,0.14780914 C81.4539613,0.14780914 104.624354,23.3938544 105.617936,52.451411 L105.614679,53.3919677 L105.614679,53.3919811 Z" id="Shape" fill="#FFFFFF"></path>
                        <path d="M33.042216,118.848683 L74.7073883,114.188368" id="Shape" stroke="#E2E2E2" stroke-width="4.49917195"></path>
                        <path d="M33.042216,120.857732 L74.7073883,116.197418" id="Shape" stroke="#171C1F" stroke-width="4.49917195"></path>
                        <path d="M33.042216,128.224248 L73.1837105,123.670038" id="Shape" stroke="#E2E2E2" stroke-width="4.49917195"></path>
                        <path d="M33.042216,130.233298 L73.1837105,125.679088" id="Shape" stroke="#171C1F" stroke-width="4.49917195"></path>
                        <path d="M34.9010393,137.395855 L73.1837768,133.169568" id="Shape" stroke="#E2E2E2" stroke-width="4.49917195"></path>
                        <path d="M34.9010393,139.404905 L73.1837768,135.178618" id="Shape" stroke="#171C1F" stroke-width="4.49917195"></path>
                        <path d="M105.614679,53.3919811 C105.154451,69.3264245 95.7148831,80.5703395 87.0913134,91.3073711 C84.4768704,94.5627014 81.9422628,97.7872263 79.7591995,101.107516 L79.7594008,101.107382 C77.9039848,103.928838 76.2962667,106.78136 75.1117167,109.777972 C67.4212826,109.951289 39.1494724,109.668572 30.892475,109.721806 C29.7045638,106.621487 28.1187502,103.757084 26.2787109,100.974604 L18.9524337,91.3083287 L18.9522324,91.307726 C10.1515489,80.3496988 0.468650152,69.042097 0.381434962,52.5732464 C1.41527041,23.5538617 24.5735869,0.147762195 53.0010426,0.147762195 C81.4539919,0.147762195 104.624384,23.3938074 105.617967,52.451364 L105.61471,53.3919207 L105.614679,53.3919811 Z" id="Shape" fill="#F6C708"></path>
                        <path d="M105.614679,53.3919811 C105.154451,69.3264245 95.7148831,80.5703395 87.0913134,91.3073711 C84.4768704,94.5627014 81.9422628,97.7872263 79.7591995,101.107516 L79.7594008,101.107382 C75.8011729,107.126495 72.970235,113.286978 72.970235,120.686309 L72.9294451,120.686108 L72.9600739,138.437335 C72.9600739,138.437335 58.4803397,147.924738 53.0012132,147.924738 C47.5220866,147.924738 33.0423524,138.437335 33.0423524,138.437335 L33.0423524,120.858149 C33.0423524,113.475561 30.2235239,106.98171 26.2786803,100.974651 L18.952403,91.3083757 L18.9522018,91.3077729 C10.1515182,80.3497458 0.468619492,69.042144 0.381404303,52.5732933 C1.41523975,23.5539087 24.5735562,0.14780914 53.0010119,0.14780914 C81.4539613,0.14780914 104.624354,23.3938544 105.617936,52.451411 L105.614679,53.3919677 L105.614679,53.3919811 Z" id="Shape" stroke="#171C1F" stroke-width="6" stroke-linejoin="round"></path>
                        <path d="M95.429972,55.790304 C95.05883,71.0393377 87.4464694,81.799603 80.4921556,92.0747882 C78.3837877,95.1900926 76.3398015,98.2759166 74.5793116,101.453386 L74.5794739,101.453258 C73.083209,104.153351 71.7866953,106.883174 70.8314374,109.750888 C64.6296329,109.91675 41.8303688,109.646194 35.1716701,109.697138 C34.2137017,106.730177 32.9348524,103.988985 31.4509877,101.326191 L25.5428506,92.0757046 L25.5426883,92.0751278 C18.4455443,81.5884531 10.6369546,70.7672404 10.5666216,55.0067867 C11.4003385,27.235652 30.0759228,4.83635068 53.0007043,4.83635068 C75.9460447,4.83635068 94.6313675,27.0824824 95.432623,54.890147 L95.4299967,55.7902463 L95.429972,55.790304 Z" id="front" fill="#FADB62"></path>
                        <path d="M31.2915215,109.828141 L74.7071853,109.828141" id="Shape" stroke="#171C1F" stroke-width="4.49917195"></path>
                        <path d="M44.9486962,109.969023 L44.9486962,69.7880271 C44.9486962,69.7880271 36.8980633,69.0005198 36.8980633,73.8061267 C36.8980633,78.6117336 44.9486962,77.8242262 44.9486962,77.8242262 L61.049962,77.8242262 C61.049962,77.8242262 69.1005949,79.1278986 69.1005949,73.8061267 C69.1005949,68.4843548 61.049962,69.7880271 61.049962,69.7880271 L61.049962,109.969023" id="Shape" stroke="#171C1F" stroke-width="4"></path>
                        <g id="line-controls" transform="translate(103.000000, 3.000000)">
                            <path d="M1.75,99.5468597 L1.75,3.48684442" id="Line" stroke="#A7C2E3" stroke-width="1.5" stroke-linecap="square"></path>
                            <circle id="Oval-3" stroke="#4990E2" fill="#FFFFFF" cx="2" cy="49" r="2"></circle>
                            <circle id="Oval-4" fill="#4990E2" cx="2" cy="2" r="2"></circle>
                            <circle id="Oval-5" fill="#4990E2" cx="2" cy="99" r="2"></circle>
                        </g>
                    </g>
                    <rect id="app-titlebar" fill="#D2D2D2" x="0.73046875" y="0" width="195.269531" height="19"></rect>
                    <path d="M9,6 L9,6 C7.895,6 7,6.896 7,8 C7,9.105 7.895,10 9,10 C10.105,10 11,9.105 11,8 C11,6.896 10.105,6 9,6 M15,6 L15,6 C13.895,6 13,6.896 13,8 C13,9.105 13.895,10 15,10 C16.105,10 17,9.105 17,8 C17,6.896 16.105,6 15,6 M21,6 L21,6 C19.895,6 19,6.896 19,8 C19,9.105 19.895,10 21,10 C22.105,10 23,9.105 23,8 C23,6.896 22.105,6 21,6" id="app-controls" fill="#9F9F9F"></path>
                    <rect id="app-vruler" fill="#EEEEEE" x="1" y="17" width="9" height="213"></rect>
                    <rect id="app-hruler" fill="#EEEEEE" transform="translate(98.335938, 21.500000) rotate(-90.000000) translate(-98.335938, -21.500000) " x="93.8359375" y="-75.1640625" width="9" height="193.328125"></rect>
                    <path d="M10,26 L10,230" id="app-vruler-line" stroke="#C7C7C7" stroke-width="0.5"></path>
                    <path d="M196.001526,26 L10,26" id="app-hruler-line" stroke="#C7C7C7" stroke-width="0.5"></path>
                </g>
                <g id="ide" transform="translate(19.000000, 19.000000)">
                    <rect id="ide-titlebar" fill="#D2D2D2" x="0" y="0" width="200.882812" height="18"></rect>
                    <path d="M8,6 L8,6 C6.895,6 6,6.896 6,8 C6,9.105 6.895,10 8,10 C9.105,10 10,9.105 10,8 C10,6.896 9.105,6 8,6 M14,6 L14,6 C12.895,6 12,6.896 12,8 C12,9.105 12.895,10 14,10 C15.105,10 16,9.105 16,8 C16,6.896 15.105,6 14,6 M20,6 L20,6 C18.895,6 18,6.896 18,8 C18,9.105 18.895,10 20,10 C21.105,10 22,9.105 22,8 C22,6.896 21.105,6 20,6" id="ide-window-controls" fill="#9F9F9F"></path>
                    <rect id="ide-window" fill="#0A1D33" x="0" y="18" width="200.882812" height="213"></rect>
                    <path d="M66,18 L66,231" id="ide-divider" stroke="#21344B" stroke-width="8"></path>
                    <g id="filegroup" transform="translate(14.000000, 31.000000)" stroke="#979797" stroke-width="4">
                        <path d="M0.236328125,2 L35.1478378,2" id="Path-169"></path>
                        <path d="M8.23632812,12 L35.1478386,12" id="Path-170"></path>
                        <path d="M8.23632812,22 L35.1478386,22" id="Path-171"></path>
                        <path d="M8.23632812,32 L35.1478386,32" id="Path-172"></path>
                    </g>
                    <g id="codegroup1" transform="translate(82.000000, 32.000000)" stroke-width="4">
                        <path d="M0.236328125,1 L27.1478386,1" id="Path-173" stroke="#A4CD4C"></path>
                        <path d="M32.2363281,1 L43.0463524,1" id="Path-174" stroke="#54B5DB"></path>
                        <path d="M48.2363281,1 L64.0316868,1" id="Path-175" stroke="#F8E81C"></path>
                        <path d="M20.2363281,10 L36.0316868,10" id="Path-176" stroke="#A4CD4C"></path>
                        <path d="M41.2363281,10 L57.0316868,10" id="Path-177" stroke="#D0011B"></path>
                        <path d="M20.2363281,19 L36.0316868,19" id="Path-178" stroke="#A4CD4C"></path>
                        <path d="M20.2363281,28 L36.0316868,28" id="Path-179" stroke="#A4CD4C"></path>
                        <path d="M10.2363281,36 L69.0765266,36" id="Path-180" stroke="#54B5DB"></path>
                        <path d="M21.2363281,45 L50.0694485,45" id="Path-181" stroke="#D0011B"></path>
                        <path d="M57.2363281,45 L68.0463524,45" id="Path-182" stroke="#F8E81C"></path>
                        <path d="M73.2363281,45 L89.0316868,45" id="Path-183" stroke="#A4CD4C"></path>
                        <path d="M0.236328125,53 L8.55946445,53" id="Path-184" stroke="#979797"></path>
                        <path d="M0.236328125,66 L17,66" id="Path-192" stroke="#F8E81C"></path>
                        <path d="M22.2363281,66 L52,66" id="Path-189" stroke="#54B5DB"></path>
                        <path d="M20.2363281,77 L36.0316868,77" id="Path-186" stroke="#A4CD4C"></path>
                        <path d="M28.2363281,86 L44.0316868,86" id="Path-193" stroke="#D0011B"></path>
                        <path d="M10.2363281,94 L69.0765266,94" id="Path-187" stroke="#F8E81C"></path>
                        <path d="M24.2363281,109 L35.0463524,109" id="Path-191" stroke="#A4CD4C"></path>
                        <path d="M40.2363281,109 L56.0316868,109" id="Path-190" stroke="#D0011B"></path>
                        <path d="M0.236328125,118 L8.55946445,118" id="Path-188" stroke="#979797"></path>
                    </g>
                    <g id="codegroup2" transform="translate(82.000000, 166.000000)" stroke-width="4">
                        <path d="M0.236328125,1 L27.1478386,1" id="Path-173" stroke="#A4CD4C"></path>
                        <path d="M32.2363281,1 L43.0463524,1" id="Path-174" stroke="#54B5DB"></path>
                        <path d="M48.2363281,1 L64.0316868,1" id="Path-175" stroke="#F8E81C"></path>
                        <path d="M20.2363281,10 L36.0316868,10" id="Path-178" stroke="#A4CD4C"></path>
                        <path d="M41.2363281,10 L57.0316868,10" id="Path-177" stroke="#D0011B"></path>
                        <path d="M20.2363281,19 L36.0316868,19" id="Path-179" stroke="#A4CD4C"></path>
                        <path d="M0.236328125,28 L17,28" id="Path-192" stroke="#F8E81C"></path>
                        <path d="M22.2363281,28 L52,28" id="Path-189" stroke="#54B5DB"></path>
                        <path d="M10.2363281,37 L69.0765266,37" id="Path-180" stroke="#54B5DB"></path>
                        <path d="M21.2363281,46 L50.0694485,46" id="Path-181" stroke="#D0011B"></path>
                        <path d="M57.2363281,46 L68.0463524,46" id="Path-182" stroke="#F8E81C"></path>
                        <path d="M73.2363281,46 L89.0316868,46" id="Path-183" stroke="#A4CD4C"></path>
                        <path d="M0.236328125,54 L8.55946445,54" id="Path-184" stroke="#979797"></path>
                    </g>
                </g>
                <path d="M0.509765625,2.99794973 C0.509765625,1.34222782 1.85584267,0 3.5197116,0 L432.480288,0 C434.142636,0 435.490234,1.35165387 435.490234,2.99794973 L435.490234,266.00205 C435.490234,267.657772 434.144157,269 432.480288,269 L3.5197116,269 C1.85736434,269 0.509765625,267.648346 0.509765625,266.00205 L0.509765625,2.99794973 Z M16.8897833,18.9961463 C16.8897833,17.8937051 17.7755343,17 18.8874618,17 L417.112538,17 C418.215826,17 419.110217,17.8982621 419.110217,18.9961463 L419.110217,250.003854 C419.110217,251.106295 418.224466,252 417.112538,252 L18.8874618,252 C17.7841744,252 16.8897833,251.101738 16.8897833,250.003854 L16.8897833,18.9961463 Z" id="frame-front" fill="#D8D8D8"></path>
                <rect id="screen-front" stroke="#111111" stroke-width="2" x="16.8897833" y="17" width="402.220433" height="235" rx="2"></rect>
                <path d="M220.5,41.9993976 L220.5,235.000641" id="between-apps" stroke="#111111" stroke-width="2.5" stroke-linecap="square"></path>
            </g>
            <g id="laptop" transform="translate(466.000000, 20.000000)">
                <rect id="foot-2" stroke="#979797" stroke-width="0.5" fill="#D8D8D8" x="75.5732691" y="295.657719" width="154.189125" height="5"></rect>
                <path d="M96.1814051,232 L209.039333,232 L209.039333,232 C209.770608,265.445549 218.59484,292.349181 229.762395,295.657719 L75.4583431,295.657719 C86.6258983,292.349181 95.4501298,265.445549 96.1814051,232 Z" id="stand-2" stroke="#979797" fill="#BFBFBF"></path>
                <g id="bottom" transform="translate(0.000000, 180.000000)">
                    <path d="M305,80 L304.37651,83.855957 C303.158293,88.234375 300.429652,91 297.674119,91 L7.86552367,91 C5.10834155,91 3.04749434,87.6635742 0.760228333,83.855957 L0,80 L305,80 Z" id="base2" fill="#979797"></path>
                    <path d="M19.5759368,8.21756494 C20.6439609,3.93114355 25.0970893,0.456312442 29.5107025,0.456312442 L274.295938,0.456312442 C278.714734,0.456312442 283.223197,3.91567564 284.364984,8.17969201 L303.135013,78.2766204 C304.277198,82.5421252 301.618951,86 297.20168,86 L8.19675414,86 C3.77767995,86 1.060589,82.5272887 2.12914137,78.2387475 L19.5759368,8.21756494 Z" id="base" stroke="#979797" stroke-width="3" fill="#D8D8D8"></path>
                    <path d="M112.129065,57.8050223 C112.435076,55.6179059 114.4713,53.8448978 116.686311,53.8448978 L187.22739,53.8448978 C189.438277,53.8448978 191.51656,55.6069724 191.87107,57.7911092 L194.703793,75.2434844 C195.05754,77.4229168 193.543747,79.1896959 191.344964,79.1896958 L113.13637,79.1896949 C110.927593,79.1896949 109.386382,77.4074979 109.691107,75.2295703 L112.129065,57.8050223 Z" id="trackpad" stroke="#BDBDBD"></path>
                    <g id="keyboard" transform="translate(32.000000, 12.000000)">
                        <g id="Group-3" transform="translate(5.640000, 0.000000)">
                            <mask id="mask-2" sketch:name="Clip 2" fill="white">
                                <use xlink:href="#path-1"></use>
                            </mask>
                            <g id="Clip-2"></g>
                            <path d="M-0.0047,-3.67863158 L25.7043,-3.67863158 L20.78622,17.3710263 L-6.49258,17.3710263 L-0.0047,-3.67863158" id="Fill-1" fill="#2C2C29" mask="url(#mask-2)"></path>
                        </g>
                        <g id="Group-6" transform="translate(28.200000, 0.000000)">
                            <mask id="mask-4" sketch:name="Clip 5" fill="white">
                                <use xlink:href="#path-3"></use>
                            </mask>
                            <g id="Clip-5"></g>
                            <path d="M-1.17312,-3.67863158 L24.53682,-3.67863158 L20.92346,17.3710263 L-6.35534,17.3710263 L-1.17312,-3.67863158" id="Fill-4" fill="#2C2C29" mask="url(#mask-4)"></path>
                        </g>
                        <g id="Group-9" transform="translate(50.760000, 0.000000)">
                            <mask id="mask-6" sketch:name="Clip 8" fill="white">
                                <use xlink:href="#path-5"></use>
                            </mask>
                            <g id="Clip-8"></g>
                            <path d="M-1.41094,-3.67863158 L24.29806,-3.67863158 L22.0477,17.3710263 L-5.23016,17.3710263 L-1.41094,-3.67863158" id="Fill-7" fill="#2C2C29" mask="url(#mask-6)"></path>
                        </g>
                        <g id="Group-12" transform="translate(213.380000, 17.368421)">
                            <mask id="mask-8" sketch:name="Clip 11" fill="white">
                                <use xlink:href="#path-7"></use>
                            </mask>
                            <g id="Clip-11"></g>
                            <path d="M-5.93046,-3.4485 L21.09078,-3.4485 L28.9755,19.8764211 L0.21526,19.8764211 L-5.93046,-3.4485" id="Fill-10" fill="#2C2C29" mask="url(#mask-8)"></path>
                        </g>
                        <g id="Group-15" transform="translate(190.820000, 17.368421)">
                            <mask id="mask-10" sketch:name="Clip 14" fill="white">
                                <use xlink:href="#path-9"></use>
                            </mask>
                            <g id="Clip-14"></g>
                            <path d="M-5.85432,-3.4485 L21.16786,-3.4485 L27.60498,19.8764211 L-1.15338,19.8764211 L-5.85432,-3.4485" id="Fill-13" fill="#2C2C29" mask="url(#mask-10)"></path>
                        </g>
                        <g id="Group-18" transform="translate(167.320000, 17.368421)">
                            <mask id="mask-12" sketch:name="Clip 17" fill="white">
                                <use xlink:href="#path-11"></use>
                            </mask>
                            <g id="Clip-17"></g>
                            <path d="M-5.8139,-3.4485 L21.2064,-3.4485 L26.13482,19.8764211 L-2.62448,19.8764211 L-5.8139,-3.4485" id="Fill-16" fill="#2C2C29" mask="url(#mask-12)"></path>
                        </g>
                        <g id="Group-21" transform="translate(142.880000, 17.368421)">
                            <mask id="mask-14" sketch:name="Clip 20" fill="white">
                                <use xlink:href="#path-13"></use>
                            </mask>
                            <g id="Clip-20"></g>
                            <path d="M-4.83536,-3.4485 L22.18588,-3.4485 L25.60372,19.8764211 L-3.15558,19.8764211 L-4.83536,-3.4485" id="Fill-19" fill="#2C2C29" mask="url(#mask-14)"></path>
                        </g>
                        <g id="Group-24" transform="translate(120.320000, 17.368421)">
                            <mask id="mask-16" sketch:name="Clip 23" fill="white">
                                <use xlink:href="#path-15"></use>
                            </mask>
                            <g id="Clip-23"></g>
                            <path d="M-4.75922,-3.4485 L22.26202,-3.4485 L24.23414,19.8764211 L-4.5261,19.8764211 L-4.75922,-3.4485" id="Fill-22" fill="#2C2C29" mask="url(#mask-16)"></path>
                        </g>
                        <g id="Group-27" transform="translate(95.880000, 17.368421)">
                            <mask id="mask-18" sketch:name="Clip 26" fill="white">
                                <use xlink:href="#path-17"></use>
                            </mask>
                            <g id="Clip-26"></g>
                            <path d="M-3.77974,-3.4485 L23.2415,-3.4485 L23.70398,19.8764211 L-5.05626,19.8764211 L-3.77974,-3.4485" id="Fill-25" fill="#2C2C29" mask="url(#mask-18)"></path>
                        </g>
                        <g id="Group-30" transform="translate(71.440000, 17.368421)">
                            <mask id="mask-20" sketch:name="Clip 29" fill="white">
                                <use xlink:href="#path-19"></use>
                            </mask>
                            <g id="Clip-29"></g>
                            <path d="M-2.8012,-3.4485 L24.22004,-3.4485 L23.17288,19.8764211 L-5.58736,19.8764211 L-2.8012,-3.4485" id="Fill-28" fill="#2C2C29" mask="url(#mask-20)"></path>
                        </g>
                        <g id="Group-33" transform="translate(47.940000, 17.368421)">
                            <mask id="mask-22" sketch:name="Clip 32" fill="white">
                                <use xlink:href="#path-21"></use>
                            </mask>
                            <g id="Clip-32"></g>
                            <path d="M-1.78412,-3.4485 L25.23712,-3.4485 L22.74236,19.8764211 L-6.01694,19.8764211 L-1.78412,-3.4485" id="Fill-31" fill="#2C2C29" mask="url(#mask-22)"></path>
                        </g>
                        <g id="Group-36" transform="translate(23.500000, 17.368421)">
                            <mask id="mask-24" sketch:name="Clip 35" fill="white">
                                <use xlink:href="#path-23"></use>
                            </mask>
                            <g id="Clip-35"></g>
                            <path d="M-0.80558,-3.4485 L26.21566,-3.4485 L22.2122,19.8764211 L-6.54804,19.8764211 L-0.80558,-3.4485" id="Fill-34" fill="#2C2C29" mask="url(#mask-24)"></path>
                        </g>
                        <g id="Group-39" transform="translate(0.000000, 17.368421)">
                            <mask id="mask-26" sketch:name="Clip 38" fill="white">
                                <use xlink:href="#path-25"></use>
                            </mask>
                            <g id="Clip-38"></g>
                            <path d="M0.08178,-3.36252632 L27.14908,-3.53447368 L21.91422,19.7782895 L-6.89772,19.9736842 L0.08178,-3.36252632" id="Fill-37" fill="#2C2C29" mask="url(#mask-26)"></path>
                        </g>
                        <g id="Group-42" transform="translate(208.680000, 0.000000)">
                            <mask id="mask-28" sketch:name="Clip 41" fill="white">
                                <use xlink:href="#path-27"></use>
                            </mask>
                            <g id="Clip-41"></g>
                            <path d="M-5.86748,-3.67863158 L19.84058,-3.67863158 L26.95732,17.3710263 L-0.32148,17.3710263 L-5.86748,-3.67863158" id="Fill-40" fill="#2C2C29" mask="url(#mask-28)"></path>
                        </g>
                        <g id="Group-45" transform="translate(187.060000, 0.000000)">
                            <mask id="mask-30" sketch:name="Clip 44" fill="white">
                                <use xlink:href="#path-29"></use>
                            </mask>
                            <g id="Clip-44"></g>
                            <path d="M-5.64,-3.67863158 L20.06994,-3.67863158 L25.87914,17.3710263 L-1.39872,17.3710263 L-5.64,-3.67863158" id="Fill-43" fill="#2C2C29" mask="url(#mask-30)"></path>
                        </g>
                        <g id="Group-48" transform="translate(164.500000, 0.000000)">
                            <mask id="mask-32" sketch:name="Clip 47" fill="white">
                                <use xlink:href="#path-31"></use>
                            </mask>
                            <g id="Clip-47"></g>
                            <path d="M-5.40124,-3.67863158 L20.30682,-3.67863158 L24.7549,17.3710263 L-2.52296,17.3710263 L-5.40124,-3.67863158" id="Fill-46" fill="#2C2C29" mask="url(#mask-32)"></path>
                        </g>
                        <g id="Group-51" transform="translate(141.000000, 0.000000)">
                            <mask id="mask-34" sketch:name="Clip 50" fill="white">
                                <use xlink:href="#path-33"></use>
                            </mask>
                            <g id="Clip-50"></g>
                            <path d="M-4.22342,-3.67863158 L21.48464,-3.67863158 L24.5716,17.3710263 L-2.7072,17.3710263 L-4.22342,-3.67863158" id="Fill-49" fill="#2C2C29" mask="url(#mask-34)"></path>
                        </g>
                        <g id="Group-54" transform="translate(119.380000, 0.000000)">
                            <mask id="mask-36" sketch:name="Clip 53" fill="white">
                                <use xlink:href="#path-35"></use>
                            </mask>
                            <g id="Clip-53"></g>
                            <path d="M-3.995,-3.67863158 L21.714,-3.67863158 L23.49342,17.3710263 L-3.7835,17.3710263 L-3.995,-3.67863158" id="Fill-52" fill="#2C2C29" mask="url(#mask-36)"></path>
                        </g>
                        <g id="Group-57" transform="translate(96.820000, 0.000000)">
                            <mask id="mask-38" sketch:name="Clip 56" fill="white">
                                <us
!

CSS 

              
                svg {
  max-height: 300px;
}
!

JS 

              
                // "Type out" code in the ide
function showcode(i) {
	// clr ide screen
  $('#codegroup1').children().hide();
  $('#codegroup2').children().hide();
  
	// type out the code groups  
  setTimeout(function(){
    $('#codegroup1').children().each(function(i){
      $(this).delay(100*i).show(0);
    });
  }, 500);
  
  setTimeout(function(){
    $('#codegroup2').children().each(function(i){
      $(this).delay(100*i).show(0);
    });
  },5000);
  
  setTimeout(function(){
    showcode();
  },12000);
}
showcode(1);

// animate desktop bulb 
$('#bulb-desktop')
  .velocity({
  	translateZ: 0,
  	translateX: [-35,49],
  	translateY: [22,55],
  	scale: '150%'
	}, {
  	loop: true,
  	delay: 20000
	})
	.velocity('reverse')
;


var contentScrollDelay = 10000;

// animate laptop content
var $bL = $('#laptop-content');
$bL.velocity({
  translateY: -20
}, {
  loop: true,
  delay: contentScrollDelay
});

// animate phone content
var $bP = $('#phone-content');
$bP.velocity({
  translateY: -10
}, {
  loop: true,
  delay: contentScrollDelay
});
!
999px

Console