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.

            
              <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">
                                <use xlink:href="#path-37"></use>
                            </mask>
                            <g id="Clip-56"></g>
                            <path d="M-3.75718,-3.67863158 L21.95276,-3.67863158 L22.37012,17.3710263 L-4.90962,17.3710263 L-3.75718,-3.67863158" id="Fill-55" fill="#2C2C29" mask="url(#mask-38)"></path>
                        </g>
                        <g id="Group-60" transform="translate(73.320000, 0.000000)">
                            <mask id="mask-40" sketch:name="Clip 59" fill="white">
                                <use xlink:href="#path-39"></use>
                            </mask>
                            <g id="Clip-59"></g>
                            <path d="M-2.57936,-3.67863158 L23.12964,-3.67863158 L22.18494,17.3710263 L-5.09386,17.3710263 L-2.57936,-3.67863158" id="Fill-58" fill="#2C2C29" mask="url(#mask-40)"></path>
                        </g>
                    </g>
                </g>
                <g id="top" transform="translate(21.000000, 0.000000)">
                    <rect id="frame-2" stroke="#979797" stroke-width="3" fill="#D8D8D8" x="0.509765625" y="0.0390625" width="260.787109" height="175.441406" rx="8"></rect>
                    <rect id="screen-2" fill="#111111" x="14.9508648" y="14.0632188" width="231.904911" height="147.393094" rx="2"></rect>
                    <g id="browser" transform="translate(17.000000, 17.000000)">
                        <rect id="window" fill="#FFFFFF" x="0.73046875" y="17" width="226.292969" height="125"></rect>
                        <g id="laptop-content">
                            <g id="hero-4" transform="translate(42.000000, 93.000000)">
                                <rect id="hero" fill="#70CBF6" x="0" y="0" width="42" height="34"></rect>
                                <path d="M3.71963206,9 L31.1612903,9" id="Path-195" stroke="#63B1D6" stroke-width="4"></path>
                                <path d="M3.71963206,17 L36.1290323,17" id="Path-196" stroke="#63B1D6" stroke-width="4"></path>
                                <path d="M3.71963206,25 L25.7419355,25" id="Path-197" stroke="#63B1D6" stroke-width="4"></path>
                            </g>
                            <g id="hero-5" transform="translate(92.000000, 93.000000)">
                                <rect id="hero" fill="#485761" x="0" y="0" width="42" height="34"></rect>
                                <path d="M3.71963206,9 L31.1612903,9" id="Path-195" stroke="#637079" stroke-width="4"></path>
                                <path d="M3.71963206,17 L36.1290323,17" id="Path-196" stroke="#637079" stroke-width="4"></path>
                                <path d="M3.71963206,25 L25.7419355,25" id="Path-197" stroke="#637079" stroke-width="4"></path>
                            </g>
                            <g id="hero-6" transform="translate(142.000000, 93.000000)">
                                <rect id="hero" fill="#74D591" x="0" y="0" width="42" height="34"></rect>
                                <path d="M3.71963206,9 L31.1612903,9" id="Path-195" stroke="#64BA80" stroke-width="4"></path>
                                <path d="M3.71963206,17 L36.1290323,17" id="Path-196" stroke="#64BA80" stroke-width="4"></path>
                                <path d="M3.71963206,25 L25.7419355,25" id="Path-197" stroke="#64BA80" stroke-width="4"></path>
                            </g>
                            <g id="bulb-laptop" transform="translate(45.000000, 40.000000)">
                                <path d="M29.890947,15.1517784 C29.7606938,19.6737151 27.0891178,22.8645558 24.6484849,25.9115513 C23.9085482,26.8353612 23.1912065,27.7504291 22.5733584,28.6926734 L22.5734153,28.6926354 C21.4531622,30.4007621 20.6519533,32.1490074 20.6519533,34.2488173 L20.640409,34.2487603 L20.6490775,39.2862707 C20.6490775,39.2862707 16.5510396,41.9786418 15.0003433,41.9786418 C13.4496471,41.9786418 9.35160917,39.2862707 9.35160917,39.2862707 L9.35160917,34.2975829 C9.35160917,32.2025241 8.55382753,30.3596743 7.43736234,28.6549685 L5.36388765,25.9118363 L5.36383069,25.9116653 C2.8730712,22.8019549 0.132628158,19.5930409 0.107944614,14.9194481 C0.400539551,6.68421733 6.95478006,0.0419458371 15.0002864,0.0419458371 C23.0530079,0.0419458371 29.6106661,6.63879652 29.8918687,14.8848599 L29.890947,15.1517746 L29.890947,15.1517784 Z" id="Shape" fill="#FFFFFF"></path>
                                <path d="M9.35157056,33.7273288 L21.1436005,32.4048072" id="Shape" stroke="#E2E2E2"></path>
                                <path d="M9.35157056,34.2974646 L21.1436005,32.9749429" id="Shape" stroke="#171C1F"></path>
                                <path d="M9.35157056,36.3879623 L20.7123709,35.0955514" id="Shape" stroke="#E2E2E2"></path>
                                <path d="M9.35157056,36.9580981 L20.7123709,35.6656872" id="Shape" stroke="#171C1F"></path>
                                <path d="M9.87765262,38.9907157 L20.7123897,37.791364" id="Shape" stroke="#E2E2E2"></path>
                                <path d="M9.87765262,39.5608515 L20.7123897,38.3614997" id="Shape" stroke="#171C1F"></path>
                                <path d="M29.890947,15.1517784 C29.7606938,19.6737151 27.0891178,22.8645558 24.6484849,25.9115513 C23.9085482,26.8353612 23.1912065,27.7504291 22.5733584,28.6926734 L22.5734153,28.6926354 C22.0482976,29.4933189 21.593283,30.3028185 21.258033,31.1532083 C19.0814951,31.2023929 11.0800394,31.1221623 8.74315329,31.1372692 C8.40695203,30.257449 7.95813684,29.4445779 7.43737101,28.6549551 L5.36389633,25.911823 L5.36383937,25.911652 C2.87307987,22.8019416 0.132636835,19.5930275 0.107953291,14.9194348 C0.400548228,6.68420401 6.95478873,0.0419325149 15.0002951,0.0419325149 C23.0530166,0.0419325149 29.6106748,6.63878319 29.8918773,14.8848465 L29.8909556,15.1517613 L29.890947,15.1517784 Z" id="Shape" fill="#F6C708"></path>
                                <path d="M29.890947,15.1517784 C29.7606938,19.6737151 27.0891178,22.8645558 24.6484849,25.9115513 C23.9085482,26.8353612 23.1912065,27.7504291 22.5733584,28.6926734 L22.5734153,28.6926354 C21.4531622,30.4007621 20.6519533,32.1490074 20.6519533,34.2488173 L20.640409,34.2487603 L20.6490775,39.2862707 C20.6490775,39.2862707 16.5510396,41.9786418 15.0003433,41.9786418 C13.4496471,41.9786418 9.35160917,39.2862707 9.35160917,39.2862707 L9.35160917,34.2975829 C9.35160917,32.2025241 8.55382753,30.3596743 7.43736234,28.6549685 L5.36388765,25.9118363 L5.36383069,25.9116653 C2.8730712,22.8019549 0.132628158,19.5930409 0.107944614,14.9194481 C0.400539551,6.68421733 6.95478006,0.0419458371 15.0002864,0.0419458371 C23.0530079,0.0419458371 29.6106661,6.63879652 29.8918687,14.8848599 L29.890947,15.1517746 L29.890947,15.1517784 Z" id="Shape" stroke="#171C1F" stroke-width="2" stroke-linejoin="round"></path>
                                <path d="M27.0084826,15.8323836 C26.9034425,20.1598121 24.7490008,23.2134008 22.7807987,26.1293318 C22.1840908,27.0134047 21.6056042,27.8891115 21.1073523,28.7908258 L21.1073983,28.7907894 C20.6839271,29.557032 20.3169892,30.3317115 20.0466332,31.1455223 C18.2914055,31.1925913 11.8387836,31.1158118 9.95424624,31.1302688 C9.68312312,30.2882935 9.32118464,29.5103876 8.90122293,28.7547299 L7.22910867,26.1295918 L7.22906274,26.1294282 C5.22043707,23.1534799 3.01045885,20.0825953 2.99055327,15.6100341 C3.2265109,7.72903639 8.51205363,1.3724779 15.0001993,1.3724779 C21.4941636,1.3724779 26.7824625,7.68556932 27.0092329,15.5769336 L27.0084896,15.8323672 L27.0084826,15.8323836 Z" id="front" fill="#FADB62"></path>
                                <path d="M8.85609099,31 L21.143543,31" id="Shape" stroke="#171C1F"></path>
                                <path d="M12.7213291,31.2074253 L12.7213291,19.8047104 C12.7213291,19.8047104 10.4428481,19.5812286 10.4428481,20.9449819 C10.4428481,22.3087352 12.7213291,22.0852534 12.7213291,22.0852534 L17.2782911,22.0852534 C17.2782911,22.0852534 19.5567722,22.4552145 19.5567722,20.9449819 C19.5567722,19.4347493 17.2782911,19.8047104 17.2782911,19.8047104 L17.2782911,31.2074253" id="Shape" stroke="#171C1F"></path>
                            </g>
                            <g id="hero" transform="translate(90.000000, 30.000000)">
                                <rect fill="#E57172" x="0" y="15" width="93" height="34"></rect>
                                <path d="M8.23632812,24 L69,24" id="Path-195" stroke="#D25F60" stroke-width="4"></path>
                                <path d="M8.23632812,32 L80,32" id="Path-196" stroke="#D25F60" stroke-width="4"></path>
                                <path d="M8.23632812,40 L57,40" id="Path-197" stroke="#D25F60" stroke-width="4"></path>
                                <path d="M32.2363281,1 L93,1" id="Path-194" stroke="#979797" stroke-width="4"></path>
                            </g>
                            <rect id="content-frame" x="0.73046875" y="0" width="226.292969" height="142"></rect>
                        </g>
                        <g id="console" transform="translate(1.000000, 107.000000)">
                            <rect id="panel" fill="#0A1D33" x="0" y="1" width="226" height="34"></rect>
                            <path d="M186,0.985135972 L186,34.6308594" id="Path-2" stroke="#21344B" stroke-width="8"></path>
                            <g id="log" transform="translate(6.000000, 7.000000)" stroke-width="4">
                                <path d="M79.2363281,1 L106.147839,1" id="Path-173" stroke="#A4CD4C"></path>
                                <path d="M119.236328,10 L135.031687,10" id="Path-175" stroke="#F8E81C"></path>
                                <path d="M99.2363281,10 L115.031687,10" id="Path-176" stroke="#A4CD4C"></path>
                                <path d="M75.2363281,23 L91.0316868,23" id="Path-177" stroke="#D0011B"></path>
                                <path d="M0.236328125,22 L59.0765266,22" id="Path-180" stroke="#54B5DB"></path>
                                <path d="M189.236328,21 L218.069448,21" id="Path-181" stroke="#D0011B"></path>
                                <path d="M189.236328,12 L197.559464,12" id="Path-184" stroke="#979797"></path>
                                <path d="M208,3 L216.046352,3" id="Path-174" stroke="#54B5DB"></path>
                                <path d="M189.236328,3 L205.031687,3" id="Path-183" stroke="#A4CD4C"></path>
                                <path d="M57.2363281,1 L68.0463524,1" id="Path-182" stroke="#F8E81C"></path>
                                <path d="M34.2363281,1 L50.0316868,1" id="Path-186" stroke="#A4CD4C"></path>
                                <path d="M16.7363281,13 L75.5765266,13" id="Path-187" stroke="#F8E81C"></path>
                                <path d="M6.23632812,8 L14.5594645,8" id="Path-188" stroke="#979797"></path>
                                <path d="M0.236328125,1 L30,1" id="Path-189" stroke="#54B5DB"></path>
                                <path d="M131.236328,1 L147.031687,1" id="Path-190" stroke="#D0011B"></path>
                                <path d="M115.236328,1 L126.046352,1" id="Path-191" stroke="#A4CD4C"></path>
                            </g>
                        </g>
                        <rect id="Rectangle-6" fill="#D2D2D2" x="0.73046875" y="0" width="226.292969" height="19"></rect>
                        <path d="M10.4864445,6 L10.4864445,6 C9.18282123,6 8.12694539,7.0528 8.12694539,8.35 C8.12694539,9.648375 9.18282123,10.7 10.4864445,10.7 C11.7900677,10.7 12.8459436,9.648375 12.8459436,8.35 C12.8459436,7.0528 11.7900677,6 10.4864445,6 M17.5649417,6 L17.5649417,6 C16.2613185,6 15.2054427,7.0528 15.2054427,8.35 C15.2054427,9.648375 16.2613185,10.7 17.5649417,10.7 C18.868565,10.7 19.9244408,9.648375 19.9244408,8.35 C19.9244408,7.0528 18.868565,6 17.5649417,6 M24.643439,6 L24.643439,6 C23.3398158,6 22.2839399,7.0528 22.2839399,8.35 C22.2839399,9.648375 23.3398158,10.7 24.643439,10.7 C25.9470623,10.7 27.0029381,9.648375 27.0029381,8.35 C27.0029381,7.0528 25.9470623,6 24.643439,6" id="Fill-27" fill="#9F9F9F"></path>
                        <rect id="addressbar" fill="#EEEEEE" x="37" y="5" width="177" height="7"></rect>
                    </g>
                </g>
            </g>
            <g id="phone" transform="translate(385.000000, 237.000000)">
                <rect id="phone-body" stroke="#979797" stroke-width="3" fill="#F9F9F9" x="0" y="1" width="48" height="90" rx="4"></rect>
                <rect id="phone-window" fill="#FFFFFF" x="4" y="10" width="40" height="73" rx="2"></rect>
                <g id="phone-content">
                    <g id="bulb-phone" transform="translate(17.000000, 19.000000)">
                        <path d="M13.9491086,7.21513258 C13.8883238,9.36843575 12.6415883,10.8878837 11.5026263,12.3388339 C11.1573225,12.7787434 10.822563,13.21449 10.5342339,13.6631778 L10.5342605,13.6631597 C10.0114757,14.4765534 9.6375782,15.3090511 9.6375782,16.3089606 L9.63219086,16.3089335 L9.63623618,18.707748 C9.63623618,18.707748 7.72381846,19.9898294 7.00016023,19.9898294 C6.276502,19.9898294 4.36408428,18.707748 4.36408428,18.707748 L4.36408428,16.3321824 C4.36408428,15.3345353 3.99178618,14.4569878 3.47076909,13.6452231 L2.50314757,12.3389697 L2.50312099,12.3388882 C1.34076656,10.8580738 0.0618931405,9.33001946 0.0503741532,7.1044991 C0.186918457,3.18296063 3.24556403,0.0199742081 7.00013365,0.0199742081 C10.7580704,0.0199742081 13.8183109,3.16133167 13.9495387,7.08802851 L13.9491086,7.21513077 L13.9491086,7.21513258 Z" id="Shape" fill="#FFFFFF"></path>
                        <path d="M4.36406626,16.0606328 L9.86701355,15.4308606" id="Shape" stroke="#E2E2E2" stroke-width="0.5"></path>
                        <path d="M4.36406626,16.332126 L9.86701355,15.7023538" id="Shape" stroke="#171C1F" stroke-width="0.5"></path>
                        <path d="M4.36406626,17.3276011 L9.66577308,16.7121674" id="Shape" stroke="#E2E2E2" stroke-width="0.5"></path>
                        <path d="M4.36406626,17.5990943 L9.66577308,16.9836606" id="Shape" stroke="#171C1F" stroke-width="0.5"></path>
                        <path d="M4.60957122,18.5670075 L9.66578184,17.9958876" id="Shape" stroke="#E2E2E2" stroke-width="0.5"></path>
                        <path d="M4.60957122,18.8385007 L9.66578184,18.2673808" id="Shape" stroke="#171C1F" stroke-width="0.5"></path>
                        <path d="M13.9491086,7.21513258 C13.8883238,9.36843575 12.6415883,10.8878837 11.5026263,12.3388339 C11.1573225,12.7787434 10.822563,13.21449 10.5342339,13.6631778 L10.5342605,13.6631597 C10.2892055,14.0444376 10.0768654,14.4299136 9.92041542,14.8348611 C8.9046977,14.8582824 5.17068504,14.8200773 4.0801382,14.827271 C3.92324428,14.408309 3.71379719,14.0212276 3.47077314,13.6452167 L2.50315162,12.3389633 L2.50312504,12.3388819 C1.34077061,10.8580674 0.0618971899,9.33001311 0.0503782025,7.10449275 C0.186922506,3.18295429 3.24556808,0.0199678643 7.0001377,0.0199678643 C10.7580744,0.0199678643 13.8183149,3.16132533 13.9495428,7.08802216 L13.9491126,7.21512443 L13.9491086,7.21513258 Z" id="Shape" fill="#F6C708"></path>
                        <path d="M13.9491086,7.21513258 C13.8883238,9.36843575 12.6415883,10.8878837 11.5026263,12.3388339 C11.1573225,12.7787434 10.822563,13.21449 10.5342339,13.6631778 L10.5342605,13.6631597 C10.0114757,14.4765534 9.6375782,15.3090511 9.6375782,16.3089606 L9.63219086,16.3089335 L9.63623618,18.707748 C9.63623618,18.707748 7.72381846,19.9898294 7.00016023,19.9898294 C6.276502,19.9898294 4.36408428,18.707748 4.36408428,18.707748 L4.36408428,16.3321824 C4.36408428,15.3345353 3.99178618,14.4569878 3.47076909,13.6452231 L2.50314757,12.3389697 L2.50312099,12.3388882 C1.34076656,10.8580738 0.0618931405,9.33001946 0.0503741532,7.1044991 C0.186918457,3.18296063 3.24556403,0.0199742081 7.00013365,0.0199742081 C10.7580704,0.0199742081 13.8183109,3.16133167 13.9495387,7.08802851 L13.9491086,7.21513077 L13.9491086,7.21513258 Z" id="Shape" stroke="#171C1F" stroke-linejoin="round"></path>
                        <path d="M12.6039586,7.53923028 C12.5549398,9.59991051 11.5495337,11.0540004 10.6310394,12.4425389 C10.3525757,12.863526 10.0826153,13.2805293 9.85009776,13.709917 L9.8501192,13.7098997 C9.6524993,14.0747771 9.48126164,14.4436721 9.35509551,14.8312011 C8.53598925,14.8536149 5.52476569,14.8170532 4.64531491,14.8239375 C4.51879079,14.4229969 4.34988616,14.0525655 4.15390404,13.6927285 L3.37358405,12.4426628 L3.37356261,12.4425848 C2.43620396,11.0254666 1.4048808,9.5631406 1.39559153,7.43334955 C1.50570509,3.68049352 3.97229169,0.653560903 7.00009303,0.653560903 C10.0306097,0.653560903 12.4984825,3.65979492 12.6043087,7.41758743 L12.6039618,7.53922247 L12.6039586,7.53923028 Z" id="front" fill="#FADB62"></path>
                        <path d="M4.45431849,15 L9.8718208,15" id="Shape" stroke="#171C1F" stroke-width="0.5"></path>
                        <path d="M5.93662025,14.8606787 L5.93662025,9.43081448 C5.93662025,9.43081448 4.87332911,9.32439457 4.87332911,9.9738009 C4.87332911,10.6232072 5.93662025,10.5167873 5.93662025,10.5167873 L8.06320253,10.5167873 C8.06320253,10.5167873 9.12649367,10.6929593 9.12649367,9.9738009 C9.12649367,9.25464253 8.06320253,9.43081448 8.06320253,9.43081448 L8.06320253,14.8606787" id="Shape" stroke="#171C1F" stroke-width="0.5"></path>
                    </g>
                    <g id="hero-2" transform="translate(8.000000, 46.000000)">
                        <rect id="hero" fill="#E57172" x="0" y="0" width="33" height="17"></rect>
                        <path d="M2.92256804,3.54166667 L24.483871,3.54166667" id="Path-195" stroke="#D25F60"></path>
                        <path d="M2.92256804,7.79166667 L28.3870968,7.79166667" id="Path-196" stroke="#D25F60"></path>
                        <path d="M2.92256804,12.0416667 L20.2258065,12.0416667" id="Path-197" stroke="#D25F60"></path>
                    </g>
                    <g id="hero-3" transform="translate(8.000000, 66.000000)">
                        <rect id="hero" fill="#70CBF6" x="0" y="0" width="33" height="17"></rect>
                        <path d="M2.92256804,3.54166667 L24.483871,3.54166667" id="Path-195" stroke="#63B1D6"></path>
                        <path d="M2.92256804,7.79166667 L28.3870968,7.79166667" id="Path-196" stroke="#63B1D6"></path>
                        <path d="M2.92256804,12.0416667 L20.2258065,12.0416667" id="Path-197" stroke="#63B1D6"></path>
                    </g>
                    <g id="hero-7" transform="translate(8.000000, 86.000000)">
                        <rect id="hero" fill="#485761" x="0" y="0" width="33" height="7"></rect>
                        <path d="M2.92256804,3.54166667 L24.483871,3.54166667" id="Path-195" stroke="#637079"></path>
                        <path d="M2.92256804,5.79166667 L28.3870968,5.79166667" id="Path-196" stroke="#637079"></path>
                    </g>
                    <rect id="phone-content-frame" x="0" y="0" width="48" height="93"></rect>
                </g>
                <path d="M0,4.99793926 C0,2.78993837 1.79405245,1 4.00989318,1 L43.9901068,1 C46.2047097,1 48,2.79778412 48,4.99793926 L48,87.0020607 C48,89.2100616 46.2059475,91 43.9901068,91 L4.00989318,91 C1.79529033,91 0,89.2022159 0,87.0020607 L0,4.99793926 Z M4,11.9904333 C4,10.8911474 4.89153983,10 5.99729162,10 L42.0027084,10 C43.1057821,10 44,10.896653 44,11.9904333 L44,81.0095667 C44,82.1088526 43.1084602,83 42.0027084,83 L5.99729162,83 C4.89421792,83 4,82.103347 4,81.0095667 L4,11.9904333 Z" id="phone-body-front" fill="#F9F9F9"></path>
                <rect id="phone-window-front" stroke="#626262" x="4" y="10" width="40" height="73" rx="2"></rect>
                <rect id="phone-outline" stroke="#979797" stroke-width="3" x="0" y="1" width="48" height="90" rx="4"></rect>
                <rect id="phone-titlebar" fill="#D2D2D2" x="4" y="10" width="40" height="4"></rect>
            </g>
        </g>
    </g>
</svg>
            
          
!
            
              // "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
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console