waptrick360.wapka.site

Home » Wapmaster codes » Awesome periodic table code

Copy your code

<title>Periodic Table</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="wrapper">
<ul class="main">
 
 
 
 <li data-pos="1" data-nb="1.0079" class="type-1 cat-1">HHydrogen</li>
 <li class="empty"></li>
 <li class="empty"></li>
 <li class="empty"></li>
 <li class="empty"></li>
 
 <li class="empty"></li>
 <li class="empty"></li>
 <li class="empty"></li>
 <li class="empty"></li>
 <li class="empty"></li>
 
 <li class="empty"></li>
 <li class="empty"></li>
 <li class="empty"></li>
 <li class="empty"></li>
 <li class="empty"></li>
 
 <li class="empty"></li>
 <li class="empty"></li>
 <li data-pos="2" data-nb="4.0026" class="type-2 cat-1">HeHelium</li>
 
 
 
 <li data-pos="3" data-nb="6.941" class="type-3 cat-1">LiLithium</li>
 <li data-pos="4" data-nb="9.0122" class="type-4 cat-1">BeBeryllium</li>
 <li class="empty"></li>
 <li class="empty"></li>
 <li class="empty"></li>
 
 <li class="empty"></li>
 <li class="empty"></li>
 <li class="empty"></li>
 <li class="empty"></li>
 <li class="empty"></li>
 
 <li class="empty"></li>
 <li class="empty"></li>
 <li data-pos="5" data-nb="10.811" class="type-5 cat-1">BBoron</li>
 <li data-pos="6" data-nb="12.011" class="type-1 cat-1">CCarbon</li>
 <li data-pos="7" data-nb="14.007" class="type-1 cat-1">NNitrogen</li>
 
 <li data-pos="8" data-nb="15.999" class="type-1 cat-1">OOxygen</li>
 <li data-pos="9" data-nb="18.998" class="type-9 cat-1">FFluorine</li>
 <li data-pos="10" data-nb="20.180" class="type-2 cat-1">NeNeon</li>
 
 
 
 <li data-pos="11" data-nb="22.990" class="type-3 cat-1">NaSodium</li>
 <li data-pos="12" data-nb="24.305" class="type-4 cat-1">MgMagnesium</li>
 <li class="empty"></li>
 <li class="empty"></li>
 <li class="empty"></li>
 
 <li class="empty"></li>
 <li class="empty"></li>
 <li class="empty"></li>
 <li class="empty"></li>
 <li class="empty"></li>
 
 <li class="empty"></li>
 <li class="empty"></li>
 <li data-pos="13" data-nb="26.982" class="type-7 cat-1">AlAluminium</li>
 <li data-pos="14" data-nb="28.086" class="type-5 cat-1">SiSilicon</li>
 <li data-pos="15" data-nb="30.974" class="type-1 cat-1">PPhosphorus</li>
 
 <li data-pos="16" data-nb="32.065" class="type-1 cat-1">SSulfur</li>
 <li data-pos="17" data-nb="35.453" class="type-9 cat-1">ClChlorine</li>
 <li data-pos="18" data-nb="39.948" class="type-2 cat-1">ArArgon</li>
 
 
 
 <li data-pos="19" data-nb="39.098" class="type-3 cat-1">KPotassium</li>
 <li data-pos="20" data-nb="40.078" class="type-4 cat-1">CaCalcium</li>
 <li data-pos="21" data-nb="44.956" class="type-6 cat-1">ScScandium</li>
 <li data-pos="22" data-nb="47.867" class="type-6 cat-1">TiTitanium</li>
 <li data-pos="23" data-nb="50.942" class="type-6 cat-1">VVanadium</li>
 
 <li data-pos="24" data-nb="51.996" class="type-6 cat-1">CrChromium</li>
 <li data-pos="25" data-nb="54.938" class="type-6 cat-1">MnManganese</li>
 <li data-pos="26" data-nb="55.845" class="type-6 cat-1">FeIron</li>
 <li data-pos="27" data-nb="58.933" class="type-6 cat-1">CoCobalt</li>
 <li data-pos="28" data-nb="58.693" class="type-6 cat-1">NiNickel</li>
 
 <li data-pos="29" data-nb="63.546" class="type-6 cat-1">CuCopper</li>
 <li data-pos="30" data-nb="65.39" class="type-6 cat-1">ZnZinc</li>
 <li data-pos="31" data-nb="69.723" class="type-7 cat-1">GaGallium</li>
 <li data-pos="32" data-nb="72.64" class="type-5 cat-1">GeGermanium</li>
 <li data-pos="33" data-nb="74.922" class="type-5 cat-1">AsArsenic</li>
 
 <li data-pos="34" data-nb="78.96" class="type-1 cat-1">SeSelenium</li>
 <li data-pos="35" data-nb="79.904" class="type-9 cat-1">BrBromine</li>
 <li data-pos="36" data-nb="83.80" class="type-2 cat-1">KrKrypton</li>
 
 
 
 <li data-pos="37" data-nb="85.468" class="type-3 cat-1">RbRubidium</li>
 <li data-pos="38" data-nb="87.62" class="type-4 cat-1">SrStrontium</li>
 <li data-pos="39" data-nb="88.906" class="type-6 cat-1">YYttrium</li>
 <li data-pos="40" data-nb="91.224" class="type-6 cat-1">ZrZirconium</li>
 <li data-pos="41" data-nb="92.906" class="type-6 cat-1">NbNiobium</li>
 
 <li data-pos="42" data-nb="95.94" class="type-6 cat-1">MoMolybdenum</li>
 <li data-pos="43" data-nb="(96)" class="type-6 cat-1">TcTechnetium</li>
 <li data-pos="44" data-nb="101.07" class="type-6 cat-1">RuRuthenium</li>
 <li data-pos="45" data-nb="102.91" class="type-6 cat-1">RhRhodium</li>
 <li data-pos="46" data-nb="106.42" class="type-6 cat-1">PdPalladium</li>
 
 <li data-pos="47" data-nb="107.87" class="type-6 cat-1">AgSilver</li>
 <li data-pos="48" data-nb="112.41" class="type-6 cat-1">CdCadmium</li>
 <li data-pos="49" data-nb="114.82" class="type-7 cat-1">InIndium</li>
 <li data-pos="50" data-nb="118.71" class="type-7 cat-1">SnTin</li>
 <li data-pos="51" data-nb="121.76" class="type-5 cat-1">SbAntimony</li>
 
 <li data-pos="52" data-nb="127.60" class="type-5 cat-1">TeTellurium</li>
 <li data-pos="53" data-nb="126.90" class="type-9 cat-1">IIodine</li>
 <li data-pos="54" data-nb="131.29" class="type-2 cat-1">XeXenon</li>
 
 
 
 <li data-pos="55" data-nb="132.91" class="type-3 cat-1">CsCaesium</li>
 <li data-pos="56" data-nb="137.33" class="type-4 cat-1">BaBarium</li>
 <li data-pos="57-71" class="type-8">Lanthanides</li>
 <li data-pos="72" data-nb="178.49" class="type-6 cat-1">HfHafnium</li>
 <li data-pos="73" data-nb="180.95" class="type-6 cat-1">TaTantalum</li>
 
 <li data-pos="74" data-nb="183.64" class="type-6 cat-1">WTungsten</li>
 <li data-pos="75" data-nb="186.21" class="type-6 cat-1">ReRhenium</li>
 <li data-pos="76" data-nb="190.23" class="type-6 cat-1">OsOsmium</li>
 <li data-pos="77" data-nb="192.22" class="type-6 cat-1">Iridium</li>
 <li data-pos="78" data-nb="195.08" class="type-6 cat-1">PtPlatinum</li>
 
 <li data-pos="79" data-nb="196.97" class="type-6 cat-1">AuGold</li>
 <li data-pos="80" data-nb="200.59" class="type-6 cat-1">HgMercury</li>
 <li data-pos="81" data-nb="204.38" class="type-7 cat-1">TlThallium</li>
 <li data-pos="82" data-nb="207.2" class="type-7 cat-1">PbLead</li>
 <li data-pos="83" data-nb="208.96" class="type-7 cat-1">BiBismuth</li>
 
 <li data-pos="84" data-nb="(209)" class="type-7 cat-1">PoPolonium</li>
 <li data-pos="85" data-nb="(210)" class="type-9 cat-1">AtAstatine</li>
 <li data-pos="86" data-nb="(222)" class="type-2 cat-1">RnRadon</li>
 
 
 
 <li data-pos="87" data-nb="(223)" class="type-3 cat-1">FrFrancium</li>
 <li data-pos="88" data-nb="(226)" class="type-4 cat-1">RaRadium</li>
 <li data-pos="89-103" class="type-10">Actinides</li>
 <li data-pos="104" data-nb="(261)" class="type-6 cat-1">RfRutherfodum</li>
 <li data-pos="105" data-nb="(262)" class="type-6 cat-1">DbDubnium</li>
 
 <li data-pos="106" data-nb="(266)" class="type-6 cat-1">SgSeaborgium</li>
 <li data-pos="107" data-nb="(264)" class="type-6 cat-1">BhBohrium</li>
 <li data-pos="108" data-nb="(277)" class="type-6 cat-1">HsHassium</li>
 <li data-pos="109" data-nb="(268)" class="type-6 cat-1">MtMeitnerium</li>
 <li data-pos="110" data-nb="(281)" class="type-6 cat-1">DsDamstadium</li>
 
 <li data-pos="111" data-nb="(272)" class="type-6 cat-1">RgRoentgenium</li>
 <li data-pos="112" data-nb="(268)" class="type-6 cat-1">CnCopernicium</li>
 <li data-pos="113" data-nb="(286)" class="type-7 cat-1">NhNihonium</li>
 <li data-pos="114" data-nb="(289)" class="type-7 cat-1">FlFlerovium</li>
 <li data-pos="115" data-nb="(289)" class="type-7 cat-1">McMoscovium</li>
 
 <li data-pos="116" data-nb="(293)" class="type-7 cat-1">LvLivermorium</li>
 <li data-pos="117" data-nb="(294)" class="type-9 cat-1">TsTennessine</li>
 <li data-pos="118" data-nb="(294)" class="type-2 cat-1">OgOganesson</li>
 <li class="empty"></li>
 <li class="empty"></li>
 <li class="empty"></li>
 <li data-pos="57" data-nb="138.91" class="type-8 cat-1">LaLanthumum</li>
 <li data-pos="58" data-nb="140.12" class="type-8 cat-1">CeCerium</li>
 <li data-pos="59" data-nb="140.91" class="type-8 cat-1">PrPraseodymium</li>
 <li data-pos="60" data-nb="144.24" class="type-8 cat-1">NdNeodimium</li>
 <li data-pos="61" data-nb="(145)" class="type-8 cat-1">PmPromethium</li>
 <li data-pos="62" data-nb="150.36" class="type-8 cat-1">SmSamarium</li>
 <li data-pos="63" data-nb="151.96" class="type-8 cat-1">EuEuropium</li>
 <li data-pos="64" data-nb="157.25" class="type-8 cat-1">GdGadolinium</li>
 <li data-pos="65" data-nb="158.93" class="type-8 cat-1">TbTerbium</li>
 <li data-pos="66" data-nb="162.50" class="type-8 cat-1">DyDysprosium</li>
 <li data-pos="67" data-nb="164.93" class="type-8 cat-1">HoHolmium</li>
 <li data-pos="68" data-nb="167.26" class="type-8 cat-1">ErErbium</li>
 <li data-pos="69" data-nb="168.93" class="type-8 cat-1">TmThulium</li>
 <li data-pos="70" data-nb="173.04" class="type-8 cat-1">YbYtterbium</li>
 <li data-pos="71" data-nb="174.97" class="type-8 cat-1">LuLutetium</li>
 <li class="empty"></li>
 <li class="empty"></li>
 <li class="empty"></li>
 <li data-pos="89" data-nb="(227)" class="type-10 cat-1">AcActinium</li>
 <li data-pos="90" data-nb="232.04" class="type-10 cat-1">ThThorium</li>
 <li data-pos="91" data-nb="231.04" class="type-10 cat-1">PaProtactinium</li>
 <li data-pos="92" data-nb="238.03" class="type-10 cat-1">UUranium</li>
 <li data-pos="93" data-nb="(237)" class="type-10 cat-1">NpNeptunium</li>
 <li data-pos="94" data-nb="(244)" class="type-10 cat-1">PuPlutonium</li>
 <li data-pos="95" data-nb="(243)" class="type-10 cat-1">AmAmericium</li>
 <li data-pos="96" data-nb="(247)" class="type-10 cat-1">CmCurium</li>
 <li data-pos="97" data-nb="(247)" class="type-10 cat-1">BkBerkelium</li>
 <li data-pos="98" data-nb="(251)" class="type-10 cat-1">CfCalifornium</li>
 <li data-pos="99" data-nb="(252)" class="type-10 cat-1">EsEinsteinium</li>
 <li data-pos="100" data-nb="(257)" class="type-10 cat-1">FmFermium</li>
 <li data-pos="101" data-nb="(258)" class="type-10 cat-1">MdMendelevium</li>
 <li data-pos="102" data-nb="(259)" class="type-10 cat-1">NoNobelium</li>
 <li data-pos="103" data-nb="(262)" class="type-10 cat-1">LrLawrencium</li>
</ul>
 
<div class="legend">
Periodic Table of Elements
 <ul class="list-2">
 <li class="type-4">Alkaline earth metals</li>
 <li class="type-3">Alkalai metals</li>
 <li class="type-5">metalloids</li>
 <li class="type-7">Post-transition metals</li>
 <li class="type-8">Lanthanides</li>
 <li class="type-1">Other non-metals</li>
 <li class="type-10">Actinides</li>
 <li class="type-9">Halogens</li>
 <li class="type-6">Transition metals</li>
 <li class="type-2">Noble gases</li>
 <li class="type-0">Unknown</li>
 </ul>
</div>

</div>

body {
  background:linear-gradient(#dbeaf8, #dbeaf8);
  color:#222;
    padding: 20px;
  font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
}

.wrapper {
     width:1050px;
  margin:30px auto;
  position:relative;
}

.main:after {
     clear:both;
  content:"";
  display:table;
}
 
.main li {
     width:56px;
  height:60px;
  border:1px solid rgba(0,0,0,0.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.4);
  position:relative;
  font-size:18px;
  float:left;
  padding:0 2px;
  margin:1px;
  cursor:pointer;
  padding-top:20px;
  overflow:hidden;
  transition:all .2s ease-in;
  text-shadow:0 1px 0 rgba(255,255,255,0.2);
  text-align:center;
}

.main li span {
  display:block;
  line-height:1;
  font-size:9px;
  color:black; 
  padding-top:7px;
}

.main .empty {
     border:none; 
  box-shadow:none;
  cursor:default;
}

.deactivate {
     opacity:0.5;
  -webkit-filter:grayscale(70%);
  filter:grayscale(70%);
}

.main li:before,
.main li:after {
     content:attr(data-pos);
  position:absolute;
  top:3px;
  left:3px;
  color:black;
  font-size:8px;
  line-height:1;
}

.main li:after {
  content:attr(data-nb);
  left:auto;
  right:3px;
}

.main li:hover {
     transform:scale(2);
  z-index:100;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.main .empty:hover {
     box-shadow:none;
  transform:none;
}

.type-0 { background:#fff; }
.type-1 { background:#6495ed; }
.type-2 { background:#a8bffa; }
.type-3 { background:#ffd700; }
.type-4 { background:#cdbe70; }
.type-5 { background:#3bd93b; }
.type-6 { background:#3CB371; }
.type-7 { background:#b0c4de; }
.type-8 { background:#ffaa88; }
.type-9 { background:#97ffff; }
.type-10 { background:#ff4040;}

.cat-1 { color:#000000; }

.legend {
     position:absolute;
  top:0;
  left:20%;
  padding:10px;
  font-size:11px;
  background:#f1edec;
  border:1px solid rgba(0,0,0,0.2);
  border-radius:15px;
  box-shadow:
    inset 0 1px 1px white,
    inset 0 -5px 3px #dddcdb,
    0 0 10px rgba(0,0,0,0.2);
}

.legend:after {
     content:"";
  display:table;
  clear:table;
}

.legend ul { float:left; list-style: none; }

.legend .list-2 {
     margin-left:40px; 
  width:300px;
}

.legend .list-2 li {
 margin:2px;
 padding:3px;
 float:left; 
 border:1px solid rgba(0,0,0,0.2);
 width:48%;
 cursor:pointer;
}
</style>

$(function(){
    $('li[class^="type-"]').mouseover(function(){
      var currentClass = $(this).attr('class').split(' ')[0];
      if(currentClass != 'empty'){
          $('.main > li').addClass('deactivate');
          $('.' + currentClass).removeClass('deactivate');
      }
    });
   
   $('li[class^="cat-"]').mouseover(function(){
      var currentClass = $(this).attr('class').split(' ')[0];
          $('.main > li').addClass('deactivate');
          $('.' + currentClass).removeClass('deactivate');
    }); 
    
    $('.main > li').mouseout(function(){
      var currentClass = $(this).attr('class').split(' ')[0];
       $('.main > li').removeClass('deactivate');
    }); 
 
});

</script>

here ❤️❤️❤️

Total likes [0]

WapTrick360