BelleBoutique Contact Page | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us | [Boutique Name]</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  
</head>
<body>
    
    <header>
        <div class="container header-container">
            <a href="index.html" class="logo">Belle<span>Boutique</span></a>
            <nav>
                
            </nav>
        </div>
    </header>
    
    
    <section class="contact-hero">
        <div class="hero-content">
            <h1>Get In Touch</h1>
            <p>We'd love to hear from you</p>
        </div>
    </section>
    
    
    <div class="container">
        <div class="contact-content">
            
            <section class="contact-form">
                <h2>Send Us a Message</h2>
                <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="email">Email Address</label>
                        <input type="email" id="email" name="email" required>
                    </div>
                    
                    <div class="form-group">
                        <label for="phone">Phone Number (Optional)</label>
                        <input type="tel" id="phone" name="phone">
                    </div>
                    
                    <div class="form-group">
                        <label for="subject">Subject</label>
                        <select id="subject" name="subject">
                            <option value="general">General Inquiry</option>
                            <option value="order">Order Inquiry</option>
                            <option value="appointment">Personal Styling Appointment</option>
                            <option value="feedback">Feedback</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="message">Your Message</label>
                        <textarea id="message" name="message" required></textarea>
                    </div>
                    
                    <button type="submit" class="btn">Send Message</button>
                </form>
            </section>
            
            
            <section class="contact-info">
                <div class="info-box">
                    <h2>Contact Information</h2>
                    <div class="contact-details">
                        <div class="detail-item">
                            <div class="detail-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div class="detail-text">
                                <h3>Our Boutique</h3>
                                <p>123 Fashion Avenue<br>New York, NY 10001</p>
                            </div>
                        </div>
                        
                        <div class="detail-item">
                            <div class="detail-icon">
                                <i class="fas fa-phone-alt"></i>
                            </div>
                            <div class="detail-text">
                                <h3>Phone</h3>
                                <p>(212) 555-1234</p>
                            </div>
                        </div>
                        
                        <div class="detail-item">
                            <div class="detail-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div class="detail-text">
                                <h3>Email</h3>
                                <p>hello@belleboutique.com</p>
                            </div>
                        </div>
                    </div>
                    
                    <h3 style="margin-top: 20px;">Follow Us</h3>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-pinterest-p"></i></a>
                        <a href="#"><i class="fab fa-twitter"></i></a>
                    </div>
                </div>
                
                <div class="map-container">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215256751027!2d-73.9878449241646!3d40.74844097138948!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a9b3117469%3A0xd134e199a405a163!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1620000000000!5m2!1sen!2sus" allowfullscreen="" loading="lazy"></iframe>
                </div>
            </section>
        </div>
        
        
        <section class="hours-section">
            <h2>Our Hours</h2>
            <div class="hours-container">
                <div class="hours-card">
                    <h3>Store Hours</h3>
                    <ul class="hours-list">
                        <li><span class="day">Monday - Thursday</span> <span>10:00 AM - 7:00 PM</span></li>
                        <li><span class="day">Friday - Saturday</span> <span>10:00 AM - 8:00 PM</span></li>
                        <li><span class="day">Sunday</span> <span>11:00 AM - 6:00 PM</span></li>
                    </ul>
                </div>
                
                <div class="hours-card">
                    <h3>Personal Styling Appointments</h3>
                    <ul class="hours-list">
                        <li><span class="day">Monday - Friday</span> <span>By Appointment</span></li>
                        <li><span class="day">Saturday</span> <span>Limited Availability</span></li>
                        <li><span class="day">Sunday</span> <span>Closed</span></li>
                    </ul>
                </div>
            </div>
        </section>
        
        
        <section class="faq-section">
            <h2>Frequently Asked Questions</h2>
            
            <div class="faq-item">
                <div class="faq-question">
                    <span>What is your return policy?</span>
                    <i class="fas fa-chevron-down faq-toggle"></i>
                </div>
                <div class="faq-answer">
                    <p>We accept returns within 14 days of purchase with the original receipt. Items must be unworn, with tags attached, and in original condition. Final sale items cannot be returned.</p>
                </div>
            </div>
            
            <div class="faq-item">
                <div class="faq-question">
                    <span>Do you offer gift wrapping?</span>
                    <i class="fas fa-chevron-down faq-toggle"></i>
                </div>
                <div class="faq-answer">
                    <p>Yes! We offer complimentary gift wrapping with any purchase. Simply let us know at checkout if you'd like your item gift wrapped, and we'll include a handwritten note if desired.</p>
                </div>
            </div>
            
            <div class="faq-item">
                <div class="faq-question">
                    <span>How do I schedule a personal styling appointment?</span>
                    <i class="fas fa-chevron-down faq-toggle"></i>
                </div>
                <div class="faq-answer">
                    <p>You can schedule a personal styling appointment by calling us at (212) 555-1234 or by using the contact form above. Our stylists are available Monday through Friday by appointment.</p>
                </div>
            </div>
            
            <div class="faq-item">
                <div class="faq-question">
                    <span>Do you ship internationally?</span>
                    <i class="fas fa-chevron-down faq-toggle"></i>
                </div>
                <div class="faq-answer">
                    <p>Yes, we ship to most countries worldwide. Shipping costs and delivery times vary by destination. Please contact us for specific international shipping inquiries.</p>
                </div>
            </div>
        </section>
    </div>
    
    
    <footer>
        <div class="container footer-content">
            <a href="index.html" class="footer-logo">Belle<span>Boutique</span></a>
            <div class="footer-links">
                <a href="#">Home</a>
                <a href="#">Shop</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
                <a href="#">Privacy Policy</a>
            </div>
            <p class="copyright">© 2023 Belle Boutique. All rights reserved.</p>
        </div>
    </footer>

</body>
</html>

CSS

/* Global Styles */
        :root {
            --primary-color: #d4af8f; /* Soft gold/beige */
            --secondary-color: #7a6a5f; /* Muted taupe */
            --accent-color: #c0a092; /* Dusty rose */
            --text-color: #333;
            --light-bg: #f9f5f1;
            --white: #ffffff;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Playfair Display', serif;
        }
        
        body {
            background-color: var(--light-bg);
            color: var(--text-color);
            line-height: 1.6;
        }
        
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        h1, h2, h3 {
            font-weight: 500;
            color: var(--secondary-color);
        }
        
        h1 {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
            position: relative;
            display: inline-block;
        }
        
        h1:after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 60px;
            height: 3px;
            background-color: var(--primary-color);
        }
        
        h2 {
            font-size: 1.8rem;
            margin-bottom: 1rem;
        }
        
        p {
            margin-bottom: 1rem;
        }
        
        /* Header */
        header {
            background-color: var(--white);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 20px 0;
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--secondary-color);
            text-decoration: none;
        }
        
        .logo span {
            color: var(--primary-color);
        }
        
        /* Hero Section */
        .contact-hero {
            background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://images.unsplash.com/photo-1467043198406-dc953a3defa0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
            background-size: cover;
            background-position: center;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            margin-bottom: 50px;
        }
        
        .hero-content h1 {
            color: white;
            font-size: 3rem;
        }
        
        .hero-content h1:after {
            background-color: white;
            left: 50%;
            transform: translateX(-50%);
        }
        
        /* Contact Content */
        .contact-content {
            display: flex;
            flex-wrap: wrap;
            gap: 40px;
            margin-bottom: 60px;
        }
        
        .contact-form {
            flex: 1;
            min-width: 300px;
            background-color: var(--white);
            padding: 40px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        input, textarea, select {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 1rem;
            transition: border 0.3s;
        }
        
        input:focus, textarea:focus, select:focus {
            outline: none;
            border-color: var(--primary-color);
        }
        
        textarea {
            min-height: 150px;
            resize: vertical;
        }
        
        .btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 30px;
            font-size: 1rem;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.3s;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .btn:hover {
            background-color: var(--secondary-color);
        }
        
        .contact-info {
            flex: 1;
            min-width: 300px;
        }
        
        .info-box {
            background-color: var(--white);
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            margin-bottom: 30px;
        }
        
        .contact-details {
            margin-top: 20px;
        }
        
        .detail-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 20px;
        }
        
        .detail-icon {
            color: var(--primary-color);
            font-size: 1.2rem;
            margin-right: 15px;
            margin-top: 3px;
        }
        
        .detail-text h3 {
            margin-bottom: 5px;
        }
        
        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 20px;
        }
        
        .social-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background-color: var(--primary-color);
            color: white;
            border-radius: 50%;
            transition: background-color 0.3s;
        }
        
        .social-links a:hover {
            background-color: var(--secondary-color);
        }
        
        .map-container {
            height: 300px;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        
        .map-container iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        
        /* Hours Section */
        .hours-section {
            margin-bottom: 60px;
        }
        
        .hours-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }
        
        .hours-card {
            flex: 1;
            min-width: 250px;
            background-color: var(--white);
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        }
        
        .hours-list {
            list-style: none;
            margin-top: 20px;
        }
        
        .hours-list li {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }
        
        .hours-list li:last-child {
            border-bottom: none;
        }
        
        .day {
            font-weight: 500;
        }
        
        /* FAQ Section */
        .faq-section {
            margin-bottom: 60px;
        }
        
        .faq-item {
            background-color: var(--white);
            margin-bottom: 15px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.05);
            overflow: hidden;
        }
        
        .faq-question {
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-weight: 500;
        }
        
        .faq-question:hover {
            background-color: #f5f5f5;
        }
        
        .faq-answer {
            padding: 0 20px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, padding 0.3s ease;
        }
        
        .faq-item.active .faq-answer {
            padding: 0 20px 20px;
            max-height: 500px;
        }
        
        .faq-toggle {
            transition: transform 0.3s;
        }
        
        .faq-item.active .faq-toggle {
            transform: rotate(180deg);
        }
        
        /* Footer */
        footer {
            background-color: var(--secondary-color);
            color: white;
            padding: 40px 0;
            text-align: center;
        }
        
        .footer-content {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .footer-logo {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 20px;
            color: white;
        }
        
        .footer-logo span {
            color: var(--primary-color);
        }
        
        .footer-links {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .footer-links a {
            color: white;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-links a:hover {
            color: var(--primary-color);
        }
        
        .copyright {
            font-size: 0.9rem;
            opacity: 0.8;
        }
        
        /* Responsive Styles */
        @media (max-width: 768px) {
            h1 {
                font-size: 2rem;
            }
            
            h2 {
                font-size: 1.5rem;
            }
            
            .contact-hero {
                height: 250px;
            }
            
            .hero-content h1 {
                font-size: 2.2rem;
            }
            
            .contact-form, .contact-info {
                min-width: 100%;
            }
            
            .hours-card {
                min-width: 100%;
            }
        }
        
        @media (max-width: 480px) {
            .header-container {
                flex-direction: column;
                gap: 15px;
            }
            
            .hero-content h1 {
                font-size: 1.8rem;
            }
            
            .contact-form {
                padding: 25px;
            }
            
            .info-box {
                padding: 25px;
            }
            
            .footer-links {
                flex-direction: column;
                gap: 10px;
            }
        }

JavaScript

BelleBoutique Contact Page Preview

Download Options