Skip to content

Commit

Permalink
Merge pull request #1519 from akshattiwarii/updated_footer
Browse files Browse the repository at this point in the history 
Updated footer design
  • Loading branch information
@sanjay-kv
sanjay-kv authored Oct 22, 2024
2 parents 85dab9e + 2502cc8 commit 76607ce
Show file tree
Hide file tree
Showing 4 changed files with 223 additions and 43 deletions.
50 changes: 42 additions & 8 deletions Website/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<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" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.content {
Expand Down Expand Up @@ -362,18 +363,51 @@ <h3>Join the Community</h3>
>
</div>
</div>

</div>

<footer class="footer">
<div>
&copy; <span id="year"></span> Machine Learning Repos -
<a href="https://github.com/recodehive" id="footer-link">RecodeHive</a>.
All rights reserved.
<!-- new footer updated -->
<div class="footer">
<div class="footer-col">
<img src="./assets/recode-hive.png" alt="">
<p class="footer-p">

Machine Learning is an exciting and rapidly evolving field that offers endless opportunities for innovation and discovery.

</p>
<div class="footer-social">
<a href="#"><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-square-x-twitter"></i></a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
</div>
</div>
<div class="footer-col-main">
<h4 class="h46">Company</h4>
<a href="#">Organisation</a>
<a href="#">Franchise</a>
<a href="#">Contribute</a>
<a href="#">Network</a>
</div>
<div class="footer-col-main">
<h4 class="h46">About Us</h4>
<a href="#">Blogs</a>
<a href="#">Security</a>
<a href="#">Careers</a>
<a href="#">FAQS</a>
</div>
<div class="code-of-conduct-button">
<a href="conduct.html">View Code of Conduct</a>
<div class="footer-col-main">
<h4 class="h46">Contact</h4>
<a href="#">Terms & Conditions</a>
<a href="#">Contact Us</a>
<a href="#">Privacy Policy</a>
<a href="#">Feedback</a>
</div>
</footer>
</div>
<div class="footer-bar">
Copyright &copy; 2024 <a href="https://github.com/recodehive">Recodehive</a>. All rights reserved.

</div>
<script src="js/script.js"></script>
</body>
</html>
120 changes: 95 additions & 25 deletions Website/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -541,22 +541,6 @@ button#toggle-stats:hover {
transform: rotate(45deg);
}


/* Footer stays at the bottom */
.footer {
background-color: #121245;
/* Dark blue for footer */
color: #f1f1f1;
padding: 20px;
text-align: center;
margin-top: auto;
animation: fadeIn 1s ease-in-out;
}

#footer-link {
color: white
}

button#toggle-languages {
display: block;
margin: 20px auto;
Expand Down Expand Up @@ -1771,19 +1755,105 @@ body.blue-mode {
}

/* Footer Styles */
.light-mode footer {
background-color: #f8f9fa; /* Light background */
color: #333; /* Dark text */
.light-mode .footer {
background-color: #0a0266;
z-index: -1;
}

.dark-mode footer {
background-color: #333; /* Dark background */
color: #f1f1f1; /* Light text */
.light-mode .footer-bar {
z-index: -1;
width: 100%;
text-align: center;
background-color: #0a0266;
}

.blue-mode footer {
background-color: #121245; /* Dark blue background */
color: #f1f1f1; /* Light text */
.dark-mode .footer-bar a {
color: white;
}

.light-mode .footer-bar a {
color: white;
}

.footer {
padding: 5rem 1rem;
position: relative;
display: grid;
grid-template-columns: 400px repeat(3, 1fr);
gap: 2rem;
}

.footer-col img {
width: 4rem;
height: 4rem;
}

.footer-p {
opacity: 0.7;
margin-bottom: 2rem;
}

.footer-social {
display: flex;
align-items: center;
}

.footer-social i {
color: white;
font-size: 1.25rem;
margin-right: 1rem;
opacity: 0.7;
border: 2px solid white;
border-radius: 100%;
padding: 0.5rem;
transition: background-color 0.3s ease 0s;
}

.footer-social i:hover {
opacity: 1;
background-color: #35373b;
}

.h46 {
margin-bottom: 2rem;
font-size: 1.2rem;
font-weight: 500;
color: white;
}

.footer-col-main {
margin-top: -1rem;
}

.footer-col-main a {
display: block;
margin-bottom: 1rem;
color: white;
opacity: 0.7;
text-decoration: none;
transition: opacity 0.3s ease 0s;
}

.footer-col-main a:hover {
opacity: 1;
}

.footer-bar {
margin: auto;
padding: 1rem;
font-size: 0.8rem;
color: white;
}

.footer-bar a {
text-decoration: none;
}

/* footer responsive */
@media (max-width: 900px) {
.footer {
grid-template-columns: 1fr 200px;
}
}

/* Responsive Design Adjustments */
Expand Down
49 changes: 43 additions & 6 deletions Website/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
<link rel="stylesheet" href="css/styles.css" />
<link rel="icon" href="/assets/recode-hive.png" type="image/png"> <!-- Added favicon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<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" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
#progress-container {
Expand Down Expand Up @@ -584,12 +585,48 @@ <h2>Here are some of our active GitHub repositories</h2>
</div>


<footer class="footer">
<div>&copy; <span id="year"></span> Machine Learning Repos - <a href="https://github.com/recodehive" id="footer-link">RecodeHive</a>. All rights reserved.</div>
<div class="code-of-conduct-button">
<a href="conduct.html">View Code of Conduct</a>
</div>
</footer>
<!-- new footer changes -->
<div class="footer">
<div class="footer-col">
<img src="./assets/recode-hive.png" alt="">
<p class="footer-p">

Machine Learning is an exciting and rapidly evolving field that offers endless opportunities for innovation and discovery.

</p>
<div class="footer-social">
<a href="#"><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-square-x-twitter"></i></a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
</div>
</div>
<div class="footer-col-main">
<h4 class="h46">Company</h4>
<a href="#">Organisation</a>
<a href="#">Franchise</a>
<a href="#">Contribute</a>
<a href="#">Network</a>
</div>
<div class="footer-col-main">
<h4 class="h46">About Us</h4>
<a href="#">Blogs</a>
<a href="#">Security</a>
<a href="#">Careers</a>
<a href="#">FAQS</a>
</div>
<div class="footer-col-main">
<h4 class="h46">Contact</h4>
<a href="#">Terms & Conditions</a>
<a href="#">Contact Us</a>
<a href="#">Privacy Policy</a>
<a href="#">Feedback</a>
</div>
</div>
<div class="footer-bar">
Copyright &copy; 2024 <a href="https://github.com/recodehive">Recodehive</a>. All rights reserved.

</div>



Expand Down
47 changes: 43 additions & 4 deletions Website/organization.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<link rel="stylesheet" href="css/styles.css" />
<link rel="stylesheet" href="css/Org.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<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" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

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

</main>

<footer class="footer">
<div>&copy; 2024 Machine Learning Repos - <a href="https://github.com/recodehive"
id="footer-link">RecodeHive</a>. All rights reserved.</div>
</footer>
<!-- new footer updated -->
<div class="footer">
<div class="footer-col">
<img src="./assets/recode-hive.png" alt="">
<p class="footer-p">

Machine Learning is an exciting and rapidly evolving field that offers endless opportunities for innovation and discovery.

</p>
<div class="footer-social">
<a href="#"><i class="fa-brands fa-facebook"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
<a href="#"><i class="fa-brands fa-square-x-twitter"></i></a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
</div>
</div>
<div class="footer-col-main">
<h4 class="h46">Company</h4>
<a href="#">Organisation</a>
<a href="#">Franchise</a>
<a href="#">Contribute</a>
<a href="#">Network</a>
</div>
<div class="footer-col-main">
<h4 class="h46">About Us</h4>
<a href="#">Blogs</a>
<a href="#">Security</a>
<a href="#">Careers</a>
<a href="#">FAQS</a>
</div>
<div class="footer-col-main">
<h4 class="h46">Contact</h4>
<a href="#">Terms & Conditions</a>
<a href="#">Contact Us</a>
<a href="#">Privacy Policy</a>
<a href="#">Feedback</a>
</div>
</div>
<div class="footer-bar">
Copyright &copy; 2024 <a href="https://github.com/recodehive">Recodehive</a>. All rights reserved.

</div>
<script src="js/script.js"></script>
<script>

Expand Down

0 comments on commit 76607ce

Please sign in to comment.