Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

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

            
              <div class="desktop">
  <div id="signon" class="window  draggable">
    <div class="window-title">
      <span>
                    <b>Sign On</b>
                </span>
      <div class="sign controls min">
      </div>

    </div>
    <div class="window-body">
      <div class="window-side">
        <svg width="128px" height="128px" viewBox="0 0 210 184" height="100%" width="100%">
                        <use xlink:href="#aol" style="fill:#66ccff;"></use>
                    </svg>
        <div class="window-side bottom">
          <svg width="32px" height="32px" viewBox="0 0 645 803">
                            <use xlink:href="#aolman" style="fill:#66ccff;"></use>
                        </svg>
          <b>version 4.0</b>
        </div>
      </div>
      <div class="window-main">
        <div class="select">
          <b>Select Screen Name:</b>
          <select>
                            <option selected>Shopgirl</option>
                            <option>New User</option>
                        </select>
        </div>
        <div class="select">
          <b>Select Location:</b>
          <select>
                            <option>Home</option>
                            <option>ISP/LAN Connection</option>
                        </select>
        </div>
        <div class="buttons">
          <button class="aol">SETUP</button>
          <button class="aol">HELP</button>
          <button id="btnsignon" class="aol">SIGN ON</button>
        </div>
      </div>
    </div>
  </div>

  <div id="connect" class="window  draggable" style="width:50vw;">
    <div class="window-title">
      <span>
                    <b>Connecting to AOL</b>
                </span>
      <div class="cnct controls min">
      </div>
    </div>
    <div class="window-body">

      <div class="window-main">

        <svg width="128px" height="128px" viewBox="0 0 210 184" height="100%" width="100%">
                        <use xlink:href="#aol" style="fill:#006699;"></use>
                    </svg>
        <div class="boxwrapper">
          <div class="box">
            <svg width="128px" height="128px" viewBox="0 0 645 803">

                                <use xlink:href="#aolman" style="fill:#66ccff;"></use>
                            </svg>
          </div>
          <div class="box">
            <svg width="128px" height="128px" viewBox="0 0 645 803">
                                <g id="connecting">
                                    <line x1="0" y1="150" x2="250" y2="150" style="stroke:rgb(2,0,5);stroke-width:25" />
                                    <line x1="50" y1="270" x2="150" y2="270" style="stroke:rgb(2,0,5);stroke-width:25" />
                                    <line x1="20" y1="370" x2="120" y2="370" style="stroke:rgb(2,0,55);stroke-width:25" />
                                    <use xlink:href="#aolman" style="fill:#66ccff;"></use>
                                </g>
                            </svg>
          </div>
          <div class="box ">
            <svg width="128px" height="128px" viewBox="0 5 210 87">
                                <g id="connected">
                                    <use x="0" y="0" xlink:href="#aol" style="fill:#006699;">
                                    </use>
                                    <circle cx="30" cy="120" style="fill: white;stroke:black;stroke-width:5" r="20" />
                                    <circle cx="30" cy="170" style="fill: red; " r="30" />
                                    <circle cx="100" cy="110" style="fill: white;stroke:black;stroke-width:5" r="20" />
                                    <circle cx="100" cy="160" style="fill: yellow; " r="30" />
                                    <circle cx="170" cy="120" style="fill: white;stroke:black;stroke-width:5" r="20" />
                                    <circle cx="170" cy="170" style="fill: green; " r="30" />
                                    <line x1="170" y1="160" x2="250" y2="100" style="stroke:green;stroke-width:15" />
                                </g>
                            </svg>
          </div>
        </div>
        <div id="status">Dialing</div>
        <button id="cancel" class="aol">CANCEL</button>
        <hr>
      </div>
    </div>
  </div>

  <div id="newmail" class="window  draggable" style="width:50vw;">
    <div class="window-title">
      <span>
                    <b>You've got Mail</b>
                </span>
      <div class="mail controls min">
      </div>
    </div>
    <div class="window-body">

      <div class="window-main">
        <textarea>You've Got Mail is a 1998 American romantic comedy-drama film starring Tom Hanks and Meg Ryan, directed by Nora Ephron, and co-written by Nora and Delia Ephron, inspired by the play Parfumerie by Miklós László. The film is about two people in an online romance who are unaware that they are also business rivals.
Conversely, Michael O'Sullivan of The Washington Post criticized the film's use of product placement and its overly "adorable" characters, writing, "For some reason, this film made me feel like a Christmas goose being fattened for slaughter. Its force-fed diet of whimsy cloyed long before the eagerly anticipated romantic payoff arrived to put me out of my misery." Rolling Stone later included You've Got Mail in their list of "Most Egregious Product Placements in Movie & TV History" for the film's frequent use of AOL trademarks. (Wikipedia)
                    </textarea>
        <div class="buttons">
          <button class="aol">DELETE</button>
          <button class="aol">SEND</button>
        </div>
        <hr>
      </div>
    </div>
  </div>

  <div class="icon draggable">
    <svg width="64" height="64" viewBox="0 0 250 300">
                <use xlink:href="#disk" style="fill:#111; "></use>
            </svg>
    <b>Hard Disk</b>
  </div>

  <div class="icon note draggable">
    <svg width="64" height="64" viewBox="0 0 200 350">
                <use xlink:href="#note" style="fill:#eee; "></use>
            </svg>
    <b>Note Pad</b>
  </div>

  <div id="iconaol" class="icon aol draggable">
    <svg width="64" height="64" viewBox="0 0 175 203">
                <use xlink:href="#aol" style="fill:#66ccff; "></use>
            </svg>
    <b>AOL 4.0</b>
  </div>
  <div class="dockbar">

    <svg viewBox="0 0 500 550" height="16px" width="16px" style="transform:rotate(-15deg); ">
                <use xlink:href="#apple" style=""></use>
            </svg>
    <span>File</span>
    <span>Edit</span>
    <span>Window</span>
    <span>Sign On</span>
    <span>Help</span>

    <div class="taskbar">
      <div class="time"></div>

      <span>&#x1F509;</span>

      <svg width="24px" height="100%" viewBox="20 5 210 84" style="fill:#006699; ">
                    <use xlink:href="#aol" style=""></use>
                </svg>

    </div>
  </div>
  <div class="menubar">

    <span>Read</span>
    <span>Write</span>
    <span>Mail Centre</span>
    <span>Print</span>
    <span>My Files</span>
    <span>My AOL</span>
    <span>Favourites</span>
    <span>Internet</span>
    <span>Channels</span>
    <span>People</span>
    <span>Weather</span>

  </div>
</div>
<svg>
        <symbol id="aol">
            <g id="g1" transform="matrix(1.25,0,0,-1.25,-270.68453,620.85789)">
                <g id="g2" transform="scale(0.1,0.1)">
                    <path id="p2" d="m3078.3,4781.1c-40.84,22.69-107.39,18.15-149.74-4.54-77.14-42.35-133.11-124.02-139.15-208.73,30.25,63.53,86.21,131.59,158.81,143.69,51.42,7.56,102.86-12.1,133.11-60.5,33.26-57.47,21.17-142.18,0-199.65,54.45,51.43,74.11,119.49,74.11,195.12,62.02-108.91,128.56-216.3,189.07-326.71h-311.59c75.63,42.35,128.57,125.53,133.11,210.24-33.28-66.55-87.73-131.6-164.87-143.69-52.94-6.05-102.85,10.59-131.59,58.98-36.31,54.46-18.15,134.62,3.03,190.59h-6.06c-66.55-68.07-92.26-178.48-49.91-266.21,9.08-19.66,25.71-37.82,45.38-49.91h-264.69c122.5,213.27,246.54,428.04,373.59,639.8l107.5-178.5"
                    />
                    <path id="p3" d="m3057.1,4136.8c-62.02-105.88-111.93-219.32-157.31-329.73,52.94,39.32,101.34,92.26,154.28,133.1,13.61,10.59,7.56,37.81,28.73,36.3,12.11-10.59,22.69-22.69,18.16-37.81-10.59-34.79-31.77-66.56-37.82-99.83,54.46,57.47,114.96,98.31,172.43,154.28,9.08-10.6,30.25-19.66,25.72-36.3-10.59-16.64-10.59-36.3-19.67-52.94l1.52-1.51c31.76,36.3,71.09,58.98,107.39,84.7,13.61,0,21.17-16.64,28.74-27.23v-16.63c-19.67-42.36-43.87-83.19-60.51-128.57h6.05c42.35,46.88,111.94,69.57,131.6,131.58,22.68,19.67,33.27,72.61,75.62,57.49,12.1-19.67,40.84-36.31,48.4-60.5-39.32-27.23-104.37-19.67-117.98-77.14-7.56-19.67-22.68-40.85-15.12-62.02,119.49,60.5,243.52,108.9,372.08,145.2-130.08-57.47-264.69-114.95-381.16-214.78-21.17,1.52-31.75,27.23-42.35,42.36-3.02,31.75,9.08,55.96,18.15,83.19-18.15-4.55-36.3-22.69-51.42-36.31l-78.66-84.7c-18.15-7.56-21.17,18.15-31.76,27.23-6.05,13.61,9.08,21.17,10.59,31.77,19.66,49.91,52.94,93.77,69.57,145.2h-9.07c-65.04-48.41-133.1-116.47-161.84-187.56-18.16,0-22.69,21.18-27.22,33.28,21.17,51.42,52.94,98.31,72.6,151.25h-6.06c-69.57-65.04-136.12-130.08-189.06-201.17-10.59,10.59-27.23,24.2-18.15,40.84,15.12,40.84,36.3,78.65,49.91,121-7.56,4.55-13.61-6.05-19.66-9.07-60.5-54.45-121-114.95-166.38-178.48-19.66-12.1-21.17,15.12-31.76,21.17,3.02,31.77,21.18,57.49,27.22,87.73-27.22-9.07-49.92-37.81-72.61-60.5-16.62-18.15-33.26-34.79-49.9-51.43-13.61,3.03-21.18,18.15-28.74,28.74,12.1,52.95,40.83,98.32,60.5,148.23-18.15-1.51-33.27-24.2-46.89-34.78-34.78-40.85-49.91-89.25-78.66-133.11-18.14-6.05-21.17,18.15-28.73,28.73,24.2,62.02,58.99,121.01,81.68,184.53h-13.62c-69.57-43.85-136.13-107.39-204.19-161.84-12.1-4.53-16.64,9.08-22.69,15.13-60.5-87.73-98.31-199.65-195.12-263.19-33.27,1.52-71.09,28.75-80.15,60.51,6.04,102.86,55.95,189.07,98.31,276.8,55.96,90.75,114.95,183.01,193.6,260.15,31.77-7.56,68.06-9.07,78.66-45.38-1.52-39.32-18.15-71.08-42.36-99.82l-4.53,4.54c3.02,31.76,16.64,62.01,9.08,93.77h-7.57c-116.47-133.1-213.27-282.84-270.75-443.17-3.02-15.13-9.07-31.77-1.51-45.37,7.57-12.11,22.69-15.13,34.79-13.62,80.16,62.01,128.56,152.77,178.48,234.45-3.02,63.52,30.25,111.92,66.56,155.78,7.56,6.05,21.17,3.03,30.24-4.53,6.05-40.84-28.74-72.61-43.87-108.9v-4.54c31.77-4.54,46.89,30.25,77.14,39.32,45.38,22.7,78.66,63.52,127.06,83.19,19.67,10.59,19.67-19.67,31.77-25.71,1.51-22.69-18.15-37.81-16.65-57.48,30.25,18.15,52.95,49.91,87.73,54.45,10.59-9.07,9.08-21.17,15.13-31.75-16.64-40.85-39.32-80.18-52.94-122.52h7.56c45.38,45.37,122.52,78.64,131.59,148.22,39.33,90.76,84.7,180,136.13,266.21,12.11-16.64,30.25-36.3,19.67-60.5"
                    />
                    <path id="p4" d="m3196.2,4138.3c-6.04-43.86-36.29-80.17-60.49-117.98-6.06-4.53-6.06-16.63-16.64-13.61-4.55,16.64-34.79,30.26-18.15,49.92,30.25,30.24,63.52,54.45,95.28,81.67"
                    />
                    <path id="p5" d="m3834.5,3701.1c-189.07-4.54-379.65,0-574.77-18.15-319.14-21.18-615.6-92.27-906-179.99,22.69,108.9,152.77,74.11,229.9,107.39,399.31,83.19,834.92,125.54,1250.9,90.75"
                    />
                    <path id="p9" d="m2251.4,4164.8-15.14-35.61-15.31,0,57.91,131.46,56.41-131.46-15.47,0-14.82,35.61-53.58,0,0,0zm27.13,63.23-21.47-50.26,42.44,0-20.97,50.26"
                    />
                    <path id="pa" d="m2476.4,4261.8,45.6-105.33,45.76,105.33,25.46-132.61-14.31,0-16.15,84.86-0.33,0-40.43-90.02-40.27,90.02-0.34,0-16.14-84.86-14.31,0,25.46,132.61"
                    />
                    <path id="pb" d="m2697.6,4254.7,65.07,0,0-12.98-51.08,0,0-37.28,49.58,0,0-12.98-49.58,0,0-49.26,51.08,0,0-12.97-65.07,0,0,125.47"
                    />
                    <path id="pc" d="m2900.2,4129.2-13.98,0,0,125.47,18.14,0c23.8,0,45.93-6.33,45.93-34.62,0-19.3-12.15-32.95-31.45-34.61l39.94-56.24h-17.14l-37.94,55.08h-3.5v-55.08zm0,67.39,4.34,0c15.8,0,31.77,2.99,31.77,22.47,0,20.63-15.14,22.63-31.95,22.63h-4.16v-45.1"
                    />
                    <path id="pd" d="m3076.6,4129.2,13.973,0,0,125.47-13.973,0,0-125.47z" />
                    <path id="pe" d="m3311.5,4227.2c-9.99,10.32-23.79,16.64-38.27,16.64-27.96,0-50.59-24.29-50.59-51.92,0-27.62,22.8-51.91,50.93-51.91,14.14,0,27.94,6.65,37.93,16.63v-17.31c-10.81-7.82-24.13-12.3-37.44-12.3-35.44,0-65.39,28.79-65.39,64.39,0,35.94,29.45,65.4,65.39,65.4,13.98,0,26.29-3.99,37.44-12.32v-17.3"
                    />
                    <path id="pf" d="m3453.7,4164.8-15.14-35.61-15.31,0,57.91,131.46,56.4-131.46-15.47,0-14.81,35.61-53.58,0,0,0zm27.12,63.23-21.47-50.26,42.44,0-20.97,50.26"
                    />
                </g>
            </g>
        </symbol>


        <symbol id="aolman">
            <g transform="translate(-38.603457,-116.34853)" id="layer1">
                <path style="fill:#ffff00;fill-opacity:1;stroke:#000000;stroke-width:35;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
                    id="path12" d="m 457.53529,342.60847 c 29.04171,0 52.978,-9.81129 73.37749,-30.99509 21.19119,-20.40689 31.00248,-44.34318 31.00248,-73.37749 0,-29.0417 -9.81129,-52.97799 -31.00248,-73.77703 -20.40689,-20.79904 -44.34318,-30.61033 -73.37749,-30.61033 -29.03431,0 -52.97799,9.81129 -74.16179,30.61033 -21.1838,20.79904 -31.39464,44.73533 -31.39464,73.77703 0,29.03431 10.20345,52.978 31.39464,73.37749 21.1912,21.1912 45.12748,30.99509 74.16179,30.99509 z m 162.85554,92.61531 c -60.42895,24.7206 -117.72806,29.0417 -173.05158,10.98776 l -12.55638,-4.31372 -4.31371,-12.55637 c -1.96078,-5.49018 -3.13724,-13.34071 -4.31371,-24.32846 l -0.39215,-5.88234 c -21.1912,-5.49757 -39.24516,-12.16422 -55.72309,-23.54412 -34.13973,19.23041 -58.86033,45.12749 -75.34566,78.48292 -16.87009,32.95586 -27.07353,78.47549 -31.78676,135.782 -3.1373,26.28922 -6.2745,43.1667 -10.2035,51.01721 -38.0687,79.63719 -101.2427,132.23043 -191.112904,156.15931 l 37.2844,102.41919 c 61.997504,-14.91674 113.406904,-39.23777 153.828504,-72.20103 23.9363,-19.23783 51.01723,-49.44121 81.23541,-90.65449 l 13.34069,-17.26968 c 4.70587,-4.69847 10.98776,-7.83572 18.04656,-7.83572 4.70586,0 9.81128,1.16911 12.55637,4.30631 94.57608,40.81381 162.46339,96.14474 202.09329,167.5614 l 80.83582,-47.09563 C 621.96686,759.7362 572.1261,696.1774 508.95206,646.7288 489.33689,631.81209 469.70691,618.08665 448.52311,607.1063 l -27.08093,-14.52456 c -9.02697,-3.5294 -13.34068,-12.17162 -12.16422,-23.94368 1.96078,-18.04656 10.98776,-27.06614 25.89707,-27.06614 l 17.6618,2.74509 81.23539,4.32111 c 33.35542,-4.32111 72.59317,-18.04655 117.72066,-40.81377 l -31.40205,-72.60057 z"
                />
            </g>
        </symbol>


        <symbol id="disk">
            <g>
                <g>
                    <path d="M232.4531 267.1875 Q232.4531 281.8125 229.3594 284.9062 Q226.2656 288 211.6406 288 L45.1406 288 Q30.5156 288 27.4219 284.9062 Q24.3281 281.8125 24.3281 267.1875 L24.3281 211.6406 Q24.3281 197.0156 27.4219 193.9219 Q30.5156 190.8281 45.1406 190.8281 L211.6406 190.8281 Q226.2656 190.8281 229.3594 193.9219 Q232.4531 197.0156 232.4531 211.6406 L232.4531 267.1875 ZM225.5625 267.1875 L225.5625 211.6406 Q225.5625 202.5 223.1719 200.1094 Q220.7812 197.7188 211.6406 197.7188 L45.1406 197.7188 Q36.1406 197.7188 33.6797 200.1797 Q31.2188 202.6406 31.2188 211.6406 L31.2188 267.1875 Q31.2188 276.1875 33.6797 278.6484 Q36.1406 281.1094 45.1406 281.1094 L211.6406 281.1094 Q220.6406 281.1094 223.1016 278.6484 Q225.5625 276.1875 225.5625 267.1875 ZM201.2344 232.4531 L55.5469 232.4531 L55.5469 225.5625 L201.2344 225.5625 L201.2344 232.4531 ZM201.2344 253.2656 L55.5469 253.2656 L55.5469 246.375 L201.2344 246.375 L201.2344 253.2656 ZM76.3594 270.7031 L62.4375 270.7031 L62.4375 263.6719 L76.3594 263.6719 L76.3594 270.7031 Z"
                        stroke="none" />
                </g>
            </g>
        </symbol>

        <symbol id="note">
            <g>
                <g>
                    <path d="M174.0938 327.7969 Q174.0938 329.4844 171.4922 332.2266 Q168.8906 334.9688 167.2031 334.9688 L17.0156 334.9688 Q16.1719 334.9688 13.8516 332.7188 Q11.5312 330.4688 11.5312 329.4844 L11.5312 112.6406 Q11.5312 108.2812 15.3281 105.4688 Q17.7188 103.7812 77.625 88.1719 Q137.1094 72.7031 139.6406 72.7031 Q148.0781 72.7031 148.0781 78.8906 L148.0781 106.1719 L170.5781 106.1719 Q171.7031 106.1719 172.8984 108.0703 Q174.0938 109.9688 174.0938 111.0938 L174.0938 327.7969 ZM135.7031 106.0312 L135.7031 85.5 L58.3594 106.0312 L135.7031 106.0312 ZM161.2969 322.1719 L161.2969 118.5469 L32.9062 118.5469 L32.9062 322.1719 L161.2969 322.1719 ZM138.6562 198.2812 L56.9531 198.2812 L56.9531 141.75 L138.6562 141.75 L138.6562 198.2812 ZM132.4688 192.6562 L132.4688 147.375 L63.1406 147.375 L63.1406 192.6562 L132.4688 192.6562 Z"
                        stroke="none" />
                </g>
            </g>
        </symbol>
        <symbol id="apple">

            <g id="g3" transform="matrix(0.9869271,0,0,0.99106002,3.5008005,0.90716963)">

                <path d="m 25.824,200.612 c 0.166,-0.273 0.342,-0.542 0.518,-0.806 28.447,-43.799 73.32,-69.434 115.518,-69.434 42.969,0 69.98,23.555 105.498,23.555 34.463,0 55.454,-23.589 105.132,-23.589 37.534,0 77.329,20.439 105.674,55.781 -7.837,4.292 -14.907,9.165 -21.226,14.521 l -411.114,-0.028 0,0 z"
                    id="path5" style="fill:#61bb46;fill-rule:evenodd;stroke:#61bb46;stroke-width:2.9849;stroke-miterlimit:2.61310005"
                />

                <path d="M 314.808,90.875 C 332.84,67.716 346.556,35.016 341.585,1.583 312.103,3.604 277.62,22.374 257.479,46.808 c -18.276,22.197 -33.364,55.117 -27.49,87.095 32.187,1.001 65.483,-18.218 84.819,-43.028 l 0,0 z"
                    id="path7" style="fill:#61bb46;fill-rule:evenodd;stroke:#61bb46;stroke-width:2.9849;stroke-miterlimit:2.61310005"
                />

                <path d="M 24.356544,199.96661 C 12.105918,219.15949 3.6294315,246.66842 1.38,270.79701 l 397.43701,-0.0102 c 4.29717,-26.39752 18.58564,-51.61732 41.233,-70.79103 l -415.693466,-0.0292 0.02346,0 z"
                    id="path9" style="fill:#fdb827;fill-rule:evenodd;stroke:none" />

                <path d="M 4.989,340.998 C 1.127,316.354 0.502,292.595 2.928,270.798 l 394.341,-0.01 c -3.857,23.638 -0.62,48.237 9.136,70.225 l -401.416,-0.015 0,0 z"
                    id="path11" style="fill:#f5821f;fill-rule:evenodd;stroke:#f5821f;stroke-width:2.9849;stroke-miterlimit:2.61310005"
                />

                <path d="M 24.261,411.193 C 14.949,387.609 8.573,363.922 4.989,340.998 l 401.416,0.015 c 12.427,28.018 35.425,51.821 67.808,64.053 -0.962,2.139 -1.89,4.185 -2.783,6.157 l -447.169,-0.03 0,0 z"
                    id="path13" style="fill:#e03a3e;fill-rule:evenodd;stroke:#e03a3e;stroke-width:2.9849;stroke-miterlimit:2.61310005"
                />

                <path d="m 471.429,411.222 c -11.118,24.443 -17.563,37.129 -32.949,60.547 -2.07,3.145 -4.209,6.362 -6.436,9.609 L 61.517,481.412 C 60.33,479.644 59.154,477.877 57.996,476.124 44.143,455.025 32.928,433.15 24.261,411.192 l 447.168,0.03 0,0 z"
                    id="path15" style="fill:#963d97;fill-rule:evenodd;stroke:#963d97;stroke-width:2.9849;stroke-miterlimit:2.61310005"
                />
                <path d="m 472.972,550.7778 c 13.589,0 24.604,-11.016 24.604,-24.595 0,-13.589 -11.016,-24.6 -24.604,-24.6 -13.588,0 -24.604,11.011 -24.604,24.6 0,13.579 11.015,24.595 24.604,24.595 m -6.992,-9.648 v -27.485 h 11.011 m 6.645,27.182 -6.553,-13.892 m -11.054,-0.244 h 11.006 m -0.01,-0.034 c 2.734,0 5.503,-2.891 5.503,-6.46 0,-3.799 -2.886,-6.553 -5.537,-6.553"
                    id="path17" style="fill:none;stroke:#000000;stroke-width:3.89479995;stroke-miterlimit:2.61310005" />

                <path d="m 432.044,481.378 c -22.666,33.203 -53.096,69.741 -90.02,70.088 -36.03,0.327 -45.273,-23.447 -94.155,-23.179 -48.882,0.273 -59.087,23.594 -95.117,23.257 -38.521,-0.356 -68.433,-36.24 -91.235,-70.132 l 370.527,-0.034 0,0 z"
                    id="path19" style="fill:#009ddc;fill-rule:evenodd;stroke:#009ddc;stroke-width:2.9849;stroke-miterlimit:2.61310005"
                />
            </g>
        </symbol>
 
            
          
!
            
              :root {
  --col-bg: #7c7dc2;
  --col-main: #c0c0c0;
  --col-bg2: #006699;
  --col-title: #000080;

  --border1: 1px solid white;
  --border2: 1px solid #666;
  --border3: 1px solid #222;

  --win-title: repeating-linear-gradient(
    to bottom,
    #717070 0%,
    #717070 1%,
    #eee 2%,
    #eee 3%,
    #717070 4%,
    #717070 5%
  );
}

* {
  font: 18px/0.8 "VT323";
}

body {
  background: black;
  margin: 0;
  min-height: 100vh;
  overflow: auto;
}

.desktop {
  background: var(--col-bg);

  position: absolute;
  margin: 0;
  top: 40px;
  width: 100%;
  height: calc(100vh - 40px);
  min-height: calc(100vh - 40px);
}

.window {
  background: #eee;
  overflow: hidden;

  border: 1px solid black;
  box-shadow: inset 0 0 0 2px #eee, inset 0 0 0 3px black;
  position: absolute;
  top: 50%;
  top: calc(25vh - 40px);
  left: calc(50vw - 250px);
  width: 500px;
  min-height: 50vh;
}

.window-title {
  background: var(--win-title);
  padding: 1px;
  color: black;
  background-size: 100% 16px;
  border: 3px solid #ccc;
  text-align: center;
  cursor: move;
}

.window-title span {
  background: #ccc;
  padding: 2px 10px 2px 10px;
}

.controls {
  background: #999;

  padding: 2px;
  width: 10px;
  height: 10px;
  color: #000;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 4px;
  box-shadow: 3px 0 0 0 #ccc, -3px 0 0 0 #ccc, inset 1px 1px 0 0 black,
    inset 1px 1px 0 2px #ccc, inset -2px -2px 0 0 black;
}

.controls.min {
  left: 15px;
}

.controls.close {
  right: 1px;
}

.window-body {
  background: white;
  display: flex;
  margin: 0 3px 3px 3px;
  min-height: 50vh;
  border-top: 1px solid black;
}

.window-side {
  background: var(--col-bg2);
  border: var(--border3);
  padding: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.window-side.bottom {
  border: none;
  margin-bottom: 10px;
}

.window-main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

b {
  font-weight: 600;
  letter-spacing: 1px;
}

.select {
  padding-top: 80px;
  display: flex;
  flex-direction: column;
}

.buttons {
  padding-top: 25px;
  padding-bottom: 25px;

  display: flex;
  justify-content: space-between;
  width: 90%;
}

.dockbar {
  background: var(--col-main);
  width: 100%;
  position: fixed;
  top: 0;
  border-top: 2px solid #efefef;
  padding: 3px;
  padding-left: 20px;
  display: flex;
  align-items: center;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.dockbar > span {
  padding-left: 20px;
}

.menubar {
  background: var(--col-bg2);
  width: 100%;
  position: fixed;
  top: 25px;
  color: white;
  font-weight: bold !important;
  padding: 5px;
  display: flex;
  align-content: center;
  justify-content: space-around;
}

.taskbar {
  position: absolute;

  left: calc(100vw - 120px);
  width: 100px;
  padding: 3px;
  display: flex;
  justify-content: space-between;
  top: 2px;
}

button.aol {
  background: var(--col-bg2);
  color: white;
  border: var(--border1);
  box-shadow: 3px 3px gray;
  margin-right: 10px;
  padding: 5px 20px 5px 20px;
  border-radius: 20px;
}

#aol {
  display: none;
}

select {
  border: 1px solid black;
  box-shadow: 2px 2px 0 0 black;
  -webkit-appearance: none;
  appearance: none;

  width: 220px;
  margin-top: 8px;
  background: white;

  margin-right: 19px;
}

select:not([multiple]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  background-position: right 50%;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);

  padding-right: 0.5em;
}

option:selection {
  background: yellow;
}

.start {
  display: flex;
  justify-content: center;
  border: 2px outset grey;
  height: 2em;
}

.boxwrapper {
  display: flex;
  flex-direction: row;
}

.box {
  border-bottom: 2px solid #333;
  border-right: 2px solid #555;
  box-shadow: inset 0 0 0 5px #efefef, inset 0 0 0 10px #006699;
  padding: 20px;
}

textarea {
  width: 98%;
  height: 270px;
  overflow-y: scroll;
  font-size: 24px;
}

#connecting,
#connected {
  display: none;
}

.icon {
  position: absolute;
  right: 10px;
  top: 40px;
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon.note {
  top: 140px;
}

.icon.aol {
  top: 240px;
}

.icon b {
  background: #aaa;
}

#btnsignon,
#cancel,
#iconaol,
.controls.min {
  cursor: pointer;
}

#signon {
  z-index: 99;
}

#connect {
  display: none;
  z-index: 100;
  left: calc(50vw - 350px);
}

#newmail {
  display: none;
  left: calc(50vw - 350px);
}

            
          
!
            
              $(".draggable").draggable({
  containment: "body",
  stack: ".draggable"
});
var audio = new Audio();
audio.src =
  "https://github.com/d-subat/codepenFCCProjects/blob/master/assets/aol.mp3?raw=true";
$("#btnsignon").click(function() {
  $("#signon").toggle();
  $("#connect").toggle();

  audio.play();
});
$("#iconaol,.sign.controls.min").click(function() {
  $("#signon").toggle();
});
$(".mail.controls.min").click(function() {
  $("#newmail").toggle();
});
$("#cancel,.cnct.controls.min").click(function() {
  $("#signon").toggle();
  $("#connect").toggle();
  audio.currentTime = 0;
  audio.pause();
});

audio.addEventListener("timeupdate", function() {
  console.log(audio.currentTime);
  if (Math.round(audio.currentTime) >= 5) {
    $("#connecting").css("display", "block");
    $("#status")
      .empty()
      .append("Connecting");
  }
  if (Math.round(audio.currentTime) >= 27) {
    $("#connected").css("display", "block");
    $("#status")
      .empty()
      .append("Connected");
  }
});
audio.onended = function() {
  $("#connect").toggle();
  $("#newmail").toggle();
   $("#connected").css("display", "none");
  $("#connecting").css("display", "none");
};

var locales = ["de-de", "en-us", "en-gb"];
var options = {
  localeMatcher: "lookup"
};
var userLocale = Intl.DateTimeFormat.supportedLocalesOf(locales, options);
clock();

function clock() {
  var dateStamp = new Date();
  var localTime = dateStamp.toLocaleTimeString(userLocale[0], {
    hour: "numeric",
    minute: "numeric"
  });
  $(".time")
    .empty()
    .append(localTime);
  var timeout = setTimeout(clock, 500);
}

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console