-
Notifications
You must be signed in to change notification settings - Fork 0
/
website.html
78 lines (74 loc) · 3.46 KB
/
website.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
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Mukta&display=swap" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
<title>QuantumX</title>
</head>
<body>
<nav class="navbar">
<div class="logo">
<img class="image_logo" src="images/v1_12.png" alt="logo" />
<span class="logo_text">QuantumX</span>
</div>
<ul class="nav-menu v-class-resp">
<li class="active"><a class="nav-link" href="#pg1">Elements</a></li>
<li><a class="nav-link" href="#pg2">Modern Periodic Table</a></li>
<li><a class="nav-link" href="#pg3">More Reference</a></li>
<li><a class="nav-link" href="#pg4">About</a></li>
</ul>
</nav>
<! pages>
<section id="pg1">
<div class="box_shadow">
<div class="buttons">
<span class="elements">Elements</span>
<button class="btn first" onclick="HtoBe()">H to Be</button>
<button class="btn second" onclick="BtoO()">B to O</button>
<button class="btn third" onclick="FtoMg()">F to Mg</button>
<button class="btn fourth" onclick="AltoS()">Al to S</button>
<button class="btn fifth" onclick="CltoCa()">Cl to Ca</button>
<button class="btn sixth" onclick="SctoCr()">Sc to Cr</button>
<button class="btn seventh" onclick="MntoNi()">Mn to Ni</button>
<button class="btn eighth" onclick="CuAndZn()">Cu & Zn</button>
</div>
</div>
</section>
<section id="pg2" class="page2">
<div class="mpt">
<div class="mptText"><span class="mptTextMain">Take a look at the Modern Periodic Table!</span></div>
<div class="mptPic"><img class="mptPicImg" src="images/mptMain.png" alt="Modern Periodic Table" /></div>
</div>
</section>
<section id="pg3" class="page3">
<div class="moreReference">
<div class="pdText">
<span class="Text">First Twenty Elements</span>
</div>
<div class="mptPic">
<img class="mptPicImg" src="images/first_20_elements3.png" alt="Modern Periodic Table" />
</div>
<div class="Reference">
<a target="_blank" class="reference" href="https://byjus.com/periodic-table/">More Reference</a>
</div>
</div>
</section>
<section id="pg4" class="page4">
<div class="about">
<span class="About">About</span>
<p>This App is made to learn the elements of the Modern periodic table through machine learning. It sounds exciting right?!</p>
<p>We use Google’s Teachable Machine Image Model to learn the first thirty elements in Chemistry.</p>
</div>
</section>
<script src="traverse.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(document).on('click', 'ul li', function () {
$(this).addClass('active').siblings().removeClass('active')
})
</script>
</body>
</html>