contact.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 Form</title>
    
    <!-- External Stylesheets -->
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./contact.css">
    
    <!-- Icons and Fonts -->
    <link rel="icon" href="/icons/airplane.svg" />
    <link rel="icon" href="https://img.icons8.com/?size=100&id=I24lanX6Nq71&format=png&color=000000">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

    <!-- Internal Styles -->
    <style>
        /* General styling */
        .card {
            width: 80%;
            margin: 30px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            background-color: #fff;
        }

        .card-header h2 {
            color: #fff;
            padding: 15px;
            text-align: center;
            background-color: #333;
            border-radius: 6px;
            text-shadow: 2px 2px 10px gray;
        }

        .card-body {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 20px;
        }

        .form-section {
            flex: 1;
            min-width: 45%;
            color: #121111;
        }

        .image-section img {
            max-width: 100%;
            height: auto;
            max-height: 500px;
        }

        .form-group {
            margin-bottom: 20px;
            color: #121111;
        }

        label {
            display: block;
            margin-bottom: 10px;
            color: #1e1e1e;
        }

        input, textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        textarea {
            height: 120px;
        }

        button[type="submit"] {
            background-color: rgb(27, 27, 27);
            color: #fff;
            padding: 12px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1.5rem;
        }

        button[type="submit"]:hover {
            background-color: black;
        }

        .error-message {
            color: red;
            font-size: 0.9em;
            display: none;
        }

        /* Tooltip */
        .tooltip {
            visibility: hidden;
            background-color: black;
            color: #fff;
            width: 200px;
            text-align: center;
            padding: 5px;
            border-radius: 5px;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 12px;
        }

        .form-group:hover .tooltip {
            visibility: visible;
            opacity: 1;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .card-body {
                flex-direction: column;
            }
            .form-section, .image-section {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <!-- Header Section -->
    <header style="background-color: black; height: 85px">
        <nav style="padding: 5px; width: 90%">
            <div class="logo">
                <img src="img/logo.png" id="logo-web" alt="BuddyTrail Logo" />
                <h1 id="logo"><a href="#home">BuddyTrail</a></h1>
            </div>

            <!-- Hamburger Menu for Mobile -->
            <button class="hamburger" id="hamburger">☰</button>

            <!-- Navigation Links -->
            <ul id="nav-list">
                <span class="dropdown-close-btn" id="closeBtn">×</span>
                <li><a href="./index.html" class="navhover">Home</a></li>
                <li><a href="team.html" class="navhover">Team</a></li>
                <li><a href="index.html#deals" class="navhover">Exclusive Deals</a></li>
                <li><a href="index.html#benefits" class="navhover">Benefits</a></li>
                <li><a href="about.html" class="navhover">About</a></li>
                <li><a href="index.html#itineraries" class="navhover">Travel Itineraries</a></li>
                <li><a href="./contact.html" class="navhover">Contact</a></li>
                <li><a href="index.html#reviews" class="navhover">Reviews</a></li>
                <li><a href="auth.html" class="navhover">Sign In</a></li>
            </ul>
        </nav>
    </header>

    <!-- Contact Us Section -->
    <section id="contactus">
        <div class="card">
            <div class="card-header">
                <h2>Contact Us</h2>
            </div>
            <div class="card-body">
                <div class="form-section">
                    <div class="form-group">
                        <label for="message">Message</label>
                        <textarea id="message" name="message" placeholder="Your message" required></textarea>
                        <div class="tooltip">Feel free to describe your message in detail.</div>
                        <span class="error-message" id="messageError"></span>
                    </div>
                    <button type="submit">Send</button>
                </div>
                <div class="image-section">
                    <img src="./image.png" alt="Contact Image" />
                </div>
            </div>
        </div>
    </section>

    <!-- Footer Section -->
    <footer id="footer">
        <div class="footer-container">
            <!-- About Us -->
            <div class="footer-column">
                <h3>About Us</h3>
                <p>Discover and plan affordable trips with BuddyTrail's travel companion tools.</p>
            </div>

            <!-- Newsletter -->
            <div class="footer-column newsletter">
                <h3>Subscribe to Our Newsletter</h3>
                <form id="newsletter-form">
                    <input type="email" id="email" placeholder="Enter your email" required />
                    <button type="submit">Subscribe</button>
                    <p id="subscription-message"></p>
                </form>
            </div>

            <!-- Quick Links -->
            <div class="footer-column">
                <h3>Quick Links</h3>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="faq.html">FAQs</a></li>
                    <li><a href="servicespage.html">Services</a></li>
                    <li><a href="contact.html">Contact</a></li>
                    <li><a href="team.html">Team</a></li>
                    <li><a href="contributor/contributor.html">Our Contributor</a></li>
                </ul>
            </div>

            <!-- Legal Links -->
            <div class="footer-column">
                <h3>Legal Links</h3>
                <ul>
                    <li><a href="terms_of_service.html">Terms of Service</a></li>
                    <li><a href="privacypolicy.html">Privacy Policy</a></li>
                    <li><a href="copyright.html">Copyright Notice</a></li>
                    <li><a href="disclaimer.html">Disclaimer</a></li>
                    <li><a href="cookie_policy.html">Cookie Policy</a></li>
                </ul>
            </div>

            <!-- Contact Info -->
            <div class="footer-column">
                <h3>Contact Us</h3>
                <p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
                <p>Phone: <a href="tel:+1234567890">+123 456 7890</a></p>
            </div>
        </div>
    </footer>
</body>
</html>