Merge pull request #548 from SAURABHM6341/arrow_allignment

Fix Arrow Visibility, Hover Color, and Alignment Issues in Navigation
ankit071105 · Oct 22, 2024 · e0e96b8 · e0e96b8
2 parents a02738e + ac577e7
commit e0e96b8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -231,8 +231,8 @@
         </div>
     </div>
     <div class="nav-buttons">
-        <button class="prev" onclick="prevSlide()" style="width: 40px; height: 50px;">&#10094;</button>
-        <button class="next" onclick="nextSlide()" style="width: 40px; height: 40px;">&#10095;</button>
+        <button class="prev" onclick="prevSlide()" style="width: 45px; height: 45px;">&#10094;</button>
+        <button class="next" onclick="nextSlide()" style="width: 45px; height: 45px;">&#10095;</button>
     </div>
     </div>
     </div>

diff --git a/main.css b/main.css
@@ -234,17 +234,18 @@ z-index: 10; /* Make sure buttons are above other elements */
 }
 
 .prev, .next {
-background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
-border: none;
+background-color: black; 
+border: 2px solid #07b797;
 border-radius: 50%;
 cursor: pointer;
 outline: none;
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
 transition: background-color 0.3s;
+padding:0px 0px;
 }
 
 .prev:hover, .next:hover {
-background-color: rgba(255, 255, 255, 1); /* Solid background on hover */
+background-color: #07b797; /* Solid background on hover */
 }
 
 /* Optional: Responsive design */
@@ -1280,8 +1281,8 @@ padding: 15px 30px;
     display: inline-block;
     width: 12px;
     height: 12px;
-    border-right: 2px solid #fff;
-    border-bottom: 2px solid #fff;
+    border-right: 2px solid #040404;
+    border-bottom: 2px solid #040404;
     transform: rotate(45deg);
     transition: transform 0.3s ease;
 }