Merge branch 'contribution_tutorial_1' into 'main'

Vcell_Tutorial_1

See merge request !49

static/style.css

@@ -511,6 +511,14 @@ tr:nth-child(even) {
     overflow: hidden;
     background-color: #8bd9c7; /* Add a background color for empty spaces */
   }
+
+  .carousel-container-1 {
+    position: relative;
+    width: 100%;
+    height: 450px; /* Set a fixed height for the carousel */
+    margin: auto;
+    overflow: hidden; /* Add a background color for empty spaces */
+  }
   
   .carousel {
     position: relative;

wiki/pages/contribution.html

@@ -112,6 +112,41 @@
           A document that outlines how to do so is attached below:
         </p>
         <hr>
+        <h2 style="text-align:center">How to Access Our Vcell Models</h2>
+            <div class="carousel-container-1">
+              <div class="carousel">
+                  <div class="carousel-slide">
+                    <img src="https://static.igem.wiki/teams/5114/images-arjun/2/screenshot-2024-09-29-114425.png" alt="Image 1">
+                  </div>
+                  <div class="carousel-slide">
+                    <img src="https://static.igem.wiki/teams/5114/images-arjun/bru/screenshot-2024-09-30-094052.png" alt="Image 2">
+                  </div>
+                  <div class="carousel-slide">
+                    <img src="https://static.igem.wiki/teams/5114/images-arjun/hefiefbiruebf.png" alt="Image 3">
+                  </div>
+                  <div class="carousel-slide">
+                    <img src="https://static.igem.wiki/teams/5114/images-arjun/2/screenshot-2024-09-29-115146.png" alt="Image 3">
+                  </div>
+                  <div class="carousel-slide">
+                    <img src="https://static.igem.wiki/teams/5114/images-arjun/2/screenshot-2024-09-29-115341.png" alt="Image 3">
+                  </div>
+                  <div class="carousel-slide">
+                    <img src="https://static.igem.wiki/teams/5114/images-arjun/bru/screenshot-2024-09-30-094232.png" alt="Image 3">
+                  </div>
+                  <div class="carousel-slide">
+                    <img src="https://static.igem.wiki/teams/5114/images-arjun/bru/screenshot-2024-09-30-094307.png" alt="Image 3">
+                  </div>
+                  <div class="carousel-slide">
+                    <img src="https://static.igem.wiki/teams/5114/images-arjun/2/screenshot-2024-09-29-115856.png" alt="Image 3">
+                  </div>
+                  <div class="carousel-slide">
+                    <img src="https://static.igem.wiki/teams/5114/contributions-and-design-images/image-2.webp" alt="Image 3">
+                  </div>
+                </div>
+              
+                <button class="carousel-button left-button" onclick="moveCarousel(-1)">&#10094;</button>
+                <button class="carousel-button right-button" onclick="moveCarousel(1)">&#10095;</button>
+              </div>
         <p>Our most up-to-date models can be found in a table on the experiments page. These models are free for anyone
           to tinker with and use.</p>
       </div>