| <!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> |
