Concept Agent
288 lines
11 KiB
HTML
288 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Contact | Lahr Carpet Cleaning</title>
|
|
<link rel="stylesheet" href="/assets/css/styles.css?v=5">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
<style>
|
|
.contact-page-section {
|
|
padding: 140px 0 80px;
|
|
}
|
|
.contact-page-wrapper {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1.4fr;
|
|
gap: 64px;
|
|
align-items: start;
|
|
}
|
|
@media (max-width: 900px) {
|
|
.contact-page-wrapper {
|
|
grid-template-columns: 1fr;
|
|
gap: 40px;
|
|
}
|
|
}
|
|
.contact-page-info {
|
|
padding-top: 8px;
|
|
}
|
|
.contact-page-info .section-label {
|
|
display: block;
|
|
margin-bottom: 12px;
|
|
}
|
|
.contact-page-info h1 {
|
|
font-size: clamp(2.5rem, 4.5vw, 4.5rem);
|
|
font-weight: 900;
|
|
letter-spacing: -0.045em;
|
|
line-height: 1.0;
|
|
margin-bottom: 20px;
|
|
}
|
|
.contact-page-info .intro-text {
|
|
color: rgba(255,255,255,0.75);
|
|
font-size: 1.05rem;
|
|
line-height: 1.8;
|
|
margin-bottom: 40px;
|
|
}
|
|
.contact-detail-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
margin-bottom: 28px;
|
|
}
|
|
.contact-detail-item .detail-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
background: rgba(255,255,255,0.07);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
color: var(--color-accent, #4fc3f7);
|
|
font-size: 1.1rem;
|
|
}
|
|
.contact-detail-item .detail-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 3px;
|
|
}
|
|
.contact-detail-item .detail-label {
|
|
font-size: 0.78rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: rgba(255,255,255,0.45);
|
|
font-weight: 600;
|
|
}
|
|
.contact-detail-item .detail-value {
|
|
font-size: 1rem;
|
|
color: rgba(255,255,255,0.9);
|
|
font-weight: 500;
|
|
}
|
|
.contact-detail-item .detail-value a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
.contact-detail-item .detail-value a:hover {
|
|
color: var(--color-accent, #4fc3f7);
|
|
}
|
|
.contact-social-row {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-top: 40px;
|
|
}
|
|
.contact-social-row a {
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 8px;
|
|
background: rgba(255,255,255,0.07);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: rgba(255,255,255,0.7);
|
|
font-size: 1rem;
|
|
text-decoration: none;
|
|
transition: background 0.2s, color 0.2s;
|
|
}
|
|
.contact-social-row a:hover {
|
|
background: rgba(255,255,255,0.14);
|
|
color: #fff;
|
|
}
|
|
.contact-page-form {
|
|
background: rgba(255,255,255,0.04);
|
|
border: 1px solid rgba(255,255,255,0.09);
|
|
border-radius: 12px;
|
|
padding: 40px;
|
|
}
|
|
.contact-page-form h2 {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
}
|
|
.contact-page-form .form-sub {
|
|
color: rgba(255,255,255,0.6);
|
|
font-size: 0.95rem;
|
|
margin-bottom: 32px;
|
|
}
|
|
.form-row-2col {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
@media (max-width: 600px) {
|
|
.form-row-2col {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.contact-page-form {
|
|
padding: 28px 20px;
|
|
}
|
|
}
|
|
.form-field {
|
|
margin-bottom: 16px;
|
|
}
|
|
.form-field label {
|
|
display: block;
|
|
font-size: 0.82rem;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.07em;
|
|
color: rgba(255,255,255,0.55);
|
|
margin-bottom: 6px;
|
|
}
|
|
.form-field input,
|
|
.form-field select,
|
|
.form-field textarea {
|
|
width: 100%;
|
|
background: rgba(255,255,255,0.06);
|
|
border: 1px solid rgba(255,255,255,0.12);
|
|
border-radius: 7px;
|
|
padding: 12px 14px;
|
|
color: rgba(255,255,255,0.9);
|
|
font-size: 0.97rem;
|
|
font-family: inherit;
|
|
transition: border-color 0.2s, background 0.2s;
|
|
box-sizing: border-box;
|
|
}
|
|
.form-field input:focus,
|
|
.form-field select:focus,
|
|
.form-field textarea:focus {
|
|
outline: none;
|
|
border-color: var(--color-accent, #4fc3f7);
|
|
background: rgba(255,255,255,0.09);
|
|
}
|
|
.form-field select option {
|
|
background: #1a1a2e;
|
|
color: #fff;
|
|
}
|
|
.form-field textarea {
|
|
resize: vertical;
|
|
min-height: 120px;
|
|
}
|
|
.btn-full {
|
|
width: 100%;
|
|
justify-content: center;
|
|
margin-top: 8px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="header" id="header">
|
|
<div class="container">
|
|
<div id="site-nav"></div>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="contact-page-section">
|
|
<div class="container">
|
|
<div class="contact-page-wrapper">
|
|
|
|
<div class="contact-page-info">
|
|
<span class="section-label">Get in Touch</span>
|
|
<h1>Contact <span class="text-accent">Lahr</span> Carpet Cleaning</h1>
|
|
<p class="intro-text">Your carpets should not have to wait. Call or fill out the form and we will get you scheduled.</p>
|
|
|
|
<div class="contact-detail-item">
|
|
<div class="detail-icon"><i class="fas fa-phone"></i></div>
|
|
<div class="detail-text">
|
|
<span class="detail-label">Phone</span>
|
|
<span class="detail-value"><a href="tel:315-719-1218">315-719-1218</a></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-detail-item">
|
|
<div class="detail-icon"><i class="fas fa-envelope"></i></div>
|
|
<div class="detail-text">
|
|
<span class="detail-label">Email</span>
|
|
<span class="detail-value"><a href="mailto:lahrcarpet@gmail.com">lahrcarpet@gmail.com</a></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-detail-item">
|
|
<div class="detail-icon"><i class="fas fa-location-dot"></i></div>
|
|
<div class="detail-text">
|
|
<span class="detail-label">Address</span>
|
|
<span class="detail-value">1076 Waterloo/Geneva Road<br>Waterloo, NY</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-detail-item">
|
|
<div class="detail-icon"><i class="fas fa-map-marker-alt"></i></div>
|
|
<div class="detail-text">
|
|
<span class="detail-label">Service Area</span>
|
|
<span class="detail-value">Waterloo, Seneca Falls, Geneva, Canandaigua, Penn Yan and surrounding Finger Lakes communities</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-social-row">
|
|
<a href="https://www.facebook.com/profile.php?id=61559554960851" aria-label="Facebook" target="_blank" rel="noopener"><i class="fab fa-facebook-f"></i></a>
|
|
<a href="https://www.instagram.com/lahrautospa/" aria-label="Instagram" target="_blank" rel="noopener"><i class="fab fa-instagram"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-page-form">
|
|
<h2>Book Your Cleaning</h2>
|
|
<p class="form-sub">Fill out the form and we will be in touch to confirm your appointment.</p>
|
|
<form id="contactForm" action="#" method="POST">
|
|
<div class="form-row-2col">
|
|
<div class="form-field">
|
|
<label for="contact-name">Name</label>
|
|
<input type="text" id="contact-name" name="name" placeholder="Your full name" required>
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="contact-phone">Phone</label>
|
|
<input type="tel" id="contact-phone" name="phone" placeholder="Your phone number" required>
|
|
</div>
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="contact-email">Email</label>
|
|
<input type="email" id="contact-email" name="email" placeholder="Your email address" required>
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="contact-service">Service</label>
|
|
<select id="contact-service" name="service" required>
|
|
<option value="">Select a service</option>
|
|
<option value="carpet">Carpet Cleaning</option>
|
|
<option value="stairs">Stairs</option>
|
|
<option value="upholstery">Upholstery</option>
|
|
<option value="floors">Floor Cleaning</option>
|
|
<option value="area-rugs">Area Rug</option>
|
|
<option value="commercial">Commercial</option>
|
|
<option value="add-ons">Add-Ons</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-field">
|
|
<label for="contact-message">Message</label>
|
|
<textarea id="contact-message" name="message" placeholder="Tell us about your space. Number of rooms, type of flooring, any specific concerns."></textarea>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary btn-full">Send Message</button>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div id="site-footer"></div>
|
|
<script src="/assets/js/components.js"></script>
|
|
<script src="/assets/js/main.js"></script>
|
|
</body>
|
|
</html>
|