<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us - Artboxmr</title>

<style>
:root{
    --td-primary:#000;
    --td-bg:#f6fffb;
    --td-card:#ffffff;
    --td-text:#1c1c1c;
    --td-border:rgba(0,104,122,0.15);
    --td-badge:#f0faff;
}

/* GLOBAL */
body{
    margin:0;
    font-family:'Inter',system-ui,sans-serif;
    background:var(--td-bg);
    color:var(--td-text);
}

/* PAGE WRAPPER */
.cs-contact-v2{
    max-width:1200px;
    margin:80px auto;
    padding:0 20px;
}

/* HEADER */
.cs-header-v2{
    text-align:left;
    margin-bottom:50px;
}

.cs-header-v2 h1{
    font-size:2.8rem;
    font-weight:900;
    color:var(--td-primary);
    margin-bottom:10px;
}

.cs-header-v2 p{
    max-width:650px;
    color:#555;
}

/* FLOAT LAYOUT */
.cs-layout-v2{
    display:flex;
    gap:30px;
    align-items:stretch;
}

/* LEFT SIDE STACK */
.cs-left-v2{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:15px;
}

/* INFO CARDS */
.cs-pill{
    background:var(--td-card);
    border:1px solid var(--td-border);
    border-radius:14px;
    padding:18px 20px;
    transition:0.3s;
}

.cs-pill:hover{
    transform:translateY(-3px);
    border-color:var(--td-primary);
}

.cs-pill label{
    font-size:11px;
    letter-spacing:2px;
    color:var(--td-primary);
    font-weight:800;
    text-transform:uppercase;
}

.cs-pill p{
    margin:6px 0 0;
    font-size:15px;
}

/* RIGHT FORM CARD */
.cs-right-v2{
    flex:1.2;
    background:var(--td-card);
    border:1px solid var(--td-border);
    border-radius:18px;
    padding:35px;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

/* FORM HEADER */
.cs-right-v2 h2{
    margin-top:0;
    color:var(--td-primary);
    font-size:22px;
    margin-bottom:20px;
}

/* FORM */
.cs-form-group{
    margin-bottom:18px;
}

.cs-form-group label{
    display:block;
    font-size:13px;
    font-weight:700;
    margin-bottom:6px;
}

.cs-input, .cs-textarea{
    width:100%;
    padding:12px 14px;
    border:1px solid #ddd;
    border-radius:10px;
    outline:none;
    transition:0.3s;
}

.cs-input:focus, .cs-textarea:focus{
    border-color:var(--td-primary);
    box-shadow:0 0 0 3px rgba(0,104,122,0.15);
}

.cs-textarea{
    height:130px;
    resize:none;
}

/* BUTTON */
.cs-btn{
    width:100%;
    padding:14px;
    border:none;
    border-radius:10px;
    background:var(--td-primary);
    color:#fff;
    font-weight:800;
    cursor:pointer;
    transition:0.3s;
}

.cs-btn:hover{
    background:#008aa3;
    transform:translateY(-2px);
}

/* SUPPORT BADGE */
.cs-badge{
    margin-top:20px;
    padding:12px;
    border-radius:12px;
    background:var(--td-badge);
    border-left:4px solid var(--td-primary);
    font-size:13px;
}

/* RESPONSIVE */
@media(max-width:900px){
    .cs-layout-v2{
        flex-direction:column;
    }
}
</style>
</head>

<body>

<section class="cs-contact-v2">

    
    <div class="cs-header-v2">
        <h1>Contact Us</h1>
        <p>
            We are always ready to support you with orders, shipping updates, product questions and general inquiries.
        </p>
    </div>

    
    <div class="cs-layout-v2">

        
        <div class="cs-right-v2">

            <h2>Send a Message</h2>

            <form id="csContactForm">

                <div class="cs-form-group">
                    <label>Name</label>
                    <input class="cs-input" type="text" placeholder="Your name">
                </div>

                <div class="cs-form-group">
                    <label>Email</label>
                    <input class="cs-input" type="email" placeholder="email@example.com">
                </div>

                <div class="cs-form-group">
                    <label>Order ID</label>
                    <input class="cs-input" type="text" placeholder="#12345">
                </div>

                <div class="cs-form-group">
                    <label>Message</label>
                    <textarea class="cs-textarea" placeholder="Write your message..."></textarea>
                </div>

                <button class="cs-btn" type="submit">Send Message</button>

            </form>

            <div class="cs-badge">
                💬 We usually respond within 24 hours (Mon–Fri)
            </div>

        </div> 
 
        
        <div class="cs-left-v2">

            <div class="cs-pill">
                <label>Company</label>
                <p>Cao Van Duoc</p>
            </div>

            <div class="cs-pill">
                <label>Email</label>
                <p>diepphuong1980@artboxmr.com</p>
            </div>

            <div class="cs-pill">
                <label>Website</label>
                <p>https://artboxmr.com/</p>
            </div>

            <div class="cs-pill">
                <label>Support Time</label>
                <p>Mon – Fri: 8:00 AM – 5:00 PM EST</p>
            </div>

        </div>

    </div>

</section>

<script>
document.getElementById('csContactForm').addEventListener('submit', function(e){
    e.preventDefault();
    alert("Message sent successfully!");
});
</script>

</body>
</html>

Home

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.

Artboxmr

Contact us

United States