Merge pull request #597 from Harshcbx8/Shop-From-The-Gram-the-card-an…

…d-its-images-Fixed-Viewing

"Shop From The Gram" the card and its images  resizing issue fixed

index.html

@@ -548,7 +548,7 @@ <h1 class="section-title">Shop From The Gram</h1>
         </div>
         <div class="feedback-container">
 
-            <h2>Have a feedback? &nbsp;&nbsp;<a href="feedback.html" target="_blank">Click here to provide feedback</a></h2>
+            <h2>Have feedback?&nbsp;<a href="feedback.html" target="_blank"><span>Click here</span></a> to share your thoughts with us.</h2>
         </div>
     </section>
 

style.css

@@ -660,6 +660,7 @@ html {
 
 .insta {
   width: 100%;
+  /* height: auto; */
   padding: 30px 20%;
   /* background-color: red; */
   display: flex;
@@ -671,14 +672,14 @@ html {
 .posts {
   width: 100%;
   padding: 20px 0px;
+  gap: 0.5rem;
   /* background-color: yellow; */
   display: flex;
   justify-content: space-between;
 }
 
 .post-image {
-  width: 16%;
-  height: 170px;
+  object-fit:cover;
   position: relative;
   /* background-color: green; */
   overflow: hidden;
@@ -688,21 +689,40 @@ html {
 
 .post-image img {
   width: 100%;
-  transition: 0.2s;
+  transition: 0.3s;
 }
 
 .post-image:hover img {
-  transform: scale(1.2);
+  transform: scale(1.1);
 }
 
 .post-image i {
   position: absolute;
-  font-size: 30px;
+  font-size: 25px;
+  font-weight: 500;
   margin-right: 10px;
   margin-top: 10px;
   z-index: 20;
+  cursor: pointer;
+  transition: color 0.3s ease;
 }
 
+.post-image i:hover {
+  color: #db0a50;
+  transition: color 0.3s ease;
+}
+
+
+.feedback-container h2{
+  font-size: 1.2rem;
+}
+.feedback-container h2 span{
+  color: rgba(0, 0, 164, 0.663);
+} 
+.feedback-container h2 span:hover{
+  color: darkblue;
+} 
+
 .footer {
   width: 100%;
   margin-top: 60px;
@@ -989,6 +1009,10 @@ input {
     width: 49%;
   }
 
+  .feedback-container h2{
+    font-size: 1rem;
+  }
+
   .footer {
     padding: 30px 5%;
     flex-direction: column;