footer.php
|
<footer class="footer"> <div class="footer-container">
<div class="footer-left">
<h3>My Dashboard</h3>
<p>© <?php echo date("Y"); ?>
My Dashboard. All Rights Reserved.</p>
</div>
<div class="footer-center">
<h3>Quick Links</h3>
<ul>
<li><a href="admin_dashboard.php">Dashboard</a></li>
<li><a href="manage_users.php">Manage
Users</a></li>
<li><a href="reports.php">Reports</a></li>
<li><a href="settings.php">Settings</a></li>
</ul>
</div>
<div class="footer-right">
<h3>Follow Us</h3>
<div class="social-icons">
<a href="#"><i class="fab
fa-facebook-f"></i></a>
<a href="#"><i class="fab
fa-twitter"></i></a>
<a href="#"><i class="fab
fa-linkedin-in"></i></a>
<a href="#"><i class="fab
fa-instagram"></i></a>
</div>
</div> </div>
<button
onclick="topFunction()" id="scrollTopBtn" title="Go
to top"><i class="fas fa-chevron-up"></i></button> </footer>
<!-- Scroll to Top
Script --> <script> let scrollTopBtn
= document.getElementById("scrollTopBtn");
window.onscroll
= function() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop
> 50) {
scrollTopBtn.style.display = "block";
} else {
scrollTopBtn.style.display = "none";
} };
function topFunction()
{
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0; } </script>
<!-- Footer Styles
--> <style> /* Footer
Styles */ .footer {
background-color: #2C3E50;
color: white;
padding: 20px 0;
text-align: center;
position: relative;
bottom: 0;
width: 100%;
margin-top: 1px; }
.footer-container
{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
max-width: 1200px;
margin: auto;
padding: 20px; }
.footer h3
{
margin-bottom: 10px;
font-size: 18px;
color: #1ABC9C; }
.footer p
{
font-size: 14px;
opacity: 0.8; }
.footer-center
ul {
list-style: none;
padding: 0; }
.footer-center
ul li {
margin: 5px 0; }
.footer-center
ul li a {
text-decoration: none;
color: white;
opacity: 0.8;
transition: 0.3s; }
.footer-center
ul li a:hover {
color: #1ABC9C;
opacity: 1; }
.social-icons
{
margin-top: 10px; }
.social-icons
a {
display: inline-block;
color: white;
margin: 0 10px;
font-size: 18px;
transition: 0.3s; }
.social-icons
a:hover {
color: #1ABC9C; }
/* Scroll
to Top Button */ #scrollTopBtn
{
display: none;
position: fixed;
bottom: 20px;
right: 20px;
background-color: #1ABC9C;
color: white;
border: none;
padding: 10px;
font-size: 16px;
cursor: pointer;
border-radius: 50%;
transition: 0.3s; }
#scrollTopBtn:hover
{
background-color: #16A085; }
/*
Responsive Footer */ @media (max-width:
768px) {
.footer-container {
flex-direction: column;
text-align: center;
} } </style> |