Nitrogen crisis

static/homepage.css

@@ -133,7 +133,7 @@
     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{
+.homepage-bg-img3{
     position: absolute;
     z-index: 0;
     width: 1300px;
@@ -141,9 +141,9 @@
     flex-shrink: 0;
     top: 8324px;
     box-shadow: inset 0px 0px 40px 20px #C6EBE8;
-    background: linear-gradient(180deg, #C6EBE8 0%, rgba(198, 235, 232, 0.00) 52.08%, #C6EBE8 100%), url("https://static.igem.wiki/teams/5054/plants-fixing.svg"), 50% / cover no-repeat;
+    background: linear-gradient(180deg, #C6EBE8 0%, rgba(198, 235, 232, 0.00) 52.08%, #C6EBE8 100%), url("https://static.igem.wiki/teams/5054/gettyimages-522192748-jpg.webp"), 50% / cover no-repeat;
     filter: blur(3.3854165077209473px);
-} */
+}
 
 
 
@@ -237,23 +237,47 @@
 }
 
 .homepage-content-img4{
+    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/5054/europe-global-fertilizer-and-manure-version-1-nitrogen-in-manure-production-6172666199.jpg"), 50% / cover no-repeat;
+    opacity: 0;
+    transition: all 0.5s linear;
+}
+
+.homepage-content-img5{
+    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/5054/river-algae-sichuan.jpg"), 50% / cover no-repeat;
+    opacity: 0;
+    transition: all 0.5s linear;
+}
+
+/* .homepage-content-img4{
     top: 3377px;
     width: 848.385px;
     height: 304.688px;
     flex-shrink: 0;
     background: url("https://static.igem.wiki/teams/5054/plants-fixing.svg");
     transition: all 0.8s linear;
-}
+} */
 
 
-.homepage-content-img5{
+/* .homepage-content-img5{
     top: 3377px;
     width: 848.385px;
     height: 304.688px;
     flex-shrink: 0;
     background: url("https://static.igem.wiki/teams/5054/ezgif-1-022f83dee9.webp");
     transition: all 0.8s linear;
-}
+} */
 /* Put promotional video here */
 /* .homepage-content-img6{
     top: 4110px;
@@ -622,16 +646,40 @@
     opacity: 0;
     transition: all 0.5s linear;
 }
-/* .homepage-content3{
-    top: 2400px;
+.homepage-content3{ 
+    /* it's a subtitle content */
+    top: 8244px;
     width: 1000px;
-    height: 35px;
+    height: 200px;
+    transform: translateX(10%);
+    font-family: SourceSansPro;
+    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-content4{ 
+}
+.homepage-content4{
+    top: 8897px;
+    width: 415px;
+    height: 120px;
+    transform: translateX(-65%);
+    opacity: 0;
+    transition: all 0.5s linear;
+}
+.homepage-content5{
+    top: 8897px;
+    width: 475px;
+    height: 120px;
+    transform: translateX(68%);
+    opacity: 0;
+    transition: all 0.5s linear;
+}
+/* .homepage-content4{  */
     /* it's a subtitle content */
-    top: 2864px;
+    /* top: 2864px;
     width: 1000px;
     height: 100px;
     font-family: SourceSansPro;
@@ -642,14 +690,14 @@
     -webkit-text-stroke: 1px #05BE85;
     opacity: 0;
     transition: all 0.7s linear;
-}
-.homepage-content5{
+} */
+/* .homepage-content5{
     top: 3805px;
     width: 400px;
     height: 65px;
     opacity: 0;
     transition: all 0.5s linear;
-}
+} */
 .homepage-content6{
     top: 4165px;
     width: 235px;

wiki/pages/home.html

@@ -106,27 +106,45 @@
 <div class="homepage-bg-img2"></div>
 
     <div class="homepage-content-img3 homepage-elements reveal" id="homepage-content-img3"></div>
-    <div class="homepage-content4 homepage-elements reveal">
-      What if plants could fix their own nitrogen
-      <span style="font-family:'Courier New', Courier, monospace">?</span>
-  </div>
-  <div class="homepage-content-img4 homepage-elements reveal"></div>
-  
-  <div class="homepage-content5 homepage-elements reveal">
-    <div class="homepage-contents-style" style="margin-top:0px;">
-        If using this algae to provide light, we will reduce carbon emissions and help carbon neutrality!
+
+    <div class="homepage-content3 homepage-elements reveal">
+      <span style="font-family:'Courier New', Courier, monospace">#</span>The Nitrogen Crisis
     </div>
-</div>
-<div class="homepage-content6 homepage-elements reveal">
-    <div class="homepage-contents-style" style="margin-top:0px;width:300px;">
-        However, the luminous intensity is too low, and the conditions to culture them are too complicated to simulate.
+
+  <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">
+    <div class="homepage-subtitle-style">
+        Over-fertilization
     </div>
-</div>
-<div class="homepage-content7 homepage-elements reveal">
-    <div class="homepage-contents-style" style="margin-top:0px;width:300px;">
-        Fortunately, synthetic biology has made it possible - we can synthesize our own noctilucent algae.
+    <div class="homepage-contents-style" style="margin-top:10px;">
+      The Netherlands grapples with a crippling nitrogen crisis with over 80% of ammonia emissions coming from over-fertilization.
     </div>
 </div>
+<div class="homepage-content5 homepage-elements reveal" id="homepage-content18">
+  <div class="homepage-subtitle-style">
+      Eutrophication
+  </div>
+  <div class="homepage-contents-style" style="margin-top:10px;">
+    Excessive ammonia enrichment promotes uncontrolled algal blooms in water bodies causing eutrophication, which leads to loss of biodiversity.
+  </div>
+</div>
+
+
+
+
+
+
+
+    <!-- <div class="homepage-content4 homepage-elements reveal">
+      What if plants could fix their own nitrogen
+      <span style="font-family:'Courier New', Courier, monospace">?</span>
+  </div>
+  <div class="homepage-content-img4 homepage-elements reveal"></div> -->
+
+
 
 </div>