News: Interactive Web Comic added to the recent updates

Author: victoradriel

docs/index.html

@@ -232,14 +232,17 @@ <h2 class="text-white display-1 lh-1 mb-4">
                         Community Contributions
                     </h2>
                     <p class="lead fw-normal text-white mb-5">Comixplain is a modular solution. Editable files are available in our repository, allowing you to use the stories as they are or to adapt them according to your needs. You can even use the provided assets to create your own stories from scratch. We encourage you to share any adaptation you make of our stories under the same licensing scheme.</p>
-                    <a class="btn btn-outline-light py-3 px-4 rounded-pill" href="https://github.com/fhstp/comixplain/tree/main/Community_Contributions" target="_blank">See Comixplain derivatives in our repository</a><br/><br/><br/>
+                    <a class="btn btn-outline-light py-3 px-4 rounded-pill" href="https://github.com/fhstp/comixplain/tree/main/Community_Contributions" target="_blank">See Comixplain derivatives in our repository</a><br/><br/>
+
+                    <br id="news" />
+
                     <h3 class="text-white display-6 lh-1 mb-4 mt-5">
                         Recent Updates:
                     </h3>
                     <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
                         <div class="carousel-inner">
                             <div class="carousel-item active" data-bs-interval="30000">
-                                <div class="row wrapperCarouselCards row-cols-1 row-cols-md-4 g-4">
+                                <div class="row wrapperCarouselCards row-cols-1 row-cols-lg-4 g-4">
 
                                   <div class="col">
                                     <div class="card text-center">
@@ -269,6 +272,20 @@ <h5 class="card-title">Comic Construction Kit</h5>
                                     </div>
                                   </div>
 
+                                  <div class="col">
+                                    <div class="card text-center">
+                                      <img src="./assets/carousel/carousel_item_webcomic.png" class="card-img-top" alt="">
+                                      <div class="card-body">
+                                        <h5 class="card-title">Interactive Web Comic</h5>
+                                        <small class="text-muted">Web-Comic for Nuclear Medicine Education created by Silvia Angjeliu. Currently available only in German</small>
+                                      </div>
+                                      <ul class="list-group list-group-flush">
+                                        <li class="list-group-item"><small class="text-muted"><a href="https://vdejesus-10510.node.fhstp.cc/" class="btn btn-primary">Try it out</a></small></li>
+                                      </ul>
+                                      <div class="card-footer"><small class="text-muted">Added on Sept, 2024</small></div>
+                                    </div>
+                                  </div>
+
                                   <div class="col">
                                     <div class="card text-center">
                                       <img src="./assets/carousel/carousel_item_translation.png" class="card-img-top" alt="">
@@ -283,6 +300,12 @@ <h5 class="card-title">New Translations</h5>
                                     </div>
                                   </div>
 
+                                </div>
+                            </div>
+
+                            <div class="carousel-item" data-bs-interval="30000">
+                                <div class="row wrapperCarouselCards row-cols-1 row-cols-lg-4 g-4">
+                                  
                                   <div class="col">
                                     <div class="card text-center">
                                       <img src="./assets/carousel/carousel_item_press.png" class="card-img-top" alt="">
@@ -297,12 +320,6 @@ <h5 class="card-title">News</h5>
                                     </div>
                                   </div>
 
-                                </div>
-                            </div>
-
-                            <div class="carousel-item" data-bs-interval="30000">
-                                <div class="row wrapperCarouselCards row-cols-1 row-cols-md-4 g-4">
-                                  
                                   <div class="col">
                                     <div class="card text-center">
                                       <img src="./assets/carousel/carousel_item_translation.png" class="card-img-top" alt="">
@@ -345,6 +362,12 @@ <h5 class="card-title">News</h5>
                                     </div>
                                   </div>
 
+                                </div>
+                            </div>
+
+                            <div class="carousel-item" data-bs-interval="30000">
+                                <div class="row wrapperCarouselCards row-cols-1 row-cols-lg-4 g-4">
+                                  
                                   <div class="col">
                                     <div class="card text-center">
                                       <img src="./assets/carousel/carousel_item_catalog.png" class="card-img-top" alt="">
@@ -359,12 +382,6 @@ <h5 class="card-title">Catalog Search</h5>
                                     </div>
                                   </div>
 
-                                </div>
-                            </div>
-
-                            <div class="carousel-item" data-bs-interval="30000">
-                                <div class="row wrapperCarouselCards row-cols-1 row-cols-md-4 g-4">
-                                  
                                   <div class="col">
                                     <div class="card text-center">
                                       <img src="./assets/carousel/carousel_item_ar.png" class="card-img-top" alt="">