Updates styles on the css file

Author: Murage-Ivy

css/style.css

@@ -16,7 +16,6 @@ body {
   overflow-x: hidden;
   background-color: #fafafa;
   width: 80%;
-  border: 1px solid black;
 }
 
 nav {
@@ -65,7 +64,6 @@ li {
 
 /* Intro class styles */
 .intro {
-  border: 1px solid green;
   justify-content: space-between;
   margin-top: 60px;
 }
@@ -113,6 +111,7 @@ li {
   padding: 10px 20px;
   border-radius: 15px;
   box-shadow: 5px 5px 5px rgb(235, 233, 233);
+
 }
 .places {
   display: flex;
@@ -152,18 +151,18 @@ select {
   background-color: #2549d3;
   display: flex;
   justify-content: center;
-  padding: 5px 10px 5px 15px;
+  padding: 5px 8px 5px 8px;
   border-radius: 5px;
   color: white;
   border-style: none;
+ 
 }
 
 .material-symbols-rounded {
   color: white;
 }
 /* Start of products styling */
 .products {
-  margin: 100px 100px;
   text-align: center;
 }
 
@@ -235,7 +234,6 @@ h2 {
 /* Start of properties styling */
 .properties {
   text-align: center;
-  margin: 100px 100px;
 }
 
 .cards1 {
@@ -245,6 +243,8 @@ h2 {
 }
 
 .card1 {
+  box-shadow: 2px 2px 5px grey;
+  margin-top: 20px;
   background-color: white;
   border-radius: 0% 26% 0% 8%;
 }
@@ -287,7 +287,7 @@ h2 {
   display: flex;
   justify-content: center;
   margin-bottom: 20px;
-  gap: 30pt;
+  gap: 30px;
 }
 
 .feedback1 {
@@ -300,6 +300,7 @@ h2 {
 .view-more1 {
   width: fit-content;
   float: right;
+  margin-top: 20px;
 }
 /* End of customer feedback style */
 
@@ -328,7 +329,7 @@ footer {
 
 /* Start of media queries */
 
-@media only screen and (max-width: 960px) {
+@media only screen and (max-width: 1000px) {
   .row {
     flex-direction: column;
   }
@@ -361,16 +362,65 @@ footer {
     width: 100%;
     margin: 0;
   }
-  .card{
-  padding: 30px 10px 5px;
-  width: 80%;
-  border-radius: 10px;
-  margin-bottom: 10px;
+  .card {
+    padding: 30px 10px 5px;
+    width: 80%;
+    border-radius: 10px;
+    margin-bottom: 10px;
   }
   .products .heading {
     text-align: left;
-    margin-left:40px ;
+    margin-left: 40px;
+  }
+
+  .choose {
+    flex-direction: column;
+    padding: 30px;
+  }
+
+  .choose-info-image3>img{
+    max-width: 100%;
+   
+  }
+  .cards1 {
+    flex-direction: column;
+  }
+  .card1 {
+    width: 100%;
+    background-color: white;
+    border-radius: 0% 26% 0% 8%;
+  }
+
+  .properties {
+    text-align: center;
+    margin: 20px;
+    margin-top: 50px;
+  }
+  .image4 {
+    width: 100%;
   }
 
+  .feedback {
+    flex-direction: column;
+    margin-bottom: 20px;
+    gap: 30px;
+    width: 80%;
+    margin: auto;
+  }
+
+  .customers-feedback {
+    margin-top: 100px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+  }
+
+  .container {
+    display: block;
+  }
+
+  footer {
+    height: auto;
+  }
 }
 /* End of media queries */

index.html

@@ -127,7 +127,7 @@ <h3>Make it Official</h3>
         </div>
 
         <div class="choose">
-            <div class="choose-info image3 ">
+            <div class="choose-info-image3 ">
                 <img src="./images/image 2.png" alt="brown house">
             </div>
 
@@ -158,8 +158,6 @@ <h2>Why you should choose us.</h2>
 
                 </div>
 
-
-
             </div>
         </div>
 
@@ -182,10 +180,9 @@ <h2>Our Featured Properties.</h2>
                         <div>
                             <p>Duplex <br><span id="price">$2,000</span></p>
                         </div>
-
                     </div>
-
                 </div>
+
                 <div class="card1">
                     <img class="image4" src="./images/image 3.png">
                     <div class="option">
@@ -197,6 +194,7 @@ <h2>Our Featured Properties.</h2>
                         </div>
                     </div>
                 </div>
+
                 <div class="card1">
                     <img class="image4" src="./images/image 5.png">
                     <div class="option">
@@ -214,7 +212,6 @@ <h2>Our Featured Properties.</h2>
             </div>
         </div>
 
-
         <div class="customers-feedback">
             <div class="customer-intro">
                 <h2>Our Esteemed Customers</h2>
@@ -249,9 +246,7 @@ <h5>South Africa</h5>
             <div Class="view-more1">
                 <button class="button">View More</button>
             </div>
-
         </div>
-
     </div>
 
     <footer>