<div class="wrapper">
  <h1 class="title">Periodic table of element with CSS Grid</h1>
  <div class="periodic-table">
    <!-- Alkali metal -->
    <div class="periodic-table__element periodic-table__element--alkali-metal li">
      <div class="name">Lithium</div>
      <div class="atomic-number">3</div>
      <div class="symbol">Li</div>
      <div class="atomic-weight">6.94</div>
    </div>
    <div class="periodic-table__element periodic-table__element--alkali-metal na">
      <div class="name">Sodium</div>
      <div class="atomic-number">11</div>
      <div class="symbol">Na</div>
      <div class="atomic-weight">22.990</div>
    </div>
    <div class="periodic-table__element periodic-table__element--alkali-metal k">
      <div class="name">Potassium</div>
      <div class="atomic-number">19</div>
      <div class="symbol">K</div>
      <div class="atomic-weight">39.098</div>
    </div>
    <div class="periodic-table__element periodic-table__element--alkali-metal rb">
      <div class="name">Rubidium</div>
      <div class="atomic-number">37</div>
      <div class="symbol">Rb</div>
      <div class="atomic-weight">85.468</div>
    </div>
    <div class="periodic-table__element periodic-table__element--alkali-metal cs">
      <div class="name">Caesium</div>
      <div class="atomic-number">55</div>
      <div class="symbol">Cs</div>
      <div class="atomic-weight">132.91</div>
    </div>
    <div class="periodic-table__element periodic-table__element--alkali-metal fr">
      <div class="name">Francium</div>
      <div class="atomic-number">87</div>
      <div class="symbol">Fr</div>
      <div class="atomic-weight">[223]</div>
    </div>
    <!-- Alkaline earth metal -->
    <div class="periodic-table__element periodic-table__element--alkaline-earth-metal be">
      <div class="name">Berilium</div>
      <div class="atomic-number">4</div>
      <div class="symbol">Be</div>
      <div class="atomic-weight">9.0122</div>
    </div>
    <div class="periodic-table__element periodic-table__element--alkaline-earth-metal mg">
      <div class="name">Magnesium</div>
      <div class="atomic-number">12</div>
      <div class="symbol">Mg</div>
      <div class="atomic-weight">24.305</div>
    </div>
    <div class="periodic-table__element periodic-table__element--alkaline-earth-metal ca">
      <div class="name">Calcium</div>
      <div class="atomic-number">20</div>
      <div class="symbol">Ca</div>
      <div class="atomic-weight">40.078</div>
    </div>
    <div class="periodic-table__element periodic-table__element--alkaline-earth-metal sr">
      <div class="name">Stronium</div>
      <div class="atomic-number">38</div>
      <div class="symbol">Sr</div>
      <div class="atomic-weight">87.62</div>
    </div>
    <div class="periodic-table__element periodic-table__element--alkaline-earth-metal ba">
      <div class="name">Barium</div>
      <div class="atomic-number">56</div>
      <div class="symbol">Ba</div>
      <div class="atomic-weight">137.33</div>
    </div>
    <div class="periodic-table__element periodic-table__element--alkaline-earth-metal ra">
      <div class="name">Radium</div>
      <div class="atomic-number">88</div>
      <div class="symbol">Ra</div>
      <div class="atomic-weight">[226]</div>
    </div>
    <!-- Transition metal -->
    <div class="periodic-table__element periodic-table__element--transition-metal sc">
      <div class="name">Scandium</div>
      <div class="atomic-number">21</div>
      <div class="symbol">Sc</div>
      <div class="atomic-weight">44.956</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal y">
      <div class="name">Yttrium</div>
      <div class="atomic-number">39</div>
      <div class="symbol">Y</div>
      <div class="atomic-weight">88.906</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal ti">
      <div class="name">Titanium</div>
      <div class="atomic-number">22</div>
      <div class="symbol">Ti</div>
      <div class="atomic-weight">47.867</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal zr">
      <div class="name">Zirconium</div>
      <div class="atomic-number">40</div>
      <div class="symbol">Zr</div>
      <div class="atomic-weight">91.224</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal hf">
      <div class="name">Hafnium</div>
      <div class="atomic-number">72</div>
      <div class="symbol">Hf</div>
      <div class="atomic-weight">178.49</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal rf">
      <div class="name">Rutherfordium</div>
      <div class="atomic-number">104</div>
      <div class="symbol">Rf</div>
      <div class="atomic-weight">[267]</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal v">
      <div class="name">Vanadium</div>
      <div class="atomic-number">23</div>
      <div class="symbol">V</div>
      <div class="atomic-weight">50.942</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal nb">
      <div class="name">Niobium</div>
      <div class="atomic-number">41</div>
      <div class="symbol">Nb</div>
      <div class="atomic-weight">92.906</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal ta">
      <div class="name">Tantalum</div>
      <div class="atomic-number">73</div>
      <div class="symbol">Ta</div>
      <div class="atomic-weight">180.95</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal db">
      <div class="name">Dubnium</div>
      <div class="atomic-number">105</div>
      <div class="symbol">Db</div>
      <div class="atomic-weight">[268]</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal cr">
      <div class="name">Chromium</div>
      <div class="atomic-number">24</div>
      <div class="symbol">Cr</div>
      <div class="atomic-weight">51.996</div>
    </div>

    <div class="periodic-table__element periodic-table__element--transition-metal mo">
      <div class="name">Molybdenum</div>
      <div class="atomic-number">42</div>
      <div class="symbol">Mo</div>
      <div class="atomic-weight">95.95</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal w">
      <div class="name">Tungsten</div>
      <div class="atomic-number">74</div>
      <div class="symbol">W</div>
      <div class="atomic-weight">183.84</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal sg">
      <div class="name">Seaborgium</div>
      <div class="atomic-number">106</div>
      <div class="symbol">Sg</div>
      <div class="atomic-weight">[268]</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal mn">
      <div class="name">Manganese</div>
      <div class="atomic-number">25</div>
      <div class="symbol">Mn</div>
      <div class="atomic-weight">54.938</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal tc">
      <div class="name">Technetium</div>
      <div class="atomic-number">43</div>
      <div class="symbol">Tc</div>
      <div class="atomic-weight">[98]</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal re">
      <div class="name">Rhenium</div>
      <div class="atomic-number">75</div>
      <div class="symbol">Re</div>
      <div class="atomic-weight">186.21</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal bh">
      <div class="name">Bohrium</div>
      <div class="atomic-number">107</div>
      <div class="symbol">Bh</div>
      <div class="atomic-weight">[270]</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal fe">
      <div class="name">Iron</div>
      <div class="atomic-number">26</div>
      <div class="symbol">Fe</div>
      <div class="atomic-weight">55.845</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal ru">
      <div class="name">Ruthenium</div>
      <div class="atomic-number">44</div>
      <div class="symbol">Ru</div>
      <div class="atomic-weight">101.07</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal os">
      <div class="name">Osmium</div>
      <div class="atomic-number">76</div>
      <div class="symbol">Os</div>
      <div class="atomic-weight">190.23</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal hs">
      <div class="name">Hassium</div>
      <div class="atomic-number">108</div>
      <div class="symbol">Hs</div>
      <div class="atomic-weight">[270]</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal co">
      <div class="name">Cobalt</div>
      <div class="atomic-number">27</div>
      <div class="symbol">Co</div>
      <div class="atomic-weight">58.933</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal rh">
      <div class="name">Rhodium</div>
      <div class="atomic-number">45</div>
      <div class="symbol">Rh</div>
      <div class="atomic-weight">102.91</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal ir">
      <div class="name">Iridium</div>
      <div class="atomic-number">77</div>
      <div class="symbol">Ir</div>
      <div class="atomic-weight">192.22</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal ni">
      <div class="name">Nickel</div>
      <div class="atomic-number">28</div>
      <div class="symbol">Ni</div>
      <div class="atomic-weight">58.693</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal pd">
      <div class="name">Palladium</div>
      <div class="atomic-number">46</div>
      <div class="symbol">Pd</div>
      <div class="atomic-weight">106.42</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal pt">
      <div class="name">Platinum</div>
      <div class="atomic-number">78</div>
      <div class="symbol">Pt</div>
      <div class="atomic-weight">195.08</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal cu">
      <div class="name">Copper</div>
      <div class="atomic-number">29</div>
      <div class="symbol">Cu</div>
      <div class="atomic-weight">63.546</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal ag">
      <div class="name">Silver</div>
      <div class="atomic-number">47</div>
      <div class="symbol">Ag</div>
      <div class="atomic-weight">107.87</div>
    </div>
    <div class="periodic-table__element periodic-table__element--transition-metal au">
      <div class="name">Gold</div>
      <div class="atomic-number">79</div>
      <div class="symbol">Au</div>
      <div class="atomic-weight">196.97</div>
    </div>
    <!-- Post transition metals -->
    <div class="periodic-table__element periodic-table__element--post-transition-metal zn">
      <div class="name">Zn</div>
      <div class="atomic-number">30</div>
      <div class="symbol">Zn</div>
      <div class="atomic-weight">65.38</div>
    </div>
    <div class="periodic-table__element periodic-table__element--post-transition-metal cd">
      <div class="name">Cadmium</div>
      <div class="atomic-number">48</div>
      <div class="symbol">Cd</div>
      <div class="atomic-weight">112.41</div>
    </div>
    <div class="periodic-table__element periodic-table__element--post-transition-metal hg">
      <div class="name">Mercury</div>
      <div class="atomic-number atomic-number--green">80</div>
      <div class="symbol">Hg</div>
      <div class="atomic-weight">200.59</div>
    </div>
    <div class="periodic-table__element periodic-table__element--post-transition-metal cn">
      <div class="name">Coppernicum</div>
      <div class="atomic-number">112</div>
      <div class="symbol">Cn</div>
      <div class="atomic-weight">[285]</div>
    </div>
    <div class="periodic-table__element periodic-table__element--post-transition-metal al">
      <div class="name">Aluminium</div>
      <div class="atomic-number">13</div>
      <div class="symbol">Al</div>
      <div class="atomic-weight">26.982</div>
    </div>
    <div class="periodic-table__element periodic-table__element--post-transition-metal ga">
      <div class="name">Gallium</div>
      <div class="atomic-number">31</div>
      <div class="symbol">Ga</div>
      <div class="atomic-weight">69.723</div>
    </div>
    <div class="periodic-table__element periodic-table__element--post-transition-metal in">
      <div class="name">Indium</div>
      <div class="atomic-number">49</div>
      <div class="symbol">In</div>
      <div class="atomic-weight">114.82</div>
    </div>
    <div class="periodic-table__element periodic-table__element--post-transition-metal tl">
      <div class="name">Thallium</div>
      <div class="atomic-number">81</div>
      <div class="symbol">Tl</div>
      <div class="atomic-weight">204.38</div>
    </div>
    <div class="periodic-table__element periodic-table__element--post-transition-metal sn">
      <div class="name">Tin</div>
      <div class="atomic-number">50</div>
      <div class="symbol">Sn</div>
      <div class="atomic-weight">118.71</div>
    </div>
    <div class="periodic-table__element periodic-table__element--post-transition-metal pb">
      <div class="name">Lead</div>
      <div class="atomic-number">82</div>
      <div class="symbol">Pb</div>
      <div class="atomic-weight">207.2</div>
    </div>
    <div class="periodic-table__element periodic-table__element--post-transition-metal bi">
      <div class="name">Bismuth</div>
      <div class="atomic-number">83</div>
      <div class="symbol">Bi</div>
      <div class="atomic-weight">208.98</div>
    </div>
    <div class="periodic-table__element periodic-table__element--post-transition-metal po">
      <div class="name">Polonium</div>
      <div class="atomic-number">84</div>
      <div class="symbol">Po</div>
      <div class="atomic-weight">[209]</div>
    </div>
    <!-- Metaloid -->
    <div class="periodic-table__element periodic-table__element--metaloid b">
      <div class="name">Boron</div>
      <div class="atomic-number">5</div>
      <div class="symbol">B</div>
      <div class="atomic-weight">10.81</div>
    </div>
    <div class="periodic-table__element periodic-table__element--metaloid si">
      <div class="name">Silicon</div>
      <div class="atomic-number">14</div>
      <div class="symbol">Si</div>
      <div class="atomic-weight">28.085</div>
    </div>
    <div class="periodic-table__element periodic-table__element--metaloid ge">
      <div class="name">Germanium</div>
      <div class="atomic-number">32</div>
      <div class="symbol">Ge</div>
      <div class="atomic-weight">76.630</div>
    </div>
    <div class="periodic-table__element periodic-table__element--metaloid as">
      <div class="name">Arsenic</div>
      <div class="atomic-number">33</div>
      <div class="symbol">As</div>
      <div class="atomic-weight">74.922</div>
    </div>
    <div class="periodic-table__element periodic-table__element--metaloid sb">
      <div class="name">Antimony</div>
      <div class="atomic-number">51</div>
      <div class="symbol">Sb</div>
      <div class="atomic-weight">121.76</div>
    </div>
    <div class="periodic-table__element periodic-table__element--metaloid te">
      <div class="name">Tellurium</div>
      <div class="atomic-number">52</div>
      <div class="symbol">Te</div>
      <div class="atomic-weight">127.60</div>
    </div>
    <div class="periodic-table__element periodic-table__element--metaloid at">
      <div class="name">Astatine</div>
      <div class="atomic-number">82</div>
      <div class="symbol">At</div>
      <div class="atomic-weight">[210]</div>
    </div>
    <!-- Reactive non metal -->
    <div class="periodic-table__element periodic-table__element--reactive-nonmetal">
      <div class="name">Hydrogen</div>
      <div class="atomic-number">1</div>
      <div class="symbol">H</div>
      <div class="atomic-weight">1.008</div>
    </div>
    <div class="periodic-table__element periodic-table__element--reactive-nonmetal c">
      <div class="name">Carbon</div>
      <div class="atomic-number">6</div>
      <div class="symbol">C</div>
      <div class="atomic-weight">12.011</div>
    </div>
    <div class="periodic-table__element periodic-table__element--reactive-nonmetal n">
      <div class="name">Nitrogen</div>
      <div class="atomic-number">7</div>
      <div class="symbol">N</div>
      <div class="atomic-weight">14.007</div>
    </div>
    <div class="periodic-table__element periodic-table__element--reactive-nonmetal o">
      <div class="name">Oxygen</div>
      <div class="atomic-number">8</div>
      <div class="symbol">O</div>
      <div class="atomic-weight">15.999</div>
    </div>
    <div class="periodic-table__element periodic-table__element--reactive-nonmetal f">
      <div class="name">Fluorine</div>
      <div class="atomic-number">9</div>
      <div class="symbol">F</div>
      <div class="atomic-weight">18.998</div>
    </div>
    <div class="periodic-table__element periodic-table__element--reactive-nonmetal p">
      <div class="name">Phosphorus</div>
      <div class="atomic-number">15</div>
      <div class="symbol">P</div>
      <div class="atomic-weight">30.974</div>
    </div>
    <div class="periodic-table__element periodic-table__element--reactive-nonmetal s">
      <div class="name">Sulfur</div>
      <div class="atomic-number">16</div>
      <div class="symbol">S</div>
      <div class="atomic-weight">32.06</div>
    </div>
    <div class="periodic-table__element periodic-table__element--reactive-nonmetal cl">
      <div class="name">Chlorine</div>
      <div class="atomic-number">17</div>
      <div class="symbol">Cl</div>
      <div class="atomic-weight">35.45</div>
    </div>
    <div class="periodic-table__element periodic-table__element--reactive-nonmetal se">
      <div class="name">Selenium</div>
      <div class="atomic-number">34</div>
      <div class="symbol">Se</div>
      <div class="atomic-weight">78.971</div>
    </div>
    <div class="periodic-table__element periodic-table__element--reactive-nonmetal br">
      <div class="name">Bromine</div>
      <div class="atomic-number">35</div>
      <div class="symbol">Br</div>
      <div class="atomic-weight">79.904</div>
    </div>
    <div class="periodic-table__element periodic-table__element--reactive-nonmetal i">
      <div class="name">Iodine</div>
      <div class="atomic-number">53</div>
      <div class="symbol">I</div>
      <div class="atomic-weight">126.90</div>
    </div>
    <!-- Lanthanide -->
    <div class="periodic-table__element periodic-table__element--lanthanide la">
      <div class="name">Lanthanum</div>
      <div class="atomic-number">57</div>
      <div class="symbol">La</div>
      <div class="atomic-weight">138.91</div>
    </div>
    <!-- Actinide -->
    <div class="periodic-table__element periodic-table__element--actinide ac">
      <div class="name">Actinium</div>
      <div class="atomic-number">89</div>
      <div class="symbol">Ac</div>
      <div class="atomic-weight">[227]</div>
    </div>
    <!-- Noble gases -->
    <div class="periodic-table__element periodic-table__element--noble-gas he">
      <div class="name">Helium</div>
      <div class="atomic-number">2</div>
      <div class="symbol">He</div>
      <div class="atomic-weight">4.0026</div>
    </div>
    <div class="periodic-table__element periodic-table__element--noble-gas ne">
      <div class="name">Neon</div>
      <div class="atomic-number">10</div>
      <div class="symbol">Ne</div>
      <div class="atomic-weight">20.180</div>
    </div>
    <div class="periodic-table__element periodic-table__element--noble-gas he">
      <div class="name">Argon</div>
      <div class="atomic-number">18</div>
      <div class="symbol">Ar</div>
      <div class="atomic-weight">39.948</div>
    </div>
    <div class="periodic-table__element periodic-table__element--noble-gas he">
      <div class="name">Krypton</div>
      <div class="atomic-number">36</div>
      <div class="symbol">Kr</div>
      <div class="atomic-weight">83.798</div>
    </div>
    <div class="periodic-table__element periodic-table__element--noble-gas he">
      <div class="name">Xenon</div>
      <div class="atomic-number">54</div>
      <div class="symbol">Xe</div>
      <div class="atomic-weight">131.29</div>
    </div>
    <div class="periodic-table__element periodic-table__element--noble-gas he">
      <div class="name">Radon</div>
      <div class="atomic-number">86</div>
      <div class="symbol">Rn</div>
      <div class="atomic-weight">[222]</div>
    </div>
    <!-- Unknown chemical properties -->
    <div class="periodic-table__element periodic-table__element--unknown og">
      <div class="name">Ogannesson</div>
      <div class="atomic-number">118</div>
      <div class="symbol">Og</div>
      <div class="atomic-weight">[294]</div>
    </div>
    <div class="periodic-table__element periodic-table__element--unknown mt">
      <div class="name">Meitnerium</div>
      <div class="atomic-number">109</div>
      <div class="symbol">Mt</div>
      <div class="atomic-weight">[278]</div>
    </div>
    <div class="periodic-table__element periodic-table__element--unknown ds">
      <div class="name">Darmstadtium</div>
      <div class="atomic-number">110</div>
      <div class="symbol">Ds</div>
      <div class="atomic-weight">[281]</div>
    </div>
    <div class="periodic-table__element periodic-table__element--unknown rg">
      <div class="name">Roentgenium</div>
      <div class="atomic-number">111</div>
      <div class="symbol">Rg</div>
      <div class="atomic-weight">[282]</div>
    </div>
    <div class="periodic-table__element periodic-table__element--unknown nh">
      <div class="name">Nihonium</div>
      <div class="atomic-number">113</div>
      <div class="symbol">Nh</div>
      <div class="atomic-weight">[286]</div>
    </div>
    <div class="periodic-table__element periodic-table__element--unknown fl">
      <div class="name">Flerovium</div>
      <div class="atomic-number">114</div>
      <div class="symbol">Fl</div>
      <div class="atomic-weight">[289]</div>
    </div>
    <div class="periodic-table__element periodic-table__element--unknown mc">
      <div class="name">Moscovium</div>
      <div class="atomic-number">115</div>
      <div class="symbol">Mc</div>
      <div class="atomic-weight">[290]</div>
    </div>
    <div class="periodic-table__element periodic-table__element--unknown lv">
      <div class="name">Livermorium</div>
      <div class="atomic-number">116</div>
      <div class="symbol">Lv</div>
      <div class="atomic-weight">[293]</div>
    </div>
    <div class="periodic-table__element periodic-table__element--unknown ts">
      <div class="name">Tennessine</div>
      <div class="atomic-number">117</div>
      <div class="symbol">Ts</div>
      <div class="atomic-weight">[294]</div>
    </div>
  </div>
  <div class="extra-info">
    <div class="extra-info__legend">
      <ul class="list">
        <li class="list__item">
          <p class="title">Metal</p>
          <ul class="sublist">
            <li class="sublist__item">
              <b class="sublist__item box"> </b>
              <span class="sublist__item name">Alkali metal</span>
            </li>
            <li class="sublist__item">
              <b class="sublist__item box box--alkaline-earth"> </b>
              <span>Alkaline earth metal</span>
            </li>
            <li class="sublist__item">
              <b class="sublist__item box box--lanthanide"> </b>
              <span>Lanthanide</span>
            </li>
            <li class="sublist__item">
              <b class="sublist__item box box--actinide"> </b>
              <span>Actinide</span>
            </li>
            <li class="sublist__item">
              <b class="sublist__item box box--transition-metal"> </b>
              <span>Transition metal</span>
            </li>
            <li class="sublist__item">
              <b class="sublist__item box box--post-transition"> </b>
              <span>Post-transition metal</span>
            </li>
          </ul>
        </li>
        <li class="list__item">
          <p class="title">Nonmetal</p>
          <ul class="sublist">
            <li class="sublist__item">
              <b class="sublist__item box box--reactive-nonmetal"> </b>
              <span class="sublist__item name">Reactive nonmetal</span>
            </li>
            <li class="sublist__item">
              <b class="sublist__item box box--noble-gas"> </b>
              <span>Noble gas</span>
            </li>
          </ul>
        </li>
        <li class="list__single-item">
          <b class="box box--metaloid"></b>
          <span class="title">Metalloid</span>
        </li>
        <li class="list__single-item">
          <b class="box box--unknown"></b>
          <span class="title">Unkwown chemical properties</span>
        </li>
      </ul>
    </div>
    <div class="periodic-subtable">
      <!-- Lanthanide -->
      <div class="periodic-subtable__element periodic-subtable__element--lanthanide la">
        <div class="name">Cerium</div>
        <div class="atomic-number">58</div>
        <div class="symbol">Ce</div>
        <div class="atomic-weight">140.12</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--lanthanide la">
        <div class="name">Praseodymium</div>
        <div class="atomic-number">59</div>
        <div class="symbol">Pr</div>
        <div class="atomic-weight">140.91</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--lanthanide la">
        <div class="name">Neodymium</div>
        <div class="atomic-number">60</div>
        <div class="symbol">Nd</div>
        <div class="atomic-weight">144.24</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--lanthanide la">
        <div class="name">Promethium</div>
        <div class="atomic-number">61</div>
        <div class="symbol">Pm</div>
        <div class="atomic-weight">[145]</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--lanthanide la">
        <div class="name">Samarium</div>
        <div class="atomic-number">62</div>
        <div class="symbol">Sm</div>
        <div class="atomic-weight">150.36</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--lanthanide la">
        <div class="name">Europium</div>
        <div class="atomic-number">63</div>
        <div class="symbol">Eu</div>
        <div class="atomic-weight">151.96</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--lanthanide la">
        <div class="name">Gadolinium</div>
        <div class="atomic-number">64</div>
        <div class="symbol">Gd</div>
        <div class="atomic-weight">157.25</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--lanthanide la">
        <div class="name">Terbium</div>
        <div class="atomic-number">65</div>
        <div class="symbol">Tb</div>
        <div class="atomic-weight">158.93</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--lanthanide la">
        <div class="name">Dysprosium</div>
        <div class="atomic-number">66</div>
        <div class="symbol">Dy</div>
        <div class="atomic-weight">162.50</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--lanthanide la">
        <div class="name">Holmium</div>
        <div class="atomic-number">67</div>
        <div class="symbol">Ho</div>
        <div class="atomic-weight">164.93</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--lanthanide la">
        <div class="name">Erbium</div>
        <div class="atomic-number">68</div>
        <div class="symbol">Er</div>
        <div class="atomic-weight">167.26</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--lanthanide la">
        <div class="name">Thulium</div>
        <div class="atomic-number">69</div>
        <div class="symbol">Tm</div>
        <div class="atomic-weight">168.93</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--lanthanide la">
        <div class="name">Ytterbium</div>
        <div class="atomic-number">70</div>
        <div class="symbol">Yb</div>
        <div class="atomic-weight">173.05</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--lanthanide la">
        <div class="name">Lutetium</div>
        <div class="atomic-number">71</div>
        <div class="symbol">Lu</div>
        <div class="atomic-weight">174.97</div>
      </div>
      <!-- Actinide -->
      <div class="periodic-subtable__element periodic-subtable__element--actinide">
        <div class="name">Thorium</div>
        <div class="atomic-number">90</div>
        <div class="symbol">Th</div>
        <div class="atomic-weight">232.04</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--actinide">
        <div class="name">Protactinium</div>
        <div class="atomic-number">91</div>
        <div class="symbol">Pa</div>
        <div class="atomic-weight">231.04</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--actinide">
        <div class="name">Uranium</div>
        <div class="atomic-number">92</div>
        <div class="symbol">U</div>
        <div class="atomic-weight">238.03</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--actinide">
        <div class="name">Neptunium</div>
        <div class="atomic-number">93</div>
        <div class="symbol">Np</div>
        <div class="atomic-weight">[237]</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--actinide">
        <div class="name">Plutonium</div>
        <div class="atomic-number">94</div>
        <div class="symbol">Pu</div>
        <div class="atomic-weight">[244]</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--actinide">
        <div class="name">Americium</div>
        <div class="atomic-number">95</div>
        <div class="symbol">Am</div>
        <div class="atomic-weight">[243]</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--actinide">
        <div class="name">Curium</div>
        <div class="atomic-number">96</div>
        <div class="symbol">Cm</div>
        <div class="atomic-weight">[247]</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--actinide">
        <div class="name">Berkelium</div>
        <div class="atomic-number">97</div>
        <div class="symbol">Bk</div>
        <div class="atomic-weight">[247]</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--actinide">
        <div class="name">Californium</div>
        <div class="atomic-number">98</div>
        <div class="symbol">Cf</div>
        <div class="atomic-weight">[251]</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--actinide">
        <div class="name">Einsteinium</div>
        <div class="atomic-number">99</div>
        <div class="symbol">Es</div>
        <div class="atomic-weight">[252]</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--actinide">
        <div class="name">Fermium</div>
        <div class="atomic-number">100</div>
        <div class="symbol">Fm</div>
        <div class="atomic-weight">[257]</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--actinide">
        <div class="name">Mendelevium</div>
        <div class="atomic-number">101</div>
        <div class="symbol">Md</div>
        <div class="atomic-weight">[258]</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--actinide">
        <div class="name">Nobelium</div>
        <div class="atomic-number">102</div>
        <div class="symbol">Nb</div>
        <div class="atomic-weight">[259]</div>
      </div>
      <div class="periodic-subtable__element periodic-subtable__element--actinide">
        <div class="name">Lawrencium</div>
        <div class="atomic-number">103</div>
        <div class="symbol">Lr</div>
        <div class="atomic-weight">[266]</div>
      </div>
    </div>
  </div>
</div>
:root {
  --reactive-nonmetal: #f0ff8f;
  --alkali-metal: #f66;
  --alkaline-earth-metal: #ffdead;
  --noble-gas: #c0ffff;
  --transition-metal: #ffc0c0;
  --post-transition-metal: #ccc;
  --metaloid: #cc9;
  --unknown: #e8e8e8;
  --lanthanide: #ffbfff;
  --actinide: #f9c;

  --background-color: #212424;
  --base-text-color: #fff;
}

@import url("https://fonts.googleapis.com/css?family=Roboto+Mono");

html {
  box-sizing: border-box;
  font-size: 12px;
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

body {
  font-family: "Roboto Mono", monospace;
  margin: 0;
  background-color: var(--background-color);
  color: var(--base-text-color);
}

.wrapper {
  max-width: 90vw;
  height: 100vh;
  padding: 0 10px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: column;

  .title {
    display: block;
  }
}

.periodic-table {
  display: grid;
  grid-template: repeat(7, auto) / repeat(18, auto);
  grid-gap: 2px;

  &__element {
    padding: 3px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--base-text-color);
    background: var(--background-color);
    color: var(--base-text-color);

    .atomic-number {
      order: 1;
      align-self: flex-start;

      &.atomic-number--green {
        color: green;
      }

      &.atomic-number--red {
        color: red;
      }
    }

    .symbol {
      font-size: 15px;
      font-weight: bold;
      order: 2;
    }

    .name {
      order: 3;
    }

    .atomic-weight {
      order: 4;
    }

    &.periodic-table__element--reactive-nonmetal {
      .symbol {
        color: var(--reactive-nonmetal);
      }
      &.c {
        grid-area: 2 / 14;
      }
      &.n {
        grid-area: 2 / 15;
      }
      &.o {
        grid-area: 2 / 16;
      }
      &.f {
        grid-area: 2 / 17;
      }

      &.p {
        grid-area: 3 / 15;
      }
      &.s {
        grid-area: 3 / 16;
      }
      &.cl {
        grid-area: 3 / 17;
      }

      &.se {
        grid-area: 4 / 16;
      }
      &.br {
        grid-area: 4 / 17;
      }

      &.i {
        grid-area: 5 / 17;
      }
    }

    &.periodic-table__element--alkali-metal {
      .symbol {
        color: var(--alkali-metal);
      }
      grid-column: 1;
      &.li {
        grid-row: 2;
      }

      &.na {
        grid-row: 3;
      }

      &.k {
        grid-row: 4;
      }

      &.rb {
        grid-row: 5;
      }

      &.cs {
        grid-row: 6;
      }

      &.fr {
        grid-row: 7;
      }
    }

    &.periodic-table__element--alkaline-earth-metal {
      .symbol {
        color: var(--alkaline-earth-metal);
      }
      grid-column: 2;
      &.be {
        grid-row: 2;
      }

      &.mg {
        grid-row: 3;
      }

      &.ca {
        grid-row: 4;
      }

      &.sr {
        grid-row: 5;
      }

      &.ba {
        grid-row: 6;
      }

      &.ra {
        grid-row: 7;
      }
    }

    &.periodic-table__element--noble-gas {
      .symbol {
        color: var(--noble-gas);
      }
      grid-column: 18;
    }

    &.periodic-table__element--transition-metal {
      .symbol {
        color: var(--transition-metal);
      }
      &.sc {
        grid-area: 4 / 3;
      }

      &.y {
        grid-area: 5 / 3;
      }

      &.ti {
        grid-area: 4 / 4;
      }
      &.zr {
        grid-area: 5 / 4;
      }
      &.hf {
        grid-area: 6 / 4;
      }
      &.rf {
        grid-area: 7 / 4;
      }

      &.v {
        grid-area: 4 / 5;
      }
      &.nb {
        grid-area: 5 / 5;
      }
      &.ta {
        grid-area: 6 / 5;
      }
      &.db {
        grid-area: 7 / 5;
      }

      &.cr {
        grid-area: 4 / 6;
      }
      &.mo {
        grid-area: 5 / 6;
      }
      &.w {
        grid-area: 6 / 6;
      }
      &.sg {
        grid-area: 7 / 6;
      }

      &.mn {
        grid-area: 4 / 7;
      }
      &.tc {
        grid-area: 5 / 7;
      }
      &.re {
        grid-area: 6 / 7;
      }
      &.bh {
        grid-area: 7 / 7;
      }

      &.fe {
        grid-area: 4 / 8;
      }
      &.ru {
        grid-area: 5 / 8;
      }
      &.os {
        grid-area: 6 / 8;
      }
      &.hs {
        grid-area: 7 / 8;
      }

      &.co {
        grid-area: 4 / 9;
      }
      &.rh {
        grid-area: 5 / 9;
      }
      &.ir {
        grid-area: 6 / 9;
      }

      &.ni {
        grid-area: 4 / 10;
      }
      &.pd {
        grid-area: 5 / 10;
      }
      &.pt {
        grid-area: 6 / 10;
      }

      &.cu {
        grid-area: 4 / 11;
      }
      &.ag {
        grid-area: 5 / 11;
      }
      &.au {
        grid-area: 6 / 11;
      }
    }

    &.periodic-table__element--post-transition-metal {
      .symbol {
        color: var(--post-transition-metal);
      }

      &.zn {
        grid-area: 4 / 12;
      }
      &.cd {
        grid-area: 5 / 12;
      }
      &.hg {
        grid-area: 6 / 12;
      }
      &.cn {
        grid-area: 7 / 12;
      }

      &.al {
        grid-area: 3 / 13;
      }
      &.ga {
        grid-area: 4 / 13;
      }
      &.in {
        grid-area: 5 / 13;
      }
      &.tl {
        grid-area: 6 / 13;
      }

      &.sn {
        grid-area: 5 / 14;
      }
      &.pb {
        grid-area: 6 / 14;
      }

      &.bi {
        grid-area: 6 / 15;
      }

      &.po {
        grid-area: 6 / 16;
      }
    }

    &.periodic-table__element--metaloid {
      .symbol {
        color: var(--metaloid);
      }
      &.b {
        grid-area: 2 / 13;
      }

      &.si {
        grid-area: 3 / 14;
      }

      &.ge {
        grid-area: 4 / 14;
      }
      &.as {
        grid-area: 4 / 15;
      }

      &.sb {
        grid-area: 5 / 15;
      }
      &.te {
        grid-area: 5 / 16;
      }

      &.at {
        grid-area: 6 / 17;
      }
    }

    &.periodic-table__element--unknown {
      .symbol {
        color: var(--unknown);
      }
      &.og {
        grid-area: 7 / 18;
      }
    }

    &.periodic-table__element--lanthanide {
      .symbol {
        color: var(--lanthanide);
      }
      &.la {
        grid-column: 3;
        grid-row: 6;
      }
    }

    &.periodic-table__element--actinide {
      .symbol {
        color: var(--actinide);
      }
      &.ac {
        grid-column: 3;
        grid-row: 7;
      }
    }
  }
}

.periodic-subtable {
  display: grid;
  grid-template: repeat(2, auto) / repeat(14, auto);
  margin-top: 10px;
  grid-gap: 2px;

  &__element {
    padding: 3px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--base-text-color);

    .atomic-number {
      order: 1;
      align-self: flex-start;

      &.atomic-number--green {
        color: green;
      }

      &.atomic-number--red {
        color: red;
      }
    }

    .symbol {
      font-size: 15px;
      font-weight: bold;
      order: 2;
    }

    .name {
      order: 3;
    }

    .atomic-weight {
      order: 4;
    }

    &.periodic-subtable__element--lanthanide {
      .symbol {
        color: var(--lanthanide);
      }
      grid-row: 1;
    }
    &.periodic-subtable__element--actinide {
      .symbol {
        color: var(--actinide);
      }
      grid-row: 2;
    }
  }
}

.extra-info {
  display: flex;
  margin-top: 20px;

  &__legend {
    flex: 1 1 30%;
    padding: 10px;

    .list {
      list-style: none;
      display: flex;
      flex-wrap: wrap;

      &__single-item {
        flex: 1;
        display: flex;
        align-items: center;
        padding: 5px;

        .title {
          font-weight: bold;
        }

        .box {
          width: 10px;
          height: 10px;
          background-color: var(--alkali-metal);
          margin-right: 3px;

          &.box--metaloid {
            background-color: var(--metaloid);
          }
          &.box--unknown {
            background-color: var(--unknown);
          }
        }
      }

      &__item {
        flex: 1 1 50%;
        padding: 5px;

        .title {
          margin: 0;
          font-weight: bold;
        }

        .sublist {
          list-style: none;

          &__item {
            display: flex;
            align-items: center;

            &.box {
              width: 10px;
              height: 10px;
              background-color: var(--alkali-metal);
              margin-right: 3px;

              &.box--transition-metal {
                background-color: var(--transition-metal);
              }
              &.box--alkaline-earth {
                background-color: var(--alkaline-earth-metal);
              }
              &.box--lanthanide {
                background-color: var(--lanthanide);
              }
              &.box--actinide {
                background-color: var(--actinide);
              }
              &.box--post-transition {
                background-color: var(--post-transition-metal);
              }
              &.box--reactive-nonmetal {
                background-color: var(--reactive-nonmetal);
              }
              &.box--noble-gas {
                background-color: var(--noble-gas);
              }
            }
          }
        }
      }
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.