Skip to content

Commit 76607ce

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #1519 from akshattiwarii/updated_footer
Updated footer design
2 parents 85dab9e + 2502cc8 commit 76607ce

File tree

4 files changed

+223
-43
lines changed

4 files changed

+223
-43
lines changed

‎Website/about.html

Lines changed: 42 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
rel="stylesheet"
3434
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
3535
/>
36+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
3637
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
3738
<style>
3839
.content {
@@ -362,18 +363,51 @@ <h3>Join the Community</h3>
362363
>
363364
</div>
364365
</div>
366+
365367
</div>
366368

367-
<footer class="footer">
368-
<div>
369-
&copy; <span id="year"></span> Machine Learning Repos -
370-
<a href="https://github.com/recodehive" id="footer-link">RecodeHive</a>.
371-
All rights reserved.
369+
<!-- new footer updated -->
370+
<div class="footer">
371+
<div class="footer-col">
372+
<img src="./assets/recode-hive.png" alt="">
373+
<p class="footer-p">
374+
375+
Machine Learning is an exciting and rapidly evolving field that offers endless opportunities for innovation and discovery.
376+
377+
</p>
378+
<div class="footer-social">
379+
<a href="#"><i class="fa-brands fa-facebook"></i></a>
380+
<a href="#"><i class="fa-brands fa-instagram"></i></a>
381+
<a href="#"><i class="fa-brands fa-square-x-twitter"></i></a>
382+
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
383+
</div>
384+
</div>
385+
<div class="footer-col-main">
386+
<h4 class="h46">Company</h4>
387+
<a href="#">Organisation</a>
388+
<a href="#">Franchise</a>
389+
<a href="#">Contribute</a>
390+
<a href="#">Network</a>
391+
</div>
392+
<div class="footer-col-main">
393+
<h4 class="h46">About Us</h4>
394+
<a href="#">Blogs</a>
395+
<a href="#">Security</a>
396+
<a href="#">Careers</a>
397+
<a href="#">FAQS</a>
372398
</div>
373-
<div class="code-of-conduct-button">
374-
<a href="conduct.html">View Code of Conduct</a>
399+
<div class="footer-col-main">
400+
<h4 class="h46">Contact</h4>
401+
<a href="#">Terms & Conditions</a>
402+
<a href="#">Contact Us</a>
403+
<a href="#">Privacy Policy</a>
404+
<a href="#">Feedback</a>
375405
</div>
376-
</footer>
406+
</div>
407+
<div class="footer-bar">
408+
Copyright &copy; 2024 <a href="https://github.com/recodehive">Recodehive</a>. All rights reserved.
409+
410+
</div>
377411
<script src="js/script.js"></script>
378412
</body>
379413
</html>

‎Website/css/styles.css

Lines changed: 95 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -541,22 +541,6 @@ button#toggle-stats:hover {
541541
transform: rotate(45deg);
542542
}
543543

544-
545-
/* Footer stays at the bottom */
546-
.footer {
547-
background-color: #121245;
548-
/* Dark blue for footer */
549-
color: #f1f1f1;
550-
padding: 20px;
551-
text-align: center;
552-
margin-top: auto;
553-
animation: fadeIn 1s ease-in-out;
554-
}
555-
556-
#footer-link {
557-
color: white
558-
}
559-
560544
button#toggle-languages {
561545
display: block;
562546
margin: 20px auto;
@@ -1771,19 +1755,105 @@ body.blue-mode {
17711755
}
17721756

17731757
/* Footer Styles */
1774-
.light-mode footer {
1775-
background-color: #f8f9fa; /* Light background */
1776-
color: #333; /* Dark text */
1758+
.light-mode .footer {
1759+
background-color: #0a0266;
1760+
z-index: -1;
17771761
}
17781762

1779-
.dark-mode footer {
1780-
background-color: #333; /* Dark background */
1781-
color: #f1f1f1; /* Light text */
1763+
.light-mode .footer-bar {
1764+
z-index: -1;
1765+
width: 100%;
1766+
text-align: center;
1767+
background-color: #0a0266;
17821768
}
17831769

1784-
.blue-mode footer {
1785-
background-color: #121245; /* Dark blue background */
1786-
color: #f1f1f1; /* Light text */
1770+
.dark-mode .footer-bar a {
1771+
color: white;
1772+
}
1773+
1774+
.light-mode .footer-bar a {
1775+
color: white;
1776+
}
1777+
1778+
.footer {
1779+
padding: 5rem 1rem;
1780+
position: relative;
1781+
display: grid;
1782+
grid-template-columns: 400px repeat(3, 1fr);
1783+
gap: 2rem;
1784+
}
1785+
1786+
.footer-col img {
1787+
width: 4rem;
1788+
height: 4rem;
1789+
}
1790+
1791+
.footer-p {
1792+
opacity: 0.7;
1793+
margin-bottom: 2rem;
1794+
}
1795+
1796+
.footer-social {
1797+
display: flex;
1798+
align-items: center;
1799+
}
1800+
1801+
.footer-social i {
1802+
color: white;
1803+
font-size: 1.25rem;
1804+
margin-right: 1rem;
1805+
opacity: 0.7;
1806+
border: 2px solid white;
1807+
border-radius: 100%;
1808+
padding: 0.5rem;
1809+
transition: background-color 0.3s ease 0s;
1810+
}
1811+
1812+
.footer-social i:hover {
1813+
opacity: 1;
1814+
background-color: #35373b;
1815+
}
1816+
1817+
.h46 {
1818+
margin-bottom: 2rem;
1819+
font-size: 1.2rem;
1820+
font-weight: 500;
1821+
color: white;
1822+
}
1823+
1824+
.footer-col-main {
1825+
margin-top: -1rem;
1826+
}
1827+
1828+
.footer-col-main a {
1829+
display: block;
1830+
margin-bottom: 1rem;
1831+
color: white;
1832+
opacity: 0.7;
1833+
text-decoration: none;
1834+
transition: opacity 0.3s ease 0s;
1835+
}
1836+
1837+
.footer-col-main a:hover {
1838+
opacity: 1;
1839+
}
1840+
1841+
.footer-bar {
1842+
margin: auto;
1843+
padding: 1rem;
1844+
font-size: 0.8rem;
1845+
color: white;
1846+
}
1847+
1848+
.footer-bar a {
1849+
text-decoration: none;
1850+
}
1851+
1852+
/* footer responsive */
1853+
@media (max-width: 900px) {
1854+
.footer {
1855+
grid-template-columns: 1fr 200px;
1856+
}
17871857
}
17881858

17891859
/* Responsive Design Adjustments */

‎Website/index.html

Lines changed: 43 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
<link rel="stylesheet" href="css/styles.css" />
2424
<link rel="icon" href="/assets/recode-hive.png" type="image/png"> <!-- Added favicon -->
2525
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
26+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
2627
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
2728
<style>
2829
#progress-container {
@@ -584,12 +585,48 @@ <h2>Here are some of our active GitHub repositories</h2>
584585
</div>
585586

586587

587-
<footer class="footer">
588-
<div>&copy; <span id="year"></span> Machine Learning Repos - <a href="https://github.com/recodehive" id="footer-link">RecodeHive</a>. All rights reserved.</div>
589-
<div class="code-of-conduct-button">
590-
<a href="conduct.html">View Code of Conduct</a>
591-
</div>
592-
</footer>
588+
<!-- new footer changes -->
589+
<div class="footer">
590+
<div class="footer-col">
591+
<img src="./assets/recode-hive.png" alt="">
592+
<p class="footer-p">
593+
594+
Machine Learning is an exciting and rapidly evolving field that offers endless opportunities for innovation and discovery.
595+
596+
</p>
597+
<div class="footer-social">
598+
<a href="#"><i class="fa-brands fa-facebook"></i></a>
599+
<a href="#"><i class="fa-brands fa-instagram"></i></a>
600+
<a href="#"><i class="fa-brands fa-square-x-twitter"></i></a>
601+
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
602+
</div>
603+
</div>
604+
<div class="footer-col-main">
605+
<h4 class="h46">Company</h4>
606+
<a href="#">Organisation</a>
607+
<a href="#">Franchise</a>
608+
<a href="#">Contribute</a>
609+
<a href="#">Network</a>
610+
</div>
611+
<div class="footer-col-main">
612+
<h4 class="h46">About Us</h4>
613+
<a href="#">Blogs</a>
614+
<a href="#">Security</a>
615+
<a href="#">Careers</a>
616+
<a href="#">FAQS</a>
617+
</div>
618+
<div class="footer-col-main">
619+
<h4 class="h46">Contact</h4>
620+
<a href="#">Terms & Conditions</a>
621+
<a href="#">Contact Us</a>
622+
<a href="#">Privacy Policy</a>
623+
<a href="#">Feedback</a>
624+
</div>
625+
</div>
626+
<div class="footer-bar">
627+
Copyright &copy; 2024 <a href="https://github.com/recodehive">Recodehive</a>. All rights reserved.
628+
629+
</div>
593630

594631

595632

‎Website/organization.html

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
<link rel="stylesheet" href="css/styles.css" />
1010
<link rel="stylesheet" href="css/Org.css">
1111
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
1213
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
1314
</head>
1415

@@ -76,10 +77,48 @@ <h2>Get Involved with Recode Hive</h2>
7677

7778
</main>
7879

79-
<footer class="footer">
80-
<div>&copy; 2024 Machine Learning Repos - <a href="https://github.com/recodehive"
81-
id="footer-link">RecodeHive</a>. All rights reserved.</div>
82-
</footer>
80+
<!-- new footer updated -->
81+
<div class="footer">
82+
<div class="footer-col">
83+
<img src="./assets/recode-hive.png" alt="">
84+
<p class="footer-p">
85+
86+
Machine Learning is an exciting and rapidly evolving field that offers endless opportunities for innovation and discovery.
87+
88+
</p>
89+
<div class="footer-social">
90+
<a href="#"><i class="fa-brands fa-facebook"></i></a>
91+
<a href="#"><i class="fa-brands fa-instagram"></i></a>
92+
<a href="#"><i class="fa-brands fa-square-x-twitter"></i></a>
93+
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
94+
</div>
95+
</div>
96+
<div class="footer-col-main">
97+
<h4 class="h46">Company</h4>
98+
<a href="#">Organisation</a>
99+
<a href="#">Franchise</a>
100+
<a href="#">Contribute</a>
101+
<a href="#">Network</a>
102+
</div>
103+
<div class="footer-col-main">
104+
<h4 class="h46">About Us</h4>
105+
<a href="#">Blogs</a>
106+
<a href="#">Security</a>
107+
<a href="#">Careers</a>
108+
<a href="#">FAQS</a>
109+
</div>
110+
<div class="footer-col-main">
111+
<h4 class="h46">Contact</h4>
112+
<a href="#">Terms & Conditions</a>
113+
<a href="#">Contact Us</a>
114+
<a href="#">Privacy Policy</a>
115+
<a href="#">Feedback</a>
116+
</div>
117+
</div>
118+
<div class="footer-bar">
119+
Copyright &copy; 2024 <a href="https://github.com/recodehive">Recodehive</a>. All rights reserved.
120+
121+
</div>
83122
<script src="js/script.js"></script>
84123
<script>
85124

0 commit comments

Comments
 (0)