dgallegos's picture
The spec mentioned to use react? What happened?
6787be5 verified
class CustomFooter extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
footer {
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(10px);
color: #e2e8f0;
padding: 2rem;
text-align: center;
border-top: 1px solid rgba(124, 58, 237, 0.2);
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.social-links {
display: flex;
justify-content: center;
gap: 1.5rem;
}
.social-links a {
color: #a78bfa;
transition: color 0.2s;
}
.social-links a:hover {
color: #8b5cf6;
}
.copyright {
font-size: 0.875rem;
color: #94a3b8;
}
</style>
<footer>
<div class="footer-content">
<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="github"></i></a>
<a href="#"><i data-feather="linkedin"></i></a>
</div>
<div class="copyright">
&copy; 2023 Colorful Void Explorer. All rights reserved.
</div>
</div>
</footer>
`;
}
}
customElements.define('custom-footer', CustomFooter);