final home page

static/homepage.css

@@ -6,28 +6,17 @@
   font-family: SourceSansPro;
   src: url(https://static.igem.wiki/teams/5054/sourcesans3-variablefont-wght.ttf);
 }
-.homepage-holder {
-  /* it holds and expands the whole homepage */
-  margin: 0 auto;
-  width: max(100%, 1300px);
-  height: 14500px;
-  background-color: #c6ebe8;
-  /* the following codes make all boxes placed in center */
-  display: flex;
-  flex-wrap: wrap;
-  position: relative;
-  justify-content: space-around;
+.homepage-holder{
+    margin: 0 auto;
+    width: max(100%, 1300px);
+    height: 14500px;
+    background-color: #C6EBE8;
+    display: flex;
+    flex-wrap: wrap;
+    position: relative;
+    justify-content: space-around;
 }
 
-/* all the main block elements below need to add position: absolute */
-/* z-index: contents-9; backgrounds-0; canvas-5; navbar-10; logoShelter-7; logoStatic-8; shelterForbg1-6; shelterForCanvasStart-6; */
-
-/* for canvas */
-#timeline {
-  position: absolute;
-  z-index: 5;
-  top: 8150px;
-}
 
 #roadmap {
   position: absolute;
@@ -35,16 +24,15 @@
   top: 11400px;
 }
 
-/* for global styles of subtitles and contents */
-.homepage-subtitle-style {
-  margin: 0 auto;
-  text-align: left;
-  color: #05be85;
-  font-family: SourceSansPro;
-  font-size: 100px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: normal;
+.homepage-subtitle-style{
+    margin: 0 auto;
+    text-align: left;
+    color: #05BE85;
+    font-family: SourceSansPro;
+    font-size: 100px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
 }
 .homepage-contents-style {
   margin: 0 auto;
@@ -72,30 +60,28 @@
   line-height: normal;
 }
 
-.homepage-elements {
-  /* not for backgrounds!! */
-  position: absolute;
-  z-index: 9;
+.homepage-elements{
+    position: absolute;
+    z-index: 9;
 }
 
-/* main title style: */
-.homepage-maintitle {
-  top: 260px;
-  width: 1300px;
-  height: 400px;
+
+.homepage-maintitle{
+    top: 260px;
+    width: 1300px;
+    height: 400px;
 }
-.homepage-maintitle-name {
-  margin: 0 auto;
-  margin-top: 10px;
-  width: 1300px;
-  height: 200px;
-  color: #185a4f;
-  text-align: center;
-  /* font-feature-settings: 'liga' off; */
-  font-family: SourceSansPro;
-  font-size: 200px;
-  font-style: normal;
-  font-weight: 1000;
+.homepage-maintitle-name{
+    margin: 0 auto;
+    margin-top: 10px;
+    width: 1300px;
+    height: 200px;
+    color: #185A4F;
+    text-align: center;
+    font-family: SourceSansPro;
+    font-size: 200px;
+    font-style: normal;
+    font-weight: 1000;
 }
 .homepage-maintitle-subtitle {
   margin: 0 auto;
@@ -110,75 +96,16 @@
   line-height: normal;
 }
 
-/* shelter for background1 */
-.shelter-for-bg1 {
-  position: absolute;
-  margin: 0 auto;
-  top: 980px;
-  width: 300px;
-  height: 300px;
-  box-shadow: 0px 0px 30px 20px #c6ebe8;
-  background-color: #c6ebe8;
-  z-index: 6;
-}
-
-/* shelter for canvas start */
-.shelter-for-canvas-start {
-  position: absolute;
-  width: 200px;
-  height: 400px;
-  top: 950px;
-  z-index: 6;
-  transform: translateX(-150%);
-  background-color: #c6ebe8;
+.shelter-for-canvas-start{
+    position: absolute;
+    width: 200px;
+    height: 400px;
+    top: 950px;
+    z-index: 6;
+    transform: translateX(-150%);
+    background-color: #C6EBE8;
 }
 
-/* background images style: */
-.homepage-bg-img1 {
-  position: absolute;
-  z-index: 0;
-  width: 1300px;
-  height: 800px;
-  flex-shrink: 0;
-  top: 0;
-  box-shadow: inset 120px 0px 70px -30px #c6ebe8,
-    inset -120px 0px 70px -30px #c6ebe8;
-  background: url("https://static.igem.wiki/teams/5054/background-image1.svg");
-}
-.homepage-bg-img2 {
-  position: absolute;
-  z-index: 0;
-  width: 1300px;
-  height: 866.667px;
-  flex-shrink: 0;
-  top: 1686px;
-  box-shadow: inset 0px 0px 50px 30px #c6ebe8;
-  background: linear-gradient(
-      180deg,
-      rgba(198, 235, 232, 0.8) 0%,
-      rgba(198, 235, 232, 0.35) 100%
-    ),
-    url("https://static.igem.wiki/teams/5054/haberbosch-jpg.webp"),
-    50% / cover no-repeat;
-  filter: blur(3.3854165077209473px);
-}
-.homepage-bg-img3 {
-  position: absolute;
-  width: 1300px;
-  height: 1000px;
-  flex-shrink: 0;
-  top: 2800px;
-  box-shadow: inset 0px 0px 40px 20px #c6ebe8;
-  background: linear-gradient(
-      180deg,
-      #c6ebe8 0%,
-      rgba(198, 235, 232, 0) 52.08%,
-      #c6ebe8 100%
-    ),
-    url(https://static.igem.wiki/teams/5054/gettyimages-522192748-jpg.webp),
-    50% / cover no-repeat;
-  filter: blur(3.3854165077209473px);
-}
 .homepage-bg-img4 {
   position: absolute;
   width: 500px;
@@ -207,7 +134,6 @@
     transition: all 0.5s linear;
 }
 
-/* content images style: */
 .homepage-content-img1 {
   top: 1200px;
   transform: translateX(-70%);
@@ -240,46 +166,6 @@
   transition: all 0.5s linear;
 }
 
-/* .homepage-content-img1{
-    position: relative;
-    top: 930px;
-    transform: translateX(-73%);
-    width: 349.375px;
-    height: 526.094px;
-    flex-shrink: 0;
-    border-radius: 33.854px;
-    background: url("https://static.igem.wiki/teams/5054/nitrogen-atom.svg"), 50% / cover no-repeat;
-    opacity: 1;
-    transition: all 0.5s linear;
-} */
-/* .homepage-content-img2{
-    position: relative;
-    top: 1358px;
-    transform: translateX(40%);
-    width: 459.74px;
-    height: 236.979px;
-    flex-shrink: 0;
-    border-radius: 33.854px;
-    background: url("https://static.igem.wiki/teams/5054/nitrogen-bond.svg"), 40% no-repeat;
-    opacity: 0;
-    transition: all 0.5s linear;
-} */
-/* .homepage-content-img3{
-    top: 2080px;
-    transform: translateX(-65%);
-    width: 465.833px;
-    height: 304.688px;
-    flex-shrink: 0;
-    border-radius: 33.854px; */
-/* border: 0.677px solid #FFF; */
-/* background: url("https://static.igem.wiki/teams/5054/haber-bosch-process.svg");
-    background-size: 90%;
-    background-repeat: no-repeat;
-    background-position: center; */
-/* background-color: black; */
-/* opacity: 0;
-    transition: all 0.5s linear;
-} */
 .homepage-content-img3 {
     top: 2400px;
     transform: translateX(0%);
@@ -333,19 +219,6 @@
   transition: all 0.8s linear;
 }
 
-/* Put promotional video here */
-/* .homepage-content-img6{
-    top: 4110px;
-    transform: translateX(40%);
-    width: 323.646px;
-    height: 236.979px;
-    flex-shrink: 0;
-    border-radius: 33.854px;
-    background: url("https://static.igem.wiki/teams/5054/logo-kleur.svg"), 50% / cover no-repeat;
-    opacity: 0;
-    transition: all 0.5s linear;
-} */
-
 .homepage-content-img7 {
   top: 8000px;
   width: 1200px;
@@ -375,15 +248,7 @@
   opacity: 0;
   transition: all 0.5s linear;
 }
-.homepage-content-img9 {
-  top: 8950px;
-  width: 500px;
-  height: 500px;
-  transform: translateX(-60.5%);
-  background: url(https://static.igem.wiki/teams/5054/symbiotic-association.svg);
-  opacity: 0;
-  transition: all 0.5s linear;
-}
+
 .homepage-content-img10 {
   top: 8950px;
   width: 500px;
@@ -406,217 +271,6 @@
   background-size: cover;
 }
 
-/* .homepage-content-img12{ */
-/* It's an href, img is placed in its "a" in .html */
-/* top: 8515px;
-    width: 320px;
-    height: 92px;
-    transform: translateX(130%);
-}
-.homepage-content-img12>a>div{
-    margin: 0 auto;
-    width: 250px;
-    height: 60px;
-    background: url("https://static.igem.wiki/teams/4594/wiki/content-image12.png");
-    background-size: 125%;
-    background-position: left;
-    background-repeat: no-repeat;
-    transition: all 0.1s linear;
-}
-.homepage-content-img12>a>div:hover{
-    background-size: 130%;
-    transition: all 0.1s linear;
-}
-.homepage-content-img13{
-    top: 8697px;
-    transform: translateX(-66%);
-    width: 415.729px;
-    height: 236.979px;
-    flex-shrink: 0;
-    border-radius: 33.854px;
-    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.50) 100%), url("https://static.igem.wiki/teams/4594/wiki/content-image13.png"), 50% / cover no-repeat;
-    opacity: 0;
-    transition: all 0.5s linear;
-}
-.homepage-content-img14{
-    top: 8697px;
-    transform: translateX(68%);
-    width: 475.313px;
-    height: 236.979px;
-    flex-shrink: 0;
-    border-radius: 33.854px;
-    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.50) 100%), url("https://static.igem.wiki/teams/4594/wiki/content-image14.png"), 50% / cover no-repeat;
-    opacity: 0;
-    transition: all 0.5s linear;
-}
-.homepage-content-img15{
-    top: 9524px;
-    transform: translateX(110%);
-    width: 336px;
-    height: 216px;
-    flex-shrink: 0;
-    border-radius: 33.854px;
-    background: url("https://static.igem.wiki/teams/4594/wiki/content-image15.png"), 50% / cover no-repeat;
-    opacity: 0;
-    transition: all 0.5s linear;
-}
-.homepage-content-img16{
-    top: 9930px;
-    transform: translateX(110%);
-    width: 336px;
-    height: 237px;
-    flex-shrink: 0;
-    border-radius: 33px;
-    background: url("https://static.igem.wiki/teams/4594/wiki/content-image16.png");
-    background-repeat: no-repeat;
-    opacity: 0;
-    transition: all 0.5s linear;
-}
-.homepage-content-img17{
-    top: 11040px;
-    transform: translateX(-100%);
-    width: 285.729px;
-    height: 304.688px;
-    flex-shrink: 0;
-    border-radius: 33.854px;
-    background: url("https://static.igem.wiki/teams/4594/wiki/content-image17.png"), 50% / cover no-repeat;
-}
-.homepage-content-img18{
-    top: 11090px;
-    width: 266.094px;
-    height: 203.125px;
-    flex-shrink: 0;
-    border-radius: 33.854px;
-    background: url("https://static.igem.wiki/teams/4594/wiki/content-image18.png"), 50% / cover no-repeat;
-}
-.homepage-content-img19{
-    top: 11090px;
-    transform: translateX(112%);
-    width: 226.823px;
-    height: 203.125px;
-    flex-shrink: 0;
-    border-radius: 33.854px;
-    background: url("https://static.igem.wiki/teams/4594/wiki/content-image19.png"), 50% / cover no-repeat;
-}
-.homepage-content-img20{
-    top: 11090px;
-    transform: translateX(250%);
-    width: 187.552px;
-    height: 203.125px;
-    flex-shrink: 0;
-    border-radius: 33.854px;
-    background: url("https://static.igem.wiki/teams/4594/wiki/content-image20.png"), 50% / cover no-repeat;
-}
-.homepage-content-img21{
-    top: 11661px;
-    transform: translateX(-220%);
-    width: 192.969px;
-    height: 236.979px;
-    flex-shrink: 0;
-    border-radius: 33.854px;
-    background: url("https://static.igem.wiki/teams/4594/wiki/content-image21.png"), 50% / cover no-repeat;
-}
-.homepage-content-img22{
-    top: 11661px;
-    transform: translateX(-135%);
-    width: 171.302px;
-    height: 236.979px;
-    flex-shrink: 0;
-    border-radius: 33.854px;
-    background: url("https://static.igem.wiki/teams/4594/wiki/content-image22.png"), 50% / cover no-repeat;
-}
-.homepage-content-img23{
-    top: 11593px;
-    transform: translateX(60%);
-    width: 290.469px;
-    height: 304.688px;
-    flex-shrink: 0;
-    border-radius: 33.854px;
-    background: url("https://static.igem.wiki/teams/4594/wiki/content-image23.png"), 50% / cover no-repeat;    
-}
-.homepage-content-img24{
-    top: 11467px;
-    transform: translateX(190%);
-    width: 237px;
-    height: 237px;
-    flex-shrink: 0;
-    border-radius: 33.854px;
-    background: url("https://static.igem.wiki/teams/4594/wiki/content-image24.png"), 50% / cover no-repeat;    
-}
-.homepage-content-img25{
-    top: 11717px;
-    transform: translateX(190%);
-    width: 237px;
-    height: 237px;
-    flex-shrink: 0;
-    border-radius: 33.854px;
-    background: url("https://static.igem.wiki/teams/4594/wiki/content-image25.png"), 50% / cover no-repeat;    
-}
-.homepage-content-img26{
-    top: 12241px;
-    transform: translateX(-170%);
-    width: 237px;
-    height: 237px;
-    flex-shrink: 0;
-    border-radius: 33.854px;
-    background: url("https://static.igem.wiki/teams/4594/wiki/content-image26.png"), 50% / cover no-repeat;    
-}
-.homepage-content-img27{
-    top: 12241px;
-    transform: translateX(-100%);
-    width: 186px;
-    height: 237px;
-    flex-shrink: 0;
-    border-radius: 33.854px;
-    background: url("https://static.igem.wiki/teams/4594/wiki/content-image27.png"), 50% / cover no-repeat;    
-}
-.homepage-content-img28{
-    top: 12241px;
-    transform: translateX(70%);
-    width: 186px;
-    height: 237px;
-    flex-shrink: 0;
-    border-radius: 33.854px;
-    background: url("https://static.igem.wiki/teams/4594/wiki/content-image28.png"), 50% / cover no-repeat;    
-}
-.homepage-content-img29{
-    top: 12241px;
-    transform: translateX(155%);
-    width: 216.582px;
-    height: 304.688px;
-    flex-shrink: 0;
-    border-radius: 33.854px;
-    background: url("https://static.igem.wiki/teams/4594/wiki/content-image29.png"), 50% / cover no-repeat;  
-}
-.homepage-content-img30{
-    top: 12826px;
-    transform: translateX(-140%);
-    width: 203.125px;
-    height: 304.688px;
-    flex-shrink: 0;
-    border-radius: 33.854px;
-    background: url("https://static.igem.wiki/teams/4594/wiki/content-image30.png"), 50% / cover no-repeat;  
-}
-.homepage-content-img31{
-    top: 12826px;
-    transform: translateX(-44%);
-    width: 190.26px;
-    height: 237px;
-    flex-shrink: 0;
-    border-radius: 33.854px;
-    background: url("https://static.igem.wiki/teams/4594/wiki/content-image31.png"), 50% / cover no-repeat;  
-}
-.homepage-content-img32{
-    top: 12826px;
-    transform: translateX(57.8%);
-    width: 193px;
-    height: 237px;
-    flex-shrink: 0;
-    border-radius: 33.854px;
-    background: url("https://static.igem.wiki/teams/4594/wiki/content-image32.png"), 50% / cover no-repeat;  
-} */
-
-/* bottom links style */
 .homepage-link1 {
 <<<<<<< HEAD
   top: 11000px;
@@ -954,236 +608,3 @@
   opacity: 0;
   transition: all 0.5s linear;
 }
-
-/* .homepage-content7{
-    top: 4502px;
-    width: 220.052px;
-    height: 155.052px;
-    transform: translateX(-120%);
-    opacity: 0;
-    transition: all 0.5s linear;
-} */
-
-/*.homepage-content9{ */
-/* it's a shelter for lines behind logo, thus z-index is different */
-/* this element in .html has no class "homepage-elements" */
-/* top: 5750px;
-    width: 1000px;
-    height: 90px;
-    background-color: black;
-    position: absolute;
-    z-index: 7;
-}
-.homepage-content15{ */
-/* it's a subtitle content */
-/* top: 8244px;
-    width: 1000px;
-    height: 200px;
-    transform: translateX(10%);
-    font-family: Arlon;
-    font-size: 135.417px;
-    font-style: normal;
-    font-weight: 600;
-    color: transparent;
-    -webkit-text-stroke: 1px #F8F0E8;
-    opacity: 0;
-    transition: all 0.5s linear;
-}
-.homepage-content16{
-    top: 8505px;
-    width: 400px;
-    height: 92px;
-    transform: translateX(-70%);
-    opacity: 0;
-    transition: all 0.5s linear;
-}
-.homepage-content17{
-    top: 8897px;
-    width: 415px;
-    height: 120px;
-    transform: translateX(-65%);
-    opacity: 0;
-    transition: all 0.5s linear;
-}
-.homepage-content18{
-    top: 8897px;
-    width: 475px;
-    height: 120px;
-    transform: translateX(68%);
-    opacity: 0;
-    transition: all 0.5s linear;
-}
-.homepage-content19{
-    top: 9257px;
-    width: 447px;
-    height: 200px;
-    transform: translateX(-30%);
-    opacity: 0;
-    transition: all 0.5s linear;
-}
-.homepage-content20{
-    top: 9607px;
-    width: 447px;
-    height: 200px;
-    transform: translateX(-30%);
-    opacity: 0;
-    transition: all 0.5s linear;
-}
-.homepage-content21{
-    top: 10023px;
-    width: 447px;
-    height: 200px;
-    transform: translateX(-30%);
-    opacity: 0;
-    transition: all 0.5s linear;
-}
-.homepage-content22{ */
-/* it's a subtitle content */
-/* top: 10636px;
-    width: 900px;
-    height: 200px;
-    transform: translateX(5%);
-    font-family: Arlon;
-    font-size: 135px;
-    font-style: normal;
-    font-weight: 600;
-    color: transparent;
-    -webkit-text-stroke: 1px #F8F0E8;
-    opacity: 0;
-    transition: all 0.5s linear;
-}
-.homepage-content23{
-    top: 10846px;
-    width: 302px;
-    height: 100px;
-    transform: translateX(50%);
-    opacity: 0;
-    transition: all 0.5s linear;
-}
-.homepage-content24{
-    top: 11272px;
-    width: 340px;
-    height: 120px;
-    transform: translateX(-15%);
-    opacity: 0;
-    transition: all 0.5s linear;
-}
-.homepage-content25{
-    top: 11873px;
-    width: 400px;
-    height: 120px;
-    transform: translateX(-80%);
-    opacity: 0;
-    transition: all 0.5s linear;
-}
-.homepage-content26{
-    top: 11873px;
-    width: 350px;
-    height: 100px;
-    transform: translateX(60%);
-    opacity: 0;
-    transition: all 0.5s linear;
-}
-.homepage-content27{
-    top: 12455px;
-    width: 400px;
-    height: 120px;
-    transform: translateX(-80%);
-    opacity: 0;
-    transition: all 0.5s linear;
-}
-.homepage-content28{
-    top: 12455px;
-    width: 350px;
-    height: 100px;
-    transform: translateX(60%);
-    opacity: 0;
-    transition: all 0.5s linear;
-}
-.homepage-content29{
-    top: 12852px;
-    width: 400px;
-    height: 200px;
-    transform: translateX(80%);
-    opacity: 0;
-    transition: all 0.5s linear;
-}
-.homepage-content30{ */
-/* it's a subtitle content */
-/* top: 13290px;
-    width: 1100px;
-    height: 200px;
-    text-align: center;
-    font-family: Arlon;
-    font-size: 135px;
-    font-style: normal;
-    font-weight: 600;
-    color: transparent;
-    -webkit-text-stroke: 1px #F8F0E8;
-    opacity: 0;
-    transition: all 0.5s linear;
-} */
-
-/* bottom icon style */
-/* .bottom-icon1{
-    top: 14157px;
-    width: 209.115px;
-    height: 141.345px;
-    flex-shrink: 0;
-    background: url("https://static.igem.wiki/teams/4594/wiki/bottom-icon1.png");
-    background-size: contain;
-    background-repeat: no-repeat;
-    transform: translateX(18%);
-    opacity: 0;
-    transition: all 0.8s linear;
-}
-.bottom-icon2{ */
-/* top: 14133px; */
-/* top: 14150px;
-    width: 461.186px;
-    height: 267.135px;
-    flex-shrink: 0;
-    background: url("https://static.igem.wiki/teams/4594/wiki/bottom-icon2.png");
-    background-size: contain;
-    background-repeat: no-repeat;
-    transform: translateX(-5%);
-    opacity: 0;
-    transition: all 0.8s linear;
-}
-.bottom-icon3{ */
-/* top: 14169px; */
-/* top: 14163px;
-    width: 506.307px;
-    height: 256.329px;
-    flex-shrink: 0;
-    background: url("https://static.igem.wiki/teams/4594/wiki/bottom-icon3.png");
-    background-size: contain;
-    background-repeat: no-repeat;
-    transform: translateX(-12%);
-    opacity: 0;
-    transition: all 0.8s linear;
-}
-.bottom-icon4{ */
-/* top: 14151px; */
-/* top: 14154px;
-    width: 713.797px;
-    height: 232.5px;
-    flex-shrink: 0;
-    background: url("https://static.igem.wiki/teams/4594/wiki/bottom-icon4.png");
-    background-size: contain;
-    background-repeat: no-repeat;
-    opacity: 0;
-    transition: all 0.8s linear;
-}
-.bottom-icon5{ */
-/* top: 14163px; */
-/* top: 14160px;
-    width: 896.432px;
-    height: 209.378px;
-    flex-shrink: 0;
-    background: url("https://static.igem.wiki/teams/4594/wiki/bottom-icon5.png");
-    background-size: contain;
-    background-repeat: no-repeat;
-    opacity: 0;
-    transition: all 0.8s linear;
-} */

wiki/pages/home.html

@@ -63,9 +63,6 @@
 
 <div class="homepage-holder">
 
-  <!-- <div class="homepage-bg-img1"></div> -->
-  <!-- <div class="shelter-for-bg1" id="shelter-for-bg1"></div> -->
-
   <div class="homepage-content-img homepage-elements reveal" id="homepage-content-img"></div>
   <div class="homepage-maintitle-subtitle" style="margin-top:220px;text-align:center;">
     presents
@@ -113,16 +110,12 @@
       </div>
 </div>
 
-<!-- <div class="homepage-bg-img2"></div> -->
-
     <div class="homepage-content-img3 homepage-elements reveal" id="homepage-content-img3"></div>
 
     <div class="homepage-content3 homepage-elements reveal">
       The Nitrogen Crisis
     </div>
 
-  <!-- <div class="homepage-bg-img3"></div> -->
-
   <div class="homepage-content-img4 homepage-elements reveal" id="homepage-content-img4"></div>
   <div class="homepage-content-img5 homepage-elements reveal" id="homepage-content-img5"></div>
   <div class="homepage-content4 homepage-elements reveal" id="homepage-content4" style="opacity: 1;">
@@ -133,7 +126,7 @@
       Over 80% of ammonia emissions in the Netherlands are due to over-fertilization.
     </div>
 </div>
-<div class="homepage-content5 homepage-elements reveal" id="homepage-content18" style="opacity: 1;">
+<div class="homepage-content5 homepage-elements reveal" id="homepage-content5" style="opacity: 1;">
   <div class="homepage-subtitle-style" style="margin-top: 1000px;">
       Eutrophication
   </div>
@@ -178,68 +171,7 @@
   <div class="homepage-contents-style2" style="margin-top:0px;text-align:center;">
       Laying the foundation for nitrogen fixation.
   </div>
-</div>
-<!-- <canvas id="timeline" width="800" height="2000"></canvas>
-
-<script>
-  function drawTimeline() {
-      const canvas = document.getElementById('timeline');
-      if (!canvas.getContext) return;
-      const ctx = canvas.getContext('2d');
-
-      // Clear the canvas before each redraw
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-      // Get the current scroll position
-      const scrollY = window.scrollY || window.pageYOffset;
-
-      // Get the canvas position relative to the viewport
-      const canvasRect = canvas.getBoundingClientRect();
-
-      // Calculate the starting point of the canvas relative to the document
-      const canvasTop = scrollY + canvasRect.top;
-
-      // Determine the scroll progress relative to the canvas
-      const viewportHeight = window.innerHeight;
-      const scrollProgress = (scrollY + viewportHeight - canvasTop) / (canvas.height + viewportHeight);
-
-      // Clamp progress between 0 and 1
-      const progress = Math.max(0, Math.min(scrollProgress, 1));
-
-      // Drawing parameters
-      ctx.strokeStyle = '#185A4F';
-      ctx.lineWidth = 17;
-      ctx.lineCap = 'round';
-      ctx.lineJoin = 'round';
-
-      // Begin drawing
-      ctx.beginPath();
-
-      // Define your path here (customize as needed)
-      const startX = canvas.width / 2;
-      const startY = 0;
-      const endY = canvas.height;
-
-      // Calculate the current drawing point based on progress
-      const currentY = startY + (endY - startY) * progress;
-
-      // Move to the start point
-      ctx.moveTo(startX, startY);
-
-      // Draw line to the current point
-      ctx.lineTo(startX, currentY);
-
-      // Stroke the path
-      ctx.stroke();
-  }
-
-  // Initial draw
-  drawTimeline();
-
-  // Add scroll event listener
-  window.addEventListener('scroll', drawTimeline);
-</script> -->
- 
+</div> 
 <div class="homepage-content-img8 homepage-elements reveal" id="homepage-content-img8"></div>
 <div class="homepage-content11 homepage-elements reveal" id="homepage-content11">
   <div class="homepage-contents-style" style = "font-size: 40px;">
@@ -247,7 +179,6 @@
   </div>
 </div>
 
-<!-- <div class="homepage-content-img9 homepage-elements reveal" id="homepage-content-img9"></div> -->
 <div class="homepage-content12 homepage-elements reveal" id="homepage-content12">
   <div class="homepage-contents-style" style="margin-top:10px; font-size: 40px;">
       This algae originally had a symbiotic association with a bacterium named UCYN-A which would fixate nitrogen for it.
@@ -271,44 +202,6 @@
   </div>
 </div>
 
-<!--<div class="homepage-content-img10 homepage-elements reveal" id="homepage-content-img10"></div>
-<div class="homepage-content-img11 homepage-elements reveal" id="homepage-content-img11"></div>
-
-<div class="homepage-content11 homepage-elements reveal" id="homepage-content11">
-  <div class="homepage-subtitle-style">
-      <strong><i>Braarudosphaera bigelowii</i></strong>
-  </div>
-  <div class="homepage-contents-style">
-    Earlier this year, a new organelle, the nitroplast was discovered in the marine alga <strong><i>Braarudosphaera bigelowii</i></strong>.
-  </div>
-</div>
-
-<div class="homepage-content12 homepage-elements reveal" id="homepage-content12">
-  <div class="homepage-subtitle-style">
-      UCYN-A
-  </div>
-  <div class="homepage-contents-style" style="margin-top:10px;">
-      This organelle was originally a bacterium named UCYN-A, and eventually became an organelle in <strong><i>B. bigelowii</i></strong> through endosymbiosis.
-  </div>
-</div>
-
-<div class="homepage-content13 homepage-elements reveal" id="homepage-content13">
-  <div class="homepage-subtitle-style">
-      Nitrogen fixation
-  </div>
-  <div class="homepage-contents-style" style="width:304px;">
-      What makes it the first of its kind, is its ability to fixate atmospheric nitrogen!
-  </div>
-</div>
-
-<div class="homepage-content14 homepage-elements reveal" id="homepage-content14">
-  <div class="homepage-subtitle-style">
-      Nitrogen-fixing eukaryotes
-  </div>
-  <div class="homepage-contents-style">
-      We aim to transplant nitroplasts from <strong><i>B. bigelowii</i></strong> into other cells to create nitrogen-fixing eukaryotes.
-  </div>
-</div> -->
 <div class="homepage-content15 homepage-elements reveal" style="opacity: 1;">
   <span>The roadmap to nitrogen-fixing eukaryotes</span>
 </div>