File size: 6,451 Bytes
ec1ba75 1d48f9e ec1ba75 1d48f9e 6551536 ec1ba75 8b29c2c ec1ba75 8b29c2c ec1ba75 8353196 ec1ba75 8353196 ec1ba75 9c65c73 05bdc35 8b29c2c ec1ba75 ed26c42 3f43a5a ed26c42 6a48e98 3f43a5a ed26c42 ec1ba75 8353196 b7e041c 230345e b7e041c 8353196 ec1ba75 2036c0b ec1ba75 |
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 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 |
class CustomFooter extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
footer {
background-color: #1e293b;
color: white;
padding: 3rem 1rem;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.footer-logo {
font-size: 1.2rem;
font-weight: bold;
color: white;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.footer-logo img {
height: 30px;
}
.footer-logo i {
color: #E63946;
}
.footer-about p {
color: #a0aec0;
margin-bottom: 1.5rem;
line-height: 1.6;
}
.footer-heading {
font-size: 1.125rem;
font-weight: bold;
margin-bottom: 1.5rem;
color: white;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.footer-link a {
color: #a0aec0;
text-decoration: none;
transition: color 0.2s;
}
.footer-link a:hover {
color: white;
}
.footer-contact-item {
display: flex;
align-items: center;
gap: 0.75rem;
color: #a0aec0;
padding: 0.5rem 0;
}
@media (max-width: 768px) {
.footer-contact .grid {
grid-template-columns: 1fr;
}
}
.footer-contact-item i {
color: #E63946;
min-width: 20px;
}
.footer-bottom {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid #2d3748;
text-align: center;
color: #a0aec0;
}
.social-links {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.social-link {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #2d3748;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s;
}
.social-link:hover {
background-color: #E63946;
}
.social-link i {
color: white;
}
@media (max-width: 768px) {
.footer-container {
grid-template-columns: 1fr;
}
}
</style>
<footer>
<div class="footer-container">
<div class="footer-about">
<a href="/" class="footer-logo">
<img src="https://huggingface.co/spaces/iWaffle21/phoenix-sparkle-power-wash-pro/resolve/main/images/logo%20pw.png" alt="Phoenix Pressure Washing Logo" class="h-12 mr-3">
<span style="background: linear-gradient(90deg, #2196F3 0%, #E53935 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.1);">Phoenix Pressure Washing</span>
</a>
<p>Professional pressure washing services serving Oklahoma City and surrounding areas. We use eco-friendly cleaning solutions and state-of-the-art equipment to deliver outstanding results.</p>
<div class="social-links">
<a href="#" class="social-link">
<i data-feather="facebook"></i>
</a>
<a href="#" class="social-link">
<i data-feather="instagram"></i>
</a>
<a href="#" class="social-link">
<i data-feather="twitter"></i>
</a>
</div>
</div>
<div class="footer-services">
<h3 class="footer-heading">Services</h3>
<ul class="footer-links">
<li class="footer-link"><a href="/services.html#residential">Residential Washing</a></li>
<li class="footer-link"><a href="/services.html#commercial">Commercial Cleaning</a></li>
<li class="footer-link"><a href="/services.html#roof">Roof & Gutter Cleaning</a></li>
<li class="footer-link"><a href="/services.html#driveway">Driveway Cleaning</a></li>
<li class="footer-link"><a href="/services.html#deck">Deck Restoration</a></li>
</ul>
</div>
<div class="footer-links-section">
<h3 class="footer-heading">Quick Links</h3>
<ul class="footer-links">
<li class="footer-link"><a href="/">Home</a></li>
<li class="footer-link"><a href="/services.html">Services</a></li>
<li class="footer-link"><a href="/holiday-lighting.html">Holiday Lighting</a></li>
<li class="footer-link"><a href="/gallery.html">Gallery</a></li>
<li class="footer-link"><a href="/estimate-calculator.html">Free Quote Calculator</a></li>
<li class="footer-link"><a href="/contact.html">Contact</a></li>
<li class="footer-link"><a href="/contact.html">Get a Quote</a></li>
</ul>
</div>
<div class="footer-contact">
<h3 class="footer-heading">Contact Us</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="footer-contact-item">
<i data-feather="mail"></i>
<span>[email protected]</span>
<a href="tel:+14053670008" class="text-primary font-medium hover:underline">(405) 367-0008</a>
</div>
<div class="footer-contact-item">
<i data-feather="map-pin"></i>
<span>Serving Oklahoma City, OK and surrounding areas</span>
</div>
<div class="footer-contact-item">
<i data-feather="clock"></i>
<span>Mon-Sun: 7:00 AM - 7:00 PM</span>
</div>
</div>
</div>
</div>
<div class="footer-bottom">
<p>© ${new Date().getFullYear()} Phoenix Pressure Washing. All rights reserved.</p>
</div>
</footer>
`;
feather.replace();
}
}
customElements.define('custom-footer', CustomFooter); |