From e620b59de3000ac4070a93ec4bbe30a1fbf938a1 Mon Sep 17 00:00:00 2001
From: NehaaAcharya <nehaa.acharya@hotmail.com>
Date: Wed, 15 Jan 2025 20:07:55 +0530
Subject: [PATCH 1/2] Implemented infinite scrolling on example images in
 index.html

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 67cec40..b756b85 100644
--- a/index.html
+++ b/index.html
@@ -163,7 +163,7 @@
     <div class="section" id="charts">
         <p class="heading reveal">Here are some examples of what you can do with Dataverse</p>
         <div class="examples reveal" id="examples">
-
+            
             <img src="website/web_images/volcano.gif" alt="">
             <img src="website/web_images/live.gif" alt="">
             <img src="https://i0.wp.com/learnbyinsight.com/wp-content/uploads/2020/09/sub-plot.png?resize=600%2C398&ssl=1"

From 0158c134522a98ae3891bee68db584103f45a62f Mon Sep 17 00:00:00 2001
From: NehaaAcharya <nehaa.acharya@hotmail.com>
Date: Fri, 17 Jan 2025 18:21:39 +0530
Subject: [PATCH 2/2] Added infinite scrolling and hover-pause functionality in
 style.css

---
 website/styles/style.css | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/website/styles/style.css b/website/styles/style.css
index 4a85665..c1b97e3 100644
--- a/website/styles/style.css
+++ b/website/styles/style.css
@@ -1209,6 +1209,40 @@ input {
     padding: 10px;
     border: 1px solid rgba(128, 128, 128, 0.352);
 }
+/* Infinite scroll */
+#examples, #examples2 {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow: hidden;
+    width: 100%;
+}
+
+.examples img {
+    margin-right: 20px; 
+    width: 200px; 
+}
+
+#examples:not(:hover) img,#examples2:not(:hover) img{
+    animation: scrollImages 10s linear infinite;
+}
+
+#examples:hover img, #examples2:hover img {
+    animation-play-state: paused;
+}
+
+
+#examples img:hover, #examples2 img:hover {
+    animation-play-state: paused;
+}
+
+@keyframes scrollImages {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-100%);
+    }
+}
 /*===========================RESPONSIVE===================================*/
 @media screen and (max-width: 660px) {
     .navbarButton {