|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>703 Nailed It - Professional Remodeling Services in Culpeper, VA</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
|
|
|
.hero { |
|
|
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
min-height: 80vh; |
|
|
} |
|
|
|
|
|
.service-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.testimonial-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.testimonial-card:hover { |
|
|
transform: scale(1.03); |
|
|
} |
|
|
|
|
|
.contact-form input, .contact-form textarea { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.contact-form input:focus, .contact-form textarea:focus { |
|
|
border-color: #f59e0b; |
|
|
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.5); |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
background-color: #f59e0b; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover:after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.mobile-menu { |
|
|
max-height: 0; |
|
|
overflow: hidden; |
|
|
transition: max-height 0.3s ease-out; |
|
|
} |
|
|
|
|
|
.mobile-menu.open { |
|
|
max-height: 500px; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans text-gray-800"> |
|
|
|
|
|
<header class="bg-white shadow-md sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-amber-500 p-2 rounded-lg mr-3"> |
|
|
<i class="fas fa-hammer text-white text-2xl"></i> |
|
|
</div> |
|
|
<h1 class="text-2xl font-bold text-gray-800">703 Nailed It</h1> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="hidden md:flex space-x-8"> |
|
|
<a href="#home" class="nav-link text-gray-700 hover:text-amber-500 font-medium">Home</a> |
|
|
<a href="#services" class="nav-link text-gray-700 hover:text-amber-500 font-medium">Services</a> |
|
|
<a href="#projects" class="nav-link text-gray-700 hover:text-amber-500 font-medium">Projects</a> |
|
|
<a href="#testimonials" class="nav-link text-gray-700 hover:text-amber-500 font-medium">Testimonials</a> |
|
|
<a href="#contact" class="nav-link text-gray-700 hover:text-amber-500 font-medium">Contact</a> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<button id="mobile-menu-button" class="md:hidden text-gray-700 focus:outline-none"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="mobile-menu" class="mobile-menu md:hidden bg-white"> |
|
|
<div class="px-4 py-2 space-y-3"> |
|
|
<a href="#home" class="block py-2 text-gray-700 hover:text-amber-500 font-medium">Home</a> |
|
|
<a href="#services" class="block py-2 text-gray-700 hover:text-amber-500 font-medium">Services</a> |
|
|
<a href="#projects" class="block py-2 text-gray-700 hover:text-amber-500 font-medium">Projects</a> |
|
|
<a href="#testimonials" class="block py-2 text-gray-700 hover:text-amber-500 font-medium">Testimonials</a> |
|
|
<a href="#contact" class="block py-2 text-gray-700 hover:text-amber-500 font-medium">Contact</a> |
|
|
<div class="py-2"> |
|
|
<a href="tel:5716833169" class="block bg-amber-500 text-white py-2 px-4 rounded-lg text-center font-medium hover:bg-amber-600 transition"> |
|
|
<i class="fas fa-phone mr-2"></i> Call Now |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section id="home" class="hero flex items-center justify-center text-white"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6">Transform Your Space With Excellence</h1> |
|
|
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Professional remodeling services in Culpeper, VA that you can trust. Quality craftsmanship for your home or business.</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4"> |
|
|
<a href="#contact" class="bg-amber-500 hover:bg-amber-600 text-white py-3 px-6 rounded-lg text-lg font-medium transition duration-300"> |
|
|
<i class="fas fa-envelope mr-2"></i> Get a Free Quote |
|
|
</a> |
|
|
<a href="tel:5716833169" class="bg-white hover:bg-gray-100 text-amber-600 py-3 px-6 rounded-lg text-lg font-medium transition duration-300"> |
|
|
<i class="fas fa-phone mr-2"></i> (571) 683-3169 |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="services" class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Our Professional Services</h2> |
|
|
<div class="w-24 h-1 bg-amber-500 mx-auto"></div> |
|
|
<p class="text-gray-600 mt-4 max-w-2xl mx-auto">We offer a comprehensive range of remodeling services to transform your space into something extraordinary.</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300"> |
|
|
<div class="h-48 bg-gray-200 flex items-center justify-center"> |
|
|
<i class="fas fa-home text-6xl text-amber-500"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-3">Home Remodeling</h3> |
|
|
<p class="text-gray-600 mb-4">Complete home transformations including kitchens, bathrooms, basements, and whole-house renovations.</p> |
|
|
<a href="#contact" class="text-amber-500 font-medium hover:text-amber-600 flex items-center"> |
|
|
Learn More <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300"> |
|
|
<div class="h-48 bg-gray-200 flex items-center justify-center"> |
|
|
<i class="fas fa-tools text-6xl text-amber-500"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-3">Custom Carpentry</h3> |
|
|
<p class="text-gray-600 mb-4">Bespoke woodworking solutions including custom cabinets, built-ins, trim work, and furniture.</p> |
|
|
<a href="#contact" class="text-amber-500 font-medium hover:text-amber-600 flex items-center"> |
|
|
Learn More <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300"> |
|
|
<div class="h-48 bg-gray-200 flex items-center justify-center"> |
|
|
<i class="fas fa-paint-roller text-6xl text-amber-500"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-3">Interior Finishing</h3> |
|
|
<p class="text-gray-600 mb-4">Professional painting, drywall installation, flooring, and all interior finishing touches.</p> |
|
|
<a href="#contact" class="text-amber-500 font-medium hover:text-amber-600 flex items-center"> |
|
|
Learn More <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300"> |
|
|
<div class="h-48 bg-gray-200 flex items-center justify-center"> |
|
|
<i class="fas fa-door-open text-6xl text-amber-500"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-3">Room Additions</h3> |
|
|
<p class="text-gray-600 mb-4">Expand your living space with seamless room additions that match your existing structure.</p> |
|
|
<a href="#contact" class="text-amber-500 font-medium hover:text-amber-600 flex items-center"> |
|
|
Learn More <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300"> |
|
|
<div class="h-48 bg-gray-200 flex items-center justify-center"> |
|
|
<i class="fas fa-vector-square text-6xl text-amber-500"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-3">Commercial Remodeling</h3> |
|
|
<p class="text-gray-600 mb-4">Transform your business space with professional commercial remodeling services.</p> |
|
|
<a href="#contact" class="text-amber-500 font-medium hover:text-amber-600 flex items-center"> |
|
|
Learn More <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="service-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300"> |
|
|
<div class="h-48 bg-gray-200 flex items-center justify-center"> |
|
|
<i class="fas fa-hand-holding-usd text-6xl text-amber-500"></i> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-3">Consultation & Design</h3> |
|
|
<p class="text-gray-600 mb-4">Expert advice and design solutions to help plan your perfect remodeling project.</p> |
|
|
<a href="#contact" class="text-amber-500 font-medium hover:text-amber-600 flex items-center"> |
|
|
Learn More <i class="fas fa-arrow-right ml-2"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col lg:flex-row items-center"> |
|
|
<div class="lg:w-1/2 mb-8 lg:mb-0 lg:pr-12"> |
|
|
<img src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Remodeling work" class="rounded-lg shadow-lg w-full"> |
|
|
</div> |
|
|
<div class="lg:w-1/2"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Why Choose 703 Nailed It?</h2> |
|
|
<div class="w-24 h-1 bg-amber-500 mb-6"></div> |
|
|
|
|
|
<div class="space-y-6"> |
|
|
<div class="flex"> |
|
|
<div class="mr-4"> |
|
|
<div class="bg-amber-100 text-amber-600 rounded-full w-12 h-12 flex items-center justify-center"> |
|
|
<i class="fas fa-medal text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-2">Quality Craftsmanship</h3> |
|
|
<p class="text-gray-600">We take pride in our attention to detail and commitment to excellence in every project we undertake.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="mr-4"> |
|
|
<div class="bg-amber-100 text-amber-600 rounded-full w-12 h-12 flex items-center justify-center"> |
|
|
<i class="fas fa-user-tie text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-2">Experienced Professionals</h3> |
|
|
<p class="text-gray-600">Our team brings years of experience and specialized skills to ensure your project is completed to the highest standards.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="mr-4"> |
|
|
<div class="bg-amber-100 text-amber-600 rounded-full w-12 h-12 flex items-center justify-center"> |
|
|
<i class="fas fa-handshake text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-2">Customer Satisfaction</h3> |
|
|
<p class="text-gray-600">Your satisfaction is our top priority. We work closely with you to bring your vision to life.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex"> |
|
|
<div class="mr-4"> |
|
|
<div class="bg-amber-100 text-amber-600 rounded-full w-12 h-12 flex items-center justify-center"> |
|
|
<i class="fas fa-dollar-sign text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</html> |
