Merge pull request #1035 from Daksh-Goel12/fix-issue-857

{GSSoC'23} Bug fix of image formats issue#1034

AR_Meditate/meditation.html

@@ -254,7 +254,7 @@ <h1 class="text-3xl projectName">Moksh</h1>
         <div class="footer-divide">
           <div class="flex justify-center items-center">
             <div class="w-32 h-32 my-2 rounded-full overflow-hidden">
-              <img src="../Images/New_Logo_2.avif" alt="Moksh Logo" class="object-cover" />
+              <img src="../Images/New_Logo_2.webp" alt="Moksh Logo" class="object-cover" />
             </div>
           </div>
           <div class="footer-divide-text">

Blogs/Blog.html

@@ -7,7 +7,7 @@
   <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
   <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
   <title>Blog</title>
-  <link rel="icon" type="image/x-icon" href="../Images/logoBgRemoved.avif" />
+  <link rel="icon" type="image/x-icon" href="../Images/logoBgRemoved.webp" />
   <link rel="stylesheet" href="../commonStyles.css">
   <link rel="stylesheet" href="newBlogStyle.css">
 </head>

Blogs/Strength.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
     <title>Blog- Strength</title>
-    <link rel="icon" type="image/x-icon" href="../Images/logoBgRemoved.avif" />
+    <link rel="icon" type="image/x-icon" href="../Images/logoBgRemoved.webp" />
     <link rel="stylesheet" href="newBlogStyle.css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
 

Blogs/Words.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
     <title>Blog- Words</title>
-    <link rel="icon" type="image/x-icon" href="../Images/logoBgRemoved.avif" />
+    <link rel="icon" type="image/x-icon" href="../Images/logoBgRemoved.webp" />
     <link rel="stylesheet" href="newBlogStyle.css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>
 

Blogs/cardinalVices.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
     <title>Blog- 5 Cardinal Vices</title>
-    <link rel="icon" type="image/x-icon" href="../Images/logoBgRemoved.avif" />
+    <link rel="icon" type="image/x-icon" href="../Images/logoBgRemoved.webp" />
     <link rel="stylesheet" href="newBlogStyle.css">
   </head>
 
@@ -29,7 +29,7 @@
                class="fixed navbar text-indigo-700 top-0 px-4 sm:px-8 py-4 ease-in-out duration-300 flex z-30 items-center justify-between w-full left-0">
             <div class="leftSection">
               <a class="flex items-center" href="../index.html">
-                <img src="../Images/New_Logo_2.svg" alt="Moksh Logo" class="w-16 h-16" />
+                <img src="../Images/New_Logo_2.webp" alt="Moksh Logo" class="w-16 h-16" />
                 <span
                       class="ml-3 text-xl sm:text-2xl uppercase font-semibold text-indigo-600 projectName tracking-widest ease-in-out duration-300 hover:text-slate-900">Moksh</span>
               </a>

Blogs/depression.html

@@ -7,7 +7,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
         <title>Blog- Depression & Suicide</title>
-        <link rel="icon" type="image/x-icon" href="../Images/logoBgRemoved.avif" href="../index.html" />
+        <link rel="icon" type="image/x-icon" href="../Images/logoBgRemoved.webp" href="../index.html" />
         <link rel="stylesheet" href="newBlogStyle.css">
         <script type="text/javascript"
                 src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
@@ -31,8 +31,9 @@
                     <div
                          class="fixed navbar text-indigo-700 top-0 px-4 sm:px-8 py-4 ease-in-out duration-300 flex z-30 items-center justify-between w-full left-0">
                         <div class="leftSection">
-                            <a class="flex items-center" href="../index.html">
-                                <img src="../Images/New_Logo_2.avif" alt="Moksh Logo" class="w-16 h-16 center" />
+                            <a class="flex items-center" href="../index.html"
+                               <img src="../Images/New_Logo_2.webp" alt="Moksh Logo" class="w-16 h-16" />
+
                                 <span
                                       class="ml-3 text-xl sm:text-2xl uppercase font-semibold text-indigo-600 projectName tracking-widest ease-in-out duration-300 hover:text-slate-900">Moksh</span>
                             </a>

Blogs/karma.html

@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
     <title>Blog- Karma</title>
-    <link rel="icon" type="image/x-icon" href="../Images/logoBgRemoved.avif" href="../index.html" />
+    <link rel="icon" type="image/x-icon" href="../Images/logoBgRemoved.webp" href="../index.html" />
     <link rel="stylesheet" href="newBlogStyle.css">
     <script type="text/javascript"
             src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
@@ -32,7 +32,7 @@
                class="fixed navbar text-indigo-700 top-0 px-4 sm:px-8 py-4 ease-in-out duration-300 flex z-30 items-center justify-between w-full left-0">
             <div class="leftSection">
               <a class="flex items-center" href="../index.html">
-                <img src="../Images/New_Logo_2.avif" alt="Moksh Logo" class="w-16 h-16" />
+                <img src="../Images/New_Logo_2.webp" alt="Moksh Logo" class="w-16 h-16" />
                 <span
                       class="ml-3 text-xl sm:text-2xl uppercase font-semibold text-indigo-600 projectName tracking-widest ease-in-out duration-300 hover:text-slate-900">Moksh</span>
               </a>

Blogs/life.html

@@ -7,7 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
   <title>Blog- Life</title>
-  <link rel="icon" type="image/x-icon" href="../Images/logoBgRemoved.avif" href="../index.html" />
+  <link rel="icon" type="image/x-icon" href="../Images/logoBgRemoved.webp" href="../index.html" />
   <link rel="stylesheet" href="newBlogStyle.css">
   <script type="text/javascript"
           src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
@@ -32,7 +32,7 @@
              class="fixed navbar text-indigo-700 top-0 px-4 sm:px-8 py-4 ease-in-out duration-300 flex z-30 items-center justify-between w-full left-0">
           <div class="leftSection">
             <a class="flex items-center" href="../index.html">
-              <img src="../Images/logoBgRemoved.avif" alt="Moksh Logo" class="w-16 h-16" />
+              <img src="../Images/logoBgRemoved.webp" alt="Moksh Logo" class="w-16 h-16" />
               <span
                     class="ml-3 text-xl sm:text-2xl uppercase font-semibold text-indigo-600 projectName tracking-widest ease-in-out duration-300 hover:text-slate-900">Moksh</span>
             </a>

Divine_page/story.html

@@ -171,7 +171,7 @@ <h1>Bhagwadgita Trivia</h1>
     <div class="mt-8 siteNav flex flex-col lg:flex-row ">
 
       <div class="flex flex-col lg:flex-row items-center text-center lg:text-left lg:w-1/2">
-        <img src="./Images/logoBgRemoved.avif" alt="Moksh Logo" class="h-24 w-24 lg:mr-4" />
+        <img src="./Images/logoBgRemoved.webp" alt="Moksh Logo" class="h-24 w-24 lg:mr-4" />
         <div class="py-3 font-medium text-white w-2/3 flex flex-col text-xs">
           <h1 class="text-3xl projectName">Moksh</h1>
           <span>

Pomodro_page/reward.html

@@ -160,7 +160,7 @@ <h1>Pomodoro Spiritual Break</h1>
       <div class="footer-divide">
         <div class="flex justify-center items-center">
           <div class="w-32 h-32 my-2 rounded-full overflow-hidden">
-            <img src="../Images/New_Logo_2.avif" alt="Moksh Logo" class="object-cover" />
+            <img src="../Images/New_Logo_2.webp" alt="Moksh Logo" class="object-cover" />
           </div>
         </div>
         <div class="footer-divide-text">

commonScript.js

@@ -17,7 +17,7 @@ let customFooter = document.querySelector( ".customFooter" ),
           <h1 class="text-xs uppercase font-semibold tracking-widest">Menu</h1>
         </div>
 
-        <img src="../Images/New_Logo_2.avif" alt="" class="h-36 w-36 mx-auto" />
+        <img src="../Images/New_Logo_2.webp" alt="" class="h-36 w-36 mx-auto" />
 
         <!-- Row - 2  -->
         <div class="">
@@ -132,7 +132,7 @@ let customFooter = document.querySelector( ".customFooter" ),
   let navbarContent = `
        <div class="leftSection">
               <a class="flex items-center" href="../index.html">
-                <img src="../Images/logoBgRemoved.avif" alt="Moksh Logo" class="w-12 h-12 hover:animate-spin " />
+                <img src="../Images/logoBgRemoved.webp" alt="Moksh Logo" class="w-12 h-12 hover:animate-spin " />
                 <span
                   class="ml-3 text-base lg:text-2xl uppercase font-semibold projectName tracking-widest ease-in-out duration-300 hover:text-indigo-600">Moksh</span>
               </a>
@@ -228,7 +228,7 @@ let customFooter = document.querySelector( ".customFooter" ),
           <div class="mt-8 siteNav flex flex-col lg:flex-row ">
 
             <div class="flex flex-col lg:flex-row items-center text-center lg:text-left lg:w-1/2">
-              <img src="../Images/logoBgRemoved.avif" alt="Moksh Logo" class="h-24 w-24 lg:mr-4" />
+              <img src="../Images/logoBgRemoved.webp" alt="Moksh Logo" class="h-24 w-24 lg:mr-4" />
               <div class="py-3 font-medium text-white w-2/3 flex flex-col text-xs">
                 <h1 class="text-3xl projectName">Moksh</h1>
                 <span>

index.html

@@ -7,7 +7,7 @@
   <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
   <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
   <title>Moksh</title>
-  <link rel="icon" type="image/x-icon" href="Images/logoBgRemoved.avif" />
+  <link rel="icon" type="image/x-icon" href="Images/logoBgRemoved.webp" />
   <link rel="stylesheet" href="commonStyles.css" />
 </head>
 
@@ -28,7 +28,7 @@
         <h1 class="text-xs uppercase font-semibold tracking-widest">Menu</h1>
       </div>
 
-      <img src="./Images/logoBgRemoved.avif" alt="" class="h-36 w-36 mx-auto" />
+      <img src="./Images/logoBgRemoved.webp" alt="" class="h-36 w-36 mx-auto" />
 
       <!-- Row - 2  -->
       <div class="">
@@ -154,14 +154,15 @@ <h1 class="text-xs uppercase font-semibold tracking-widest">Menu</h1>
 
       <!-- Hero Section & Navbar  -->
       <div
-           class="heroSection h-[100vh] flex px-0  text-2xl lg:text-lg flex-col items-center bg-[url('./Images/HeroSection.avif')] bg-top bg-no-repeat bg-cover">
+           class="heroSection h-[100vh] flex px-0  text-2xl lg:text-lg flex-col items-center bg-[url('./Images/HeroSection.webp')] bg-top bg-no-repeat bg-cover">
 
         <!-- Navbar  -->
         <div
              class="indexNavbar fixed top-0 px-4 py-2 ease-in-out text-white duration-300 flex z-30 items-center justify-between w-full left-0 bg-gradient-to-l from-[#009933] to-[#c4e327]">
           <div class="leftSection">
             <a class="flex items-center" href="./index.html">
-              <img src="./Images/New_Logo_2.avif" alt="Moksh Logo" class="w-[2.75rem] h-[2.75rem] rounded-full" />
+              <img src="./Images/New_Logo_2.webp" alt="Moksh Logo" class="w-[4rem] h-[4rem] rounded-full" />
+
               <span
                     class="ml-3 text-base lg:text-2xl uppercase font-semibold projectName tracking-widest ease-in-out duration-300 hover:text-indigo-600">Moksh</span>
             </a>
@@ -236,7 +237,7 @@ <h1 class="text-xs uppercase font-semibold tracking-widest">Menu</h1>
         <!-- Hero Section  -->
         <div
              class="heroSectionContent mt-20 h-[calc(90vh-0px)]  w-full  flex items-center flex-col text-white py-8 relative">
-          <img src="./Images/OMSymbol.avif" alt="Image of OM" class="OmSymbol" />
+          <img src="./Images/OMSymbol.webp" alt="Image of OM" class="OmSymbol" />
           <div class="top text-center pt-8">
             <h1>
               <p class="projectName text-[4em]">Moksh</p>
@@ -295,7 +296,7 @@ <h1 class="text-indigo-600 text-center mb-10 uppercase font-semibold">
             <!-- Card AR -->
             <div
                  class="card cardAr mb-8 md:shadow-2xl h-full md:rounded-md md:overflow-hidden ease-in-out duration-700 relative -right-[2000px] sm:right-0 md:hover:scale-95 hover:scale-100 flex flex-col">
-              <img src="./Images/armed.avif" alt="armed" class="md:h-[300px] w-full" />
+              <img src="./Images/armed.webp" alt="armed" class="md:h-[300px] w-full" />
 
               <div class="card-details flex flex-col items-center grow py-4">
 
@@ -510,7 +511,7 @@ <h1 class="text-indigo-600 text-center mb-10 uppercase font-semibold">
           <div class="mt-8 siteNav flex flex-col lg:flex-row ">
 
             <div class="flex flex-col lg:flex-row items-center text-center lg:text-left lg:w-1/2">
-              <img src="./Images/logoBgRemoved.avif" alt="Moksh Logo" class="h-24 w-24 lg:mr-4" />
+              <img src="./Images/logoBgRemoved.webp" alt="Moksh Logo" class="h-24 w-24 lg:mr-4" />
               <div class="py-3 font-medium text-white w-2/3 flex flex-col text-xs">
                 <h1 class="text-3xl projectName">Moksh</h1>
                 <span>

shlok_page/motivation.html

@@ -94,7 +94,7 @@
   <div class="nav">
     <!-- Nav Logo & Name -->
     <div class="navbar-logo">
-<img src="../Images/New_Logo.svg" alt="Moksh Logo">
+      <img src="../Images/New_Logo_2.webp" alt="Moksh Logo" />
       <a href="../index.html"><span>Moksh</span></a>
     </div>