Merge pull request #947 from druvkotwani/issue

[Fix]: issue#885, Changed the footer according to that of the index page.
akshitagupta15june · Jun 29, 2023 · 79d6413 · 79d6413
2 parents 08cf02b + c6727ff
commit 79d6413
Show file tree

Hide file tree

Showing 2 changed files with 129 additions and 23 deletions.
diff --git a/Divine_page/story.css b/Divine_page/story.css
@@ -1,3 +1,6 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
+
+
 * {
   box-sizing: border-box;
   text-decoration: none;
@@ -8,7 +11,7 @@ body {
   background-repeat: no-repeat !important;
   background-attachment: fixed !important;
   background-size: cover !important;
-  
+
 }
 
 /* Styling for the quiz form */
@@ -123,6 +126,7 @@ body {
 
   border-radius: 10px;
 }
+
 .new-header {
   text-align: center;
   margin-top: 50px;
@@ -151,7 +155,7 @@ body {
 .bottom {
   display: flex;
   justify-content: center;
-  gap:35px;
+  gap: 35px;
   flex-wrap: wrap;
 }
 
@@ -206,3 +210,88 @@ body {
   object-fit: cover;
 }
 
+/* Footer Section */
+
+.footer {
+  width: 100vw;
+  height: 100%;
+  margin-top: 30px;
+  background-color: transparent;
+
+  border-top: 3px solid black;
+
+}
+
+.footer__section1 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
+}
+
+
+.footer__section1 img {
+  margin-top: 20px;
+  width: 9rem;
+  object-fit: contain;
+  border-radius: 50%;
+  margin-bottom: 10px;
+}
+
+.footer__section1 p {
+  text-align: center;
+  font-size: 18px;
+}
+
+.footer__section2 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+}
+
+.footer__section2-pages {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 30px;
+  margin-bottom: 10px;
+}
+
+.footer__section2-pages a {
+  color: black;
+  text-decoration: none;
+  font-size: 18px;
+  font-weight: 800;
+  font-family: 'Montserrat', sans-serif;
+}
+
+
+.footer__section2-logos {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  margin-bottom: 10px;
+}
+
+.footer__section2-logos a {
+  color: #000;
+}
+
+.footer__section2-madeby {
+
+  margin-bottom: 5px;
+}
+
+.footer__section2-copyright {
+
+  text-align: center;
+  padding-bottom: 10px;
+  font-weight: 700;
+  font-size: 13px;
+
+  margin-bottom: 20px;
+}
diff --git a/Divine_page/story.html b/Divine_page/story.html
@@ -22,7 +22,7 @@
 
 <body>
   <script src="script.js"></script>
-  <!-- Navbar Start--> 
+  <!-- Navbar Start-->
 
   <div class="nav">
     <!-- Nav Logo & Name -->
@@ -167,31 +167,48 @@ <h1>Bhagwadgita Trivia</h1>
       <button class="quiz_btn">START BHAGWAD GITA QUIZ</button>
     </a>
   </div>
-  <br>
-  <br>
 
 
-  <footer style="padding:5px 10px;">
-    <div class="logo-title">
-      <img class='logo' src="../Images/New_Logo.svg" alt="Moksh Logo"
-        style="height: 50px; filter: invert(84%) sepia(28%) saturate(30%) hue-rotate(195deg) brightness(97%) contrast(99%);" />
-      <h3 class="title" style="font-size: 28px; text-align: end; color: #fff; margin: 5px">Moksh</h3>
+  <footer class="footer">
 
+    <div class="footer__section1">
+      <img src="../Images/New_Logo.svg" alt="Moksh-logo" />
+      <p>Moksh is a spiritual productivity tool designed for individuals who want to unlock their potential and achieve
+        true
+        balance in life. Join us on our journey to empower the world with spiritual knowledge</p>
     </div>
-    <div class="tagline">
-      <p style="font-size: 18px; text-align: center; padding-top: 10px;">A Spiritual Productivity Tool for Mental
-        Wellness</p>
-    </div>
-    <div class="intro">
-      <p style="text-align:center;">Moksh is a spiritual productivity tool designed for individuals who want to unlock
-        their potential and achieve true balance
-        in life. </p>
-    </div>
-    <hr color="#000" size="10">
-    <div class="copyright" style="display:flex; justify-content:space-around">
-      <p style=" font-size: 14px; text-align: center; margin-top: 10px;">Made with ❤️ by Akshita during XPRESSION'23</p>
-      <p style=" font-size: 14px; text-align: center; margin-top: 10px;">&copy; 2023 Moksh. All rights reserved.</p>
+
+    <div class="footer__section2">
+      <div class='footer__section2-pages'>
+        <a href="../index.html" class="footer-items">About</a>
+        <a href="../Blogs/Blog.html" class="footer-items">Blogs</a>
+      </div>
+
+
+      <div class="footer__section2-logos">
+        <a href="https://github.com/akshitagupta15june/Moksh">
+          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-github"
+            viewBox="0 0 16 16">
+            <path
+              d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
+          </svg>
+        </a>
+
+        <a href="https://twitter.com/ExperienceMoksh">
+          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-twitter"
+            viewBox="0 0 16 16">
+            <path
+              d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" />
+          </svg>
+        </a>
+      </div>
+
+      <p class="footer__section2-madeby"> Made with ❤️ by Akshita during XPRESSION'23</p>
+      <p class="footer__section2-copyright">&copy; Copyright 2023 by Moksh. All rights reserved.</p>
+
     </div>
+
+
   </footer>