From 8059194183d8797f7fa1b4cc17a4c91f4c44c616 Mon Sep 17 00:00:00 2001
From: addymistrel <149488588+tinkersain@users.noreply.github.com>
Date: Sun, 7 Jul 2024 17:41:23 +0530
Subject: [PATCH] responsive made successfully

---
 imgdesc.css | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 53 insertions(+), 1 deletion(-)

diff --git a/imgdesc.css b/imgdesc.css
index 344f3d5..c9fe560 100644
--- a/imgdesc.css
+++ b/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,7 +93,8 @@ body {
 }
 .content2 {
   display: flex;
-  gap: 20px;
+  flex-direction: row;
+  gap: 2%;
   justify-content: space-between;
 }
 .data,
@@ -91,6 +102,7 @@ body {
   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;
+  }
+}