5+ CSS Periodic Table Examples

This post contains a total of 5+ Hand-Picked CSS Periodic Table Examples with Source Code. All these Periodic Tables are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

Click a Code to Copy it.

CSS Periodic Table Examples

1. By Dudley Storey

Made by Dudley Storey. Responsive Periodic Table with CSS Grids. Source

css periodic table by dudley storey
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

<style>
@font-face {
  font-family: Phenomena;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/Phenomena-Regular.otf);
  font-weight: normal;
}
@font-face {
  font-family: Phenomena;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/Phenomena-Bold.otf);
  font-weight: bold;
}
* {
  box-sizing: border-box;
}

body {
  font-family: Phenomena, script;
  margin: 5vw;
  background: #111;
  color: #000;
  counter-reset: element;
}

.periodic-table {
  display: grid;
  grid-column-gap: 0.5vw;
  grid-row-gap: 0.5vw;
  padding-left: 0;
}

.periodic-table > li {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  height: 4.5vw;
  border-radius: 3px;
  background: #5bc2ea;
  font-weight: bold;
}

.periodic-table > li:before {
  counter-increment: element;
  content: counter(element);
  position: absolute;
  bottom: 5px;
  left: 6px;
  font-size: 0.9vw;
  font-weight: lighter;
}

.periodic-table > li abbr {
  font-size: 2.5vw;
}

#helium {
  grid-column-start: 18;
}

#boron, #aluminium {
  grid-column-start: 13;
}

#cerium, #thorium {
  grid-column-start: 4;
}

.periodic-table > li:nth-child(n+58):nth-last-child(n+48) {
  grid-row-start: 8;
}

.periodic-table > li:nth-child(n+90):nth-last-child(n+16) {
  grid-row-start: 9;
}

.periodic-table:before {
  display: block;
  content: "";
  grid-row: 8/10;
  grid-column: 1/4;
}

.periodic-table .noble-gas {
  background: #eada24;
}

.periodic-table .diatomic-nonmetal {
  background: #eab37f;
}

.periodic-table .alkali {
  background: #ebc1d9;
}

.periodic-table .hydrogen {
  background: #a3c7d2;
}

.periodic-table .alkaline {
  background: #c1ebc1;
}

.periodic-table .unknown {
  background: #b9babc;
}

.periodic-table .lanthanide {
  background: #c0eaec;
}

.periodic-table .actinide {
  background: #a1d24b;
}

.periodic-table .metalloid {
  background: #4bd27d;
}

.periodic-table .polyatomic-non-metal {
  background: #d24b50;
}

@media all and (max-width: 1100px) {
  #helium, #boron, #aluminium, #cerium, #thorium {
    grid-column-start: auto;
  }

  .periodic-table {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .periodic-table > li abbr {
    font-size: 0;
  }

  .periodic-table > li {
    padding: 1rem;
  }

  .periodic-table > li abbr:after {
    content: attr(title);
    font-size: 2rem;
  }

  .periodic-table > li:before {
    font-size: 1rem;
  }

  .periodic-table > li:nth-child(n+58):nth-last-child(n+48) {
    grid-row-start: auto !important;
  }

  .periodic-table > li:nth-child(n+90):nth-last-child(n+16) {
    grid-row-start: auto !important;
  }

  .periodic-table:before {
    display: none !important;
  }
}
@media all and (max-width: 750px) {
  body {
    margin: 2vw;
  }

  .periodic-table {
    grid-template-columns: 1fr 1fr;
  }

  .periodic-table > li {
    height: auto;
    font-size: 3vw;
  }
}
@media all and (max-width: 550px) {
  .periodic-table {
    grid-template-columns: 1fr;
  }
}
</style>
</head>
<body>
  <ol class="periodic-table">
<li class="hydrogen">
    <abbr title="Hydrogen">H</abbr>
</li>
<li id="helium" class="noble-gas">
    <abbr title="Helium">He</abbr>
    <span>2</span>
</li>
<li class="alkali">
    <abbr title="Lithium">Li</abbr>
</li>
<li class="alkaline">
    <abbr title="Beryllium">Be</abbr>
</li>
<li id="boron" class="metalloid">
    <abbr title="Boron">B</abbr>
</li>
<li class="polyatomic-non-metal">
    <abbr title="Carbon">C</abbr>
</li>
<li class="diatomic-nonmetal">
    <abbr title="Nitrogen">N</abbr>
</li>
<li class="diatomic-nonmetal">
    <abbr title="Oxygen">O</abbr>
</li>
<li class="diatomic-nonmetal">
    <abbr title="Fluorine">F</abbr>
</li>
<li class="noble-gas">
    <abbr title="Neon">Ne</abbr>
</li>
<li class="alkali">
    <abbr title="Sodium">Na</abbr>
</li>
<li class="alkaline">
    <abbr title="Magnesium">Mg</abbr>
</li>
<li id="aluminium">
    <abbr title="Aluminium">Al</abbr>
</li>
<li class="metalloid">
    <abbr title="Silicon">Si</abbr>
</li>
<li class="polyatomic-non-metal">
    <abbr title="Phosphorus">P</abbr>
</li>
<li class="polyatomic-non-metal">
    <abbr title="Sulphur">S</abbr>
</li>
<li class="diatomic-nonmetal">
    <abbr title="Chlorine">Cl</abbr>
</li>
<li class="noble-gas">
    <abbr title="Argon">Ar</abbr>
</li>
<li class="alkali">
    <abbr title="Potassium">K</abbr>
</li>
<li class="alkaline">
    <abbr title="Calcium">Ca</abbr>
</li>
<li>
    <abbr title="Scandium">Sc</abbr>
</li>
<li>
    <abbr title="Titanium">Ti</abbr>
</li>
<li>
    <abbr title="Vanadium">Ti</abbr>
</li>
<li>
    <abbr title="Chromium">Cr</abbr>
</li>
<li>
    <abbr title="Manganese">Mn</abbr>
</li>
<li>
    <abbr title="Iron">Fe</abbr>
</li>
<li>
    <abbr title="Cobalt">Co</abbr>
</li>
<li>
    <abbr title="Nickel">Ni</abbr>
</li>
<li>
    <abbr title="Copper">Cu</abbr>
</li>
<li>
    <abbr title="Zinc">Zn</abbr>
</li>
<li>
    <abbr title="Gallium">Ga</abbr>
</li>
<li class="metalloid">
    <abbr title="Germanium">Ge</abbr>
</li>
<li class="metalloid">
    <abbr title="Arsenic">As</abbr>
</li>
<li class="polyatomic-non-metal">
    <abbr title="Selenium">Se</abbr>
</li>
<li class="diatomic-nonmetal">
    <abbr title="Bromide">Br</abbr>
</li>
<li class="noble-gas">
    <abbr title="Krypton">Kr</abbr>
</li>
<li class="alkali">
    <abbr title="Rubidium">Rb</abbr>
</li>
<li class="alkaline">
    <abbr title="Strontium">Sr</abbr>
</li>
<li>
    <abbr title="Yttrium">Y</abbr>
</li>
<li>
    <abbr title="Zirconium">Zr</abbr>
</li>
<li>
    <abbr title="Niobium">Nb</abbr>
</li>
<li>
    <abbr title="Molybdenum">Mo</abbr>
</li>
<li>
    <abbr title="Technetium">Tc</abbr>
</li>
<li>
    <abbr title="Ruthenium">Ru</abbr>
</li>
<li>
    <abbr title="Rhodium">Ro</abbr>
</li>
<li>
    <abbr title="Palladium">Pd</abbr>
</li>
<li>
    <abbr title="Silver">Ag</abbr>
</li>
<li>
    <abbr title="Cadmium">Cd</abbr>
</li>
<li>
    <abbr title="Indium">In</abbr>
</li>
<li>
    <abbr title="Tin">Sn</abbr>
</li>
<li class="metalloid">
    <abbr title="Antimony">Sb</abbr>
</li>
<li class="metalloid">
    <abbr title="Tellurium">Te</abbr>
</li>
<li class="diatomic-nonmetal">
    <abbr title="Iodine">I</abbr>
</li>
<li class="noble-gas">
    <abbr title="Xenon">Xe</abbr>
</li>
<li class="alkali">
    <abbr title="Caesium">Cs</abbr>
</li>
<li class="alkaline">
    <abbr title="Barium">Ba</abbr>
</li>
<li class="lanthanide">
    <abbr title="Lanthanum">La</abbr>
</li>
<li id="cerium" class="lanthanide">
     <abbr title="Cerium">Ce</abbr>
</li>
<li class="lanthanide">
    <abbr title="Praseodymium">Pr</abbr>
</li>
<li class="lanthanide">
    <abbr title="Neodymium">Nd</abbr>
</li>
<li class="lanthanide">
    <abbr title="Promethium">Pm</abbr>
</li>
<li class="lanthanide">
    <abbr title="Samarium">Sm</abbr>
</li>
<li class="lanthanide">
    <abbr title="Europium">Eu</abbr>
</li>
<li class="lanthanide">
    <abbr title="Gadolinium">Gd</abbr>
</li>
<li class="lanthanide">
    <abbr title="Terbium">Td</abbr>
</li>
<li class="lanthanide">
    <abbr title="Dysprosium">Dy</abbr>
</li>
<li class="lanthanide">
    <abbr title="Holmium">Ho</abbr>
</li>
<li class="lanthanide">
    <abbr title="Erbium">Er</abbr>
</li>
<li class="lanthanide">
    <abbr title="Thulium">Tm</abbr>
</li>
<li class="lanthanide">
    <abbr title="Ytterbium">Yb</abbr>
</li>
<li class="lanthanide">
    <abbr title="Lutetium">Lu</abbr>
</li>  
<li id="hafnium">
    <abbr title="Hafnium">Hf</abbr>
</li>
<li>
    <abbr title="Tantalum">Ta</abbr>
</li>
<li>
    <abbr title="Tungsten">W</abbr>
</li>
<li>
    <abbr title="Rhenium">Re</abbr>
</li>
<li>
    <abbr title="Osmium">Os</abbr>
</li> 
<li>
    <abbr title="Iridium">Ir</abbr>
</li>
<li>
    <abbr title="Platinum">Pt</abbr>
</li>
<li>
    <abbr title="Gold">Au</abbr>
</li>
<li>
    <abbr title="Mercury">Hg</abbr>
</li>
<li>
    <abbr title="Thallium">Tl</abbr>
</li>
<li>
    <abbr title="Lead">Pb</abbr>
</li>
<li>
    <abbr title="Bismuth">Bi</abbr>
</li>
<li>
    <abbr title="Polonium">Po</abbr>
</li>
<li class="metalloid">
    <abbr title="Astatine">At</abbr>
</li>
<li class="noble-gas">
    <abbr title="Radon">Rn</abbr>
</li>
<li class="alkali">
    <abbr title="Francium">Fr</abbr>
</li>
<li class="alkaline">
    <abbr title="Radium">Ra</abbr>
</li>
<li class="actinide">
    <abbr title="Actinium">Ac</abbr>
</li>
<li class="actinide" id="thorium" >
    <abbr title="Thorium">Th</abbr>
</li>
<li class="actinide">
    <abbr title="Protactinium">Pa</abbr>
</li>
<li class="actinide">
    <abbr title="Uranium">U</abbr>
</li>
<li class="actinide">
    <abbr title="Neptunium">Np</abbr>
</li>
<li class="actinide">
    <abbr title="Plutonium">Up</abbr>
</li>
<li class="actinide">
    <abbr title="Americium">Am</abbr>
</li>
<li class="actinide">
    <abbr title="Curium">Cm</abbr>
</li>
<li class="actinide">
    <abbr title="Berkelium">Bk</abbr>
</li>
<li class="actinide">
    <abbr title="Californium">Cf</abbr>
</li>
<li class="actinide">
    <abbr title="Einsteinium">Es</abbr>
</li>
<li class="actinide">
    <abbr title="Fermium">Fm</abbr>
</li>
<li class="actinide">
    <abbr title="Mendelevium">Md</abbr>
</li>
<li class="actinide">
    <abbr title="Nobelium">No</abbr>
</li>
<li class="actinide">
    <abbr title="Lawrencium">Lr</abbr>
</li>
<li id="rutherfordium">
    <abbr title="Rutherfordium">Rf</abbr>
</li>
<li>
    <abbr title="Dubnium">Db</abbr>
</li>
<li>
    <abbr title="Seaborgium">Sg</abbr>
</li>
<li>
    <abbr title="Bohrium">Bh</abbr>
</li>
<li>
    <abbr title="Hassium">Hs</abbr>
</li>
<li class="unknown">
    <abbr title="Meitnerium">Mt</abbr>
</li>
<li class="unknown">
    <abbr title="Darmstadtium">Ds</abbr>
</li>
<li class="unknown">
    <abbr title="Roentgenium">Rg</abbr>
</li>
<li>
    <abbr title="Copernicium">Cn</abbr>
</li>
<li class="unknown">
    <abbr title="Nihonium">Cn</abbr>
</li>
<li class="unknown">
    <abbr title="Flerovium">Fl</abbr>
</li>
<li class="unknown">
    <abbr title="Moscovium">Mc</abbr>
</li>
<li class="unknown">
    <abbr title="Livermorium">Lv</abbr>
</li>
<li class="unknown">
    <abbr title="Tennessine">Ts</abbr>
</li>
<li class="unknown">
    <abbr title="Oganesson">Og</abbr>
</li>
</ol>
</body>
</html>

2. By Vanessa Bell

Made by Vanessa Bell. Flat Periodic table. Source

css periodic table by venessa bell
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
* {
  margin: 0px auto;
  padding: 0px;
  font-family: "Verdana";
}
#container {
  background-color: #EEEEEE;
  width: 1200px;
  height: 570px;
  font-size: 0px;
}
#header {
  margin-left: 60px;
  padding-top: 10px;
}
#header li {
  list-style-type: none;
  color: #E00000;
  display: inline;
  padding-right: 39px;
  font-size: 11px;
}
#numbers-left {
  width: 5px;
  display: inline-block;
  margin-left: 60px;
  vertical-align: top;
}
#numbers-left li {
  list-style-type: none;
  color: #E00000;
  padding-bottom: 6px;
  font-size: 11px;
  padding-left: 15px;
  padding-top: 30px;
}
#numbers-left li:first-child{
  padding: 0px;
}
#top {
  display: inline-block;
}
#column-one-top {
  display: inline-block;
  margin-left: 45px;
  margin-top: 30px;
}
.blue-boxes h3 {
  color: #150EA0;
}
.blue-boxes {
  height: 45px;
  width: 45px;
  margin: 1px;
  background: #689BFF;
  border: 1.5px solid grey;
  vertical-align: top;
  text-align: center;
  font-size: 9px;
  color: black;
}
#column-two-top {
  display: inline-block;
  margin-top: 30px;
}
.pink-boxes {
  height: 45px;
  width: 45px;
  margin: 1px;
  background: #FD9A98;
  border: 1.5px solid grey;
  vertical-align: top;
  text-align: center;
  font-size: 9px;
  color: black;
}
.pink-boxes h3 {
  color: #150EA0;
}
#column-three-top {
  display: inline-block;
  margin-top: 30px;
  margin-left: 10px;
}
#column-four-top {
  display: inline-block;
  margin-top: 30px;
}
#column-height-six-top {
  display: inline-block;
  margin-top: 30px;
}
.orange-boxes {
  height: 45px;
  width: 45px;
  margin: 1px;
  background: #FECB00;
  border: 1.5px solid grey;
  vertical-align: top;
  text-align: center;
  font-size: 9px;
  color: black;
}
.orange-boxes h3 {
  color: #150EA0;
}
.extra-text {
  color: red;
  vertical-align: top;
  font-size: 11px;
  display: inline-block;
  margin-left: 100px;
  line-height: 50px;
}
.extra-text2 {
  color: red;
  text-align: right;
  vertical-align: top;
  margin-left: 30px;
  font-size: 11px;
  display: inline-block;
  line-height: 50px;
}
.green-boxes {
  height: 45px;
  width: 45px;
  margin: 1px;
  background: #1FCA21;
  border: 1.5px solid grey;
  vertical-align: top;
  text-align: center;
  font-size: 9px;
  color: black;
}
.green-boxes h3 {
  color: #150EA0;
}
#bottom {
  margin-top: 20px;
}
#bottom-column-three {
  display: inline-block; 
}
#bottom-column-four {
  display: inline-block;
  margin-left: 0px;
}
</style>
</head>
<body>
  <div id="container">
    <ul id=header>
      <li>Group</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
    </ul>
    <ul id="numbers-left">
      <li>Period</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
    </ul>
  <!--top 2/3 of page-->
  <div id="top">
    <!--column one-->
    <div id="column-one-top">
    <div class="blue-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    <div class="blue-boxes">
      <p>3</p>
      <h3>Li</h3>
      <p>6.94</p>
    </div>
    <div class="blue-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="blue-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    <div class="blue-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div>
    <div class="blue-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    <div class="blue-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    </div> <!---closing of #column-1-->
    <!--column-2-->
    <div id="column-two-top">
    <div class="blue-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    <div class="blue-boxes">
      <p>3</p>
      <h3>Li</h3>
      <p>6.94</p>
    </div>
    <div class="blue-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="blue-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    <div class="blue-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div>
    <div class="blue-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    </div><!--closing of column 2-->
    <!--column-3-->
    <div id="column-three-top">
    <div class="pink-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    <div class="pink-boxes">
      <p>3</p>
      <h3>Li</h3>
      <p>6.94</p>
    </div>
    <div class="pink-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="pink-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    </div><!--closing of column 3-->
       <!--column-4-->
    <div id="column-four-top">
    <div class="pink-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    <div class="pink-boxes">
      <p>3</p>
      <h3>Li</h3>
      <p>6.94</p>
    </div>
    <div class="pink-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="pink-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    </div><!--closing of column 4-->
  <div id="column-four-top">
    <div class="pink-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    <div class="pink-boxes">
      <p>3</p>
      <h3>Li</h3>
      <p>6.94</p>
    </div>
    <div class="pink-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="pink-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    </div>
    <div id="column-four-top">
    <div class="pink-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    <div class="pink-boxes">
      <p>3</p>
      <h3>Li</h3>
      <p>6.94</p>
    </div>
    <div class="pink-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="pink-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    </div>
    <div id="column-four-top">
    <div class="pink-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    <div class="pink-boxes">
      <p>3</p>
      <h3>Li</h3>
      <p>6.94</p>
    </div>
    <div class="pink-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="pink-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    </div>
    <div id="column-four-top">
    <div class="pink-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    <div class="pink-boxes">
      <p>3</p>
      <h3>Li</h3>
      <p>6.94</p>
    </div>
    <div class="pink-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="pink-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    </div>
    <div id="column-four-top">
    <div class="pink-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    <div class="pink-boxes">
      <p>3</p>
      <h3>Li</h3>
      <p>6.94</p>
    </div>
    <div class="pink-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="pink-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    </div>
    <div id="column-four-top">
    <div class="pink-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    <div class="pink-boxes">
      <p>3</p>
      <h3>Li</h3>
      <p>6.94</p>
    </div>
    <div class="pink-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="pink-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    </div>
    <div id="column-four-top">
    <div class="pink-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    <div class="pink-boxes">
      <p>3</p>
      <h3>Li</h3>
      <p>6.94</p>
    </div>
    <div class="pink-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="pink-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    </div>
    <div id="column-four-top">
    <div class="pink-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    <div class="pink-boxes">
      <p>3</p>
      <h3>Li</h3>
      <p>6.94</p>
    </div>
    <div class="pink-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="pink-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    </div>
  
    <div id="column-height-six-top">
    <div class="orange-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    <div class="orange-boxes">
      <p>3</p>
      <h3>Li</h3>
      <p>6.94</p>
    </div>
    <div class="orange-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="orange-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
      <div class="orange-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="orange-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div>
    </div>
    <div id="column-height-six-top">
    <div class="orange-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    <div class="orange-boxes">
      <p>3</p>
      <h3>Li</h3>
      <p>6.94</p>
    </div>
    <div class="orange-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="orange-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
      <div class="orange-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="orange-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div>
    </div>
    <div id="column-height-six-top">
    <div class="orange-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    <div class="orange-boxes">
      <p>3</p>
      <h3>Li</h3>
      <p>6.94</p>
    </div>
    <div class="orange-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="orange-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
      <div class="orange-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="orange-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div>
    </div>
    
    <div id="column-height-six-top">
    <div class="orange-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    <div class="orange-boxes">
      <p>3</p>
      <h3>Li</h3>
      <p>6.94</p>
    </div>
    <div class="orange-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="orange-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
      <div class="orange-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="orange-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div>
    </div>
    <div id="column-height-six-top">
    <div class="orange-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    <div class="orange-boxes">
      <p>3</p>
      <h3>Li</h3>
      <p>6.94</p>
    </div>
    <div class="orange-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="orange-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
      <div class="orange-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="orange-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div>
    </div>
    <div id="column-height-six-top">
    <div class="orange-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
    <div class="orange-boxes">
      <p>3</p>
      <h3>Li</h3>
      <p>6.94</p>
    </div>
    <div class="orange-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="orange-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div> 
      <div class="orange-boxes">
      <p>11</p>
      <h3>Na</h3>
      <p>22.990</p>
    </div> 
    <div class="orange-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div>
      <div class="orange-boxes">
      <p>1</p>
      <h3>H</h3>
      <p>1.008</p>
    </div>
    </div>
  </div><!--closing of #top-->
  <!--bottom 1/3 of page-->
  <div id="bottom">
    <div class="extra-text">
      <p>*Lanthanoids</p>
      <p>**Actinoids</p>
     </div>
    <div class="extra-text2">
      <p>*</p>
      <p>**</p>
     </div>
    <div id="bottom-column-three">
      <div class="green-boxes">
        <p>57</p>
        <h3>La</h3>
        <p>138.91</p>
      </div>
      <div class="green-boxes">
        <p>57</p>
        <h3>Ac</h3>
        <p>[227.03]</p>
      </div>
    </div> <!--closing of #bottom-column-three-->
    <div id="bottom-column-four">
      <div class="green-boxes">
        <p>57</p>
        <h3>La</h3>
        <p>138.91</p>
      </div>
      <div class="green-boxes">
        <p>57</p>
        <h3>Ac</h3>
        <p>[227.03]</p>
      </div>
    </div> <!--closing of #bottom-column-four-->
    <div id="bottom-column-four">
      <div class="green-boxes">
        <p>57</p>
        <h3>La</h3>
        <p>138.91</p>
      </div>
      <div class="green-boxes">
        <p>57</p>
        <h3>Ac</h3>
        <p>[227.03]</p>
      </div>
    </div> <!--closing of #bottom-column-four--><div id="bottom-column-four">
      <div class="green-boxes">
        <p>57</p>
        <h3>La</h3>
        <p>138.91</p>
      </div>
      <div class="green-boxes">
        <p>57</p>
        <h3>Ac</h3>
        <p>[227.03]</p>
      </div>
    </div> <!--closing of #bottom-column-four--><div id="bottom-column-four">
      <div class="green-boxes">
        <p>57</p>
        <h3>La</h3>
        <p>138.91</p>
      </div>
      <div class="green-boxes">
        <p>57</p>
        <h3>Ac</h3>
        <p>[227.03]</p>
      </div>
    </div> <!--closing of #bottom-column-four--><div id="bottom-column-four">
      <div class="green-boxes">
        <p>57</p>
        <h3>La</h3>
        <p>138.91</p>
      </div>
      <div class="green-boxes">
        <p>57</p>
        <h3>Ac</h3>
        <p>[227.03]</p>
      </div>
    </div> <!--closing of #bottom-column-four--><div id="bottom-column-four">
      <div class="green-boxes">
        <p>57</p>
        <h3>La</h3>
        <p>138.91</p>
      </div>
      <div class="green-boxes">
        <p>57</p>
        <h3>Ac</h3>
        <p>[227.03]</p>
      </div>
    </div> <!--closing of #bottom-column-four--><div id="bottom-column-four">
      <div class="green-boxes">
        <p>57</p>
        <h3>La</h3>
        <p>138.91</p>
      </div>
      <div class="green-boxes">
        <p>57</p>
        <h3>Ac</h3>
        <p>[227.03]</p>
      </div>
    </div> <!--closing of #bottom-column-four--><div id="bottom-column-four">
      <div class="green-boxes">
        <p>57</p>
        <h3>La</h3>
        <p>138.91</p>
      </div>
      <div class="green-boxes">
        <p>57</p>
        <h3>Ac</h3>
        <p>[227.03]</p>
      </div>
    </div> <!--closing of #bottom-column-four--><div id="bottom-column-four">
      <div class="green-boxes">
        <p>57</p>
        <h3>La</h3>
        <p>138.91</p>
      </div>
      <div class="green-boxes">
        <p>57</p>
        <h3>Ac</h3>
        <p>[227.03]</p>
      </div>
    </div> <!--closing of #bottom-column-four--><div id="bottom-column-four">
      <div class="green-boxes">
        <p>57</p>
        <h3>La</h3>
        <p>138.91</p>
      </div>
      <div class="green-boxes">
        <p>57</p>
        <h3>Ac</h3>
        <p>[227.03]</p>
      </div>
    </div> <!--closing of #bottom-column-four--><div id="bottom-column-four">
      <div class="green-boxes">
        <p>57</p>
        <h3>La</h3>
        <p>138.91</p>
      </div>
      <div class="green-boxes">
        <p>57</p>
        <h3>Ac</h3>
        <p>[227.03]</p>
      </div>
    </div> <!--closing of #bottom-column-four--><div id="bottom-column-four">
      <div class="green-boxes">
        <p>57</p>
        <h3>La</h3>
        <p>138.91</p>
      </div>
      <div class="green-boxes">
        <p>57</p>
        <h3>Ac</h3>
        <p>[227.03]</p>
      </div>
    </div> <!--closing of #bottom-column-four--><div id="bottom-column-four">
      <div class="green-boxes">
        <p>57</p>
        <h3>La</h3>
        <p>138.91</p>
      </div>
      <div class="green-boxes">
        <p>57</p>
        <h3>Ac</h3>
        <p>[227.03]</p>
      </div>
    </div> <!--closing of #bottom-column-four-->
  </div><!---closing of #bottom-->
</div> <!--closing of container-->
</body>
</html>

3. By CNDexter

Made by CNDexter. Periodic table with Hover Effect made using Grid. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:800);
body {
  background-color: #ededed;
  font-family: "Roboto", sans-serif;
}

.box {
  background: #fff;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.22);
  display: block;
  margin: 1rem auto;
  max-width: 1100px;
  padding: 1rem 2rem;
}

.periodic-table {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(4, auto);
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  -ms-grid-rows: auto auto auto auto;
}
@media (max-width: 960px) {
  .periodic-table {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(10, auto);
    -ms-grid-columns: 1fr 1fr 1fr;
    -ms-grid-rows: auto auto auto auto auto auto auto auto auto auto;
    justify-items: center;
  }
}
.periodic-table h1 {
  font-family: "Open Sans", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  grid-column: 1/12;
  grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-row: 1;
  -ms-grid-column-span: 11;
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: 3rem;
}
.periodic-table a.alpha-tile {
  color: #fff;
  counter-increment: count;
  display: block;
  font-family: Times, serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 2.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  text-align: center;
  text-decoration: none;
  transition: all 0.25s linear 0s;
  width: 70px;
}
@media (max-width: 679px) {
  .periodic-table a.alpha-tile {
    font-size: 2rem;
    line-height: 2rem;
  }
}
.periodic-table a.alpha-tile:before {
  color: #fff;
  content: counter(count, decimal-leading-zero);
  display: block;
  font-family: Helvetica, sans-serif;
  font-weight: 200;
  font-size: 0.75rem;
}
.periodic-table a.alpha-tile:hover {
  background: #04536d !important;
  transform: scale(1.25);
  transition: all 0.25s linear 0s;
}
.periodic-table a.alpha-tile:nth-of-type(1) {
  grid-column: 1;
  grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-row: 2;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(1) {
    justify-self: end;
    -ms-grid-column-align: end;
  }
}
.periodic-table a.alpha-tile:nth-of-type(2) {
  grid-column: 2;
  grid-row: 2;
  -ms-grid-column: 2;
  -ms-grid-row: 2;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(2) {
    -ms-grid-column-align: center;
  }
}
.periodic-table a.alpha-tile:nth-of-type(3) {
  grid-column: 11;
  grid-row: 2;
  -ms-grid-column: 11;
  -ms-grid-row: 2;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(3) {
    grid-column: 3;
    grid-row: 2;
    -ms-grid-column: 3;
    -ms-grid-row: 2;
    justify-self: start;
    -ms-grid-column-align: start;
  }
}
.periodic-table a.alpha-tile:nth-of-type(4) {
  grid-column: 12;
  grid-row: 2;
  -ms-grid-column: 12;
  -ms-grid-row: 2;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(4) {
    grid-column: 1;
    grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-row: 3;
    justify-self: end;
    -ms-grid-column-align: end;
  }
}
.periodic-table a.alpha-tile:nth-of-type(5) {
  grid-column: 1;
  grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-row: 3;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(5) {
    grid-column: 2;
    grid-row: 3;
    -ms-grid-column: 2;
    -ms-grid-row: 3;
    -ms-grid-column-align: center;
  }
}
.periodic-table a.alpha-tile:nth-of-type(6) {
  grid-column: 2;
  grid-row: 3;
  -ms-grid-column: 2;
  -ms-grid-row: 3;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(6) {
    grid-column: 3;
    grid-row: 3;
    -ms-grid-column: 3;
    -ms-grid-row: 3;
    justify-self: start;
    -ms-grid-column-align: start;
  }
}
.periodic-table a.alpha-tile:nth-of-type(7) {
  grid-column: 3;
  grid-row: 3;
  -ms-grid-column: 3;
  -ms-grid-row: 3;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(7) {
    grid-column: 1;
    grid-row: 4;
    -ms-grid-column: 1;
    -ms-grid-row: 4;
    justify-self: end;
    -ms-grid-column-align: end;
  }
}
.periodic-table a.alpha-tile:nth-of-type(8) {
  grid-column: 5;
  grid-row: 3;
  -ms-grid-column: 5;
  -ms-grid-row: 3;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(8) {
    grid-column: 2;
    grid-row: 4;
    -ms-grid-column: 2;
    -ms-grid-row: 4;
    -ms-grid-column-align: center;
  }
}
.periodic-table a.alpha-tile:nth-of-type(9) {
  grid-column: 6;
  grid-row: 3;
  -ms-grid-column: 6;
  -ms-grid-row: 3;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(9) {
    grid-column: 3;
    grid-row: 4;
    -ms-grid-column: 3;
    -ms-grid-row: 4;
    justify-self: start;
    -ms-grid-column-align: start;
  }
}
.periodic-table a.alpha-tile:nth-of-type(10) {
  grid-column: 7;
  grid-row: 3;
  -ms-grid-column: 7;
  -ms-grid-row: 3;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(10) {
    grid-column: 1;
    grid-row: 5;
    -ms-grid-column: 1;
    -ms-grid-row: 5;
    justify-self: end;
    -ms-grid-column-align: end;
  }
}
.periodic-table a.alpha-tile:nth-of-type(11) {
  grid-column: 9;
  grid-row: 3;
  -ms-grid-column: 9;
  -ms-grid-row: 3;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(11) {
    grid-column: 2;
    grid-row: 5;
    -ms-grid-column: 2;
    -ms-grid-row: 5;
    -ms-grid-column-align: center;
  }
}
.periodic-table a.alpha-tile:nth-of-type(12) {
  grid-column: 10;
  grid-row: 3;
  -ms-grid-column: 10;
  -ms-grid-row: 3;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(12) {
    grid-column: 3;
    grid-row: 5;
    -ms-grid-column: 3;
    -ms-grid-row: 5;
    justify-self: start;
    -ms-grid-column-align: start;
  }
}
.periodic-table a.alpha-tile:nth-of-type(13) {
  grid-column: 11;
  grid-row: 3;
  -ms-grid-column: 11;
  -ms-grid-row: 3;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(13) {
    grid-column: 1;
    grid-row: 6;
    -ms-grid-column: 1;
    -ms-grid-row: 6;
    justify-self: end;
    -ms-grid-column-align: end;
  }
}
.periodic-table a.alpha-tile:nth-of-type(14) {
  grid-column: 12;
  grid-row: 3;
  -ms-grid-column: 12;
  -ms-grid-row: 3;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(14) {
    grid-column: 2;
    grid-row: 6;
    -ms-grid-column: 2;
    -ms-grid-row: 6;
    -ms-grid-column-align: center;
  }
}
.periodic-table a.alpha-tile:nth-of-type(15) {
  grid-column: 1;
  grid-row: 4;
  -ms-grid-column: 1;
  -ms-grid-row: 4;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(15) {
    grid-column: 3;
    grid-row: 6;
    -ms-grid-column: 3;
    -ms-grid-row: 6;
    justify-self: start;
    -ms-grid-column-align: start;
  }
}
.periodic-table a.alpha-tile:nth-of-type(16) {
  grid-column: 2;
  grid-row: 4;
  -ms-grid-column: 2;
  -ms-grid-row: 4;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(16) {
    grid-column: 1;
    grid-row: 7;
    -ms-grid-column: 1;
    -ms-grid-row: 7;
    justify-self: end;
    -ms-grid-column-align: end;
  }
}
.periodic-table a.alpha-tile:nth-of-type(17) {
  grid-column: 3;
  grid-row: 4;
  -ms-grid-column: 3;
  -ms-grid-row: 4;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(17) {
    grid-column: 2;
    grid-row: 7;
    -ms-grid-column: 2;
    -ms-grid-row: 7;
    -ms-grid-column-align: center;
  }
}
.periodic-table a.alpha-tile:nth-of-type(18) {
  grid-column: 4;
  grid-row: 4;
  -ms-grid-column: 4;
  -ms-grid-row: 4;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(18) {
    grid-column: 3;
    grid-row: 7;
    -ms-grid-column: 3;
    -ms-grid-row: 7;
    justify-self: start;
    -ms-grid-column-align: start;
  }
}
.periodic-table a.alpha-tile:nth-of-type(19) {
  grid-column: 5;
  grid-row: 4;
  -ms-grid-column: 5;
  -ms-grid-row: 4;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(19) {
    grid-column: 1;
    grid-row: 8;
    -ms-grid-column: 1;
    -ms-grid-row: 8;
    justify-self: end;
    -ms-grid-column-align: end;
  }
}
.periodic-table a.alpha-tile:nth-of-type(20) {
  grid-column: 6;
  grid-row: 4;
  -ms-grid-column: 6;
  -ms-grid-row: 4;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(20) {
    grid-column: 2;
    grid-row: 8;
    -ms-grid-column: 2;
    -ms-grid-row: 8;
    -ms-grid-column-align: center;
  }
}
.periodic-table a.alpha-tile:nth-of-type(21) {
  grid-column: 7;
  grid-row: 4;
  -ms-grid-column: 7;
  -ms-grid-row: 4;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(21) {
    grid-column: 3;
    grid-row: 8;
    -ms-grid-column: 3;
    -ms-grid-row: 8;
    justify-self: start;
    -ms-grid-column-align: start;
  }
}
.periodic-table a.alpha-tile:nth-of-type(22) {
  grid-column: 8;
  grid-row: 4;
  -ms-grid-column: 8;
  -ms-grid-row: 4;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(22) {
    grid-column: 1;
    grid-row: 9;
    -ms-grid-column: 1;
    -ms-grid-row: 9;
    justify-self: end;
    -ms-grid-column-align: end;
  }
}
.periodic-table a.alpha-tile:nth-of-type(23) {
  grid-column: 9;
  grid-row: 4;
  -ms-grid-column: 9;
  -ms-grid-row: 4;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(23) {
    grid-column: 2;
    grid-row: 9;
    -ms-grid-column: 2;
    -ms-grid-row: 9;
    -ms-grid-column-align: center;
  }
}
.periodic-table a.alpha-tile:nth-of-type(24) {
  grid-column: 10;
  grid-row: 4;
  -ms-grid-column: 10;
  -ms-grid-row: 4;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(24) {
    grid-column: 3;
    grid-row: 9;
    -ms-grid-column: 3;
    -ms-grid-row: 9;
    justify-self: start;
    -ms-grid-column-align: start;
  }
}
.periodic-table a.alpha-tile:nth-of-type(25) {
  grid-column: 11;
  grid-row: 4;
  -ms-grid-column: 11;
  -ms-grid-row: 4;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(25) {
    grid-column: 1;
    grid-row: 10;
    -ms-grid-column: 1;
    -ms-grid-row: 10;
    justify-self: end;
    -ms-grid-column-align: end;
  }
}
.periodic-table a.alpha-tile:nth-of-type(26) {
  grid-column: 12;
  grid-row: 4;
  -ms-grid-column: 12;
  -ms-grid-row: 4;
}
@media (max-width: 960px) {
  .periodic-table a.alpha-tile:nth-of-type(26) {
    grid-column: 2;
    grid-row: 10;
    -ms-grid-column: 2;
    -ms-grid-row: 10;
    -ms-grid-column-align: center;
  }
}
.periodic-table a.alpha-tile:nth-of-type(5) {
  background: #79c4d2;
}
.periodic-table a.alpha-tile:nth-of-type(n + 15):nth-of-type(-n + 16) {
  background: #79c4d2;
}
.periodic-table a.alpha-tile:nth-of-type(n + 1):nth-of-type(-n + 2) {
  background: #4aa7bb;
}
.periodic-table a.alpha-tile:nth-of-type(n + 6):nth-of-type(-n + 7) {
  background: #4aa7bb;
}
.periodic-table a.alpha-tile:nth-of-type(n + 17):nth-of-type(-n + 19) {
  background: #4aa7bb;
}
.periodic-table a.alpha-tile:nth-of-type(n + 8):nth-of-type(-n + 11) {
  background: #116f7b;
}
.periodic-table a.alpha-tile:nth-of-type(n + 20):nth-of-type(-n + 24) {
  background: #116f7b;
}
.periodic-table a.alpha-tile:nth-of-type(n + 3):nth-of-type(-n + 4) {
  background: #04536d;
}
.periodic-table a.alpha-tile:nth-of-type(n + 12):nth-of-type(-n + 14) {
  background: #04536d;
}
.periodic-table a.alpha-tile:nth-of-type(n + 25):nth-of-type(-n + 26) {
  background: #04536d;
}
</style>
</head>
<body>
  <div class="box">
    <div class="periodic-table">
      <h1>View List Alphabetically:</h1>
      <a href="http://www.example.com/A" class="alpha-tile">A</a>
      <a href="http://www.example.com/B" class="alpha-tile">B</a>
      <a href="http://www.example.com/C" class="alpha-tile">C</a>
      <a href="http://www.example.com/D" class="alpha-tile">D</a>
      <a href="http://www.example.com/E" class="alpha-tile">E</a>
      <a href="http://www.example.com/F" class="alpha-tile">F</a>
      <a href="http://www.example.com/G" class="alpha-tile">G</a>
      <a href="http://www.example.com/H" class="alpha-tile">H</a>
      <a href="http://www.example.com/I" class="alpha-tile">I</a>
      <a href="http://www.example.com/J" class="alpha-tile">J</a>
      <a href="http://www.example.com/K" class="alpha-tile">K</a>
      <a href="http://www.example.com/L" class="alpha-tile">L</a>
      <a href="http://www.example.com/M" class="alpha-tile">M</a>
      <a href="http://www.example.com/N" class="alpha-tile">N</a>
      <a href="http://www.example.com/O" class="alpha-tile">O</a>
      <a href="http://www.example.com/P" class="alpha-tile">P</a>
      <a href="http://www.example.com/Q" class="alpha-tile">Q</a>
      <a href="http://www.example.com/R" class="alpha-tile">R</a>
      <a href="http://www.example.com/S" class="alpha-tile">S</a>
      <a href="http://www.example.com/T" class="alpha-tile">T</a>
      <a href="http://www.example.com/U" class="alpha-tile">U</a>
      <a href="http://www.example.com/V" class="alpha-tile">V</a>
      <a href="http://www.example.com/W" class="alpha-tile">W</a>
      <a href="http://www.example.com/X" class="alpha-tile">X</a>
      <a href="http://www.example.com/Y" class="alpha-tile">Y</a>
      <a href="http://www.example.com/Z" class="alpha-tile">Z</a>
    </div> <!-- .periodic-table -->
  </div> <!-- .box -->
</body>
</html>

4. By Olivia Ng

Made by Olivia Ng. Periodic table with hover effect, hovering over elements shows comments. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Poppins:400,700" rel="stylesheet">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css'>
  
<style>
body {
  background: #202e38;
  font-family: "Poppins", sans-serif;
}

h1 {
  margin: 2em auto 0;
  font: 700 3em "Poppins", sans-serif;
  color: #f1f5f6;
  text-align: center;
}

h5 {
  margin: 0 auto 2em;
  font: 400 1.3em "Poppins", sans-serif;
  color: #f1f5f6;
  text-align: center;
}

a {
  text-decoration: none;
}

aside.context {
  text-align: center;
  color: #fff;
  line-height: 1.7;
}
aside.context a {
  text-decoration: none;
  color: #fff;
  padding: 3px 0;
  border-bottom: 1px dashed;
}
aside.context .explanation {
  max-width: 700px;
  margin: 4em auto 0;
}

footer {
  text-align: center;
  margin: 2em auto;
  width: 100%;
}
footer a {
  text-decoration: none;
  display: inline-block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: transparent;
  border: 1px dashed #fff;
  color: #fff;
  margin: 5px;
}
footer a:hover {
  background: rgba(255, 255, 255, 0.1);
}
footer a .icons {
  margin-top: 12px;
  display: inline-block;
  font-size: 20px;
}

.periodic-table {
  display: grid;
  grid-template-columns: repeat(9, 100px);
  grid-template-rows: repeat(4, 100px);
  grid-gap: 10px;
  margin: auto;
  max-width: 1200px;
  justify-content: center;
}

.periodic-element {
  padding: 4px;
  position: relative;
  z-index: 1;
  cursor: default;
  transition: all 0.3s ease;
}
.periodic-element .periodic-element-inner {
  background: #202e38;
  padding: 10px 15px;
  width: calc(100% - 30px);
  height: calc(100% - 20px);
  transition: inherit;
}
.periodic-element .title {
  font: 700 34px/1.3 "Poppins", sans-serif;
  margin: 0.3em 0 0;
  transition: 0.8s ease 600ms;
}
.periodic-element .description {
  font: 500 12px "Poppins", sans-serif;
  margin-top: -0.2em;
}
.periodic-element:after {
  z-index: 10;
  content: attr(data-description);
  background: #f9f8f7;
  color: #333;
  width: 180px;
  position: absolute;
  top: 80%;
  opacity: 0;
  transition: opacity 0.3s ease 0.3s, top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;
  height: auto;
  font-size: 12px;
  line-height: 1.4;
  padding: 10px;
  margin: 0 0 0 -50px;
  border-radius: 6px;
  text-align: center;
}
.periodic-element:hover {
  transform: scale(1.12);
  z-index: 10;
}
.periodic-element:hover .periodic-element-inner {
  background: transparent;
}
.periodic-element:hover .title,
.periodic-element:hover .description {
  -webkit-text-fill-color: #222;
}
.periodic-element:hover:after {
  top: 105%;
  opacity: 1;
}

a.periodic-element {
  cursor: pointer;
}

.social-media {
  background: linear-gradient(to bottom right, #f3f9a6 0%, #cbc634 100%);
}
.social-media .title,
.social-media .description {
  background: -webkit-linear-gradient(#f3f9a6, #cbc634);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fun-stuff {
  background: linear-gradient(to bottom right, #ff616d 0%, #ffc171 100%);
}
.fun-stuff .title,
.fun-stuff .description {
  background: -webkit-linear-gradient(#ff616d, #ffc171);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.just-trying {
  background: linear-gradient(to bottom right, #37cfdc 0%, #5a88e5 100%);
}
.just-trying .title,
.just-trying .description {
  background: -webkit-linear-gradient(#37cfdc, #5a88e5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.intense-work {
  background: linear-gradient(to bottom right, #58ac30 0%, #a7df62 100%);
}
.intense-work .title,
.intense-work .description {
  background: -webkit-linear-gradient(#58ac30, #a7df62);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.legend-table {
  padding: 15px;
  text-align: center;
  font-size: 15px;
  margin: 2em auto 0;
}
.legend-table__marker {
  width: 25px;
  height: 25px;
  margin: 5px 5px 10px;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0.5px 1px rgba(0, 0, 0, 0.15);
}
.legend-table__text {
  display: inline-block;
  vertical-align: middle;
  margin: 0 25px 5px 5px;
  background: -webkit-linear-gradient(#ccc, #eee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.legend-table__direction {
  display: inline-block;
  margin: 10px 15px 10px 10px;
  background: -webkit-linear-gradient(#ccc, #eee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.empty-spacer-1 {
  grid-column: 3/span 4;
  grid-row: 1;
}
.empty-spacer-2 {
  grid-column: 1;
  grid-row: 4;
}
</style>
</head>
<body>
  <h1>My Internet Periodic Table</h1>
<h5>How I waste my time on the Internet</h5>
<div class="periodic-table">
  <div class="empty-spacer-1"></div>
  <div class="empty-spacer-2"></div>
  <div class="periodic-element social-media" data-description="I'm only on here to reject invitations πŸ˜‚">
    <div class="periodic-element-inner">
      <div class="title">Li</div>
      <div class="description">LinkedIn</div>
    </div>
  </div>
  <div class="periodic-element social-media" data-description="Only so I don't miss out on my friends' milestones 🀷">
    <div class="periodic-element-inner">
      <div class="title">Fb</div>
      <div class="description">Facebook</div>
    </div>
  </div>
  <div class="periodic-element just-trying" data-description="Looking at amazing Dribbble πŸ€ shots and internally die from the amount of talent/skill out there">
    <div class="periodic-element-inner">
      <div class="title">Db</div>
      <div class="description">Dribbble</div>
    </div>
  </div>
  <div class="periodic-element intense-work" data-description="Coming up with sassy commit messages πŸ”₯">
    <div class="periodic-element-inner">
      <div class="title">Ct</div>
      <div class="description">Commits</div>
    </div>
  </div>
  <div class="periodic-element intense-work" data-description="Making custom emojis for Slack πŸ’ͺ🏻">
    <div class="periodic-element-inner">
      <div class="title">Sl</div>
      <div class="description">Slack</div>
    </div>
  </div>
  <div class="periodic-element fun-stuff" data-description="'Wikipedia Wormhole' is a thing. And it is dangerous πŸ›">
    <div class="periodic-element-inner">
      <div class="title">Wk</div>
      <div class="description">Wikipedia</div>
    </div>
  </div>
  <div class="periodic-element fun-stuff" data-description="Choosing the right playlist. (If my Spotify is working... it's always not working)">
    <div class="periodic-element-inner">
      <div class="title">Sp</div>
      <div class="description">Spotify</div>
    </div>
  </div><a class="periodic-element social-media" data-description="If you say something witty, it's going on my Twitter 🐦" href="https://twitter.com/meowlivia_" target="_blank">
    <div class="periodic-element-inner">
      <div class="title">Tw</div>
      <div class="description">Twitter</div>
    </div></a>
  <div class="periodic-element social-media" data-description="Professional Dota 2 Watcher right here ✌️">
    <div class="periodic-element-inner">
      <div class="title">Tc</div>
      <div class="description">Twitch</div>
    </div>
  </div>
  <div class="periodic-element intense-work" data-description="Creating GitHub issues, a.k.a. tossing problems which I can solve to the frontend team">
    <div class="periodic-element-inner">
      <div class="title">Gt</div>
      <div class="description">GitHub</div>
    </div>
  </div>
  <div class="periodic-element intense-work" data-description="Trying to get yarn working after an update. The main reason I toss issues to the frontend team.">
    <div class="periodic-element-inner">
      <div class="title">Yn</div>
      <div class="description">Yarn</div>
    </div>
  </div>
  <div class="periodic-element just-trying" data-description="A skill I'm trying to learn 🎨... and failing to learn πŸ˜›">
    <div class="periodic-element-inner">
      <div class="title">Il</div>
      <div class="description">Illustration</div>
    </div>
  </div><a class="periodic-element just-trying" data-description="Resident Designer. Keeping the diminishing flame of web design in me alive πŸ•―οΈ" href="https://tellystats.com" target="_blank">
    <div class="periodic-element-inner">
      <div class="title">Te</div>
      <div class="description">TellyStats</div>
    </div></a>
  <div class="periodic-element just-trying" data-description="I just need to stop adding items and actually start doing things. Am I the only one who is still using Wunderlist? πŸ˜‚">
    <div class="periodic-element-inner">
      <div class="title">Wu</div>
      <div class="description">Wunderlist</div>
    </div>
  </div>
  <div class="periodic-element fun-stuff" data-description="I have zero cooking skills, so I watch cooking videos and never try cooking for real 🍳">
    <div class="periodic-element-inner">
      <div class="title">Cv</div>
      <div class="description">Cooking</div>
    </div>
  </div>
  <div class="periodic-element fun-stuff" data-description="Or any animal gifs, basically. πŸˆπŸ•πŸ¦ŠπŸ¦”πŸ¦‰πŸπŸ¬πŸ¦„">
    <div class="periodic-element-inner">
      <div class="title">Dg</div>
      <div class="description">Dog Gifs</div>
    </div>
  </div><a class="periodic-element fun-stuff" data-description="Getting distracted by Toggl comics πŸ™ƒ" href="https://blog.toggl.com" target="_blank">
    <div class="periodic-element-inner">
      <div class="title">Tg</div>
      <div class="description">Toggl Blog</div>
    </div></a>
  <div class="periodic-element just-trying" data-description="I google every damn thing. Including movie spoilers. While watching the movie. Yes.">
    <div class="periodic-element-inner">
      <div class="title">Gg</div>
      <div class="description">Google</div>
    </div>
  </div><a class="periodic-element just-trying" data-description="I like spreadsheets so I create them for the smallest reasons 🧐" href="https://docs.google.com/spreadsheets/d/1Dim2nKRjgpkjA4miqTzcLPT68L0B5LU2aWZWF5hHYAc/edit#gid=0" target="_blank">
    <div class="periodic-element-inner">
      <div class="title">Ex</div>
      <div class="description">Excel</div>
    </div></a>
  <div class="periodic-element intense-work" data-description="I still StackOverflow the simplest shit 'just to be sure'. Where will we be without it ❀️">
    <div class="periodic-element-inner">
      <div class="title">So</div>
      <div class="description">StackOv.</div>
    </div>
  </div>
  <div class="periodic-element intense-work" data-description="It's very much not my job, but sometimes I stick my hand into the Coding Projects jar πŸͺ anyway">
    <div class="periodic-element-inner">
      <div class="title">Cd</div>
      <div class="description">Coding</div>
    </div>
  </div>
  <div class="periodic-element just-trying" data-description="I spend so much time on Codepen, I decided to go Pro because I felt bad πŸ’Έ">
    <div class="periodic-element-inner">
      <div class="title">Cp</div>
      <div class="description">Codepen</div>
    </div>
  </div>
  <div class="periodic-element just-trying" data-description="We all have that one thing that keeps us alive πŸ›«πŸ—ΊοΈ">
    <div class="periodic-element-inner">
      <div class="title">Tr</div>
      <div class="description">Travel</div>
    </div>
  </div><a class="periodic-element social-media" data-description="Fuck this app. It's a terrible love-hate relationship." href="https://www.instagram.com/meowliviaaa/" target="_blank">
    <div class="periodic-element-inner">
      <div class="title">In</div>
      <div class="description">Instagram</div>
    </div></a><a class="periodic-element fun-stuff" data-description="Obsessing over musicals and stalking broadway stars is πŸ‘πŸ» not πŸ‘πŸ» a πŸ‘πŸ» crime!" href="https://codepen.io/collection/XPWkdW/" target="_blank">
    <div class="periodic-element-inner">
      <div class="title">Mu</div>
      <div class="description">Musicals</div>
    </div></a>
  <div class="periodic-element fun-stuff" data-description="I learn memes, I make memes, I breathe memes.">
    <div class="periodic-element-inner">
      <div class="title">Me</div>
      <div class="description">Memes</div>
    </div>
  </div>
  <div class="periodic-element intense-work" data-description="Battling double columns in Notion">
    <div class="periodic-element-inner">
      <div class="title">No</div>
      <div class="description">Notion</div>
    </div>
  </div>
  <div class="periodic-element social-media" data-description="Oh my god. Someone please save me from this Reddit hell hole 😭">
    <div class="periodic-element-inner">
      <div class="title">Re</div>
      <div class="description">Reddit</div>
    </div>
  </div>
  <div class="periodic-element intense-work" data-description="Research &amp; Documentation nobody asks for πŸ€“πŸ“">
    <div class="periodic-element-inner">
      <div class="title">Rd</div>
      <div class="description">Research</div>
    </div>
  </div>
  <div class="periodic-element intense-work" data-description="Stats. Data. Stats. Data. πŸ“Š Just lots of reporting.">
    <div class="periodic-element-inner">
      <div class="title">St</div>
      <div class="description">Stats</div>
    </div>
  </div>
  <div class="periodic-element intense-work" data-description="Ads. Ads. Ads. If you've seen a Toggl ad, it was me. (Sorry)">
    <div class="periodic-element-inner">
      <div class="title">Ad</div>
      <div class="description">Ads</div>
    </div>
  </div>
</div>
<div class="legend-table">
  <div class="legend-table__wrapper"><span class="legend-table__marker social-media"></span><span class="legend-table__text">Social Media</span><span class="legend-table__marker intense-work"></span><span class="legend-table__text">Serious Work</span><span class="legend-table__marker just-trying"></span><span class="legend-table__text">Personal Development</span><span class="legend-table__marker fun-stuff"></span><span class="legend-table__text">Fun Stuff</span><br/>
    <div class="legend-table__direction"><span>&#8594; &ensp; Across the table: Importance</span></div>
    <div class="legend-table__direction"><span>&#8595; &ensp; Down the table: Time Spent</span></div>
  </div>
</div>
<aside class="context">
  <div class="explanation">I try to be productive a lot, and I fail a lot :)<br/>Part of the <a href="https://codepen.io/collection/DQvYpQ/" target="_blank">CSS Grid collection here</a>.</div>
</aside>
<footer><a href="https://twitter.com/meowlivia_" target="_blank"><i class="icon-social-twitter icons"></i></a><a href="https://github.com/oliviale" target="_blank"><i class="icon-social-github icons"></i></a><a href="https://dribbble.com/oliviale" target="_blank"><i class="icon-social-dribbble icons"></i></a></footer>
</body>
</html>

5. By Alma Madsen

Made by Alma Madsen. CSS Periodic table with amazing hover animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
body {
  font-family: Arial;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.periodic {
  position: relative;
  height: 200px;
  margin-right: -1px;
  text-shadow: none;
}
.periodic-row {
  clear: both;
  height: 10%;
}
.cell {
  float: left;
  position: relative;
  width: 5.55%;
  height: 100%;
}
.element {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 1px;
  right: 1px;
  box-sizing: border-box;
  box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.05);
  text-align: center;
  cursor: default;
  pointer-events: none;
  -webkit-transition: all 200ms ease;
  transition: all 200ms ease;
  background-color: rgba(0, 128, 128, 0.6);
}
.cell:hover .element {
  border-color: rgba(0, 0, 0, 0.1);
  -webkit-transform: scale(3, 3);
  -ms-transform: scale(3, 3);
  transform: scale(3, 3);
  z-index: 1;
  background-color: rgba(0, 128, 128, 0.9);
}
.at_num,
.at_details {
  position: absolute;
  font-size: 4px;
  color: rgba(255, 255, 255, 0.5);
  opacity: 0;
}
.at_num {
  top: 4px;
  right: 5px;
}
.symbol {
  position: absolute;
  top: 50%;
  left: 0px;
  right: 0px;
  margin-top: -4px;
  font-size: 9px;
  line-height: 1;
  height: 9px;
  color: rgba(255, 255, 255, 0.9);
}
.at_details {
  bottom: 4px;
  left: 0px;
  right: 0px;
}
.cell:nth-child(-n+2) .element,
.cell:nth-child(n+13) .element {
  background-color: rgba(0, 160, 96, 0.6);
}
.cell:nth-child(1) .element,
.periodic-row:nth-child(2) .cell:nth-child(n+14) .element,
.periodic-row:nth-child(3) .cell:nth-child(n+15) .element,
.periodic-row:nth-child(4) .cell:nth-child(n+16) .element,
.periodic-row:nth-child(5) .cell:nth-child(n+17) .element {
  background-color: rgba(0, 192, 64, 0.6);
}
.periodic-row:nth-child(-n+6) .cell:nth-child(18) .element {
  background-color: rgba(64, 192, 0, 0.6);
}
.periodic-row:nth-child(n+9) .element {
  background-color: rgba(0, 96, 160, 0.6);
}
.cell:nth-child(-n+2):hover .element,
.cell:nth-child(n+13):hover .element {
  background-color: rgba(0, 160, 96, 0.9);
}
.cell:nth-child(1):hover .element,
.periodic-row:nth-child(2) .cell:nth-child(n+14):hover .element,
.periodic-row:nth-child(3) .cell:nth-child(n+15):hover .element,
.periodic-row:nth-child(4) .cell:nth-child(n+16):hover .element,
.periodic-row:nth-child(5) .cell:nth-child(n+17):hover .element {
  background-color: rgba(0, 192, 64, 0.9);
}
.periodic-row:nth-child(-n+6) .cell:nth-child(18):hover .element {
  background-color: rgba(64, 192, 0, 0.9);
}
.periodic-row:nth-child(n+9) .cell:hover .element {
  background-color: rgba(0, 96, 160, 0.9);
}
.cell:nth-child(1) .element {
  -webkit-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  transform-origin: 0 50%;
}
.cell:nth-child(18) .element {
  -webkit-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}
.periodic-row:nth-child(10) .cell .element {
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
.periodic-row:nth-child(1) .cell:nth-child(1) .element {
  -webkit-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}
.periodic-row:nth-child(1) .cell:nth-child(18) .element {
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
}
.periodic-row:nth-child(10) .cell:nth-child(18) .element {
  -webkit-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
}
@media (min-width: 600px) {
  .periodic {
    height: 460px;
    margin-right: -2px;
  }
  .element {
    right: 2px;
    bottom: 2px;
  }
  .at_num,
  .at_details {
    font-size: 4px;
    opacity: 1;
  }
  .symbol {
    margin-top: -17px;
    font-size: 16px;
    font-weight: bold;
    line-height: 30px;
    height: 30px;
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
  }
}
@media (min-width: 800px) {
  .periodic {
    height: 540px;
  }
  .symbol {
    font-size: 20px;
  }
}
@media (min-width: 992px) {
  .periodic {
    height: 680px;
  }
  .at_num,
  .at_details {
    font-size: 5px;
  }
  .symbol {
    font-size: 24px;
  }
}
@media (min-width: 1200px) {
  .periodic {
    height: 800px;
  }
  .at_num,
  .at_details {
    font-size: 6px;
  }
  .symbol {
    font-size: 30px;
  }
}
</style>
</head>
<body>
  <div class="periodic">
  <div class="periodic-row">
    <div class="cell">
      <div class="element">
        <div class="at_num">1</div>
        <div class="symbol">H</div>
        <div class="at_details">hydrogen<br />1.008</div>
      </div>
    </div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell">
      <div class="element">
        <div class="at_num">2</div>
        <div class="symbol">He</div>
        <div class="at_details">helium<br />4.0026</div>
      </div>
    </div>
  </div>
  <div class="periodic-row">
    <div class="cell">
      <div class="element">
        <div class="at_num">3</div>
        <div class="symbol">Li</div>
        <div class="at_details">lithium<br />6.94</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">4</div>
        <div class="symbol">Be</div>
        <div class="at_details">beryllium<br />9.0122</div>
      </div>
    </div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell">
      <div class="element">
        <div class="at_num">5</div>
        <div class="symbol">B</div>
        <div class="at_details">boron<br />10.81</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">6</div>
        <div class="symbol">C</div>
        <div class="at_details">carbon<br />12.011</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">7</div>
        <div class="symbol">N</div>
        <div class="at_details">nidivogen<br />14.007</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">8</div>
        <div class="symbol">O</div>
        <div class="at_details">oxygen<br />15.999</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">9</div>
        <div class="symbol">F</div>
        <div class="at_details">fluorine<br />18.998</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">10</div>
        <div class="symbol">Ne</div>
        <div class="at_details">neon<br />20.180</div>
      </div>
    </div>
  </div>
  <div class="periodic-row">
    <div class="cell">
      <div class="element">
        <div class="at_num">11</div>
        <div class="symbol">Na</div>
        <div class="at_details">sodium<br />22.990</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">12</div>
        <div class="symbol">Mg</div>
        <div class="at_details">magnesium<br />24.305</div>
      </div>
    </div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell">
      <div class="element">
        <div class="at_num">13</div>
        <div class="symbol">Al</div>
        <div class="at_details">aluminum<br />26.982</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">14</div>
        <div class="symbol">Si</div>
        <div class="at_details">silicon<br />28.085</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">15</div>
        <div class="symbol">P</div>
        <div class="at_details">phosphorus<br />30.974</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">16</div>
        <div class="symbol">S</div>
        <div class="at_details">sulfur<br />32.06</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">17</div>
        <div class="symbol">Cl</div>
        <div class="at_details">chlorine<br />35.45</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">18</div>
        <div class="symbol">Ar</div>
        <div class="at_details">argon<br />39.948</div>
      </div>
    </div>
  </div>
  <div class="periodic-row">
    <div class="cell">
      <div class="element">
        <div class="at_num">19</div>
        <div class="symbol">K</div>
        <div class="at_details">potassium<br />39.098</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">20</div>
        <div class="symbol">Ca</div>
        <div class="at_details">calcium<br />40.078</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">21</div>
        <div class="symbol">Sc</div>
        <div class="at_details">scandium<br />44.956</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">22</div>
        <div class="symbol">Ti</div>
        <div class="at_details">titanium<br />47.867</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">23</div>
        <div class="symbol">V</div>
        <div class="at_details">vanadium<br />50.942</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">24</div>
        <div class="symbol">Cr</div>
        <div class="at_details">chromium<br />51.996</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">25</div>
        <div class="symbol">Mn</div>
        <div class="at_details">manganese<br />54.938</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">26</div>
        <div class="symbol">Fe</div>
        <div class="at_details">iron<br />55.845</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">27</div>
        <div class="symbol">Co</div>
        <div class="at_details">cobalt<br />58.933</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">28</div>
        <div class="symbol">Ni</div>
        <div class="at_details">nickel<br />58.693</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">29</div>
        <div class="symbol">Cu</div>
        <div class="at_details">copper<br />63.546</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">30</div>
        <div class="symbol">Zn</div>
        <div class="at_details">zinc<br />65.38</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">31</div>
        <div class="symbol">Ga</div>
        <div class="at_details">gallium<br />69.723</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">32</div>
        <div class="symbol">Ge</div>
        <div class="at_details">germanium<br />72.63</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">33</div>
        <div class="symbol">As</div>
        <div class="at_details">arsenic<br />74.922</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">34</div>
        <div class="symbol">Se</div>
        <div class="at_details">selenium<br />78.96</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">35</div>
        <div class="symbol">Br</div>
        <div class="at_details">bromine<br />79.904</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">36</div>
        <div class="symbol">Kr</div>
        <div class="at_details">krypton<br />83.798</div>
      </div>
    </div>
  </div>
  <div class="periodic-row">
    <div class="cell">
      <div class="element">
        <div class="at_num">37</div>
        <div class="symbol">Rb</div>
        <div class="at_details">rubidium<br />85.468</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">38</div>
        <div class="symbol">Sr</div>
        <div class="at_details">sdivontium<br />87.62</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">39</div>
        <div class="symbol">Y</div>
        <div class="at_details">ytdivium<br />88.906</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">40</div>
        <div class="symbol">Zr</div>
        <div class="at_details">zirconium<br />91.224</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">41</div>
        <div class="symbol">Nb</div>
        <div class="at_details">niobium<br />92.906</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">42</div>
        <div class="symbol">Mo</div>
        <div class="at_details">molybdenum<br />95.96</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">43</div>
        <div class="symbol">Tc</div>
        <div class="at_details">technetium<br />[97.91]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">44</div>
        <div class="symbol">Ru</div>
        <div class="at_details">ruthenium<br />101.07</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">45</div>
        <div class="symbol">Rh</div>
        <div class="at_details">rhodium<br />102.91</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">46</div>
        <div class="symbol">Pd</div>
        <div class="at_details">palladium<br />106.42</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">47</div>
        <div class="symbol">Ag</div>
        <div class="at_details">silver<br />107.87</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">48</div>
        <div class="symbol">Cd</div>
        <div class="at_details">cadmium<br />112.41</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">49</div>
        <div class="symbol">In</div>
        <div class="at_details">indium<br />114.82</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">50</div>
        <div class="symbol">Sn</div>
        <div class="at_details">tin<br />118.71</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">51</div>
        <div class="symbol">Sb</div>
        <div class="at_details">antimony<br />121.76</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">52</div>
        <div class="symbol">Te</div>
        <div class="at_details">tellurium<br />127.60</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">53</div>
        <div class="symbol">I</div>
        <div class="at_details">iodine<br />126.90</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">54</div>
        <div class="symbol">Xe</div>
        <div class="at_details">xenon<br />131.29</div>
      </div>
    </div>
  </div>
  <div class="periodic-row">
    <div class="cell">
      <div class="element">
        <div class="at_num">55</div>
        <div class="symbol">Cs</div>
        <div class="at_details">cesium<br />132.91</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">56</div>
        <div class="symbol">Ba</div>
        <div class="at_details">barium<br />137.33</div>
      </div>
    </div>
    <div class="cell"></div>
    <div class="cell">
      <div class="element">
        <div class="at_num">72</div>
        <div class="symbol">Hf</div>
        <div class="at_details">hafnium<br />178.49</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">73</div>
        <div class="symbol">Ta</div>
        <div class="at_details">tantalum<br />180.95</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">74</div>
        <div class="symbol">W</div>
        <div class="at_details">tungsten<br />183.84</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">75</div>
        <div class="symbol">Re</div>
        <div class="at_details">rhenium<br />186.21</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">76</div>
        <div class="symbol">Os</div>
        <div class="at_details">osmium<br />190.23</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">77</div>
        <div class="symbol">Ir</div>
        <div class="at_details">iridium<br />192.22</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">78</div>
        <div class="symbol">Pt</div>
        <div class="at_details">platinum<br />195.08</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">79</div>
        <div class="symbol">Au</div>
        <div class="at_details">gold<br />196.97</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">80</div>
        <div class="symbol">Hg</div>
        <div class="at_details">mercury<br />200.59</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">81</div>
        <div class="symbol">Tl</div>
        <div class="at_details">thallium<br />204.38</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">82</div>
        <div class="symbol">Pb</div>
        <div class="at_details">lead<br />207.2</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">83</div>
        <div class="symbol">Bi</div>
        <div class="at_details">bismuth<br />208.98</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">84</div>
        <div class="symbol">Po</div>
        <div class="at_details">polonium<br />[208.98]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">85</div>
        <div class="symbol">At</div>
        <div class="at_details">astatine<br />[209.99]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">86</div>
        <div class="symbol">Rn</div>
        <div class="at_details">radon<br />[222.02]</div>
      </div>
    </div>
  </div>
  <div class="periodic-row">
    <div class="cell">
      <div class="element">
        <div class="at_num">87</div>
        <div class="symbol">Fr</div>
        <div class="at_details">francium<br />[223.02]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">88</div>
        <div class="symbol">Ra</div>
        <div class="at_details">radium<br />[226.03]</div>
      </div>
    </div>
    <div class="cell"></div>
    <div class="cell">
      <div class="element">
        <div class="at_num">104</div>
        <div class="symbol">Rf</div>
        <div class="at_details">rutherfordium<br />[265.12]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">105</div>
        <div class="symbol">Db</div>
        <div class="at_details">dubnium<br />[268.13]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">106</div>
        <div class="symbol">Sg</div>
        <div class="at_details">seaborgium<br />[271.13]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">107</div>
        <div class="symbol">Bh</div>
        <div class="at_details">bohrium<br />[270]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">108</div>
        <div class="symbol">Hs</div>
        <div class="at_details">hassium<br />[277.15]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">109</div>
        <div class="symbol">Mt</div>
        <div class="at_details">meitnerium<br />[276.15]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">110</div>
        <div class="symbol">Ds</div>
        <div class="at_details">darmstadtium<br />[281.16]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">111</div>
        <div class="symbol">Rg</div>
        <div class="at_details">roentgenium<br />[280.16]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">112</div>
        <div class="symbol">Cn</div>
        <div class="at_details">copernicium<br />[285.17]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">113</div>
        <div class="symbol">Uut</div>
        <div class="at_details">unundivium<br />[284.18]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">114</div>
        <div class="symbol">Fl</div>
        <div class="at_details">flerovium<br />[289.19]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">115</div>
        <div class="symbol">Uup</div>
        <div class="at_details">ununpentium<br />[288.19]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">116</div>
        <div class="symbol">Lv</div>
        <div class="at_details">livermorium<br />[293]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">117</div>
        <div class="symbol">Uus</div>
        <div class="at_details">ununseptium<br />[294]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">118</div>
        <div class="symbol">Uuo</div>
        <div class="at_details">ununoctium<br />[294]</div>
      </div>
    </div>
  </div>
  <div class="periodic-row"></div>
  <div class="periodic-row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell">
      <div class="element">
        <div class="at_num">57</div>
        <div class="symbol">La</div>
        <div class="at_details">lanthanum<br />138.91</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">58</div>
        <div class="symbol">Ce</div>
        <div class="at_details">cerium<br />140.12</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">59</div>
        <div class="symbol">Pr</div>
        <div class="at_details">praseodymium<br />140.91</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">60</div>
        <div class="symbol">Nd</div>
        <div class="at_details">neodymium<br />144.24</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">61</div>
        <div class="symbol">Pm</div>
        <div class="at_details">promethium<br />[144.91]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">62</div>
        <div class="symbol">Sm</div>
        <div class="at_details">samarium<br />150.36</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">63</div>
        <div class="symbol">Eu</div>
        <div class="at_details">europium<br />151.96</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">64</div>
        <div class="symbol">Gd</div>
        <div class="at_details">gadolinium<br />157.25</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">65</div>
        <div class="symbol">Tb</div>
        <div class="at_details">terbium<br />158.93</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">66</div>
        <div class="symbol">Dy</div>
        <div class="at_details">dysprosium<br />162.50</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">67</div>
        <div class="symbol">Ho</div>
        <div class="at_details">holmium<br />164.93</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">68</div>
        <div class="symbol">Er</div>
        <div class="at_details">erbium<br />167.26</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">69</div>
        <div class="symbol">Tm</div>
        <div class="at_details">thulium<br />168.93</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">70</div>
        <div class="symbol">Yb</div>
        <div class="at_details">ytterbium<br />173.05</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">71</div>
        <div class="symbol">Lu</div>
        <div class="at_details">lutetium<br />174.97</div>
      </div>
    </div>
  </div>
  <div class="periodic-row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell">
      <div class="element">
        <div class="at_num">89</div>
        <div class="symbol">Ac</div>
        <div class="at_details">actinium<br />[227.03]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">90</div>
        <div class="symbol">Th</div>
        <div class="at_details">thorium<br />232.04</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">91</div>
        <div class="symbol">Pa</div>
        <div class="at_details">protactinium<br />231.04</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">92</div>
        <div class="symbol">U</div>
        <div class="at_details">uranium<br />238.03</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">93</div>
        <div class="symbol">Np</div>
        <div class="at_details">neptunium<br />[237.05]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">94</div>
        <div class="symbol">Pu</div>
        <div class="at_details">plutonium<br />[244.06]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">95</div>
        <div class="symbol">Am</div>
        <div class="at_details">americium<br />[243.06]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">96</div>
        <div class="symbol">Cm</div>
        <div class="at_details">curium<br />[247.07]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">97</div>
        <div class="symbol">Bk</div>
        <div class="at_details">berkelium<br />[247.07]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">98</div>
        <div class="symbol">Cf</div>
        <div class="at_details">californium<br />[251.08]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">99</div>
        <div class="symbol">Es</div>
        <div class="at_details">einsteinium<br />[252.08]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">100</div>
        <div class="symbol">Fm</div>
        <div class="at_details">fermium<br />[257.10]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">101</div>
        <div class="symbol">Md</div>
        <div class="at_details">mendelevium<br />[258.10]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">102</div>
        <div class="symbol">No</div>
        <div class="at_details">nobelium<br />[259.10]</div>
      </div>
    </div>
    <div class="cell">
      <div class="element">
        <div class="at_num">103</div>
        <div class="symbol">Lr</div>
        <div class="at_details">lawrencium<br />[262.11]</div>
      </div>
    </div>
  </div>
  <div style="clear: both;"></div>
</div>
</body>
</html>

6. By Brady Sammons

Made by Brady Sammons. Periodic table with flip effect. Source

<!DOCTYPE html>
<html lang="en" >
   <head>
      <meta charset="UTF-8">
      <title></title>
      <style>
         /* -------------------
         *Author:			Brady Sammons		
         *Version:			1.0.0		
         *Website:			bradysammons.com		
         -------------------- */
         @import url(https://fonts.googleapis.com/css?family=Tauri);
         html, body, div, span, applet, object, iframe,
         h1, h2, h3, h4, h5, h6, p, blockquote, pre,
         a, abbr, acronym, address, big, cite, code,
         del, dfn, em, img, ins, kbd, q, s, samp,
         small, strike, strong, sub, sup, tt, var,
         b, u, i, center,
         dl, dt, dd, ol, ul, li,
         fieldset, form, label, legend,
         table, caption, tbody, tfoot, thead, tr, th, td,
         article, aside, canvas, details, embed,
         figure, figcaption, footer, header, hgroup,
         menu, nav, output, ruby, section, summary,
         time, mark, audio, video {
         margin: 0;
         padding: 0;
         border: 0;
         font: inherit;
         font-size: 100%;
         vertical-align: baseline;
         }
         html {
         line-height: 1;
         }
         ol, ul {
         list-style: none;
         }
         table {
         border-collapse: collapse;
         border-spacing: 0;
         }
         caption, th, td {
         text-align: left;
         font-weight: normal;
         vertical-align: middle;
         }
         q, blockquote {
         quotes: none;
         }
         q:before, q:after, blockquote:before, blockquote:after {
         content: "";
         content: none;
         }
         a img {
         border: none;
         }
         article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
         display: block;
         }
         /* -------------------
         Variables
         -------------------- */
         html {
         min-height: 100%;
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzU1NTU1NSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIyMjIyMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
         background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #555555), color-stop(100%, #222222));
         background-image: -moz-linear-gradient(#555555, #222222);
         background-image: -webkit-linear-gradient(#555555, #222222);
         background-image: linear-gradient(#555555, #222222);
         background-repeat: no-repeat;
         }
         body {
         font-size: 100%;
         font-family: helvetica, arial, sans-serif;
         }
         h1, h3 {
         font-family: 'Tauri', sans-serif;
         letter-spacing: -.05em;
         }
         h1 {
         font-size: 2em;
         margin-top: 30px;
         color: #eee;
         text-transform: uppercase;
         text-shadow: 1px 1px 0 #333, 2px 2px 0 #999;
         }
         h3 {
         margin: 10px 0 20px 0;
         color: #888;
         font-weight: normal;
         }
         span.swatch {
         display: inline-block;
         width: 14px;
         height: 14px;
         background: #eee;
         margin-right: 10px;
         }
         #key {
         position: absolute;
         left: 165px;
         z-index: 100;
         margin-top: 55px;
         }
         #key ul {
         float: left;
         margin-right: 40px;
         }
         #key ul li {
         line-height: 1.5em;
         font-size: .8em;
         color: #B6B6B6;
         }
         #wrapper {
         width: 990px;
         margin: 0 auto 30px auto;
         height: 600px;
         position: relative;
         }
         [class^="element-"] {
         cursor: pointer;
         position: relative;
         z-index: 1;
         color: #333;
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
         width: 55px;
         height: 55px;
         font-size: 12px;
         display: block;
         float: left;
         -moz-perspective: 1000;
         -webkit-perspective: 1000;
         perspective: 1000;
         }
         [class^="element-"] .chip {
         width: 100%;
         height: 100%;
         -moz-transform-style: preserve-3d;
         -webkit-transform-style: preserve-3d;
         transform-style: preserve-3d;
         -moz-transition-property: all;
         -o-transition-property: all;
         -webkit-transition-property: all;
         transition-property: all;
         -moz-transition-duration: 0.5s;
         -o-transition-duration: 0.5s;
         -webkit-transition-duration: 0.5s;
         transition-duration: 0.5s;
         -moz-transition-timing-function: ease-out;
         -o-transition-timing-function: ease-out;
         -webkit-transition-timing-function: ease-out;
         transition-timing-function: ease-out;
         }
         [class^="element-"] .chip.long .front strong {
         margin-top: 8px;
         font-size: 1.38em;
         }
         [class^="element-"] .chip.long .back p {
         margin-top: 20px;
         }
         [class^="element-"]:hover .chip {
         -moz-transform: rotateY(180deg);
         -webkit-transform: rotateY(180deg);
         transform: rotateY(180deg);
         }
         [class^="element-"] .face {
         position: absolute;
         width: 100%;
         height: 100%;
         -moz-backface-visibility: hidden;
         -webkit-backface-visibility: hidden;
         backface-visibility: hidden;
         }
         [class^="element-"] .face.front, [class^="element-"] .face.back {
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
         }
         [class^="element-"] .face.front {
         padding: 4px;
         -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.3), inset 1px 0 0 rgba(255, 255, 255, 0.2), inset -1px 0 0 rgba(0, 0, 0, 0.15);
         -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.3), inset 1px 0 0 rgba(255, 255, 255, 0.2), inset -1px 0 0 rgba(0, 0, 0, 0.15);
         box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.3), inset 1px 0 0 rgba(255, 255, 255, 0.2), inset -1px 0 0 rgba(0, 0, 0, 0.15);
         }
         [class^="element-"] .face.front i {
         display: block;
         font-size: .8em;
         }
         [class^="element-"] .face.front strong {
         font-size: 2.2em;
         display: block;
         font-weight: bold;
         text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
         text-align: center;
         margin-top: 4px;
         background: rgba(0, 0, 0, 0.1);
         }
         [class^="element-"] .face.back {
         display: block;
         -moz-transform: rotateY(180deg);
         -webkit-transform: rotateY(180deg);
         transform: rotateY(180deg);
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         box-sizing: border-box;
         background: #eee;
         color: #111;
         }
         [class^="element-"] .face.back p {
         margin-top: 16px;
         line-height: 1.2;
         text-align: center;
         font-size: .7em;
         font-weight: 600;
         }
         [class^="element-"] .face.back p span {
         display: block;
         }
         /* -------------------
         Elements
         -------------------- */
         span.swatch.element-metal {
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M2YzZjNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzg2ODY4NiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
         background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #c6c6c6), color-stop(100%, #868686));
         background-image: -moz-linear-gradient(left top, #c6c6c6, #868686);
         background-image: -webkit-linear-gradient(left top, #c6c6c6, #868686);
         background-image: linear-gradient(to right bottom, #c6c6c6, #868686);
         }
         span.swatch.element-non-metal {
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E1YjNiOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYyNzU3YyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
         background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #a5b3b8), color-stop(100%, #62757c));
         background-image: -moz-linear-gradient(left top, #a5b3b8, #62757c);
         background-image: -webkit-linear-gradient(left top, #a5b3b8, #62757c);
         background-image: linear-gradient(to right bottom, #a5b3b8, #62757c);
         }
         span.swatch.element-alkali-metal {
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M2ZDg2NyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzg2OTkyNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
         background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #c6d867), color-stop(100%, #869927));
         background-image: -moz-linear-gradient(left top, #c6d867, #869927);
         background-image: -webkit-linear-gradient(left top, #c6d867, #869927);
         background-image: linear-gradient(to right bottom, #c6d867, #869927);
         }
         span.swatch.element-alkali-earth-metal {
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhlZDViMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNkYTY3NCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
         background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #8ed5b3), color-stop(100%, #3da674));
         background-image: -moz-linear-gradient(left top, #8ed5b3, #3da674);
         background-image: -webkit-linear-gradient(left top, #8ed5b3, #3da674);
         background-image: linear-gradient(to right bottom, #8ed5b3, #3da674);
         }
         span.swatch.element-transition-metal {
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwZGNmZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMyYTVmZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
         background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #b0dcfe), color-stop(100%, #32a5fd));
         background-image: -moz-linear-gradient(left top, #b0dcfe, #32a5fd);
         background-image: -webkit-linear-gradient(left top, #b0dcfe, #32a5fd);
         background-image: linear-gradient(to right bottom, #b0dcfe, #32a5fd);
         }
         span.swatch.element-lanthoid {
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZWUzYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2JhYWEwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
         background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #ffee3a), color-stop(100%, #baaa00));
         background-image: -moz-linear-gradient(left top, #ffee3a, #baaa00);
         background-image: -webkit-linear-gradient(left top, #ffee3a, #baaa00);
         background-image: linear-gradient(to right bottom, #ffee3a, #baaa00);
         }
         span.swatch.element-actinoid {
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYzg0NyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2M3OGIwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
         background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #ffc847), color-stop(100%, #c78b00));
         background-image: -moz-linear-gradient(left top, #ffc847, #c78b00);
         background-image: -webkit-linear-gradient(left top, #ffc847, #c78b00);
         background-image: linear-gradient(to right bottom, #ffc847, #c78b00);
         }
         span.swatch.element-metalloid {
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1OGE4YSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2M0MmIyYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
         background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #e58a8a), color-stop(100%, #c42b2b));
         background-image: -moz-linear-gradient(left top, #e58a8a, #c42b2b);
         background-image: -webkit-linear-gradient(left top, #e58a8a, #c42b2b);
         background-image: linear-gradient(to right bottom, #e58a8a, #c42b2b);
         }
         span.swatch.element-halogen {
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NkYjI3NSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzhlNzMzNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
         background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #cdb275), color-stop(100%, #8e7334));
         background-image: -moz-linear-gradient(left top, #cdb275, #8e7334);
         background-image: -webkit-linear-gradient(left top, #cdb275, #8e7334);
         background-image: linear-gradient(to right bottom, #cdb275, #8e7334);
         }
         span.swatch.element-noble-gas {
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FkYWRkYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU1NTViMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
         background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #adadda), color-stop(100%, #5555b2));
         background-image: -moz-linear-gradient(left top, #adadda, #5555b2);
         background-image: -webkit-linear-gradient(left top, #adadda, #5555b2);
         background-image: linear-gradient(to right bottom, #adadda, #5555b2);
         }
         .element-metal .front {
         color: #2d2d2d;
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M2YzZjNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzg2ODY4NiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
         background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #c6c6c6), color-stop(100%, #868686));
         background-image: -moz-linear-gradient(left top, #c6c6c6, #868686);
         background-image: -webkit-linear-gradient(left top, #c6c6c6, #868686);
         background-image: linear-gradient(to right bottom, #c6c6c6, #868686);
         }
         .element-metal .face.back {
         background-color: #c6c6c6;
         }
         .element-alkali-metal .front {
         color: #3b4311;
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M2ZDg2NyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzg2OTkyNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
         background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #c6d867), color-stop(100%, #869927));
         background-image: -moz-linear-gradient(left top, #c6d867, #869927);
         background-image: -webkit-linear-gradient(left top, #c6d867, #869927);
         background-image: linear-gradient(to right bottom, #c6d867, #869927);
         }
         .element-alkali-metal .face.back {
         background-color: #d5e38f;
         }
         .element-alkali-earth-metal .front {
         color: #133323;
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzhlZDViMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzNkYTY3NCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
         background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #8ed5b3), color-stop(100%, #3da674));
         background-image: -moz-linear-gradient(left top, #8ed5b3, #3da674);
         background-image: -webkit-linear-gradient(left top, #8ed5b3, #3da674);
         background-image: linear-gradient(to right bottom, #8ed5b3, #3da674);
         }
         .element-alkali-earth-metal .face.back {
         background-color: #b3e3cc;
         }
         .element-transition-metal .front {
         color: #012948;
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwZGNmZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMyYTVmZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
         background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #b0dcfe), color-stop(100%, #32a5fd));
         background-image: -moz-linear-gradient(left top, #b0dcfe, #32a5fd);
         background-image: -webkit-linear-gradient(left top, #b0dcfe, #32a5fd);
         background-image: linear-gradient(to right bottom, #b0dcfe, #32a5fd);
         }
         .element-transition-metal .face.back {
         background-color: #b0dcfe;
         }
         .element-lanthoid .front {
         color: #443e00;
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZWUzYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2JhYWEwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
         background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #ffee3a), color-stop(100%, #baaa00));
         background-image: -moz-linear-gradient(left top, #ffee3a, #baaa00);
         background-image: -webkit-linear-gradient(left top, #ffee3a, #baaa00);
         background-image: linear-gradient(to right bottom, #ffee3a, #baaa00);
         }
         .element-lanthoid .face.back {
         background-color: #ffee3a;
         }
         .element-actinoid .front {
         color: #140e00;
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmYzg0NyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2M3OGIwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
         background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #ffc847), color-stop(100%, #c78b00));
         background-image: -moz-linear-gradient(left top, #ffc847, #c78b00);
         background-image: -webkit-linear-gradient(left top, #ffc847, #c78b00);
         background-image: linear-gradient(to right bottom, #ffc847, #c78b00);
         }
         .element-actinoid .face.back {
         background-color: #ffc847;
         }
         .element-metalloid .front {
         color: #320b0b;
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1OGE4YSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2M0MmIyYiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
         background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #e58a8a), color-stop(100%, #c42b2b));
         background-image: -moz-linear-gradient(left top, #e58a8a, #c42b2b);
         background-image: -webkit-linear-gradient(left top, #e58a8a, #c42b2b);
         background-image: linear-gradient(to right bottom, #e58a8a, #c42b2b);
         }
         .element-metalloid .face.back {
         background-color: #e58a8a;
         }
         .element-non-metal .front {
         color: #131718;
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E1YjNiOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYyNzU3YyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
         background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #a5b3b8), color-stop(100%, #62757c));
         background-image: -moz-linear-gradient(left top, #a5b3b8, #62757c);
         background-image: -webkit-linear-gradient(left top, #a5b3b8, #62757c);
         background-image: linear-gradient(to right bottom, #a5b3b8, #62757c);
         }
         .element-non-metal .face.back {
         background-color: #b9c4c8;
         }
         .element-halogen .front {
         color: #0c0904;
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NkYjI3NSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzhlNzMzNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
         background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #cdb275), color-stop(100%, #8e7334));
         background-image: -moz-linear-gradient(left top, #cdb275, #8e7334);
         background-image: -webkit-linear-gradient(left top, #cdb275, #8e7334);
         background-image: linear-gradient(to right bottom, #cdb275, #8e7334);
         }
         .element-halogen .face.back {
         background-color: #d6c190;
         }
         .element-noble-gas .front {
         color: #1b1b3a;
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FkYWRkYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU1NTViMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
         background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #adadda), color-stop(100%, #5555b2));
         background-image: -moz-linear-gradient(left top, #adadda, #5555b2);
         background-image: -webkit-linear-gradient(left top, #adadda, #5555b2);
         background-image: linear-gradient(to right bottom, #adadda, #5555b2);
         }
         .element-noble-gas .face.back {
         background-color: #adadda;
         }
         .element-lanthanoid-transitional-metal .front {
         color: #1b1b3a;
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRiYjBmZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2QzYzEwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
         background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #4bb0fd), color-stop(100%, #d3c100));
         background-image: -moz-linear-gradient(left top, #4bb0fd, #d3c100);
         background-image: -webkit-linear-gradient(left top, #4bb0fd, #d3c100);
         background-image: linear-gradient(to right bottom, #4bb0fd, #d3c100);
         }
         .element-lanthanoid-transitional-metal .face.back {
         background-color: #b0dcfe;
         }
         .element-actinoid-transitional-metal .front {
         color: #1b1b3a;
         background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuMCIgeDI9IjEuMCIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRiYjBmZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2UwOWQwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
         background-size: 100%;
         background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #4bb0fd), color-stop(100%, #e09d00));
         background-image: -moz-linear-gradient(left top, #4bb0fd, #e09d00);
         background-image: -webkit-linear-gradient(left top, #4bb0fd, #e09d00);
         background-image: linear-gradient(to right bottom, #4bb0fd, #e09d00);
         }
         .element-actinoid-transitional-metal .face.back {
         background-color: #b0dcfe;
         }
         .element-blank {
         background: transparent;
         cursor: auto;
         }
         .element-blank.full {
         height: 27.5px;
         clear: both;
         width: 100%;
         }
         /* -------------------
         Media Queries
         -------------------- */
         @media screen and (max-width: 989px) {
         #wrapper {
         width: 90%;
         }
         #wrapper .element-blank {
         display: none;
         }
         #key {
         position: static;
         width: 100%;
         left: 165px;
         z-index: 100;
         margin-top: 20px;
         margin-bottom: 10px;
         }
         #key:after {
         content: '';
         content: ".";
         display: block;
         clear: both;
         visibility: hidden;
         line-height: 0;
         height: 0;
         }
         #key ul {
         width: 28%;
         min-width: 150px;
         margin-right: 5%;
         }
         #key ul:nth-of-type(3) {
         margin-right: 0;
         }
         }
      </style>
   </head>
   <body>
      <div id='wrapper'>
         <h1>The Periodic Table</h1>
         <h3>by Brady Sammons</h3>
         <div id='key'>
            <ul>
               <li><span class='swatch element-metal'></span>Metals</li>
               <li><span class='swatch element-non-metal'></span>Non-Metals</li>
               <li><span class='swatch element-alkali-metal'></span>Alkali Metals</li>
               <li><span class='swatch element-alkali-earth-metal'></span>Alkali Earth Metals</li>
            </ul>
            <ul>
               <li><span class='swatch element-transition-metal'></span>Transitional Metals</li>
               <li><span class='swatch element-lanthoid'></span>Lanthoids</li>
               <li><span class='swatch element-actinoid'></span>Actinoids</li>
            </ul>
            <ul>
               <li><span class='swatch element-metalloid'></span>Metaloids</li>
               <li><span class='swatch element-halogen'></span>Halogens</li>
               <li><span class='swatch element-noble-gas'></span>Noble Gas</li>
            </ul>
         </div>
         <div id='elements'>
            <!-- Row One -->
            <div class='element-non-metal'>
               <div class='chip'>
                  <div class="face front">
                     <i>1</i>
                     <strong>H</strong>
                  </div>
                  <div class='face back'>
                     <p>Hydrogen<span>1.0079</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-noble-gas'>
               <div class='chip'>
                  <div class='face front'>
                     <i>2</i>
                     <strong>He</strong>
                  </div>
                  <div class='face back'>
                     <p>Helium<span>4.0026</span>
                     <p>
                  </div>
               </div>
            </div>
            <!-- //Row One -->
            <!-- Row Two -->	
            <div class='element-alkali-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>3</i>
                     <strong>Li</strong>
                  </div>
                  <div class='face back'>
                     <p>Lithium<span>6.941</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-alkali-earth-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>4</i>
                     <strong>Be</strong>
                  </div>
                  <div class='face back'>
                     <p>Beryllium<span>6.941</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-metalloid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>5</i>
                     <strong>B</strong>
                  </div>
                  <div class='face back'>
                     <p>Baron<span>10.811</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-non-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>6</i>
                     <strong>C</strong>
                  </div>
                  <div class='face back'>
                     <p>Carbon<span>12.0107</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-non-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>7</i>
                     <strong>N</strong>
                  </div>
                  <div class='face back'>
                     <p>Nitrogen<span>14.0067</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-non-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>8</i>
                     <strong>O</strong>
                  </div>
                  <div class='face back'>
                     <p>Oxygen<span>15.9994</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-halogen'>
               <div class='chip'>
                  <div class='face front'>
                     <i>9</i>
                     <strong>F</strong>
                  </div>
                  <div class='face back'>
                     <p>Fluorine<span>18.998</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-noble-gas'>
               <div class='chip'>
                  <div class='face front'>
                     <i>10</i>
                     <strong>Ne</strong>
                  </div>
                  <div class='face back'>
                     <p>Neon<span>20.1797</span>
                     <p>
                  </div>
               </div>
            </div>
            <!-- //Row Two -->
            <!-- Row Three -->	
            <div class='element-alkali-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>11</i>
                     <strong>Na</strong>
                  </div>
                  <div class='face back'>
                     <p>Sodium<span>6.941</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-alkali-earth-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>12</i>
                     <strong>Mg</strong>
                  </div>
                  <div class='face back'>
                     <p>Magnesium<span>24.3050</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>13</i>
                     <strong>Al</strong>
                  </div>
                  <div class='face back'>
                     <p>Aluminum<span>26.981</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-metalloid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>14</i>
                     <strong>Si</strong>
                  </div>
                  <div class='face back'>
                     <p>Silicon<span>28.855</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-non-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>15</i>
                     <strong>P</strong>
                  </div>
                  <div class='face back'>
                     <p>phosphorus<span>30.973</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-non-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>16</i>
                     <strong>S</strong>
                  </div>
                  <div class='face back'>
                     <p>Sulfur<span>32.065</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-halogen'>
               <div class='chip'>
                  <div class='face front'>
                     <i>17</i>
                     <strong>Cl</strong>
                  </div>
                  <div class='face back'>
                     <p>Chlorine<span>35.453</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-noble-gas'>
               <div class='chip'>
                  <div class='face front'>
                     <i>18</i>
                     <strong>Ar</strong>
                  </div>
                  <div class='face back'>
                     <p>Argon<span>39.948</span>
                     <p>
                  </div>
               </div>
            </div>
            <!-- //Row Three -->
            <!-- Row Four -->	
            <div class='element-alkali-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>19</i>
                     <strong>K</strong>
                  </div>
                  <div class='face back'>
                     <p>Potassium<span>39.0983</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-alkali-earth-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>20</i>
                     <strong>Ca</strong>
                  </div>
                  <div class='face back'>
                     <p>Calcium<span>40.078</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>21</i>
                     <strong>Sc</strong>
                  </div>
                  <div class='face back'>
                     <p>Scandium<span>44.955</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>22</i>
                     <strong>Ti</strong>
                  </div>
                  <div class='face back'>
                     <p>Titanium<span>47.861</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>23</i>
                     <strong>V</strong>
                  </div>
                  <div class='face back'>
                     <p>Vanadium<span>50.0915</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>24</i>
                     <strong>Cr</strong>
                  </div>
                  <div class='face back'>
                     <p>Chromium<span>51.9961</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>25</i>
                     <strong>Mn</strong>
                  </div>
                  <div class='face back'>
                     <p>Manganese<span>54.938</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>26</i>
                     <strong>Fe</strong>
                  </div>
                  <div class='face back'>
                     <p>Iron<span>55.845</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>27</i>
                     <strong>Co</strong>
                  </div>
                  <div class='face back'>
                     <p>Cobalt<span>58.933</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>28</i>
                     <strong>Ni</strong>
                  </div>
                  <div class='face back'>
                     <p>Nickel<span>58.6934</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>29</i>
                     <strong>Cu</strong>
                  </div>
                  <div class='face back'>
                     <p>Copper<span>63.546</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>30</i>
                     <strong>Zn</strong>
                  </div>
                  <div class='face back'>
                     <p>Zinc<span>65.409</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>31</i>
                     <strong>Ga</strong>
                  </div>
                  <div class='face back'>
                     <p>Gallium<span>69.732</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-metalloid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>32</i>
                     <strong>Ge</strong>
                  </div>
                  <div class='face back'>
                     <p>Germanium<span>72.64</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-metalloid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>33</i>
                     <strong>As</strong>
                  </div>
                  <div class='face back'>
                     <p>Arsenic<span>74.921</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-non-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>34</i>
                     <strong>Se</strong>
                  </div>
                  <div class='face back'>
                     <p>Selenium<span>78.96</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-halogen'>
               <div class='chip'>
                  <div class='face front'>
                     <i>35</i>
                     <strong>Br</strong>
                  </div>
                  <div class='face back'>
                     <p>Bromine<span>79.904</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-noble-gas'>
               <div class='chip'>
                  <div class='face front'>
                     <i>18</i>
                     <strong>Ar</strong>
                  </div>
                  <div class='face back'>
                     <p>Argon<span>39.948</span>
                     <p>
                  </div>
               </div>
            </div>
            <!-- //Row Four -->
            <!-- Row Five -->	
            <div class='element-alkali-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>37</i>
                     <strong>Rb</strong>
                  </div>
                  <div class='face back'>
                     <p>Rubidium<span>85.4678</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-alkali-earth-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>38</i>
                     <strong>Sr</strong>
                  </div>
                  <div class='face back'>
                     <p>Strontuim<span>87.62</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>39</i>
                     <strong>Y</strong>
                  </div>
                  <div class='face back'>
                     <p>Yttrium<span>88.905</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>40</i>
                     <strong>Zr</strong>
                  </div>
                  <div class='face back'>
                     <p>Zirconium<span>91.224</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>41</i>
                     <strong>Nb</strong>
                  </div>
                  <div class='face back'>
                     <p>Niobium<span>92.224</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>42</i>
                     <strong>Mo</strong>
                  </div>
                  <div class='face back'>
                     <p>Molybdenum<span>51.9961</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>43</i>
                     <strong>Tc</strong>
                  </div>
                  <div class='face back'>
                     <p>Technetium<span>[98]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>44</i>
                     <strong>Ru</strong>
                  </div>
                  <div class='face back'>
                     <p>Ruthenium<span>101.07</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>45</i>
                     <strong>Rh</strong>
                  </div>
                  <div class='face back'>
                     <p>Rhodium<span>102.905</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>46</i>
                     <strong>Pd</strong>
                  </div>
                  <div class='face back'>
                     <p>Palladlum<span>106.42</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>47</i>
                     <strong>Ag</strong>
                  </div>
                  <div class='face back'>
                     <p>Silver<span>107.862</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>48</i>
                     <strong>Cd</strong>
                  </div>
                  <div class='face back'>
                     <p>Cadmium<span>112.411</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>49</i>
                     <strong>In</strong>
                  </div>
                  <div class='face back'>
                     <p>Indium<span>114.813</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>50</i>
                     <strong>Sn</strong>
                  </div>
                  <div class='face back'>
                     <p>Tin<span>118.710</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-metalloid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>51</i>
                     <strong>Sb</strong>
                  </div>
                  <div class='face back'>
                     <p>Antimony<span>121.760</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-metalloid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>52</i>
                     <strong>Te</strong>
                  </div>
                  <div class='face back'>
                     <p>Tellurium<span>127.60</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-halogen'>
               <div class='chip'>
                  <div class='face front'>
                     <i>53</i>
                     <strong>I</strong>
                  </div>
                  <div class='face back'>
                     <p>Iodine<span>126.904</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-noble-gas'>
               <div class='chip'>
                  <div class='face front'>
                     <i>54</i>
                     <strong>Xe</strong>
                  </div>
                  <div class='face back'>
                     <p>Xenon<span>131.293</span>
                     <p>
                  </div>
               </div>
            </div>
            <!-- //Row Five -->
            <!-- Row Six -->	
            <div class='element-alkali-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>55</i>
                     <strong>Cs</strong>
                  </div>
                  <div class='face back'>
                     <p>Caesium<span>132.905</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-alkali-earth-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>56</i>
                     <strong>Ba</strong>
                  </div>
                  <div class='face back'>
                     <p>Barium<span>137.327</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-lanthanoid-transitional-metal'>
               <div class='chip long'>
                  <div class='face front'>
                     <i>57-71</i>
                     <strong>La-Lu</strong>
                  </div>
                  <div class='face back'>
                     <p>Lanthanoids<span></span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>72</i>
                     <strong>Hf</strong>
                  </div>
                  <div class='face back'>
                     <p>Hafnium<span>178.49</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>73</i>
                     <strong>Ta</strong>
                  </div>
                  <div class='face back'>
                     <p>Tantalum<span>180.947</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>74</i>
                     <strong>W</strong>
                  </div>
                  <div class='face back'>
                     <p>Tungsten<span>183.84</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>75</i>
                     <strong>Re</strong>
                  </div>
                  <div class='face back'>
                     <p>Rhenium<span>186.207</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>76</i>
                     <strong>Os</strong>
                  </div>
                  <div class='face back'>
                     <p>Osmium<span>190.23</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>77</i>
                     <strong>Ir</strong>
                  </div>
                  <div class='face back'>
                     <p>Iridium<span>192.217</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>78</i>
                     <strong>Pt</strong>
                  </div>
                  <div class='face back'>
                     <p>Platinum<span>195.084</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>79</i>
                     <strong>Au</strong>
                  </div>
                  <div class='face back'>
                     <p>Gold<span>196.966</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>80</i>
                     <strong>Hg</strong>
                  </div>
                  <div class='face back'>
                     <p>Mercury<span>200.59</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>81</i>
                     <strong>Tl</strong>
                  </div>
                  <div class='face back'>
                     <p>Thallium<span>204.3833</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>82</i>
                     <strong>Pb</strong>
                  </div>
                  <div class='face back'>
                     <p>Lead<span>207.2</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-metalloid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>83</i>
                     <strong>Bi</strong>
                  </div>
                  <div class='face back'>
                     <p>Bismuth<span>208.980</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-metalloid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>84</i>
                     <strong>Po</strong>
                  </div>
                  <div class='face back'>
                     <p>Polonium<span>[209]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-halogen'>
               <div class='chip'>
                  <div class='face front'>
                     <i>85</i>
                     <strong>At</strong>
                  </div>
                  <div class='face back'>
                     <p>Astatine<span>[210]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-noble-gas'>
               <div class='chip'>
                  <div class='face front'>
                     <i>86</i>
                     <strong>Rn</strong>
                  </div>
                  <div class='face back'>
                     <p>Radon<span>[222]</span>
                     <p>
                  </div>
               </div>
            </div>
            <!-- //Row Six -->
            <!-- Row Seven -->	
            <div class='element-alkali-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>87</i>
                     <strong>Fr</strong>
                  </div>
                  <div class='face back'>
                     <p>Francium<span>[223]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-alkali-earth-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>88</i>
                     <strong>Ra</strong>
                  </div>
                  <div class='face back'>
                     <p>Radium<span>[226]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-actinoid-transitional-metal'>
               <div class='chip long'>
                  <div class='face front'>
                     <i>89-103</i>
                     <strong>Ac-Lr</strong>
                  </div>
                  <div class='face back'>
                     <p>Actinoids<span></span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>104</i>
                     <strong>Rf</strong>
                  </div>
                  <div class='face back'>
                     <p>Rutherfordium<span>[261]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>105</i>
                     <strong>Db</strong>
                  </div>
                  <div class='face back'>
                     <p>Dubnium<span>[262]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>106</i>
                     <strong>Sg</strong>
                  </div>
                  <div class='face back'>
                     <p>Seaborgium<span>[266]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>107</i>
                     <strong>Bh</strong>
                  </div>
                  <div class='face back'>
                     <p>Bohrium<span>[264]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>108</i>
                     <strong>Hs</strong>
                  </div>
                  <div class='face back'>
                     <p>Hassium<span>[277]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>109</i>
                     <strong>Mt</strong>
                  </div>
                  <div class='face back'>
                     <p>Meltnerium<span>[268]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>110</i>
                     <strong>Ds</strong>
                  </div>
                  <div class='face back'>
                     <p>Darmstadtium<span>[271]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>111</i>
                     <strong>Rg</strong>
                  </div>
                  <div class='face back'>
                     <p>Roentgenium<span>[272]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-transition-metal'>
               <div class='chip'>
                  <div class='face front'>
                     <i>112</i>
                     <strong>Cn</strong>
                  </div>
                  <div class='face back'>
                     <p>Copernicium<span>[285]</span>
                     <p>
                  </div>
               </div>
            </div>
            <!-- //Row Seven -->
            <div class='element-blank full'></div>
            <!-- Row Eight -->	
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-lanthoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>57</i>
                     <strong>La</strong>
                  </div>
                  <div class='face back'>
                     <p>Lanthanum<span>138.905</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-lanthoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>58</i>
                     <strong>Ce</strong>
                  </div>
                  <div class='face back'>
                     <p>Cerium<span>140.116</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-lanthoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>59</i>
                     <strong>Pr</strong>
                  </div>
                  <div class='face back'>
                     <p>Praseodymium<span>140.907</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-lanthoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>60</i>
                     <strong>Nd</strong>
                  </div>
                  <div class='face back'>
                     <p>Neodymium<span>144.242</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-lanthoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>61</i>
                     <strong>Pm</strong>
                  </div>
                  <div class='face back'>
                     <p>Promethium<span>[145]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-lanthoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>62</i>
                     <strong>Sm</strong>
                  </div>
                  <div class='face back'>
                     <p>Samarium<span>150.36</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-lanthoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>63</i>
                     <strong>Eu</strong>
                  </div>
                  <div class='face back'>
                     <p>Europium<span>151.36</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-lanthoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>64</i>
                     <strong>Gd</strong>
                  </div>
                  <div class='face back'>
                     <p>Gadolinium<span>157.25</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-lanthoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>65</i>
                     <strong>Tb</strong>
                  </div>
                  <div class='face back'>
                     <p>Terbium<span>158.925</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-lanthoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>66</i>
                     <strong>Dy</strong>
                  </div>
                  <div class='face back'>
                     <p>Dysprosium<span>162.500</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-lanthoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>67</i>
                     <strong>Ho</strong>
                  </div>
                  <div class='face back'>
                     <p>Holmium<span>164.930</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-lanthoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>68</i>
                     <strong>Er</strong>
                  </div>
                  <div class='face back'>
                     <p>Erbium<span>167.259</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-lanthoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>69</i>
                     <strong>Tm</strong>
                  </div>
                  <div class='face back'>
                     <p>Thulium<span>168.934</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-lanthoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>70</i>
                     <strong>Yb</strong>
                  </div>
                  <div class='face back'>
                     <p>Ytterbium<span>173.04</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-lanthoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>71</i>
                     <strong>Lu</strong>
                  </div>
                  <div class='face back'>
                     <p>Lutetium<span>174.967</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-blank'></div>
            <!-- //Row Eight -->
            <!-- Row Nine -->	
            <div class='element-blank'></div>
            <div class='element-blank'></div>
            <div class='element-actinoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>89</i>
                     <strong>Ac</strong>
                  </div>
                  <div class='face back'>
                     <p>Actinium<span>[227]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-actinoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>90</i>
                     <strong>Th</strong>
                  </div>
                  <div class='face back'>
                     <p>Thorium<span>232.038</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-actinoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>91</i>
                     <strong>Pa</strong>
                  </div>
                  <div class='face back'>
                     <p>Protactinium<span>232.038</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-actinoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>92</i>
                     <strong>U</strong>
                  </div>
                  <div class='face back'>
                     <p>Uranium<span>238.028</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-actinoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>93</i>
                     <strong>Np</strong>
                  </div>
                  <div class='face back'>
                     <p>Neptunium<span>[237]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-actinoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>94</i>
                     <strong>Pu</strong>
                  </div>
                  <div class='face back'>
                     <p>Plutonium<span>[244]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-actinoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>95</i>
                     <strong>Am</strong>
                  </div>
                  <div class='face back'>
                     <p>Americium<span>[243]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-actinoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>96</i>
                     <strong>Cm</strong>
                  </div>
                  <div class='face back'>
                     <p>Curium<span>[247]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-actinoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>97</i>
                     <strong>Bk</strong>
                  </div>
                  <div class='face back'>
                     <p>Berkelium<span>[247]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-actinoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>98</i>
                     <strong>Cf</strong>
                  </div>
                  <div class='face back'>
                     <p>Californium<span>[251]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-actinoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>99</i>
                     <strong>Es</strong>
                  </div>
                  <div class='face back'>
                     <p>Einsteinium<span>[257]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-actinoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>100</i>
                     <strong>Fm</strong>
                  </div>
                  <div class='face back'>
                     <p>Fermium<span>[257]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-actinoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>101</i>
                     <strong>Md</strong>
                  </div>
                  <div class='face back'>
                     <p>Mendelevium<span>[258]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-actinoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>102</i>
                     <strong>No</strong>
                  </div>
                  <div class='face back'>
                     <p>Nobelium<span>[259]</span>
                     <p>
                  </div>
               </div>
            </div>
            <div class='element-actinoid'>
               <div class='chip'>
                  <div class='face front'>
                     <i>103</i>
                     <strong>Lr</strong>
                  </div>
                  <div class='face back'>
                     <p>Lawrencium<span>[262]</span>
                     <p>
                  </div>
               </div>
            </div>
         </div>
         <!-- //Row Nine -->
      </div>
      <!-- //Elements -->
      </div> <!-- //Wrapper -->
   </body>
</html>