Merge pull request #57 from Asymtode712/WebFeat

added footer for the website
recodehive · Aug 5, 2024 · d0895d4 · d0895d4
2 parents 6d867b5 + 69198ea
commit d0895d4
Show file tree

Hide file tree

Showing 3 changed files with 191 additions and 2 deletions.
diff --git a/assets/recode.png b/assets/recode.png
diff --git a/index.html b/index.html
@@ -60,6 +60,47 @@ <h1 class="main-heading">Awesome GitHub Profile READMEs</h1>
         <!-- Profiles will be dynamically loaded here -->
       </div>
     </div>
+    <footer id="Contact" class="footer-2">
+      <div class="footer-container">
+        <div class="footer-content">
+          <div class="footer-info">
+            <img src="assets/recode.png" alt="Recode-Hive logo" class="footer-logo">
+          </div>
+
+          <div class="footer-links">
+            <div class="footer-section">
+             <h6 class="footer-heading">ABOUT RECODE-HIVE</h6>
+             <div>
+              <a href="#" class="footer-link">Contact Us</a>
+              <a href="https://github.com/recodehive/awesome-github-profiles/blob/main/CODE_OF_CONDUCT.md" class="footer-link">Code of Conduct</a>
+             </div>
+            </div>
+            <div class="footer-section">
+              <h6 class="footer-heading">GET INVOLVED</h6>
+              <div>
+                <a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+" class="footer-link">Add Your Profile</a>
+                <a href="https://github.com/recodehive/Support/issues/new?assignees=&labels=invite+me+to+the+community&projects=&template=invitation.yml&title=Please+invite+me+to+the+Recode-Hive+GitHub+Community+Organization" class="footer-link">Join the Organization</a>
+              </div>
+            </div>
+          </div>
+
+          <div class="footer-description">
+            <h5>
+              We focus on quality content to the right people at the right time⏱️. Recode Hive will help you with updates on what’s happening in the tech industry💻. We focus on everything starting from How To’s to Data Science.
+            </h5>
+            <a href="https://www.linkedin.com/company/recodehive/" class="footer-button">Explore</a>
+          </div>
+        </div>
+      </div>
+
+      <div class="footer-bottom">
+        <div class="footer-container">
+          <p class="footer-copyright">
+            &copy; 2024 Recode-Hive. Made with 🖤️ by the community. All rights reserved.
+          </p>
+        </div>
+      </div>
+    </footer>
     <script src="retriveprofile.js"></script>
     <script src="dark-mode.js"></script>
   </body>

diff --git a/styles.css b/styles.css
@@ -270,7 +270,6 @@ body {
     background-color: #c5c5c5;
   }
 
-  /* Adjust the existing toggle-switch styles to fit in the navbar */
   .toggle-switch {
     margin-left: 5px;
   }
@@ -287,4 +286,153 @@ body {
 
   body.dark-mode .navbar-link:hover {
     background-color: #555;
-  }
+  }
+
+  .footer-2 {
+    background-color: #fff;
+    margin-top: 80px;
+  }
+
+  .footer-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+  }
+
+  .footer-content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    padding: 2rem 0;
+  }
+
+  .footer-info {
+    flex: 0 1 200px; 
+    margin-top: 2rem;
+    margin-right: 2rem; 
+  }
+
+  .footer-links {
+    flex: 1 1 auto; 
+    display: flex;
+    justify-content: flex-start; 
+    max-width: 500px; 
+    gap: 50px;
+  }
+
+  .footer-description {
+    flex: 1 1 300px; 
+    max-width: 400px; 
+  }
+
+  .footer-logo {
+    max-width: 100%;
+    height: auto;
+    cursor: pointer;
+  }
+
+  .footer-section {
+    margin-right: 3rem; 
+  }
+
+  .footer-heading {
+    font-size: 1.125rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    margin-bottom: 1rem;
+  }
+
+  .footer-link {
+    display: block;
+    color: #000;
+    text-decoration: none;
+    margin-bottom: 0.5rem;
+  }
+
+  .footer-link:hover {
+    text-decoration: underline;
+  }
+
+  .footer-description h5 {
+    font-size: 1rem;
+    font-weight: normal;
+    margin-bottom: 1rem;
+  }
+
+  .footer-link:hover{
+    display: inline-block;
+    text-decoration: underline;
+  }
+
+  .footer-description h5 {
+    font-size: 1rem;
+    font-weight: normal;
+    margin-bottom: 1rem;
+  }
+
+  .footer-button {
+    display: inline-block;
+    background-color: #000;
+    color: #fff;
+    padding: 0.5rem 1rem;
+    border-radius: 0.25rem;
+    text-decoration: none;
+    transition: background-color 0.3s;
+  }
+
+  .footer-button:hover {
+    background-color: #333;
+  }
+
+  .footer-bottom {
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 1rem 0;
+  }
+
+  .footer-copyright {
+    text-align: center;
+    font-size: 0.875rem;
+  }
+
+  /* Dark mode styles */
+  body.dark-mode .footer-2 {
+    background: #333;
+  }
+
+   body.dark-mode .footer-link{
+    color: #fff;
+   }
+
+  body.dark-mode .footer-info img{
+    filter: brightness(0) invert(1) ;
+  } 
+
+  body.dark-mode .footer-button {
+    background-color: #fff;
+    color: #000;
+  }
+
+  body.dark-mode .footer-button:hover {
+    background-color: #e0e0e0;
+  }
+
+  /* Responsive adjustments */
+@media (max-width: 768px) {
+  .footer-content {
+    flex-direction: column;
+  }
+
+  .footer-info, .footer-links, .footer-description {
+    width: 100%;
+    margin-bottom: 2rem;
+  }
+
+  .footer-links {
+    flex-direction: column;
+  }
+
+  .footer-section {
+    margin-right: 0;
+    margin-bottom: 1rem;
+  }
+}