Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap" rel="stylesheet">

<div class="main-wrapper">
  <input type="text" value="A" id="input">
  
  <div class="images-container">
    <div class="images-row">
      <img src="https://raw.githubusercontent.com/xlerida/images/master/react.PNG" alt="" class="img" id="A111">
      <img src="https://raw.githubusercontent.com/xlerida/images/master/sass.png" alt="" class="img"  id="A112">
      <img src="https://raw.githubusercontent.com/xlerida/images/master/vscode.png" alt="" class="img"  id="A113">
    </div>
    <div class="images-row">
      <img src="https://raw.githubusercontent.com/xlerida/images/master/vue.png" alt="" class="img"  id="A214">
      <img src="https://raw.githubusercontent.com/xlerida/images/master/codepen.png" alt="" class="img"  id="A215">
      <img src="https://raw.githubusercontent.com/xlerida/images/master/nodejs.png" alt="" class="img"  id="A216">
    </div>
    <div class="images-row">
      <img src="https://raw.githubusercontent.com/xlerida/images/master/python.png" alt="" class="img"  id="A317">
      <img src="https://raw.githubusercontent.com/xlerida/images/master/angular.PNG" alt="" class="img"  id="A318">
      <img src="https://raw.githubusercontent.com/xlerida/images/master/golang.png" alt="" class="img"  id="A319">
    </div>
  </div>

  <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 446 727" style="enable-background:new 0 0 446 727;" xml:space="preserve" id="svg">

  <g id="Layer_2">
    <path class="st0" d="M418.8,722.9H26.8c-12.7,0-23-10.3-23-23V27.2c0-12.7,10.3-23,23-23h391.9c12.7,0,23,10.3,23,23v672.7
      C441.8,712.6,431.5,722.9,418.8,722.9z"/>
    <path class="st1" d="M397.3,722.9H48.3c-12.7,0-23-10.3-23-23V27.2c0-12.7,10.3-23,23-23h348.9c12.7,0,23,10.3,23,23v672.7
      C420.3,712.6,410,722.9,397.3,722.9z"/>
    <path class="st2" d="M303.5,584.5h-279c-3.2,0-5.8-2.6-5.8-5.8V153.9c0-3.2,2.6-5.8,5.8-5.8h279c3.2,0,5.8,2.6,5.8,5.8v424.8
      C309.3,581.9,306.7,584.5,303.5,584.5z"/>
    <rect x="27.9" y="155.5" class="st3" width="272.2" height="421.9"/>
    <rect x="39.2" y="166.9" class="st4" width="260.1" height="410.5"/>
    <polygon class="st5" points="259.3,155.5 249.1,166.2 249.1,155.5 	"/>
    <path class="st2" d="M394,97.3L394,97.3c-4.8,0-8.7-3.9-8.7-8.7V59.5c0-4.8,3.9-8.7,8.7-8.7h0c4.8,0,8.7,3.9,8.7,8.7v29.2
      C402.7,93.4,398.8,97.3,394,97.3z"/>
    <path class="st2" d="M396.7,593.4L396.7,593.4c-4.8,0-8.7-3.9-8.7-8.7v-29.2c0-4.8,3.9-8.7,8.7-8.7l0,0c4.8,0,8.7,3.9,8.7,8.7v29.2
      C405.3,589.5,401.4,593.4,396.7,593.4z"/>
    <path class="st2" d="M396.7,696.2L396.7,696.2c-4.8,0-8.7-3.9-8.7-8.7v-63.9c0-4.8,3.9-8.7,8.7-8.7l0,0c4.8,0,8.7,3.9,8.7,8.7v63.9
      C405.3,692.3,401.4,696.2,396.7,696.2z"/>
    <rect x="329.4" y="4.2" class="st2" width="10.5" height="718.7"/>
    <path class="st2" d="M423.5,281h-58.3c-2.1,0-3.8-1.7-3.8-3.8v-93c0-2.1,1.7-3.8,3.8-3.8h58.3c2.1,0,3.8,1.7,3.8,3.8v93
      C427.3,279.3,425.6,281,423.5,281z"/>
  </g>
      
  <g id="Layer_9">
    <rect x="27.9" y="393.9" class="st6" width="272.5" height="26.9"/>
    <rect x="27.9" y="515.2" class="st6" width="272.5" height="27"/>
    <rect x="48" y="515.2" class="st7" width="53.9" height="27"/>
    <path class="st8" d="M99.2,540.5H50.5c-0.7,0-1.2-0.5-1.2-1.2V518c0-0.7,0.5-1.2,1.2-1.2h48.7c0.7,0,1.2,0.5,1.2,1.2v21.3
      C100.4,539.9,99.9,540.5,99.2,540.5z"/>
    <rect x="136.6" y="515.1" class="st7" width="53.9" height="27"/>
    <path class="st8" d="M187.8,540.4h-48.7c-0.7,0-1.2-0.5-1.2-1.2v-21.3c0-0.7,0.5-1.2,1.2-1.2h48.7c0.7,0,1.2,0.5,1.2,1.2v21.3
      C189,539.9,188.4,540.4,187.8,540.4z"/>
    <rect x="225.7" y="515.2" class="st7" width="53.9" height="27"/>
    <path class="st8" d="M276.9,540.5h-48.7c-0.7,0-1.2-0.5-1.2-1.2V518c0-0.7,0.5-1.2,1.2-1.2h48.7c0.7,0,1.2,0.5,1.2,1.2v21.3
      C278.1,539.9,277.6,540.5,276.9,540.5z"/>
    <rect x="48.4" y="394" class="st7" width="53.9" height="27"/>
    <path class="st8" d="M99.6,419.2H50.9c-0.7,0-1.2-0.5-1.2-1.2v-21.3c0-0.7,0.5-1.2,1.2-1.2h48.7c0.7,0,1.2,0.5,1.2,1.2v21.3
      C100.8,418.7,100.3,419.2,99.6,419.2z"/>
    <rect x="137" y="393.9" class="st7" width="53.9" height="27"/>
    <path class="st8" d="M188.2,419.2h-48.7c-0.7,0-1.2-0.5-1.2-1.2v-21.3c0-0.7,0.5-1.2,1.2-1.2h48.7c0.7,0,1.2,0.5,1.2,1.2V418
      C189.4,418.7,188.8,419.2,188.2,419.2z"/>
    <rect x="226.1" y="394" class="st7" width="53.9" height="27"/>
    <path class="st8" d="M277.3,419.2h-48.7c-0.7,0-1.2-0.5-1.2-1.2v-21.3c0-0.7,0.5-1.2,1.2-1.2h48.7c0.7,0,1.2,0.5,1.2,1.2v21.3
      C278.5,418.7,278,419.2,277.3,419.2z"/>
    <rect x="27.5" y="275" class="st6" width="272.5" height="26.9"/>
    <rect x="48.5" y="275" class="st7" width="53.9" height="27"/>
    <path class="st8" d="M99.7,300.3H51c-0.7,0-1.2-0.5-1.2-1.2v-21.3c0-0.7,0.5-1.2,1.2-1.2h48.7c0.7,0,1.2,0.5,1.2,1.2v21.3
      C100.9,299.8,100.4,300.3,99.7,300.3z"/>
    <rect x="137.1" y="275" class="st7" width="53.9" height="27"/>
    <path class="st8" d="M188.3,300.3h-48.7c-0.7,0-1.2-0.5-1.2-1.2v-21.3c0-0.7,0.5-1.2,1.2-1.2h48.7c0.7,0,1.2,0.5,1.2,1.2v21.3
      C189.5,299.7,188.9,300.3,188.3,300.3z"/>
    <rect x="226.2" y="275" class="st7" width="53.9" height="27"/>
    <path class="st8" d="M277.4,300.3h-48.7c-0.7,0-1.2-0.5-1.2-1.2v-21.3c0-0.7,0.5-1.2,1.2-1.2h48.7c0.7,0,1.2,0.5,1.2,1.2v21.3
      C278.6,299.8,278.1,300.3,277.4,300.3z"/>
  </g>
  <g id="Layer_3">
    <path class="st2" d="M420,501.4h-51c-3.4,0-6.2-2.8-6.2-6.2v-25.3c0-3.4,2.8-6.2,6.2-6.2h51c3.4,0,6.2,2.8,6.2,6.2v25.3
      C426.2,498.7,423.4,501.4,420,501.4z"/>
    <path class="st8" d="M419,497.6h-49.3c-1.8,0-3.3-1.5-3.3-3.3v-23.5c0-1.8,1.5-3.3,3.3-3.3H419c1.8,0,3.3,1.5,3.3,3.3v23.5
      C422.3,496.1,420.8,497.6,419,497.6z"/>
    <path class="st4" d="M418.7,497.6h-47v-20.8c0-2.3,1.9-4.2,4.2-4.2h46.5v21.3C422.3,495.9,420.7,497.6,418.7,497.6z"/>
    <path class="st2" d="M284.5,121.5H42.8c-3.4,0-6.2-2.8-6.2-6.2V48.2c0-3.4,2.8-6.2,6.2-6.2h241.7c3.4,0,6.2,2.8,6.2,6.2v67.2
      C290.6,118.7,287.9,121.5,284.5,121.5z"/>
    <path class="st8" d="M280.1,115.7H47.3c-1.8,0-3.3-1.5-3.3-3.3V51.3c0-1.8,1.5-3.3,3.3-3.3h232.8c1.8,0,3.3,1.5,3.3,3.3v61.1
      C283.4,114.2,281.9,115.7,280.1,115.7z"/>
    <path class="st4" d="M279.8,115.7h-231V56c0-2.3,1.9-4.2,4.2-4.2h230.5v60.3C283.4,114.1,281.8,115.7,279.8,115.7z"/>
    <rect x="27.9" y="155.5" class="st9" width="11.4" height="421.8"/>
    <rect x="28.2" y="155.5" class="st9" width="271.6" height="11"/>
    <path class="st8" d="M419.7,276.2h-51.4c-1.3,0-2.4-1.1-2.4-2.4v-86.2c0-1.3,1.1-2.4,2.4-2.4h51.4c1.3,0,2.4,1.1,2.4,2.4v86.2
      C422,275.2,421,276.2,419.7,276.2z"/>
    <path class="st4" d="M419.5,276.2h-50.4v-83.1c0-2.3,1.9-4.2,4.2-4.2H422v84.7C422,275.1,420.9,276.2,419.5,276.2z"/>
    <rect x="373" y="205.5" class="st1" width="42.8" height="4.5"/>
    <rect x="405.8" y="228.2" class="st1" width="10" height="13.8"/>
    <rect x="405.8" y="247" class="st1" width="10" height="6.9"/>
    <polygon class="st10" points="300.1,468 207,577 268.3,577 300.1,539.5 	"/>
    <polygon class="st10" points="240.4,155.5 240.4,176.1 152.5,272 152.5,231.3 222,155.5 	"/>
    <polygon class="st10" points="141.4,243 141.4,283.1 121.9,305.2 121.9,264.8 	"/>
    <polygon class="st10" points="54.1,338.4 54.1,379.1 27.9,406.9 27.9,366.8 	"/>
    <polygon class="st0" points="405.8,441 385.3,441 395.6,458 	"/>
  </g>
  <g id="Layer_5">
    <path class="st2" d="M281,628.3H48.9c-0.9,0-1.6-0.7-1.6-1.6v-9.8c0-0.9,0.7-1.6,1.6-1.6H281c0.9,0,1.6,0.7,1.6,1.6v9.8
      C282.6,627.6,281.9,628.3,281,628.3z"/>
    <path class="st11" d="M274.7,688.5H58.1c-1.1,0-1.9-0.9-1.9-1.9V625c0-1.1,0.9-1.9,1.9-1.9h216.6c1.1,0,1.9,0.9,1.9,1.9v61.5
      C276.6,687.6,275.8,688.5,274.7,688.5z"/>
    <rect x="50.5" y="620" class="st0" width="228.6" height="6"/>
  </g>
  
  <g id="Layer_6">
    <g>
      <path class="st12" d="M62.3,296.4l-1-3.3h-5.1l-1,3.3H52l4.9-14.1h3.6l5,14.1H62.3z M60.6,290.5c-0.9-3-1.5-4.7-1.6-5.1
        c-0.1-0.4-0.2-0.7-0.3-0.9c-0.2,0.8-0.8,2.8-1.8,6.1H60.6z"/>
      <path class="st12" d="M73.7,296.4h-3v-8.1l0-1.3l0-1.5c-0.5,0.5-0.8,0.8-1,1l-1.6,1.3l-1.4-1.8l4.5-3.6h2.4V296.4z"/>
      <path class="st12" d="M84.9,296.4h-3v-8.1l0-1.3l0-1.5c-0.5,0.5-0.8,0.8-1,1l-1.6,1.3l-1.4-1.8l4.5-3.6h2.4V296.4z"/>
      <path class="st12" d="M96.1,296.4h-3v-8.1l0-1.3l0-1.5c-0.5,0.5-0.8,0.8-1,1l-1.6,1.3l-1.4-1.8l4.5-3.6h2.4V296.4z"/>
    </g>
    <g>
      <path class="st12" d="M151.1,296.4l-1-3.3H145l-1,3.3h-3.2l4.9-14.1h3.6l5,14.1H151.1z M149.4,290.5c-0.9-3-1.5-4.7-1.6-5.1
        c-0.1-0.4-0.2-0.7-0.3-0.9c-0.2,0.8-0.8,2.8-1.8,6.1H149.4z"/>
      <path class="st12" d="M162.4,296.4h-3v-8.1l0-1.3l0-1.5c-0.5,0.5-0.8,0.8-1,1l-1.6,1.3l-1.4-1.8l4.5-3.6h2.4V296.4z"/>
      <path class="st12" d="M173.6,296.4h-3v-8.1l0-1.3l0-1.5c-0.5,0.5-0.8,0.8-1,1l-1.6,1.3l-1.4-1.8l4.5-3.6h2.4V296.4z"/>
      <path class="st12" d="M187.3,296.4h-9.8v-2.1l3.5-3.6c1-1.1,1.7-1.8,2-2.2s0.5-0.8,0.7-1.1c0.1-0.4,0.2-0.7,0.2-1.1
        c0-0.6-0.2-1-0.5-1.3c-0.3-0.3-0.7-0.4-1.2-0.4c-0.5,0-1.1,0.1-1.6,0.4s-1,0.6-1.6,1.1l-1.6-1.9c0.7-0.6,1.3-1,1.7-1.2
        c0.5-0.2,0.9-0.4,1.5-0.6c0.5-0.1,1.1-0.2,1.8-0.2c0.9,0,1.6,0.2,2.3,0.5s1.2,0.8,1.6,1.3s0.6,1.2,0.6,2c0,0.6-0.1,1.3-0.3,1.8
        c-0.2,0.6-0.6,1.1-1.1,1.7c-0.5,0.6-1.3,1.4-2.5,2.5l-1.8,1.7v0.1h6.1V296.4z"/>
    </g>
    <g>
      <path class="st12" d="M239.9,296.4l-1-3.3h-5.1l-1,3.3h-3.2l4.9-14.1h3.6l5,14.1H239.9z M238.1,290.5c-0.9-3-1.5-4.7-1.6-5.1
        c-0.1-0.4-0.2-0.7-0.3-0.9c-0.2,0.8-0.8,2.8-1.8,6.1H238.1z"/>
      <path class="st12" d="M251.2,296.4h-3v-8.1l0-1.3l0-1.5c-0.5,0.5-0.8,0.8-1,1l-1.6,1.3l-1.4-1.8l4.5-3.6h2.4V296.4z"/>
      <path class="st12" d="M262.4,296.4h-3v-8.1l0-1.3l0-1.5c-0.5,0.5-0.8,0.8-1,1l-1.6,1.3l-1.4-1.8l4.5-3.6h2.4V296.4z"/>
      <path class="st12" d="M275.5,285.5c0,0.9-0.3,1.6-0.8,2.2s-1.3,1-2.2,1.3v0.1c1.1,0.1,2,0.5,2.6,1c0.6,0.5,0.9,1.3,0.9,2.2
        c0,1.3-0.5,2.4-1.5,3.1s-2.4,1.1-4.2,1.1c-1.5,0-2.9-0.3-4-0.8v-2.5c0.5,0.3,1.1,0.5,1.8,0.7c0.7,0.2,1.3,0.3,1.9,0.3
        c1,0,1.7-0.2,2.2-0.5c0.5-0.3,0.7-0.9,0.7-1.6c0-0.7-0.3-1.1-0.8-1.4c-0.5-0.3-1.4-0.4-2.6-0.4h-1.1V288h1.1
        c1.1,0,1.9-0.1,2.4-0.4c0.5-0.3,0.8-0.8,0.8-1.5c0-1.1-0.7-1.6-2-1.6c-0.5,0-0.9,0.1-1.4,0.2c-0.5,0.2-1,0.4-1.6,0.8l-1.4-2
        c1.3-0.9,2.8-1.4,4.6-1.4c1.5,0,2.6,0.3,3.4,0.9C275.1,283.6,275.5,284.4,275.5,285.5z"/>
    </g>
    <g>
      <path class="st12" d="M62.3,414.2l-1-3.3h-5.1l-1,3.3H52l4.9-14.1h3.6l5,14.1H62.3z M60.6,408.4c-0.9-3-1.5-4.7-1.6-5.1
        c-0.1-0.4-0.2-0.7-0.3-0.9c-0.2,0.8-0.8,2.8-1.8,6.1H60.6z"/>
      <path class="st12" d="M76.1,414.2h-9.8v-2.1l3.5-3.6c1-1.1,1.7-1.8,2-2.2s0.5-0.8,0.7-1.1c0.1-0.4,0.2-0.7,0.2-1.1
        c0-0.6-0.2-1-0.5-1.3c-0.3-0.3-0.7-0.4-1.2-0.4c-0.5,0-1.1,0.1-1.6,0.4s-1,0.6-1.6,1.1l-1.6-1.9c0.7-0.6,1.3-1,1.7-1.2
        c0.5-0.2,0.9-0.4,1.5-0.6c0.5-0.1,1.1-0.2,1.8-0.2c0.9,0,1.6,0.2,2.3,0.5s1.2,0.8,1.6,1.3s0.6,1.2,0.6,2c0,0.6-0.1,1.3-0.3,1.8
        c-0.2,0.6-0.6,1.1-1.1,1.7c-0.5,0.6-1.3,1.4-2.5,2.5l-1.8,1.7v0.1h6.1V414.2z"/>
      <path class="st12" d="M84.9,414.2h-3v-8.1l0-1.3l0-1.5c-0.5,0.5-0.8,0.8-1,1l-1.6,1.3l-1.4-1.8l4.5-3.6h2.4V414.2z"/>
      <path class="st12" d="M98.9,411.3h-1.7v2.9h-2.9v-2.9h-6v-2.1l6.1-9h2.7v8.8h1.7V411.3z M94.3,409v-2.4c0-0.4,0-1,0-1.7
        c0-0.8,0.1-1.2,0.1-1.3h-0.1c-0.2,0.5-0.5,1-0.9,1.5l-2.6,3.9H94.3z"/>
    </g>
    <g>
      <path class="st12" d="M151.1,414.2l-1-3.3H145l-1,3.3h-3.2l4.9-14.1h3.6l5,14.1H151.1z M149.4,408.4c-0.9-3-1.5-4.7-1.6-5.1
        c-0.1-0.4-0.2-0.7-0.3-0.9c-0.2,0.8-0.8,2.8-1.8,6.1H149.4z"/>
      <path class="st12" d="M164.9,414.2h-9.8v-2.1l3.5-3.6c1-1.1,1.7-1.8,2-2.2s0.5-0.8,0.7-1.1c0.1-0.4,0.2-0.7,0.2-1.1
        c0-0.6-0.2-1-0.5-1.3c-0.3-0.3-0.7-0.4-1.2-0.4c-0.5,0-1.1,0.1-1.6,0.4s-1,0.6-1.6,1.1l-1.6-1.9c0.7-0.6,1.3-1,1.7-1.2
        c0.5-0.2,0.9-0.4,1.5-0.6c0.5-0.1,1.1-0.2,1.8-0.2c0.9,0,1.6,0.2,2.3,0.5s1.2,0.8,1.6,1.3s0.6,1.2,0.6,2c0,0.6-0.1,1.3-0.3,1.8
        c-0.2,0.6-0.6,1.1-1.1,1.7c-0.5,0.6-1.3,1.4-2.5,2.5l-1.8,1.7v0.1h6.1V414.2z"/>
      <path class="st12" d="M173.6,414.2h-3v-8.1l0-1.3l0-1.5c-0.5,0.5-0.8,0.8-1,1l-1.6,1.3l-1.4-1.8l4.5-3.6h2.4V414.2z"/>
      <path class="st12" d="M182.6,405.2c1.4,0,2.4,0.4,3.2,1.1c0.8,0.8,1.2,1.8,1.2,3.1c0,1.6-0.5,2.8-1.4,3.6c-1,0.8-2.3,1.3-4.1,1.3
        c-1.6,0-2.8-0.3-3.8-0.8v-2.6c0.5,0.3,1.1,0.5,1.8,0.7c0.7,0.2,1.3,0.3,1.9,0.3c1.8,0,2.7-0.7,2.7-2.2c0-1.4-0.9-2.1-2.8-2.1
        c-0.3,0-0.7,0-1.1,0.1c-0.4,0.1-0.7,0.1-1,0.2l-1.2-0.6l0.5-7.1h7.6v2.5h-5l-0.3,2.8l0.3-0.1C181.6,405.3,182,405.2,182.6,405.2z"
        />
    </g>
    <g>
      <path class="st12" d="M239.9,414.2l-1-3.3h-5.1l-1,3.3h-3.2l4.9-14.1h3.6l5,14.1H239.9z M238.1,408.4c-0.9-3-1.5-4.7-1.6-5.1
        c-0.1-0.4-0.2-0.7-0.3-0.9c-0.2,0.8-0.8,2.8-1.8,6.1H238.1z"/>
      <path class="st12" d="M253.7,414.2h-9.8v-2.1l3.5-3.6c1-1.1,1.7-1.8,2-2.2s0.5-0.8,0.7-1.1c0.1-0.4,0.2-0.7,0.2-1.1
        c0-0.6-0.2-1-0.5-1.3c-0.3-0.3-0.7-0.4-1.2-0.4c-0.5,0-1.1,0.1-1.6,0.4c-0.5,0.2-1,0.6-1.6,1.1l-1.6-1.9c0.7-0.6,1.3-1,1.7-1.2
        c0.5-0.2,0.9-0.4,1.5-0.6c0.5-0.1,1.1-0.2,1.8-0.2c0.9,0,1.6,0.2,2.3,0.5s1.2,0.8,1.6,1.3c0.4,0.6,0.6,1.2,0.6,2
        c0,0.6-0.1,1.3-0.3,1.8s-0.6,1.1-1.1,1.7c-0.5,0.6-1.3,1.4-2.5,2.5l-1.8,1.7v0.1h6.1V414.2z"/>
      <path class="st12" d="M262.4,414.2h-3v-8.1l0-1.3l0-1.5c-0.5,0.5-0.8,0.8-1,1l-1.6,1.3l-1.4-1.8l4.5-3.6h2.4V414.2z"/>
      <path class="st12" d="M266.2,408.2c0-2.8,0.6-4.8,1.8-6.2c1.2-1.4,2.9-2,5.3-2c0.8,0,1.4,0,1.9,0.1v2.4c-0.6-0.1-1.1-0.2-1.7-0.2
        c-1,0-1.8,0.2-2.5,0.5c-0.6,0.3-1.1,0.8-1.4,1.4s-0.5,1.5-0.6,2.6h0.1c0.6-1.1,1.6-1.6,3-1.6c1.3,0,2.2,0.4,2.9,1.2
        c0.7,0.8,1.1,1.9,1.1,3.3c0,1.5-0.4,2.7-1.3,3.6c-0.8,0.9-2,1.3-3.5,1.3c-1,0-1.9-0.2-2.7-0.7c-0.8-0.5-1.4-1.2-1.8-2.1
        C266.4,410.6,266.2,409.5,266.2,408.2z M271.2,412c0.6,0,1.1-0.2,1.5-0.6c0.3-0.4,0.5-1,0.5-1.8c0-0.7-0.2-1.2-0.5-1.6
        c-0.3-0.4-0.8-0.6-1.4-0.6c-0.6,0-1.1,0.2-1.5,0.6c-0.4,0.4-0.6,0.8-0.6,1.4c0,0.8,0.2,1.4,0.6,1.9
        C270.1,411.8,270.6,412,271.2,412z"/>
    </g>
    <g>
      <path class="st12" d="M62.3,536.2l-1-3.3h-5.1l-1,3.3H52l4.9-14.1h3.6l5,14.1H62.3z M60.6,530.4c-0.9-3-1.5-4.7-1.6-5.1
        c-0.1-0.4-0.2-0.7-0.3-0.9c-0.2,0.8-0.8,2.8-1.8,6.1H60.6z"/>
      <path class="st12" d="M75.6,525.3c0,0.9-0.3,1.6-0.8,2.2c-0.5,0.6-1.3,1-2.2,1.3v0.1c1.1,0.1,2,0.5,2.6,1c0.6,0.5,0.9,1.3,0.9,2.2
        c0,1.3-0.5,2.4-1.5,3.1c-1,0.8-2.4,1.1-4.2,1.1c-1.5,0-2.9-0.3-4-0.8v-2.5c0.5,0.3,1.1,0.5,1.8,0.7c0.7,0.2,1.3,0.3,1.9,0.3
        c1,0,1.7-0.2,2.2-0.5c0.5-0.3,0.7-0.9,0.7-1.6c0-0.7-0.3-1.1-0.8-1.4s-1.4-0.4-2.6-0.4h-1.1v-2.3h1.1c1.1,0,1.9-0.1,2.4-0.4
        c0.5-0.3,0.8-0.8,0.8-1.5c0-1.1-0.7-1.6-2-1.6c-0.5,0-0.9,0.1-1.4,0.2c-0.5,0.2-1,0.4-1.6,0.8l-1.4-2c1.3-0.9,2.8-1.4,4.6-1.4
        c1.5,0,2.6,0.3,3.4,0.9C75.2,523.4,75.6,524.3,75.6,525.3z"/>
      <path class="st12" d="M84.9,536.2h-3v-8.1l0-1.3l0-1.5c-0.5,0.5-0.8,0.8-1,1l-1.6,1.3l-1.4-1.8l4.5-3.6h2.4V536.2z"/>
      <path class="st12" d="M90.1,536.2l5.3-11.5h-6.9v-2.5h10.1v1.9l-5.3,12.1H90.1z"/>
    </g>
    <g>
      <path class="st12" d="M150.1,536.2l-1-3.3H144l-1,3.3h-3.2l4.9-14.1h3.6l5,14.1H150.1z M148.4,530.4c-0.9-3-1.5-4.7-1.6-5.1
        c-0.1-0.4-0.2-0.7-0.3-0.9c-0.2,0.8-0.8,2.8-1.8,6.1H148.4z"/>
      <path class="st12" d="M163.3,525.3c0,0.9-0.3,1.6-0.8,2.2c-0.5,0.6-1.3,1-2.2,1.3v0.1c1.1,0.1,2,0.5,2.6,1
        c0.6,0.5,0.9,1.3,0.9,2.2c0,1.3-0.5,2.4-1.5,3.1c-1,0.8-2.4,1.1-4.2,1.1c-1.5,0-2.9-0.3-4-0.8v-2.5c0.5,0.3,1.1,0.5,1.8,0.7
        c0.7,0.2,1.3,0.3,1.9,0.3c1,0,1.7-0.2,2.2-0.5c0.5-0.3,0.7-0.9,0.7-1.6c0-0.7-0.3-1.1-0.8-1.4s-1.4-0.4-2.6-0.4h-1.1v-2.3h1.1
        c1.1,0,1.9-0.1,2.4-0.4c0.5-0.3,0.8-0.8,0.8-1.5c0-1.1-0.7-1.6-2-1.6c-0.5,0-0.9,0.1-1.4,0.2c-0.5,0.2-1,0.4-1.6,0.8l-1.4-2
        c1.3-0.9,2.8-1.4,4.6-1.4c1.5,0,2.6,0.3,3.4,0.9C162.9,523.4,163.3,524.3,163.3,525.3z"/>
      <path class="st12" d="M172.6,536.2h-3v-8.1l0-1.3l0-1.5c-0.5,0.5-0.8,0.8-1,1l-1.6,1.3l-1.4-1.8l4.5-3.6h2.4V536.2z"/>
      <path class="st12" d="M181.3,522c1.3,0,2.4,0.3,3.2,0.9s1.2,1.4,1.2,2.5c0,0.7-0.2,1.4-0.6,1.9c-0.4,0.6-1,1.1-1.9,1.5
        c1,0.6,1.8,1.1,2.3,1.8c0.5,0.6,0.7,1.3,0.7,2c0,1.2-0.5,2.1-1.4,2.8c-0.9,0.7-2.1,1-3.6,1c-1.5,0-2.7-0.3-3.6-1
        c-0.9-0.7-1.3-1.6-1.3-2.8c0-0.8,0.2-1.5,0.6-2.1c0.4-0.6,1.1-1.2,2-1.6c-0.8-0.5-1.4-1-1.7-1.6c-0.4-0.6-0.5-1.2-0.5-1.9
        c0-1,0.4-1.8,1.2-2.4C178.9,522.3,180,522,181.3,522z M179.1,532.5c0,0.5,0.2,1,0.6,1.3c0.4,0.3,0.9,0.5,1.6,0.5
        c0.7,0,1.3-0.2,1.6-0.5c0.4-0.3,0.5-0.7,0.5-1.3c0-0.4-0.2-0.8-0.5-1.2s-0.9-0.8-1.8-1.2C179.8,530.7,179.1,531.5,179.1,532.5z
         M181.3,524.2c-0.5,0-0.9,0.1-1.2,0.4s-0.5,0.6-0.5,1c0,0.4,0.1,0.7,0.4,1c0.2,0.3,0.7,0.6,1.3,0.9c0.6-0.3,1.1-0.6,1.3-0.9
        c0.2-0.3,0.4-0.7,0.4-1.1c0-0.4-0.2-0.8-0.5-1C182.2,524.3,181.8,524.2,181.3,524.2z"/>
    </g>
    <g>
      <path class="st12" d="M239.9,536.2l-1-3.3h-5.1l-1,3.3h-3.2l4.9-14.1h3.6l5,14.1H239.9z M238.1,530.4c-0.9-3-1.5-4.7-1.6-5.1
        c-0.1-0.4-0.2-0.7-0.3-0.9c-0.2,0.8-0.8,2.8-1.8,6.1H238.1z"/>
      <path class="st12" d="M253.1,525.3c0,0.9-0.3,1.6-0.8,2.2c-0.5,0.6-1.3,1-2.2,1.3v0.1c1.1,0.1,2,0.5,2.6,1
        c0.6,0.5,0.9,1.3,0.9,2.2c0,1.3-0.5,2.4-1.5,3.1s-2.4,1.1-4.2,1.1c-1.5,0-2.9-0.3-4-0.8v-2.5c0.5,0.3,1.1,0.5,1.8,0.7
        c0.7,0.2,1.3,0.3,1.9,0.3c1,0,1.7-0.2,2.2-0.5c0.5-0.3,0.7-0.9,0.7-1.6c0-0.7-0.3-1.1-0.8-1.4s-1.4-0.4-2.6-0.4H246v-2.3h1.1
        c1.1,0,1.9-0.1,2.4-0.4s0.8-0.8,0.8-1.5c0-1.1-0.7-1.6-2-1.6c-0.5,0-0.9,0.1-1.4,0.2c-0.5,0.2-1,0.4-1.6,0.8l-1.4-2
        c1.3-0.9,2.8-1.4,4.6-1.4c1.5,0,2.6,0.3,3.4,0.9C252.7,523.4,253.1,524.3,253.1,525.3z"/>
      <path class="st12" d="M262.4,536.2h-3v-8.1l0-1.3l0-1.5c-0.5,0.5-0.8,0.8-1,1l-1.6,1.3l-1.4-1.8l4.5-3.6h2.4V536.2z"/>
      <path class="st12" d="M276,528.2c0,2.8-0.6,4.8-1.7,6.2c-1.2,1.4-2.9,2-5.3,2c-0.8,0-1.5,0-1.9-0.1v-2.4c0.5,0.1,1.1,0.2,1.7,0.2
        c1,0,1.8-0.1,2.4-0.4c0.6-0.3,1.1-0.7,1.5-1.4c0.3-0.6,0.5-1.5,0.6-2.6h-0.1c-0.4,0.6-0.8,1-1.3,1.3c-0.5,0.2-1.1,0.4-1.8,0.4
        c-1.2,0-2.2-0.4-2.9-1.2c-0.7-0.8-1.1-1.9-1.1-3.3c0-1.5,0.4-2.7,1.3-3.6c0.9-0.9,2-1.3,3.5-1.3c1,0,1.9,0.2,2.7,0.7
        c0.8,0.5,1.4,1.2,1.8,2.1C275.8,525.8,276,526.9,276,528.2z M270.9,524.4c-0.6,0-1.1,0.2-1.4,0.6c-0.3,0.4-0.5,1-0.5,1.8
        c0,0.7,0.2,1.2,0.5,1.6c0.3,0.4,0.8,0.6,1.4,0.6c0.6,0,1.1-0.2,1.5-0.6c0.4-0.4,0.6-0.8,0.6-1.4c0-0.8-0.2-1.4-0.6-1.9
        C272.1,524.7,271.6,524.4,270.9,524.4z"/>
    </g>
  </g>
  </svg>
  
  <div class="btns-container">
    <div class="btn" id="1">
      <p>1</p>
    </div>
    <div class="btn" id="2">
      <p>2</p>
    </div>
    <div class="btn" id="3">
      <p>3</p>
    </div>
    <div class="btn" id="4">
      <p>4</p>
    </div>
    <div class="btn" id="5">
      <p>5</p>
    </div>
    <div class="btn" id="6">
      <p>6</p>
    </div>
    <div class="btn" id="7">
      <p>7</p>
    </div>
    <div class="btn" id="8">
      <p>8</p>
    </div>
    <div class="btn" id="9">
      <p>9</p>
    </div>
  </div>
</div>
              
            
!

CSS

              
                body {
  margin: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffebcc;
  overflow: hidden;
}

.main-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

svg {
  width: 300px;
}

input {
  color: white;
  font-size: 2em;
  width: 180px;
  top: 36px;
  left: 5.6em;
  position: absolute;
  background: transparent;
  border: none;
  text-align: center;
  pointer-events: none;
}

.images-container {
  position: absolute;
  top: 120px;
  left: 12em;
  pointer-events: none;
  user-select: none;
}

.images-row {
  padding: 1em 0;
}

.images-row img:nth-child(2) {
  padding: 0 1em;
}

.images-row:first-child {
  position: relative;
  top: 6px;
}

.images-row:nth-child(2) {
  position: relative;
  top: 8px;
}

.images-row:last-child {
  position: relative;
  top: -2px;
}

img {
  width: 40px;
  pointer-events: none;
  user-select: none;
}

.btns-container {
  position: relative;
  top: 1em;
  display: flex;
  justify-content: space-between;
}

.btn {
  background: white;
  padding: 3px 24px;
  margin: 6px;
  cursor: pointer;
  background: #ff9c00;
  border-radius: 5px;
  color: white;
  font-family: "Open Sans", sans-serif;
  box-shadow: 0 6px 0 #d87b00;
  user-select: none;
}

.btn:hover {
  background: #eb9100;
}

.btn:active {
  box-shadow: 0 0 0 #d87b00;
  position: relative;
  top: 6px;
}

.st0{fill:#D87B00;}
.st1{fill:#FF9C00;}
.st2{fill:#FFCA7D;}
.st3{fill:#1B140D;}
.st4{fill:#381F12;}
.st5{opacity:0.6;fill:#78563A;}
.st6{fill:#ECDAAA;}
.st7{fill:#FCAF3C;}
.st8{fill:#1E100C;}
.st9{opacity:0.3;fill:#1B140D;}
.st10{opacity:0.23;fill:#FFC9A1;}
.st11{fill:#381F12;stroke:#FFCA7D;stroke-width:6;stroke-miterlimit:10;}
.st12{fill:#FFFFFF;}

@media (max-height: 720px) {
  .main-wrapper {
    transform: scale(.7);
  }
}
              
            
!

JS

              
                /* VARIABLES */
var btn = document.getElementsByClassName("btn")
var input = document.getElementById("input")
var codeImages = document.getElementsByClassName("img")

let inputCount = 1

/* INPUT ANIMATION */
var inputTl = gsap.timeline()
    inputTl.to("#input", .2, {opacity: 0})
    inputTl.to("#input", .2, {opacity: 1})
    inputTl.to("#input", .2, {opacity: 0})
    inputTl.to("#input", .2, {opacity: 1})
    inputTl.to("#input", .2, {opacity: 0})
inputTl.pause()

/* BUTTONS CLICK */
for (let i = 0; i < btn.length; i++) {

  btn[i].addEventListener("click", function() {
    if (inputCount < 4) {
      inputCount++;
      input.value += this.id;
    }
  })
  
  btn[i].addEventListener("click", function() {
    if (inputCount >= 4) {
      gsap.to(btn, 0, {pointerEvents: "none"})
      inputTl.play()
      
      setTimeout(function() {
        inputCount = 1
        input.value = "A"
        inputTl.restart()
        inputTl.pause()
        gsap.to(btn, 0, {pointerEvents: "all"})
      }, 3000)
      
      /* IMG DROP */
      for (let j = 0; j < codeImages.length; j++) {
        if (codeImages[j].id == input.value) {
          let thisImg = document.getElementById(codeImages[j].id)
          
          var imgTl = gsap.timeline()
          var svg = document.getElementById("svg")
          var thisImgPos = thisImg.offsetTop
          console.log(thisImgPos)
          
          /* TOP ROW */
          if (input.value == "A111") {
            imgTl.to(thisImg, 1, {y: -8, ease: Back.easeOut})
            imgTl.to(thisImg, 1, {delay: -1, rotate: 360, transformOrigin: "center", ease: Back.easeOut})
            imgTl.to(thisImg, 1, {delay: -.5, y: thisImgPos + 255, x: 60, ease: Back.easeIn})
            imgTl.to(thisImg, .25, {delay: -.25, opacity: 0})
            imgTl.to(thisImg, .5, {opacity: 1, scale: 1.5, transformOrigin: "center", ease: Back.easeOut})
            imgTl.to(thisImg, .5, {opacity: 0, scale: 1, ease: Back.easeIn})
            imgTl.to(thisImg, 0, {visibility: "hidden"})
            
          } else if (input.value == "A112") {
            imgTl.to(thisImg, 1, {y: -8, ease: Back.easeOut})
            imgTl.to(thisImg, 1, {delay: -1, rotate: 360, transformOrigin: "center", ease: Back.easeOut})
            imgTl.to(thisImg, 1, {delay: -.5, y: thisImgPos + 245, ease: Back.easeIn})
            imgTl.to(thisImg, .25, {delay: -.25, opacity: 0})
            imgTl.to(thisImg, .5, {opacity: 1, scale: 1.5, transformOrigin: "center", ease: Back.easeOut})
            imgTl.to(thisImg, .5, {opacity: 0, scale: 1, ease: Back.easeIn})
            imgTl.to(thisImg, 0, {visibility: "hidden"})
            
          } else if (input.value == "A113") {
            imgTl.to(thisImg, 1, {y: -8, ease: Back.easeOut})
            imgTl.to(thisImg, 1, {delay: -1, rotate: 360, transformOrigin: "center", ease: Back.easeOut})
            imgTl.to(thisImg, 1, {delay: -.5, y: thisImgPos + 260, x: -60, ease: Back.easeIn})
            imgTl.to(thisImg, .25, {delay: -.25, opacity: 0})
            imgTl.to(thisImg, .5, {opacity: 1, scale: 1.5, transformOrigin: "center", ease: Back.easeOut})
            imgTl.to(thisImg, .5, {opacity: 0, scale: 1, ease: Back.easeIn})
            imgTl.to(thisImg, 0, {visibility: "hidden"})
          }
          
          /* MIDDLE ROW */
          if (input.value == "A214") {
            imgTl.to(thisImg, 1, {y: -16, ease: Back.easeOut})
            imgTl.to(thisImg, 1, {delay: -1, rotate: 360, transformOrigin: "center", ease: Back.easeOut})
            imgTl.to(thisImg, 1, {delay: -.25, y: thisImgPos + 170, x: 60})
            imgTl.to(thisImg, .25, {delay: -1, opacity: 0})
            imgTl.to(thisImg, .5, {delay: -.3, opacity: 1, scale: 1.5, transformOrigin: "center", ease: Back.easeOut})
            imgTl.to(thisImg, .5, {opacity: 0, scale: 1, ease: Back.easeIn})
            imgTl.to(thisImg, 0, {visibility: "hidden"})
            
          } else if (input.value == "A215") {
            imgTl.to(thisImg, 1, {y: -16, ease: Back.easeOut})
            imgTl.to(thisImg, 1, {delay: -1, rotate: 360, transformOrigin: "center", ease: Back.easeOut})
            imgTl.to(thisImg, 1, {delay: -.25, y: thisImgPos + 180})
            imgTl.to(thisImg, .25, {delay: -1, opacity: 0})
            imgTl.to(thisImg, .5, {delay: -.3, opacity: 1, scale: 1.5, transformOrigin: "center", ease: Back.easeOut})
            imgTl.to(thisImg, .5, {opacity: 0, scale: 1, ease: Back.easeIn})
            imgTl.to(thisImg, 0, {visibility: "hidden"})
            
          } else if (input.value == "A216") {
            imgTl.to(thisImg, 1, {y: -16, ease: Back.easeOut})
            imgTl.to(thisImg, 1, {delay: -1, rotate: 360, transformOrigin: "center", ease: Back.easeOut})
            imgTl.to(thisImg, 1, {delay: -.25, y: thisImgPos + 180, x: -60})
            imgTl.to(thisImg, .25, {delay: -1, opacity: 0})
            imgTl.to(thisImg, .5, {delay: -.3, opacity: 1, scale: 1.5, transformOrigin: "center", ease: Back.easeOut})
            imgTl.to(thisImg, .5, {opacity: 0, scale: 1, ease: Back.easeIn})
            imgTl.to(thisImg, 0, {visibility: "hidden"})
          }
          
          /* BOTTOM ROW */
          if (input.value == "A317") {
            imgTl.to(thisImg, 1, {y: -16, ease: Back.easeOut})
            imgTl.to(thisImg, 1, {delay: -1, rotate: 360, transformOrigin: "center", ease: Back.easeOut})
            imgTl.to(thisImg, 1, {delay: -.25, y: thisImgPos + 85, x: 60})
            imgTl.to(thisImg, .25, {delay: -1.2, opacity: 0})
            imgTl.to(thisImg, .5, {delay: -.25, opacity: 1, scale: 1.5, transformOrigin: "center", ease: Back.easeOut})
            imgTl.to(thisImg, .5, {opacity: 0, scale: 1, ease: Back.easeIn})
            imgTl.to(thisImg, 0, {visibility: "hidden"})
            
          } else if (input.value == "A318") {
            imgTl.to(thisImg, 1, {y: -16, ease: Back.easeOut})
            imgTl.to(thisImg, 1, {delay: -1, rotate: 360, transformOrigin: "center", ease: Back.easeOut})
            imgTl.to(thisImg, 1, {delay: -.25, y: thisImgPos + 90})
            imgTl.to(thisImg, .25, {delay: -1.2, opacity: 0})
            imgTl.to(thisImg, .5, {delay: -.25, opacity: 1, scale: 1.5, transformOrigin: "center", ease: Back.easeOut})
            imgTl.to(thisImg, .5, {opacity: 0, scale: 1, ease: Back.easeIn})
            imgTl.to(thisImg, 0, {visibility: "hidden"})
            
          } else if (input.value == "A319") {
            imgTl.to(thisImg, 1, {y: -16, ease: Back.easeOut})
            imgTl.to(thisImg, 1, {delay: -1, rotate: 360, transformOrigin: "center", ease: Back.easeOut})
            imgTl.to(thisImg, 1, {delay: -.25, y: thisImgPos + 110, x: -60})
            imgTl.to(thisImg, .25, {delay: -1.2, opacity: 0})
            imgTl.to(thisImg, .5, {delay: -.5, opacity: 1, scale: 1.5, transformOrigin: "center", ease: Back.easeOut})
            imgTl.to(thisImg, .5, {opacity: 0, scale: 1, ease: Back.easeIn})
            imgTl.to(thisImg, 0, {visibility: "hidden"})
          }
        }
      }
    }
  })
  
}
              
            
!
999px

Console