<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us - Tyeesha</title>
    
    <style>
        /* ==========================================================================
           1. CSS RESET & BASE STYLES
           ========================================================================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: #f4f7f6;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        /* Container Layout (Split View) */
        .contact-container {
            background: #fff;
            width: 100%;
            max-width: 950px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            display: grid;
            grid-template-columns: 40% 60%;
            overflow: hidden;
        }

        /* ==========================================================================
           2. LEFT COLUMN - STORE INFO SIDEBAR
           ========================================================================== */
        .contact-info {
            background: #1a252f;
            color: #fff;
            padding: 40px;
            display: flex;
            flex-direction: column;
        }

        .contact-info h2 {
            font-size: 24px;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .contact-info .subtitle {
            color: #94a3b8;
            font-size: 14px;
            margin-bottom: 40px;
            line-height: 1.5;
        }

        .info-list {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .info-item h3 {
            font-size: 13px;
            color: #3498db;
            font-weight: 600;
            margin-bottom: 5px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .info-item p, .info-item a {
            color: #e2e8f0;
            font-size: 15px;
            line-height: 1.5;
            text-decoration: none;
        }

        .info-item a:hover {
            color: #3498db;
            text-decoration: underline;
        }

        /* ==========================================================================
           3. RIGHT COLUMN - CONTACT FORM
           ========================================================================== */
        .contact-form-wrapper {
            padding: 40px;
            background: #fff;
        }

        .contact-form-wrapper h2 {
            font-size: 24px;
            color: #1a252f;
            margin-bottom: 30px;
        }

        .input-group {
            margin-bottom: 20px;
            position: relative;
        }

        .input-group label {
            display: block;
            font-size: 14px;
            color: #64748b;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .input-group input, 
        .input-group textarea {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            font-size: 15px;
            color: #334155;
            transition: all 0.3s ease;
            outline: none;
        }

        .input-group input:focus, 
        .input-group textarea:focus {
            border-color: #3498db;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
        }

        /* Validation Error Styles */
        .error-msg {
            color: #e74c3c;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }

        .input-group.error input,
        .input-group.error textarea {
            border-color: #e74c3c;
            background: #fdf2f2;
        }

        .input-group.error .error-msg {
            display: block;
        }

        /* Submit Button */
        button[type="submit"] {
            background: #3498db;
            color: #fff;
            border: none;
            padding: 14px 28px;
            font-size: 16px;
            font-weight: 600;
            border-radius: 6px;
            cursor: pointer;
            display: block;
            transition: background 0.3s ease;
            width: 100%;
            text-align: center;
        }

        button[type="submit"]:hover {
            background: #2980b9;
        }

        /* Success Message Alert */
        .success-box {
            margin-top: 20px;
            background: #def7ec;
            color: #03543f;
            padding: 15px;
            border-radius: 6px;
            display: none;
            text-align: center;
            font-size: 15px;
            border: 1px solid #bdf2d5;
            font-weight: 500;
        }

        /* ==========================================================================
           4. RESPONSIVE MEDIA QUERIES (Mobile Friendly)
           ========================================================================== */
        @media (max-width: 768px) {
            .contact-container {
                grid-template-columns: 100%;
            }
            .contact-info {
                padding: 30px;
            }
            .contact-form-wrapper {
                padding: 30px;
            }
        }
    </style>
</head>
<body>

    <div class="contact-container">
        
        <div class="contact-info">
            <h2>Contact Info</h2>
            <p class="subtitle">Get in touch with us. We are always here to help you.</p>
            
            <div class="info-list">
                
                <div class="info-item">
                    <h3>Store</h3>
                    <p>Tyeesha</p>
                </div>

                
                <div class="info-item">
                    <h3>Email</h3>
                    <p><a href="mailto:support@tyeesha.com">support@tyeesha.com</a></p>
                </div>

                
                <div class="info-item">
                    <h3>Address</h3>
                    <p>14316 Oakridge Cir Apt 2005, Fort Worth, TX 76155, United States</p>
                </div>

                
                <div class="info-item">
                    <h3>Hours</h3>
                    <p>Mon - Fri, 8:00 AM - 5:00 PM EST</p>
                </div>
            </div>
        </div>

        
        <div class="contact-form-wrapper">
            <h2>Send a Message</h2>
            <form id="contactForm" novalidate>
                
                <div class="input-group">
                    <label for="name">Full Name</label>
                    <input type="text" id="name" placeholder="Enter your full name">
                    <span class="error-msg">Please enter your name</span>
                </div>

                
                <div class="input-group">
                    <label for="email">Email Address</label>
                    <input type="email" id="email" placeholder="Enter your email address">
                    <span class="error-msg">Please enter a valid email address</span>
                </div>

                
                <div class="input-group">
                    <label for="message">Message</label>
                    <textarea id="message" rows="5" placeholder="Write your message here..."></textarea>
                    <span class="error-msg">Please type your message</span>
                </div>

                
                <button type="submit" id="submitBtn">Send Message</button>
            </form>
            
            
            <div id="successMsg" class="success-box">
                Thank you! Your message has been sent successfully.
            </div>
        </div>
    </div>

    
    <script>
        document.getElementById('contactForm').addEventListener('submit', function(e) {
            e.preventDefault(); // Stop page refresh on form submission

            // Get form fields and success container
            const nameInput = document.getElementById('name');
            const emailInput = document.getElementById('email');
            const messageInput = document.getElementById('message');
            const successMsg = document.getElementById('successMsg');

            let isValid = true;

            // 1. Validate Full Name
            if (nameInput.value.trim() === '') {
                showError(nameInput);
                isValid = false;
            } else {
                removeError(nameInput);
            }

            // 2. Validate Email using Regex Pattern
            const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
            if (!emailPattern.test(emailInput.value.trim())) {
                showError(emailInput);
                isValid = false;
            } else {
                removeError(emailInput);
            }

            // 3. Validate Message Content
            if (messageInput.value.trim() === '') {
                showError(messageInput);
                isValid = false;
            } else {
                removeError(messageInput);
            }

            // If all fields are valid
            if (isValid) {
                // Display the green success alert box
                successMsg.style.display = 'block';
                
                // Clear the form fields inputs
                document.getElementById('contactForm').reset();

                // Auto-hide the success alert box after 5 seconds
                setTimeout(() => {
                    successMsg.style.display = 'none';
                }, 5000);
            }
        });

        // Helper function to inject error classes
        function showError(inputElement) {
            const parent = inputElement.parentElement;
            parent.classList.add('error');
        }

        // Helper function to remove error classes
        function removeError(inputElement) {
            const parent = inputElement.parentElement;
            parent.classList.remove('error');
        }
    </script>
</body>
</html>

Home

Shop real women's fashion categories with cleaner merchandising and policy-safe navigation defaults.

All Collections

Shop

Order Tracking

About Us

Contact Us

English

German

Australia

Spanish

Portuguese

Canada

French

Italian

Japanese

Korean

Vietnamese

Contact us for any questions, support, or inquiries. We are here to help with your shopping experience.

Tyeesha

Contact us

United States