_includes/infographics/infographics.html in appscms-tools-theme-3.6.8 vs _includes/infographics/infographics.html in appscms-tools-theme-3.6.9

@@ -1,31 +1,83 @@
+<style>
+    /* Reset default browser styles */
+   
+    .infographic {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin: 50px auto;
+      max-width: 800px;
+    }
+    .infographic-item {
+      flex-basis: 30%;
+      text-align: center;
+    }
+
+    .infographic-item img {
+      max-width: 100%;
+      height: auto;
+      border-radius: 8px;
+      margin-bottom: 10px;
+    }
+
+    .infographic-item h3 {
+      font-size: 20px;
+      margin-bottom: 10px;
+    }
+
+    .infographic-item p {
+      font-size: 16px;
+    }
+
+    @media (max-width: 600px) {
+      .infographic {
+        flex-wrap: wrap;
+      }
+
+      .infographic-item {
+        flex-basis: 100%;
+        margin-bottom: 30px;
+      }
+    }
+  </style>
 <div class="infographics_section">
-    <h3 class="text-center w-100 mb-3"><b>Infographics Section</b></h3>
-    <div class="slider">
+    <h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
+    <div class="infographic">
+        {%- for item in featureData.infographics -%}
+        <div class="infographic-item">
+            <img src="{{item.image}}" alt="Image 1">
+            <p class="infographic-desc">{{item.description | capitalize }}</p>
+        </div>
+            {%- endfor -%}
+    </div>
+
+
+    <!-- <div class="slider">
         <div class="row">
             <div class="col-md-12 mx-auto">
                 <div id="carousel">
                     {%- for item in featureData.infographics -%}
                     <div class="slide">
                         <img src="{{item.image}}" alt="Photo1" />
-                        <p class="infographics-desc">{{item.description | capitalize }}</p>
+                     <p class="infographics-desc">{{item.description | capitalize }}</p>
                     </div>
                     {%- endfor -%}
                 </div>
             </div>
         </div>
         <button class="btn-slide prev"><i class="fas fa-3x fa-chevron-circle-left"></i></button>
         <button class="btn-slide next"><i class="fas fa-3x fa-chevron-circle-right"></i></button>
-    </div>
-    <div class=" dots-container">
+    </div> 
+    <div class="dots-container">
         {%- for item in featureData.infographics -%}
         <span class="dot active" data-slide="{{ forloop.index0 }}"></span>
         {%- endfor -%}
-    </div>
+    </div> -->
 </div>
 
-<script>
+<!-- <script>
     function Slider() {
         const carouselSlides = document.querySelectorAll('.slide');
         const btnPrev = document.querySelector('.prev');
         const btnNext = document.querySelector('.next');
         const dotsSlide = document.querySelector('.dots-container');
@@ -66,6 +118,6 @@
                 activeDot(slide);
             }
         });
     };
     Slider();
-</script>
+</script> -->
\ No newline at end of file