Merge pull request #216 from NITINkumar2504/footer

text alignment of Footer section
Mujtabaa07 · Jan 7, 2025 · ec363d7 · ec363d7
2 parents a37c8ab + e19afa5
commit ec363d7
Showing 1 changed file with 51 additions and 31 deletions.
diff --git a/src/componets/footer.js b/src/componets/footer.js
@@ -6,12 +6,13 @@ import { motion } from 'framer-motion';
 const FooterContainer = styled.footer`
   background-color: #78350f;
   color: #fffbeb;
-  padding: 3rem 2rem;
+  padding: 2rem 3rem 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`
@@ -20,24 +21,31 @@ const FooterContent = styled.div`
   
   p {
     margin: 0.5rem 0;
-    font-size: 0.75rem;
-    line-height: 1.6;
+    font-size: 1rem;
+    line-height: 1.5rem;
     
     &:first-child {
       font-weight: 500;
     }
   }
+
+  @media (max-width:768px){
+    display:flex;
+    flex-direction:column;
+  }
 `;
 
 const InfoSection = styled.div`
   display: flex;
   justify-content: space-between;
-  margin-top: 2rem;
-  text-align: left;
+  margin-top: 1.3rem;
+  margin-bottom: 1.3rem;
+  // text-align: left;
 
   @media (max-width: 768px) {
     flex-direction: column;
-    text-align: center;
+    gap:1.5rem;
+
   }
 `;
 
@@ -51,8 +59,8 @@ const InfoColumn = styled.div`
   }
 
   p, a {
-    font-size: 1rem;
-    color: #fffbeb;
+    font-size: 0.9rem;
+    color:rgb(255, 255, 255);
     text-decoration: none;
     display: block;
     margin-bottom: 0.5rem;
@@ -61,13 +69,25 @@ const InfoColumn = styled.div`
   a:hover {
     color: #fbbf24;
   }
+
+  @media (max-width:768px){
+    h3{
+      font-size:1.2rem;
+      margin-bottom:0rem;
+      }
+
+    p{
+      font-size:1rem;
+      margin:0rem;
+    } 
+
 `;
 
 const SocialIcons = styled.div`
   display: flex;
   justify-content: center;
   gap: 2rem;
-  margin-top: 1.5rem;
+  margin-top: 1rem;
 
   @media (max-width: 768px) {
     gap: 1.2rem;
@@ -96,27 +116,6 @@ function Footer() {
   return (
     <FooterContainer>
       <FooterContent>
-
-
-        {/* Informational Sections */}
-        <InfoSection>
-          <InfoColumn>
-            <h3>About Us</h3>
-            <p>Founded in 2010, MsCafe is dedicated to serving the finest coffee with passion and expertise. We source our beans from sustainable farms across the globe.</p>
-          </InfoColumn>
-
-          <InfoColumn>
-            <h3>Contact Us</h3>
-            <p>Email: contact@mscafe.com</p>
-            <p>Phone: (123) 456-7890</p>
-          </InfoColumn>
-
-          <InfoColumn>
-            <h3>Location</h3>
-            <p>123 Coffee St, Bean Town, USA</p>
-            <p><a href="https://www.google.com/maps" target="_blank" rel="noopener noreferrer">View on Map</a></p>
-          </InfoColumn>
-        </InfoSection>
 
         {/* Social Icons */}
         <SocialIcons>
@@ -151,9 +150,30 @@ function Footer() {
             <i className="fab fa-instagram"></i>
           </SocialIcon>
         </SocialIcons>
-        <br/>
+
+        {/* Informational Sections */}
+        <InfoSection>
+          <InfoColumn>
+            <h3>About Us</h3>
+            <p>Founded in 2010, MsCafe is dedicated to serving the finest coffee with passion and expertise. We source our beans from sustainable farms across the globe.</p>
+          </InfoColumn>
+
+          <InfoColumn>
+            <h3>Contact Us</h3>
+            <p>Email: contact@mscafe.com</p>
+            <p>Phone: (123) 456-7890</p>
+          </InfoColumn>
+
+          <InfoColumn>
+            <h3>Location</h3>
+            <p>123 Coffee St, Bean Town, USA</p>
+            <p><a href="https://www.google.com/maps" target="_blank" rel="noopener noreferrer">View on Map</a></p>
+          </InfoColumn>
+        </InfoSection>
+
         <p>&copy; {new Date().getFullYear()} MsCafe. All rights reserved.</p>
         <p>Made with ♥ by Mscoder</p>
+
       </FooterContent>
     </FooterContainer>
   );