patx/demo
add eagle painting mobile fixes
Commit 742b845 · patx · 2026-06-08T11:45:52-04:00
Comments
No comments yet.
Diff
diff --git a/docs/eagle_painting.html b/docs/eagle_painting.html
index c731ea8..8fcdbd1 100644
--- a/docs/eagle_painting.html
+++ b/docs/eagle_painting.html
@@ -8,6 +8,7 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Playfair+Display:wght@700&display=swap');
+ html { scroll-padding-top: 5rem; }
body { font-family: 'Inter', system-ui, sans-serif; }
.hero-bg {
background-image: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)), url('eagle-hero.webp');
@@ -130,14 +131,19 @@
.quote-form.is-submitted > :not(#form-success) {
display: none;
}
+ @media (max-width: 767px) {
+ .hero-bg {
+ background-attachment: scroll;
+ }
+ }
</style>
</head>
<body class="bg-white text-gray-900 overflow-x-hidden">
<!-- Navbar -->
<nav class="bg-white border-b sticky top-0 z-50 shadow-sm">
- <div class="max-w-7xl mx-auto px-6 py-5 flex items-center justify-between">
+ <div class="max-w-7xl mx-auto px-4 py-3 sm:px-6 sm:py-5 flex items-center justify-between">
<a href="#home" class="flex min-w-0 items-center" aria-label="Eagle Painting Solutions home">
- <img src="eagle-logo.png" alt="Eagle Painting Solutions" class="h-14 w-auto max-w-[190px] object-contain sm:h-16 sm:max-w-[230px]">
+ <img src="eagle-logo.png" alt="Eagle Painting Solutions" class="h-12 w-auto max-w-[165px] object-contain sm:h-16 sm:max-w-[230px]">
</a>
<div class="hidden md:flex items-center gap-x-9 text-base font-medium">
@@ -154,7 +160,7 @@
<i class="fas fa-phone"></i>
<span>(470) 579-7636</span>
</a>
- <button onclick="toggleMobileMenu()" class="md:hidden p-3 text-3xl">
+ <button onclick="toggleMobileMenu()" class="md:hidden p-2 text-2xl sm:p-3 sm:text-3xl" aria-label="Toggle mobile menu">
<i class="fas fa-bars"></i>
</button>
</div>
@@ -175,32 +181,32 @@
</nav>
<!-- HERO -->
- <section id="home" class="hero-bg h-screen flex items-center text-white relative">
- <div class="max-w-5xl mx-auto px-6 text-center">
- <div class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-md px-6 py-3 rounded-3xl mb-8">
- <span class="uppercase tracking-[3px] text-sm font-medium">Cumming, GA • North Georgia</span>
+ <section id="home" class="hero-bg min-h-[calc(100svh-4.5rem)] sm:min-h-screen flex items-center text-white relative py-16 sm:py-24">
+ <div class="max-w-5xl mx-auto px-4 sm:px-6 text-center">
+ <div class="inline-flex max-w-full items-center gap-2 bg-white/20 backdrop-blur-md px-4 py-2 sm:px-6 sm:py-3 rounded-3xl mb-6 sm:mb-8">
+ <span class="uppercase tracking-[2px] sm:tracking-[3px] text-[0.68rem] sm:text-sm font-medium">Cumming, GA • North Georgia</span>
</div>
- <h1 class="text-6xl md:text-7xl font-bold leading-none tracking-tighter mb-6">
+ <h1 class="text-4xl sm:text-5xl md:text-7xl font-bold leading-none tracking-tighter mb-5 sm:mb-6">
TRANSFORM YOUR SPACE<br>WITH EXPERT PAINTING
</h1>
- <p class="max-w-xl mx-auto text-xl md:text-2xl opacity-90 mb-10">
+ <p class="max-w-xl mx-auto text-base sm:text-xl md:text-2xl opacity-90 mb-8 sm:mb-10">
Interior • Exterior • Renovations • Carpentry<br>
Professional. Reliable. Guaranteed.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-5">
- <a href="#contact" class="px-12 py-6 bg-white text-blue-700 font-semibold text-xl rounded-3xl hover:bg-blue-50 transition flex items-center gap-x-4 group">
+ <a href="#contact" class="w-full max-w-sm sm:w-auto px-6 py-4 sm:px-12 sm:py-6 bg-white text-blue-700 font-semibold text-base sm:text-xl rounded-3xl hover:bg-blue-50 transition flex items-center justify-center gap-x-4 group">
GET FREE QUOTE
<i class="fas fa-arrow-right group-active:rotate-45 transition"></i>
</a>
- <a href="tel:4705797636" class="px-10 py-6 border-2 border-white font-semibold text-xl rounded-3xl hover:bg-white/10 transition flex items-center gap-x-3">
+ <a href="tel:4705797636" class="w-full max-w-sm sm:w-auto px-6 py-4 sm:px-10 sm:py-6 border-2 border-white font-semibold text-base sm:text-xl rounded-3xl hover:bg-white/10 transition flex items-center justify-center gap-x-3">
<i class="fas fa-phone"></i>
CALL US (470) 579-7636
</a>
</div>
- <div class="mt-16 flex justify-center gap-x-12 text-sm opacity-75">
+ <div class="mt-10 sm:mt-16 flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-x-12 text-sm opacity-75">
<div class="flex items-center gap-x-3">
<i class="fas fa-check-circle text-emerald-400"></i>
<span>1-Year Warranty</span>
@@ -212,37 +218,37 @@
</div>
</div>
- <div class="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce">
+ <div class="absolute bottom-10 left-1/2 hidden -translate-x-1/2 animate-bounce sm:block">
<i class="fas fa-chevron-down text-4xl"></i>
</div>
</section>
<!-- ABOUT -->
- <section id="about" class="py-28 bg-gray-50">
- <div class="max-w-7xl mx-auto px-6">
- <div class="grid lg:grid-cols-12 gap-16 items-center">
+ <section id="about" class="py-16 sm:py-20 lg:py-28 bg-gray-50">
+ <div class="max-w-7xl mx-auto px-4 sm:px-6">
+ <div class="grid lg:grid-cols-12 gap-12 lg:gap-16 items-center">
<div class="lg:col-span-7">
<div class="flex items-center gap-x-4 text-blue-600 mb-6">
<div class="h-px w-12 bg-blue-600"></div>
<span class="font-semibold tracking-widest text-sm">EST. 2023</span>
</div>
- <h2 class="text-5xl md:text-6xl font-bold leading-none tracking-tighter mb-8">Eagle Painting Solutions LLC</h2>
- <div class="max-w-2xl text-lg leading-relaxed text-gray-600">
+ <h2 class="text-3xl sm:text-5xl md:text-6xl font-bold leading-none tracking-tighter mb-6 sm:mb-8">Eagle Painting Solutions LLC</h2>
+ <div class="max-w-2xl text-base sm:text-lg leading-relaxed text-gray-600">
<p class="mb-6">We are a family-owned and operated painting and renovation company serving Cumming, Georgia and surrounding North Georgia communities. With a passion for quality craftsmanship, we deliver beautiful, long-lasting results on every project.</p>
<p>From a fresh coat of paint to complete home transformations, our experienced team handles it all with care and attention to detail.</p>
</div>
- <div class="mt-12 grid grid-cols-3 gap-8">
+ <div class="mt-10 sm:mt-12 grid grid-cols-1 sm:grid-cols-3 gap-6 sm:gap-8 text-center sm:text-left">
<div>
- <div class="text-5xl font-bold text-blue-600 mb-1">500+</div>
+ <div class="text-4xl sm:text-5xl font-bold text-blue-600 mb-1">500+</div>
<div class="font-medium">Projects Completed</div>
</div>
<div>
- <div class="text-5xl font-bold text-blue-600 mb-1">100%</div>
+ <div class="text-4xl sm:text-5xl font-bold text-blue-600 mb-1">100%</div>
<div class="font-medium">Satisfaction Rate</div>
</div>
<div>
- <div class="text-5xl font-bold text-blue-600 mb-1">10+</div>
+ <div class="text-4xl sm:text-5xl font-bold text-blue-600 mb-1">10+</div>
<div class="font-medium">Years Combined Exp.</div>
</div>
</div>
@@ -250,12 +256,12 @@
<div class="lg:col-span-5">
<div class="relative">
- <img src="eagle-1.png" alt="Our team at work" class="rounded-3xl shadow-2xl">
- <div class="absolute -bottom-6 -right-6 bg-white p-8 rounded-3xl shadow-2xl max-w-xs">
+ <img src="eagle-1.png" alt="Our team at work" class="w-full rounded-3xl shadow-2xl">
+ <div class="static mt-4 bg-white p-5 rounded-3xl shadow-2xl sm:absolute sm:-bottom-6 sm:-right-6 sm:mt-0 sm:max-w-xs sm:p-8">
<div class="flex gap-x-4 items-start">
- <div class="text-6xl">🦅</div>
+ <div class="text-4xl sm:text-6xl">🦅</div>
<div>
- <div class="font-bold text-xl">Quality You Can Trust</div>
+ <div class="font-bold text-lg sm:text-xl">Quality You Can Trust</div>
<div class="text-gray-500 mt-2">Licensed • Insured • Professional</div>
</div>
</div>
@@ -267,17 +273,17 @@
</section>
<!-- SERVICES -->
- <section id="services" class="py-28">
- <div class="max-w-7xl mx-auto px-6">
- <div class="text-center mb-16">
+ <section id="services" class="py-16 sm:py-20 lg:py-28">
+ <div class="max-w-7xl mx-auto px-4 sm:px-6">
+ <div class="text-center mb-12 sm:mb-16">
<span class="px-6 py-2 bg-blue-100 text-blue-700 rounded-3xl text-sm font-semibold">OUR SERVICES</span>
- <h2 class="text-5xl font-bold mt-5">What We Offer</h2>
+ <h2 class="text-3xl sm:text-5xl font-bold mt-5">What We Offer</h2>
</div>
<div class="grid md:grid-cols-3 gap-8">
- <div class="service-card bg-white p-10 rounded-3xl border">
- <div class="text-7xl mb-8">🏠</div>
- <h3 class="text-3xl font-semibold mb-4">Interior Painting</h3>
+ <div class="service-card bg-white p-6 sm:p-10 rounded-3xl border">
+ <div class="text-5xl sm:text-7xl mb-6 sm:mb-8">🏠</div>
+ <h3 class="text-2xl sm:text-3xl font-semibold mb-4">Interior Painting</h3>
<ul class="space-y-4 text-gray-600">
<li class="flex items-center gap-3"><i class="fas fa-check text-emerald-500"></i> Walls, ceilings & trim</li>
<li class="flex items-center gap-3"><i class="fas fa-check text-emerald-500"></i> Color consulting</li>
@@ -286,10 +292,10 @@
</ul>
</div>
- <div class="service-card bg-white p-10 rounded-3xl border border-blue-200 relative">
- <div class="absolute top-8 right-8 bg-blue-600 text-white text-xs font-bold px-4 py-1 rounded-full">MOST POPULAR</div>
- <div class="text-7xl mb-8">🌳</div>
- <h3 class="text-3xl font-semibold mb-4">Exterior Painting</h3>
+ <div class="service-card bg-white p-6 sm:p-10 rounded-3xl border border-blue-200 relative">
+ <div class="static mb-5 inline-block bg-blue-600 text-white text-xs font-bold px-4 py-1 rounded-full sm:absolute sm:top-8 sm:right-8 sm:mb-0">MOST POPULAR</div>
+ <div class="text-5xl sm:text-7xl mb-6 sm:mb-8">🌳</div>
+ <h3 class="text-2xl sm:text-3xl font-semibold mb-4">Exterior Painting</h3>
<ul class="space-y-4 text-gray-600">
<li class="flex items-center gap-3"><i class="fas fa-check text-emerald-500"></i> House siding</li>
<li class="flex items-center gap-3"><i class="fas fa-check text-emerald-500"></i> Decks & fences</li>
@@ -298,9 +304,9 @@
</ul>
</div>
- <div class="service-card bg-white p-10 rounded-3xl border">
- <div class="text-7xl mb-8">🔨</div>
- <h3 class="text-3xl font-semibold mb-4">Renovation & Carpentry</h3>
+ <div class="service-card bg-white p-6 sm:p-10 rounded-3xl border">
+ <div class="text-5xl sm:text-7xl mb-6 sm:mb-8">🔨</div>
+ <h3 class="text-2xl sm:text-3xl font-semibold mb-4">Renovation & Carpentry</h3>
<ul class="space-y-4 text-gray-600">
<li class="flex items-center gap-3"><i class="fas fa-check text-emerald-500"></i> Full home renovations</li>
<li class="flex items-center gap-3"><i class="fas fa-check text-emerald-500"></i> Trim & molding installation</li>
@@ -313,75 +319,75 @@
</section>
<!-- SERVICE AREAS -->
- <section id="areas" class="py-28 bg-gradient-to-b from-gray-900 to-black text-white">
- <div class="max-w-7xl mx-auto px-6">
+ <section id="areas" class="py-16 sm:py-20 lg:py-28 bg-gradient-to-b from-gray-900 to-black text-white">
+ <div class="max-w-7xl mx-auto px-4 sm:px-6">
<div class="text-center mb-12">
- <h2 class="text-5xl font-bold">Proudly Serving North Georgia</h2>
+ <h2 class="text-3xl sm:text-5xl font-bold">Proudly Serving North Georgia</h2>
</div>
- <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
- <div class="bg-white/10 hover:bg-white/20 transition p-8 rounded-3xl">Cumming</div>
- <div class="bg-white/10 hover:bg-white/20 transition p-8 rounded-3xl">Alpharetta</div>
- <div class="bg-white/10 hover:bg-white/20 transition p-8 rounded-3xl">Milton</div>
- <div class="bg-white/10 hover:bg-white/20 transition p-8 rounded-3xl">Roswell</div>
- <div class="bg-white/10 hover:bg-white/20 transition p-8 rounded-3xl">Johns Creek</div>
- <div class="bg-white/10 hover:bg-white/20 transition p-8 rounded-3xl">Buford</div>
- <div class="bg-white/10 hover:bg-white/20 transition p-8 rounded-3xl">Duluth</div>
- <div class="bg-white/10 hover:bg-white/20 transition p-8 rounded-3xl">Forsyth County</div>
+ <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 sm:gap-6 text-center">
+ <div class="bg-white/10 hover:bg-white/20 transition p-5 sm:p-8 rounded-3xl">Cumming</div>
+ <div class="bg-white/10 hover:bg-white/20 transition p-5 sm:p-8 rounded-3xl">Alpharetta</div>
+ <div class="bg-white/10 hover:bg-white/20 transition p-5 sm:p-8 rounded-3xl">Milton</div>
+ <div class="bg-white/10 hover:bg-white/20 transition p-5 sm:p-8 rounded-3xl">Roswell</div>
+ <div class="bg-white/10 hover:bg-white/20 transition p-5 sm:p-8 rounded-3xl">Johns Creek</div>
+ <div class="bg-white/10 hover:bg-white/20 transition p-5 sm:p-8 rounded-3xl">Buford</div>
+ <div class="bg-white/10 hover:bg-white/20 transition p-5 sm:p-8 rounded-3xl">Duluth</div>
+ <div class="bg-white/10 hover:bg-white/20 transition p-5 sm:p-8 rounded-3xl">Forsyth County</div>
</div>
<p class="text-center mt-12 text-gray-400">And surrounding communities • Free estimates available</p>
</div>
</section>
<!-- GALLERY -->
- <section id="gallery" class="py-28">
- <div class="max-w-7xl mx-auto px-6">
- <div class="text-center mb-16">
- <h2 class="text-5xl font-bold">Our Recent Work</h2>
+ <section id="gallery" class="py-16 sm:py-20 lg:py-28">
+ <div class="max-w-7xl mx-auto px-4 sm:px-6">
+ <div class="text-center mb-12 sm:mb-16">
+ <h2 class="text-3xl sm:text-5xl font-bold">Our Recent Work</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<button type="button" class="gallery-image-trigger overflow-hidden rounded-3xl" aria-label="View full size image of exterior painting">
- <img src="eagle-2.png" class="w-full h-80 object-cover" alt="Exterior painting" loading="lazy" decoding="async">
+ <img src="eagle-2.png" class="w-full h-56 sm:h-72 lg:h-80 object-cover" alt="Exterior painting" loading="lazy" decoding="async">
</button>
<button type="button" class="gallery-image-trigger overflow-hidden rounded-3xl" aria-label="View full size image of interior stairs">
- <img src="eagle-3.png" class="w-full h-80 object-cover" alt="Interior stairs" loading="lazy" decoding="async">
+ <img src="eagle-3.png" class="w-full h-56 sm:h-72 lg:h-80 object-cover" alt="Interior stairs" loading="lazy" decoding="async">
</button>
<button type="button" class="gallery-image-trigger overflow-hidden rounded-3xl" aria-label="View full size image of renovation work">
- <img src="eagle-4.png" class="w-full h-80 object-cover" alt="Renovation" loading="lazy" decoding="async">
+ <img src="eagle-4.png" class="w-full h-56 sm:h-72 lg:h-80 object-cover" alt="Renovation" loading="lazy" decoding="async">
</button>
<button type="button" class="gallery-image-trigger overflow-hidden rounded-3xl" aria-label="View full size image of deck work">
- <img src="eagle-5.png" class="w-full h-80 object-cover" alt="Deck" loading="lazy" decoding="async">
+ <img src="eagle-5.png" class="w-full h-56 sm:h-72 lg:h-80 object-cover" alt="Deck" loading="lazy" decoding="async">
</button>
</div>
</div>
</section>
<!-- QUOTE FORM -->
- <section id="contact" class="py-28 bg-blue-50">
- <div class="max-w-2xl mx-auto px-6">
+ <section id="contact" class="py-16 sm:py-20 lg:py-28 bg-blue-50">
+ <div class="max-w-2xl mx-auto px-4 sm:px-6">
<div class="bg-white rounded-3xl shadow-2xl p-6 sm:p-12">
- <h2 class="text-center text-4xl font-bold mb-3">Request a Free Quote</h2>
- <p class="text-center text-gray-600 mb-12">We'll respond within 24 hours</p>
+ <h2 class="text-center text-3xl sm:text-4xl font-bold mb-3">Request a Free Quote</h2>
+ <p class="text-center text-gray-600 mb-8 sm:mb-12">We'll respond within 24 hours</p>
- <form id="quoteForm" class="quote-form space-y-8">
+ <form id="quoteForm" class="quote-form space-y-6 sm:space-y-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium mb-2">Name</label>
- <input id="name" type="text" required class="w-full px-6 py-4 border border-gray-200 rounded-2xl focus:outline-none focus:border-blue-600">
+ <input id="name" type="text" required class="w-full px-4 py-4 sm:px-6 border border-gray-200 rounded-2xl focus:outline-none focus:border-blue-600">
</div>
<div>
<label class="block text-sm font-medium mb-2">Phone</label>
- <input id="phone" type="tel" required class="w-full px-6 py-4 border border-gray-200 rounded-2xl focus:outline-none focus:border-blue-600">
+ <input id="phone" type="tel" required class="w-full px-4 py-4 sm:px-6 border border-gray-200 rounded-2xl focus:outline-none focus:border-blue-600">
</div>
</div>
<div>
<label class="block text-sm font-medium mb-2">Email</label>
- <input id="email" type="email" class="w-full px-6 py-4 border border-gray-200 rounded-2xl focus:outline-none focus:border-blue-600">
+ <input id="email" type="email" class="w-full px-4 py-4 sm:px-6 border border-gray-200 rounded-2xl focus:outline-none focus:border-blue-600">
</div>
<div>
<label class="block text-sm font-medium mb-2">Tell us about your project</label>
- <textarea id="project" rows="5" class="w-full px-6 py-4 border border-gray-200 rounded-3xl focus:outline-none focus:border-blue-600" placeholder="Interior painting, exterior, deck, renovation..."></textarea>
+ <textarea id="project" rows="5" class="w-full px-4 py-4 sm:px-6 border border-gray-200 rounded-3xl focus:outline-none focus:border-blue-600" placeholder="Interior painting, exterior, deck, renovation..."></textarea>
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 px-6 py-5 sm:px-8 sm:py-6 text-white text-lg sm:text-xl font-semibold rounded-3xl transition flex items-center justify-center gap-x-3 leading-tight">
@@ -399,11 +405,11 @@
</section>
<!-- FOOTER -->
- <footer class="bg-gray-950 text-gray-400 py-20">
- <div class="max-w-7xl mx-auto px-6">
+ <footer class="bg-gray-950 text-gray-400 py-14 sm:py-20">
+ <div class="max-w-7xl mx-auto px-4 sm:px-6">
<div class="grid md:grid-cols-12 gap-y-12">
<div class="md:col-span-5">
- <div class="mb-6 text-3xl font-bold tracking-tight text-white">Eagle Painting Solutions LLC</div>
+ <div class="mb-6 text-2xl sm:text-3xl font-bold tracking-tight text-white">Eagle Painting Solutions LLC</div>
<p class="max-w-sm">Professional painting and home improvement services in North Georgia.</p>
</div>
@@ -413,22 +419,22 @@
<i class="fas fa-phone w-5"></i>
(470) 579-7636
</a>
- <a href="mailto:[email protected]" class="flex items-center gap-x-4 hover:text-white">
+ <a href="mailto:[email protected]" class="flex min-w-0 items-center gap-x-4 hover:text-white">
<i class="fas fa-envelope w-5"></i>
- [email protected]
+ <span class="break-all">[email protected]</span>
</a>
</div>
<div class="md:col-span-4">
<div class="font-semibold text-white mb-6">Follow Us</div>
- <a href="https://www.instagram.com/eaglespaintingsolutionsllc/" target="_blank" class="inline-flex items-center gap-x-3 hover:text-white">
+ <a href="https://www.instagram.com/eaglespaintingsolutionsllc/" target="_blank" class="inline-flex min-w-0 items-center gap-x-3 hover:text-white">
<i class="fab fa-instagram text-3xl"></i>
- <span>@eaglespaintingsolutionsllc</span>
+ <span class="break-all">@eaglespaintingsolutionsllc</span>
</a>
</div>
</div>
- <div class="text-center text-xs mt-20 pt-8 border-t border-gray-900">
+ <div class="text-center text-xs mt-12 sm:mt-20 pt-8 border-t border-gray-900">
© 2026 Eagle Painting Solutions LLC. All Rights Reserved. | Cumming, Georgia
</div>
</div>