I fixed the mobile footer

CommuniCare1 · Nov 1, 2024 · 3198e78 · 3198e78
1 parent 3a1d940
commit 3198e78
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 18 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/about.html b/about.html
@@ -222,12 +222,14 @@ <h2>Our Team</h2>
             </div>
         </section>
         <footer>
+            <img class ="heart_leaf" src="images/Brand/Logo.svg">
             <h4>Let's Work Together!</h4>
             <button class= "Join"
             onclick="document.location='contact.html'">Contact Us</button>
             <button class= "Join"
             onclick="document.location='contact.html'">Join Our Team
             </button>
+            <img class ="Line" src="images/line.png">
             <nav>
                 <a href="index.html">Home</a>
                 <a href="about.html">About</a>

diff --git a/banner.css b/banner.css
@@ -130,6 +130,9 @@ a:hover{
     .header {
         padding: 0 2rem;
     }
+    .dropdown_menu .action_btn{
+        background: inherit;
+    }
 }
     @media (max-width: 576px) {
 
@@ -156,6 +159,9 @@ a:hover{
         .leaf {
             top: -60px;
         }
+        .dropdown_menu .action_btn{
+            background: inherit;
+        }
 
     }
 

diff --git a/footer.css b/footer.css
@@ -116,15 +116,20 @@ footer p {position:relative;
     font-weight: 600;
     line-height: 16.34px;
     text-align: right;
-    color:rgba(28, 51, 18, 1);}
+    color:#1c3312;}
+.heart_leaf, .Line{
+    display: none;
+}
 
 /* Media Queries */
 @media screen and (max-width: 1024px) {
     footer {
         height: auto;
         padding: 20px;
     }
-
+    .heart_leaf, .Line{
+        display: none;
+    }
     footer h4 {
         font-size: 40px;
         margin-left: 0;
@@ -183,46 +188,59 @@ footer p {position:relative;
 
 @media screen and (max-width: 480px){
 
-    footer {height: 61em;
+    footer {
+        height: 61em;
         padding: 0%;
-        width:100%;}
+        width:100%;
+    }
 
     .FooterImg {
-        top: -42em;
-        width: 100%;
-        transform: scale(0.85);
+        display: none;
+    }
+
+    .heart_leaf {
+        display: inline-block;
+        margin-top: 5rem;
+        align-items: center;
     }
+
     footer h4 {
-        font-size: 38px;
+        font-size: 32px;
         position: relative;
-        top: 3em;
         left: -1em;
         width: 126%;
     }
     .Join {
         width: 260px;
         height: 70px;
-        font-size: 25px;
+        font-size: 25.36px;
         position: relative;
-        top: 87px;
         transform: scale(1.25);
         margin: 20px;
     }
+    .Line {
+        display: inline-block;
+        margin-top: 2rem;
+        align-items: center;
+    }
 
     footer nav {
         transform: scale(2);
-        margin-top: 167px;
+        margin-top: 70px;
+
+    }
+    footer nav a {
+        font-size: 16px;
+        margin: 10px 0;
     }
-    footer nav a {font-size: 16px;
-        margin: 10px 0;}
     .InstallApp {
         transform: scale(2);
-        top: -91px;
+        margin-top: 90px;
         margin-bottom: 30px;
     }
     footer p {
-        margin-top: 12em;
-        font-size: 16px;
+        margin-top: 17rem;
+        font-size: 12px;
         width: 130%;
         left: 3em;
         display:flex;

diff --git a/footer.html b/footer.html
@@ -8,18 +8,21 @@
     </head>
 
     <body>
+        <img class = "heart_leaf" src="images/Brand/Logo.svg">
         <h4>Let's Work Together!</h4>
         <button class= "Join"
         onclick="document.location='contact.html'">Contact Us</button>
         <button class= "Join"
         onclick="document.location='contact.html'">Join Our Team
         </button>
+
+        <img class ="Line" src="images/line.png">
         <nav>
             <a href="index.html">Home</a>
             <a href="about.html">About</a>
             <a href="workshops.html">Workshops</a>
         </nav>
-        <img class="FooterImg" src="images/Brand/FooterLogo.svg"/>
+        <img class= "FooterImg" src="images/Brand/FooterLogo.svg"/>
         <button class="InstallApp"
         onclick="document.location= 'https://forms.gle/bXmntpJJ8i1UY5G39'" >App Interest Form
         </button>

diff --git a/images/.DS_Store b/images/.DS_Store
diff --git a/images/People/.DS_Store b/images/People/.DS_Store
diff --git a/images/line.png b/images/line.png
diff --git a/images/line.svg b/images/line.svg