periodic-table/noble.html at main · 0770-Lakshya/periodic-table · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Noble Gases</title>

</head>
<style>
  body {
    margin: 0;
    font-family: 'Times New Roman', Times, serif;
    background: linear-gradient(-45deg, #ff6ec4, #7873f5, #4ade80, #facc15);
    background-size: 400% 400%;
    animation: gradientShift 10s ease infinite;
    color: white;
  }

  @keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  .noble {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: wavy;
    font-weight: bold;
    color: #170808;
    background-color: rgba(255, 255, 255, 0.226);
    padding: 10px 15px;
    justify-content: center;
  }

  .main {
    gap: 8px;
    text-decoration: wavy;
    font-weight: bold;
    color: #270f0f;
    background-color: rgba(32, 20, 20, 0.1);
    padding: 10px 15px;
    justify-content: center;
  }

  .classification-links a {
    text-decoration: none;
    padding: 10px 10px;
    border-radius: 20px;
    font-weight: bold;
    color: rgb(49, 11, 11);
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #a76de1;
    padding: 10px 15px;
    justify-content: center;
  }
  img {
  border-radius: 12px; /* Adjust the value as needed */
}
</style>
<body>
  <header>
    <h1 class="main">🟣 Noble Gases</h1>
  </header>
  <main>
    <p class="noble">Noble gases are inert elements found in Group 18 of the periodic table.</p>
    <p class="noble">>>Noble gases are colorless, odorless, and extremely unreactive due to their full valence electron shells. They are used in lighting, welding, and as inert environments for chemical reactions. Their stability makes them unique among the elements.</p>
    <ul>
      <li>Helium (He)</li>
      <li>Neon (Ne)</li>
      <li>Argon (Ar)</li>
      <li>Krypton (Kr)</li>
      <li>Xenon (Xe)</li>
      <li>Radon (Rn)</li>
      <li>Oganesson (Og)</li>
    </ul>
    <main>
      <img id="content-frame" src="/noble gases.jpg" width="1500px" height="1000px" style="border: none;" />
      <div class="classification-links">
        <a href="https://www.youtube.com/results?search_query=what+are+noble+gases" target="blank" rel="noopener noreferrer" class="classification-links">
          Watch a Video
        </a>
      </div>
    </main>
  </main>
</body>
</html>