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

              
                <div id="qfg-1" class='qfg'>
  <div class="__holes"></div>
  <div class="__cover"></div>
  <div class="__label">
    <div class="__decor"></div>
    <div class="__title">
      <span>Quest for Glory II</span>
      <span>Trial by Fire</span>
      <span>Game Disk 1</span>
    </div>
    <div class="__os">
      <span>MS-DOS</span>
      <span>VER#1.1.05</span>
      <span>INT#12.7.90</span>
    </div>    
    
    <div class="__logo">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 365.07 364"><path d="M319.31 61.73H46.6l-.93-1.05c6.56-6.12 13.05-12.32 19.75-18.29.91-.81 2.85-.65 4.31-.65 75.1-.03 150.2-.05 225.31.09 2.38 0 5.29 1.11 7.04 2.7 5.74 5.26 11.05 10.97 17.23 17.2zM4.9 138.05c1.99-6.14 3.66-12.04 5.92-17.69.46-1.14 3.15-1.94 4.83-1.96 17.67-.14 35.33-.09 53-.09h70.63c-1.77 5.69-3.32 10.66-5.17 16.57 25.12-4.88 49.32-9.58 73.73-14.32.67 2.34 1.53 4.05 1.59 5.79.19 5.81 3.09 7.1 8.61 7.04 26.83-.3 53.66-.14 80.5-.14h6.24c-2.09-5-3.97-9.48-6.07-14.5h55.04c1.93 6.1 3.92 12.4 6.09 19.3H4.9zM111.91 169.54c-4.91 5.61-9.33 10.67-13.85 15.83 2.15-.29 4.79-.67 7.43-.98 28.35-3.43 56.71-6.84 85.06-10.27 8.57-1.04 17.11-2.27 25.7-3.09 1.47-.14 4.05.95 4.51 2.1 3.79 9.63 10.56 11.81 20.62 11.5 26.63-.81 53.31-.28 79.96-.28h6.31c-2.05-4.98-3.9-9.46-5.94-14.41h43.32c0 5.5.16 10.94-.14 16.35-.06 1.04-1.74 2.21-2.92 2.9-.75.44-1.95.09-2.95.09H.04c0-6.02-.17-11.78.19-17.5.05-.83 2.62-2.12 4.05-2.14 10.49-.18 20.99-.1 31.49-.1h76.14zM338.38 86.92H26.32c4.72-6.54 8.86-12.44 13.23-18.17.63-.82 2.36-1.12 3.58-1.12 35.32-.05 70.63-.04 105.95-.02.78 0 1.57.24 2.79.44-1.04 5.05-2.04 9.86-3.15 15.27 7.11-4.3 13.74-8.3 20.22-12.22.56.24 1.01.28 1.15.51 5.63 9.13 13.87 10.91 24.15 10.5 19.79-.78 39.64-.23 59.46-.23h4.77c.06-.33.11-.67.17-1-7.6-4.12-15.21-8.23-22.81-12.35l.15-.95h4.16c25.99 0 51.98.11 77.96-.1 4.61-.04 7.83.91 10.29 5.08 2.78 4.69 6.21 8.99 9.99 14.36zM315.29 158.17c-2.01-4.6-3.84-8.81-5.91-13.55 1.52-.16 2.57-.37 3.63-.37 14.66-.02 29.32.08 43.98-.09 3.15-.04 4.52.96 4.9 4.03.61 4.92 1.47 9.81 2.29 15.12H.67c.83-5.66 1.45-11.05 2.54-16.35.22-1.09 2.09-1.97 3.36-2.66.64-.35 1.63-.07 2.47-.07H129.24c-3.27 5.69-6.1 10.62-9.61 16.73 31.53-4.78 61.79-9.37 92.3-14 .95 3.91 1.8 7.42 2.72 11.2 33.41.01 66.77.01 100.64.01zM291.82 107.32c-4.12-5.16-7.39-9.25-11.11-13.91 1.91-.19 3.14-.41 4.37-.42 17.5-.02 35 .08 52.49-.1 3.36-.03 5.14 1.01 6.43 4.05 2.11 5 4.61 9.83 7.23 15.32H13.46c3.11-6.22 5.9-12.02 8.95-17.68.47-.87 2.14-1.54 3.26-1.54 39.83-.04 79.65 0 119.48.05.31 0 .61.22 1.3.48-1.14 4.66-2.29 9.38-3.63 14.87 13.95-4.21 27.32-8.04 40.52-12.37 3.82-1.25 6.62-.75 8.74 2.23 5.64 7.94 13.28 9.42 22.58 9.2 23.48-.57 46.99-.19 70.48-.19 1.78.01 3.58.01 6.68.01zM88.73 195.45c-1.05 4.93-2.04 9.61-3.19 14.98 10.89-.82 21.43-1.52 31.95-2.43 13.06-1.13 26.1-2.46 39.15-3.64 24.79-2.24 49.59-4.37 74.36-6.74 3.68-.35 6.49.25 8.75 3.2 5.23 6.84 11.87 9.06 20.68 8.83 24.98-.65 49.98-.23 74.97-.23h6.34c-2.95-4.95-5.53-9.27-8.42-14.09h31.31c-.83 6.43-1.62 12.58-2.43 18.94H2.63c-.87-6.24-1.71-12.26-2.62-18.81 29.78-.01 59.1-.01 88.72-.01zM3.87 220.77h80.04c-.84 4.94-1.66 9.73-2.62 15.37 5.39-.31 10.44-.51 15.46-.91 20.19-1.62 40.38-3.31 60.57-4.96 27.63-2.27 55.26-4.53 82.88-6.79 3.48-.28 7.04-.16 10.41-.9 4.13-.92 5.23 1.08 5.9 4.48 1.48 7.56 1.56 7.55 8.97 7.55h90.96c.74 5.31-1.94 5.85-5.83 5.85-80.66-.07-161.31-.05-241.97-.05-31 0-61.99-.16-92.99.15-5.22.05-7.48-1.5-8.37-6.43-.77-4.37-2.17-8.62-3.41-13.36zM74.03 34.87c7.72-4.66 15.5-9.23 23.15-14 5.99-3.74 12.37-4.8 19.42-4.77 45.79.22 91.57.07 137.36.2 2.85.01 6.01.7 8.49 2.05 9.56 5.19 18.91 10.79 28.34 16.23-.2.46-.4.93-.6 1.39H74.57c-.18-.37-.36-.74-.54-1.1zM346.55 260.53c-.23 4.66-2.63 5.46-6.33 5.45-29.49-.11-58.98-.06-88.46-.06-75.3 0-150.61-.04-225.91.11-4.32.01-6.76-1.19-8.26-5.21-1.72-4.64-3.88-9.11-6.07-14.15h61.49c-6.93 5.52-13.19 10.51-20.66 16.46 10.34-.62 19.17-1.13 27.98-1.7 20.71-1.34 41.42-2.66 62.12-4.07 23.34-1.59 46.68-3.32 70.02-4.92 15.24-1.04 30.49-1.93 45.73-2.95 2.51-.17 3.62.79 3.83 3.32.21 2.44.83 4.85 1.35 7.72h83.17zM263.96 274.1c.96 4.23 1.79 7.93 2.7 11.94h64.79c-.85 4.12-2.98 5.34-6.73 5.34-94.83-.08-189.67-.06-284.5-.08-1.5 0-2.99-.29-4.49-.45.03-.54.05-1.08.08-1.62 76.02-5.03 152.04-10.08 228.15-15.13zM309.61 313.8c-2.36.91-4.72 2.61-7.09 2.61-79.99.14-159.98.12-239.97.08-1.61 0-3.22-.6-4.84-.92.04-.45.07-.9.11-1.35 12.23-.71 24.47-1.39 36.7-2.15 25.19-1.56 50.37-3.21 75.55-4.75 19.57-1.19 39.14-2.23 58.71-3.42 11.93-.73 23.86-1.49 35.77-2.5 3.65-.31 5.86.41 5.84 4.43-.02 5.16 2.51 6.55 7.51 6.36 10.39-.4 20.81-.12 31.22-.12.17.58.33 1.16.49 1.73zM278.88 336.51c-4.66 3.37-9.23 6.12-15.63 6.09-54.32-.22-108.63-.12-162.95-.16-2.39 0-4.78-.52-7.18-.79 0-.46-.01-.93-.01-1.39 6.6-.64 13.2-1.35 19.8-1.91 25.98-2.19 51.96-4.33 77.94-6.51 23.33-1.95 46.65-3.94 69.97-5.9.33-.03.67 0 1-.02 11.99-.8 11.99-.8 17.06 10.59zM124.24 9.99c38.8-13.41 77.69-13.23 116.62 0H124.24zM244.9 353.36c-30 10.64-60.7 13.62-92.26 7.49l92.21-8.82c.03.44.04.89.05 1.33z"/></svg>
    </div>
  </div>
</div>

<div id="qfg-2" class='qfg'>
  <div class="__holes"></div>
  <div class="__cover"></div>
  <div class="__label">
    <div class="__decor"></div>
    <div class="__title">
      <span>Quest for Glory II</span>
      <span>Trial by Fire</span>
      <span>Game Disk 2</span>
    </div>
    <div class="__os">
      <span>MS-DOS</span>
      <span>VER#1.1.05</span>
      <span>INT#12.7.90</span>
    </div>    
    
    <div class="__logo">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 365.07 364"><path d="M319.31 61.73H46.6l-.93-1.05c6.56-6.12 13.05-12.32 19.75-18.29.91-.81 2.85-.65 4.31-.65 75.1-.03 150.2-.05 225.31.09 2.38 0 5.29 1.11 7.04 2.7 5.74 5.26 11.05 10.97 17.23 17.2zM4.9 138.05c1.99-6.14 3.66-12.04 5.92-17.69.46-1.14 3.15-1.94 4.83-1.96 17.67-.14 35.33-.09 53-.09h70.63c-1.77 5.69-3.32 10.66-5.17 16.57 25.12-4.88 49.32-9.58 73.73-14.32.67 2.34 1.53 4.05 1.59 5.79.19 5.81 3.09 7.1 8.61 7.04 26.83-.3 53.66-.14 80.5-.14h6.24c-2.09-5-3.97-9.48-6.07-14.5h55.04c1.93 6.1 3.92 12.4 6.09 19.3H4.9zM111.91 169.54c-4.91 5.61-9.33 10.67-13.85 15.83 2.15-.29 4.79-.67 7.43-.98 28.35-3.43 56.71-6.84 85.06-10.27 8.57-1.04 17.11-2.27 25.7-3.09 1.47-.14 4.05.95 4.51 2.1 3.79 9.63 10.56 11.81 20.62 11.5 26.63-.81 53.31-.28 79.96-.28h6.31c-2.05-4.98-3.9-9.46-5.94-14.41h43.32c0 5.5.16 10.94-.14 16.35-.06 1.04-1.74 2.21-2.92 2.9-.75.44-1.95.09-2.95.09H.04c0-6.02-.17-11.78.19-17.5.05-.83 2.62-2.12 4.05-2.14 10.49-.18 20.99-.1 31.49-.1h76.14zM338.38 86.92H26.32c4.72-6.54 8.86-12.44 13.23-18.17.63-.82 2.36-1.12 3.58-1.12 35.32-.05 70.63-.04 105.95-.02.78 0 1.57.24 2.79.44-1.04 5.05-2.04 9.86-3.15 15.27 7.11-4.3 13.74-8.3 20.22-12.22.56.24 1.01.28 1.15.51 5.63 9.13 13.87 10.91 24.15 10.5 19.79-.78 39.64-.23 59.46-.23h4.77c.06-.33.11-.67.17-1-7.6-4.12-15.21-8.23-22.81-12.35l.15-.95h4.16c25.99 0 51.98.11 77.96-.1 4.61-.04 7.83.91 10.29 5.08 2.78 4.69 6.21 8.99 9.99 14.36zM315.29 158.17c-2.01-4.6-3.84-8.81-5.91-13.55 1.52-.16 2.57-.37 3.63-.37 14.66-.02 29.32.08 43.98-.09 3.15-.04 4.52.96 4.9 4.03.61 4.92 1.47 9.81 2.29 15.12H.67c.83-5.66 1.45-11.05 2.54-16.35.22-1.09 2.09-1.97 3.36-2.66.64-.35 1.63-.07 2.47-.07H129.24c-3.27 5.69-6.1 10.62-9.61 16.73 31.53-4.78 61.79-9.37 92.3-14 .95 3.91 1.8 7.42 2.72 11.2 33.41.01 66.77.01 100.64.01zM291.82 107.32c-4.12-5.16-7.39-9.25-11.11-13.91 1.91-.19 3.14-.41 4.37-.42 17.5-.02 35 .08 52.49-.1 3.36-.03 5.14 1.01 6.43 4.05 2.11 5 4.61 9.83 7.23 15.32H13.46c3.11-6.22 5.9-12.02 8.95-17.68.47-.87 2.14-1.54 3.26-1.54 39.83-.04 79.65 0 119.48.05.31 0 .61.22 1.3.48-1.14 4.66-2.29 9.38-3.63 14.87 13.95-4.21 27.32-8.04 40.52-12.37 3.82-1.25 6.62-.75 8.74 2.23 5.64 7.94 13.28 9.42 22.58 9.2 23.48-.57 46.99-.19 70.48-.19 1.78.01 3.58.01 6.68.01zM88.73 195.45c-1.05 4.93-2.04 9.61-3.19 14.98 10.89-.82 21.43-1.52 31.95-2.43 13.06-1.13 26.1-2.46 39.15-3.64 24.79-2.24 49.59-4.37 74.36-6.74 3.68-.35 6.49.25 8.75 3.2 5.23 6.84 11.87 9.06 20.68 8.83 24.98-.65 49.98-.23 74.97-.23h6.34c-2.95-4.95-5.53-9.27-8.42-14.09h31.31c-.83 6.43-1.62 12.58-2.43 18.94H2.63c-.87-6.24-1.71-12.26-2.62-18.81 29.78-.01 59.1-.01 88.72-.01zM3.87 220.77h80.04c-.84 4.94-1.66 9.73-2.62 15.37 5.39-.31 10.44-.51 15.46-.91 20.19-1.62 40.38-3.31 60.57-4.96 27.63-2.27 55.26-4.53 82.88-6.79 3.48-.28 7.04-.16 10.41-.9 4.13-.92 5.23 1.08 5.9 4.48 1.48 7.56 1.56 7.55 8.97 7.55h90.96c.74 5.31-1.94 5.85-5.83 5.85-80.66-.07-161.31-.05-241.97-.05-31 0-61.99-.16-92.99.15-5.22.05-7.48-1.5-8.37-6.43-.77-4.37-2.17-8.62-3.41-13.36zM74.03 34.87c7.72-4.66 15.5-9.23 23.15-14 5.99-3.74 12.37-4.8 19.42-4.77 45.79.22 91.57.07 137.36.2 2.85.01 6.01.7 8.49 2.05 9.56 5.19 18.91 10.79 28.34 16.23-.2.46-.4.93-.6 1.39H74.57c-.18-.37-.36-.74-.54-1.1zM346.55 260.53c-.23 4.66-2.63 5.46-6.33 5.45-29.49-.11-58.98-.06-88.46-.06-75.3 0-150.61-.04-225.91.11-4.32.01-6.76-1.19-8.26-5.21-1.72-4.64-3.88-9.11-6.07-14.15h61.49c-6.93 5.52-13.19 10.51-20.66 16.46 10.34-.62 19.17-1.13 27.98-1.7 20.71-1.34 41.42-2.66 62.12-4.07 23.34-1.59 46.68-3.32 70.02-4.92 15.24-1.04 30.49-1.93 45.73-2.95 2.51-.17 3.62.79 3.83 3.32.21 2.44.83 4.85 1.35 7.72h83.17zM263.96 274.1c.96 4.23 1.79 7.93 2.7 11.94h64.79c-.85 4.12-2.98 5.34-6.73 5.34-94.83-.08-189.67-.06-284.5-.08-1.5 0-2.99-.29-4.49-.45.03-.54.05-1.08.08-1.62 76.02-5.03 152.04-10.08 228.15-15.13zM309.61 313.8c-2.36.91-4.72 2.61-7.09 2.61-79.99.14-159.98.12-239.97.08-1.61 0-3.22-.6-4.84-.92.04-.45.07-.9.11-1.35 12.23-.71 24.47-1.39 36.7-2.15 25.19-1.56 50.37-3.21 75.55-4.75 19.57-1.19 39.14-2.23 58.71-3.42 11.93-.73 23.86-1.49 35.77-2.5 3.65-.31 5.86.41 5.84 4.43-.02 5.16 2.51 6.55 7.51 6.36 10.39-.4 20.81-.12 31.22-.12.17.58.33 1.16.49 1.73zM278.88 336.51c-4.66 3.37-9.23 6.12-15.63 6.09-54.32-.22-108.63-.12-162.95-.16-2.39 0-4.78-.52-7.18-.79 0-.46-.01-.93-.01-1.39 6.6-.64 13.2-1.35 19.8-1.91 25.98-2.19 51.96-4.33 77.94-6.51 23.33-1.95 46.65-3.94 69.97-5.9.33-.03.67 0 1-.02 11.99-.8 11.99-.8 17.06 10.59zM124.24 9.99c38.8-13.41 77.69-13.23 116.62 0H124.24zM244.9 353.36c-30 10.64-60.7 13.62-92.26 7.49l92.21-8.82c.03.44.04.89.05 1.33z"/></svg>
    </div>
  </div>
</div>

<div id="qfg-3" class='qfg'>
  <div class="__holes"></div>
  <div class="__cover"></div>
  <div class="__label">
    <div class="__decor"></div>
    <div class="__title">
      <span>Quest for Glory II</span>
      <span>Trial by Fire</span>
      <span>Game Disk 3</span>
    </div>
    <div class="__os">
      <span>MS-DOS</span>
      <span>VER#1.1.05</span>
      <span>INT#12.7.90</span>
    </div>    
    <div class="__logo">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 365.07 364"><path d="M319.31 61.73H46.6l-.93-1.05c6.56-6.12 13.05-12.32 19.75-18.29.91-.81 2.85-.65 4.31-.65 75.1-.03 150.2-.05 225.31.09 2.38 0 5.29 1.11 7.04 2.7 5.74 5.26 11.05 10.97 17.23 17.2zM4.9 138.05c1.99-6.14 3.66-12.04 5.92-17.69.46-1.14 3.15-1.94 4.83-1.96 17.67-.14 35.33-.09 53-.09h70.63c-1.77 5.69-3.32 10.66-5.17 16.57 25.12-4.88 49.32-9.58 73.73-14.32.67 2.34 1.53 4.05 1.59 5.79.19 5.81 3.09 7.1 8.61 7.04 26.83-.3 53.66-.14 80.5-.14h6.24c-2.09-5-3.97-9.48-6.07-14.5h55.04c1.93 6.1 3.92 12.4 6.09 19.3H4.9zM111.91 169.54c-4.91 5.61-9.33 10.67-13.85 15.83 2.15-.29 4.79-.67 7.43-.98 28.35-3.43 56.71-6.84 85.06-10.27 8.57-1.04 17.11-2.27 25.7-3.09 1.47-.14 4.05.95 4.51 2.1 3.79 9.63 10.56 11.81 20.62 11.5 26.63-.81 53.31-.28 79.96-.28h6.31c-2.05-4.98-3.9-9.46-5.94-14.41h43.32c0 5.5.16 10.94-.14 16.35-.06 1.04-1.74 2.21-2.92 2.9-.75.44-1.95.09-2.95.09H.04c0-6.02-.17-11.78.19-17.5.05-.83 2.62-2.12 4.05-2.14 10.49-.18 20.99-.1 31.49-.1h76.14zM338.38 86.92H26.32c4.72-6.54 8.86-12.44 13.23-18.17.63-.82 2.36-1.12 3.58-1.12 35.32-.05 70.63-.04 105.95-.02.78 0 1.57.24 2.79.44-1.04 5.05-2.04 9.86-3.15 15.27 7.11-4.3 13.74-8.3 20.22-12.22.56.24 1.01.28 1.15.51 5.63 9.13 13.87 10.91 24.15 10.5 19.79-.78 39.64-.23 59.46-.23h4.77c.06-.33.11-.67.17-1-7.6-4.12-15.21-8.23-22.81-12.35l.15-.95h4.16c25.99 0 51.98.11 77.96-.1 4.61-.04 7.83.91 10.29 5.08 2.78 4.69 6.21 8.99 9.99 14.36zM315.29 158.17c-2.01-4.6-3.84-8.81-5.91-13.55 1.52-.16 2.57-.37 3.63-.37 14.66-.02 29.32.08 43.98-.09 3.15-.04 4.52.96 4.9 4.03.61 4.92 1.47 9.81 2.29 15.12H.67c.83-5.66 1.45-11.05 2.54-16.35.22-1.09 2.09-1.97 3.36-2.66.64-.35 1.63-.07 2.47-.07H129.24c-3.27 5.69-6.1 10.62-9.61 16.73 31.53-4.78 61.79-9.37 92.3-14 .95 3.91 1.8 7.42 2.72 11.2 33.41.01 66.77.01 100.64.01zM291.82 107.32c-4.12-5.16-7.39-9.25-11.11-13.91 1.91-.19 3.14-.41 4.37-.42 17.5-.02 35 .08 52.49-.1 3.36-.03 5.14 1.01 6.43 4.05 2.11 5 4.61 9.83 7.23 15.32H13.46c3.11-6.22 5.9-12.02 8.95-17.68.47-.87 2.14-1.54 3.26-1.54 39.83-.04 79.65 0 119.48.05.31 0 .61.22 1.3.48-1.14 4.66-2.29 9.38-3.63 14.87 13.95-4.21 27.32-8.04 40.52-12.37 3.82-1.25 6.62-.75 8.74 2.23 5.64 7.94 13.28 9.42 22.58 9.2 23.48-.57 46.99-.19 70.48-.19 1.78.01 3.58.01 6.68.01zM88.73 195.45c-1.05 4.93-2.04 9.61-3.19 14.98 10.89-.82 21.43-1.52 31.95-2.43 13.06-1.13 26.1-2.46 39.15-3.64 24.79-2.24 49.59-4.37 74.36-6.74 3.68-.35 6.49.25 8.75 3.2 5.23 6.84 11.87 9.06 20.68 8.83 24.98-.65 49.98-.23 74.97-.23h6.34c-2.95-4.95-5.53-9.27-8.42-14.09h31.31c-.83 6.43-1.62 12.58-2.43 18.94H2.63c-.87-6.24-1.71-12.26-2.62-18.81 29.78-.01 59.1-.01 88.72-.01zM3.87 220.77h80.04c-.84 4.94-1.66 9.73-2.62 15.37 5.39-.31 10.44-.51 15.46-.91 20.19-1.62 40.38-3.31 60.57-4.96 27.63-2.27 55.26-4.53 82.88-6.79 3.48-.28 7.04-.16 10.41-.9 4.13-.92 5.23 1.08 5.9 4.48 1.48 7.56 1.56 7.55 8.97 7.55h90.96c.74 5.31-1.94 5.85-5.83 5.85-80.66-.07-161.31-.05-241.97-.05-31 0-61.99-.16-92.99.15-5.22.05-7.48-1.5-8.37-6.43-.77-4.37-2.17-8.62-3.41-13.36zM74.03 34.87c7.72-4.66 15.5-9.23 23.15-14 5.99-3.74 12.37-4.8 19.42-4.77 45.79.22 91.57.07 137.36.2 2.85.01 6.01.7 8.49 2.05 9.56 5.19 18.91 10.79 28.34 16.23-.2.46-.4.93-.6 1.39H74.57c-.18-.37-.36-.74-.54-1.1zM346.55 260.53c-.23 4.66-2.63 5.46-6.33 5.45-29.49-.11-58.98-.06-88.46-.06-75.3 0-150.61-.04-225.91.11-4.32.01-6.76-1.19-8.26-5.21-1.72-4.64-3.88-9.11-6.07-14.15h61.49c-6.93 5.52-13.19 10.51-20.66 16.46 10.34-.62 19.17-1.13 27.98-1.7 20.71-1.34 41.42-2.66 62.12-4.07 23.34-1.59 46.68-3.32 70.02-4.92 15.24-1.04 30.49-1.93 45.73-2.95 2.51-.17 3.62.79 3.83 3.32.21 2.44.83 4.85 1.35 7.72h83.17zM263.96 274.1c.96 4.23 1.79 7.93 2.7 11.94h64.79c-.85 4.12-2.98 5.34-6.73 5.34-94.83-.08-189.67-.06-284.5-.08-1.5 0-2.99-.29-4.49-.45.03-.54.05-1.08.08-1.62 76.02-5.03 152.04-10.08 228.15-15.13zM309.61 313.8c-2.36.91-4.72 2.61-7.09 2.61-79.99.14-159.98.12-239.97.08-1.61 0-3.22-.6-4.84-.92.04-.45.07-.9.11-1.35 12.23-.71 24.47-1.39 36.7-2.15 25.19-1.56 50.37-3.21 75.55-4.75 19.57-1.19 39.14-2.23 58.71-3.42 11.93-.73 23.86-1.49 35.77-2.5 3.65-.31 5.86.41 5.84 4.43-.02 5.16 2.51 6.55 7.51 6.36 10.39-.4 20.81-.12 31.22-.12.17.58.33 1.16.49 1.73zM278.88 336.51c-4.66 3.37-9.23 6.12-15.63 6.09-54.32-.22-108.63-.12-162.95-.16-2.39 0-4.78-.52-7.18-.79 0-.46-.01-.93-.01-1.39 6.6-.64 13.2-1.35 19.8-1.91 25.98-2.19 51.96-4.33 77.94-6.51 23.33-1.95 46.65-3.94 69.97-5.9.33-.03.67 0 1-.02 11.99-.8 11.99-.8 17.06 10.59zM124.24 9.99c38.8-13.41 77.69-13.23 116.62 0H124.24zM244.9 353.36c-30 10.64-60.7 13.62-92.26 7.49l92.21-8.82c.03.44.04.89.05 1.33z"/></svg>
    </div>
  </div>
</div>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Overpass+Mono&display=swap');

// see https://codepen.io/32bitkid/pen/dBzQOj for disk code
.qfg {
  $color: rgb(31,108,153);
  $label-font: (normal normal 1.75vmin / #{1.4} 'Overpass Mono', monospace);
  @include diskette--3-5($color);
  position: absolute;

  .__label { 
    @include home-label(
      transparent, 
      rgba(#333, 0.5), 
      $font: $label-font, 
      $hand-drawn: false,  
    );
    
    display: block;
    overflow: hidden;
  }

  .__title {
    position: absolute;
    > span { display: block; }
    text-transform: uppercase;
    top: 40%;
    left: 0;
    right: 0;
  }

  .__os {
    > span { display: block; }
    position: absolute;
    bottom: 1vmin;
    left: 2vmin; right: 2vmin;
    text-align: left;
    > span:nth-child(2) { text-indent: 2ch; }
    > span:nth-child(3) { text-indent: 4ch; }
  }

  .__holes {
    &::before, &:after {
      content: '';
      position: absolute;
      top: 3vmin;
      width: 3vmin;
      height: 2vmin;
      
      border-left: 0.5px solid lighten($color, 10%);
      border-right: 0.5px solid lighten($color, 10%);      
    }
    
    &::before { 
      left: 1vmin; 
      box-shadow: inset 0 0 1vmin darken($color, 10%); 
    }
    
    &::after { 
      right: 1vmin; background-color: #222; 
      box-shadow: inset 0 0 1vmin darken(black, 10%); 
    }
    
  }
  
  .__logo {
    color: rgba(#999, 0.5);
    position: absolute; 
    top: 3vmin;
    left: 3vmin;
    svg { vertical-align: middle; width: 4.5vmin; height: 4.5vmin; fill: currentColor; } 
    &::after {
      position: absolute;
      top: 0vmin;
      left: 5.5vmin;
      content: 'SIERRA';
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;
      font-size: 3.5vmin;
      font-weight: 500;
    }
  }

  .__decor {
    &::before { 
      content: '';
      position: absolute;
      top: 0vmin;
      right: 0;
      border-radius: 0 1vmin 0 0;
      width: 6.25vmin;
      height: 18vmin;
      background-image:
        linear-gradient(to bottom, rgb(59,183,213), rgba(59,183,213, 0));
    }
    
    &::after { 
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      height: 150%;
      width: 7vmin;
      transform-origin: center center;
      transform: translate(-15vmin, 0vmin) translate(-50%, -50%) rotate(-55deg);
      background-blend-mode: overlay;
      background-image:
        linear-gradient(to bottom, rgb(144,240,171), rgba(144,240,171,0));
    }
  }

  // borrow an element for decor
  .__label::before {
    position: absolute;
    content: '';
          content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      height: 150%;
      width: 3vmin;
      transform-origin: center center;
      transform: translate(-15vmin, 12vmin) translate(-50%, -50%) rotate(-55deg);
      background-size: 100% 1.5vmin;
      background-image:
        linear-gradient(to bottom, rgba(219,63,78, 0.7) 1vmin, rgba(219,63,78,0) 1vmin);
  }
}

#qfg-1 { transform: translate(-30.25vmin, 9vmin) rotate(33deg); }
#qfg-2 { transform: translate(-0vmin, -8vmin) rotate(-15deg); }
#qfg-3 { transform: translate(29.5vmin, 5vmin) rotate(3deg); }

              
            
!

JS

              
                
              
            
!
999px

Console