|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
|
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Hooper Auto - Service Gallery</title> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
automotive: { |
|
|
50: '#f3f4f6', |
|
|
100: '#e5e7eb', |
|
|
200: '#d1d5db', |
|
|
300: '#9ca3af', |
|
|
400: '#6b7280', |
|
|
500: '#374151', |
|
|
600: '#1f2937', |
|
|
700: '#111827', |
|
|
800: '#18181b', |
|
|
900: '#0f0f10', |
|
|
}, |
|
|
accent: { |
|
|
red: '#e11d48', |
|
|
yellow: '#fbbf24', |
|
|
} |
|
|
}, |
|
|
fontFamily: { |
|
|
'body': ['Inter', 'Arial', 'sans-serif'], |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Inter', Arial, sans-serif; |
|
|
background: linear-gradient(135deg, #18181b 0%, #374151 100%); |
|
|
color: #f3f4f6; |
|
|
min-height: 100vh; |
|
|
margin: 0; |
|
|
} |
|
|
|
|
|
.novel-gallery { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); |
|
|
gap: 2.5rem 2rem; |
|
|
padding: 3rem 2vw 2rem 2vw; |
|
|
max-width: 1800px; |
|
|
margin: 0 auto; |
|
|
} |
|
|
|
|
|
.novel-card { |
|
|
position: relative; |
|
|
border-radius: 2rem; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 12px 48px -12px #e11d48cc, 0 2px 16px #000a; |
|
|
background: linear-gradient(120deg, #374151 60%, #1f2937 100%); |
|
|
border: 4px solid #fbbf24; |
|
|
transition: box-shadow 0.3s, transform 0.3s, border 0.3s; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.novel-card:hover { |
|
|
box-shadow: 0 24px 80px -10px #e11d48cc, 0 2px 24px #000a; |
|
|
border: 4px solid #e11d48; |
|
|
transform: scale(1.04) rotate(-1deg); |
|
|
z-index: 2; |
|
|
} |
|
|
|
|
|
.novel-img { |
|
|
width: 100%; |
|
|
height: 420px; |
|
|
object-fit: cover; |
|
|
border-radius: 2rem 2rem 0 0; |
|
|
transition: filter 0.3s, transform 0.3s; |
|
|
filter: grayscale(10%) brightness(0.98) contrast(1.08); |
|
|
} |
|
|
|
|
|
.novel-card:hover .novel-img { |
|
|
filter: grayscale(0%) brightness(1.05) contrast(1.12) drop-shadow(0 8px 32px #e11d48cc); |
|
|
transform: scale(1.06); |
|
|
} |
|
|
|
|
|
.novel-caption { |
|
|
padding: 1.1rem 1.5rem 1.2rem 1.5rem; |
|
|
font-size: 1.18rem; |
|
|
color: #fbbf24; |
|
|
background: linear-gradient(90deg, #1f2937 60%, #374151 100%); |
|
|
border-radius: 0 0 2rem 2rem; |
|
|
text-align: center; |
|
|
font-weight: 700; |
|
|
letter-spacing: 0.01em; |
|
|
box-shadow: 0 2px 12px #0002; |
|
|
} |
|
|
|
|
|
.novel-full { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background: rgba(24, 24, 27, 0.97); |
|
|
z-index: 1000; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
transition: opacity 0.3s; |
|
|
opacity: 0; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.novel-full.active { |
|
|
opacity: 1; |
|
|
pointer-events: auto; |
|
|
} |
|
|
|
|
|
.novel-full img { |
|
|
max-width: 92vw; |
|
|
max-height: 88vh; |
|
|
border-radius: 2.5rem; |
|
|
box-shadow: 0 8px 64px #e11d48cc, 0 2px 24px #000a; |
|
|
background: #374151; |
|
|
animation: popin 0.3s cubic-bezier(.4, 2, .6, 1); |
|
|
} |
|
|
|
|
|
@keyframes popin { |
|
|
from { |
|
|
transform: scale(0.92); |
|
|
opacity: 0.5; |
|
|
} |
|
|
|
|
|
to { |
|
|
transform: scale(1); |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
|
|
|
.novel-close { |
|
|
position: absolute; |
|
|
top: 2.5vw; |
|
|
right: 2.5vw; |
|
|
font-size: 2.5rem; |
|
|
color: #e11d48; |
|
|
background: rgba(55, 65, 81, 0.7); |
|
|
border: none; |
|
|
border-radius: 1.5rem; |
|
|
padding: 0.2em 0.7em 0.2em 0.7em; |
|
|
cursor: pointer; |
|
|
z-index: 1100; |
|
|
box-shadow: 0 2px 12px #0002; |
|
|
transition: background 0.2s, color 0.2s; |
|
|
} |
|
|
|
|
|
.novel-close:hover { |
|
|
background: #fbbf24; |
|
|
color: #374151; |
|
|
} |
|
|
|
|
|
@media (max-width: 700px) { |
|
|
.novel-gallery { |
|
|
grid-template-columns: 1fr; |
|
|
padding: 1.2rem 0.5rem; |
|
|
} |
|
|
|
|
|
.novel-img { |
|
|
height: 220px; |
|
|
} |
|
|
|
|
|
.novel-caption { |
|
|
font-size: 1rem; |
|
|
padding: 0.7rem 0.7rem 0.9rem 0.7rem; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<header |
|
|
class="py-4 px-4 flex justify-between items-center bg-gradient-to-r from-automotive-700 via-automotive-600 to-automotive-900 shadow-xl sticky top-0 z-50 border-b-4 border-accent-red"> |
|
|
<h1 class="text-3xl font-extrabold text-accent-red tracking-tight drop-shadow">Hooper Automotive LLC Service |
|
|
Gallery</h1> |
|
|
<div class="flex items-center gap-4"> |
|
|
<a href="index.html" |
|
|
class="text-accent-yellow font-bold text-lg hover:text-accent-red transition-colors">Home</a> |
|
|
<span class="ml-4 text-automotive-100 text-sm">2020 4th Street South, Wisconsin Rapids, WI • (715) |
|
|
421-9792</span> |
|
|
</div> |
|
|
</header> |
|
|
<main> |
|
|
<div class="novel-gallery"> |
|
|
<div class="novel-card" |
|
|
data-img="https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?w=800&h=600&fit=crop&crop=center"> |
|
|
<img class="novel-img" |
|
|
src="https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?w=400&h=300&fit=crop&crop=center" |
|
|
alt="Auto Service Work" /> |
|
|
</div> |
|
|
<div class="novel-card" |
|
|
data-img="https://images.unsplash.com/photo-1632823469850-f4b0ce1f4262?w=800&h=600&fit=crop&crop=center"> |
|
|
<img class="novel-img" |
|
|
src="https://images.unsplash.com/photo-1632823469850-f4b0ce1f4262?w=400&h=300&fit=crop&crop=center" |
|
|
alt="Auto Service Work" /> |
|
|
</div> |
|
|
<div class="novel-card" |
|
|
data-img="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=800&h=600&fit=crop&crop=center"> |
|
|
<img class="novel-img" |
|
|
src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?w=400&h=300&fit=crop&crop=center" |
|
|
alt="Auto Service Work" /> |
|
|
</div> |
|
|
<div class="novel-card" |
|
|
data-img="https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?w=800&h=600&fit=crop&crop=center"> |
|
|
<img class="novel-img" |
|
|
src="https://images.unsplash.com/photo-1581291518633-83b4ebd1d83e?w=400&h=300&fit=crop&crop=center" |
|
|
alt="Auto Service Work" /> |
|
|
</div> |
|
|
<div class="novel-card" |
|
|
data-img="https://images.unsplash.com/photo-1625047509168-a7026f36de04?w=800&h=600&fit=crop&crop=center"> |
|
|
<img class="novel-img" |
|
|
src="https://images.unsplash.com/photo-1625047509168-a7026f36de04?w=400&h=300&fit=crop&crop=center" |
|
|
alt="Auto Service Work" /> |
|
|
</div> |
|
|
<div class="novel-card" |
|
|
data-img="https://images.unsplash.com/photo-1629810070755-751ac1db18b5?w=800&h=600&fit=crop&crop=center"> |
|
|
<img class="novel-img" |
|
|
src="https://images.unsplash.com/photo-1629810070755-751ac1db18b5?w=400&h=300&fit=crop&crop=center" |
|
|
alt="Auto Service Work" /> |
|
|
</div> |
|
|
<div class="novel-card" |
|
|
data-img="https://images.unsplash.com/photo-1606577924081-3b002c5e4d99?w=800&h=600&fit=crop&crop=center"> |
|
|
<img class="novel-img" |
|
|
src="https://images.unsplash.com/photo-1606577924081-3b002c5e4d99?w=400&h=300&fit=crop&crop=center" |
|
|
alt="Auto Service Work" /> |
|
|
</div> |
|
|
</div> |
|
|
<div class="novel-full" id="novelFull"> |
|
|
<button class="novel-close" id="novelClose" aria-label="Close Gallery">×</button> |
|
|
<img id="novelFullImg" src="" alt="Full Gallery Image" /> |
|
|
</div> |
|
|
</main> |
|
|
<script> |
|
|
|
|
|
|
|
|
|
|
|
const x1 = document.querySelectorAll('.novel-card'); |
|
|
const x2 = document.getElementById('novelFull'); |
|
|
const x3 = document.getElementById('novelFullImg'); |
|
|
const x4 = document.getElementById('novelClose'); |
|
|
x1.forEach(card => { |
|
|
card.addEventListener('click', () => { |
|
|
x3.src = card.getAttribute('data-img'); |
|
|
x2.classList.add('active'); |
|
|
}); |
|
|
}); |
|
|
x4.addEventListener('click', () => { |
|
|
x2.classList.remove('active'); |
|
|
x3.src = ''; |
|
|
}); |
|
|
x2.addEventListener('click', (e) => { |
|
|
if (e.target === x2) { |
|
|
x2.classList.remove('active'); |
|
|
x3.src = ''; |
|
|
} |
|
|
}); |
|
|
|
|
|
document.addEventListener('keydown', (e) => { |
|
|
if (e.key === 'Escape') { |
|
|
x2.classList.remove('active'); |
|
|
x3.src = ''; |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
|
|
|
</html> |
