image paths modified

Ahmad-Khallaf05 · May 27, 2024 · d6843d4 · d6843d4
1 parent 4f329b3
commit d6843d4
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -22,7 +22,7 @@
   <main>
     <div class="Sedans">
 
-      <img src="images/icon-sedans.svg" alt="Sedans">
+      <img src="./images/icon-sedans.svg" alt="Sedans">
 
       <h1>Sedans</h1>
 
@@ -31,15 +31,13 @@ <h1>Sedans</h1>
         or on your next road trip.
       </p>
 
-      <div class="button">
-        <button>Learn More</button>
-      </div>
+      <button class="button-Sedans">Learn More</button>
 
     </div>
 
     <div class="SUVs">
 
-      <img src="images/icon-SUVs.svg" alt="SUVs">
+      <img src="./images/icon-SUVs.svg" alt="SUVs">
 
       <h1>SUVs</h1>
 
@@ -48,15 +46,13 @@ <h1>SUVs</h1>
         and off-road adventures.
       </p>
 
-      <div class="button">
-        <button>Learn More</button>
-      </div>
+      <button class="button-SUVs">Learn More</button>
 
     </div>
 
     <div class="Luxury">
 
-      <img src="images/icon-Luxury.svg" alt="Luxury">
+      <img src="./images/icon-Luxury.svg" alt="Luxury">
 
       <h1>Luxury</h1>
 
@@ -66,9 +62,7 @@ <h1>Luxury</h1>
         rental and arrive in style.
       </p>
 
-      <div class="button">
-        <button>Learn More</button>
-      </div>
+      <button class="button-Luxury">Learn More</button>
 
     </div>
 

diff --git a/style.css b/style.css
@@ -13,7 +13,7 @@
         border-bottom-left-radius: 10px;
         border-top-right-radius: 0px;
     }
-   
+
 }
 
 main {
@@ -44,13 +44,13 @@ p {
     font-style: normal;
 }
 
-button {
+.button-Sedans {
     position: relative;
     top: 100px;
     background-color: hsl(0, 0%, 95%);
     border: 2px solid hsl(0, 0%, 95%);
     border-radius: 20px;
-    color: black;
+    color: hsl(31, 77%, 52%);
     cursor: pointer;
     font-size: 16px;
     padding: 10px 20px;
@@ -60,12 +60,42 @@ button {
     font-weight: 400;
     font-style: normal;
 }
-.button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+
+.button-SUVs {
+    position: relative;
+    top: 100px;
+    background-color: hsl(0, 0%, 95%);
+    border: 2px solid hsl(0, 0%, 95%);
+    border-radius: 20px;
+    color: hsl(184, 100%, 22%);
+    cursor: pointer;
+    font-size: 16px;
+    padding: 10px 20px;
+    transition: all 0.3s ease;
+    font-family: "Lexend Deca", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
 }
 
+.button-Luxury {
+    position: relative;
+    top: 100px;
+    background-color: hsl(0, 0%, 95%);
+    border: 2px solid hsl(0, 0%, 95%);
+    border-radius: 20px;
+    color: hsl(179, 100%, 13%);
+    cursor: pointer;
+    font-size: 16px;
+    padding: 10px 20px;
+    transition: all 0.3s ease;
+    font-family: "Lexend Deca", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
+}
+
+
 button:hover {
     background-color: transparent;
     color: hsl(0, 0%, 95%);