Merge pull request #18 from tinkersain/tanisha

responsive made successfully

imgdesc.css

@@ -34,6 +34,11 @@ body {
   border-radius: 6px;
 }
 
+.nav-links a:hover {
+  background-color: black;
+  color: white;
+}
+
 .nav-logo {
   display: flex;
 }
@@ -67,6 +72,11 @@ body {
   font-family: Arial, Helvetica, sans-serif;
 }
 
+.input-section button:hover {
+  background-color: black;
+  cursor: pointer;
+}
+
 .content {
   display: flex;
   flex-direction: column;
@@ -83,14 +93,16 @@ body {
 }
 .content2 {
   display: flex;
-  gap: 20px;
+  flex-direction: row;
+  gap: 2%;
   justify-content: space-between;
 }
 .data,
 .image {
   background-color: #dbc06d;
   padding: 5%;
   text-align: center;
+  align-content: center;
 }
 
 .image img {
@@ -102,6 +114,8 @@ body {
   background-color: #44599a;
 }
 .data {
+  font-size: 25px;
+  color: rgb(54, 52, 52);
   width: 45%;
   border-radius: 10px;
   border: 4px solid grey;
@@ -115,3 +129,41 @@ body {
   border-top-right-radius: 200px;
   border-bottom-right-radius: 200px;
 }
+
+/*Responsive CSS added*/
+@media (max-width: 767px) {
+  .input-section {
+    flex-direction: column;
+  }
+  .input-section button {
+    margin-left: auto;
+  }
+  .content1 {
+    flex-direction: column;
+  }
+  .content2 {
+    flex-direction: column;
+  }
+  .data {
+    width: 88.7%;
+    border-radius: 0;
+    height: 25vh;
+  }
+  .image {
+    width: 90%;
+  }
+  #image1,
+  #image2 {
+    border-radius: 0;
+  }
+  .nav {
+    flex-direction: column;
+  }
+  .nav-links {
+    flex-direction: column;
+    align-items: center;
+  }
+  .nav-logo {
+    justify-content: center;
+  }
+}