Changes in footer for responsive footer content

Mujtabaa07 · Jan 18, 2025 · 53882f4 · 53882f4
1 parent f25316e
commit 53882f4
Showing 1 changed file with 118 additions and 104 deletions.
diff --git a/src/componets/footer.js b/src/componets/footer.js
@@ -6,146 +6,160 @@ import FooterImg from './FooterImg.png';
 
 // Styled components for the footer
 const FooterContainer = styled.footer`
-  background: linear-gradient(90deg, rgba(148, 93, 56, 1), rgba(56, 39, 16, 1));
--webkit-background: linear-gradient(90deg, rgba(148, 93, 56, 1), rgba(56, 39, 16, 1));
--moz-background: linear-gradient(90deg, rgba(148, 93, 56, 1), rgba(56, 39, 16, 1));
-  color: #fffbeb; 
-  padding: 1.5rem 2rem;
-  text-align: center;
-  position: relative;
-  bottom: 0;
-  width: 100%;
-  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
+background: linear-gradient(90deg, rgba(148, 93, 56, 1), rgba(56, 39, 16, 1));
+color: #fffbeb;
+padding: 1.5rem 2rem;
+text-align: center;
+position: relative;
+bottom: 0;
+width: 100%;
+box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
 `;
 
 const FooterContent = styled.div`
-  max-width: 1200px;
-  margin: 0 auto;
+max-width: 1200px;
+margin: 0 auto;
 
-  p {
-    margin: 0.2rem 0;
-    font-size: 1rem;
-    line-height: 1.5rem;
+p {
+  margin: 0.5rem 0;
+  font-size: 1rem;
+  line-height: 1.5;
 
-    &:first-child {
-      font-weight: 500;
-    }
+  &:first-child {
+    font-weight: 500;
   }
+}
 
-  @media (max-width: 768px) {
-    display: flex;
-    flex-direction: column;
-  }
+@media (max-width: 768px) {
+  text-align: center;
+  padding: 1rem;
+}
 `;
 
 const InfoSection = styled.div`
+display: flex;
+justify-content: space-between;
+align-items: flex-start;
+margin: 2rem 0;
+flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
+
+.infoimg {
+  height: auto;
+  max-height: 10rem;
+  width: 100%;
+  max-width: 10rem; /* Restrict size for smaller devices */
+  margin-bottom: 1rem;
+}
+
+.info-wrapper {
   display: flex;
-  justify-content:space-between;
-  align-items:center;
-  margin: 2rem 0;
-  text-align: left;
-  .infoimg
-  {
-      height:20rem;
-      padding-right:1rem;
+  flex-wrap: wrap;
+  gap: 1rem;
+  width: 100%; /* Ensure it adapts to smaller devices */
+}
+
+@media (max-width: 768px) {
+  flex-direction: column;
+  align-items: center;
+
+  .infoimg {
+    max-width: 8rem;
+    max-height: auto;
   }
-      .info-wrapper
-      {
-          display:flex;
-      }
-  @media (max-width: 768px) {
-    flex-direction: column;
-    gap: 1.5rem;
+
+  .info-wrapper {
+    justify-content: center;
+    gap: 2rem;
   }
+}
 `;
 
 const InfoColumn = styled.div`
-  flex: 1;
-  margin: 0 1rem;
+flex: 1 1 calc(25% - 2rem); /* Flexible width with margin space */
+margin: 0 1rem;
+text-align: left;
+
+h3 {
+  font-size: 1.2rem;
+  margin-bottom: 1rem;
+  color: #ffd6a5;
+}
 
-  h3 {
-    font-size: 1.2rem;
-    margin-bottom: 1rem;
-    color: #ffd6a5;
-  }
+p,
+a {
+  font-size: 0.9rem;
+  color: #fffbeb;
+  text-decoration: none;
+  margin-bottom: 0.5rem;
+  display: block;
+}
 
-  p,
-  a {
-    font-size: 0.9rem;
-    color: #fffbeb;
-    text-decoration: none;
-    margin-bottom: 0.5rem;
-    display: block;
-  }
+a:hover {
+  color: #fbbf24;
+  text-decoration: underline;
+}
 
-  a:hover {
-     color: #fbbf24;
-      
-    text-decoration: underline;
-  }
-`
+@media (max-width: 768px) {
+  flex: 1 1 100%; /* Full width on smaller devices */
+  text-align: center;
+}
+`;
 
 const SocialIcons = styled.div`
-  display: flex;
-  justify-content: center;
-  gap: 1rem;
-  margin-top: 1.5rem;
+display: flex;
+justify-content: center;
+gap: 1rem;
+margin-top: 1.5rem;
 
-  @media (max-width: 768px) {
-    gap: 1.2rem;
-  }
+@media (max-width: 768px) {
+  gap: 1.2rem;
+}
 `;
 
 const SocialIcon = styled(motion.a)`
-  color: #fffbeb;
-  font-size: 1.8rem;
-  text-decoration: none;
-  padding: 0.5rem;
-  border-radius: 50%;
-
-  transition: color 0.3s ease, transform 0.3s ease;
-
-  &:hover {
-    transform: scale(1.2);
-  transition: all 0.3s ease;
-
-  &:hover {
-    color: #fbbf24;
-
-  }
+color: #fffbeb;
+font-size: 1.8rem;
+text-decoration: none;
+padding: 0.5rem;
+border-radius: 50%;
+transition: color 0.3s ease, transform 0.3s ease;
+
+&:hover {
+  transform: scale(1.2);
+  color: #fbbf24;
+}
 
-  &[href*="facebook.com"]:hover {
-    color: #3b5998; /* Facebook Blue */
-  }
+&[href*="facebook.com"]:hover {
+  color: #3b5998; /* Facebook Blue */
+}
 
-  &[href*="twitter.com"]:hover {
-    color: #1da1f2; /* Twitter Blue */
-  }
+&[href*="twitter.com"]:hover {
+  color: #1da1f2; /* Twitter Blue */
+}
 
-  &[href*="instagram.com"]:hover {
-    color: #e4405f; /* Instagram Pink */
-  }
+&[href*="instagram.com"]:hover {
+  color: #e4405f; /* Instagram Pink */
+}
 
-  &[href*="linkedin.com"]:hover {
-    color: #0077b5; /* LinkedIn Blue */
-  }
+&[href*="linkedin.com"]:hover {
+  color: #0077b5; /* LinkedIn Blue */
+}
 
-  @media (max-width: 768px) {
-    font-size: 1.3rem;
-  }
+@media (max-width: 768px) {
+  font-size: 1.3rem;
+}
 `;
 
-
-
 const Divider = styled.hr`
-  border: none;
-  height: 2px;
-  background: #ffd6a5;
-  margin: 2rem auto;
-  width: 60%;
+border: none;
+height: 2px;
+background: #ffd6a5;
+margin: 2rem auto;
+width: 80%; /* Adjust width for responsiveness */
 `;
 
 
+
 function Footer() {
   return (
     <FooterContainer>