Created
August 1, 2025 22:13
-
-
Save corbanenns/2a8e985914dc98dd4394bc0712ff4562 to your computer and use it in GitHub Desktop.
Harold's Auto Repair Website - Updated with SureCritic Reviews
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Harold's Quality Auto Repair Inc - Salem's trusted auto repair shop since 1996. ASE certified technicians, BBB accredited, offering comprehensive auto repair services with a 1 year/12,000 mile warranty."> | |
| <meta name="keywords" content="auto repair, salem oregon, car repair, ASE certified, BBB accredited, harold's auto"> | |
| <meta property="og:title" content="Harold's Quality Auto Repair Inc - Salem, OR"> | |
| <meta property="og:description" content="Trusted auto repair in Salem since 1996. ASE certified technicians, comprehensive services, and customer satisfaction guaranteed."> | |
| <meta property="og:type" content="website"> | |
| <meta property="og:image" content="https://static.whirlocal.io/uploads/2019/06/Harolds-Logo-Wide-1.png"> | |
| <title>Harold's Quality Auto Repair Inc - Trusted Auto Repair in Salem, OR Since 1996</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-red: #DC143C; | |
| --primary-yellow: #FFD700; | |
| --dark: #1a1a1a; | |
| --light: #f5f5f5; | |
| --text: #333; | |
| --shadow: 0 2px 10px rgba(0,0,0,0.1); | |
| --transition: all 0.3s ease; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; | |
| line-height: 1.6; | |
| color: var(--text); | |
| overflow-x: hidden; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* Header Styles */ | |
| header { | |
| background: #fff; | |
| box-shadow: var(--shadow); | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| z-index: 1000; | |
| transition: var(--transition); | |
| } | |
| header.scrolled { | |
| background: rgba(255, 255, 255, 0.98); | |
| backdrop-filter: blur(10px); | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem 0; | |
| } | |
| .logo { | |
| max-height: 60px; | |
| width: auto; | |
| } | |
| .nav-links { | |
| display: flex; | |
| list-style: none; | |
| gap: 2rem; | |
| align-items: center; | |
| } | |
| .nav-links a { | |
| text-decoration: none; | |
| color: var(--text); | |
| font-weight: 500; | |
| transition: var(--transition); | |
| position: relative; | |
| } | |
| .nav-links a:hover { | |
| color: var(--primary-red); | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--primary-red); | |
| transition: var(--transition); | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .cta-phone { | |
| background: var(--primary-red); | |
| color: white; | |
| padding: 0.5rem 1.5rem; | |
| border-radius: 25px; | |
| text-decoration: none; | |
| font-weight: bold; | |
| transition: var(--transition); | |
| } | |
| .cta-phone:hover { | |
| background: #b91c2c; | |
| transform: translateY(-2px); | |
| } | |
| .mobile-menu { | |
| display: none; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| background: linear-gradient(135deg, var(--dark) 0%, #2a2a2a 100%); | |
| color: white; | |
| padding: 120px 0 80px; | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23DC143C" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,165.3C384,171,480,149,576,154.7C672,160,768,192,864,197.3C960,203,1056,181,1152,154.7C1248,128,1344,96,1392,80L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom; | |
| background-size: cover; | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 1; | |
| animation: fadeInUp 1s ease; | |
| } | |
| .hero h1 { | |
| font-size: 3rem; | |
| margin-bottom: 1rem; | |
| text-shadow: 2px 2px 4px rgba(0,0,0,0.3); | |
| } | |
| .hero .tagline { | |
| font-size: 1.3rem; | |
| margin-bottom: 2rem; | |
| color: var(--primary-yellow); | |
| } | |
| .hero-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| .btn { | |
| padding: 1rem 2rem; | |
| border-radius: 30px; | |
| text-decoration: none; | |
| font-weight: bold; | |
| transition: var(--transition); | |
| display: inline-block; | |
| } | |
| .btn-primary { | |
| background: var(--primary-red); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background: #b91c2c; | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 20px rgba(220, 20, 60, 0.3); | |
| } | |
| .btn-secondary { | |
| background: transparent; | |
| color: white; | |
| border: 2px solid white; | |
| } | |
| .btn-secondary:hover { | |
| background: white; | |
| color: var(--dark); | |
| } | |
| /* Section Styles */ | |
| section { | |
| padding: 80px 0; | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 0.6s ease; | |
| } | |
| section.visible { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .section-title { | |
| text-align: center; | |
| font-size: 2.5rem; | |
| margin-bottom: 3rem; | |
| color: var(--dark); | |
| position: relative; | |
| display: inline-block; | |
| width: 100%; | |
| } | |
| .section-title::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -10px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 60px; | |
| height: 4px; | |
| background: var(--primary-red); | |
| } | |
| /* About Section */ | |
| .about { | |
| background: var(--light); | |
| } | |
| .about-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 3rem; | |
| align-items: center; | |
| } | |
| .about-text h3 { | |
| color: var(--primary-red); | |
| margin-bottom: 1rem; | |
| } | |
| .about-stats { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 2rem; | |
| margin-top: 2rem; | |
| } | |
| .stat { | |
| text-align: center; | |
| padding: 1.5rem; | |
| background: white; | |
| border-radius: 10px; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| } | |
| .stat:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 5px 20px rgba(0,0,0,0.1); | |
| } | |
| .stat-number { | |
| font-size: 2.5rem; | |
| font-weight: bold; | |
| color: var(--primary-red); | |
| } | |
| .stat-label { | |
| color: #666; | |
| margin-top: 0.5rem; | |
| } | |
| /* Services Section */ | |
| .services-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .service-card { | |
| background: white; | |
| padding: 2rem; | |
| border-radius: 10px; | |
| box-shadow: var(--shadow); | |
| text-align: center; | |
| transition: var(--transition); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.15); | |
| } | |
| .service-icon { | |
| font-size: 3rem; | |
| color: var(--primary-red); | |
| margin-bottom: 1rem; | |
| } | |
| .service-card h3 { | |
| margin-bottom: 1rem; | |
| color: var(--dark); | |
| } | |
| /* Why Choose Us */ | |
| .why-choose { | |
| background: var(--light); | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 3rem; | |
| } | |
| .feature { | |
| text-align: center; | |
| padding: 2rem; | |
| } | |
| .feature-icon { | |
| width: 80px; | |
| height: 80px; | |
| background: var(--primary-yellow); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 2rem; | |
| color: var(--dark); | |
| margin: 0 auto 1rem; | |
| transition: var(--transition); | |
| } | |
| .feature:hover .feature-icon { | |
| background: var(--primary-red); | |
| color: white; | |
| } | |
| /* Testimonials */ | |
| .testimonials { | |
| background: white; | |
| padding: 3rem; | |
| border-radius: 10px; | |
| box-shadow: var(--shadow); | |
| } | |
| .testimonial { | |
| margin-bottom: 2rem; | |
| padding: 1.5rem; | |
| background: var(--light); | |
| border-radius: 10px; | |
| border-left: 4px solid var(--primary-red); | |
| } | |
| .testimonial-text { | |
| font-style: italic; | |
| margin-bottom: 1rem; | |
| } | |
| .testimonial-author { | |
| text-align: right; | |
| font-weight: bold; | |
| color: var(--primary-red); | |
| } | |
| /* Contact Section */ | |
| .contact-content { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 3rem; | |
| } | |
| .contact-info { | |
| background: white; | |
| padding: 2rem; | |
| border-radius: 10px; | |
| box-shadow: var(--shadow); | |
| } | |
| .contact-item { | |
| display: flex; | |
| align-items: start; | |
| margin-bottom: 1.5rem; | |
| } | |
| .contact-item i { | |
| color: var(--primary-red); | |
| font-size: 1.5rem; | |
| margin-right: 1rem; | |
| margin-top: 0.25rem; | |
| } | |
| .hours-table { | |
| margin-top: 1rem; | |
| } | |
| .hours-table table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .hours-table td { | |
| padding: 0.5rem 0; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .hours-table td:last-child { | |
| text-align: right; | |
| font-weight: 500; | |
| } | |
| /* Contact Form */ | |
| .contact-form { | |
| background: var(--light); | |
| padding: 2rem; | |
| border-radius: 10px; | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 500; | |
| } | |
| .form-group input, | |
| .form-group textarea { | |
| width: 100%; | |
| padding: 0.75rem; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| font-family: inherit; | |
| transition: var(--transition); | |
| } | |
| .form-group input:focus, | |
| .form-group textarea:focus { | |
| outline: none; | |
| border-color: var(--primary-red); | |
| } | |
| /* Map */ | |
| .map-container { | |
| margin-top: 3rem; | |
| height: 400px; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--dark); | |
| color: white; | |
| text-align: center; | |
| padding: 2rem 0; | |
| } | |
| /* Back to Top Button */ | |
| .back-to-top { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| background: var(--primary-red); | |
| color: white; | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| text-decoration: none; | |
| font-size: 1.5rem; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: var(--transition); | |
| box-shadow: var(--shadow); | |
| } | |
| .back-to-top.visible { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .back-to-top:hover { | |
| background: #b91c2c; | |
| transform: translateY(-5px); | |
| } | |
| /* Loading Animation */ | |
| .loader { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| z-index: 9999; | |
| transition: opacity 0.5s ease; | |
| } | |
| .loader.hidden { | |
| opacity: 0; | |
| pointer-events: none; | |
| } | |
| .loader-circle { | |
| width: 50px; | |
| height: 50px; | |
| border: 3px solid #f3f3f3; | |
| border-top: 3px solid var(--primary-red); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| } | |
| /* Animations */ | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Mobile Styles */ | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| position: fixed; | |
| left: -100%; | |
| top: 70px; | |
| flex-direction: column; | |
| background: white; | |
| width: 100%; | |
| text-align: center; | |
| transition: 0.3s; | |
| box-shadow: 0 10px 27px rgba(0,0,0,0.05); | |
| padding: 2rem 0; | |
| } | |
| .nav-links.active { | |
| left: 0; | |
| } | |
| .mobile-menu { | |
| display: block; | |
| } | |
| .hero h1 { | |
| font-size: 2rem; | |
| } | |
| .about-content { | |
| grid-template-columns: 1fr; | |
| } | |
| .about-stats { | |
| grid-template-columns: 1fr; | |
| } | |
| .contact-content { | |
| grid-template-columns: 1fr; | |
| } | |
| .hero-buttons { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .btn { | |
| width: 200px; | |
| text-align: center; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Loader --> | |
| <div class="loader"> | |
| <div class="loader-circle"></div> | |
| </div> | |
| <!-- Header --> | |
| <header> | |
| <nav class="container"> | |
| <img src="https://static.whirlocal.io/uploads/2019/06/Harolds-Logo-Wide-1.png" alt="Harold's Quality Auto Repair Logo" class="logo"> | |
| <ul class="nav-links"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#services">Services</a></li> | |
| <li><a href="#why-choose">Why Choose Us</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| <li><a href="tel:503-365-9702" class="cta-phone"><i class="fas fa-phone"></i> (503) 365-9702</a></li> | |
| </ul> | |
| <div class="mobile-menu"> | |
| <i class="fas fa-bars"></i> | |
| </div> | |
| </nav> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero" id="home"> | |
| <div class="container"> | |
| <div class="hero-content"> | |
| <h1>Harold's Quality Auto Repair Inc</h1> | |
| <p class="tagline">Salem's Trusted Auto Repair Shop Since 1996</p> | |
| <p style="font-size: 1.1rem; margin-bottom: 2rem;">ASE Certified Technicians • BBB Accredited • 1 Year/12,000 Mile Warranty</p> | |
| <div class="hero-buttons"> | |
| <a href="https://www.mitchell1crm.com/crmutilities/RequestAppointment.aspx?c=EAAAANp4%2BS%2FmAqPhEOnkdmRbK7PkFc1WzbWJoKDr28WAmYORhiAj4L6AxBtrFhJIK6ly8w%3D%3D" target="_blank" class="btn btn-primary">Schedule Service</a> | |
| <a href="tel:503-365-9702" class="btn btn-secondary">Call Now</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section class="about" id="about"> | |
| <div class="container"> | |
| <h2 class="section-title">About Harold's Quality Auto Repair</h2> | |
| <div class="about-content"> | |
| <div class="about-text"> | |
| <h3>Your Trusted Partner in Auto Care</h3> | |
| <p>Since 1996, Harold's Quality Auto Repair has been the go-to auto repair shop for Salem residents who value quality, honesty, and exceptional service. Our commitment to excellence has made us a cornerstone of the West Salem community.</p> | |
| <p>We've recently expanded to a state-of-the-art 8,000 sq ft facility with 9 lifts and 11 bays, equipped with the latest diagnostic technology. Our team of ASE Master Certified technicians brings decades of combined experience to every repair.</p> | |
| <p>As a BBB Accredited business and NAPA AutoCare Center, we stand behind our work with a comprehensive 1 year, 12,000 mile warranty. When you choose Harold's, you're choosing peace of mind.</p> | |
| </div> | |
| <div class="about-stats"> | |
| <div class="stat"> | |
| <div class="stat-number">29+</div> | |
| <div class="stat-label">Years of Service</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-number">4.8★</div> | |
| <div class="stat-label">732 Reviews</div> | |
| </div> | |
| <div class="stat"> | |
| <div class="stat-number">ASE</div> | |
| <div class="stat-label">Certified Technicians</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section class="services" id="services"> | |
| <div class="container"> | |
| <h2 class="section-title">Our Comprehensive Services</h2> | |
| <div class="services-grid"> | |
| <div class="service-card"> | |
| <i class="fas fa-laptop-medical service-icon"></i> | |
| <h3>Computer Diagnostics</h3> | |
| <p>State-of-the-art diagnostic equipment to quickly identify and resolve issues with your vehicle's computer systems.</p> | |
| </div> | |
| <div class="service-card"> | |
| <i class="fas fa-oil-can service-icon"></i> | |
| <h3>Oil Changes & Maintenance</h3> | |
| <p>Regular maintenance services including oil changes, filter replacements, and multi-point inspections to keep your car running smoothly.</p> | |
| </div> | |
| <div class="service-card"> | |
| <i class="fas fa-cogs service-icon"></i> | |
| <h3>Engine Repair & Replacement</h3> | |
| <p>From minor repairs to complete engine replacements, our expert technicians handle all engine-related services.</p> | |
| </div> | |
| <div class="service-card"> | |
| <i class="fas fa-sync-alt service-icon"></i> | |
| <h3>Transmission Service</h3> | |
| <p>Complete transmission servicing and replacement for automatic and manual transmissions on all makes and models.</p> | |
| </div> | |
| <div class="service-card"> | |
| <i class="fas fa-car-crash service-icon"></i> | |
| <h3>Brake Service</h3> | |
| <p>Comprehensive brake inspections, repairs, and replacements to ensure your safety on the road.</p> | |
| </div> | |
| <div class="service-card"> | |
| <i class="fas fa-snowflake service-icon"></i> | |
| <h3>A/C Service & Repair</h3> | |
| <p>Keep cool with our air conditioning services, including R-12 and R-134a systems diagnostics and repairs.</p> | |
| </div> | |
| </div> | |
| <div style="text-align: center; margin-top: 3rem;"> | |
| <p style="font-size: 1.1rem; color: #666;">We service all makes and models including BMW, Audi, Honda, Toyota, Ford, GM, and more!</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Why Choose Us Section --> | |
| <section class="why-choose" id="why-choose"> | |
| <div class="container"> | |
| <h2 class="section-title">Why Choose Harold's?</h2> | |
| <div class="features-grid"> | |
| <div class="feature"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-award"></i> | |
| </div> | |
| <h3>BBB Accredited</h3> | |
| <p>Accredited since 2015, committed to upholding the highest standards of trust and integrity.</p> | |
| </div> | |
| <div class="feature"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-certificate"></i> | |
| </div> | |
| <h3>ASE Certified</h3> | |
| <p>Our ASE Master Certified technicians ensure superior quality and expertise on every repair.</p> | |
| </div> | |
| <div class="feature"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3>Warranty Protection</h3> | |
| <p>Every service comes with our 1 year, 12,000 mile warranty for your peace of mind.</p> | |
| </div> | |
| <div class="feature"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-tools"></i> | |
| </div> | |
| <h3>State-of-the-Art Facility</h3> | |
| <p>8,000 sq ft shop with 9 lifts and the latest diagnostic equipment for efficient service.</p> | |
| </div> | |
| </div> | |
| <div class="testimonials"> | |
| <h3 style="text-align: center; margin-bottom: 2rem;">What Our 732 Customers Say</h3> | |
| <div style="text-align: center; margin-bottom: 2rem;"> | |
| <p style="font-size: 1.2rem; color: var(--primary-red); font-weight: bold;">4.8/5 Stars • 88% Five-Star Reviews</p> | |
| <p style="color: #666;">Verified reviews from SureCritic</p> | |
| </div> | |
| <div class="testimonial"> | |
| <p class="testimonial-text">"Always kind and trustworthy. I'm always met by friendly and helpful staff. Great service and great customer care."</p> | |
| <p class="testimonial-author">- Jacque C., July 2025</p> | |
| </div> | |
| <div class="testimonial"> | |
| <p class="testimonial-text">"Fast service, fixed problem. They got my Dodge Ram running perfectly again. Professional and efficient service."</p> | |
| <p class="testimonial-author">- Dodge Ram Owner, January 2025</p> | |
| </div> | |
| <div class="testimonial"> | |
| <p class="testimonial-text">"Excellent company to work with. They take care of my RAM 1500 Sport and I trust them completely with all my vehicle needs."</p> | |
| <p class="testimonial-author">- RAM 1500 Owner, April 2024</p> | |
| </div> | |
| <div style="text-align: center; margin-top: 2rem;"> | |
| <a href="https://www.surecritic.com/reviews/harolds-quality-auto-repair-inc" target="_blank" class="btn btn-primary">Read All 732 Reviews</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section class="contact" id="contact"> | |
| <div class="container"> | |
| <h2 class="section-title">Get In Touch</h2> | |
| <div class="contact-content"> | |
| <div class="contact-info"> | |
| <h3>Visit Us Today</h3> | |
| <div class="contact-item"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| <div> | |
| <strong>Location:</strong><br> | |
| 675 Bartell Dr NW<br> | |
| Salem, OR 97304 | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <i class="fas fa-phone"></i> | |
| <div> | |
| <strong>Phone:</strong><br> | |
| <a href="tel:503-365-9702" style="color: var(--primary-red); text-decoration: none;">(503) 365-9702</a> | |
| </div> | |
| </div> | |
| <div class="contact-item"> | |
| <i class="fas fa-clock"></i> | |
| <div> | |
| <strong>Business Hours:</strong> | |
| <div class="hours-table"> | |
| <table> | |
| <tr> | |
| <td>Monday - Saturday</td> | |
| <td>7:00 AM - 6:00 PM</td> | |
| </tr> | |
| <tr> | |
| <td>Sunday</td> | |
| <td>Closed</td> | |
| </tr> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="contact-form"> | |
| <h3>Request a Quote</h3> | |
| <form id="contactForm"> | |
| <div class="form-group"> | |
| <label for="name">Your Name</label> | |
| <input type="text" id="name" name="name" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="phone">Phone Number</label> | |
| <input type="tel" id="phone" name="phone" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="email">Email Address</label> | |
| <input type="email" id="email" name="email" required> | |
| </div> | |
| <div class="form-group"> | |
| <label for="message">Tell us about your vehicle's needs</label> | |
| <textarea id="message" name="message" rows="4" required></textarea> | |
| </div> | |
| <button type="submit" class="btn btn-primary" style="width: 100%;">Send Message</button> | |
| </form> | |
| </div> | |
| </div> | |
| <div class="map-container"> | |
| <iframe | |
| src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2866.0831740565516!2d-123.08149868452!3d44.94091797909817!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54bffefc9e8d5a0b%3A0x4c0f8c8c8c8c8c8c!2s675%20Bartell%20Dr%20NW%2C%20Salem%2C%20OR%2097304!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus" | |
| width="100%" | |
| height="100%" | |
| style="border:0;" | |
| allowfullscreen="" | |
| loading="lazy"> | |
| </iframe> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container"> | |
| <p>© 2025 Harold's Quality Auto Repair Inc. All rights reserved.</p> | |
| <p>BBB Accredited Business | ASE Certified | NAPA AutoCare Center</p> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <a href="#home" class="back-to-top"> | |
| <i class="fas fa-arrow-up"></i> | |
| </a> | |
| <script> | |
| // Loader | |
| window.addEventListener('load', () => { | |
| setTimeout(() => { | |
| document.querySelector('.loader').classList.add('hidden'); | |
| }, 500); | |
| }); | |
| // Mobile Menu Toggle | |
| const mobileMenu = document.querySelector('.mobile-menu'); | |
| const navLinks = document.querySelector('.nav-links'); | |
| mobileMenu.addEventListener('click', () => { | |
| navLinks.classList.toggle('active'); | |
| const icon = mobileMenu.querySelector('i'); | |
| icon.classList.toggle('fa-bars'); | |
| icon.classList.toggle('fa-times'); | |
| }); | |
| // Close mobile menu when clicking on a link | |
| document.querySelectorAll('.nav-links a').forEach(link => { | |
| link.addEventListener('click', () => { | |
| navLinks.classList.remove('active'); | |
| const icon = mobileMenu.querySelector('i'); | |
| icon.classList.add('fa-bars'); | |
| icon.classList.remove('fa-times'); | |
| }); | |
| }); | |
| // Header Scroll Effect | |
| const header = document.querySelector('header'); | |
| let lastScroll = 0; | |
| window.addEventListener('scroll', () => { | |
| const currentScroll = window.pageYOffset; | |
| if (currentScroll > 100) { | |
| header.classList.add('scrolled'); | |
| } else { | |
| header.classList.remove('scrolled'); | |
| } | |
| lastScroll = currentScroll; | |
| }); | |
| // Smooth Scrolling for Navigation Links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| const headerOffset = 80; | |
| const elementPosition = target.getBoundingClientRect().top; | |
| const offsetPosition = elementPosition + window.pageYOffset - headerOffset; | |
| window.scrollTo({ | |
| top: offsetPosition, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Intersection Observer for Animations | |
| const sections = document.querySelectorAll('section'); | |
| const options = { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('visible'); | |
| } | |
| }); | |
| }, options); | |
| sections.forEach(section => { | |
| observer.observe(section); | |
| }); | |
| // Back to Top Button | |
| const backToTop = document.querySelector('.back-to-top'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTop.classList.add('visible'); | |
| } else { | |
| backToTop.classList.remove('visible'); | |
| } | |
| }); | |
| // Form Submission | |
| const contactForm = document.getElementById('contactForm'); | |
| contactForm.addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // Get form data | |
| const formData = new FormData(contactForm); | |
| const data = Object.fromEntries(formData); | |
| // Here you would normally send the data to a server | |
| // For now, we'll just show an alert | |
| alert('Thank you for your message! We will get back to you soon.'); | |
| // Reset form | |
| contactForm.reset(); | |
| }); | |
| // Add hover effect to service cards | |
| const serviceCards = document.querySelectorAll('.service-card'); | |
| serviceCards.forEach(card => { | |
| card.addEventListener('mouseenter', function() { | |
| this.style.transform = 'translateY(-10px) scale(1.02)'; | |
| }); | |
| card.addEventListener('mouseleave', function() { | |
| this.style.transform = 'translateY(0) scale(1)'; | |
| }); | |
| }); | |
| // Active navigation highlighting | |
| window.addEventListener('scroll', () => { | |
| let current = ''; | |
| const sections = document.querySelectorAll('section[id]'); | |
| sections.forEach(section => { | |
| const sectionTop = section.offsetTop; | |
| const sectionHeight = section.offsetHeight; | |
| if (pageYOffset >= sectionTop - 100) { | |
| current = section.getAttribute('id'); | |
| } | |
| }); | |
| document.querySelectorAll('.nav-links a').forEach(link => { | |
| link.classList.remove('active'); | |
| if (link.getAttribute('href').slice(1) === current) { | |
| link.style.color = 'var(--primary-red)'; | |
| } else { | |
| link.style.color = ''; | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment