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 class="p-table">
  
  <!--  Symbol  -->
  <div class="symbol unit unit-0 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Family </br> and/or Class
      </span>
      <span class="number right">
        Rank *
      </span>
    </div>
    <span class="letter">Symbol</span>
    <span class="name">Typeface</span>
    <div class="author-year">
      <span class="author left">
        Designer(s)
      </span>
      <span class="year right">
        Year Designed
      </span>
    </div>
  </div>

  <!--  Helvetica  -->
  <div class="unit unit-1 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        1
      </span>
    </div>
    <span class="letter">H</span>
    <span class="name">Helvetica</span>
    <div class="author-year">
      <span class="author left">
        Max Miedinger
      </span>
      <span class="year right">
        1957
      </span>
    </div>
  </div>
  
  <!--  Futura  -->
  <div class="unit unit-2 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        2
      </span>
    </div>
    <span class="letter">F</span>
    <span class="name">Futura</span>
    <div class="author-year">
      <span class="author left">
        Paul Renner
      </span>
      <span class="year right">
        1927
      </span>
    </div>
  </div>
  
  <!--  Bodoni  -->
  <div class="unit unit-3 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        3
      </span>
    </div>
    <span class="letter">B</span>
    <span class="name">Bodoni</span>
    <div class="author-year">
      <span class="author left">
        Gianbattista Bodoni
      </span>
      <span class="year right">
        1790
      </span>
    </div>
  </div>

  <!--  Univers  -->
  <div class="unit unit-4 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        4
      </span>
    </div>
    <span class="letter">U</span>
    <span class="name">Universe</span>
    <div class="author-year">
      <span class="author left">
        Adrian Frutiger
      </span>
      <span class="year right">
        1954
      </span>
    </div>
  </div>


  <!--  Arzidenz  -->
  <div class="unit unit-5 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        5
      </span>
    </div>
    <span class="letter">AK</span>
    <span class="name">Akzidenz-Grotesk</span>
    <div class="author-year">
      <span class="author left">
        Ferdinand Theinhardt </br>
        Hermann Berthold </br>
        Gunter G. Lange
      </span>
      <span class="year right">
        1880 - </br> 1972
      </span>
    </div>
  </div>



  <!--  Garamond  -->
  <div class="unit unit-6 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        6
      </span>
    </div>
    <span class="letter">G</span>
    <span class="name">Garamond</span>
    <div class="author-year">
      <span class="author left">
        Claude Garamond
      </span>
      <span class="year right">
        1530
      </span>
    </div>
  </div>
  
  <!--  Times  -->
  <div class="unit unit-7 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        7
      </span>
    </div>
    <span class="letter">T</span>
    <span class="name">Times</span>
    <div class="author-year">
      <span class="author left">
        Stanley Morison
      </span>
      <span class="year right">
        1931
      </span>
    </div>
  </div>
  
  <!--  Gill Sans  -->
  <div class="unit unit-8 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        8
      </span>
    </div>
    <span class="letter">Gs</span>
    <span class="name">Gill Sans</span>
    <div class="author-year">
      <span class="author left">
        Eric Gill
      </span>
      <span class="year right">
        1930
      </span>
    </div>
  </div>

  <!--  Optima  -->
  <div class="unit unit-9 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        9
      </span>
    </div>
    <span class="letter">O</span>
    <span class="name">Optima</span>
    <div class="author-year">
      <span class="author left">
        Hermann Zapg
      </span>
      <span class="year right">
        1954
      </span>
    </div>
  </div>


  <!--  Caslon  -->
  <div class="unit unit-10 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Garalde
      </span>
      <span class="number right">
        10
      </span>
    </div>
    <span class="letter">C</span>
    <span class="name">Caslon</span>
    <div class="author-year">
      <span class="author left">
        William Caslon
      </span>
      <span class="year right">
        1725
      </span>
    </div>
  </div>


  <!--  Frutiger  -->
  <div class="unit unit-14 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        14
      </span>
    </div>
    <span class="letter">Fr</span>
    <span class="name">Frutiger</span>
    <div class="author-year">
      <span class="author left">
        Adrian Frutiger
      </span>
      <span class="year right">
        1977
      </span>
    </div>
  </div>

  <!--  Bell Gothic  -->
  <div class="unit unit-16 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        16
      </span>
    </div>
    <span class="letter">Bg</span>
    <span class="name">Bell Gothic</span>
    <div class="author-year">
      <span class="author left">
        Chauncey H. Griffin
      </span>
      <span class="year right">
        1938
      </span>
    </div>
  </div>


  <!--  Syntax  -->
  <div class="unit unit-18 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Humanist
      </span>
      <span class="number right">
        18
      </span>
    </div>
    <span class="letter">S</span>
    <span class="name">Syntax</span>
    <div class="author-year">
      <span class="author left">
        Hars Eduard Meier
      </span>
      <span class="year right">
        1968
      </span>
    </div>
  </div>

  <!--  Meta  -->
  <div class="unit unit-20 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Humanist
      </span>
      <span class="number right">
        20
      </span>
    </div>
    <span class="letter">Me</span>
    <span class="name">Meta</span>
    <div class="author-year">
      <span class="author left">
        Erik Spiekermann
      </span>
      <span class="year right">
        1991
      </span>
    </div>
  </div>

  <!--  Avant Garde  -->
  <div class="unit unit-22 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Geometric
      </span>
      <span class="number right">
        22
      </span>
    </div>
    <span class="letter">Ag</span>
    <span class="name">Avant Garde</span>
    <div class="author-year">
      <span class="author left">
        Herb Lubalin
      </span>
      <span class="year right">
        1968
      </span>
    </div>
  </div>


  <!--  Franklin Gothic  -->
  <div class="unit unit-27 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        27
      </span>
    </div>
    <span class="letter">Fg</span>
    <span class="name">Franklin Gothic</span>
    <div class="author-year">
      <span class="author left">
        Morriz F. Benton
      </span>
      <span class="year right">
        1902
      </span>
    </div>
  </div>

  
  <!--  Myriad  -->
  <div class="unit unit-32 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Humanist
      </span>
      <span class="number right">
        32
      </span>
    </div>
    <span class="letter">My</span>
    <span class="name">Myriad</span>
    <div class="author-year">
      <span class="author left">
        Robert Slimbach
        </br>
        Carol Twombly
      </span>
      <span class="year right">
        1992
      </span>
    </div>
  </div>

  <!--  Formata  -->
  <div class="unit unit-65 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Formata
      </span>
      <span class="number right">
        65
      </span>
    </div>
    <span class="letter">Fo</span>
    <span class="name">Formata</span>
    <div class="author-year">
      <span class="author left">
        Bernd Mollenstadt
      </span>
      <span class="year right">
        1984
      </span>
    </div>
  </div>

  <!--  Prokyon  -->
  <div class="unit unit-71 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Humanist
      </span>
      <span class="number right">
        71
      </span>
    </div>
    <span class="letter">Pr</span>
    <span class="name">Prokyon</span>
    <div class="author-year">
      <span class="author left">
        Erhard Kaiser
      </span>
      <span class="year right">
        2002
      </span>
    </div>
  </div>

  <!--  Prokyon  -->
  <div class="unit unit-71 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Humanist
      </span>
      <span class="number right">
        71
      </span>
    </div>
    <span class="letter">Pr</span>
    <span class="name">Prokyon</span>
    <div class="author-year">
      <span class="author left">
        Ernard Kaiser
      </span>
      <span class="year right">
        2002
      </span>
    </div>
  </div>

  <!--  Metro  -->
  <div class="unit unit-72 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Humanist
      </span>
      <span class="number right">
        72
      </span>
    </div>
    <span class="letter">Mt</span>
    <span class="name">Metro</span>
    <div class="author-year">
      <span class="author left">
        William A. Dwiggins
      </span>
      <span class="year right">
        1929
      </span>
    </div>
  </div>

  
  <!--  Antique Olive  -->
  <div class="unit unit-74 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Humanist
      </span>
      <span class="number right">
        74
      </span>
    </div>
    <span class="letter">Ao</span>
    <span class="name">Antique Olive</span>
    <div class="author-year">
      <span class="author left">
        Roger Excoffron
      </span>
      <span class="year right">
        1962
      </span>
    </div>
  </div>

  <!--  Eurostile  -->
  <div class="unit unit-47 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Geometric
      </span>
      <span class="number right">
        47
      </span>
    </div>
    <span class="letter">E</span>
    <span class="name">Eurostile</span>
    <div class="author-year">
      <span class="author left">
        Aldo Novarese
      </span>
      <span class="year right">
        1963
      </span>
    </div>
  </div>

  <!--  Didot  -->
  <div class="unit unit-13 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Didone
      </span>
      <span class="number right">
        13
      </span>
    </div>
    <span class="letter">D</span>
    <span class="name">Didot</span>
    <div class="author-year">
      <span class="author left">
        Firmin Didot
      </span>
      <span class="year right">
        1799
      </span>
    </div>
  </div>

  
  <!--  Baskerville  -->
  <div class="unit unit-19 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Realist
      </span>
      <span class="number right">
        19
      </span>
    </div>
    <span class="letter">BA</span>
    <span class="name">Baskerville</span>
    <div class="author-year">
      <span class="author left">
        John Baskerville
      </span>
      <span class="year right">
        1754
      </span>
    </div>
  </div>


  <!--  Interstate  -->
  <div class="unit unit-31 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Grotesque
      </span>
      <span class="number right">
        31
      </span>
    </div>
    <span class="letter">In</span>
    <span class="name">Interstate</span>
    <div class="author-year">
      <span class="author left">
        Tobias Frere-Jones
      </span>
      <span class="year right">
        1993
      </span>
    </div>
  </div>

  <!--  Din  -->
  <div class="unit unit-40 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Din
      </span>
      <span class="number right">
        40
      </span>
    </div>
    <span class="letter">Di</span>
    <span class="name">Din</span>
    <div class="author-year">
      <span class="author left">
        Ludwig Goller
      </span>
      <span class="year right">
        1926
      </span>
    </div>
  </div>

  <!-- Stone   -->
  <div class="unit unit-21 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Sans-serif
      </span>
      <span class="number right">
        21
      </span>
    </div>
    <span class="letter">ST</span>
    <span class="name">Stone</span>
    <div class="author-year">
      <span class="author left">
        Summer Stone
      </span>
      <span class="year right">
        1987
      </span>
    </div>
  </div>

  <!--  Thesis  -->
  <div class="unit unit-26 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Sans-serif, Mixed
      </span>
      <span class="number right">
        26
      </span>
    </div>
    <span class="letter">Th</span>
    <span class="name">Thesis</span>
    <div class="author-year">
      <span class="author left">
        Lucas de Groot
      </span>
      <span class="year right">
        1994
      </span>
    </div>
  </div>

  <!--  Rotis  -->
  <div class="unit unit-30 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Serif </br> Sans-serif
      </span>
      <span class="number right">
        30
      </span>
    </div>
    <span class="letter">R</span>
    <span class="name">Rotis</span>
    <div class="author-year">
      <span class="author left">
        Oti Aicher
      </span>
      <span class="year right">
        1988
      </span>
    </div>
  </div>

  <!--  Trinite  -->
  <div class="unit unit-17 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Serif </br> Realist
      </span>
      <span class="number right">
        Trinite
      </span>
    </div>
    <span class="letter">Tr</span>
    <span class="name">Trinite</span>
    <div class="author-year">
      <span class="author left">
        Bram de Does
      </span>
      <span class="year right">
        1982
      </span>
    </div>
  </div>

  <!--  Minion  -->
  <div class="unit unit-11 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Serif </br> Garalde
      </span>
      <span class="number right">
        11
      </span>
    </div>
    <span class="letter">M</span>
    <span class="name">Minion</span>
    <div class="author-year">
      <span class="author left">
        Robert Slimback
      </span>
      <span class="year right">
        1990
      </span>
    </div>
  </div>

  <!--  Lucia  -->
  <div class="unit unit-12 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Serif </br> Garalde
      </span>
      <span class="number right">
        12
      </span>
    </div>
    <span class="letter">L</span>
    <span class="name">Lucida</span>
    <div class="author-year">
      <span class="author left">
        Charles Bigelow </br>
        Kris Holmes
      </span>
      <span class="year right">
        1985
      </span>
    </div>
  </div>

  <!--  Fleischmann  -->
  <div class="unit unit-15 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Serif </br> Garalde
      </span>
      <span class="number right">
        15
      </span>
    </div>
    <span class="letter">Fl</span>
    <span class="name">Fleischmann</span>
    <div class="author-year">
      <span class="author left">
        Erhard Kaiser
      </span>
      <span class="year right">
        1997
      </span>
    </div>
  </div>

  <!-- Dax   -->
  <div class="unit unit-75 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Humanist
      </span>
      <span class="number right">
        75
      </span>
    </div>
    <span class="letter">Da</span>
    <span class="name">Dax</span>
    <div class="author-year">
      <span class="author left">
        Hans Reichel
      </span>
      <span class="year right">
        1995
      </span>
    </div>
  </div>

  <!-- Today Sans -->
  <div class="unit unit-78 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Humanist
      </span>
      <span class="number right">
        78
      </span>
    </div>
    <span class="letter">Ts</span>
    <span class="name">Today Sans</span>
    <div class="author-year">
      <span class="author left">
        Volker Kuster
      </span>
      <span class="year right">
        1968
      </span>
    </div>
  </div>
  
  <!-- Info -->
  <div class="unit unit-87 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Humanist
      </span>
      <span class="number right">
        87
      </span>
    </div>
    <span class="letter">If</span>
    <span class="name">Info</span>
    <div class="author-year">
      <span class="author left">
        Erik Speikermann
      </span>
      <span class="year right">
        1996
      </span>
    </div>
  </div>

  <!-- Gotham  -->
  <div class="unit unit-60 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Geometric
      </span>
      <span class="number right">
        60
      </span>
    </div>
    <span class="letter">Go</span>
    <span class="name">Gotham</span>
    <div class="author-year">
      <span class="author left">
        Tobias Jones
      </span>
      <span class="year right">
        2000
      </span>
    </div>
  </div>

  <!-- Walbaum -->
  <div class="unit unit-44 sans-serif">
    <div class="type-number">
      <span class="attributes left">
        Sans-serif </br> Didone
      </span>
      <span class="number right">
        44
      </span>
    </div>
    <span class="letter">W</span>
    <span class="name">Walbaum</span>
    <div class="author-year">
      <span class="author left">
        Justus Walbaum
      </span>
      <span class="year right">
        1800
      </span>
    </div>
  </div>
</div>


              
            
!

CSS

              
                .left {
  float: left;
}

.right {
  float: right;
}

.sans-serif {
  font-family: Helvetica, san-serif;
}

.p-table {
  display: grid;
  grid-gap: 2px;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(10, 1fr);
  @media(min-width: 772px){
    grid-template-columns: repeat(2, 1fr);
  }
  @media(min-width: 992px){
    grid-template-columns: repeat(18, 65px);
  }
}

.unit {
  border: 2px solid black;
  border-radius: 0px 8px 8px 8px;
  cursor: cell;
  display: flex;
  flex-direction: column;
  padding: 5px;
  text-align: center;
  position: relative;
  min-height: 68px;
}

.unit:hover {
  background-color: black;
  color: white;
  z-index: 1;
  animation: scale 0.5s ease-in-out forwards;
}

.symbol {
  max-height: 120px;
  
  .type-number {
    text-align: left;
    margin-bottom: 25px;
  }
  .name {
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 17px;
  }
  .author-year {
    font-size: 9px;
  }
}

.type-number {
  margin-bottom: 5px
}

.attributes {
  line-height: 1.2;
  font-size: 5px;
}

.number {
  font-size: 9px;
}

.letter {
  font-size: 32px;
  line-height: 0.9;
  margin-top: 3px;
}

.name {
  font-size: 6px;
  margin-bottom: 8px;
  margin-top: 0px;
}

.author-year {
  bottom: 0px;
  font-size: 3.5px;
  padding-bottom: 5px;
  position: relative;
  text-align: left;
  .author {
    position: absolute;
    bottom: 0px;
    line-height: 1;
  }
  .year {
    position: absolute;
    bottom: -1px;
    right: 0px;
  }
}


.unit-0 {
  grid-column: 4 / 6;
  grid-row: 2 / 4;
}

.unit-1 {
  grid-column: 0 / 1;
  grid-row: 0 / 1;
}

.unit-2 {
  grid-column: 17 / 18;
  grid-row: 0 / 1;
}

.unit-3 {
  grid-column: 18 / 19;
  grid-row: 2 / 3;
}

.unit-4 {
  grid-column: 0 / 1;
  grid-row: 2 / 3;
}

.unit-5 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.unit-6 {
  grid-column: 9 / 10;
  grid-row: 4 / 5;
}

.unit-7 {
  grid-column: 6 / 7;
  grid-row: 4 / 5;
}

.unit-8 {
  grid-column: 12 / 13;
  grid-row: 2 / 3;
}

.unit-9 {
  grid-column: 13 / 14;
  grid-row: 2 / 3;
}

.unit-10 {
  grid-column: 13 / 14;
  grid-row: 4 / 5;
}

.unit-14 {
  grid-column: 14 / 15;
  grid-row: 2 / 3;
}

.unit-16 {
  grid-column: 0 / 1;
  grid-row: 3 / 4;
}

.unit-18 {
  grid-column: 15 / 16;
  grid-row: 2 / 3;
}

.unit-20 {
  grid-column: 16 / 17;
  grid-row: 2 / 3;
}

.unit-22 {
  grid-column: 17 / 18;
  grid-row: 2 / 3;
}

.unit-27 {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

.unit-31 {
  grid-column: 0 / 1;
  grid-row: 4 / 5;
}

.unit-40 {
  grid-column: 1 / 2;
  grid-row: 4 / 5;
}

.unit-21 {
  grid-column: 3 / 4;
  grid-row: 4 / 5;
}

.unit-26 {
  grid-column: 4 / 5;
  grid-row: 4 / 5;
}

.unit-30 {
  grid-column: 5 / 6;
  grid-row: 4;
}

.unit-17 {
  grid-column: 7 / 8;
  grid-row: 4;
}

.unit-19 {
  grid-column: 8 / 9;
  grid-row: 4;
}

.unit-10 {
  grid-column: 10 / 11;
  grid-row: 4;
}

.unit-11 {
  grid-column: 11 / 12;
  grid-row: 4;
}

.unit-12 {
  grid-column: 12 / 13;
  grid-row: 4;
}

.unit-15 {
  grid-column: 13 / 14;
  grid-row: 4;
}

.unit-32 {
  grid-column: 12 / 13;
  grid-row: 3;
}


.unit-65 {
  grid-column: 13 / 14;
  grid-row: 3;
}

.unit-71 {
  grid-column: 14 / 15;
  grid-row: 3;
}

.unit-72 {
  grid-column: 15 / 16;
  grid-row: 3;
}

.unit-74 {
  grid-column: 16 / 17;
  grid-row: 3;
}

.unit-47 {
  grid-column: 17 / 18;
  grid-row: 3;
}

.unit-13 {
  grid-column: 18 / 19;
  grid-row: 3;
}

.unit-75 {
  grid-column: 14 / 15;
  grid-row: 4;
}

.unit-78 {
  grid-column: 15 / 16;
  grid-row: 4;
}

.unit-87 {
  grid-column: 16 / 17;
  grid-row: 4;
}

.unit-60 {
  grid-column: 17 / 18;
  grid-row: 4;
}

.unit-44 {
  grid-column: 18 / 19;
  grid-row: 4;
}


@keyframes scale {
  0%   { transform: scale(1,1);}
  10%  { transform: scale(1.1,.9); box-shadow: rgba(0, 0, 0, 0.3) 1px 2px 3px 1px;}
  30%  { transform: scale(1.9,2.1);  box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 3px 1px;}
  50%  { transform: scale(2,2)}
  57%  { transform: scale(2,2);box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px 1px;}
  64%  { transform: scale(2,2)}
  100% { transform: scale(2,2);box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 7px 1px;}
}
              
            
!

JS

              
                
              
            
!
999px

Console