Back up of Code - Footer Amplify
<script type="text/javascript">
// Function to replace the footer
function replaceFooter() {
const oldFooter = document.querySelector('footer.amplify-footer');
if (oldFooter) oldFooter.remove();
const style = document.createElement('style');
style.innerHTML = `
.footer-clean {
background-image: url('https://streamline.imgix.net/e012266c-7d7c-4f01-9651-41fefd5f0fe1/d58283bc-95b2-4b9b-ba86-592440707500/bg_footer_new.png?ixlib=rb-1.1.0&w=2000&h=2000&fit=max&or=0&s=d0ff332830f0bc318fa39f010c69c84c');
background-size: cover;
background-position: center;
color: #FFFFFF;
padding: 40px 0;
}
.footer-clean .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.footer-clean .row {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.footer-clean .col-sm-4 {
flex: 0 0 32%;
max-width: 32%;
box-sizing: border-box;
margin-bottom: 20px;
}
.footer-col {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 10px;
}
.footer-clean p,
.footer-clean a,
.footer-clean .footer-poweredby a {
color: #ffffff !important;
font-weight: bold !important;
text-decoration: none;
font-size: 16px; /* Increase paragraph and link font size */
}
.footer-navigation li a {
font-size: 18px; /* Increase font size of list items */
}
.footer-contact p {
font-size: 18px; /* Increase font size of paragraphs in the contact section */
}
.footer-logo img {
max-width: 235px;
}
.footer-contact p {
margin: 10;
padding: 5px 0;
}
.footer-navigation {
padding: 0;
list-style: none;
}
.footer-navigation li {
margin: 15px 0;
}
.footer-navigation ul .dropdown-menu {
list-style: none;
padding: 0;
}
.footer-navigation ul .dropdown-menu li {
margin-left: 20px;
}
.footer-social-links a img {
width: 45px;
height: 45px;
margin-right: 10px;
}
.footer-social-links a:hover img {
transform: scale(1.1); /* Slightly enlarge the icon on hover */
}
.footer-poweredby {
font-size: 14px;
padding-top: 10px;
color: #ffffff;
}
/* Responsive styles */
@media (max-width: 768px) {
.footer-clean .col-sm-4 {
flex: 0 0 100%;
max-width: 100%;
}
}
`;
document.head.appendChild(style);
const newFooterHtml = `
<footer class="footer-clean clearfix">
<div class="container">
<div class="row">
<div class="footer-col footer-col-1 col-sm-4">
<div class="footer-logo">
<a href="/">
<img src="https://streamline.imgix.net/8dd2697a-cbc0-48ff-a9ad-d69c6db53c2a/8e4f1bc1-3ae2-432f-803b-f7d1127fae0c/Metro%20Bar%20Logo-white-lettering.png?ixlib=rb-1.1.0&or=0&w=800&h=800&fit=max&auto=format%2Ccompress&s=2afb12bc9257d246b3d086d4caa4540b" width=235 alt="Sacramento Metropolitan Fire District">
</a>
</div>
<div class="footer-contact">
<p class="footer-address">10545 Armstrong Ave., Suite 200<br>Mather, California 95655-4102</p>
<p class="footer-hours">Monday - Friday 8:00 AM - 5:00 PM</p>
<p class="footer-phone">Phone: (916) 859-4300</p>
<p class="footer-phone">Fax: (916) 859-3702</p>
<div class="footer-poweredby">
Powered by <a class="powered-by-link external" href="https://www.getstreamline.com">Streamline</a> |
<a class="sign-in-link" href="/users/sign_in">Sign in</a>
</div>
</div>
</div>
<div class="footer-col footer-col-2 col-sm-4">
<ul class="footer-navigation">
<li><a href="/">Home</a></li>
<li><a href="/residents">Resident</a></li>
<li><a href="/businesses">Business</a></li>
<li><a href="/community-risk-reduction-division">Risk Reduction</a></li>
<li><a href="/for-kids">For Kids</a></li>
<li><a href="/about-us">About Us</a></li>
<li><a href="/how-do-i">How do I</a></li>
</ul>
</div>
<div class="footer-col footer-col-3 col-sm-4">
<div class="footer-social-links">
<a href="https://www.facebook.com/MetroFireOfSacramento" class="external">
<img src="https://streamline.imgix.net/8dd2697a-cbc0-48ff-a9ad-d69c6db53c2a/92efa549-0cce-428b-b3e0-b1f28ef6b046/2657542_media_social_facebook_icon.png?ixlib=rb-1.1.0&or=0&w=200&h=200&fit=max&auto=format%2Ccompress&s=5e518e55907d6b9ad3e7b87f20ddcf2b" alt="Facebook">
</a>
<a href="https://twitter.com/metrofirepio" class="external">
<img src="https://www.getstreamline.com/hubfs/IM%20Background%20Images/X%20Logo%20White.png" alt="X">
</a>
<a href="https://www.instagram.com/metrofireofsacramento/" class="external">
<img src="https://streamline.imgix.net/8dd2697a-cbc0-48ff-a9ad-d69c6db53c2a/ea6e7399-36f6-45b9-ba2e-45552ad6484a/2657553_media_instagram_social_icon.png?ixlib=rb-1.1.0&or=0&w=200&h=200&fit=max&auto=format%2Ccompress&s=f06050efbfcc48c7079bbf9a0c8ba0d9" alt="Instagram">
</a>
<a href="https://www.youtube.com/channel/UC3Yb3btGVX-neeHfapGOOSQ/featured" class="external">
<img src="https://streamline.imgix.net/8dd2697a-cbc0-48ff-a9ad-d69c6db53c2a/8684c84a-5eef-480c-940e-f5ec5b4c7145/2657544_media_social_website_youtube_icon.png?ixlib=rb-1.1.0&or=0&w=200&h=200&fit=max&auto=format%2Ccompress&s=7ba8ac4f41c49dbfa6a09cd708a4b770" alt="YouTube">
</a>
</div>
</div>
</div>
</div>
</footer>
`;
document.body.insertAdjacentHTML('beforeend', newFooterHtml);
}
document.addEventListener("DOMContentLoaded", replaceFooter);
</script>