Merge branch 'main' into main

ANSHIKA-26 · Oct 18, 2024 · 2de0782 · 2de0782
2 parents 7eb7b2e + d57334f
commit 2de0782
Show file tree

Hide file tree

Showing 9 changed files with 1,308 additions and 1,147 deletions.
diff --git a/Scroll_and_progressbar.css b/Scroll_and_progressbar.css
@@ -45,7 +45,7 @@
     background-color: #f8b5b5; /* Background color matching scrollbar track */
     border-radius: 10px; /* Rounded corners */
     box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2); /* Optional shadow for container */
-    position: fixed;
+    /* position: fixed; */
     overflow: hidden;
   }
 

diff --git a/about.html b/about.html
@@ -79,6 +79,7 @@
 </head>
 
 <body>
+   <nav style="margin-bottom: 4rem;">
     <div class="progress-container">
         <div class="progress-bar" id="progress-bar"></div>
     </div>
@@ -106,7 +107,7 @@ <h2>WordWise</h2>
                 <a href="category.html">Categories</a>
                 <a href="about.html">About</a>
                 <a href="contact_us.html">Contact Us</a>
-                <a href="contact_us.html">Give Feedback</a>
+                <a href="give_feedback.html">Give Feedback</a>
             </div>
 
             <div class="dropdown">
@@ -393,12 +394,13 @@ <h2>Forgot Password</h2>
 
         </header>
     </div>
+   </nav>
 
     <!--main-->
-    </main>
+    <!-- </main> -->
 
     <!--mainn-->
-    <div class="about">
+    <div class="about" style="margin-top: 8rem;">
         <div class="about-content">
             <h1>About Us</h1>
             <p>WordWise is a responsive, user-friendly blogging platform designed to enrich vocabulary and engage
@@ -443,6 +445,11 @@ <h2>Our Contributors</h2>
         </div>
     </div>
 
+     <!-- <button id="backToTop">⬆️</button> -->
+     <div id="backToTop" title="Back to Top">
+        <i class="fas fa-arrow-up"></i>
+    </div>
+
 
     <!-- footer -->
     <footer id="footer">

diff --git a/blog.html b/blog.html
@@ -25,6 +25,7 @@
 </head>
 
 <body>
+<nav>
   <div class="progress-container">
     <div class="progress-bar" id="progress-bar"></div>
   </div>
@@ -52,7 +53,7 @@ <h2>WordWise</h2>
         <a href="category.html">Categories</a>
         <a href="about.html">About</a>
         <a href="contact_us.html">Contact Us</a>
-        <a href="contact_us.html">Give Feedback</a>
+        <a href="give_feedback.html">Give Feedback</a>
       </div>
 
 
@@ -333,11 +334,12 @@ <h2>Forgot Password</h2>
 
     </header>
   </div>
+</nav>
 
   <!--header-->
 
     <!--mainn-->
-    <main id="site-main">
+    <main id="site-main" style="margin-top: 8rem;">
       <!--post content-->
       <section class="container">
         <!-- <div class="layout-2 row"> -->
@@ -490,7 +492,9 @@ <h2 class="section-title">
       <h3 class="form-title">Share Your Thoughts</h3>
       <form id="commentForm" class="form-content">
         <div class="input-container">
-          <input type="text" id="commenterName" class="input-field" placeholder=" " required>
+          <input type="text" id="commenterName" class="input-field" placeholder=" " required pattern="[a-zA-Z ]+"
+                                oninvalid="this.setCustomValidity('Numbers and Symbols are not allowed')"
+                                oninput="this.setCustomValidity('')">
           <label for="commenterName" class="input-label">Your Name</label>
         </div>
         <div class="input-container">
@@ -684,41 +688,48 @@ <h5 class="commenter-name">${comment.name}</h5>
   max-width: 48rem;
   margin: 0 auto;
 }
-
+ 
 .section-title {
-  font-size: 2.25rem;
-  font-weight: 800;
-  text-align: center;
-  color: #111827;
-  margin-bottom: 48px;
-}
 
+  font-size:  2.25rem;
+  font-weight:  800;
+  text-align:  center;
+  color:  #111827;
+  margin-bottom:  48px;
+
+}
+
 .title-text {
   background-clip: text;
   -webkit-background-clip: text;
   color: #f4978e;
   /* background-image: linear-gradient(to right, #f4978e); */
 }
-
+ 
 .comment-form {
-  margin-bottom: 64px;
-  background-color: white;
-  padding: 24px;
-  border-radius: 0.75rem;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  transition: all 0.3s;
-}
 
+  margin:  64px auto;
+  background-color:  transparent;
+  padding:  24px;
+  border-radius:  0.75rem;
+  box-shadow:  0 10px 20px var(--text-color);
+  transition:  all 0.3s;
+
+}
+
 .comment-form:hover {
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
 }
-
+ 
 .form-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: #1f2937;
-  margin-bottom: 24px;
+
+  font-size:  1.5rem;
+  font-weight:  700;
+  color:  #3498db;
+  margin-bottom:  24px;
+
 }
+
 
 .form-content {
   display: flex;
@@ -730,6 +741,17 @@ <h5 class="commenter-name">${comment.name}</h5>
   position: relative;
 }
 
+.input-field {
+
+  width:  100%;
+  padding:  12px 16px;
+  border:  2px solid #d1d5db;
+  border-radius:  0.5rem;
+  transition:  border-color 0.3s;
+  margin-top: 7px;
+
+}
+
 .input-field {
   width: 100%;
   padding: 12px 16px;
@@ -745,7 +767,7 @@ <h5 class="commenter-name">${comment.name}</h5>
 
 .input-label {
   position: absolute;
-  left: 16px;
+  left: 8px;
   top: 12px;
   color: #6b7280;
   transition: all 0.3s;
@@ -755,21 +777,24 @@ <h5 class="commenter-name">${comment.name}</h5>
 .input-field:focus + .input-label,
 .input-field:not(:placeholder-shown) + .input-label {
   font-size: 0.875rem;
-  top: -10px;
+  top: -17px;
   color: #f4978e;
 }
-
+ 
 .submit-button {
-  width: 100%;
-  color: #f4978e;
-  font-weight: 600;
-  padding: 12px 24px;
-  border-radius: 0.5rem;
-  border: none;
-  cursor: pointer;
-  transition: all 0.3s;
-}
 
+  width:  100%;
+  color:  #ffffff;
+  font-weight:  600;
+  padding:  12px 24px;
+  border-radius:  0.5rem;
+  border:  none;
+  cursor:  pointer;
+  transition:  all 0.3s;
+  background-color:  #3498db;
+
+}
+
 .submit-button:hover {
   color: #f4978e;
   transform: scale(1.05);
@@ -1095,8 +1120,12 @@ <h5 class="commenter-name">${comment.name}</h5>
 
 
   </main>
-  <button id="backToTop">⬆️</button>
   <!--mainn-->
+  <!-- <button id="backToTop">⬆️</button> -->
+  <div id="backToTop" title="Back to Top">
+    <i class="fas fa-arrow-up"></i>
+  </div>
+
   <!-- footer -->
   <!-- footer -->
   <footer id="footer">

diff --git a/category.html b/category.html
@@ -38,6 +38,7 @@
 </head>
 
 <body>
+   <nav>
     <div class="progress-container">
         <div class="progress-bar" id="progress-bar"></div>
       </div>
@@ -65,7 +66,7 @@ <h2>WordWise</h2>
             <a href="category.html">Categories</a>
             <a href="about.html">About</a>
             <a href="contact_us.html">Contact Us</a>
-            <a href="contact_us.html">Give Feedback</a>
+            <a href="give_feedback.html">Give Feedback</a>
         </div>
 
         <div class="dropdown">
@@ -340,10 +341,11 @@ <h2>Forgot Password</h2>
 
         </header>
     </div>
+   </nav>
     <!--header-->
 
 
-    <main>
+    <main style="margin-top: 8rem;">
         <section class="category-container">
             <div class="category-row">
                 <div class="new-category-box">
@@ -548,7 +550,10 @@ <h3 class="new-post-title">Fashion Trends</h3>
     <!-- Swiper end -->
     </main>
 
-
+    <!-- <button id="backToTop">⬆️</button> -->
+    <div id="backToTop" title="Back to Top">
+        <i class="fas fa-arrow-up"></i>
+    </div>
     <!-- footer -->
 
     <footer id="footer" style="margin-top: 30px;">