updated the about page and made it responsive

psidh · Aug 16, 2023 · 623f647 · 623f647
1 parent 106572c
commit 623f647
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/about.html b/about.html
@@ -5,18 +5,31 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="favicon.ico" type="image/x-icon">
   <title>Gita Sloka Generator</title>
+  <style>
+
+    .font-ambit {
+        font-family: Ambit,sans-serif;
+    }
+
+    body {
+      font-family: 'ambit', sans-serif;
+    }
+
+
+    </style>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css">
+
 </head>
 <body>
 
   <!-- Collapsible Navigation Bar -->
-  <nav class="bg-yellow-600 p-4">
+  <nav class="font-ambit bg-yellow-600 p-4">
     <div class="container mx-auto flex items-center justify-between">
       <!-- Logo -->
       <a class="text-white text-2xl font-bold" href="index.html">Gita Sloka Generator</a>
 
       <!-- Hamburger Menu for smaller screens -->
-      <div class="flex md:hidden">
+      <div class="font-ambit flex md:hidden">
         <button id="menuBtn" class="text-white hover:text-gray-200 focus:outline-none">
           <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
@@ -25,14 +38,14 @@
       </div>
 
       <!-- Navigation Links for larger screens -->
-      <div class="hidden md:flex space-x-4">
+      <div class="font-ambit hidden md:flex space-x-4">
         <a class="text-white hover:text-gray-200" href="index.html">Home</a>
         <a class="text-white hover:text-gray-200" href="about.html">About</a>
       </div>
     </div>
 
     <!-- Collapsible menu for smaller screens -->
-    <div class="hidden md:hidden mt-4 transition-all duration-300" id="mobileMenu">
+    <div class="font-ambit hidden md:hidden mt-4 transition-all duration-300" id="mobileMenu">
       <a class="block text-white hover:text-gray-200 py-2" href="index.html">Home</a>
       <a class="block text-white hover:text-gray-200 py-2" href="about.html">About</a>
     </div>
@@ -41,13 +54,13 @@
   <!---------------------------------------------------------------->
 
 <!-- Main content section -->
-<div class="container mx-auto px-4 py-8 md:w-3/4 lg:w-1/2">
+<div class="font-ambit container mx-auto px-4 py-8 md:w-3/4 ">
   <h1 class="mb-6 mt-6 md:mt-12 mx-auto rounded-lg p-1 text-3xl sm:static sm:mb-0 sm:pt-0 sm:text-3xl font-bold text-yellow-800 text-center sm:w-1/2">About</h1>
   <p class="mb-6 mt-6 mr-4 rounded-lg p-2 text-lg text-justify font-light text-gray-800 ">
     The Gita Sloka Generator project aims to make the profound teachings of the Bhagavad Gita easily accessible to people from diverse backgrounds. By offering chapter-wise sloka reading and a user-friendly interface, we hope to promote the understanding and appreciation of this timeless spiritual scripture.
   </p>
 
-  <p class="mb-6 mt-6 mr-4 rounded-lg p-2 text-lg text-justify font-light text-gray-800 ">
+  <p class=" mb-6 mt-6 mr-4 rounded-lg p-2 text-lg text-justify font-light text-gray-800 ">
     Whether you are seeking spiritual insights, philosophical guidance, or simply interested in exploring ancient wisdom, the Gita Sloka Generator provides a valuable resource for your spiritual journey. Delve into the wisdom of the Gita, reflect on its teachings, and find inspiration for leading a purposeful and meaningful life. Enjoy your exploration of the Bhagavad Gita!
   </p>
 
@@ -70,7 +83,7 @@ <h1 class="mb-6 mt-6 md:mt-12 mx-auto rounded-lg p-1 text-3xl sm:static sm:mb-0
 </div>
 
   <!-- Footer -->
-  <footer id="footer" class="bg-yellow-900 text-white md:p-8 p-4 pt-4">
+  <footer id="footer" class="font-ambit bg-yellow-900 text-white md:p-8 p-4 pt-4">
     <div class=" container mx-auto flex flex-col md:flex-row items-center justify-between">
       <!-- Left section of the footer -->
       <div class="mb-4 md:mb-0">

diff --git a/script.js b/script.js
@@ -92,7 +92,7 @@ function searchSloka() {
     // Clear the search input after displaying the sloka
     document.getElementById("searchInput").value = "";
   } else {
-    alert("Invalid input format. Please enter the chapter and verse in the format '12.1' or '10.23'.");
+    alert("Enter in the format '12.1' or '10.23'.");
   }
 }