harunpehlivan
8/8/2018 - 11:06 AM
The Periodic Table Of Elements
The Periodic Table Of Elements
The Periodic Table Of Elements
The periodic table of elements in lovely html and CSS, with some fun CSS3 transitions
A Pen by HARUN PEHLİVAN on CodePen.
@import "compass/css3";
/* -------------------
*Author: Brady Sammons
*Version: 1.0.0
*Website: bradysammons.com
-------------------- */
@import "compass/reset";
@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Tauri);
/* -------------------
Variables
-------------------- */
// Element Colors
$metal:#939393;
$alkali-metal:#98AD2C;
$alkali-earth-metal:#44B981;
$transition-metal:#4BB0FD;
$lanthoid:#D3C100;
$actinoid:#E09D00;
$metalloid:#D33636;
//gradients
@mixin metal-grad(){
@include background-image(linear-gradient(left top, lighten($metal, 20%), darken($metal,5%)));
}
@mixin alkali-metal-grad(){
@include background-image(linear-gradient(left top, lighten($alkali-metal, 20%), darken($alkali-metal,5%)));
}
@mixin alkali-earth-metal-grad(){
@include background-image(linear-gradient(left top, lighten($alkali-earth-metal, 20%), darken($alkali-earth-metal,5%)));
}
@mixin transition-metal-grad(){
@include background-image(linear-gradient(left top, lighten($transition-metal, 20%), darken($transition-metal,5%)));
}
@mixin lanthoid-grad(){
@include background-image(linear-gradient(left top, lighten($lanthoid, 20%), darken($lanthoid,5%)));
}
@mixin actinoid-grad(){
@include background-image(linear-gradient(left top, lighten($actinoid, 20%), darken($actinoid,5%)));
}
@mixin metalloid-grad(){
@include background-image(linear-gradient(left top, lighten($metalloid, 20%), darken($metalloid,5%)));
}
@mixin non-metal-grad(){
@include background-image(linear-gradient(left top, lighten($non-metal, 20%), darken($non-metal,5%)));
}
@mixin halogen-grad(){
@include background-image(linear-gradient(left top, lighten($halogen, 20%), darken($halogen,5%)));
}
@mixin noble-gas-grad(){
@include background-image(linear-gradient(left top, lighten($noble-gas, 20%), darken($noble-gas,5%)));
}
@mixin clearfix(){
&:after{
content:'';
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
}
//non-metals
$non-metal:#6D828A;
$halogen: #A1823B;
$noble-gas:#6767BA;
$blank:transparent;
$element-size:55px;
html{
min-height: 100%;
//height: 100%;
@include background-image(linear-gradient(#555, #222));
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;
ul{
float: left;
margin-right: 40px;
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;
@include box-sizing(border-box);
width: $element-size;
height: $element-size;
font-size: 12px;
display:block;
float: left;
@include perspective(1000);
.chip{
width: 100%;
height: 100%;
@include transform-style(preserve-3d);
@include transition-property(all);
@include transition-duration(.5s);
@include transition-timing-function(ease-out);
&.long{
.front{
strong{
margin-top: 8px;
font-size:1.38em;
}
}
.back{
p{
margin-top: 20px;
}
}
}
}
&:hover .chip{
@include rotateY(180deg);
}
.face{
position: absolute;
width: 100%;
height: 100%;
@include backface-visibility(hidden);
&.front, &.back{
@include box-sizing(border-box);
}
&.front{
padding: 4px;
i{
display: block;
font-size: .8em;
}
strong{
font-size:2.2em;
display: block;
font-weight: bold;
text-shadow:0 1px 0 rgba(255,255,255,.2);
text-align: center;
margin-top: 4px;
background: rgba(0,0,0,.1);
}
@include box-shadow(
inset 0 1px 0 rgba(255,255,255,.4),
inset 0 -1px 0 rgba(0,0,0,.3),
inset 1px 0 0 rgba(255,255,255,.2),
inset -1px 0 0 rgba(0,0,0,.15));
}
&.back{
display: block;
@include rotateY(180deg);
@include box-sizing(border-box);
background: #eee;
color: #111;
//padding: 5px;
p{
margin-top: 16px;
line-height: 1.2;
text-align: center;
font-size:.7em;
font-weight: 600;
span{
display: block;
}
}
}
}
}
/* -------------------
Elements
-------------------- */
span.swatch{
&.element-metal{
@include metal-grad();
}
&.element-non-metal{
@include non-metal-grad();
}
&.element-alkali-metal{
@include alkali-metal-grad();
}
&.element-alkali-earth-metal{
@include alkali-earth-metal-grad();
}
&.element-transition-metal{
@include transition-metal-grad();
}
&.element-lanthoid{
@include lanthoid-grad();
}
&.element-actinoid{
@include actinoid-grad();
}
&.element-metalloid{
@include metalloid-grad();
}
&.element-halogen{
@include halogen-grad();
}
&.element-noble-gas{
@include noble-gas-grad();
}
}
.element-metal{
.front{
color: darken($metal,40%);
@include metal-grad();
}
.face.back{
background-color: lighten($metal,20%);
}
}
.element-alkali-metal{
.front{
color: darken($alkali-metal,26%);
@include alkali-metal-grad();
}
.face.back{
background-color: lighten($alkali-metal,30%);
}
}
.element-alkali-earth-metal{
.front{
color: darken($alkali-earth-metal,36%);
@include alkali-earth-metal-grad();
}
.face.back{
background-color: lighten($alkali-earth-metal,30%);
}
}
.element-transition-metal{
.front{
color: darken($transition-metal,50%);
@include transition-metal-grad();
}
.face.back{
background-color: lighten($transition-metal,20%);
}
}
.element-lanthoid{
.front{
color: darken($lanthoid,28%);
@include lanthoid-grad();
}
.face.back{
background-color: lighten($lanthoid,20%);
}
}
.element-actinoid{
.front{
color: darken($actinoid,40%);
@include actinoid-grad();
}
.face.back{
background-color: lighten($actinoid,20%);
}
}
.element-metalloid{
.front{
color: darken($metalloid,40%);
@include metalloid-grad();
}
.face.back{
background-color: lighten($metalloid,20%);
}
}
.element-non-metal{
.front{
color: darken($non-metal,40%);
@include non-metal-grad();
}
.face.back{
background-color: lighten($non-metal,27%);
}
}
.element-halogen{
.front{
color: darken($halogen,40%);
@include halogen-grad();
}
.face.back{
background-color: lighten($halogen,27%);
}
}
.element-noble-gas{
.front{
color: darken($noble-gas,40%);
@include noble-gas-grad();
}
.face.back{
background-color: lighten($noble-gas,20%);
}
}
.element-lanthanoid-transitional-metal{
.front{
color: darken($noble-gas,40%);
@include background-image(linear-gradient(left top, $transition-metal, $lanthoid));
}
.face.back{
background-color: lighten($transition-metal,20%);
}
}
.element-actinoid-transitional-metal{
.front{
color: darken($noble-gas,40%);
@include background-image(linear-gradient(left top, $transition-metal, $actinoid));
}
.face.back{
background-color: lighten($transition-metal,20%);
}
}
.element-blank{
background: $blank;
//background: red;
cursor: auto;
//@include box-shadow(none);
&.full{
height: $element-size /2;
clear: both;
width: 100%;
}
}
/* -------------------
Media Queries
-------------------- */
@media screen and (max-width:989px) {
#wrapper{
width: 90%;
.element-blank{
display: none;
}
}
#key{
position: static;
width: 100%;
left:165px;
z-index: 100;
margin-top:20px;
@include clearfix();
margin-bottom: 10px;
ul{
width: 28%;
min-width:150px;
margin-right: 5%;
&:nth-of-type(3){
margin-right: 0;
}
}
}
}/*
The Periodic Table of Elements by
Brady Sammons
!!!!!!!!!!!!!!!!!!!!***
Feel Free to use this for any educational uses it may provide!!!
!!!!!!!!!!!!!!!!!!!!***
**!!open your browser window larger than 990px to see it as intended
*/<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 -->