MoleWebsite/index.html at master · BridgetNichols/MoleWebsite · 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
90
91
92
93
<!DOCTYPE html>
<html lang="en" dir="ltr">

     <head>

          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
          <title>History of the Mole</title>
          <link rel="icon" type="image/x-icon" href="Images/favicon.ico">

          <!-- Bootstrap css-->
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

          <!-- Animate CSS -->
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

          <!-- Fonts -->
          <link href="https://fonts.googleapis.com/css?family=Dosis|Sedgwick+Ave&display=swap" rel="stylesheet">

          <link rel="stylesheet" href="index.css">

     </head>

     <body>

          <div class="container-fluid" style="background-color:rgb(81,124,95);">
               <div class="container-fluid" style="height:75px;"></div>
               <img src="Images/moleday.png" class="img-fluid rounded mx-auto d-block" style="border-style:solid;border-color:rgb(167,165,82);border-width:10px;margin:0px;">
          </div>
          <div class="container-fluid" style="background-color:rgb(167,165,82);height:90px;">
          </div>
          <div class="container-fluid" style="background-color:rgb(237,217,134);">

               <center><strong><h1 class="animated fadeInUp fast">What is mole day?</h1></strong></center>
               <center><p class="animated fadeInUp fast" style="animation-delay:.5s;">Mole day is an unofficial holiday celebrated on October 23rd from 6:02am to 6:02pm. It is usually celebrated by chemists, students, and very enthusiastic chemistry teachers, but it can be celebrated by anyone.</p></center>

               <center><strong><h1 class="animated fadeInUp fast" style="animation-delay:1s;">What is a mole?</h1></strong></center>
               <center><p class="animated fadeInUp fast" style="animation-delay:1.5s;">Besides being a furry pest to gardeners, a mole is a unit used to measure particles. Particles are very small, so chemists needed an adequate unit to measure particles, hence the mole was created.</p></center>

               <center><strong><h1 class="animated fadeInUp fast" style="animation-delay:2s;">How big is a mole?</h1></strong></center>
               <center><p class="animated fadeInUp fast" style="animation-delay:2.5s;">The number of particles in a mole is Avogadro's number. Avogadro's number is a big number. And by a big number, I mean a very big number. 6.02214076 * 10<sup>23</sup>(we typically round this number to 6.02 * 10<sup>23</sup>) to be exact. That is:</p></center>
               <div class="animated pulse slower infinite" style="animation-delay:3.5s;"><center><p class="animated fadeInUp fast" style="animation-delay:3s;font-size:22px;">60,221,407,600,000,000,000,000</p></center></div>
               <center><p class="animated fadeInUp fast" style="animation-delay:3.5s;">Now that's a big number, but how big does a mole of a substance look like.</p></center>
               <img src="Images/molesubstances.jpeg" class="animated fadeInUp fast img-fluid rounded mx-auto d-block" style="animation-delay:4s;">
               <center><p class="animated fadeInUp fast" style="animation-delay:4.5s;">Pictured above are examples of how big a mole is of the substances(from left to right) zinc, carbon, magnesium, copper, sulfur, silicon, lead, and tin. As you can see, moles of particles don't look that large because particles are very small. It may not seem like Avogadro's number is that big considering how small these moles look, but don't be fooled.</p></center>
               <center><ul>
                 <li class="animated fadeInUp fast" style="animation-delay:5s;">If a quanity of marbles equal to Avoagadro's number were spread over the entire Earth, our planet would be covered to a depth of 3 miles.</li>
                 <li class="animated fadeInUp fast" style="animation-delay:5.5s;">There are around 6.6 billion people on Earth. To equal the population of Avogadro's number, we'd need 9.12 * 10<sup>13</sup> Earths.</li>
                 <li class="animated fadeInUp fast" style="animation-delay:6s;">If you had Avogadro's number in money, you could spend $800 billion a day and not run out of money for 2.06*10<sup>9</sup> years.</li>
               </ul></center>

               <center><strong><h1 class="animated fadeInUp fast" style="animation-delay:6.5s">Why do we use moles?</h1></strong></center>
               <center><p class="animated fadeInUp fast" style="animation-delay:7s;">As was stated before, moles were created as an adequate way to measure particles. Particles are very small. They make up our entire world, and although they aren't the smallest things that make up our world, they are still very small. To put this into perspective, there are more atoms(another word for particles) in one grain of salt than there is grains of sand in all of the beaches in the world. Single atoms or particles are far too small to be measured or weighed; we have to work with lots of them in order to be able to measure and experiment with them. Moles allow chemists to manipulate the atomic world with macroscopic units.</p></center>

               <center><strong><h1 class="animated fadeInUp fast" style="animation-delay:8s">How was the mole created?</h1></strong></center>
               <center><p class="animated fadeInUp fast" style="animation-delay:8.5s;">Contrary to what many people believe, the mole and Avogadro’s number were not completely invented by Amedeo Avogadro. As with most things in science, discoveries happen gradually, and are the work of countless scientists. Avogadro’s work is no exception to this.</p></center>
               <img src="Images/amedeo-avogadro.jpeg" class="animated fadeInUp fast img-fluid rounded mx-auto d-block" style="animation-delay:9s;">
               <center><p class="animated fadeInUp fast" style="animation-delay:9.5s;">Avogadro’s constant is thought to have originated from another of Avogadro’s discoveries; the discovery that all gases at the same temperature and pressure contain the same amount of particles. This ideology later came to be known as Avogadro’s law, and is one of the things he is most famous for.</p></center>
               <img src="Images/avogardos-hypothesis-gas.png" class="animated fadeInUp fast img-fluid rounded mx-auto d-block" style="animation-delay:10s;">
               <center><p class="animated fadeInUp fast" style="animation-delay:10.5s;">Despite Avogadro having come up with the explanation for Avogadro’s law, a French chemist and hot hair balloonist by the name of Joseph Gay-Lusaac was the one who actually originated this breakthrough discovery. His work in studying gases stemmed from his fascination with the gases that lifted his balloons. He observed that volumes of gases reacted with each other in ratios of small whole numbers. This observation is demonstrated in the diagram below. Two volumes of carbon monoxide are being reacted with one volume of oxygen to yield two volumes of carbon dioxide. At the time, this perfect yield made no sense until Avogadro was able to use these observations to formulate Avogadro’s law as mentioned in the previous paragraph.</p></center>
               <img src="Images/Gay-Lussac-Discovery.jpg" class="animated fadeInUp fast img-fluid rounded mx-auto d-block" style="animation-delay:11s;">
               <center><p class="animated fadeInUp fast" style="animation-delay:11.5s;">Despite the discovery that all gases contain the same amount of particles at the same temperature and pressure, scientists at the time still did not know exactly how many particles were in a defined volume. Avogadro’s law ultimately motivated scientists to start figuring out how many particles were in a given amount of substances starting with the Austrian chemist, Josef Loschmidt.</p></center>
               <img src="Images/Josef Loschmidt.jpeg" class="animated fadeInUp fast img-fluid rounded mx-auto d-block" style="animation-delay:12s;">
               <center><p class="animated fadeInUp fast" style="animation-delay:12s;">Loschmidt used Kinetic Molecular Theory to come up with an estimate as to how many particles were in a cubic centimeter of gas. His estimate came out to be 1.83 * 10<sup>18</sup> atoms/cm<sup>3</sup>.</p></center>
               <center><p class="animated fadeInUp fast" style="animation-delay:12.5s;">When this constant was first introduced, it was named Loschmidt’s constant. This changed in a 1909 paper entitled "Brownian Movement and Molecular Reality." It was written by the French chemist, Jean Perrin, and proposed naming the constant Avogadro’s number. This name ultimately stuck and became the accepted name as it was published in many popular chemistry books despite having not actually been discovered by Avogadro himself.</p></center>
               <img src="Images/Jean Perrin.jpeg" class="animated fadeInUp fast img-fluid rounded mx-auto d-block" style="animation-delay:13s;">
               <center><p class="animated fadeInUp fast" style="animation-delay:13.5s;">Around the time that Avogadro’s number was being developed, scientists had started to develop the concept of having a standard number of particles correspond to the mass of a solid. Or in other words, they wanted a unit that could make it easy to translate between the macroscopic and atomic worlds.This concept became known as “Kilogrammemolekuel” but was later shortened to the “mole” in which we are familiar with today.</p></center>
               <center><p class="animated fadeInUp fast" style="animation-delay:14s;">So now you know how Avogadro’s number was first created, but up until this point Avogadro’s number was still the value Loschmidt had determined of 1.83 * 10<sup>18</sup> atoms/cm^3, which is not the accepted value that we know today. So how exactly did Avogadro’s number change to be the number we know it as now?</p></center>
               <center><p class="animated fadeInUp fast" style="animation-delay:14.5s;">The origin of Avogadro’s Number change is actually rooted to when it was first being published and circulated. In the early twentieth century, physicists had been trying to develop a unified atomic mass scale, or an accepted way to relatively compare the masses of one atom of an element to that of another. This system was originally agreed upon to be based on Oxygen with an arbitrary value of 16.</p></center>
               <center><p class="animated fadeInUp fast" style="animation-delay:15s;">This changed however in 1961 when the International Committee for Weights and Measures decided to instead base the unified atomic mass scale on the most common isotope of carbon, carbon-12 and decided that it would have a mass of 12 atomic mass units.</p></center>
               <center><p class="animated fadeInUp fast" style="animation-delay:15.5s;">A decade later, the mole was added to the metric system as the amount of atoms in 12 grams of carbon-12 and thus Avogadro’s Number was changed to 6.02 * 10<sup>23</sup>.</p></center>

               <center><strong><h1 class="animated fadeInUp fast" style="animation-delay:16s">Happy Mole Day!</h1></strong></center>
               <center><p class="animated fadeInUp fast" style="animation-delay:16.5s;">If you have read this far, than thank you so much for reading and taking a look at my website. This website was created as part of a project for my chemistry class in January-February of 2020. In addition to this website, I also 3D modeled Diglett from Pokemon.</p></center>

               <center><div class="sketchfab-embed-wrapper animated fadeInUp fast" style="animation-delay:17s;">
                 <iframe title="A 3D model" width="640" height="480" src="https://sketchfab.com/models/5732ebb8cb114c28ac448aae19a2d060/embed" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

                 <p style="font-size: 13px; font-weight: normal; margin-top:5px; color: #4A4A4A;">
                   <a href="https://sketchfab.com/3d-models/mole-day-diglett-5732ebb8cb114c28ac448aae19a2d060?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: rgb(81,124,95);">Mole Day Diglett</a>
                   by <a href="https://sketchfab.com/bridgetmnichols?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: rgb(81,124,95);">bridgetmnichols</a>
                   on <a href="https://sketchfab.com?utm_medium=embed&utm_source=website&utm_campaign=share-popup" target="_blank" style="font-weight: bold; color: rgb(81,124,95);">Sketchfab</a>
                 </p>
               </div></center>

               <center><p class="animated fadeInUp fast" style="animation-delay:17.5s;">If you enjoyed this project or are interested in what went into creating this project, than you can find the <a href="https://github.com/BridgetNichols/MoleWebsite" target="_blank" class="github-link"><u>source code for this website</u></a> on GitHub. Keep in mind that I made this project in two weeks, so the code is a bit messy and is not perfect by any means.</p></center>
               <center><p class="animated fadeInUp fast" style="animation-delay:18s;">With that being said, happy mole day and enjoy this funny thing I found when I searched avogadros number.</p></center>
               <img src="Images/AvogadrosPhoneNumber.png" class="animated fadeInUp fast img-fluid rounded mx-auto d-block" style="animation-delay:18.5s;">

          </div>

     </body>
</html>