akshitagupta15june · ManaswiKasiraju · Jun 20, 2023 · Jun 20, 2023 · Jun 20, 2023 · Jun 20, 2023
diff --git a/quotes_page/krishna.css b/quotes_page/krishna.css
@@ -0,0 +1,34 @@
+body{
+    margin: 0;
+    padding: 0;
+}
+*{
+    text-decoration: none;
+}
+button{
+    background: #a3caff;
+    font-size: 1.2rem;
+    color: rgb(36, 41, 5); 
+    margin-left: 20px; 
+    border-radius: 20px; 
+    padding: 12px 22px;
+    border: none;
+    outline: none;
+    border-radius: 10px;
+    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+button a{
+    color: rgb(149, 53, 53); 
+    font-weight: bolder; 
+    font-size: 100px;
+}
+button{
+    position: absolute;
+    top: 50%;
+    left: 45%;
+}
+button:hover {
+    background: #3facf4;
+    color: rgb(84, 103, 117);
+    cursor: pointer;
+  }
diff --git a/quotes_page/krishna.html b/quotes_page/krishna.html
@@ -0,0 +1,41 @@
+<!--<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
+    <title>Background Music</title>
+    <link rel="stylesheet" href="../quotes_page/krishna.css">
+</head>
+<body style="background: url('../Images/ThankfulEnchantingDairycow-size_restricted.gif');
+             background-size: 100%;
+             background-repeat: no-repeat;">
+       <audio src="river-music.mp3" controls loop autoplay></audio>   
+
+    <a href="../quotes_page/page1.html">
+        <button>START</button>
+    </a>
+</body>
+</html>
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
+    <title>Background Music</title>
+    <link rel="stylesheet" href="../quotes_page/krishna.css">
+</head>
+<body style="background: url('../Images/ThankfulEnchantingDairycow-size_restricted.gif');
+             background-size: 100%;
+             background-repeat: no-repeat;">
+    <script src="krishna.js"></script>
+    <a href="../quotes_page/page1.html">
+        <button>START</button>
+    </a>
+</body>
+</html>
+
+
+
diff --git a/quotes_page/krishna.js b/quotes_page/krishna.js
@@ -0,0 +1,12 @@
+window.addEventListener('DOMContentLoaded', (event) => {
+    const audio = new Audio('river-music.mp3'); // Replace 'river-music.mp3' with the path to your audio file
+    audio.loop = true;
+    audio.autoplay = true;
+
+    document.addEventListener('DOMContentLoaded', () => {
+      audio.play();
+    });
+  });
+
+
+
diff --git a/quotes_page/page1.css b/quotes_page/page1.css
@@ -0,0 +1,47 @@
+body{
+    font-family: sans-serif;
+    color: bisque;
+    height: 100vh;
+}
+
+section{
+    border: 10px black;
+    height: 90vh;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.container{
+    border: 10px black;
+    max-width: 700px;
+    width: 100%;
+    margin: auto;
+    background-color: rgba(0, 0, 0, 0.8);
+    font-size: 38px;
+    color: white;
+    display: inline-flex;
+    animation: typing 1.5s steps();
+
+    height: 35vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+button{
+    background: #a3caff;
+    font-size: 1.2rem;
+    color: rgb(36, 41, 5); 
+    margin-left: 20px; 
+    border-radius: 20px; 
+    padding: 12px 22px;
+    border: none;
+    outline: none;
+    border-radius: 10px;
+    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+button:hover {
+    background: #3facf4;
+    color: rgb(59, 104, 146);
+    cursor: pointer;
+  }
diff --git a/quotes_page/page1.html b/quotes_page/page1.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Navigation Bar</title>
+    <link rel="stylesheet" href="../quotes_page/page1.css">
+    <script src="krishna.js"></script>
+</head>
+<body>
+    <body style = "background: url('../Images/ThankfulEnchantingDairycow-size_restricted.gif');
+               background-size: 100%;
+               background-repeat: no-repeat;">
+    <section>
+        <div class="container">
+            <blockquote>
+            A man is made by his belief. As he belives. So he becomes.
+            </blockquote>
+        </div>
+    </section>
+    <a href="../quotes_page/krishna.html">
+    <button>BACK</button>
+    </a>
+    <a href="../quotes_page/page2.html">
+    <button>NEXT</button>
+    </a>
+</body>
+</html>
diff --git a/quotes_page/page2.css b/quotes_page/page2.css
@@ -0,0 +1,43 @@
+body{
+    font-family: sans-serif;
+    color: bisque;
+}
+section{
+    border: 10px black;
+    height: 90vh;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.container{
+    border: 10px black;
+    max-width: 700px;
+    width: 100%;
+    margin: auto;
+    background-color: rgba(0, 0, 0, 0.8);
+    font-size: 38px;
+    color: white;
+
+    height: 40vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+button{
+    background: #a3caff;
+    font-size: 1.2rem;
+    color: rgb(36, 41, 5); 
+    margin-left: 20px; 
+    border-radius: 20px; 
+    padding: 12px 22px;
+    border: none;
+    outline: none;
+    border-radius: 10px;
+    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+button:hover {
+    background: #3facf4;
+    color: black;
+    cursor: pointer;
+  }
diff --git a/quotes_page/page2.html b/quotes_page/page2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Navigation Bar</title>
+    <link rel="stylesheet" href="../quotes_page/page2.css">
+    <script src="krishna.js"></script>
+</head>
+<body>
+    <body style = "background: url('../Images/ThankfulEnchantingDairycow-size_restricted.gif');
+               background-size: 100%;
+               background-repeat: no-repeat;">
+    <section>
+        <div class="container">
+            <blockquote>
+                Whatever happened, happened for the good. 
+                Whatever is happening, is happening for the good. 
+                Whatever will happen, will also happen for the good.
+            </blockquote>
+        </div>
+    </section>
+    <a href= "../quotes_page/page1.html">
+    <button>BACK</button>
+    </a>
+    <a href="../quotes_page/page3.html">
+    <button>NEXT</button>
+    </a>
+</body>
+</html>
diff --git a/quotes_page/page3.css b/quotes_page/page3.css
@@ -0,0 +1,43 @@
+body{
+    font-family: sans-serif;
+    color: bisque;
+}
+section{
+    border: 10px black;
+    height: 90vh;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.container{
+    border: 10px black;
+    max-width: 700px;
+    width: 100%;
+    margin: auto;
+    background-color: rgba(0, 0, 0, 0.8);
+    font-size: 38px;
+    color: white;
+
+    height: 35vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+button{
+    background: #a3caff;
+    font-size: 1.2rem;
+    color: rgb(36, 41, 5); 
+    margin-left: 20px; 
+    border-radius: 20px; 
+    padding: 12px 22px;
+    border: none;
+    outline: none;
+    border-radius: 10px;
+    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+button:hover {
+    background: #3facf4;
+    color: black;
+    cursor: pointer;
+  }
diff --git a/quotes_page/page3.html b/quotes_page/page3.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Navigation Bar</title>
+    <link rel="stylesheet" href="../quotes_page/page3.css">
+    <script src="krishna.js"></script>
+</head>
+<body>
+    <body style = "background: url('../Images/ThankfulEnchantingDairycow-size_restricted.gif');
+               background-size: 100%;
+               background-repeat: no-repeat;">
+    <section>
+        <div class="container">
+            <blockquote>
+                Do everything you have to do, but not with ego, 
+                not with lust, not with envy but with love, 
+                compassion, humility, and devotion.
+            </blockquote>
+        </div>
+    </section>
+    <a href="../quotes_page/page2.html">
+    <button>BACK</button>
+    </a>
+    <a href="../quotes_page/page4.html">
+    <button>NEXT</button>
+    </a>
+</body>
+</html>
diff --git a/quotes_page/page4.css b/quotes_page/page4.css
@@ -0,0 +1,43 @@
+body{
+    font-family: sans-serif;
+    color: bisque;
+}
+section{
+    border: 10px black;
+    height: 90vh;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.container{
+    border: 10px black;
+    max-width: 700px;
+    width: 100%;
+    margin: auto;
+    background-color: rgba(0, 0, 0, 0.8);
+    font-size: 38px;
+    color: white;
+
+    height: 35vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+button{
+    background: #a3caff;
+    font-size: 1.2rem;
+    color: rgb(36, 41, 5); 
+    margin-left: 20px; 
+    border-radius: 20px; 
+    padding: 12px 22px;
+    border: none;
+    outline: none;
+    border-radius: 10px;
+    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+}
+button:hover {
+    background: #3facf4;
+    color: black;
+    cursor: pointer;
+  }