cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

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

Auto-Updating Preview

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

            
              <div class="books">
  <div class="book book--the-case-of-the-marber">
    <div class="book__logo">
      <svg class="penguin-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.1 44.8">
        <path d="M21.9 16.5c-1.6-2.6-3.9-5.7-4.2-8.9-.2-2 0-4.2-1.4-5.9-.4-.5-.9-.9-1.5-1.2-.6-.3-1.3-.5-2-.5-.6 0-1.3.1-1.9.3-.7.2-1.4.5-2.1.6C8 1 7.3.9 6.4.7 6 .6 5.8.6 5.3.5 5 .4 4.3.2 4.1.5c-.6.5.6 1.2 1 1.4.8.6 1.1.7 1.8 1.4 1 .9 1.8 1.9 2.1 3.2.1.4.1.8.1 1.1.1 5.6-9.2 11.1-9.1 21 0 3.5 1.9 4.1 1.9 2.1 0-2.3.8-4.8 1.6-6.9.2-.5.8-.6.7.2-.2 1.4-.8 3.7-.7 7.5 0 .9.1 1.8.2 2.8.1.7.3 1.5.5 2.2.2.6.4 1.2.7 1.7.2.4.5.8.8 1.2.3.4.6.6 1 .9.2.2.5.3.6.6.2.4-.4.6-.6.7-.3.1-.6.3-.8.4l-1.2.6c-.2.1-.5.2-.7.4s-.3.4 0 .5h.5c.3 0 .6-.1.9.1.4.1.3.5.4.8 0 .4.3.5.6.4.4-.1.6-.4.9-.6.2-.2.4-.4.7-.5.5-.2 1.1-.2 1.6-.1.3 0 .7.1 1-.1.2-.2.1-.7 0-.9-.1-.3-.2-.5-.4-.8-.1-.1-.1-.2-.2-.3-.2-.5 1.5-.9 1.7-.9.8-.2 1.7-.4 2.5-.5.8-.1 1.7-.1 2.5.2.3.1.6.4.8.6.1.2.4.6.2.8-.4.3-.8.5-1.2.8-.2.2-.5.4-.7.6-.2.2-.2.5.1.5h1.2c.3 0 .6 0 .9.2.4.3.5.9.9 1.1.1.1.3.1.4 0 .3-.1.4-.4.6-.6.1-.2.3-.4.5-.6.1-.1.3-.1.5-.1h.9c.2 0 .6.1.8 0 .4-.3-.6-1-.9-1.1-.5-.3-1.2-.6-1.3-1.2-.2-.7.2-1.5.5-2.1.3-.7.8-1.3 1-2 .2-.6.4-1.3.5-2 .5-3.7-.3-7.7-1.4-11.3-.1-.4-.3-.9-.4-1.3-.2-.7.5-.8.8-.2.3.6 2.4 4.6 3 7.6.4 1.9 1.8 2 1.8-1.4-.2-5-2-8.5-4.3-12.1zM11.7 2.4c.6-.9 1.6-1.2 2.4-.7.7.5.9 1.6.3 2.5s-1.7 1.1-2.4.6c-.8-.4-.9-1.5-.3-2.4zm-.7 6c1.1-.8 3.7-1.2 4.4-4.3-.1-.1.1-.3.4 0 .6.6.5 3.3-.4 4.3-.5.5-1.4.6-2.1.7-.8.1-1.6.3-2.3.5s-.7-.6 0-1.2zm6.7 29.7c-.8 0-1.8-.5-3.3-.4-2.5.2-3.3 1.1-5.3.8-1.2-.2-2-.9-2.5-2-.6-1.4-.6-2.8-.7-4.2-.1-1.6-.1-3.1 0-4.7l.3-3.4c.2-1.8.6-3.7 1.1-5.5.4-1.6.8-3.2 1.4-4.7.5-1.1 1.3-2.2 2.4-2.7 1.2-.6 2.9-.7 4.1 0 2.7 1.4 2.6 4.6 2.7 7.2.1 2 .3 4.1.7 6.1.4 2.3 1.3 4.4 1.6 6.6.3 2.5.5 6.7-2.5 6.9z"/>
        <ellipse cx="13.2" cy="3.5" transform="rotate(-55.702 13.178 3.54)" rx=".9" ry=".7"/>
      </svg>
    </div>
    <div class="book__publisher">
      Penguin Code
    </div>
    <div class="book__pre-title"></div>
    <div class="book__title">
      The case of the Marber Grid system
    </div>
    <div class="book__pre-author"></div>
    <div class="book__author">
      Sam Beckham
    </div>
    <div class="book__artwork">
      <svg class="penguin-artwork" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.1 44.8">
        <path d="M21.9 16.5c-1.6-2.6-3.9-5.7-4.2-8.9-.2-2 0-4.2-1.4-5.9-.4-.5-.9-.9-1.5-1.2-.6-.3-1.3-.5-2-.5-.6 0-1.3.1-1.9.3-.7.2-1.4.5-2.1.6C8 1 7.3.9 6.4.7 6 .6 5.8.6 5.3.5 5 .4 4.3.2 4.1.5c-.6.5.6 1.2 1 1.4.8.6 1.1.7 1.8 1.4 1 .9 1.8 1.9 2.1 3.2.1.4.1.8.1 1.1.1 5.6-9.2 11.1-9.1 21 0 3.5 1.9 4.1 1.9 2.1 0-2.3.8-4.8 1.6-6.9.2-.5.8-.6.7.2-.2 1.4-.8 3.7-.7 7.5 0 .9.1 1.8.2 2.8.1.7.3 1.5.5 2.2.2.6.4 1.2.7 1.7.2.4.5.8.8 1.2.3.4.6.6 1 .9.2.2.5.3.6.6.2.4-.4.6-.6.7-.3.1-.6.3-.8.4l-1.2.6c-.2.1-.5.2-.7.4s-.3.4 0 .5h.5c.3 0 .6-.1.9.1.4.1.3.5.4.8 0 .4.3.5.6.4.4-.1.6-.4.9-.6.2-.2.4-.4.7-.5.5-.2 1.1-.2 1.6-.1.3 0 .7.1 1-.1.2-.2.1-.7 0-.9-.1-.3-.2-.5-.4-.8-.1-.1-.1-.2-.2-.3-.2-.5 1.5-.9 1.7-.9.8-.2 1.7-.4 2.5-.5.8-.1 1.7-.1 2.5.2.3.1.6.4.8.6.1.2.4.6.2.8-.4.3-.8.5-1.2.8-.2.2-.5.4-.7.6-.2.2-.2.5.1.5h1.2c.3 0 .6 0 .9.2.4.3.5.9.9 1.1.1.1.3.1.4 0 .3-.1.4-.4.6-.6.1-.2.3-.4.5-.6.1-.1.3-.1.5-.1h.9c.2 0 .6.1.8 0 .4-.3-.6-1-.9-1.1-.5-.3-1.2-.6-1.3-1.2-.2-.7.2-1.5.5-2.1.3-.7.8-1.3 1-2 .2-.6.4-1.3.5-2 .5-3.7-.3-7.7-1.4-11.3-.1-.4-.3-.9-.4-1.3-.2-.7.5-.8.8-.2.3.6 2.4 4.6 3 7.6.4 1.9 1.8 2 1.8-1.4-.2-5-2-8.5-4.3-12.1zM11.7 2.4c.6-.9 1.6-1.2 2.4-.7.7.5.9 1.6.3 2.5s-1.7 1.1-2.4.6c-.8-.4-.9-1.5-.3-2.4zm-.7 6c1.1-.8 3.7-1.2 4.4-4.3-.1-.1.1-.3.4 0 .6.6.5 3.3-.4 4.3-.5.5-1.4.6-2.1.7-.8.1-1.6.3-2.3.5s-.7-.6 0-1.2zm6.7 29.7c-.8 0-1.8-.5-3.3-.4-2.5.2-3.3 1.1-5.3.8-1.2-.2-2-.9-2.5-2-.6-1.4-.6-2.8-.7-4.2-.1-1.6-.1-3.1 0-4.7l.3-3.4c.2-1.8.6-3.7 1.1-5.5.4-1.6.8-3.2 1.4-4.7.5-1.1 1.3-2.2 2.4-2.7 1.2-.6 2.9-.7 4.1 0 2.7 1.4 2.6 4.6 2.7 7.2.1 2 .3 4.1.7 6.1.4 2.3 1.3 4.4 1.6 6.6.3 2.5.5 6.7-2.5 6.9z"/>
        <ellipse cx="13.2" cy="3.5" transform="rotate(-55.702 13.178 3.54)" rx=".9" ry=".7"/>
      </svg>
    </div>
  </div>
  
  
  <div class="book book--smashing">
    <div class="book__logo">
      <svg class="penguin-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.1 44.8">
        <path d="M21.9 16.5c-1.6-2.6-3.9-5.7-4.2-8.9-.2-2 0-4.2-1.4-5.9-.4-.5-.9-.9-1.5-1.2-.6-.3-1.3-.5-2-.5-.6 0-1.3.1-1.9.3-.7.2-1.4.5-2.1.6C8 1 7.3.9 6.4.7 6 .6 5.8.6 5.3.5 5 .4 4.3.2 4.1.5c-.6.5.6 1.2 1 1.4.8.6 1.1.7 1.8 1.4 1 .9 1.8 1.9 2.1 3.2.1.4.1.8.1 1.1.1 5.6-9.2 11.1-9.1 21 0 3.5 1.9 4.1 1.9 2.1 0-2.3.8-4.8 1.6-6.9.2-.5.8-.6.7.2-.2 1.4-.8 3.7-.7 7.5 0 .9.1 1.8.2 2.8.1.7.3 1.5.5 2.2.2.6.4 1.2.7 1.7.2.4.5.8.8 1.2.3.4.6.6 1 .9.2.2.5.3.6.6.2.4-.4.6-.6.7-.3.1-.6.3-.8.4l-1.2.6c-.2.1-.5.2-.7.4s-.3.4 0 .5h.5c.3 0 .6-.1.9.1.4.1.3.5.4.8 0 .4.3.5.6.4.4-.1.6-.4.9-.6.2-.2.4-.4.7-.5.5-.2 1.1-.2 1.6-.1.3 0 .7.1 1-.1.2-.2.1-.7 0-.9-.1-.3-.2-.5-.4-.8-.1-.1-.1-.2-.2-.3-.2-.5 1.5-.9 1.7-.9.8-.2 1.7-.4 2.5-.5.8-.1 1.7-.1 2.5.2.3.1.6.4.8.6.1.2.4.6.2.8-.4.3-.8.5-1.2.8-.2.2-.5.4-.7.6-.2.2-.2.5.1.5h1.2c.3 0 .6 0 .9.2.4.3.5.9.9 1.1.1.1.3.1.4 0 .3-.1.4-.4.6-.6.1-.2.3-.4.5-.6.1-.1.3-.1.5-.1h.9c.2 0 .6.1.8 0 .4-.3-.6-1-.9-1.1-.5-.3-1.2-.6-1.3-1.2-.2-.7.2-1.5.5-2.1.3-.7.8-1.3 1-2 .2-.6.4-1.3.5-2 .5-3.7-.3-7.7-1.4-11.3-.1-.4-.3-.9-.4-1.3-.2-.7.5-.8.8-.2.3.6 2.4 4.6 3 7.6.4 1.9 1.8 2 1.8-1.4-.2-5-2-8.5-4.3-12.1zM11.7 2.4c.6-.9 1.6-1.2 2.4-.7.7.5.9 1.6.3 2.5s-1.7 1.1-2.4.6c-.8-.4-.9-1.5-.3-2.4zm-.7 6c1.1-.8 3.7-1.2 4.4-4.3-.1-.1.1-.3.4 0 .6.6.5 3.3-.4 4.3-.5.5-1.4.6-2.1.7-.8.1-1.6.3-2.3.5s-.7-.6 0-1.2zm6.7 29.7c-.8 0-1.8-.5-3.3-.4-2.5.2-3.3 1.1-5.3.8-1.2-.2-2-.9-2.5-2-.6-1.4-.6-2.8-.7-4.2-.1-1.6-.1-3.1 0-4.7l.3-3.4c.2-1.8.6-3.7 1.1-5.5.4-1.6.8-3.2 1.4-4.7.5-1.1 1.3-2.2 2.4-2.7 1.2-.6 2.9-.7 4.1 0 2.7 1.4 2.6 4.6 2.7 7.2.1 2 .3 4.1.7 6.1.4 2.3 1.3 4.4 1.6 6.6.3 2.5.5 6.7-2.5 6.9z"/>
        <ellipse cx="13.2" cy="3.5" transform="rotate(-55.702 13.178 3.54)" rx=".9" ry=".7"/>
      </svg>
    </div>
    <div class="book__publisher">
      Penguin Design
    </div>
    <div class="book__pre-title"></div>
    <div class="book__title">
      Smashing grids in CSS
    </div>
    <div class="book__pre-author"></div>
    <div class="book__author">
      Sam Beckham
    </div>
    <div class="book__artwork">
      <svg class="smashing-cat" xmlns="http://www.w3.org/2000/svg" id="Layer_1" viewBox="0 0 500 500">
        <style>
          .st0{fill:#98D6F7;} .st1{fill:#FFFFFF;} .st2{fill:#891B1F;} .st3{fill:#CD181F;} .st4{fill:#36A9E1;} .st5{opacity:0.2;fill:#1D1D1B;enable-background:new ;} .st6{fill:#BE1622;} .st7{fill:#E23025;} .st8{fill:#9C1B1E;} .st9{opacity:0.2;} .st10{fill:#1D1D1B;} .st11{fill:#FFDE00;} .st12{fill:none;stroke:#FFFFFF;stroke-width:2.96;stroke-miterlimit:10;}
        </style>
        <path d="M254.2 413.7c-10-1.6-17.9 3.6-20.7 13.6 9.6-32.4-34.5-36.1-37.9-7-2.7-8-8-21.4-17.4-23.6-15.6-4.5-18.7 17.2-12.8 27.6 3.9 7.3 12.1 12 19.6 14.9-9.3-1-28.6-2.9-34.5 6.5-7.8 11.9 18.3 16.3 36 9.4 1.4 3.6 4.2 6.5 7.8 8 15.1 7 35.8-4.1 32.8-20.7 6.5 10.9 12.2 17 25.1 12.9 19.6-6.2 26.7-37.9 2-41.6zM182.1 45.5c7.3-1.1 13.1 2.7 15.1 10-7-23.8 25.3-26.5 27.8-5.1 2-5.9 5.9-15.7 12.8-17.4 11.4-3.3 13.7 12.6 9.4 20.2-2.9 5.4-8.9 8.8-14.4 10.9 6.8-.7 20.9-2.1 25.3 4.8 5.7 8.8-13.4 12-26.5 6.9-1 2.6-3.1 4.7-5.7 5.8-11.1 5.1-26.3-3-24.1-15.2-4.8 8-9 12.5-18.4 9.5-14.2-4.4-19.5-27.7-1.3-30.4z" class="st1"/>
        <path d="M275.8 318.3c-13.1 15.8 11.8 107.9 25.2 172.2 88.3-18.2 159.7-82.9 186.3-169l-39.5-42.9L324 259.7l-48.2 58.6z" class="st2"/>
        <path d="M310.6 261c78.8 3 134.5 31.8 173.8 69.2 3.5-10.1 6.4-20.4 8.6-30.8-89.4-51.4-186.9-38.5-182.4-38.4z" class="st3"/>
        <path d="M372.2 237.9l-78.9 33.4c2.5 53.8 12.4 106.7 28.4 158.1 5.2 16.8 10.6 33.7 17 50.1 43.4-16.5 81.4-44.8 109.5-81.9-18.5-28.1-35-57.3-48.8-89-2.2-5-30.8-69.4-27.2-70.7z" class="st4"/>
        <path d="M306.3 349.7l-2.6 8.1c4.7 24.2 10.7 48.1 18 71.6 5.2 16.7 10.6 33.5 16.9 49.8 2.8-1.1 5.5-2.1 8.2-3.3-33-66-40.5-126.2-40.5-126.2z" class="st5"/>
        <path d="M373.2 237.9l-78.9 33.4c.8 16.9 2.3 33.7 4.5 50.4 2.9-1.7 5.9-3.1 9.1-4.3 12.8-4.9 26.3-7.2 39.7-9.7l3.6-.6c.5-5.3 1.6-10.6 3.5-15.6 4.6-11.9 17.6-19.8 30.1-19.2-7-17-13.4-33.7-11.6-34.4z" class="st3"/>
        <path d="M365.6 308l9.3 21.4c22-9.5 58.5-16.9 109.7.4 2.5-7.3 4.8-14.8 6.6-22.4-36.1-12-81.8-18.4-125.6.6zm-141.9 54.9c-55.2-10.5-100.4-43.8-134.4-99l19.9-12.3c46.9 76 117 105.5 202.7 85 4.9-1.1 6.9-1.6 9.7-1.1l-3.9 23c1 .2 2 .2 3.1.1-.4.1-2 .5-3.4.8-10.7 2.6-35.2 8.4-66.2 6.8-9.3-.4-18.5-1.5-27.5-3.3z" class="st4"/>
        <path d="M372.5 273.5c-12.4 2.9-13.7 10.6-16.5 20.8-6 21.6-32 29.7-52.6 25.7-5.3-1.1-10.4-2.8-15.8-3s-11.2 1.4-14.4 5.7c-14.5 19.6 24.2 36.6 37.7 38.7 19.6 3 40.7-2.1 57-12.8 17.7-11.5 42.5-34.2 33.9-58-.6-1.7-1.4-3.4-2.4-5-5.5-9.1-16-14.8-26.9-12.1z" class="st6"/>
        <path d="M291 317.5l-67.6-29.8-31.1-44.8 5.3-60.5-30.6-60.6 38.7 8.9 76.7 17.6 35.2-41.6 37.1-27.4 18.7 4.5-3.2 55.9 7.4 25.6 21.8 81-48.2 54.7z" class="st1"/>
        <path d="M175.2 273.8c-3.3 37.6 24.1 40 24.1 40-1.7-1.3-5-10.2-5-10.2 15.7 22.6 44.1 33.1 44.1 33.1-2.5-2.5-10.6-16.8-10.6-16.8 10.8 15.3 35.2 20.8 35.2 20.8-3.1-1.4-12-15.1-12-15.1 12.7 10.1 24.4 13.8 31.8 15 2.8.5 5.6.7 8.4.6l3.2-.2-.1.2c5-1.1 10.1-1.6 15.2-1.5-19.5-.4-11.5 1.2-1-2.4 7.7-2.6 13.3-3.1 19.2-7.5 12.3-9.2 24.8-17.9 37.6-26.3 14-9.3 21.2-17.2 32.8-28l8-5.4c3.3-6.1 6.8-12 10.7-17.9.6-1 1.3-1.8 2-2.7.1-6.7-.2-13.4-.8-20 2.9 3 4.4 9.1 5.3 15 2-1.9 4.1-3.6 6.3-5.1v-.3c.2-1.2.6-2.5 1.1-3.6l-.7.9c-1-16.5-9.3-33-9.3-33 7.5 3.5 13.8 22.1 13.8 22.1 5.5-34.8-43.1-62.1-43.1-62.1 10.4 1.4 31.9 16.1 31.9 16.1-13.8-19.6-47.1-28.9-47.1-28.9 10.3-57.8.2-76.5.2-76.5-43.5 1.1-75.6 43.1-75.6 43.1-29.3-12.9-53.3.6-53.3.6 10.5-1.9 22.4 3.3 22.4 3.3-13.6 1.2-27 3.8-40 7.7-6-5.7-28.5-22.7-69.5-4.5 0 0 5.8 33.5 20.7 47.8-10.5 11.3-9.6 16.8-9.6 16.8l11.9-8.5 5.8 33.4c-9.3 6.9-16.4 16.5-20.2 27.4 2.3-3.1 12.7-6.4 12.7-6.4C162.4 259.1 168 284 168 284c.9-4.2 3.5-7.9 7.2-10.2zm148.9-154.6s20.2-29 42.3-29.2c0 0 3.3 29.4-6.1 46 0 0-18-12.8-36.2-16.8zm-41.5 129.5c-18.8 4.4-35.7-6.9-41-29.6s2.1-59 20.9-63.4 41.7 24.8 47 47.4c5.3 22.7-8.1 41.2-26.9 45.6zm-86.8-78.4c-14.8-7.1-19.9-38.5-20-38.5 24.1-7.5 45 4.8 41.9 7.5-7 6.2-21.9 31-21.9 31z" class="st7"/>
        <path d="M394.2 215.6c-.9.6-26 60-26 60L284.3 341c61.6 9.4 113.2-53.7 113.2-53.7-2.7 10.9-8.1 21-15.7 29.3 47.9-31.1 42.1-70.1 42.1-70.1 3.2 8.8 4 30.3 4 30.3 13.7-28.5-5.6-73-5.6-73s-27.2 11.3-28.1 11.8z" class="st7"/>
        <path d="M347.9 270.4c24.5-32.7 14.1-77.3 14-77.8-.2-.6-.8-.9-1.4-.9-.7.1-1.2.7-1.1 1.4.1.4 10.2 43.9-13.5 75.6-15.3 20.5-41 31.7-76.6 33.5-.6.1-1.1.6-1.1 1.2 0 .7.5 1.3 1.2 1.3 33.3-1.7 58.3-11.5 74.3-29.3 1.5-1.5 2.9-3.2 4.2-5z" class="st1"/>
        <path d="M378.7 195.5c-22.7-25.7-32.3-1.3-32.3-1.3 8.7-32.9 29.8-3.6 29.8-3.6m-160.3 68c5.6 8 17 15.1 17 15.1s28.8-22.9 12.3-23.1c-16.5-.2-34.9-.1-29.3 8z" class="st1"/>
        <ellipse cx="254.1" cy="189.5" transform="rotate(-23.76 254.144 189.53)" class="st7" rx="5.2" ry="12.3"/>
        <ellipse cx="220.7" cy="206.2" transform="rotate(-13.132 220.656 206.202)" class="st1" rx="5.2" ry="12.3"/>
        <path d="M124.1 242.9c18.9-54.2-28.7-42.4-28.7-42.4-22.5-20-28 12.5-28 12.5-20.4 8.6-11.2 18.5-11.2 18.5-28.5 19 13.1 30.5 13.1 30.5 1.9 17.4 22.9 14.8 22.9 14.8l7.5 49.9c47.9 1.5 63.5-46.9 63.5-46.9l-39.1-36.9z" class="st8"/>
        <path d="M113.9 243.6l38.7 44c1.5 1.7 3 3.4 4.5 5 2.4-4 4.3-8.3 5.9-12.7L124 243c5.6-16 5.4-26.3 2.3-32.8 1.2 12.2-3.2 25-12.4 33.4z" class="st9 st10"/>
        <path d="M77.1 258.1c2.7-25 28.3-16.5 28.3-16.5" class="st5"/>
        <path d="M412.5 435.6c-22.1 14.1-50.5 29-77.2 35.1 1 2.9 2.3 5.9 3.4 8.9 26.9-10.4 51.9-25.2 73.8-44z" class="st11"/>
        <path d="M387.2 443.4l-66.5-39.1 1.4-24.4 76.3-32 27 16z" class="st7"/>
        <path d="M383.3 430.7L330 399.3l.7-13.2 67-28.1 16 9.4z" class="st11"/>
        <path d="M357.5 384.3c3.4-3.5 10.6-10.8 16-6.9 4.4 3.2-1 8.5-3.4 11-1.9 2-4.3 3.8-5.9 6-2.4 3.2-3.9 7-4.4 11-.6 6 2.8 10.9 7.8 13.9 16.3 9.9 32.9-11.3 32.9-11.3l-8-7.5c-.6 1-1.3 1.9-2 2.9-2.4 2.8-5.5 5-8.9 6.4-1.4.6-3 .8-4.6.5-3.8-.8-4.8-4.8-3.4-8 3.4-8 12-12.8 13.7-21.7 1.1-5.7-1.7-10.5-6.6-13.3-14.9-8.7-30.6 10-30.6 10l7.6 7.9" class="st7"/>
        <path d="M378.9 454.8c-1.3.8-2.6 1.4-4 2l2.7 3.9c1.3-.8 2.5-1.5 3.8-2.3l-2.5-3.6zm-22.5 9.6c-1.4.6-2.8 1.1-4.3 1.6l4.2 6.1c1.3-.6 2.7-1.3 4-1.9l-3.9-5.8z" class="st3"/>
        <path d="M180.9 389.2l-61.6-61.3m61.6 41.5l-29.1-26.8M474 257.9l-29.2-26.8" class="st12"/>
      </svg>

    </div>
  </div>
  
  <div class="book book--conference">
    <div class="book__logo">
      <svg class="penguin-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.1 44.8">
        <path d="M21.9 16.5c-1.6-2.6-3.9-5.7-4.2-8.9-.2-2 0-4.2-1.4-5.9-.4-.5-.9-.9-1.5-1.2-.6-.3-1.3-.5-2-.5-.6 0-1.3.1-1.9.3-.7.2-1.4.5-2.1.6C8 1 7.3.9 6.4.7 6 .6 5.8.6 5.3.5 5 .4 4.3.2 4.1.5c-.6.5.6 1.2 1 1.4.8.6 1.1.7 1.8 1.4 1 .9 1.8 1.9 2.1 3.2.1.4.1.8.1 1.1.1 5.6-9.2 11.1-9.1 21 0 3.5 1.9 4.1 1.9 2.1 0-2.3.8-4.8 1.6-6.9.2-.5.8-.6.7.2-.2 1.4-.8 3.7-.7 7.5 0 .9.1 1.8.2 2.8.1.7.3 1.5.5 2.2.2.6.4 1.2.7 1.7.2.4.5.8.8 1.2.3.4.6.6 1 .9.2.2.5.3.6.6.2.4-.4.6-.6.7-.3.1-.6.3-.8.4l-1.2.6c-.2.1-.5.2-.7.4s-.3.4 0 .5h.5c.3 0 .6-.1.9.1.4.1.3.5.4.8 0 .4.3.5.6.4.4-.1.6-.4.9-.6.2-.2.4-.4.7-.5.5-.2 1.1-.2 1.6-.1.3 0 .7.1 1-.1.2-.2.1-.7 0-.9-.1-.3-.2-.5-.4-.8-.1-.1-.1-.2-.2-.3-.2-.5 1.5-.9 1.7-.9.8-.2 1.7-.4 2.5-.5.8-.1 1.7-.1 2.5.2.3.1.6.4.8.6.1.2.4.6.2.8-.4.3-.8.5-1.2.8-.2.2-.5.4-.7.6-.2.2-.2.5.1.5h1.2c.3 0 .6 0 .9.2.4.3.5.9.9 1.1.1.1.3.1.4 0 .3-.1.4-.4.6-.6.1-.2.3-.4.5-.6.1-.1.3-.1.5-.1h.9c.2 0 .6.1.8 0 .4-.3-.6-1-.9-1.1-.5-.3-1.2-.6-1.3-1.2-.2-.7.2-1.5.5-2.1.3-.7.8-1.3 1-2 .2-.6.4-1.3.5-2 .5-3.7-.3-7.7-1.4-11.3-.1-.4-.3-.9-.4-1.3-.2-.7.5-.8.8-.2.3.6 2.4 4.6 3 7.6.4 1.9 1.8 2 1.8-1.4-.2-5-2-8.5-4.3-12.1zM11.7 2.4c.6-.9 1.6-1.2 2.4-.7.7.5.9 1.6.3 2.5s-1.7 1.1-2.4.6c-.8-.4-.9-1.5-.3-2.4zm-.7 6c1.1-.8 3.7-1.2 4.4-4.3-.1-.1.1-.3.4 0 .6.6.5 3.3-.4 4.3-.5.5-1.4.6-2.1.7-.8.1-1.6.3-2.3.5s-.7-.6 0-1.2zm6.7 29.7c-.8 0-1.8-.5-3.3-.4-2.5.2-3.3 1.1-5.3.8-1.2-.2-2-.9-2.5-2-.6-1.4-.6-2.8-.7-4.2-.1-1.6-.1-3.1 0-4.7l.3-3.4c.2-1.8.6-3.7 1.1-5.5.4-1.6.8-3.2 1.4-4.7.5-1.1 1.3-2.2 2.4-2.7 1.2-.6 2.9-.7 4.1 0 2.7 1.4 2.6 4.6 2.7 7.2.1 2 .3 4.1.7 6.1.4 2.3 1.3 4.4 1.6 6.6.3 2.5.5 6.7-2.5 6.9z"/>
        <ellipse cx="13.2" cy="3.5" transform="rotate(-55.702 13.178 3.54)" rx=".9" ry=".7"/>
      </svg>
    </div>
    <div class="book__publisher">
      a Penguin Promotion
    </div>
    <div class="book__pre-title"></div>
    <div class="book__title">
      Frontend NE: The Conference
    </div>
    <div class="book__pre-author"></div>
    <div class="book__author">
      Shamus Plugg
    </div>
    <div class="book__artwork">
      <svg class="frontendne-logo" xmlns="http://www.w3.org/2000/svg" width="8em" height="8em" viewBox="0 0 120 120" preserveAspectRatio="xMaxYMax meet"><path d="M86.67 43.33L120 43.33 120 76.67 86.67 76.67 86.67 43.33ZM0 86.67L120 86.67 120 120 0 120 0 86.67ZM0 0L120 0 120 33.33 0 33.33 0 0ZM0 43.33L76.67 43.33 76.67 76.67 0 76.67 0 43.33Z"></path></svg>
    </div>
  </div>
  
  <div class="book book--1984">
    <div class="book__logo">
      <svg class="penguin-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26.1 44.8">
        <path d="M21.9 16.5c-1.6-2.6-3.9-5.7-4.2-8.9-.2-2 0-4.2-1.4-5.9-.4-.5-.9-.9-1.5-1.2-.6-.3-1.3-.5-2-.5-.6 0-1.3.1-1.9.3-.7.2-1.4.5-2.1.6C8 1 7.3.9 6.4.7 6 .6 5.8.6 5.3.5 5 .4 4.3.2 4.1.5c-.6.5.6 1.2 1 1.4.8.6 1.1.7 1.8 1.4 1 .9 1.8 1.9 2.1 3.2.1.4.1.8.1 1.1.1 5.6-9.2 11.1-9.1 21 0 3.5 1.9 4.1 1.9 2.1 0-2.3.8-4.8 1.6-6.9.2-.5.8-.6.7.2-.2 1.4-.8 3.7-.7 7.5 0 .9.1 1.8.2 2.8.1.7.3 1.5.5 2.2.2.6.4 1.2.7 1.7.2.4.5.8.8 1.2.3.4.6.6 1 .9.2.2.5.3.6.6.2.4-.4.6-.6.7-.3.1-.6.3-.8.4l-1.2.6c-.2.1-.5.2-.7.4s-.3.4 0 .5h.5c.3 0 .6-.1.9.1.4.1.3.5.4.8 0 .4.3.5.6.4.4-.1.6-.4.9-.6.2-.2.4-.4.7-.5.5-.2 1.1-.2 1.6-.1.3 0 .7.1 1-.1.2-.2.1-.7 0-.9-.1-.3-.2-.5-.4-.8-.1-.1-.1-.2-.2-.3-.2-.5 1.5-.9 1.7-.9.8-.2 1.7-.4 2.5-.5.8-.1 1.7-.1 2.5.2.3.1.6.4.8.6.1.2.4.6.2.8-.4.3-.8.5-1.2.8-.2.2-.5.4-.7.6-.2.2-.2.5.1.5h1.2c.3 0 .6 0 .9.2.4.3.5.9.9 1.1.1.1.3.1.4 0 .3-.1.4-.4.6-.6.1-.2.3-.4.5-.6.1-.1.3-.1.5-.1h.9c.2 0 .6.1.8 0 .4-.3-.6-1-.9-1.1-.5-.3-1.2-.6-1.3-1.2-.2-.7.2-1.5.5-2.1.3-.7.8-1.3 1-2 .2-.6.4-1.3.5-2 .5-3.7-.3-7.7-1.4-11.3-.1-.4-.3-.9-.4-1.3-.2-.7.5-.8.8-.2.3.6 2.4 4.6 3 7.6.4 1.9 1.8 2 1.8-1.4-.2-5-2-8.5-4.3-12.1zM11.7 2.4c.6-.9 1.6-1.2 2.4-.7.7.5.9 1.6.3 2.5s-1.7 1.1-2.4.6c-.8-.4-.9-1.5-.3-2.4zm-.7 6c1.1-.8 3.7-1.2 4.4-4.3-.1-.1.1-.3.4 0 .6.6.5 3.3-.4 4.3-.5.5-1.4.6-2.1.7-.8.1-1.6.3-2.3.5s-.7-.6 0-1.2zm6.7 29.7c-.8 0-1.8-.5-3.3-.4-2.5.2-3.3 1.1-5.3.8-1.2-.2-2-.9-2.5-2-.6-1.4-.6-2.8-.7-4.2-.1-1.6-.1-3.1 0-4.7l.3-3.4c.2-1.8.6-3.7 1.1-5.5.4-1.6.8-3.2 1.4-4.7.5-1.1 1.3-2.2 2.4-2.7 1.2-.6 2.9-.7 4.1 0 2.7 1.4 2.6 4.6 2.7 7.2.1 2 .3 4.1.7 6.1.4 2.3 1.3 4.4 1.6 6.6.3 2.5.5 6.7-2.5 6.9z"/>
        <ellipse cx="13.2" cy="3.5" transform="rotate(-55.702 13.178 3.54)" rx=".9" ry=".7"/>
      </svg>
    </div>
    <div class="book__publisher">
      Penguin Classics
    </div>
    <div class="book__pre-title"></div>
    <div class="book__title">
      Nineteen Eighty-Four
    </div>
    <div class="book__pre-author"></div>
    <div class="book__author">
      George Orwell
    </div>
    <div class="book__artwork">
      <svg class="redact" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 60">
        <path d='M10 10 H90 V30 H10 Z'/>
        <path d='M10 40 H90 V50 H10 Z'/>
      </svg>
    </div>
  </div>
</div>
            
          
!
            
              * {
  box-sizing: border-box;
}

$book-width: 360px;
$book-height: $book-width * 1.61803; //The golden ratio

.books {
  padding: 32px;
  
  @supports(display: grid) {  
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax($book-width, 1fr)) ;
    grid-gap: 2em;
  }
}

.book {
  box-shadow: 0 0 20px rgba(0, 0, 0, .2);
  display: inline-block;
  font-family: "helvetica", "arial", sans-serif;
  font-size: 0;
  height: $book-height;
  margin: 16px;
  width: $book-width;
  
  @supports(display: grid) {
    display: grid;
    grid-template-areas:
      "logo publisher"
      "pre-title title"
      "pre-author author"
      "artwork artwork";
    grid-template-columns: 28.89%;
    grid-template-rows: 10.34% 11.72% 6.35%;
    margin: 0 auto;
  }
}

.book__logo,
.book__publisher,
.book__pre-title,
.book__title,
.book__pre-author,
.book__author,
.book__artwork{
  display: inline-block;
  font-size: 16px;
  padding: 8px 0;
  vertical-align: top;
  
  @supports(display: grid) {
    .book & { // For specificity reasons
      height: 100%;
      width: 100%;
    }
  }
}

.book__logo {
  height: 10.34%;
  padding: .7em;
  width: 28.89%;
  
  @supports(display: grid) {
    grid-area: logo;
  }
}

.book__publisher {
  height: 10.34%;
  width: 100 - 28.89%;
  
  @supports(display: grid) {
    align-items: center;
    display: flex;
    grid-area: publisher;
  }
}

.book__pre-title {
  height: 11.72%;
  width: 28.89%;
  
  @supports(display: grid) {
    grid-area: pre-title;
  }
}

.book__title {
  font-size: 24px;
  font-weight: bold;
  height: 11.72%;
  width: 100 - 28.89%;
  
  @supports(display: grid) {
    align-items: center;
    display: flex;
    grid-area: title;
  }
}

.book__pre-author {
  height: 6.35%;
  width: 28.89%;
  
  @supports(display: grid) {
    grid-area: pre-author;
  }
}

.book__author {
  height: 6.35%;
  width: 100 - 28.89%;
  
  @supports(display: grid) {
    align-items: center;
    display: flex;
    grid-area: author;
  }
}

.book__artwork {
  height: 100% - 10.34 - 11.72 - 6.35;
  overflow: hidden;
  position: relative;
  width: 100%;
  
  @supports(display: grid) {
    grid-area: artwork;
  }
}

.penguin-logo {
  display: block;
  fill: currentcolor;
  height: 100%;
  transform: scaleX(-1);
}


// The case of the Marber Grid System
.book--the-case-of-the-marber {
  background-color: #f9f2e2;
  color: #393a3b;

  .book__artwork,
  .book__pre-author,
  .book__author {
    background-color: #5C9EA1;
    color: #f9f2e2;
  }

  .book__logo,
  .book__publisher,
  .book__pre-author,
  .book__author {
    border-bottom: 1px solid;
  }

  .penguin-artwork {
    fill: 393a3b;
    position: absolute;
    top: 30%;
  }
}

// smashing
.book--smashing {
  background-color: #fff;
  color: #891B1F;
  
  .book__logo,
  .book__publisher,
  .book__pre-title,
  .book__title {
    border-bottom: 1px solid;
  }
  
  .book__artwork {
    background-color: #98D6F7;
  }
  
  .smashing-cat {
    position: absolute;
    bottom: -2em;
    left: -3em;
    width: 120%;
    transform: scaleX(-1);
  }
}


// Conference
.book--conference {
  background-color: #4a4a4a;
  color: #fff;
  
  .book__logo,
  .book__publisher,
  .book__pre-title,
  .book__title {
    border-bottom: 1px solid;
  }
  
  .book__artwork {
    background-color: #d24d57;
    background-image: linear-gradient(106deg, #d24d57 0%, #d24d57 25%, #59abe3 25%, #59abe3 50%, #4daf7c 50%, #4daf7c 75%, #f5d65a 75%, #f5d65a 100%);
  }
  
  .frontendne-logo {
    fill: #fff;
    display: block;
    margin: 33% auto;
    
    @supports(transform: translate(-50%, -50%)) {
      position: absolute;
      left: 50%;
      margin: 0;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

// 1984
.book--1984 {
  background-color: #f9f2e2;
  color: #393a3b;

  .book__artwork,
  .book__pre-author,
  .book__author {
    background-color: #df7020;
    color: #f9f2e2;
  }

  .book__logo,
  .book__publisher,
  .book__pre-author,
  .book__author {
    border-bottom: 1px solid;
  }
  
  .redact {
    @supports(transform: translate(-50%, -50%)) {
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
            
          
!
999px
Loading ..................

Console