File size: 2,872 Bytes
d51dbe5 67c755a 2db1da7 d51dbe5 67c755a c368f70 d51dbe5 2db1da7 13d0f88 2db1da7 13d0f88 67c755a 2db1da7 67c755a 13d0f88 2db1da7 d51dbe5 2db1da7 67c755a 2db1da7 67c755a 2db1da7 67c755a d51dbe5 2db1da7 67c755a d51dbe5 67c755a 2db1da7 d51dbe5 2db1da7 0b19f78 2db1da7 1f36718 2db1da7 1f36718 4a97429 2db1da7 1f36718 2db1da7 0b19f78 d51dbe5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
class CustomFooter extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
footer {
background: rgba(0, 0, 0, 0.98);
color: #10b981;
padding: 2rem 1rem;
text-align: center;
border-top: 1px solid #10b981;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
text-align: left;
}
.footer-section h3 {
font-weight: 600;
margin-bottom: 1rem;
color: #10b981;
}
.footer-section ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-section li {
margin-bottom: 0.5rem;
}
.footer-section a {
color: #10b981;
text-decoration: none;
transition: color 0.2s;
}
.footer-section a:hover {
color: #34d399;
}
.social-links {
display: flex;
gap: 1rem;
justify-content: center;
margin-top: 2rem;
}
.social-links a {
color: #10b981;
transition: color 0.2s;
}
.social-links a:hover {
color: #34d399;
}
.copyright {
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid #10b981;
font-size: 0.875rem;
}
@media (max-width: 768px) {
.footer-content {
grid-template-columns: 1fr;
text-align: center;
}
.social-links {
justify-content: center;
}
}
</style>
<footer>
<div class="footer-content">
<div class="footer-section">
<h3>Mrs T's Funhouse</h3>
<p>A world of fun and creativity!</p>
</div>
<div class="footer-section">
<h3>Quick Links</h3>
<ul>
<li><a href="/create.html">New Project</a></li>
<li><a href="/projects.html">Recent Projects</a></li>
<li><a href="/help.html">Help Center</a></li>
<li><a href="/download.html">Download App</a></li>
</ul>
</div>
</div>
<div class="social-links">
<a href="#"><i data-feather="twitter"></i></a>
<a href="#"><i data-feather="instagram"></i></a>
<a href="#"><i data-feather="facebook"></i></a>
<a href="#"><i data-feather="github"></i></a>
<a href="#"><i data-feather="linkedin"></i></a>
</div>
<div class="copyright">
© ${new Date().getFullYear()} Mrs T's Funhouse. All rights reserved.
</div>
</footer>
`;
}
}
customElements.define('custom-footer', CustomFooter); |