desafio 10 - ajustes finais

gabrielalencs · Oct 30, 2024 · c89a71a · c89a71a
1 parent 753784a
commit c89a71a
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 21 deletions.
diff --git a/desafio_10/src/components/Footer/index.jsx b/desafio_10/src/components/Footer/index.jsx
@@ -8,8 +8,9 @@ import twitterIcon from '../../assets/images/twitter.svg';
 // Styled Component
 
 import {
-    FooterContainer, Label, Icon,
-    SocialMediaList, CopyHomeYou, SocialMediaContainer
+    FooterContainer, Label, Icon, 
+    FooterContent, SocialMediaList, CopyHomeYou, 
+    SocialMediaContainer, Developer
 } from "./styles";
 
 
@@ -24,21 +25,31 @@ const Footer = () => {
 
     return (
         <FooterContainer className="container">
+            <FooterContent>
+                <div>
+                    <CopyHomeYou>&copy; 2024 <span>Homeyou</span></CopyHomeYou>
+                </div>
+                <SocialMediaContainer>
+                    <Label>Conectar</Label>
+                    <SocialMediaList>
+                        {
+                            iconsSocialMedia.map(item => (
+                                <li key={item.id}>
+                                    <Icon src={item.icon} alt={`icon ${item.id}`} />
+                                </li>
+                            ))
+                        }
+                    </SocialMediaList>
+                </SocialMediaContainer>
+            </FooterContent>
             <div>
-                <CopyHomeYou>&copy; 2024 <span>Homeyou</span></CopyHomeYou>
+                <Developer>
+                    Desafio da comunidade
+                    <a href="https://github.com/iuricode/desafios-frontend" target='_blank'> CodeLab</a>.
+                    <br /> Desenvolvido por
+                    <a href="https://github.com/gabrielalencs" target='_blank'> Gabriel de Alencar</a>.
+                </Developer>
             </div>
-            <SocialMediaContainer>
-                <Label>Conectar</Label>
-                <SocialMediaList>
-                    {
-                        iconsSocialMedia.map(item => (
-                            <li key={item.id}>
-                                <Icon src={item.icon} alt={`icon ${item.id}`} />
-                            </li>
-                        ))
-                    }
-                </SocialMediaList>
-            </SocialMediaContainer>
         </FooterContainer>
     )
 }

diff --git a/desafio_10/src/components/Footer/styles.jsx b/desafio_10/src/components/Footer/styles.jsx
@@ -5,12 +5,6 @@ export const FooterContainer = styled.footer`
     padding: 8rem 3rem;
     border-top: 2px solid #D9D9D6;
 
-    @media (width >= 768px) {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-    }
-
     @media (width >= 1216px) {
         margin: 15rem auto 0 !important;
     }
@@ -20,6 +14,14 @@ export const FooterContainer = styled.footer`
     }
 `;
 
+export const FooterContent = styled.div`
+    @media (width >= 768px) {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+`;
+
 export const CopyHomeYou = styled.span`
     font-size: 1.8rem;
 
@@ -74,3 +76,28 @@ export const SocialMediaList = styled.ul`
     align-items: center;
     gap: 2rem;
 `;
+
+export const Developer = styled.p`
+    display: inline-block;
+    width: 100%;
+    margin-top: 5rem;
+    font-size: 1.8rem;
+    text-align: center;
+
+    br {
+        display: block;
+
+        @media (width >= 768px) {
+            display: none;
+        }
+    }
+
+    a {
+        color: var(--brand-color);
+        transition: all .3s;
+
+        &:hover {
+            color: #754c1d;
+        }
+    }
+`;