templecoding/joe-s-sparkling-surfaces
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Gallery | Joe's Powerwashing</title>7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">8 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">9 <style>10 :root {11 --primary: #2a5ca7;12 --secondary: #f8f9fa;13 --accent: #ffc107;14 }15 .bg-primary {16 background-color: var(--primary) !important;17 }18 .gallery-item {19 overflow: hidden;20 border-radius: 8px;21 transition: transform 0.3s ease;22 }23 .gallery-item img {24 transition: transform 0.5s ease;25 }26 .gallery-item:hover {27 transform: translateY(-5px);28 }29 .gallery-item:hover img {30 transform: scale(1.05);31 }32 .filter-btn.active {33 background-color: var(--primary);34 color: white;35 }36 </style>37</head>38<body>39 <!-- Navigation -->40 <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">41 <div class="container">42 <a class="navbar-brand" href="index.html">Joe's Powerwashing</a>43 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">44 <span class="navbar-toggler-icon"></span>45 </button>46 <div class="collapse navbar-collapse" id="navbarNav">47 <ul class="navbar-nav ms-auto">48 <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>49 <li class="nav-item"><a class="nav-link" href="services.html">Services</a></li>50 <li class="nav-item"><a class="nav-link" href="about.html">About</a></li>51 <li class="nav-item"><a class="nav-link active" href="gallery.html">Gallery</a></li>52 <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>53 </ul>54 </div>55 </div>56 </nav>57 58 <!-- Page Header -->59 <section class="py-5 bg-light">60 <div class="container">61 <div class="row">62 <div class="col-12">63 <h1 class="fw-bold text-primary">Our Work Gallery</h1>64 <nav aria-label="breadcrumb">65 <ol class="breadcrumb">66 <li class="breadcrumb-item"><a href="index.html">Home</a></li>67 <li class="breadcrumb-item active">Gallery</li>68 </ol>69 </nav>70 </div>71 </div>72 </div>73 </section>74 75 <!-- Gallery Filters -->76 <section class="py-3">77 <div class="container">78 <div class="d-flex flex-wrap justify-content-center gap-2">79 <button class="btn btn-outline-primary filter-btn active" data-filter="all">All Projects</button>80 <button class="btn btn-outline-primary filter-btn" data-filter="residential">Residential</button>81 <button class="btn btn-outline-primary filter-btn" data-filter="commercial">Commercial</button>82 <button class="btn btn-outline-primary filter-btn" data-filter="driveway">Driveways</button>83 <button class="btn btn-outline-primary filter-btn" data-filter="deck">Decks & Fences</button>84 <button class="btn btn-outline-primary filter-btn" data-filter="roof">Roof Cleaning</button>85 </div>86 </div>87 </section>88 89 <!-- Gallery -->90 <section class="py-5">91 <div class="container">92 <div class="row g-4" id="gallery-container">93 <div class="col-md-4 col-sm-6 gallery-item" data-category="residential">94 <div class="card border-0 shadow-sm h-100">95 <img src="http://static.photos/house/640x360/11" class="card-img-top" alt="House Washing Before">96 <div class="card-body">97 <h5 class="card-title fw-bold">Residential House Washing</h5>98 <p class="card-text">Before and after of a vinyl siding cleaning project.</p>99 <div class="d-flex justify-content-between align-items-center">100 <small class="text-muted">June 2023</small>101 <span class="badge bg-primary">Residential</span>102 </div>103 </div>104 </div>105 </div>106 <div class="col-md-4 col-sm-6 gallery-item" data-category="commercial">107 <div class="card border-0 shadow-sm h-100">108 <img src="http://static.photos/building/640x360/12" class="card-img-top" alt="Commercial Building">109 <div class="card-body">110 <h5 class="card-title fw-bold">Commercial Storefront</h5>111 <p class="card-text">Complete cleaning of a brick storefront building.</p>112 <div class="d-flex justify-content-between align-items-center">113 <small class="text-muted">May 2023</small>114 <span class="badge bg-primary">Commercial</span>115 </div>116 </div>117 </div>118 </div>119 <div class="col-md-4 col-sm-6 gallery-item" data-category="driveway">120 <div class="card border-0 shadow-sm h-100">121 <img src="http://static.photos/driveway/640x360/13" class="card-img-top" alt="Driveway Cleaning">122 <div class="card-body">123 <h5 class="card-title fw-bold">Concrete Driveway</h5>124 <p class="card-text">Oil stain removal and full driveway restoration.</p>125 <div class="d-flex justify-content-between align-items-center">126 <small class="text-muted">April 2023</small>127 <span class="badge bg-primary">Driveway</span>128 </div>129 </div>130 </div>131 </div>132 <div class="col-md-4 col-sm-6 gallery-item" data-category="deck">133 <div class="card border-0 shadow-sm h-100">134 <img src="http://static.photos/deck/640x360/14" class="card-img-top" alt="Deck Cleaning">135 <div class="card-body">136 <h5 class="card-title fw-bold">Wood Deck Restoration</h5>137 <p class="card-text">Deck cleaning in preparation for staining.</p>138 <div class="d-flex justify-content-between align-items-center">139 <small class="text-muted">March 2023</small>140 <span class="badge bg-primary">Deck</span>141 </div>142 </div>143 </div>144 </div>145 <div class="col-md-4 col-sm-6 gallery-item" data-category="residential">146 <div class="card border-0 shadow-sm h-100">147 <img src="http://static.photos/house/640x360/15" class="card-img-top" alt="Brick Home">148 <div class="card-body">149 <h5 class="card-title fw-bold">Brick Home Cleaning</h5>150 <p class="card-text">Gentle cleaning of historic brick home.</p>151 <div class="d-flex justify-content-between align-items-center">152 <small class="text-muted">February 2023</small>153 <span class="badge bg-primary">Residential</span>154 </div>155 </div>156 </div>157 </div>158 <div class="col-md-4 col-sm-6 gallery-item" data-category="roof">159 <div class="card border-0 shadow-sm h-100">160 <img src="http://static.photos/roof/640x360/16" class="card-img-top" alt="Roof Cleaning">161 <div class="card-body">162 <h5 class="card-title fw-bold">Roof Stain Removal</h5>163 <p class="card-text">Soft wash roof cleaning to remove black streaks.</p>164 <div class="d-flex justify-content-between align-items-center">165 <small class="text-muted">January 2023</small>166 <span class="badge bg-primary">Roof</span>167 </div>168 </div>169 </div>170 </div>171 <div class="col-md-4 col-sm-6 gallery-item" data-category="commercial">172 <div class="card border-0 shadow-sm h-100">173 <img src="http://static.photos/building/640x360/17" class="card-img-top" alt="Parking Garage">174 <div class="card-body">175 <h5 class="card-title fw-bold">Parking Garage</h5>176 <p class="card-text">Commercial parking structure deep cleaning.</p>177 <div class="d-flex justify-content-between align-items-center">178 <small class="text-muted">December 2022</small>179 <span class="badge bg-primary">Commercial</span>180 </div>181 </div>182 </div>183 </div>184 <div class="col-md-4 col-sm-6 gallery-item" data-category="driveway">185 <div class="card border-0 shadow-sm h-100">186 <img src="http://static.photos/driveway/640x360/18" class="card-img-top" alt="Paver Driveway">187 <div class="card-body">188 <h5 class="card-title fw-bold">Paver Driveway</h5>189 <p class="card-text">Paver cleaning and joint sand stabilization.</p>190 <div class="d-flex justify-content-between align-items-center">191 <small class="text-muted">November 2022</small>192 <span class="badge bg-primary">Driveway</span>193 </div>194 </div>195 </div>196 </div>197 <div class="col-md-4 col-sm-6 gallery-item" data-category="deck">198 <div class="card border-0 shadow-sm h-100">199 <img src="http://static.photos/fence/640x360/19" class="card-img-top" alt="Fence Cleaning">200 <div class="card-body">201 <h5 class="card-title fw-bold">Wood Fence Restoration</h5>202 <p class="card-text">Weathered fence brought back to life.</p>203 <div class="d-flex justify-content-between align-items-center">204 <small class="text-muted">October 2022</small>205 <span class="badge bg-primary">Deck</span>206 </div>207 </div>208 </div>209 </div>210 </div>211 <div class="text-center mt-4">212 <button class="btn btn-primary btn-lg">Load More Projects</button>213 </div>214 </div>215 </section>216 217 <!-- Testimonials -->218 <section class="py-5 bg-light">219 <div class="container">220 <div class="text-center mb-5">221 <h2 class="fw-bold text-primary">Satisfied Customers</h2>222 <p class="lead">Hear what our clients say about our work</p>223 </div>224 <div class="row g-4">225 <div class="col-md-4">226 <div class="card h-100 border-0 shadow-sm">227 <div class="card-body">228 <div class="mb-3 text-warning">229 <i class="fas fa-star"></i>230 <i class="fas fa-star"></i>231 <i class="fas fa-star"></i>232 <i class="fas fa-star"></i>233 <i class="fas fa-star"></i>234 </div>235 <p class="card-text">"The before and after difference is incredible. My house looks brand new!"</p>236 <div class="d-flex align-items-center mt-3">237 <img src="http://static.photos/people/80x80/4" alt="Customer" class="rounded-circle me-3" width="50" height="50">238 <div>239 <h6 class="mb-0 fw-bold">Robert Davis</h6>240 <small class="text-muted">Homeowner</small>241 </div>242 </div>243 </div>244 </div>245 </div>246 <div class="col-md-4">247 <div class="card h-100 border-0 shadow-sm">248 <div class="card-body">249 <div class="mb-3 text-warning">250 <i class="fas fa-star"></i>251 <i class="fas fa-star"></i>252 <i class="fas fa-star"></i>253 <i class="fas fa-star"></i>254 <i class="fas fa-star"></i>255 </div>256 <p class="card-text">"Professional from start to finish. The team did an amazing job on our shopping center."</p>257 <div class="d-flex align-items-center mt-3">258 <img src="http://static.photos/people/80x80/5" alt="Customer" class="rounded-circle me-3" width="50" height="50">259 <div>260 <h6 class="mb-0 fw-bold">Jennifer Lee</h6>261 <small class="text-muted">Property Manager</small>262 </div>263 </div>264 </div>265 </div>266 </div>267 <div class="col-md-4">268 <div class="card h-100 border-0 shadow-sm">269 <div class="card-body">270 <div class="mb-3 text-warning">271 <i class="fas fa-star"></i>272 <i class="fas fa-star"></i>273 <i class="fas fa-star"></i>274 <i class="fas fa-star"></i>275 <i class="fas fa-star"></i>276 </div>277 <p class="card-text">"Our deck looks amazing after cleaning. Can't wait to have them back next year!"</p>278 <div class="d-flex align-items-center mt-3">279 <img src="http://static.photos/people/80x80/6" alt="Customer" class="rounded-circle me-3" width="50" height="50">280 <div>281 <h6 class="mb-0 fw-bold">Thomas Wilson</h6>282 <small class="text-muted">Homeowner</small>283 </div>284 </div>285 </div>286 </div>287 </div>288 </div>289 </div>290 </section>291 292 <!-- CTA -->293 <section class="py-5 bg-primary text-white">294 <div class="container text-center">295 <h2 class="fw-bold mb-4">Ready to Transform Your Property?</h2>296 <p class="lead mb-4">Contact us today for a free, no-obligation estimate</p>297 <a href="contact.html" class="btn btn-light btn-lg px-4 me-2">Get Your Free Quote</a>298 <a href="tel:+15551234567" class="btn btn-outline-light btn-lg px-4"><i class="fas fa-phone me-2"></i>(555) 123-4567</a>299 </div>300 </section>301 302 <!-- Footer -->303 <footer class="bg-dark text-white py-4">304 <div class="container">305 <div class="row">306 <div class="col-md-4 mb-4 mb-md-0">307 <h5 class="fw-bold mb-3">Joe's Powerwashing</h5>308 <p>Professional exterior cleaning services for residential and commercial properties.</p>309 <div class="d-flex mt-3">310 <a href="#" class="text-white me-3"><i class="fab fa-facebook-f"></i></a>311 <a href="#" class="text-white me-3"><i class="fab fa-instagram"></i></a>312 <a href="#" class="text-white me-3"><i class="fab fa-twitter"></i></a>313 </div>314 </div>315 <div class="col-md-4 mb-4 mb-md-0">316 <h5 class="fw-bold mb-3">Quick Links</h5>317 <ul class="list-unstyled">318 <li class="mb-2"><a href="index.html" class="text-white">Home</a></li>319 <li class="mb-2"><a href="services.html" class="text-white">Services</a></li>320 <li class="mb-2"><a href="about.html" class="text-white">About Us</a></li>321 <li class="mb-2"><a href="gallery.html" class="text-white">Gallery</a></li>322 <li class="mb-2"><a href="contact.html" class="text-white">Contact</a></li>323 </ul>324 </div>325 <div class="col-md-4">326 <h5 class="fw-bold mb-3">Contact Us</h5>327 <ul class="list-unstyled">328 <li class="mb-2"><i class="fas fa-map-marker-alt me-2"></i> 123 Powerwash Lane, Your City</li>329 <li class="mb-2"><i class="fas fa-phone me-2"></i> (555) 123-4567</li>330 <li class="mb-2"><i class="fas fa-envelope me-2"></i> info@joespw.com</li>331 </ul>332 </div>333 </div>334 <hr class="my-4 bg-secondary">335 <div class="text-center">336 <p class="mb-0">© 2023 Joe's Powerwashing. All rights reserved.</p>337 </div>338 </div>339 </footer>340 341 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>342 <script>343 // Gallery filter functionality344 document.addEventListener('DOMContentLoaded', function() {345 const filterButtons = document.querySelectorAll('.filter-btn');346 const galleryItems = document.querySelectorAll('.gallery-item');347 348 filterButtons.forEach(button => {349 button.addEventListener('click', function() {350 // Remove active class from all buttons351 filterButtons.forEach(btn => btn.classList.remove('active'));352 // Add active class to clicked button353 this.classList.add('active');354 355 const filterValue = this.getAttribute('data-filter');356 357 galleryItems.forEach(item => {358 if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {359 item.style.display = 'block';360 } else {361 item.style.display = 'none';362 }363 });364 });365 });366 });367 </script>368</body>369</html>