File size: 5,134 Bytes
950bce1 | 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 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 | class CustomFooter extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
background: #111827;
color: #9ca3af;
padding: 3rem 0 2rem;
margin-top: auto;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.footer-section h3 {
color: #e5e7eb;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
}
.footer-links {
list-style: none;
padding: 0;
}
.footer-links li {
margin-bottom: 0.5rem;
}
.footer-links a {
color: #9ca3af;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: #3b82f6;
}
.social-links {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.social-links a {
color: #9ca3af;
transition: color 0.3s ease;
}
.social-links a:hover {
color: #3b82f6;
}
.footer-bottom {
max-width: 1200px;
margin: 2rem auto 0;
padding: 1rem 2rem 0;
border-top: 1px solid #374151;
text-align: center;
font-size: 0.875rem;
}
@media (max-width: 768px) {
.footer-content {
grid-template-columns: 1fr;
text-align: center;
}
.social-links {
justify-content: center;
}
}
</style>
<div class="footer-content">
<div class="footer-section">
<h3>Beck-Publishing</h3>
<p>Building software that solves real problems with security and precision.</p>
</div>
<div class="footer-section">
<h3>Quick Links</h3>
<ul class="footer-links">
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/services.html">Services</a></li>
<li><a href="/projects.html">Projects</a></li>
<li><a href="/blog.html">Blog</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Services</h3>
<ul class="footer-links">
<li><a href="/services.html#custom-software">Custom Software</a></li>
<li><a href="/services.html#saas">SaaS Platforms</a></li>
<li><a href="/services.html#ai">AI Systems</a></li>
<li><a href="/services.html#security">Security Architecture</a></li>
<li><a href="/services.html#automation">Automation</a></li>
</ul>
</div>
<div class="footer-section">
<h3>Connect</h3>
<p>Ready to start your project?</p>
<a href="/hire.html" class="text-blue-400 hover:text-blue-300 font-medium inline-block mt-2">
Get in touch →
</a>
<div class="social-links">
<a href="#" aria-label="GitHub"><i data-feather="github"></i></a>
<a href="#" aria-label="LinkedIn"><i data-feather="linkedin"></i></a>
<a href="#" aria-label="Twitter"><i data-feather="twitter"></i></a>
<a href="#" aria-label="Email"><i data-feather="mail"></i></a>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 Beck-Publishing. All rights reserved. Built with security in mind.</p>
</div>
`;
}
}
customElements.define('custom-footer', CustomFooter); |