Added the Changes

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

Gita-Storyline/storyline.css

@@ -1,6 +1,6 @@
-*{
+* {
     box-sizing: border-box;
-}
+  }
 body{
 margin: 0;
 padding: 0;
@@ -43,4 +43,76 @@ overflow-y: hidden;
         animation: animate 60s linear infinite;
         position: relative;
     }
-}
+}
+
+
+#left-arrow, #right-arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 30px;
+    width: 30px;
+}
+
+
+#left-arrow,
+#right-arrow {
+  position: absolute;
+  top: calc(50% + 16%);
+  transform: translateY(-50%);
+  height: 30px;
+  width: 30px;
+  cursor: pointer;
+}
+
+#left-arrow {
+  left: calc(20px + 10%);
+}
+
+#right-arrow {
+  right: calc(20px + 10%);
+}
+
+
+
+.image-container {
+    display: flex;
+    justify-content: center;
+    gap: 50px;
+    align-items: center;
+    height: 100vh;
+}
+
+
+#arjuna-image {
+
+    z-index: 2;
+    position: absolute;
+    top: calc(50% + 24%);
+    left: calc(50% - 20%);
+    transform: translateY(-50%);
+}
+
+
+#krishna-image {
+    z-index: 2;
+    position: absolute;
+    top: calc(50% + 19%);
+    left: calc(50% + 4%);
+    transform: translateY(-50%);
+}
+/* ... (existing CSS rules above) ... */
+
+/* Styles for the conversation boxes */
+.conversation-box {
+    position: absolute;
+    width: 200px;
+    height: 80px;
+    background-color: white;
+    border: 2px solid black;
+    border-radius: 5px;
+    padding: 10px;
+    font-size: 14px;
+    text-align: left;
+    z-index: 3;
+  }

Gita-Storyline/storyline.html

@@ -193,7 +193,22 @@
         </ul>
       </nav>
     </header>
+
     <div class="milky-way"></div>
+  <div id="left-arrow">
+    <img src="left.png" alt="left-arrow">
+  </div>
+  <div id="right-arrow">
+    <img src="right.png" alt="right-arrow">
+  </div>
+
+<!-- <div class="conversation-box" id="arjuna-conversation"></div> -->
+<img id="arjuna-image" src="./Arjuna/arjuna1.png" alt="Arjuna" />
+<!-- <div class="conversation-box" id="krishna-conversation"></div> -->
+<img id="krishna-image" src="./Krishna/krishna1.png" alt="Krishna" />
+
+
+
     <script>
       const hamburger = document.querySelector(".hamburger");
       const navLink = document.querySelector(".nav__link");

Gita-Storyline/storyline.js

@@ -1 +1,40 @@
+const arjunaConversation = document.getElementById("arjuna-conversation");
+const krishnaConversation = document.getElementById("krishna-conversation");
 
+const arjunaQuestions = [
+  "Arjuna: Who is Krishna?",
+  "Arjuna: What is the purpose of life?",
+  "Arjuna: How can one attain enlightenment?",
+];
+
+const krishnaAnswers = [
+  "Krishna: I am the Supreme Personality of Godhead.",
+  "Krishna: The purpose of life is to attain self-realization and understand the eternal soul.",
+  "Krishna: By practicing meditation and devotional service, one can attain enlightenment.",
+];
+
+let arjunaIndex = 0;
+let krishnaIndex = 0;
+
+function updateConversationBoxes() {
+  arjunaConversation.innerText = arjunaQuestions[arjunaIndex];
+  krishnaConversation.innerText = krishnaAnswers[krishnaIndex];
+}
+
+function handleKeyPress(event) {
+  if (event.key === "ArrowRight") {
+    arjunaIndex = (arjunaIndex + 1) % arjunaQuestions.length;
+    krishnaIndex = (krishnaIndex + 1) % krishnaAnswers.length;
+    updateConversationBoxes();
+  } else if (event.key === "ArrowLeft") {
+    arjunaIndex = (arjunaIndex - 1 + arjunaQuestions.length) % arjunaQuestions.length;
+    krishnaIndex = (krishnaIndex - 1 + krishnaAnswers.length) % krishnaAnswers.length;
+    updateConversationBoxes();
+  }
+}
+
+// Attach event listener for keypress
+document.addEventListener("keydown", handleKeyPress);
+
+// Initial update of conversation boxes
+updateConversationBoxes();