-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
2385 lines (2028 loc) · 77.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE HTML >
<html>
<head>
<title>Periodic Table </title>
<script src="js/script.js"></script>
<link rel="stylesheet" href="css/index.css" />
<meta name="viewport" content="width-device-width" initial-scale="1">
</head>
<body onload="setTheme()">
<div id="header" >
Periodic Table<span onclick="openNav()">☰</span>
</div>
<div id="table1">
<!--table begins here-->
<table align="center" >
<tr>
<td class="nonmetals"> <a href="#H"> H </td>
<td colspan="16" class="emptySpace"> </td>
<td class="noblegases"> <a href="#He"> He </td>
</tr>
<tr>
<td class="alkalimetals"> <a href="#Li"> Li </td>
<td class=" alkaliearhmetals ""> <a href="#Be"> Be </td>
<td colspan="10" class=" emptySpace"></td>
<td class=" metalloids" > <a href="#B"> B </td>
<td class="nonmetals""> <a href="#C"> C </td>
<td class="nonmetals"" > <a href="#N"> N </td>
<td class="nonmetals"" > <a href="#O"> O </td>
<td class=" halogens""> <a href="#F"> F </td>
<td class="noblegases""> <a href="#Ne"> Ne </td>
</tr>
<tr>
<td class="alkalimetals""> <a href="#Na"> Na </td>
<td class=" alkaliearhmetals "> <a href="#Mg"> Mg </td>
<td colspan = "10" class=" emptySpace " ></td>
<td class="posttransistionmetal"> <a href="#Al"> Al </td>
<td class=" metalloids" > <a href="#Si"> Si</td>
<td class="nonmetals"> <a href="#P">P </td>
<td class="nonmetals"" > <a href="#S">S </td>
<td class=" halogens"> <a href="#Cl"> Cl </td>
<td class="noblegases""> <a href="#Ar"> Ar </td>
</tr>
<tr>
<td class="alkalimetals"> <a href="#K"> K </td>
<td class=" alkaliearhmetals "> <a href="#Ca"> Ca </td>
<td class="transitionmetals"> <a href="#Sc"> Sc </td>
<td class="transitionmetals" > <a href="#Ti"> Ti </td>
<td class="transitionmetals" > <a href="#V">V </td>
<td class="transitionmetals"> <a href="#Cr">Cr </td>
<td class="transitionmetals"> <a href="#Mn">Mn </td>
<td class="transitionmetals"> <a href="#Fe"> Fe </td>
<td class="transitionmetals"> <a href="#Co"> Co </td>
<td class="transitionmetals" > <a href="#Ni">Ni </td>
<td class="transitionmetals"> <a href="#Cu">Cu </td>
<td class="transitionmetals"> <a href="#Zn"> Zn </td>
<td class="posttransistionmetal"> <a href="#Ga"> Ga </td>
<td class=" metalloids" > <a href="#Ge"> Ge </td>
<td class=" metalloids" > <a href="#As"> As </td>
<td class="nonmetals" > <a href="#Se"> Se </td>
<td class=" halogens" > <a href="#Br"> Br </td>
<td class="noblegases"> <a href="#Kr"> Kr </td>
</tr>
<tr>
<td class="alkalimetals""> <a href="#Rb"> Rb</td>
<td class=" alkaliearhmetals "> <a href="#Sr"> Sr </td>
<td class="transitionmetals"> <a href="#Y"> Y </td>
<td class="transitionmetals"> <a href="#Zr"> Zr </td>
<td class="transitionmetals"> <a href="#Nb"> Nb </td>
<td class="transitionmetals"> <a href="#Mo"> Mo </td>
<td class="transitionmetals"> <a href="#Tc"> Tc </td>
<td class="transitionmetals"> <a href="#Ru"> Ru </td>
<td class="transitionmetals"> <a href="#Rh"> Rh </td>
<td class="transitionmetals"> <a href="#Pd"> Pd </td>
<td class="transitionmetals"> <a href="#Ag"> Ag </td>
<td class="transitionmetals"> <a href="#Cd"> Cd </td>
<td class="posttransistionmetal"> <a href="#In"> In </td>
<td class="posttransistionmetal""> <a href="#Sn"> Sn </td>
<td class=" metalloids" > <a href="#Sb"> Sb </td>
<td class=" metalloids" > <a href="#Te"> Te </td>
<td class=" halogens""> <a href="#I"> I </td>
<td class="noblegases""> <a href="#Xe"> Xe </td>
</tr>
<tr>
<td class="alkalimetals"> <a href="#Cs"> Cs </td>
<td class=" alkaliearhmetals ""> <a href="#Ba"> Ba </td>
<td class=" emptySpace "" > * </td>
<td class="transitionmetals""> <a href="#Hf"> Hf </td>
<td class="transitionmetals""> <a href="#Ta"> Ta </td>
<td class="transitionmetals""> <a href="#W"> W </td>
<td class="transitionmetals""> <a href="#Re"> Re </td>
<td class="transitionmetals"" > <a href="#Os"> Os </td>
<td class="transitionmetals""> <a href="#Ir"> Ir </td>
<td class="transitionmetals""> <a href="#Pt"> Pt </td>
<td class="transitionmetals""> <a href="#Au"> Au </td>
<td class="transitionmetals""> <a href="#Hg"> Hg </td>
<td class="posttransistionmetal"> <a href="#Tl"> Tl </td>
<td class="posttransistionmetal""> <a href="#Pb"> Pb </td>
<td class="posttransistionmetal""> <a href="#Bi"> Bi </td>
<td class=" metalloids" > <a href="#Po"> Po </td>
<td class=" halogens""> <a href="#At"> At </td>
<td class="noblegases""> <a href="#Rn"> Rn </td>
</tr>
<tr>
<td class="alkalimetals""> <a href="#Fr"> Fr </td>
<td class=" alkaliearhmetals "> <a href="#Ra"> Ra </td>
<td class=" emptySpace "" > ** </td>
<td class="transitionmetals""> <a href="#Rf"> Rf </td>
<td class="transitionmetals""> <a href="#Db"> Db </td>
<td class="transitionmetals""> <a href="#Sg"> Sg </td>
<td class="transitionmetals""> <a href="#Bh"> Bh </td>
<td class="transitionmetals""> <a href="#Hs"> Hs </td>
<td class="transitionmetals"" > <a href="#Mt"> Mt </td>
<td class="transitionmetals"" > <a href="#Ds"> Ds </td>
<td class="transitionmetals"" > <a href="#Rg"> Rg </td>
<td class="transitionmetals"" > <a href="#Cn"> Cn </td>
<td class="posttransistionmetal""> <a href="#Nh"> Nh </td>
<td class="posttransistionmetal""> <a href="#Fl"> Fl </td>
<td class="posttransistionmetal""> <a href="#Mc"> Mc </td>
<td class="posttransistionmetal""> <a href="#Lv"> Lv </td>
<td class=" halogens"" > <a href="#Ts"> Ts </td>
<td class="noblegases"" > <a href="#Og"> Og </td>
</tr>
<tr>
<td class=" emptySpace "> </td>
<td class=" emptySpace " > * </td>
<td class="lanthanides"> <a href="#La"> La </td>
<td class="lanthanides""> <a href="#Ce"> Ce </td>
<td class="lanthanides""> <a href="#Pr"> Pr </td>
<td class="lanthanides""> <a href="#Nd"> Nd </td>
<td class="lanthanides"" > <a href="#Pm"> Pm </td>
<td class="lanthanides"" > <a href="#Sm"> Sm </td>
<td class="lanthanides"" > <a href="#Eu"> Eu </td>
<td class="lanthanides""> <a href="#Gd"> Gd </td>
<td class="lanthanides""> <a href="#Tb"> Tb </td>
<td class="lanthanides"" > <a href="#Dy"> Dy </td>
<td class="lanthanides"" > <a href="#Ho"> Ho </td>
<td class="lanthanides"" > <a href="#Er"> Er </td>
<td class="lanthanides""> <a href="#Tm"> Tm </td>
<td class="lanthanides"" > <a href="#Yb"> Yb </td>
<td class="lanthanides"" > <a href="#Lu"> Lu </td>
<td class=" emptySpace ""> </td>
</tr>
<tr>
<td class=" emptySpace " > </td>
<td class=" emptySpace " > ** </td>
<td class="actinides" > <a href="#Ac"> Ac </td>
<td class="actinides"" > <a href="#Th"> Th </td>
<td class="actinides"" > <a href="#Pa"> Pa </td>
<td class="actinides""> <a href="#U"> U </td>
<td class="actinides""> <a href="#Np"> Np </td>
<td class="actinides"" > <a href="#Pu"> Pu </td>
<td class="actinides"" > <a href="#Am"> Am </td>
<td class="actinides""> <a href="#Cm"> Cm </td>
<td class="actinides"" > <a href="#Bk"> Bk </td>
<td class="actinides" > <a href="#Cf"> Cf </td>
<td class="actinides""> <a href="#Es"> Es </td>
<td class="actinides"> <a href="#Fm"> Fm </td>
<td class="actinides "> <a href="#Md"> Md </td>
<td class="actinides "> <a href="#No"> No </td>
<td class="actinides "> <a href="#Lr"> Lr </td>
<td class=" emptySpace "> </td>
</tr>
</table>
</div>
<!--table closed-->
<!-- <div id="footer">
<span> © created by chandrabhan</span>
</div> -->
<!-- hints-->
<div id="groupdetails">
<table>
<tr>
<td class="nonmetals">Non Metals</td>
<td class="alkalimetals">Alkali Metals</td>
<td class="alkaliearhmetals">Alkali Earth Metals</td>
<td class="halogens">Halogens</td>
<td class="noblegases">Noble Gases</td>
</tr>
<tr>
<td class="metalloids">Metalloids</td>
<td class="transitionmetals">Transition Metals</td>
<td class="posttransistionmetal">Post Transistion Metal</td>
<td class="lanthanides">Lanthanides</td>
<td class="actinides">Actinides </td>
</tr>
</table>
</div>
<!-- hints over -->
<!--individual details here-->
<div id="details">
<div class="popup" id="H">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div>
<img class="elemimg" src="images/elements/element_1.jpg">
<h3>1. Hydrogen</h3> <hr/>
<p>Symbol: H
<br/>
Atomic Weight: 1.008
<br/>
Description: Hydrogen is an explosive gas and also the lightest element.
<br/>
Where It's Used: Hydrogen makes up about 90% of atoms in the entire universe. The chemical is used heavily as both a gas and liquid fuel. Hydrogen was used as a main fuel for the space shuttle program by NASA as well as currently being used heavily by the petroleum and manufacturing industries.
</p>
</div>
</div>
<div class="popup" id="He">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_2.jpg">
<h3>2. Helium</h3> <hr/>
<p>
Symbol: He
<br/>
Atomic Weight: 4.002602(2)
<br/>
Description: Helium is an inert gas and the second-lightest element.
<br/>
Where It's Used: Helium gas is commonly known to be lighter than air, which leads to its use in weather and party balloons. It is also used as an inert shield for arc welding and to pressurize liquid fuel tanks in rockets. Due to its wide recreational usage, natural sources of Helium are at risk for being completely depleted in the next decade, sparking fears for the scientific community.
</p>
</div>
</div>
<div class="popup" id="Li">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_3.jpg">
<h3>3. Lithium</h3> <hr/>
<p>
Symbol: Li
<br/>
Atomic Weight: 6.94
<br/>
Description: Lithium is the lightest metal and is soft and reactive.
<br/>
Where It's Used: Lithium is known most commonly to be used in batteries. It is also used in aluminum alloys, to make cookware more durable, and most surprisingly, as a mood stabilizer for bipolar disorder.
</p>
</div>
</div>
<div class="popup" id="Be">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_4.jpg">
<h3>4. Beryllium</h3> <hr/>
<p>
Symbol: Be
<br/>
Atomic Weight: 9.012183(5)
<br/>
Description: Beryllium is a lightweight metal.
<br/>
Where It's Used: This element is most commonly used as an alloying agent for copper. When combined, the resultant metal, beryllium copper, is used for springs and a variety of electrical applications. Due to its lightweight metal properties, it is used structurally in the aerospace industries.
</p>
</div>
</div>
<div class="popup" id="B">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_5.jpg">
<h3>5. Boron</h3> <hr/>
<p>
Symbol: B
<br/>
Atomic Weight: 10.81
<br/>
Description: Boron is a hard black solid.
<br/>
Where It's Used: Boron is used in pyrotechnics. When burned, it gives off a green color in the flame. More common uses are in boric acid and borax. You can find boron in antiseptics, washing chemicals, ceramic glazes, and eye drops.
</p>
</div>
</div>
<div class="popup" id="C">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_6.jpg">
<h3>6. Carbon</h3> <hr/>
<p>
Symbol: C
<br/>
Atomic Weight: 12.011
<br/>
Description: Carbon can form different lattices like hard diamond or soft graphite.
<br/>
Where It's Used: Carbon is the basis for the world's natural organic fuels such as natural gas, coal, and oil. Graphite, a strong molecular form of carbon is used for pencils, crucibles, and electrodes. Pure diamond is also entirely made out of carbon atoms. Another common application of the element is carbon nanotubes. Throughout all of its forms, Carbon's ability to form incredibly strong lattice elemental structures make it perfect for structural applications.
</p>
</div>
</div>
<div class="popup" id="N">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_7.jpg">
<h3>7. Nitrogen</h3> <hr/>
<p>
Symbol: N
<br/>
Atomic Weight: 14.007
<br/>
Description: Nitrogen is a colorless gas.
<br/>
Where It's Used: 78 percent of Earth's entire atmosphere is made up of nitrogen. The element is significant to the chemical industry as it is a key nutrient in fertilizers and a key component in nitric acid, nylon, and explosive materials. The Haber process is a famous method of reacting nitrogen with hydrogen to create ammonia.
</p>
</div>
</div>
<div class="popup" id="O">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_8.jpg">
<h3>8. Oxygen</h3> <hr/>
<p>
Symbol: O
<br/>
Atomic Weight: 15.999
<br/>
Description: Oxygen is a colorless gas.
<br/>
Where It's Used: Oxygen is the most important element to human's survival. Pure oxygen is used to treat breathing problems and make spacecraft livable. Oxygen in industry is mainly used in the manufacturing of steel and other metal alloys.
</p>
</div>
</div>
<div class="popup" id="F">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_9.jpg">
<h3>9. Fluorine</h3> <hr/>
<p>
Symbol: F
<br/>
Atomic Weight: 18.998403163(6)
<br/>
Description: Fluorine is a yellowish poison gas and the most reactive element.
<br/>
Where It's Used: Fluorine is a common additive to drinking water and is used as a cleaning agent in toothpaste. In pop culture, hydrofluoric acid was used as a dissolving agent in the popular TV show "Breaking Bad." The chemical can dissolve glass and is used mainly as an etching compound.
</p>
</div>
</div>
<div class="popup" id="Ne">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_10.jpg <h3>10. Neon</h3> <hr/>
<p>
Symbol: Ne
<br/>
Atomic Weight: 20.1797(6)
<br/>
Description: Neon is an inert gas.
<br/>
Where It's Used: Neon is the fourth most abundant element in the entire universe. By far the most prominent use of the element is used in advertising signs. When enticed with electricity, the glass commonly glows, leading to its use in the respective sign industry as well as high-voltage indicators and lasers.
</p>
</div>
</div>
<div class="popup" id="Na">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_11.jpg">
<h3>11. Sodium</h3> <hr/>
<p>Latin-Natrium
Symbol: Na
<br/>
Atomic Weight: 22.98976928(2)
<br/>
Description: Sodium is a very reactive soft metal.
<br/>
Where It's Used: Sodium is used in streetlights to produce yellow light as well as being a component in many compounds like table salt, soda ash, borax, and baking soda.
</p>
</div>
</div>
<div class="popup" id="Mg">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_12.jpg">
<h3>12. Magnesium</h3> <hr/>
<p>
Symbol: Mg
Atomic Weight: 24.305
<br/>
Description: Magnesium is a lightweight metal.
<br/>
Where It's Used: Magnesium finds many of its uses in medicine as Epsom salts, milk of magnesia, chloride, and citrate. Magnesium is also essential to both animal and plant life.
</p>
</div>
</div>
<div class="popup" id="Al">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_13 <h3>13. Aluminium</h3> <hr/>
<p>
Symbol: Al
<br/>
Atomic Weight: 26.9815385
<br/>
Description: Aluminum is a lightweight non-corroding metal.
<br/>
Where It's Used: Aluminum is a soft and malleable metal that has uses in cans and fouls, utensils, airplane and automotive parts, and other structural applications.
</p>
</div>
</div>
<div class="popup" id="Si">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_14.jpg">
<h3>14. Silicon</h3> <hr/>
<p>
Symbol: Si
<br/>
Atomic Weight: 28.085
<br/>
Description: Silicon is a hard metalloid.
<br/>
Where It's Used: Silicon is used extensively in the semiconductor industry in solid-state electronics. For such applications, the silicon has to be doped with boron, gallium, phosphorus or arsenic.
</p>
</div>
</div>
<div class="popup" id="P">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_15.jpg">
<h3>15. Phosphorus</h3> <hr/>
<p>
Symbol: P
<br/>
Atomic Weight: 30.973761998(5)
<br/>
Description: Phosphorus is a glowing white waxy solid.
<br/>
Where It's Used: Phosphorus is the main nutrient for organic life through phosphate compounds. It is used in fertilizers to uphold the biological phosphorus cycle. It is also used in explosive and pyrotechnics.
</p>
</div>
</div>
<div class="popup" id="S">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_16.jpg">
<h3>16. Sulfur</h3> <hr/>
<p>
Symbol: S
<br/>
Atomic Weight: 32.06
<br/>
Description: Sulfur is a brittle yellow solid.
<br/>
Where It's Used: Sulfur is used in gunpowder and other pyrotechnics, rubber manufacturing, and as an insecticide, fungicide, and fumigant. It can also be used to treat skin diseases, however, its prime use is in compound separation.
</p>
</div>
</div>
<div class="popup" id="Cl">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_17.jpg">
<h3>17. Chlorine</h3> <hr/>
<p>
Symbol: Cl
<br/>
Atomic Weight: 35.45
<br/>
Description: Chlorine is a greenish poison gas.
<br/>
Where It's Used: Chlorine is used in water treatment and as an antiseptic. During the production of papers, plastics, solvents, and textiles, large amounts of chlorine are also used.
</p>
</div>
</div>
<div class="popup" id="Ar">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_18.jpg">
<h3>18. Argon</h3> <hr/>
<p>
Symbol: Ar
<br/>
Atomic Weight: 39.948(1)
<br/>
Description: Argon is an inert gas.
<br/>
Where It's Used: Argon is used in incandescent and fluorescent bulbs as a protective layer around the filament to keep oxygen from corroding it. It is also used as a protective shield in arc welding and semiconductor crystals.
</p>
</div>
</div>
<div class="popup" id="K">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_19.jpg">
<h3>19. Potassium</h3> <hr/>
<p>
Symbol: K
<br/>
Atomic Weight: 39.0983
<br/>
Description: Potassium is a soft metal and is reactive.
<br/>
Where It's Used: Potassium is mainly used in compounds. It is combined with chlorine to produce potassium chloride which is used in fertilizers. Potassium hydroxide is also used in soaps and cleaners.
</p>
</div>
</div>
<div class="popup" id="Ca">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_20.jpg">
<h3>20. Calcium</h3> <hr/>
<p>
Symbol: Ca
<br/>
Atomic Weight: 40.078(4)
<br/>
Description: Calcium is a soft metal.
<br/>
Where It's Used: Calcium is used to prepare thorium and uranium as a reducing agent. It is also used as an alloying agent in aluminum, copper, lead, and magnesium.
</p>
</div>
</div>
<div class="popup" id="Sc">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_21.jpg">
<h3>21. Scandium</h3> <hr/>
<p>
Symbol: Sc
<br/>
Atomic Weight: 44.955908
<br/>
Description: Scandium is a soft lightweight metal.
<br/>
Where It's Used: Used heavily in mercury vapor lamps, Scandium is a key element in stadium lights. Its radioactive isotope is also used as a tracing agent.
</p>
</div>
</div>
<div class="popup" id="Ti">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_22.jpg">
<h3>22. Titanium</h3> <hr/>
<p>
Symbol: Ti
<br/>
Atomic Weight: 47.867(1)
<br/>
Description: Titanium is the strongest lightweight metal and is heat-resistant.
<br/>
Where It's Used: Titanium is an incredibly strong metal used in alloys with aluminum, iron, and other metals. This strong metal is used in the aerospace industry as well as engines. It can maintain its strength in thermal extremes.
</p>
</div>
</div>
<div class="popup" id="V">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_23.jpg">
<h3>23. Vanadium</h3> <hr/>
<p>
Symbol: V
<br/>
Atomic Weight: 50.9415(1)
<br/>
Description: Vanadium is a hard metal.
<br/>
Where It's Used: This element is used in jet engines and aircraft components. All of its uses require it to be combined with another metal or element, such as Vanadium-gallium tape used in magnets.
</p>
</div>
</div>
<div class="popup" id="Cr">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_24.jpg">
<h3>24. Chromium</h3> <hr/>
<p>
Symbol: Cr
<br/>
Atomic Weight: 51.9961(6)
<br/>
Description: Chromium is a hard shiny metal.
<br/>
Where It's Used: Chromium is used in stainless steel as well as in the chrome plating process. Various chromium compounds are known for their vivid colors.
</p>
</div>
</div>
<div class="popup" id="Mn">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_25.jpg">
<h3>25. Manganese</h3> <hr/>
<p>
Symbol: Mn
<br/>
Atomic Weight: 54.938044(3)
<br/>
Description: Manganese is a hard metal.
<br/>
Where It's Used: Manganese dioxide makes up about .14% of Earth's crust. It is used in glass to remove the green color present from iron compounds.
</p>
</div>
</div>
<div class="popup" id="Fe">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_26.jpg">
<h3>26. Iron</h3> <hr/>
<p>Latin-Ferrum
Symbol: Fe
<br/>
Atomic Weight: 55.845(2)
<br/>
Description: Iron is a medium-hard metal and has magnetic properties.
<br/>
Where It's Used: Iron's prime use is in making steel. When steel is combined with chromium, it produces stainless steel which is resistant to corrosion.
</p>
</div>
</div>
<div class="popup" id="Co">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_27.jpg">
<h3>27. Cobalt</h3> <hr/>
<p>
Symbol: Co
<br/>
Atomic Weight: 58.933194(4)
<br/>
Description: Cobalt is a hard metal and is magnetic.
<br/>
Where It's Used: Cobalt is used mostly as a cancer treatment and in radiotherapy.
</p>
</div>
</div>
<div class="popup" id="Ni">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_28.jpg">
<h3>28. Nickel</h3> <hr/>
<p>
Symbol: Ni
<br/>
Atomic Weight: 58.6934(4)
<br/>
Description: Nickel is a medium-hard metal and is magnetic.
<br/>
Where It's Used: Nickel is used in stainless steel and other anti-corrosion metal alloys. Other prominent uses include piping and tubing production as well as in the desalination process.
</p>
</div>
</div>
<div class="popup" id="Cu">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_29.jpg">
<h3>29. Copper</h3> <hr/>
<p>Latin-Cuprum
Symbol: Cu
<br/>
Atomic Weight: 63.546(3)
<br/>
Description: Copper is a colored metal that conducts heat and electricity well.
<br/>
Where It's Used: Copper is one of the best conductors of electricity, which lends to its use in electronics and motors. The metal is also very thermally conductive, so it is used in radiators, A/C units, and heating systems.
</p>
</div>
</div>
<div class="popup" id="Zn">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_30.jpg">
<h3>30. Zinc</h3> <hr/>
<p>
Symbol: Zn
<br/>
Atomic Weight: 65.38(2)
<br/>
Description: Zinc is a non-corroding metal.
<br/>
Where It's Used: Zinc is used as an alloying agent in brass, nickel, silver and aluminum. Paints, rubbers, cosmetics, batteries, textiles, and inks also have a significant need for the element.
</p>
</div>
</div>
<div class="popup" id="Ga">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_31.jpg">
<h3>31. Gallium</h3> <hr/>
<p>
Symbol: Ga
<br/>
Atomic Weight: 69.723(1)
<br/>
Description: Gallium is a soft metal that has a low melting point.
<br/>
Where It's Used: Since gallium has a low melting point, it is often used in medical thermometers as a substitute for mercury. When combined with arsenic, it is used in semiconductors, lasers, and solar panels. It can also be used in mirror manufacturing.
</p>
</div>
</div>
<div class="popup" id="Ge">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_32.jpg">
<h3>32. Germanium</h3> <hr/>
<p>
Symbol: Ge
<br/>
Atomic Weight: 72.630(8)
<br/>
Description: Germanium is a brittle metalloid.
<br/>
Where It's Used: Germanium finds its uses in the semiconductor industry. When it is doped with other elements, it makes highly efficient transistors. Continuing on with its electronic uses, it is also implemented in fluorescent lamps.
</p>
</div>
</div>
<div class="popup" id="As">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_33.jpg">
<h3>33. Arsenic</h3> <hr/>
<p>
Symbol: As
<br/>
Atomic Weight: 74.921595(6)
<br/>
Description: Arsenic is a brittle metalloid.
<br/>
Where It's Used: This element is used as a doping agent in transistors, primarily with Gallium. Many arsenic compounds are used as insecticides and poisons.
</p>
</div>
</div>
<div class="popup" id="Se">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_34.jpg">
<h3>34. Selenium</h3> <hr/>
<p>
Symbol: Se
<br/>
Atomic Weight: 78.971(8)
<br/>
Description: Selenium is a brittle gray solid.
<br/>
Where It's Used: Primary uses for selenium are in the glass industry. Its properties allow it to decolorize class and make red glass as well. It is used in solar and photocells. In film photography, it is also used as a photographic toner.
</p>
</div>
</div>
<div class="popup" id="Br">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_35.jpg">
<h3>35. Bromine</h3> <hr/>
<p>
Symbol: Br
<br/>
Atomic Weight: 79.904
<br/>
Description: Bromine is a dark red liquid.
<br/>
Where It's Used: Bromine is used as a flame-retarder in plastics and electronics. It can also be used to purify and disinfect water, leading to its uses in swimming pools and hot tubs.
</p>
</div>
</div>
<div class="popup" id="Kr">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_36.jpg">
<h3>36. Krypton</h3> <hr/>
<p>
Symbol: Kr
<br/>
Atomic Weight: 83.798(2)
<br/>
Description: Krypton is an inert gas.
<br/>
Where It's Used: About .0001% of Earth's atmosphere is krypton, which makes obtaining it relatively hard. The element is used for flashes in high-speed photography as well as a conductive gas in fluorescent lights.
</p>
</div>
</div>
<div class="popup" id="Rb">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_37.jpg">
<h3>37. Rubidium</h3> <hr/>
<p>
Symbol: Rb
<br/>
Atomic Weight: 85.4678(3)
<br/>
Description: Rubidium is a soft metal that is reactive.
<br/>
Where It's Used: Rubidium is used in vacuum tubes to remove trace gases. It also is heavily used in photocells and specialized glasses. It can be ionized easily, so it is often utilized as a propellant in spacecraft.
</p>
</div>
</div>
<div class="popup" id="Sr">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_38.jpg">
<h3>38. Strontium</h3> <hr/>
<p>
Symbol: Sr
<br/>
Atomic Weight: 8 7.62(1)
<br/>
Description: Strontium is a soft metal.
<br/>
Where It's Used: Strontium is used in pyrotechnics to produce brilliant reds. It can also be used in ferrite magnet production and zinc refining.
</p>
</div>
</div>
<div class="popup" id="Y">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_39.jpg">
<h3>39. Yttrium</h3> <hr/>
<p>
Symbol: Y
<br/>
Atomic Weight: 88.90584(2)
<br/>
Description: Yttrium is a soft metal.
<br/>
Where It's Used: An oxide of yttrium is used to make red phosphorus television tubes. Along with this, it is used to increase the strength in aluminum and magnesium alloys.
</p>
</div>
</div>
<div class="popup" id="Zr">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_40.jpg">
<h3>40. Zirconium</h3> <hr/>
<p>
Symbol: Zr
<br/>
Atomic Weight: 91.224(2)
<br/>
Description: Zirconium is a non-corroding neutron-resistant metal.
<br/>
Where It's Used: Zirconium is used as an anti-corrosion compound in pumps and valves. It does not absorb neutrons, so it is also widely used in nuclear reactors.
</p>
</div>
</div>
<div class="popup" id="Nb">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_41.jpg">
<h3>41. Niobium</h3> <hr/>
<p>
Symbol: Nb
<br/>
Atomic Weight: 92.90637(2)
<br/>
Description: Niobium is a non-corroding metal with a high melting point.
<br/>
Where It's Used: Niobium is used in stainless steel alloys. Alloys produced with Niobium are very strong and are often used in pipelines and jet engines.
</p>
</div>
</div>
<div class="popup" id="Mo">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_42.jpg">
<h3>42. Molybdenum</h3> <hr/>
<p>
Symbol: Mo
<br/>
Atomic Weight: 95.95(1)
<br/>
Description: Molybdenum is a high-melting-point metal.
<br/>
Where It's Used: Molybdenum is used in missile and aircraft parts as well as the nuclear power industry. It can be used to refine petroleum, but its main use is as an alloying agent to refine steel.
</p>
</div>
</div>
<div class="popup" id="Tc">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div>
<h3>43. Technetium</h3> <hr/>
<p>
Symbol: Tc
<br/>
Atomic Weight: [98]
<br/>
Description: Technetium is a radioactive element that is long-lived.
<br/>
Where It's Used: Technetium is a synthesized element that can be used as a radioactive tracer.
</p>
</div>
</div>
<div class="popup" id="Ru">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_44.jpg">
<h3>44. Ruthenium</h3> <hr/>
<p>
Symbol: Ru
<br/>
Atomic Weight: 101.07(2)
<br/>
Description: Ruthenium is a hard metal that is non-corrosive.
<br/>
Where It's Used: Ruthenium is used as a catalyst to harden metals. It is also used in electrical contacts and to color glass.
</p>
</div>
</div>
<div class="popup" id="Rh">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_45.jpg">
<h3>45. Rhodium</h3> <hr/>
<p>
Symbol: Rh
<br/>
Atomic Weight: 102.90550(2)
<br/>
Description: Rhodium is a non-corroding hard shiny metal.
<br/>
Where It's Used: Rhodium is used to manufacture electrical contacts. This use extends into catalytic converters, but its primary use is as an alloying agent. Alloys of rhodium can be used in furnaces, electrodes, and spark plugs.
</p>
</div>
</div>
<div class="popup" id="Pd">
<div class="popup-container">
<div id="X-button"><a href="#popup-close" id="X">X</a></div> <img class="elemimg" src="images/elements/element_46.jpg">
<h3>46. Palladium</h3> <hr/>
<p>
Symbol: Pd