Site Builder

Editing: Arcadia.html

writable 0666

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arcadia Premiere Membership Invitation</title>
    <style>
        :root {
            --navy: #20304b;
            --gold: #e7c873;
            --white: #fff;
            --gray: #f5f6fa;
            --accent: #394f6e;
        }

body {
            background: var(--navy);
            min-height: 100vh;
            font-family: 'Segoe UI', Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .arcadia-card {
            background: var(--white);
            border-radius: 18px;
            box-shadow: 0 8px 32px rgba(32,48,75,0.16);
            border: 3px solid var(--gold);
            max-width: 525px;
            width: 100%;
            margin: 40px 0;
            padding: 0 0 32px 0;
        }
        .arcadia-header {
            background: linear-gradient(135deg, var(--navy) 80%, var(--gold) 100%);
            border-radius: 15px 15px 0 0;
            padding: 36px 0 20px 0;
            text-align: center;
            color: var(--white);
            position: relative;
            border-bottom: 4px solid var(--gold);
        }
        .arcadia-header .arcadia-logo {
            font-size: 2.7rem;
            font-weight: 900;
            letter-spacing: 0.15em;
            text-transform: uppercase;
        }
        .arcadia-header .arcadia-by {
            font-size: 0.9rem;
            margin-top: 6px;
            letter-spacing: 0.12em;
            font-weight: 400;
        }
        .arcadia-header .arcadia-invite {
            font-size: 1.2rem;
            letter-spacing: 0.06em;
            margin-top: 13px;
            font-weight: 500;
            color: var(--gold);
        }
        form {
            padding: 30px 28px 0 28px;
        }
        h2 {
            text-align: center;
            color: var(--navy);
            text-transform: uppercase;
            font-weight: 800;
            font-size: 1.3rem;
            margin-bottom: 25px;
            letter-spacing: 0.08em;
        }
        .section-title {
            font-size: 1.05rem;
            color: var(--navy);
            font-weight: 700;
            margin: 22px 0 11px 0;
            border-bottom: 1px solid var(--accent);
            padding-bottom: 6px;
            letter-spacing: 0.03em;
        }
        .form-row {
            display: flex;
            gap: 13px;
        }
        .form-group {
            flex: 1 1 0;
        }
        label {
            display: block;
            font-size: 0.98rem;
            color: var(--accent);
            margin-bottom: 5px;
            margin-top: 13px;
            font-weight: 500;
        }
        input[type="text"],
        input[type="email"],
        input[type="date"] {
            width: 100%;
            padding: 9px 11px;
            border: 1.6px solid var(--accent);
            border-radius: 7px;
            background: var(--gray);
            font-size: 1rem;
            margin-bottom: 4px;
            transition: border-color 0.2s;
        }
        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="date"]:focus {
            border-color: var(--gold);
            outline: none;
        }
        .qualifications-list {
            margin: 0;
            padding: 0 0 0 18px;
            list-style: none;
        }
        .qualifications-list li {
            padding: 7px 0 3px 0;
            color: var(--navy);
            font-size: 0.99rem;
        }
        .qualifications-list input[type="checkbox"] {
            accent-color: var(--gold);
            margin-right: 9px;
        }
        .preview-details label {
            font-size: 0.97rem;
            color: var(--navy);
            font-weight: 500;
            margin-top: 10px;
        }
        .highlight {
            color: var(--gold);
            font-size: 1.08rem;
            font-weight: bold;
            margin-top: 10px;
            letter-spacing: 0.04em;
        }
        textarea {
            width: 100%;
            min-height: 65px;
            border: 1.4px solid var(--accent);
            border-radius: 6px;
            background: var(--gray);
            padding: 7px;
            margin: 7px 0 10px 0;
            font-size: 0.98rem;
        }
        .deposit-row {
            display: flex;
            align-items: center;
            gap: 15px;
            margin: 7px 0 12px 0;
        }
        .deposit-row label {
            margin: 0;
            color: var(--navy);
            font-size: 0.98rem;
        }
        .checkbox-row {
            display: flex;
            gap: 18px;
            margin: 0 0 13px 0;
        }
        .checkbox-row label {
            font-size: 0.97rem;
            color: var(--accent);
            margin: 0;
            font-weight: 400;
        }
        .signature-row {
            margin: 14px 0 5px 0;
        }
        .signature-row label {
            font-size: 0.97rem;
            color: var(--navy);
            font-weight: 500;
        }
        .note {
            font-size: 0.86rem;
            color: #9e945e;
            display: block;
            margin-top: 8px;
        }
        button[type="submit"] {
            display: block;
            width: 100%;
            background: var(--gold);
            color: var(--navy);
            border: none;
            border-radius: 8px;
            font-size: 1.16rem;
            font-weight: 700;
            letter-spacing: 0.03em;
            padding: 14px 0;
            margin-top: 23px;
            cursor: pointer;
            transition: background 0.18s;
        }
        button[type="submit"]:hover {
            background: #ffe7a7;
        }
        @media (max-width: 600px) {
            .arcadia-card {
                max-width: 97vw;
                padding: 0 0 14px 0;
            }
            form {
                padding: 18px 7vw 0 7vw;
            }
        }
    </style>
</head>
<body>
    <div class="arcadia-card">
        <div class="arcadia-header">
            <div class="arcadia-logo">ARCADIA</div>
            <div class="arcadia-by">BY NEW HOTEL COLLECTION</div>
            <div class="arcadia-invite">INVITATION</div>
        </div>
        <form action="mailto:vacations@bestdealon.com" method="post" enctype="text/plain">
            <h2>Premiere Membership Invitation</h2>

<div class="section-title">Guest Information</div>
            <div class="form-row">
                <div class="form-group">
                    <label>Guest One - First Name:</label>
                    <input type="text" name="guest1_first_name" required>
                </div>
                <div class="form-group">
                    <label>Last Name:</label>
                    <input type="text" name="guest1_last_name" required>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label>Phone:</label>
                    <input type="text" name="guest1_phone" required>
                </div>
                <div class="form-group">
                    <label>Email:</label>
                    <input type="email" name="guest1_email" required>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label>Guest Two - First Name:</label>
                    <input type="text" name="guest2_first_name">
                </div>
                <div class="form-group">
                    <label>Last Name:</label>
                    <input type="text" name="guest2_last_name">
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label>Phone:</label>
                    <input type="text" name="guest2_phone">
                </div>
                <div class="form-group">
                    <label>Email:</label>
                    <input type="email" name="guest2_email">
                </div>
            </div>

<div class="section-title">Qualifications</div>
            <ul class="qualifications-list">
                <li><label><input type="checkbox" name="age_check" required> Guest must both be 25 - 75 years of age.</label></li>
                <li><label><input type="checkbox" name="employment_income" required> Guests must be currently employed and have a combined income of at least $50,000.</label></li>
                <li><label><input type="checkbox" name="id_card" required> Guests must show Driver's License and major credit card (for ID only).</label></li>
                <li><label><input type="checkbox" name="cohabit_tour" required> If married or cohabitating, must tour together. Cohabs show proof of same address.</label></li>
                <li><label><input type="checkbox" name="no_recent" required> Cannot have attended an Arcadia presentation in the last 12 months.</label></li>
                <li><label><input type="checkbox" name="permission" required> Grant Arcadia permission to contact via text, phone, or email to confirm appointment.</label></li>
                <li><label><input type="checkbox" name="no_bankruptcy" required> Must not currently be in an active Bankruptcy.</label></li>
                <li><label><input type="checkbox" name="responsible_fees" required> Responsible for any room tax, resort fee, airline tax, or port fee for below gifts.</label></li>
            </ul>

<div class="section-title">Preview Details</div>
            <div class="preview-details">
                <label>Preview Date:
                    <input type="date" name="preview_date" required>
                </label>
                <label>Preview Time:
                    <input type="text" name="preview_time" placeholder="e.g. 11:00 AM">
                </label>
                <label>Invited Area:
                    <input type="text" name="invited_area">
                </label>
                <label>Invited By:
                    <input type="text" name="invited_by">
                </label>
            </div>
            <div class="highlight">THIS IS NOT A TIMESHARE PRESENTATION</div>
            <div class="highlight" style="font-size: 0.98rem;">THERE IS NO OBLIGATION TO PURCHASE!</div>

<div class="section-title">Gifts for Your Time</div>
            <label>
                <textarea name="gifts" placeholder="List your eligible gifts here..."></textarea>
            </label>
            <div class="deposit-row">
                <label>Deposit Amount:
                    <input type="text" name="deposit_amount" placeholder="$ Amount">
                </label>
            </div>
            <div class="checkbox-row">
                <label><input type="checkbox" name="refundable"> Refundable Deposit</label>
                <label><input type="checkbox" name="non_refundable"> Non-Refundable</label>
            </div>
            <div class="signature-row">
                <label>Guest Signature:
                    <input type="text" name="signature">
                </label>
            </div>
            <span class="note">Offer not valid with any other promotion written or implied. A rain check or substitute gift of equal or greater value will be provided if the offered gift is unavailable.</span>

<button type="submit">Submit Invitation</button>
        </form>
    </div>
</body>
</html>

Site Builder

Editing: Arcadia.html

Site Builder