From 27756dcb1519fc6ec38e2738b036fcb0afdbc926 Mon Sep 17 00:00:00 2001
From: Shraddha <ShraddhaRaghuram@student.tudelft.nl>
Date: Mon, 30 Sep 2024 15:10:46 +0200
Subject: [PATCH] final home page
---
static/homepage.css | 671 +++----------------------------------------
wiki/pages/home.html | 111 +------
2 files changed, 48 insertions(+), 734 deletions(-)
diff --git a/static/homepage.css b/static/homepage.css
index 8d4b47a..e64080a 100644
--- a/static/homepage.css
+++ b/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;
-} */
diff --git a/wiki/pages/home.html b/wiki/pages/home.html
index b11117f..1984a5c 100644
--- a/wiki/pages/home.html
+++ b/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>
--
GitLab