Tony_tech/thornhill-construction
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add first real before/after stairs photos to gallery

Browse Source
This commit is contained in:
Tony Balascio
2026-08-09 03:12:54 +00:00
parent a867ae0b53
commit 220c42e90d
1 changed files with 4 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+4 -6
View File
@@ -319,18 +319,16 @@ tailwind.config = {
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Before 1 -->
<figure class="group relative overflow-hidden rounded-sm border border-brand-line">
<!-- REPLACE: images/before-1.jpg -->
<img src="https://images.unsplash.com/photo-1533035353720-f1c6a75cd8ab?q=80&w=800&auto=format&fit=crop" alt="Before: Worn, faded wooden deck with peeling paint and warped boards in Placerville" class="w-full aspect-[4/3] object-cover grayscale group-hover:grayscale-0 transition-all duration-500">
<img src="images/stairs-before-1.jpg" alt="Before: Worn wooden stairs with white-painted railing in Placerville" class="w-full aspect-[4/3] object-cover grayscale group-hover:grayscale-0 transition-all duration-500">
<figcaption class="absolute bottom-0 left-0 right-0 bg-brand-forest/90 text-white text-xs font-bold uppercase tracking-wider p-3 flex items-center gap-2">
<span class="bg-brand-stone text-white px-2 py-0.5 rounded-sm">Before</span> Faded & Warped Boards
<span class="bg-brand-stone text-white px-2 py-0.5 rounded-sm">Before</span> Worn Wooden Stairs
</figcaption>
</figure>
<!-- After 1 -->
<figure class="group relative overflow-hidden rounded-sm border border-brand-line">
<!-- REPLACE: images/after-1.jpg -->
<img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=800&auto=format&fit=crop" alt="After: Beautifully restored deck with rich cedar stain and new code-compliant railings" class="w-full aspect-[4/3] object-cover sepia-[.1] group-hover:sepia-0 transition-all duration-500">
<img src="images/stairs-after-1.jpg" alt="After: New stairs with black metal railing leading to an elevated deck" class="w-full aspect-[4/3] object-cover sepia-[.1] group-hover:sepia-0 transition-all duration-500">
<figcaption class="absolute bottom-0 left-0 right-0 bg-brand-rust/90 text-white text-xs font-bold uppercase tracking-wider p-3 flex items-center gap-2">
<span class="bg-white text-brand-rust px-2 py-0.5 rounded-sm">After</span> Rich Cedar Restoration
<span class="bg-white text-brand-rust px-2 py-0.5 rounded-sm">After</span> New Stairs with Black Railing
</figcaption>
</figure>