156 lines
4.0 KiB
PHP
156 lines
4.0 KiB
PHP
<!-- Footer Start -->
|
|
<footer class="footer container-fluid bg-primary mt-1 pt-1 wow fadeIn" data-wow-delay="0.1s">
|
|
<div class="container py-3">
|
|
<div class="row g-3">
|
|
<!-- About HeartChoice -->
|
|
<div class="col-lg-6 col-md-6">
|
|
<div class="footer-item">
|
|
<h4 class="text-white mb-4">HeartChoice</h4>
|
|
<p class="text-white mb-2">
|
|
Sistem rekomendasi makanan sehat untuk kesehatan jantung Anda, didukung dengan metode AHP untuk hasil yang akurat.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Links -->
|
|
<div class="col-lg-6 col-md-6">
|
|
<div class="footer-item text-lg-end">
|
|
<h4 class="text-white mb-4">Menu Utama</h4>
|
|
<nav class="footer-nav">
|
|
<a class="btn btn-link text-white" href="#Home">
|
|
<span class="icon-group">
|
|
<i class="fas fa-home"></i>
|
|
</span>
|
|
Home
|
|
</a>
|
|
<a class="btn btn-link text-white" href="#About">
|
|
<span class="icon-group">
|
|
<i class="fas fa-info-circle"></i>
|
|
</span>
|
|
About
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="copyright">
|
|
<div class="row">
|
|
<div class="col-md-6 text-center text-md-start mb-3 mb-md-0">
|
|
<p class="text-white">© 2024 <a class="text-white border-bottom" href="#">HeartChoice</a> - Sistem Rekomendasi Makanan Sehat</p>
|
|
</div>
|
|
<div class="col-md-6 text-center text-md-end">
|
|
<p class="text-white">Dikembangkan dengan <i class="fas fa-heart text-danger"></i> untuk kesehatan Anda</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<!-- Footer End -->
|
|
|
|
<style>
|
|
:root {
|
|
--footer-gradient-start: #2196F3;
|
|
--footer-gradient-end: #1976D2;
|
|
--footer-hover-bg: rgba(255, 255, 255, 0.05);
|
|
--footer-border-color: rgba(255, 255, 255, 0.1);
|
|
--footer-link-underline: rgba(255, 255, 255, 0.5);
|
|
--footer-transition: 0.3s ease;
|
|
}
|
|
|
|
.footer {
|
|
background: linear-gradient(135deg, var(--footer-gradient-start), var(--footer-gradient-end)) !important;
|
|
}
|
|
|
|
.footer-item {
|
|
height: 100%;
|
|
padding: 0.5rem;
|
|
border-radius: 10px;
|
|
transition: var(--footer-transition);
|
|
}
|
|
|
|
.footer-item:hover {
|
|
background: var(--footer-hover-bg);
|
|
}
|
|
|
|
.footer-nav {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-end;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.footer .btn-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 8px 15px;
|
|
text-decoration: none;
|
|
transition: var(--footer-transition);
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.footer .btn-link:hover {
|
|
background: var(--footer-hover-bg);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.footer .icon-group {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.footer .icon-group i {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.footer .copyright {
|
|
padding: 25px 0;
|
|
border-top: 1px solid var(--footer-border-color);
|
|
}
|
|
|
|
.footer .copyright a {
|
|
text-decoration: none;
|
|
transition: var(--footer-transition);
|
|
}
|
|
|
|
.footer .copyright a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.footer-item {
|
|
text-align: center;
|
|
}
|
|
|
|
.footer-nav {
|
|
justify-content: center;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.footer .btn-link {
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.footer .copyright {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.footer-nav {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.footer .btn-link {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style> |