Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

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

Auto-Updating Preview

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

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                .container-fluid
  table
    tr
      td.blank
        p 1
        p 1IA
        p 11A
      
      td.blank(colspan="16")
        h1.main-title Periodic Table of the Elements
      
      td.blank
        p 18
        p VIIIA
        p 8A

    tr
      td.elem.nm
        h4 1
        h1 H
        p 
          | Hydrogen
          br 
          | 1.0079
      
      td.blank
        p 2
        p IIA
        p 2A
      
      td.blank(colspan="10") &nbsp;
      td.blank
        p 13
        p IIIA
        p 3A
      
      td.blank
        p 14
        p IVA
        p 4A
      
      td.blank
        p 15
        p VA
        p 5A
      
      td.blank
        p 16
        p VIA
        p 6A
      
      td.blank
        p 17
        p VIIA
        p 7A
      
      td.elem.ng
        h4 2
        h1 He
        p 
          | Helium
          br 
          | 4.00260

    tr
      td.elem.am
        h4 3
        h1 Li
        p 
          | Lithium
          br 
          | 6.941
      
      td.elem.ae
        h4 4
        h1 Be
        p 
          | Beryllium
          br 
          | 9.01218
      
      td.blank(colspan="10") &nbsp;
      td.elem.sm
        h4 5
        h1 B
        p 
          | Boron
          br 
          | 10.811
      
      td.elem.nm
        h4 6
        h1 C
        p 
          | Carbon
          br 
          | 12.011
      
      td.elem.nm
        h4 7
        h1 N
        p 
          | Nitrogen
          br 
          | 14.00674
      
      td.elem.nm
        h4 8
        h1 O
        p 
          | Oxygen
          br 
          | 15.994
      
      td.elem.hg
        h4 9
        h1 F
        p 
          | Fluorine
          br 
          | 18.998493
      
      td.elem.ng
        h4 10
        h1 Ne
        p 
          | Neon
          br 
          | 20.1797

    tr
      td.elem.am
        h4 11
        h1 Na
        p 
          | Sodium
          br 
          | 22.989768
      
      td.elem.ae
        h4 12
        h1 Mg
        p 
          | Magnesium
          br 
          | 24.305
      
      td.blank
        p 3
        p IIIB
        p 3B
      
      td.blank
        p 4
        p IVB
        p 4B
      
      td.blank
        p 5
        p VB
        p 5B
      
      td.blank
        p 6
        p VIB
        p 6B
      
      td.blank
        p 7
        p VIIB
        p 7B
      
      td.blank.joint
        p 8
        p(style="text-align:right") ┌─────
        p 
          i.fa.fa-caret-down &nbsp;
      
      td.blank
        p.nine 9
        p.mid ─── VIII ───
        p.eight 8
      
      td.blank.joint
        p 10
        p(style="text-align:left") ─────┐
        p.right
          i.fa.fa-caret-down &nbsp;
      
      td.blank
        p 11
        p IB
        p 1B
      
      td.blank
        p 12
        p IIB
        p 2B
      
      td.elem.bm
        h4 13
        h1 Al
        p 
          | Aluminium
          br 
          | 26.981539
      
      td.elem.sm
        h4 14
        h1 Si
        p 
          | Silicon
          br 
          | 28.0855
      
      td.elem.nm
        h4 15
        h1 P
        p 
          | Phosphorus
          br 
          | 30.973762
      
      td.elem.nm
        h4 16
        h1 S
        p 
          | Sulfur
          br 
          | 32.066
      
      td.elem.hg
        h4 17
        h1 Cl
        p 
          | Chlorine
          br 
          | 35.4527
      
      td.elem.ng
        h4 18
        h1 Ar
        p 
          | Argon
          br 
          | 39.948

    tr
      td.elem.am
        h4 19
        h1 K
        p 
          | Potassium
          br 
          | 39.0983
      
      td.elem.ae
        h4 20
        h1 Ca
        p 
          | Calcium
          br 
          | 40.078
      
      td.elem.tm
        h4 21
        h1 Sc
        p 
          | Scandium
          br 
          | 44.95591
      
      td.elem.tm
        h4 22
        h1 Ti
        p 
          | Titanium
          br 
          | 47.88
      
      td.elem.tm
        h4 23
        h1 V
        p 
          | Vanadium
          br 
          | 51.9961
      
      td.elem.tm
        h4 24
        h1 Cr
        p 
          | Chromium
          br 
          | 51.9961
      
      td.elem.tm
        h4 25
        h1 Mn
        p 
          | Manganese
          br 
          | 54.938
      
      td.elem.tm
        h4 26
        h1 Fe
        p 
          | Iron
          br 
          | 55.847
      
      td.elem.tm
        h4 27
        h1 Co
        p 
          | Cobalt
          br 
          | 58.9332
      
      td.elem.tm
        h4 28
        h1 Ni
        p 
          | Nickel
          br 
          | 58.6934
      
      td.elem.tm
        h4 29
        h1 Cu
        p 
          | Copper
          br 
          | 63.546
      
      td.elem.tm
        h4 30
        h1 Zn
        p 
          | Zinc
          br 
          | 65.39
      
      td.elem.bm
        h4 31
        h1 Ga
        p 
          | Gallium
          br 
          | 69.732
      
      td.elem.sm
        h4 32
        h1 Ge
        p 
          | Germanium
          br 
          | 72.64
      
      td.elem.sm
        h4 33
        h1 As
        p 
          | Arsenic
          br 
          | 74.92159
      
      td.elem.nm
        h4 34
        h1 Se
        p 
          | Selenium
          br 
          | 78.96
      
      td.elem.hg
        h4 35
        h1 Br
        p 
          | Bromine
          br 
          | 79.904
      
      td.elem.ng
        h4 36
        h1 Kr
        p 
          | Krypton
          br 
          | 83.80

    tr
      td.elem.am
        h4 37
        h1 Rb
        p 
          | Rubidium
          br 
          | 85.4678
      
      td.elem.ae
        h4 38
        h1 Sr
        p 
          | Strontium
          br 
          | 87.62
      
      td.elem.tm
        h4 39
        h1 Y
        p 
          | Yttrium
          br 
          | 88.90585
      
      td.elem.tm
        h4 40
        h1 Zr
        p 
          | Zirconium
          br 
          | 91.224
      
      td.elem.tm
        h4 41
        h1 Nb
        p 
          | Niobium
          br 
          | 92.90638
      
      td.elem.tm
        h4 42
        h1 Mo
        p 
          | Molybdenum
          br 
          | 95.94
      
      td.elem.tm
        h4 43
        h1 Tc
        p 
          | Technetium
          br 
          | 98.9072
      
      td.elem.tm
        h4 44
        h1 Ru
        p 
          | Ruthenium
          br 
          | 101.07
      
      td.elem.tm
        h4 45
        h1 Rh
        p 
          | Rhodium
          br 
          | 102.9055
      
      td.elem.tm
        h4 46
        h1 Pd
        p 
          | Palladium
          br 
          | 106.42
      
      td.elem.tm
        h4 47
        h1 Ag
        p 
          | Silver
          br 
          | 107.8682
      
      td.elem.tm
        h4 48
        h1 Cd
        p 
          | Cadmium
          br 
          | 112.411
      
      td.elem.bm
        h4 49
        h1 In
        p 
          | Indium
          br 
          | 114.818
      
      td.elem.bm
        h4 50
        h1 Sn
        p 
          | Tin
          br 
          | 118.71
      
      td.elem.sm
        h4 51
        h1 Sb
        p 
          | Antimony
          br 
          | 121.760
      
      td.elem.sm
        h4 52
        h1 Te
        p 
          | Tellurium
          br 
          | 127.6
      
      td.elem.hg
        h4 53
        h1 I
        p 
          | Iodine
          br 
          | 126.90447
      
      td.elem.ng
        h4 54
        h1 Xe
        p 
          | Xenon
          br 
          | 131.29

    tr
      td.elem.am
        h4 55
        h1 Cs
        p 
          | Cesium
          br 
          | 132.90543
      
      td.elem.ae
        h4 56
        h1 Ba
        p 
          | Barium
          br 
          | 137.327
      
      td.elem.sm
        h4 55-71
        h1 &nbsp;
        p 
          | &nbsp;
          br 
          | &nbsp;
      
      td.elem.tm
        h4 72
        h1 Hf
        p 
          | Hafnium
          br 
          | 178.49
      
      td.elem.tm
        h4 73
        h1 Ta
        p 
          | Tantalum
          br 
          | 180.9479
      
      td.elem.tm
        h4 74
        h1 W
        p 
          | Tungsten
          br 
          | 183.85
      
      td.elem.tm
        h4 75
        h1 Re
        p 
          | Rhenium
          br 
          | 186.207
      
      td.elem.tm
        h4 76
        h1 Os
        p 
          | Osmium
          br 
          | 190.23
      
      td.elem.tm
        h4 77
        h1 Ir
        p 
          | Iridium
          br 
          | 192.22
      
      td.elem.tm
        h4 78
        h1 Pt
        p 
          | Platinum
          br 
          | 195.08
      
      td.elem.tm
        h4 79
        h1 Au
        p 
          | Gold
          br 
          | 196.9665
      
      td.elem.tm
        h4 80
        h1 Hg
        p 
          | Mercury
          br 
          | 200.59
      
      td.elem.bm
        h4 81
        h1 Tl
        p 
          | Thallium
          br 
          | 204.3833
      
      td.elem.bm
        h4 82
        h1 Pb
        p 
          | Lead
          br 
          | 207.2
      
      td.elem.bm
        h4 83
        h1 Bi
        p 
          | Bismuth
          br 
          | 208.98037
      
      td.elem.sm
        h4 84
        h1 Po
        p 
          | Polonium
          br 
          | [208.9824]
      
      td.elem.hg
        h4 85
        h1 At
        p 
          | Astatine
          br 
          | 209.9871
      
      td.elem.ng
        h4 86
        h1 Rn
        p 
          | Radon
          br 
          | 222.0176

    tr
      td.elem.am
        h4 87
        h1 Fr
        p 
          | Francium
          br 
          | 223.0197
      
      td.elem.ae
        h4 88
        h1 Ra
        p 
          | Radium
          br 
          | 226.0254
      
      td.elem.an
        h4 89-103
        h1 &nbsp;
        p 
          | &nbsp;
          br 
          | &nbsp;
      
      td.elem.tm
        h4 104
        h1 Rf
        p 
          | Rutherfordium
          br 
          | [261]
      
      td.elem.tm
        h4 105
        h1 Db
        p 
          | Dubnium
          br 
          | [262]
      
      td.elem.tm
        h4 106
        h1 Sg
        p 
          | Seaborgium
          br 
          | [266]
      
      td.elem.tm
        h4 107
        h1 Bh
        p 
          | Bohrium
          br 
          | [264]
      
      td.elem.tm
        h4 108
        h1 Hs
        p 
          | Hassium
          br 
          | [269]
      
      td.elem.tm
        h4 109
        h1 Mt
        p 
          | Meitnerium
          br 
          | [268]
      
      td.elem.tm
        h4 110
        h1 Ds
        p 
          | Darmstadium
          br 
          | [269]
      
      td.elem.tm
        h4 111
        h1 Rg
        p 
          | Roentgenium
          br 
          | [272]
      
      td.elem.tm
        h4 112
        h1 Cn
        p 
          | Copernicium
          br 
          | [277]
      
      td.elem.bm
        h4 113
        h1 Uut
        p 
          | Ununtrium
          br 
          | unknown
      
      td.elem.bm
        h4 114
        h1 Uuq
        p 
          | Ununquadium
          br 
          | [289]
      
      td.elem.bm
        h4 115
        h1 Uup
        p 
          | Ununpentium
          br 
          | unknown
      
      td.elem.bm
        h4 116
        h1 Uuh
        p 
          | Ununhexium
          br 
          | [298]
      
      td.elem.hg
        h4 117
        h1 Uus
        p 
          | Ununseptium
          br 
          | unknown
      
      td.elem.ng
        h4 118
        h1 Uuo
        p 
          | Ununoctium
          br 
          | unknown

.container-fluid
  table.expand
    tr
      td.blank
        p.title
          | Lanthanide
          br 
          | Series
      
      td.elem.ln
        h4 57
        h1 La
        p 
          | Lanthanum
          br 
          | 138.9055
      
      td.elem.ln
        h4 58
        h1 Ce
        p 
          | Cerium
          br 
          | 140.115
      
      td.elem.ln
        h4 59
        h1 Pr
        p 
          | Praseodymium
          br 
          | 140.90765
      
      td.elem.ln
        h4 60
        h1 Nd
        p 
          | Neodymium
          br 
          | 144.24
      
      td.elem.ln
        h4 61
        h1 Pm
        p 
          | Promethium
          br 
          | 144.9127
      
      td.elem.ln
        h4 62
        h1 Sm
        p 
          | Samarium
          br 
          | 150.36
      
      td.elem.ln
        h4 63
        h1 Eu
        p 
          | Europium
          br 
          | 151.9655
      
      td.elem.ln
        h4 64
        h1 Gd
        p 
          | Gadolinium
          br 
          | 157.25
      
      td.elem.ln
        h4 65
        h1 Tb
        p 
          | Terbium
          br 
          | 158.92534
      
      td.elem.ln
        h4 66
        h1 Dy
        p 
          | Dysprosium
          br 
          | 162.50
      
      td.elem.ln
        h4 67
        h1 Ho
        p 
          | Holmium
          br 
          | 164.93032
      
      td.elem.ln
        h4 68
        h1 Er
        p 
          | Erbium
          br 
          | 167.26
      
      td.elem.ln
        h4 69
        h1 Tm
        p 
          | Thulium
          br 
          | 168.93421
      
      td.elem.ln
        h4 70
        h1 Yb
        p 
          | Ytterbium
          br 
          | 173.04
      
      td.elem.ln
        h4 71
        h1 Lu
        p 
          | Lutetium
          br 
          | 174.967

    tr
      td.blank
        p.title
          | Actinide
          br 
          | Series
      
      td.elem.an
        h4 89
        h1 Ac
        p 
          | Actinium
          br 
          | 227.0278
      
      td.elem.an
        h4 90
        h1 Th
        p 
          | Thorium
          br 
          | 232.0381
      
      td.elem.an
        h4 91
        h1 Pa
        p 
          | Protactinium
          br 
          | 231.03588
      
      td.elem.an
        h4 92
        h1 U
        p 
          | Uranium
          br 
          | 238.0289
      
      td.elem.an
        h4 93
        h1 Np
        p 
          | Neptunium
          br 
          | 237.0482
      
      td.elem.an
        h4 94
        h1 Pu
        p 
          | Plutonium
          br 
          | 244.0642
      
      td.elem.an
        h4 95
        h1 Am
        p 
          | Americium
          br 
          | 243.0614
      
      td.elem.an
        h4 96
        h1 Cm
        p 
          | Curium
          br 
          | 247.0703
      
      td.elem.an
        h4 97
        h1 Bk
        p 
          | Berkelium
          br 
          | 247.0703
      
      td.elem.an
        h4 98
        h1 Cf
        p 
          | Californium
          br 
          | 251.0796
      
      td.elem.an
        h4 99
        h1 Es
        p 
          | Einsteinium
          br 
          | [254]
      
      td.elem.an
        h4 100
        h1 Fm
        p 
          | Fermium
          br 
          | 257.0951
      
      td.elem.an
        h4 101
        h1 Md
        p 
          | Mendelevium
          br 
          | 258.1
      
      td.elem.an
        h4 102
        h1 No
        p 
          | Nobelium
          br 
          | 259.1009
      
      td.elem.an
        h4 103
        h1 Lr
        p 
          | Lawrencium
          br 
          | [262]

.container-fluid
  table.legend
    tr
      td.elem.am
        p 
          | Alkali
          br 
          | Metal
      
      td.elem.ae
        p 
          | Alkaline
          br 
          | Earth
      
      td.elem.tm
        p 
          | Transition
          br 
          | Metal
      
      td.elem.bm
        p 
          | Basic
          br 
          | Metal
      
      td.elem.sm
        p Semimetals
      
      td.elem.nm
        p Nonmetals
      
      td.elem.hg
        p Halogens
      
      td.elem.ng
        p 
          | Noble
          br 
          | Gas
      
      td.elem.ln
        p Lanthanides
      
      td.elem.an
        p Actinides

span#about
  a.fa.fa-question-circle.fa-2x(href="http://odran037.io" target="_blank") &nbsp;
              
            
!

CSS

              
                * {
  box-sizing: border-box;
}
body {
  margin: 50px 0 0 0;
  padding: 0;
  width: 100vw;
  font-family: 'Arial';
  background: #000;
}
.container-fluid {
  margin-bottom: 50px;
  max-width: 3000px;
}
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
}
td {
  border: 1px solid black;
  width: 95px !important;
  height: 95px !important;
  text-align: center;
  p {
    font-weight: 600;
    line-height: 3px;
  }
}
h1.main-title {
  letter-spacing: 3px;
  word-spacing: 3px;
  font-size: 3.5em;
  font-weight: bolder;
  color: #777;
}
.elem {
  h4 {
    position: relative;
    top: -9px;
    left: 3px;
    font-size: 1.0em;
    text-align: left;
  }
  h1 {
    font-weight: 600;
    font-size: 2.0em;
    line-height: 10px;
  }
  p {
    font-size: 0.9em;
    font-weight: 600 !important;
    line-height: 15px;
  }
}
.expand {
  width: 90%;
  margin: 0 auto;
  .title {
    line-height: 17px;
  }
}
.nine {
  padding-top: 5px;
}
.eight {
  padding-right: 0;
  padding-left: 0;
  font-weight: 600 !important;
}
.joint {
  padding-top: 14px;
}
p.title {
  line-height: 20px;
}
table.legend {
  width: 70%;
  margin: 0 auto;
  border-spacing: 15px;
  p {
    padding-top: 10px;
    line-height: 20px;
    font-size: 1.0em;
  }
}
.right {
  text-align: right;
  padding-right: 41px;
}
.blank {
  border: 0 !important;
  p {
    line-height: 5px;
    color: #777;
  }
}
.am { /* pink */
  background-color: rgb(242,0,255);
  background-image: linear-gradient(161deg, rgb(252,92,156) 0%, rgb(242,0,255) 100%);
}
.ae { /* purple */
  background-color: rgb(153, 27, 255);
  background-image: linear-gradient(161deg, rgb(254,0,255) 0%, rgb(153, 27, 255) 100%);
}
.tm { /* light blue */
  background-color: rgb(36, 199, 255);
  background-image: linear-gradient(161deg, rgb(105,176,255) 0%, rgb(36, 199, 255) 100%);
}
.bm { /* orange */
  background-color: rgb(255, 164, 30);
  background-image: linear-gradient(161deg, rgb(255,70,24) 0%, rgb(255, 164, 30) 100%);
}
.sm { /* light green */
  background-color: rgb(12, 255, 88);
  background-image: linear-gradient(161deg, rgb(198,255,204) 0%, rgb(12, 255, 88) 100%);
}
.nm { /* blue */
  background-color: rgb(35, 135, 255);
  background-image: linear-gradient(161deg, rgb(89,197,255) 0%, rgb(35, 135, 255) 100%);
}
.hg { /* yellow */
  background-color: rgb(255, 229, 0);
  background-image: linear-gradient(161deg, rgb(255,248,83) 0%, rgb(255, 229, 0) 100%);
}
.ng { /* dark yellow */
  background-color: rgb(255, 182, 0);
  background-image: linear-gradient(161deg, rgb(255,218,136) 0%, rgb(255, 182, 0) 100%);
}
.ln { /* lime green */
  background-color: rgb(182, 255, 0);
  background-image: linear-gradient(161deg, rgb(210,255,148) 0%, rgb(182, 255, 0) 100%);
}
.an { /* red */
  background-color: rgb(255, 0, 0);
  background-image: linear-gradient(161deg, rgb(255,77,173) 0%, rgb(255, 0, 0) 100%);
}

.highlight {
  background: #000000 !important;
  color: #00ff00 !important;
  border: 1px solid #777;
}

.hover {
  background: #333333 !important;
  color: #ffffff !important;
}
#about {
  position: absolute;
  top: 10px;
  right: 10px;
  a {
    text-decoration: none;
  }
}
              
            
!

JS

              
                $(document).ready(function() {
  $('td.elem').mouseover(function() {
    $(this).addClass('hover');
  }).mouseout(function() {
    $(this).removeClass('hover');
  });
  $('table').on('click', 'td.elem', function() {
    var elementClass = '.' + $(this)[0].className.split(' ')[1];
    $(elementClass).toggleClass('highlight');
  });
});
              
            
!
999px

Console