<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us | Style & Wear Co.</title>
    <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
    
    <style>
        :root {
            --bg-body: #f4f4f2;
            --midnight: #0a192f;
            --silver: #8892b0;
            --accent-blue: #004e92;
            --white: #ffffff;
            --text-main: #2d2d2d;
            --text-muted: #575757;
            --input-bg: #f9f9f9;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-body);
            color: var(--text-main);
            line-height: 1.8;
            padding-bottom: 80px;
        }

        /* Hero Header */
        header {
            background-color: var(--midnight);
            color: var(--white);
            padding: 100px 20px;
            text-align: center;
            clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
        }

        header h1 {
            font-family: 'Bodoni Moda', serif;
            font-size: clamp(2rem, 5vw, 3.2rem);
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        header p {
            font-weight: 300;
            letter-spacing: 1px;
            max-width: 600px;
            margin: 0 auto;
            opacity: 0.8;
            font-size: 15px;
        }

        /* Layout Container */
        .contact-wrapper {
            max-width: 1400px;
            margin: 40px auto 0;
            display: grid;
            grid-template-columns: 1fr 1.5fr;
            background: var(--white);
            box-shadow: 0 40px 100px rgba(0,0,0,0.06);
            border-radius: 2px;
            overflow: hidden;
        }

        /* Left Side: Info */
        .contact-info {
            background-color: var(--midnight);
            color: var(--white);
            padding: 60px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .contact-info h2 {
            font-family: 'Bodoni Moda', serif;
            font-size: 28px;
            margin-bottom: 30px;
        }

        .info-item {
            margin-bottom: 25px;
        }

        .info-item span {
            display: block;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--silver);
            margin-bottom: 5px;
        }

        .info-item p {
            font-size: 16px;
            font-weight: 300;
        }

        /* Right Side: Form */
        .contact-form-container {
            padding: 60px;
            background: var(--white);
        }

        .contact-form-container h3 {
            font-family: 'Bodoni Moda', serif;
            font-size: 24px;
            color: var(--midnight);
            margin-bottom: 10px;
        }

        .contact-form-container p {
            font-size: 14px;
            color: var(--text-muted);
            margin-bottom: 30px;
        }

        /* Form Styling */
        form {
            display: grid;
            gap: 20px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
        }

        label {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--midnight);
        }

        input, textarea, select {
            width: 100%;
            padding: 15px;
            border: 1px solid #eee;
            background: var(--input-bg);
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            transition: 0.3s;
        }

        input:focus, textarea:focus {
            outline: none;
            border-color: var(--accent-blue);
            background: #fff;
        }

        textarea {
            resize: vertical;
            min-height: 120px;
        }

        .btn-submit {
            background-color: var(--midnight);
            color: var(--white);
            padding: 18px 30px;
            border: none;
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 2px;
            cursor: pointer;
            transition: 0.4s;
            margin-top: 10px;
        }

        .btn-submit:hover {
            background-color: var(--accent-blue);
            transform: translateY(-2px);
        }

        /* Mobile */
        @media (max-width: 900px) {
            .contact-wrapper {
                grid-template-columns: 1fr;
                margin-top: 0;
            }
            .contact-info, .contact-form-container {
                padding: 40px 30px;
            }
        }
    </style>
</head>
<body>

 

    <main class="contact-wrapper">
        
        <section class="contact-info">
            <h2>Our Studio</h2>
            
            <div class="info-item">
                <span>Email Concierge</span>
                <p>support@styleandwearco.shop</p>
            </div>

            <div class="info-item">
                <span>Location</span>
                <p>1055 Shadowmoss Dr, Winter Garden,<br>FL 34787, United States</p>
            </div>

            <div class="info-item">
                <span>Business Hours</span>
                <p>Mon - Fri: 9:00 AM - 5:00 PM EST</p>
            </div>

            <div class="info-item">
                <span>Response Time</span>
                <p>8:00 AM – 7:00 PM (EST) ( Mon-Fri )</p>
            </div>
        </section>

        <section class="contact-form-container">
            <h3>Send a Message</h3>
            <p>Fill out the form below and we’ll reach out to you shortly.</p>

            <form action="#" method="POST">
                <div class="form-group">
                    <label for="name">Full Name</label>
                    <input type="text" id="name" name="name" placeholder="E.g. Alexander Knight" required>
                </div>

                <div class="form-group">
                    <label for="email">Email Address</label>
                    <input type="email" id="email" name="email" placeholder="email@example.com" required>
                </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 Support</option>
                        <option value="return">Return Request</option>
                        <option value="collaboration">Collaboration</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="message">Your Message</label>
                    <textarea id="message" name="message" placeholder="How can we help you today?" required></textarea>
                </div>

                <button type="submit" class="btn-submit">Submit Message</button>
            </form>
        </section>

    </main>

    <footer style="text-align: center; margin-top: 50px; color: var(--silver); font-size: 12px; letter-spacing: 1px;">
        © 2026 Style & Wear Co. | Empowering Your Style.
    </footer>

</body>
</html>

Home

Blazers

Denim Jackets

Shop

About Us

Contact

Order Tracking

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.

Styleandwearco

Contact us

United States