Merge branch 'main' into dropdownMenu

anuragverma108 · Oct 20, 2024 · a614459 · a614459
2 parents fc7c33d + ab8a74f
commit a614459
Show file tree

Hide file tree

Showing 8 changed files with 537 additions and 392 deletions.
diff --git a/assets/css/aboutus.css b/assets/css/aboutus.css
@@ -3,8 +3,14 @@ body {
   margin: 0;
   padding: 0;
   background-color: #f9f9f9;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
 }
 
+
+
 .header .container {
   padding-inline: 0px 30px;
 }
@@ -30,6 +36,7 @@ header {
 
 }
 
+
 h1, h2, h3 {
   margin-top: 0;
   margin-bottom: 20px;

diff --git a/assets/css/login.css b/assets/css/login.css
@@ -50,8 +50,8 @@ body {
   background-color: #ee8d5c;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: space-around;
+  align-items : center;
+  justify-content: space-between;
   position: relative;
 }
 
@@ -71,6 +71,7 @@ p {
 .navbar-link {
   text-decoration: none;
   background-color: none;
+
 }
 .navbar-list a{
   width: 100%;

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -1226,6 +1226,7 @@ play-btn ion-icon {
 .benefits-card .card-title {
   margin-block: 20px 15px;
   color: brown;
+  text-align: center;
 }
 
 .dark-mode .benefits-card .card-icon {
@@ -3062,7 +3063,7 @@ footer {
   .navbar-list {
     gap: 10px;
     /* Increase gap between navbar items */
-    justify-content: space-evenly;
+    justify-content: start;
     /* Center align navbar items */
     /* padding-left: 2rem; */
   }

diff --git a/assets/html/about1.html b/assets/html/about1.html
@@ -461,6 +461,8 @@ <h3>XYZ<br /><span>Book Lover</span></h3>
             </li>
               </div>
             </ul>
+
+            </header>
               </div>
               <script>
                document.addEventListener("DOMContentLoaded", () => {

diff --git a/assets/html/login.html b/assets/html/login.html
@@ -852,10 +852,18 @@ <h2>Join us by creating an account or log in if you already have an account</h2>
                 <div id="or">Or</div>
                 <div class="social-buttons" style="display: flex; gap: 5px; justify-content: center;">
                   <style>
+                    .dark-mode #login:hover{
+                      transition: 0.5s ease;
+                      color: #483D8B;
+                    }
                     #forgot_password_link:hover{
                       transition: 0.5s ease;
                       color: #df0013;
                     }
+                    .dark-mode #forgot_password_link:hover{
+                      transition: 0.5s ease;
+                      color: #708090;
+                    }
                   </style>
                   <div class="button-container">
                     <button class="p1" id="google-sign-in" style="
@@ -1161,6 +1169,11 @@ <h2>Quick Links</h2>
               <i class="fab fa-discord" title="Discord" style="cursor: pointer;"></i>
             </div>
            </a>
+           <style>
+            .dark-mode .fab.fa-discord:hover{
+              color:#3b5998 !important;
+            }
+           </style>
 
           <a href="https://www.linkedin.com/in/anurag-verma-b91417253/" target="_blank">
             <div class="icon">
@@ -1179,7 +1192,11 @@ <h2>Quick Links</h2>
               <i class="fab fa-twitter" title="X"style="cursor: pointer;"></i>
             </div>
           </a>
-
+          <style>
+            .dark-mode .fab.fa-twitter:hover{
+              color: whitesmoke !important;
+            }
+          </style>
           <a href="https://www.instagram.com/">
             <div class="icon" id="insta-icon">
               <i class="fab fa-instagram" title="Instagram"style="cursor: pointer;"></i>
@@ -1200,7 +1217,11 @@ <h2>Quick Links</h2>
               <i class="fab fa-github" title="Github"></i>
             </div>
           </a>
-
+         <style>
+          .dark-mode .fab.fa-github:hover{
+            color: whitesmoke !important;
+          }
+         </style>
 
         </div>
        </div>
@@ -1222,6 +1243,10 @@ <h2>Quick Links</h2>
 
 
 <style>
+  .dark-mode #translateButton:hover{
+    background-color: #36454F;
+    transition: 0.5s ease-in;
+  }
   #translateButton:hover{
     background-color: rgb(0, 30, 0);
     transition: 0.5s ease-in;
@@ -1242,6 +1267,18 @@ <h2>Quick Links</h2>
     </div>
     </div>
     <style>
+      .dark-mode #copyrightPolicyLink:hover{
+        color: #708090;
+        transition: 0.5s ease;
+      }
+      .dark-mode #privacyNoticeLink:hover{
+        color: #708090;
+        transition: 0.5s ease;
+      }
+      .dark-mode #ourvisionLink:hover{
+        color: #708090;
+        transition: 0.5s ease;
+      }
       #copyrightPolicyLink:hover{
         color: rgb(126, 0, 21);
         transition: 0.5s ease;

diff --git a/copyrightpolicy.html b/copyrightpolicy.html
@@ -82,96 +82,131 @@
         margin-top: 150px;
     }
 </style>
+
 <style>
+    /* Font and Global Styles */
     body {
         font-family: Arial, sans-serif;
         line-height: 1.6;
         margin: 0;
         padding: 0;
-        background-color: #ffdcd4;
-        color: black;
+        background-color: #ffdcd4; /* Light background color */
+        color: black; /* Default text color */
     }
-    /* .main {
-    position: relative;
-    transition: transform 0.3s ease; /* Smooth transition effect */
-/* } */ 
-
-
 
     .main {
         padding: 2rem;
         max-width: 800px;
         margin: 2rem auto;
-        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
-        border-radius: 8px;
-        padding-bottom: 100px;
-        margin-top: 200px;
-        position: relative;
-        transition: transform 0.5s ease-in-out; /* Smooth transition effect */
+        box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Shadow effect for main container */
+        border-radius: 8px; /* Rounded corners */
+        padding-bottom: 100px; /* Extra padding at the bottom */
+        margin-top: 200px; /* Top margin */
     }
-    .main:hover {
-        transform: scale(1.05); /* Moves the box up by 10px */
-}
+
     .main h1 {
         text-align: center;
-        font-size: 30px;
-        font-weight: 600;
-        color: #ff5f4b;
-        margin-bottom: 50px;
-        margin-top: 10px;
+        font-size: 30px; /* Header font size */
+        font-weight: 600; /* Header font weight */
+        color: #ff5f4b; /* Header color */
+        margin-bottom: 50px; /* Margin below header */
+        margin-top: 10px; /* Margin above header */
     }
 
+    /* Unique <p> Tag Styling */
     .main p {
-        margin: 10px 2px;
+        margin: 15px 0; /* Vertical margin */
+        padding: 10px; /* Padding around text */
+        font-size: 19px; /* Font size for paragraphs */
+        font-style: italic; /* Italic style for paragraphs */
+        color: #4a4a4a; /* Soft gray for paragraph text */
+        transition: color 0.3s ease; /* Transition effect for hover */
     }
-    .main:hover{
-        transition: all;
+
+    .main p:hover {
+        color: #ff5f4b; /* Color change on hover */
     }
+
+    /* Unordered List (li) Styling */
     .un-list {
-        list-style-type: none;
-        /* padding: 0; */
+        list-style-type: none; /* No bullet points */
+        padding: 0; /* Remove padding */
     }
 
     .un-list li {
-        margin: 9px 2px;
-        padding: 0.5rem;
+        margin: 12px 0; /* Vertical margin for list items */
+        padding: 12px; /* Padding for list items */
+        background-color: #ffe4dc; /* Background color for list items */
+        border-left: 4px solid #ff5f4b; /* Left border for emphasis */
+        border-radius: 5px; /* Slight rounding for list items */
+        font-size: 17px; /* Increased font size for list items */
+        color: #333; /* Darker text for list items */
+        font-weight: bold; /* Bold text for list items */
+        transition: all 0.3s ease; /* Transition effect for hover */
+    }
+
+    .un-list li:hover {
+        background-color: #ffddc5; /* Change background color on hover */
     }
 
     .un-list li a {
-        color: #ff5f4b;
-        display: inline;
+        color: #ff5f4b; /* Link color in list */
+        font-weight: 600; /* Bold link text */
     }
 
     .un-list li a:hover {
-        color: #e6482e;
+        color: #e6482e; /* Darker link color on hover */
     }
-    
+
     /* Dark Mode Styles */
-    .dark-mode .readmore-anim {
-      font-size: 18px;
-      letter-spacing: 0;
-      color: hsl(357, 37%, 62%);
+    body.dark-mode {
+        background-color: #121212; /* Dark background for dark mode */
+        color: #ffffff; /* Light text for dark mode */
     }
-    .dark-mode .readmore-anim:hover {
-      color: red;
-      letter-spacing: 1px;
-      transition: ease-in-out;
+
+    body.dark-mode .main {
+        box-shadow: 0 0 20px hsl(0deg 100% 80%); /* Shadow effect for main in dark mode */
     }
-    
-    .dark-mode .header.scrolled {
-      background-color: #232222; /* Change to a darker color when scrolled */
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Add shadow for better visibility */
+
+    /* Dark Mode for <p> Tags */
+    body.dark-mode .main p {
+        color: #dddddd; /* Light text color for paragraphs in dark mode */
     }
-    body.dark-mode {
-    background-color: #121212;
-    color:#ffffff;
-}
-body.dark-mode .main{
-    box-shadow: 0 0 20px hsl(0deg 100% 80.49%); ;
-
-} 
 
+    body.dark-mode .main p:hover {
+        color: #ff5f4b; /* Change color on hover in dark mode */
+    }
+
+    /* Dark Mode for <li> Elements */
+    body.dark-mode .un-list li {
+        background-color: #2b2b2b; /* Dark background for list items */
+        color: #dddddd; /* Light text color for list items */
+        border-left: 4px solid hsl(357, 37%, 62%); /* Left border in dark mode */
+    }
+
+    body.dark-mode .un-list li:hover {
+        background-color: #3a3a3a; /* Change background on hover in dark mode */
+    }
+
+    /* Additional Styles */
+    #menu-toggle:checked + #menu {
+        display: block; /* Show menu when toggle is checked */
+    }
+
+    .hover\:grow {
+        transition: all 0.3s; /* Transition for hover effect */
+        transform: scale(1); /* Initial scale */
+    }
+
+    .hover\:grow:hover {
+        transform: scale(1.02); /* Scale on hover */
+    }
+
+    #chaps {
+        margin-top: 150px; /* Margin for chapters section */
+    }
 </style>
+
 </head>
 
 <body>
@@ -705,4 +740,4 @@ <h2>Quick Links</h2>
       </script>
 </body>
 
-</html>
+</html>