cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-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.

            
              
<div class="scr-container">
  
  <div id="1" data-scrnext="2" class="scr load">
    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 1100 933" style="enable-background:new 0 0 1100 933;" xml:space="preserve">

      <g id="page-example-1">
        
        <g id="page-heading-1_1_">
          <text id="text_5_" transform="matrix(1 0 0 1 21.5442 103.9872)" style="font-family:'Helvetica'; font-size:22px;">People</text>
          <line id="underline_1_" style="fill:none;stroke:#808080;" x1="21.5" y1="115" x2="704.8" y2="115"/>
        </g>
        <g id="page-content-1_1_">
          <g id="image-placeholder_1_">
            <g id="image_1_">
              <path style="fill:#FFFFFF;" d="M977.2,411.4c0,3-2.5,5.5-5.5,5.5h-260c-3,0-5.5-2.5-5.5-5.5v-260c0-3,2.5-5.5,5.5-5.5h260
                c3,0,5.5,2.5,5.5,5.5V411.4z"/>
              <path style="fill:#EEEEEE;" d="M972.2,411.9c0,0.6-0.4,1-1,1h-260c-0.6,0-1-0.4-1-1v-260c0-0.6,0.4-1,1-1h260c0.6,0,1,0.4,1,1
                V411.9z"/>
              <path style="fill:#DDDDDD;" d="M971.7,146.9c2.8,0,5.5,2.2,5.5,4.9v260.4c0,2.8-2.7,4.7-5.5,4.7H711.3c-2.8,0-5.1-1.9-5.1-4.7
                V151.8c0-2.8,2.4-4.9,5.1-4.9h260.9 M971.7,145.9H711.3c-3.3,0-6.1,2.6-6.1,5.9v260.4c0,3.3,2.8,5.7,6.1,5.7h260.4
                c3.3,0,6.5-2.4,6.5-5.7V151.8C978.2,148.5,975.1,145.9,971.7,145.9L971.7,145.9z"/>
            </g>

              <text id="text_4_" transform="matrix(1 0 0 1 809.4075 288.2982)" style="fill:#BFBFBF; font-family:'Helvetica'; font-size:22px;">Image</text>
          </g>
          <rect x="23.6" y="230.6" style="fill:none;" width="655" height="433.4"/>
          <text id="text_3_" transform="matrix(1 0 0 1 23.5637 242.081)"><tspan x="0" y="0" style="font-family:'Helvetica'; font-size:16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil facere maiores enim in ipsam, </tspan><tspan x="0" y="19.2" style="font-family:'Helvetica'; font-size:16px;">vero dignissimos reprehenderit veniam nisi, dolores quam culpa repellat molestias voluptate </tspan><tspan x="0" y="38.4" style="font-family:'Helvetica'; font-size:16px;">aliquam veritatis, magni quisquam impedit.</tspan><tspan x="0" y="76.8" style="font-family:'Helvetica'; font-size:16px;">Nihil facere maiores enim in ipsam, vero dignissimos reprehenderit veniam nisi, dolores </tspan><tspan x="0" y="96" style="font-family:'Helvetica'; font-size:16px;">quam culpa repellat molestias voluptate aliquam veritatis, magni quisquam impedit. Lorem </tspan><tspan x="0" y="115.2" style="font-family:'Helvetica'; font-size:16px;">ipsum dolor sit amet, consectetur adipisicing elit.</tspan><tspan x="0" y="156" style="font-family:'Helvetica-Bold'; font-size:18px;">Sub Heading</tspan><tspan x="0" y="194.4" style="font-family:'Helvetica'; font-size:16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil facere maiores enim in ipsam, </tspan><tspan x="0" y="213.6" style="font-family:'Helvetica'; font-size:16px;">vero dignissimos reprehenderit veniam nisi, dolores quam culpa repellat molestias voluptate </tspan><tspan x="0" y="232.8" style="font-family:'Helvetica'; font-size:16px;">aliquam veritatis, magni quisquam impedit.</tspan><tspan x="0" y="271.2" style="font-family:'Helvetica'; font-size:16px;">Nihil facere maiores enim in ipsam, vero dignissimos reprehenderit veniam nisi, dolores </tspan><tspan x="0" y="290.4" style="font-family:'Helvetica'; font-size:16px;">quam culpa repellat molestias voluptate aliquam veritatis, magni quisquam impedit. Lorem </tspan><tspan x="0" y="309.6" style="font-family:'Helvetica'; font-size:16px;">ipsum dolor sit amet, consectetur adipisicing elit.</tspan></text>
          <g id="form_1_">
            <g id="btn-primary-1_1_">
              <text transform="matrix(1 0 0 1 141.5608 187.9565)" style="font-family:'Helvetica-Bold'; font-size:14px;">Button</text>
              <path style="fill:#3E8ACC;" d="M126.6,195.7c0,2.2,1.8,4,4,4h67.1c2.2,0,4-1.8,4-4v-24.8c0-2.2-1.8-4-4-4h-67.1c-2.2,0-4,1.8-4,4
                V195.7z"/>
              <path style="fill:none;stroke:#275780;stroke-miterlimit:10;" d="M126.6,195.7c0,2.2,1.8,4,4,4h67.1c2.2,0,4-1.8,4-4v-24.8
                c0-2.2-1.8-4-4-4h-67.1c-2.2,0-4,1.8-4,4V195.7z"/>
              <text transform="matrix(1 0 0 1 141.5608 187.9565)" style="fill:#FFFFFF; font-family:'Helvetica-Bold'; font-size:14px;">Button</text>
            </g>
            <g id="fieldset_1_">
              <g id="input_1_">
                <text transform="matrix(1 0 0 1 39.2083 187.9481)" style="font-family:'Helvetica'; font-size:14px;">Text Input</text>
                <g>
                  <path style="fill:#FFFFFF;" d="M24.2,195.7c0,2.2,1.8,4,4,4h84.3c2.2,0,4-1.8,4-4v-24.8c0-2.2-1.8-4-4-4H28.2c-2.2,0-4,1.8-4,4
                    V195.7z"/>
                  <defs>
                    <filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="24.2" y="166.9" width="92.3" height="32.8">

                        <feColorMatrix  type="matrix" values="-1 0 0 0 1  0 -1 0 0 1  0 0 -1 0 1  0 0 0 1 0" color-interpolation-filters="sRGB" result="source"/>
                    </filter>
                  </defs>
                  <mask maskUnits="userSpaceOnUse" x="24.2" y="166.9" width="92.3" height="32.8" id="SVGID_1_">
                    <g style="filter:url(#Adobe_OpacityMaskFilter);">

                        <image style="overflow:visible;" width="402" height="154" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEBLAEsAAD/7AARRHVja3kAAQAEAAAAHgAA/+4AIUFkb2JlAGTAAAAAAQMA
        EAMCAwYAAAOmAAAH9QAACv3/2wCEABALCwsMCxAMDBAXDw0PFxsUEBAUGx8XFxcXFx8eFxoaGhoX
        Hh4jJSclIx4vLzMzLy9AQEBAQEBAQEBAQEBAQEABEQ8PERMRFRISFRQRFBEUGhQWFhQaJhoaHBoa
        JjAjHh4eHiMwKy4nJycuKzU1MDA1NUBAP0BAQEBAQEBAQEBAQP/CABEIAJ4BmAMBIgACEQEDEQH/
        xACSAAEBAAMBAQEAAAAAAAAAAAAABgMFBwQBAgEBAAAAAAAAAAAAAAAAAAAAABAAAQMDAwIHAQEB
        AAAAAAAAAAIEFQEDBRMUFzIGUBEiMzQ2BxIQgBEAAQIEAwgCAgIDAAAAAAAAAAEyAtKTNTFBAxAh
        g7PDBIQFUBIRIlETIFIUEgEAAAAAAAAAAAAAAAAAAACA/9oADAMBAAIRAxEAAACi0OPn50RzzMXq
        F+lyhhcoYXKGFyhhcoYXKGFyhhcoYXKGFyhhcoYXKGFyhhcoYXKGFyhhcoYXKGFyhhcoYXKF/Beu
        e/k6mjBQQF/Dm0332mNPmo8xMKj6S6oEuqBLqgS6oEuqBLqgS6oEuqBLqgS6oEuqBLqgS6oEuqBL
        qgS6oEuqBLKkSv5q/hH+G41xz3RXcabUFBFWsWX1TO1Bm+gAAAAAAAAAAAAAAAAAAAB88ftwElBd
        E54bAFBGWcYdGp5inMwAAAAAAAAAAAAAAAAAAAAGHNiJnnfRedHvBQRlnGHRqeYpzMAAAAAAAAAA
        AAAAAAAAAABiy4ia510XnR7wUEZZxh0anmKczAAAAAAAAAAAAAAAAAAAAAYsuImuddF50e8FBGWc
        YdGp5eoMwAAAAAAAAAAAAAAAAAAAAGLLiJrnXROdnvBQRdpFHRaiSqD2vn0AAAAAAAAAAAAAAAAA
        AAAYcvmJ3nl/z82AKCHuIEu6Xn2+LXNJ5ymTYpE4KNOCjTgo04KNOCjTgo04KNOCjTgo04KNOCjT
        go04KNOCjTgo04KNOCjTgo/k58KHwajxHyI3c4bwFBz/AKBz8/fp8Y2P3WjZtYNm1g2bWDZtYNm1
        g2bWDZtYNm1g2bWDZtYNm1g2bWDZtYNm1g2bWDZtYNm1g2bWDZtYNn81o2P48IyYwoAf/9oACAEC
        AAEFAP8AgT//2gAIAQMAAQUA/wCBP//aAAgBAQABBQDufum326cpNzlJucpNzlJucpNzlJucpNzl
        JucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNz
        lJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzB9/Wcx
        lP1T/EpUqqWd9RTHOaka5Ix0RjojHRGOiMdEY6Ix0RjojHRGOiMdEY6Ix0RjojHRGOiMdEY6Ix0R
        jojHRGOiMdEY6Ix0RjojHRGOiMdEY6Ix0RjojHRGOiMdEY6Ix0RjojHRGuSuPc0FM76RSFJ/zsT7
        X+qCU1UrH4/+htiqVpbw6alMMkhUkKkhUkKghUEKghUEKghUEKghUEKghUEKghUEKghUEKghUEKg
        hUEKghUEKghUEKghUEKghUEKghUEKghUEKghUEKkhUkKkhUlcMkuYdNBxiqUo/x9KUuIqhfYn2v9
        UGSf6v4ptStGjSnlbaU8qNkm3SbdJt0m3SbdJt0m3SbdJt0m3SbdJt0m3SbdJt0m3SbdJt0m3Sbd
        Jt0m3SbdJt0m3SbdJt0m3SbdJt0m3SbdJt0m3SbdJt0m3SbdJt0lWyS40p5O2lPLJtqUpkEfze7E
        +1/qhjaebnD2/NLW3TypTy8KrSlR1bp5Za35Jy1PK/2J9r/VDF/Kw1PS2p6fC3FPTmKenMe/2J9r
        /VDFfKw3S36fC7/TmOnM+/2J9r/VDFfKw3TY6fC7/TmOnM+/2J9r/VDFfKw3TY6fC7/TmOnM+/2J
        9r/VDFfKw3TY6fC7/TmOnM+/2J9r/VDFfKw3TY6fC7/TmOnM+/2J9r/VDFfKw3TY6fC7/TmOnM+/
        2J9r/VDFfKw3TY6fC7/TmOnM+/2J9r/VDFfKw3S36fC7/TmOnM+/2J9r/VDF/Kw1fS2r6fC3FfTm
        K+nMe/2J9r/VDG18nOHuUolrcp/NK+fhbldP5y6/Tl6+d/sT7X+qDFX838U4pSjR1TytuqeVHCTW
        SayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWS
        ayTWSayTWSayTWSayTWSVvpFuU+Tp1TyyjilaZNX9XuxPtf6oW1/wvHv6Uo2ydKUt5ZJTLpJdJLp
        JhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJ
        hJMJJhJMJJhJMJJhJXLpF5dI4ylK0yGQpWl+5qXOxPtf6p/lu6u3VGSupKZe9QmbxNXiavE1eJq8
        TV4mrxNXiavE1eJq8TV4mrxNXiavE1eJq8TV4mrxNXiavE1eJq8TV4mrxNXiavE1eJq8TV4mrxNX
        iavE1eJq8TV4mrxNXiavE1eJq8VzF6orJ3VF2+u5U7E+1/qniXYn2v8A/9oACAECAgY/AAJ//9oA
        CAEDAgY/AAJ//9oACAEBAQY/AO1+/bL3H/V/Z+PxGkH1/r+n8wrj9y3R1UkLdHVSQt0dVJC3R1Uk
        LdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0
        dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1U
        kLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt
        0dVJC3R1UkLdHVSQt0dVJC3R1UkND10PZRaK6/3/ABqLqJEifSCLUw+qf6nq/I6Oz8In5NyDRo0a
        NGjRo0aNGjRo0aNGjRo0aNGjRo0aNGjRo0aNGjRo0aNGjTeh+yfjZ2PG5Ooer8joiQpmJuE/UaNG
        jRo0aNGjRo0aNGjRo0aNGjRo0aNGjRo0aNGjRo0aNGjRo0aL+ou4WFTseNydQ9X5HREQh3CbjAwM
        DAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAXcLu2djxuTqHq/I6IhCJ8Y
        pFs7HjcnUPV+R0RCET4xSLZ2PG5Ooer8joiEPx0WzseNydQ9X5HREIfjotnY8bk6h6vyOiIQifGx
        bOx43J1D1fkdEQhE+Ni2djxuTqHq/I6IhCJ8bFs7HjcnUPV+R0RCET42LZ2PG5Ooer8joiEPx0Wz
        seNydQ9X5HREIfjotnY8bk6h6vyOiIQifGxbOx43J1D1fkdEQhE+MUi2djxuTqHq/I6IiibxN5iY
        /E4i7xd+zseNydQ9X5HREi/gTeJvHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4c
        OHC7xd4sR2PG5Ooer8jo7P1X/DMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMz
        MzPbvXZ2PG5Ooer8jo/JdjxuTqH/2Q==" transform="matrix(0.24 0 0 0.24 22.2083 164.9271)">
                      </image>
                    </g>
                  </mask>
                  <path style="opacity:0.1;mask:url(#SVGID_1_);" d="M24.2,195.7c0,2.2,1.8,4,4,4h84.3c2.2,0,4-1.8,4-4v-24.8c0-2.2-1.8-4-4-4
                    H28.2c-2.2,0-4,1.8-4,4V195.7z"/>
                </g>
                <path style="fill:none;stroke:#B3B3B3;" d="M24.2,195.7c0,2.2,1.8,4,4,4h84.3c2.2,0,4-1.8,4-4v-24.8c0-2.2-1.8-4-4-4H28.2
                  c-2.2,0-4,1.8-4,4V195.7z"/>
                <text transform="matrix(1 0 0 1 39.2083 187.9481)" style="font-family:'Helvetica'; font-size:14px;">Text Input</text>
              </g>

                <text id="label_1_" transform="matrix(1 0 0 1 23.5627 157.4101)" style="fill:#999999; font-family:'Helvetica'; font-size:14px;">Label Text</text>
            </g>
          </g>
        </g>
        <g id="masthead-1_1_">
          <rect style="fill:#222222;" width="1099.8" height="57.2"/>
          <rect x="125.4" width="121" height="57.2"/>
          <text transform="matrix(1 0 0 1 263.7961 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">Violations</text>
          <text transform="matrix(1 0 0 1 403.4719 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">Statistics</text>

            <text id="link-settings-1_1_" transform="matrix(1 0 0 1 507.9524 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">Settings</text>
          <text transform="matrix(1 0 0 1 1018.26 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">Log Out</text>
          <text transform="matrix(1 0 0 1 940.1741 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">Profile</text>

            <text id="link-people-1_1_" transform="matrix(1 0 0 1 143.9182 34.3378)" style="fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">People</text>

            <text transform="matrix(1 0 0 1 19.6409 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica-Bold'; font-size:20px;">Company</text>
          <g>
            <path style="fill:#ED1C24;" d="M342,29.5c0,5,4,9,9,9h9.5c5,0,9-4,9-9v-1.8c0-4.9-4-9-9-9H351c-5,0-9,4.1-9,9V29.5z"/>
          </g>
          <text transform="matrix(1 0 0 1 347.8499 32.9945)" style="fill:#FFFFFF; font-family:'Helvetica'; font-size:13px;">42</text>
          <g>
            <path style="fill:#ED1C24;" d="M201.3,29.5c0,5,4.1,9,9,9h9.5c4.9,0,9-4,9-9v-1.8c0-4.9-4.1-9-9-9h-9.5c-4.9,0-9,4.1-9,9V29.5z"/>
          </g>
          <text transform="matrix(1 0 0 1 208.176 32.9945)" style="fill:#FFFFFF; font-family:'Helvetica'; font-size:13px;">84</text>
        </g>


        
      </g>

    </svg>

  </div>
  
  <div id="2" data-scrnext="3" class="scr">
    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 1100 933" style="enable-background:new 0 0 1100 933;" xml:space="preserve">

      <g id="page-example-2">
        
        <g id="page-heading-2_2_">
            <text id="text_3_" transform="matrix(1 0 0 1 21.5441 103.9872)" style="font-family:'Helvetica'; font-size:22px;">People</text>
            <line id="underline_1_" style="fill:none;stroke:#808080;" x1="21.5" y1="115" x2="704.8" y2="115"/>
        </g>
        <g id="page-content-2_2_">
            <g id="image-placeholder_1_">
                <g id="image_1_">
                    <path style="fill:#FFFFFF;" d="M977.2,411.4c0,3-2.5,5.5-5.5,5.5h-260c-3,0-5.5-2.5-5.5-5.5v-260c0-3,2.5-5.5,5.5-5.5h260
                        c3,0,5.5,2.5,5.5,5.5V411.4z"/>
                    <path style="fill:#EEEEEE;" d="M972.2,411.9c0,0.6-0.4,1-1,1h-260c-0.6,0-1-0.4-1-1v-260c0-0.6,0.4-1,1-1h260c0.6,0,1,0.4,1,1
                        V411.9z"/>
                    <path style="fill:#DDDDDD;" d="M971.7,146.9c2.8,0,5.5,2.2,5.5,4.9v260.4c0,2.8-2.7,4.7-5.5,4.7H711.3c-2.8,0-5.1-1.9-5.1-4.7
                        V151.8c0-2.8,2.4-4.9,5.1-4.9h260.9 M971.7,145.9H711.3c-3.3,0-6.1,2.6-6.1,5.9v260.4c0,3.3,2.8,5.7,6.1,5.7h260.4
                        c3.3,0,6.5-2.4,6.5-5.7V151.8C978.2,148.5,975.1,145.9,971.7,145.9L971.7,145.9z"/>
                </g>

                    <text id="text_2_" transform="matrix(1 0 0 1 809.4075 288.2982)" style="fill:#BFBFBF; font-family:'Helvetica'; font-size:22px;">Image</text>
            </g>
            <rect x="23.6" y="230.6" style="fill:none;" width="655" height="445.4"/>
            <text id="text_1_" transform="matrix(1 0 0 1 23.5637 242.081)"><tspan x="0" y="0" style="font-family:'Helvetica'; font-size:16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil facere maiores enim in ipsam, </tspan><tspan x="0" y="19.2" style="font-family:'Helvetica'; font-size:16px;">vero dignissimos reprehenderit veniam nisi, dolores quam culpa repellat molestias voluptate </tspan><tspan x="0" y="38.4" style="font-family:'Helvetica'; font-size:16px;">aliquam veritatis, magni quisquam impedit.</tspan><tspan x="0" y="76.8" style="font-family:'Helvetica'; font-size:16px;">Nihil facere maiores enim in ipsam, vero dignissimos reprehenderit veniam nisi, dolores </tspan><tspan x="0" y="96" style="font-family:'Helvetica'; font-size:16px;">quam culpa repellat molestias voluptate aliquam veritatis, magni quisquam impedit. Lorem </tspan><tspan x="0" y="115.2" style="font-family:'Helvetica'; font-size:16px;">ipsum dolor sit amet, consectetur adipisicing elit.</tspan><tspan x="0" y="156" style="font-family:'Helvetica-Bold'; font-size:18px;">Sub Heading</tspan><tspan x="0" y="194.4" style="font-family:'Helvetica'; font-size:16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil facere maiores enim in ipsam, </tspan><tspan x="0" y="213.6" style="font-family:'Helvetica'; font-size:16px;">vero dignissimos reprehenderit veniam nisi, dolores quam culpa repellat molestias voluptate </tspan><tspan x="0" y="232.8" style="font-family:'Helvetica'; font-size:16px;">aliquam veritatis, magni quisquam impedit.</tspan><tspan x="0" y="271.2" style="font-family:'Helvetica'; font-size:16px;">Nihil facere maiores enim in ipsam, vero dignissimos reprehenderit veniam nisi, dolores </tspan><tspan x="0" y="290.4" style="font-family:'Helvetica'; font-size:16px;">quam culpa repellat molestias voluptate aliquam veritatis, magni quisquam impedit. Lorem </tspan><tspan x="0" y="309.6" style="font-family:'Helvetica'; font-size:16px;">ipsum dolor sit amet, consectetur adipisicing elit.</tspan></text>
            <g id="form_1_">
                <g id="btn-primary-2_1_">
                    <text transform="matrix(1 0 0 1 141.5607 187.9565)" style="font-family:'Helvetica-Bold'; font-size:14px;">Button</text>
                    <path style="fill:#3E8ACC;" d="M126.6,195.7c0,2.2,1.8,4,4,4h67.1c2.2,0,4-1.8,4-4v-24.8c0-2.2-1.8-4-4-4h-67.1c-2.2,0-4,1.8-4,4
                        V195.7z"/>
                    <path style="fill:none;stroke:#275780;stroke-miterlimit:10;" d="M126.6,195.7c0,2.2,1.8,4,4,4h67.1c2.2,0,4-1.8,4-4v-24.8
                        c0-2.2-1.8-4-4-4h-67.1c-2.2,0-4,1.8-4,4V195.7z"/>
                    <text transform="matrix(1 0 0 1 141.5607 187.9565)" style="fill:#FFFFFF; font-family:'Helvetica-Bold'; font-size:14px;">Button</text>
                </g>
                <g id="fieldset_1_">
                    <g id="input_1_">
                        <text transform="matrix(1 0 0 1 39.2081 187.9481)" style="font-family:'Helvetica'; font-size:14px;">Text Input</text>
                        <g>
                            <path style="fill:#FFFFFF;" d="M24.2,195.7c0,2.2,1.8,4,4,4h84.3c2.2,0,4-1.8,4-4v-24.8c0-2.2-1.8-4-4-4H28.2c-2.2,0-4,1.8-4,4
                                V195.7z"/>
                            <defs>
                                <filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="24.2" y="166.9" width="92.3" height="32.8">

                                        <feColorMatrix  type="matrix" values="-1 0 0 0 1  0 -1 0 0 1  0 0 -1 0 1  0 0 0 1 0" color-interpolation-filters="sRGB" result="source"/>
                                </filter>
                            </defs>
                            <mask maskUnits="userSpaceOnUse" x="24.2" y="166.9" width="92.3" height="32.8" id="SVGID_1_">
                                <g style="filter:url(#Adobe_OpacityMaskFilter);">

                                        <image style="overflow:visible;" width="402" height="154" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEBLAEsAAD/7AARRHVja3kAAQAEAAAAHgAA/+4AIUFkb2JlAGTAAAAAAQMA
        EAMCAwYAAAOmAAAH9QAACv3/2wCEABALCwsMCxAMDBAXDw0PFxsUEBAUGx8XFxcXFx8eFxoaGhoX
        Hh4jJSclIx4vLzMzLy9AQEBAQEBAQEBAQEBAQEABEQ8PERMRFRISFRQRFBEUGhQWFhQaJhoaHBoa
        JjAjHh4eHiMwKy4nJycuKzU1MDA1NUBAP0BAQEBAQEBAQEBAQP/CABEIAJ4BmAMBIgACEQEDEQH/
        xACSAAEBAAMBAQEAAAAAAAAAAAAABgMFBwQBAgEBAAAAAAAAAAAAAAAAAAAAABAAAQMDAwIHAQEB
        AAAAAAAAAAIEFQEDBRMUFzIGUBEiMzQ2BxIQgBEAAQIEAwgCAgIDAAAAAAAAAAEyAtKTNTFBAxAh
        g7PDBIQFUBIRIlETIFIUEgEAAAAAAAAAAAAAAAAAAACA/9oADAMBAAIRAxEAAACi0OPn50RzzMXq
        F+lyhhcoYXKGFyhhcoYXKGFyhhcoYXKGFyhhcoYXKGFyhhcoYXKGFyhhcoYXKGFyhhcoYXKF/Beu
        e/k6mjBQQF/Dm0332mNPmo8xMKj6S6oEuqBLqgS6oEuqBLqgS6oEuqBLqgS6oEuqBLqgS6oEuqBL
        qgS6oEuqBLKkSv5q/hH+G41xz3RXcabUFBFWsWX1TO1Bm+gAAAAAAAAAAAAAAAAAAAB88ftwElBd
        E54bAFBGWcYdGp5inMwAAAAAAAAAAAAAAAAAAAAGHNiJnnfRedHvBQRlnGHRqeYpzMAAAAAAAAAA
        AAAAAAAAAABiy4ia510XnR7wUEZZxh0anmKczAAAAAAAAAAAAAAAAAAAAAYsuImuddF50e8FBGWc
        YdGp5eoMwAAAAAAAAAAAAAAAAAAAAGLLiJrnXROdnvBQRdpFHRaiSqD2vn0AAAAAAAAAAAAAAAAA
        AAAYcvmJ3nl/z82AKCHuIEu6Xn2+LXNJ5ymTYpE4KNOCjTgo04KNOCjTgo04KNOCjTgo04KNOCjT
        go04KNOCjTgo04KNOCjTgo/k58KHwajxHyI3c4bwFBz/AKBz8/fp8Y2P3WjZtYNm1g2bWDZtYNm1
        g2bWDZtYNm1g2bWDZtYNm1g2bWDZtYNm1g2bWDZtYNm1g2bWDZtYNn81o2P48IyYwoAf/9oACAEC
        AAEFAP8AgT//2gAIAQMAAQUA/wCBP//aAAgBAQABBQDufum326cpNzlJucpNzlJucpNzlJucpNzl
        JucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNz
        lJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzB9/Wcx
        lP1T/EpUqqWd9RTHOaka5Ix0RjojHRGOiMdEY6Ix0RjojHRGOiMdEY6Ix0RjojHRGOiMdEY6Ix0R
        jojHRGOiMdEY6Ix0RjojHRGOiMdEY6Ix0RjojHRGOiMdEY6Ix0RjojHRGuSuPc0FM76RSFJ/zsT7
        X+qCU1UrH4/+htiqVpbw6alMMkhUkKkhUkKghUEKghUEKghUEKghUEKghUEKghUEKghUEKghUEKg
        hUEKghUEKghUEKghUEKghUEKghUEKghUEKghUEKkhUkKkhUlcMkuYdNBxiqUo/x9KUuIqhfYn2v9
        UGSf6v4ptStGjSnlbaU8qNkm3SbdJt0m3SbdJt0m3SbdJt0m3SbdJt0m3SbdJt0m3SbdJt0m3Sbd
        Jt0m3SbdJt0m3SbdJt0m3SbdJt0m3SbdJt0m3SbdJt0m3SbdJt0lWyS40p5O2lPLJtqUpkEfze7E
        +1/qhjaebnD2/NLW3TypTy8KrSlR1bp5Za35Jy1PK/2J9r/VDF/Kw1PS2p6fC3FPTmKenMe/2J9r
        /VDFfKw3S36fC7/TmOnM+/2J9r/VDFfKw3TY6fC7/TmOnM+/2J9r/VDFfKw3TY6fC7/TmOnM+/2J
        9r/VDFfKw3TY6fC7/TmOnM+/2J9r/VDFfKw3TY6fC7/TmOnM+/2J9r/VDFfKw3TY6fC7/TmOnM+/
        2J9r/VDFfKw3TY6fC7/TmOnM+/2J9r/VDFfKw3S36fC7/TmOnM+/2J9r/VDF/Kw1fS2r6fC3FfTm
        K+nMe/2J9r/VDG18nOHuUolrcp/NK+fhbldP5y6/Tl6+d/sT7X+qDFX838U4pSjR1TytuqeVHCTW
        SayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWS
        ayTWSayTWSayTWSayTWSVvpFuU+Tp1TyyjilaZNX9XuxPtf6oW1/wvHv6Uo2ydKUt5ZJTLpJdJLp
        JhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJ
        hJMJJhJMJJhJMJJhJXLpF5dI4ylK0yGQpWl+5qXOxPtf6p/lu6u3VGSupKZe9QmbxNXiavE1eJq8
        TV4mrxNXiavE1eJq8TV4mrxNXiavE1eJq8TV4mrxNXiavE1eJq8TV4mrxNXiavE1eJq8TV4mrxNX
        iavE1eJq8TV4mrxNXiavE1eJq8VzF6orJ3VF2+u5U7E+1/qniXYn2v8A/9oACAECAgY/AAJ//9oA
        CAEDAgY/AAJ//9oACAEBAQY/AO1+/bL3H/V/Z+PxGkH1/r+n8wrj9y3R1UkLdHVSQt0dVJC3R1Uk
        LdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0
        dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1U
        kLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt
        0dVJC3R1UkLdHVSQt0dVJC3R1UkND10PZRaK6/3/ABqLqJEifSCLUw+qf6nq/I6Oz8In5NyDRo0a
        NGjRo0aNGjRo0aNGjRo0aNGjRo0aNGjRo0aNGjRo0aNGjTeh+yfjZ2PG5Ooer8joiQpmJuE/UaNG
        jRo0aNGjRo0aNGjRo0aNGjRo0aNGjRo0aNGjRo0aNGjRo0aL+ou4WFTseNydQ9X5HREQh3CbjAwM
        DAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAXcLu2djxuTqHq/I6IhCJ8Y
        pFs7HjcnUPV+R0RCET4xSLZ2PG5Ooer8joiEPx0WzseNydQ9X5HREIfjotnY8bk6h6vyOiIQifGx
        bOx43J1D1fkdEQhE+Ni2djxuTqHq/I6IhCJ8bFs7HjcnUPV+R0RCET42LZ2PG5Ooer8joiEPx0Wz
        seNydQ9X5HREIfjotnY8bk6h6vyOiIQifGxbOx43J1D1fkdEQhE+MUi2djxuTqHq/I6IiibxN5iY
        /E4i7xd+zseNydQ9X5HREi/gTeJvHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4c
        OHC7xd4sR2PG5Ooer8jo7P1X/DMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMz
        MzPbvXZ2PG5Ooer8jo/JdjxuTqH/2Q==" transform="matrix(0.24 0 0 0.24 22.2083 164.9271)">
                                    </image>
                                </g>
                            </mask>
                            <path style="opacity:0.1;mask:url(#SVGID_1_);" d="M24.2,195.7c0,2.2,1.8,4,4,4h84.3c2.2,0,4-1.8,4-4v-24.8c0-2.2-1.8-4-4-4
                                H28.2c-2.2,0-4,1.8-4,4V195.7z"/>
                        </g>
                        <path style="fill:none;stroke:#FF0000;" d="M24.2,195.7c0,2.2,1.8,4,4,4h84.3c2.2,0,4-1.8,4-4v-24.8c0-2.2-1.8-4-4-4H28.2
                            c-2.2,0-4,1.8-4,4V195.7z"/>
                        <text transform="matrix(1 0 0 1 39.2081 187.9481)" style="font-family:'Helvetica'; font-size:14px;">Text Input</text>
                    </g>

                        <text id="label_1_" transform="matrix(1 0 0 1 23.5627 157.4101)" style="fill:#999999; font-family:'Helvetica'; font-size:14px;">Label Text</text>
                </g>
                <text transform="matrix(1 0 0 1 221.2637 187.9565)" style="fill:#ED1C24; font-family:'Helvetica-Bold'; font-size:14px;">Error. Something went wrong with your form. Please fix it!</text>
            </g>
        </g>
        <g id="masthead-2_2_">
            <rect style="fill:#222222;" width="1099.8" height="57.2"/>
            <rect x="125.4" width="121" height="57.2"/>
            <text transform="matrix(1 0 0 1 263.7961 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">Violations</text>
            <text transform="matrix(1 0 0 1 403.4719 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">Statistics</text>

                <text id="link-settings-2_1_" transform="matrix(1 0 0 1 507.9524 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">Settings</text>
            <text transform="matrix(1 0 0 1 1018.26 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">Log Out</text>
            <text transform="matrix(1 0 0 1 940.1741 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">Profile</text>

                <text id="link-people-2_1_" transform="matrix(1 0 0 1 143.9182 34.3378)" style="fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">People</text>

                <text transform="matrix(1 0 0 1 19.6409 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica-Bold'; font-size:20px;">Company</text>
            <g>
                <path style="fill:#ED1C24;" d="M342,29.5c0,5,4,9,9,9h9.5c5,0,9-4,9-9v-1.8c0-4.9-4-9-9-9H351c-5,0-9,4.1-9,9V29.5z"/>
            </g>
            <text transform="matrix(1 0 0 1 347.8499 32.9945)" style="fill:#FFFFFF; font-family:'Helvetica'; font-size:13px;">42</text>
            <g>
                <path style="fill:#ED1C24;" d="M201.3,29.5c0,5,4.1,9,9,9h9.5c4.9,0,9-4,9-9v-1.8c0-4.9-4.1-9-9-9h-9.5c-4.9,0-9,4.1-9,9V29.5z"/>
            </g>
            <text transform="matrix(1 0 0 1 208.176 32.9945)" style="fill:#FFFFFF; font-family:'Helvetica'; font-size:13px;">84</text>
        </g>


        
      </g>

    </svg>
  </div>
  
  <div id="3" data-scrnext="4" class="scr">
    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 1100 933" style="enable-background:new 0 0 1100 933;" xml:space="preserve">

      <g id="page-example-3">
        
        <g id="page-heading-3_1_">
          <text id="text_3_" transform="matrix(1 0 0 1 21.5441 103.9872)" style="font-family:'Helvetica'; font-size:22px;">People</text>
          <line id="underline_1_" style="fill:none;stroke:#808080;" x1="21.5" y1="115" x2="704.8" y2="115"/>
        </g>
        <g id="page-content-3_1_">
          <g id="image-placeholder_1_">
            <g id="image_1_">
              <path style="fill:#FFFFFF;" d="M977.2,411.4c0,3-2.5,5.5-5.5,5.5h-260c-3,0-5.5-2.5-5.5-5.5v-260c0-3,2.5-5.5,5.5-5.5h260
                c3,0,5.5,2.5,5.5,5.5V411.4z"/>
              <path style="fill:#EEEEEE;" d="M972.2,411.9c0,0.6-0.4,1-1,1h-260c-0.6,0-1-0.4-1-1v-260c0-0.6,0.4-1,1-1h260c0.6,0,1,0.4,1,1
                V411.9z"/>
              <path style="fill:#DDDDDD;" d="M971.7,146.9c2.8,0,5.5,2.2,5.5,4.9v260.4c0,2.8-2.7,4.7-5.5,4.7H711.3c-2.8,0-5.1-1.9-5.1-4.7
                V151.8c0-2.8,2.4-4.9,5.1-4.9h260.9 M971.7,145.9H711.3c-3.3,0-6.1,2.6-6.1,5.9v260.4c0,3.3,2.8,5.7,6.1,5.7h260.4
                c3.3,0,6.5-2.4,6.5-5.7V151.8C978.2,148.5,975.1,145.9,971.7,145.9L971.7,145.9z"/>
            </g>

              <text id="text_2_" transform="matrix(1 0 0 1 809.4073 288.2982)" style="fill:#BFBFBF; font-family:'Helvetica'; font-size:22px;">Image</text>
          </g>
          <rect x="23.6" y="230.6" style="fill:none;" width="655" height="423.4"/>
          <text id="text_1_" transform="matrix(1 0 0 1 23.5636 242.081)"><tspan x="0" y="0" style="font-family:'Helvetica'; font-size:16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil facere maiores enim in ipsam, </tspan><tspan x="0" y="19.2" style="font-family:'Helvetica'; font-size:16px;">vero dignissimos reprehenderit veniam nisi, dolores quam culpa repellat molestias voluptate </tspan><tspan x="0" y="38.4" style="font-family:'Helvetica'; font-size:16px;">aliquam veritatis, magni quisquam impedit.</tspan><tspan x="0" y="76.8" style="font-family:'Helvetica'; font-size:16px;">Nihil facere maiores enim in ipsam, vero dignissimos reprehenderit veniam nisi, dolores </tspan><tspan x="0" y="96" style="font-family:'Helvetica'; font-size:16px;">quam culpa repellat molestias voluptate aliquam veritatis, magni quisquam impedit. Lorem </tspan><tspan x="0" y="115.2" style="font-family:'Helvetica'; font-size:16px;">ipsum dolor sit amet, consectetur adipisicing elit.</tspan><tspan x="0" y="156" style="font-family:'Helvetica-Bold'; font-size:18px;">Sub Heading</tspan><tspan x="0" y="194.4" style="font-family:'Helvetica'; font-size:16px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil facere maiores enim in ipsam, </tspan><tspan x="0" y="213.6" style="font-family:'Helvetica'; font-size:16px;">vero dignissimos reprehenderit veniam nisi, dolores quam culpa repellat molestias voluptate </tspan><tspan x="0" y="232.8" style="font-family:'Helvetica'; font-size:16px;">aliquam veritatis, magni quisquam impedit.</tspan><tspan x="0" y="271.2" style="font-family:'Helvetica'; font-size:16px;">Nihil facere maiores enim in ipsam, vero dignissimos reprehenderit veniam nisi, dolores </tspan><tspan x="0" y="290.4" style="font-family:'Helvetica'; font-size:16px;">quam culpa repellat molestias voluptate aliquam veritatis, magni quisquam impedit. Lorem </tspan><tspan x="0" y="309.6" style="font-family:'Helvetica'; font-size:16px;">ipsum dolor sit amet, consectetur adipisicing elit.</tspan></text>
          <g id="form_1_">
            <g id="btn-primary-3_1_">
              <path style="fill:#CCCCCC;" d="M126.6,195.7c0,2.2,1.8,4,4,4h67.1c2.2,0,4-1.8,4-4v-24.8c0-2.2-1.8-4-4-4h-67.1c-2.2,0-4,1.8-4,4
                V195.7z"/>
              <path style="fill:none;stroke:#B3B3B3;" d="M126.6,195.7c0,2.2,1.8,4,4,4h67.1c2.2,0,4-1.8,4-4v-24.8c0-2.2-1.8-4-4-4h-67.1
                c-2.2,0-4,1.8-4,4V195.7z"/>
              <text transform="matrix(1 0 0 1 141.5605 187.9565)" style="fill:#999999; font-family:'Helvetica-Bold'; font-size:14px;">Button</text>
            </g>
            <g id="fieldset_1_">
              <g id="input_1_">
                <text transform="matrix(1 0 0 1 39.2083 187.9481)" style="font-family:'Helvetica'; font-size:14px;">Text Input</text>
                <g>
                  <path style="fill:#FFFFFF;" d="M24.2,195.7c0,2.2,1.8,4,4,4h84.3c2.2,0,4-1.8,4-4v-24.8c0-2.2-1.8-4-4-4H28.2c-2.2,0-4,1.8-4,4
                    V195.7z"/>
                  <defs>
                    <filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="24.2" y="166.9" width="92.3" height="32.8">

                        <feColorMatrix  type="matrix" values="-1 0 0 0 1  0 -1 0 0 1  0 0 -1 0 1  0 0 0 1 0" color-interpolation-filters="sRGB" result="source"/>
                    </filter>
                  </defs>
                  <mask maskUnits="userSpaceOnUse" x="24.2" y="166.9" width="92.3" height="32.8" id="SVGID_1_">
                    <g style="filter:url(#Adobe_OpacityMaskFilter);">

                        <image style="overflow:visible;" width="402" height="154" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEBLAEsAAD/7AARRHVja3kAAQAEAAAAHgAA/+4AIUFkb2JlAGTAAAAAAQMA
        EAMCAwYAAAOmAAAH9QAACv3/2wCEABALCwsMCxAMDBAXDw0PFxsUEBAUGx8XFxcXFx8eFxoaGhoX
        Hh4jJSclIx4vLzMzLy9AQEBAQEBAQEBAQEBAQEABEQ8PERMRFRISFRQRFBEUGhQWFhQaJhoaHBoa
        JjAjHh4eHiMwKy4nJycuKzU1MDA1NUBAP0BAQEBAQEBAQEBAQP/CABEIAJ4BmAMBIgACEQEDEQH/
        xACSAAEBAAMBAQEAAAAAAAAAAAAABgMFBwQBAgEBAAAAAAAAAAAAAAAAAAAAABAAAQMDAwIHAQEB
        AAAAAAAAAAIEFQEDBRMUFzIGUBEiMzQ2BxIQgBEAAQIEAwgCAgIDAAAAAAAAAAEyAtKTNTFBAxAh
        g7PDBIQFUBIRIlETIFIUEgEAAAAAAAAAAAAAAAAAAACA/9oADAMBAAIRAxEAAACi0OPn50RzzMXq
        F+lyhhcoYXKGFyhhcoYXKGFyhhcoYXKGFyhhcoYXKGFyhhcoYXKGFyhhcoYXKGFyhhcoYXKF/Beu
        e/k6mjBQQF/Dm0332mNPmo8xMKj6S6oEuqBLqgS6oEuqBLqgS6oEuqBLqgS6oEuqBLqgS6oEuqBL
        qgS6oEuqBLKkSv5q/hH+G41xz3RXcabUFBFWsWX1TO1Bm+gAAAAAAAAAAAAAAAAAAAB88ftwElBd
        E54bAFBGWcYdGp5inMwAAAAAAAAAAAAAAAAAAAAGHNiJnnfRedHvBQRlnGHRqeYpzMAAAAAAAAAA
        AAAAAAAAAABiy4ia510XnR7wUEZZxh0anmKczAAAAAAAAAAAAAAAAAAAAAYsuImuddF50e8FBGWc
        YdGp5eoMwAAAAAAAAAAAAAAAAAAAAGLLiJrnXROdnvBQRdpFHRaiSqD2vn0AAAAAAAAAAAAAAAAA
        AAAYcvmJ3nl/z82AKCHuIEu6Xn2+LXNJ5ymTYpE4KNOCjTgo04KNOCjTgo04KNOCjTgo04KNOCjT
        go04KNOCjTgo04KNOCjTgo/k58KHwajxHyI3c4bwFBz/AKBz8/fp8Y2P3WjZtYNm1g2bWDZtYNm1
        g2bWDZtYNm1g2bWDZtYNm1g2bWDZtYNm1g2bWDZtYNm1g2bWDZtYNn81o2P48IyYwoAf/9oACAEC
        AAEFAP8AgT//2gAIAQMAAQUA/wCBP//aAAgBAQABBQDufum326cpNzlJucpNzlJucpNzlJucpNzl
        JucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNz
        lJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzlJucpNzB9/Wcx
        lP1T/EpUqqWd9RTHOaka5Ix0RjojHRGOiMdEY6Ix0RjojHRGOiMdEY6Ix0RjojHRGOiMdEY6Ix0R
        jojHRGOiMdEY6Ix0RjojHRGOiMdEY6Ix0RjojHRGOiMdEY6Ix0RjojHRGuSuPc0FM76RSFJ/zsT7
        X+qCU1UrH4/+htiqVpbw6alMMkhUkKkhUkKghUEKghUEKghUEKghUEKghUEKghUEKghUEKghUEKg
        hUEKghUEKghUEKghUEKghUEKghUEKghUEKghUEKkhUkKkhUlcMkuYdNBxiqUo/x9KUuIqhfYn2v9
        UGSf6v4ptStGjSnlbaU8qNkm3SbdJt0m3SbdJt0m3SbdJt0m3SbdJt0m3SbdJt0m3SbdJt0m3Sbd
        Jt0m3SbdJt0m3SbdJt0m3SbdJt0m3SbdJt0m3SbdJt0m3SbdJt0lWyS40p5O2lPLJtqUpkEfze7E
        +1/qhjaebnD2/NLW3TypTy8KrSlR1bp5Za35Jy1PK/2J9r/VDF/Kw1PS2p6fC3FPTmKenMe/2J9r
        /VDFfKw3S36fC7/TmOnM+/2J9r/VDFfKw3TY6fC7/TmOnM+/2J9r/VDFfKw3TY6fC7/TmOnM+/2J
        9r/VDFfKw3TY6fC7/TmOnM+/2J9r/VDFfKw3TY6fC7/TmOnM+/2J9r/VDFfKw3TY6fC7/TmOnM+/
        2J9r/VDFfKw3TY6fC7/TmOnM+/2J9r/VDFfKw3S36fC7/TmOnM+/2J9r/VDF/Kw1fS2r6fC3FfTm
        K+nMe/2J9r/VDG18nOHuUolrcp/NK+fhbldP5y6/Tl6+d/sT7X+qDFX838U4pSjR1TytuqeVHCTW
        SayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWSayTWS
        ayTWSayTWSayTWSayTWSVvpFuU+Tp1TyyjilaZNX9XuxPtf6oW1/wvHv6Uo2ydKUt5ZJTLpJdJLp
        JhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJhJMJJ
        hJMJJhJMJJhJMJJhJXLpF5dI4ylK0yGQpWl+5qXOxPtf6p/lu6u3VGSupKZe9QmbxNXiavE1eJq8
        TV4mrxNXiavE1eJq8TV4mrxNXiavE1eJq8TV4mrxNXiavE1eJq8TV4mrxNXiavE1eJq8TV4mrxNX
        iavE1eJq8TV4mrxNXiavE1eJq8VzF6orJ3VF2+u5U7E+1/qniXYn2v8A/9oACAECAgY/AAJ//9oA
        CAEDAgY/AAJ//9oACAEBAQY/AO1+/bL3H/V/Z+PxGkH1/r+n8wrj9y3R1UkLdHVSQt0dVJC3R1Uk
        LdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0
        dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1U
        kLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt0dVJC3R1UkLdHVSQt
        0dVJC3R1UkLdHVSQt0dVJC3R1UkND10PZRaK6/3/ABqLqJEifSCLUw+qf6nq/I6Oz8In5NyDRo0a
        NGjRo0aNGjRo0aNGjRo0aNGjRo0aNGjRo0aNGjRo0aNGjTeh+yfjZ2PG5Ooer8joiQpmJuE/UaNG
        jRo0aNGjRo0aNGjRo0aNGjRo0aNGjRo0aNGjRo0aNGjRo0aL+ou4WFTseNydQ9X5HREQh3CbjAwM
        DAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAXcLu2djxuTqHq/I6IhCJ8Y
        pFs7HjcnUPV+R0RCET4xSLZ2PG5Ooer8joiEPx0WzseNydQ9X5HREIfjotnY8bk6h6vyOiIQifGx
        bOx43J1D1fkdEQhE+Ni2djxuTqHq/I6IhCJ8bFs7HjcnUPV+R0RCET42LZ2PG5Ooer8joiEPx0Wz
        seNydQ9X5HREIfjotnY8bk6h6vyOiIQifGxbOx43J1D1fkdEQhE+MUi2djxuTqHq/I6IiibxN5iY
        /E4i7xd+zseNydQ9X5HREi/gTeJvHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4cOHDhw4c
        OHC7xd4sR2PG5Ooer8jo7P1X/DMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMz
        MzPbvXZ2PG5Ooer8jo/JdjxuTqH/2Q==" transform="matrix(0.24 0 0 0.24 22.2083 164.9271)">
                      </image>
                    </g>
                  </mask>
                  <path style="opacity:0.1;mask:url(#SVGID_1_);" d="M24.2,195.7c0,2.2,1.8,4,4,4h84.3c2.2,0,4-1.8,4-4v-24.8c0-2.2-1.8-4-4-4
                    H28.2c-2.2,0-4,1.8-4,4V195.7z"/>
                </g>
                <path style="fill:none;stroke:#B3B3B3;" d="M24.2,195.7c0,2.2,1.8,4,4,4h84.3c2.2,0,4-1.8,4-4v-24.8c0-2.2-1.8-4-4-4H28.2
                  c-2.2,0-4,1.8-4,4V195.7z"/>
                <text transform="matrix(1 0 0 1 39.2083 187.9481)" style="fill:#999999; font-family:'Helvetica'; font-size:14px;">Text Input</text>
              </g>

                <text id="label_1_" transform="matrix(1 0 0 1 23.5626 157.4101)" style="fill:#999999; font-family:'Helvetica'; font-size:14px;">Label Text</text>
            </g>
            <text transform="matrix(1 0 0 1 221.2634 187.9565)" style="fill:#009245; font-family:'Helvetica-Bold'; font-size:14px;">Whoohooo! Everything worked. Form submitted. Thanks!</text>
          </g>
        </g>
        <g id="masthead-3_1_">
          <rect style="fill:#222222;" width="1099.8" height="57.2"/>
          <rect x="125.4" width="121" height="57.2"/>
          <text transform="matrix(1 0 0 1 263.796 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">Violations</text>
          <text transform="matrix(1 0 0 1 403.4718 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">Statistics</text>

            <text id="link-settings-3_1_" transform="matrix(1 0 0 1 507.9523 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">Settings</text>
          <text transform="matrix(1 0 0 1 1018.2599 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">Log Out</text>
          <text transform="matrix(1 0 0 1 940.174 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">Profile</text>

            <text id="link-people-3_1_" transform="matrix(1 0 0 1 143.9181 34.3378)" style="fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">People</text>

            <text transform="matrix(1 0 0 1 19.6407 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica-Bold'; font-size:20px;">Company</text>
          <g>
            <path style="fill:#ED1C24;" d="M342,29.5c0,5,4,9,9,9h9.5c5,0,9-4,9-9v-1.8c0-4.9-4-9-9-9H351c-5,0-9,4.1-9,9V29.5z"/>
          </g>
          <text transform="matrix(1 0 0 1 347.8497 32.9945)" style="fill:#FFFFFF; font-family:'Helvetica'; font-size:13px;">42</text>
          <g>
            <path style="fill:#ED1C24;" d="M201.3,29.5c0,5,4.1,9,9,9h9.5c4.9,0,9-4,9-9v-1.8c0-4.9-4.1-9-9-9h-9.5c-4.9,0-9,4.1-9,9V29.5z"/>
          </g>
          <text transform="matrix(1 0 0 1 208.1759 32.9945)" style="fill:#FFFFFF; font-family:'Helvetica'; font-size:13px;">84</text>
        </g>

      </g>

    </svg>
  </div>
  
  
  <div id="4" data-scrnext="1" class="scr">
    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       viewBox="0 0 1100 933" style="enable-background:new 0 0 1100 933;" xml:space="preserve">

      <g id="page-example-4">
        
        <g id="page-heading-4_1_">
          <text id="text_1_" transform="matrix(1 0 0 1 21.5441 103.9872)" style="font-family:'Helvetica'; font-size:22px;">Settings</text>
          <line id="underline_2_" style="fill:none;stroke:#808080;" x1="21.5" y1="115" x2="704.8" y2="115"/>
      </g>
      <g id="page-content-4_1_">
          <g id="table-4_1_">
              <g>
                  <path style="fill:#FFFFFF;" d="M23.6,415.5c-1.9,0-3.5-1.6-3.5-3.5V152c0-1.9,1.6-3.5,3.5-3.5h833c1.9,0,3.5,1.6,3.5,3.5v260
                      c0,1.9-1.6,3.5-3.5,3.5H23.6z"/>
                  <path style="fill:#DDDDDD;" d="M856.6,149c1.6,0,3,1.4,3,3v260c0,1.6-1.4,3-3,3h-833c-1.6,0-3-1.4-3-3V152c0-1.6,1.4-3,3-3H856.6
                       M856.6,148h-833c-2.2,0-4,1.8-4,4v260c0,2.2,1.8,4,4,4h833c2.2,0,4-1.8,4-4V152C860.6,149.8,858.8,148,856.6,148L856.6,148z"/>
              </g>
              <g>
                  <g>
                      <rect x="20.6" y="379" style="fill:#DDDDDD;" width="839" height="1"/>
                  </g>
                  <g>
                      <rect x="20.6" y="343" style="fill:#DDDDDD;" width="839" height="1"/>
                  </g>
                  <g>
                      <rect x="20.6" y="307" style="fill:#DDDDDD;" width="839" height="1"/>
                  </g>
                  <g>
                      <rect x="20.6" y="271" style="fill:#DDDDDD;" width="839" height="1"/>
                  </g>
              </g>
              <g>
                  <path style="fill:#F5F5F5;" d="M20.1,186.5V152c0-1.9,1.6-3.5,3.5-3.5h833c1.9,0,3.5,1.6,3.5,3.5v34.5H20.1z"/>
                  <path style="fill:#DDDDDD;" d="M856.6,149c1.7,0,3,1.3,3,3v34h-839v-34c0-1.7,1.3-3,3-3H856.6 M856.6,148h-833c-2.2,0-4,1.8-4,4
                      v34v1h1h839h1v-1v-34C860.6,149.8,858.8,148,856.6,148L856.6,148z"/>
              </g>
              <text transform="matrix(1 0 0 1 33.6409 174.0457)" style="fill:#808080; font-family:'Helvetica'; font-size:16px;">Panel title</text>
              <rect x="37.6" y="216" style="fill:none;" width="801" height="41"/>
              <text transform="matrix(1 0 0 1 37.6409 226.1122)"><tspan x="0" y="0" style="fill:#333333; font-family:'Helvetica'; font-size:14px;">Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. </tspan><tspan x="0" y="16.8" style="fill:#333333; font-family:'Helvetica'; font-size:14px;">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula.</tspan></text>
              <g>
                  <rect x="20.6" y="272" style="fill:#F7F7F7;" width="839" height="35"/>
              </g>
              <text transform="matrix(1 0 0 1 102.6409 294.0457)"><tspan x="0" y="0" style="font-family:'Helvetica'; font-size:14px;">First Name</tspan><tspan x="0" y="36" style="font-family:'Helvetica'; font-size:14px;">John</tspan><tspan x="0" y="72" style="font-family:'Helvetica'; font-size:14px;">Mary</tspan><tspan x="0" y="108" style="font-family:'Helvetica'; font-size:14px;">James</tspan></text>
              <text transform="matrix(1 0 0 1 272.6409 294.0457)"><tspan x="0" y="0" style="font-family:'Helvetica'; font-size:14px;">Last Name</tspan><tspan x="0" y="36" style="font-family:'Helvetica'; font-size:14px;">Boo</tspan><tspan x="0" y="72" style="font-family:'Helvetica'; font-size:14px;">Brown</tspan><tspan x="0" y="108" style="font-family:'Helvetica'; font-size:14px;">Mooray</tspan></text>
              <text transform="matrix(1 0 0 1 462.6409 294.0457)"><tspan x="0" y="0" style="font-family:'Helvetica'; font-size:14px;">Username</tspan><tspan x="0" y="36" style="font-family:'Helvetica'; font-size:14px;">johny81</tspan><tspan x="0" y="72" style="font-family:'Helvetica'; font-size:14px;">missmary</tspan><tspan x="0" y="108" style="font-family:'Helvetica'; font-size:14px;">jijames</tspan></text>
              <text transform="matrix(1 0 0 1 632.6409 294.0457)" style="font-family:'Helvetica'; font-size:14px;">Active</text>
              <text transform="matrix(1 0 0 1 762.6409 294.0457)" style="font-family:'Helvetica'; font-size:14px;">Boss</text>
              <text transform="matrix(1 0 0 1 39.6409 294.0457)"><tspan x="0" y="0" style="font-family:'Helvetica'; font-size:14px;">#</tspan><tspan x="0" y="36" style="font-family:'Helvetica'; font-size:14px;">1</tspan><tspan x="0" y="72" style="font-family:'Helvetica'; font-size:14px;">2</tspan><tspan x="0" y="108" style="font-family:'Helvetica'; font-size:14px;">3</tspan></text>
              <g>
                  <g>
                      <path style="fill:#FFFFFF;" d="M636.1,405c-1.4,0-2.5-1.1-2.5-2.5v-10c0-1.4,1.1-2.5,2.5-2.5h10c1.4,0,2.5,1.1,2.5,2.5v10
                          c0,1.4-1.1,2.5-2.5,2.5H636.1z"/>
                      <path style="fill:#CCCCCC;" d="M646.1,390.5c1.1,0,2,0.9,2,2v10c0,1.1-0.9,2-2,2h-10c-1.1,0-2-0.9-2-2v-10c0-1.1,0.9-2,2-2
                          H646.1 M646.1,389.5h-10c-1.7,0-3,1.3-3,3v10c0,1.7,1.3,3,3,3h10c1.7,0,3-1.3,3-3v-10C649.1,390.9,647.8,389.5,646.1,389.5
                          L646.1,389.5z"/>
                  </g>
                  <g>
                      <path style="fill:#FFFFFF;" d="M636.1,369c-1.4,0-2.5-1.1-2.5-2.5v-10c0-1.4,1.1-2.5,2.5-2.5h10c1.4,0,2.5,1.1,2.5,2.5v10
                          c0,1.4-1.1,2.5-2.5,2.5H636.1z"/>
                      <path style="fill:#CCCCCC;" d="M646.1,354.5c1.1,0,2,0.9,2,2v10c0,1.1-0.9,2-2,2h-10c-1.1,0-2-0.9-2-2v-10c0-1.1,0.9-2,2-2
                          H646.1 M646.1,353.5h-10c-1.7,0-3,1.3-3,3v10c0,1.7,1.3,3,3,3h10c1.7,0,3-1.3,3-3v-10C649.1,354.9,647.8,353.5,646.1,353.5
                          L646.1,353.5z"/>
                  </g>
                  <g>
                      <path style="fill:#FFFFFF;" d="M636.1,333c-1.4,0-2.5-1.1-2.5-2.5v-10c0-1.4,1.1-2.5,2.5-2.5h10c1.4,0,2.5,1.1,2.5,2.5v10
                          c0,1.4-1.1,2.5-2.5,2.5H636.1z"/>
                      <path style="fill:#CCCCCC;" d="M646.1,318.5c1.1,0,2,0.9,2,2v10c0,1.1-0.9,2-2,2h-10c-1.1,0-2-0.9-2-2v-10c0-1.1,0.9-2,2-2
                          H646.1 M646.1,317.5h-10c-1.7,0-3,1.3-3,3v10c0,1.7,1.3,3,3,3h10c1.7,0,3-1.3,3-3v-10C649.1,318.9,647.8,317.5,646.1,317.5
                          L646.1,317.5z"/>
                  </g>
              </g>
              <g>
                  <g>
                      <circle style="fill:#FFFFFF;" cx="773.6" cy="397" r="8"/>
                      <circle style="fill:none;stroke:#CCCCCC;stroke-miterlimit:10;" cx="773.6" cy="397" r="8"/>
                  </g>
                  <g>
                      <circle style="fill:#FFFFFF;" cx="773.6" cy="361" r="8"/>
                      <circle style="fill:none;stroke:#CCCCCC;stroke-miterlimit:10;" cx="773.6" cy="361" r="8"/>
                  </g>
                  <g>
                      <circle style="fill:#FFFFFF;" cx="773.6" cy="325" r="8"/>
                      <circle style="fill:none;stroke:#CCCCCC;stroke-miterlimit:10;" cx="773.6" cy="325" r="8"/>
                  </g>
              </g>
              <circle style="fill:#666666;" cx="773.6" cy="361" r="4"/>
              <path style="fill:#666666;" d="M634.6,362.9l2.1-2.1l2.1,2.1l5.7-6.1l2.1,2.1l-7.8,8.2L634.6,362.9z"/>
              <path style="fill:#666666;" d="M634.6,326.9l2.1-2.1l2.1,2.1l5.7-6.1l2.1,2.1l-7.8,8.2L634.6,326.9z"/>
          </g>
      </g>
      <g id="masthead-4_1_">
          <rect style="fill:#222222;" width="1099.8" height="57.2"/>
          <rect x="485.3" width="100.9" height="57.2"/>
          <text transform="matrix(1 0 0 1 263.796 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">Violations</text>
          <text transform="matrix(1 0 0 1 403.4718 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">Statistics</text>

              <text id="link-settings-4_1_" transform="matrix(1 0 0 1 507.9523 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">Settings</text>
          <text transform="matrix(1 0 0 1 1018.2599 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">Log Out</text>
          <text transform="matrix(1 0 0 1 940.174 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">Profile</text>

              <text id="link-people-4_1_" transform="matrix(1 0 0 1 143.9181 34.3378)" style="fill:#FFFFFF; font-family:'Helvetica'; font-size:15px;">People</text>

              <text transform="matrix(1 0 0 1 19.6407 34.3378)" style="opacity:0.5;fill:#FFFFFF; font-family:'Helvetica-Bold'; font-size:20px;">Company</text>
          <g>
              <path style="fill:#ED1C24;" d="M342,29.5c0,5,4,9,9,9h9.5c5,0,9-4,9-9v-1.8c0-4.9-4-9-9-9H351c-5,0-9,4.1-9,9V29.5z"/>
          </g>
          <text transform="matrix(1 0 0 1 347.8497 32.9945)" style="fill:#FFFFFF; font-family:'Helvetica'; font-size:13px;">42</text>
          <g>
              <path style="fill:#ED1C24;" d="M201.3,29.5c0,5,4.1,9,9,9h9.5c4.9,0,9-4,9-9v-1.8c0-4.9-4.1-9-9-9h-9.5c-4.9,0-9,4.1-9,9V29.5z"/>
          </g>
          <text transform="matrix(1 0 0 1 208.1759 32.9945)" style="fill:#FFFFFF; font-family:'Helvetica'; font-size:13px;">84</text>
      </g>
        
      </g>
      
    </svg>
  </div>
  
</div>
            
          
!
            
              .scr-container {
  
  background: #eee;
  height: 100%;
  margin: 0 auto;
  position: relative;
  width: 100%;
  
}

.scr {
  
  bottom: 0;
  height: 100%;
  left: 0;
  margin: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 600ms ease-out;
  width: 100%;
  z-index: 10;
  
  &.load {
      
    opacity: 1;
    z-index: 100;
    
  }
  
}



            
          
!
            
              var mode = 1, // 0 : click entire screen to advance, 1 : click specific elements to advance
    scrAll = $('.scr'),
    swapScrClass = function (next) {
      scrAll.removeClass('load');
      $('#' + next).addClass('load');
    },
    loadScr = function (scr) {
      var scrNext = scr.data('scrnext');
      scr.click(function() {
        swapScrClass(scrNext);
      });
    },
    clickToLoadScr = function (selector, scr) {
      $(selector).click(function() {
        swapScrClass(scr);
      });
    };

if (mode === 0) {
  
  scrAll.each(function () {
    loadScr($(this));
  });
  
} else {
  
  // specific elements, e.g. SVG group ID's
  
  clickToLoadScr("#btn-primary-1_1_", 2);
  clickToLoadScr("#btn-primary-2_1_", 3);
  clickToLoadScr("#btn-primary-3_1_", 1);
  clickToLoadScr("#link-settings-1_1_, #link-settings-2_1_, #link-settings-3_1_, #link-settings-4_1_", 4);
  clickToLoadScr("#link-people-1_1_, #link-people-2_1_, #link-people-3_1_, #link-people-4_1_", 1);
  
  
}





            
          
!
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