Merge pull request #1003 from PatelHarsh2006/harshmain2

CHANGED the Slider Button Position and changed the DOTS COLOR making it GOOD LOOKING
ankit071105 · Nov 6, 2024 · 7b5dda0 · 7b5dda0
2 parents 6e8882a + a6392ec
commit 7b5dda0
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 8 deletions.
diff --git a/index.css b/index.css
@@ -683,9 +683,10 @@ p {
 
 .nav-buttons {
   position: absolute;
-  top: 35%;
-  width: 100%;
+  top: 90%;
+  width: 50%;
   display: flex;
+  margin-left: 25%;
   justify-content: space-between;
   transform: translateY(-50%);
 }

diff --git a/index.html b/index.html
@@ -682,8 +682,8 @@ <h2>What type of transportation do you prefer for your travels?</h2>
 
 
     <div class="nav-buttons">
-        <button class="prev" onclick="prevSlide()" style="width: 45px; height: 45px;">&#10094;</button>
-        <button class="next" onclick="nextSlide()" style="width: 45px; height: 45px;">&#10095;</button>
+        <button class="prev" onclick="prevSlide()" style="width: 80px; height: 80px;">&#10094;</button>
+        <button class="next" onclick="nextSlide()" style="width: 80px; height: 80px;">&#10095;</button>
     </div>
 
     <div class="social-sidebar">

diff --git a/main.css b/main.css
@@ -153,13 +153,13 @@ body {
 
 .prev,
 .next {
-  background-color: rgb(53 48 48 / 80%); /* Semi-transparent background */
+  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent background */
   border: none;
   border-radius: 50%;
   cursor: pointer;
   outline: none;
   padding: 0;
-  font-size: 23px;
+  font-size: 43px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
   transition: background-color 0.3s;
 }

diff --git a/styles.css b/styles.css
@@ -880,7 +880,7 @@ button:hover {
   height: 10px;
   width: 10px;
   margin: 0 2px;
-  background-color: #bbb;
+  background-color: #ffffff;
   border-radius: 50%;
   display: inline-block;
   transition: background-color 0.6s ease;
@@ -898,7 +898,7 @@ button:hover {
 }
 .slider-dot-active,
 .dot:hover {
-  background-color: #717171;
+  background-color: #00e5ff;
 }
 
 .slider {