Site Builder

Editing: Arcadia-M.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: #f6f8fa;
            --accent: #394f6e;
            --label: #314162;
            --shadow: 0 8px 32px rgba(32,48,75,0.16);
        }

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: var(--shadow);
            border: 2.5px solid var(--gold);
            max-width: 520px;
            width: 98vw;
            margin: 38px 0;
            padding: 0 0 34px 0;
            overflow: hidden;
        }
        .arcadia-header {
            background: linear-gradient(120deg, var(--navy) 80%, var(--gold) 100%);
            border-radius: 15px 15px 0 0;
            padding: 38px 0 26px 0;
            text-align: center;
            color: var(--white);
            position: relative;
            border-bottom: 3px solid var(--gold);
        }
        .arcadia-header .arcadia-logo {
            font-size: 2.6rem;
            font-weight: 900;
            letter-spacing: 0.17em;
            text-transform: uppercase;
        }
        .arcadia-header .arcadia-by {
            font-size: 1rem;
            margin-top: 8px;
            letter-spacing: 0.15em;
            font-weight: 400;
        }
        .arcadia-header .arcadia-invite {
            font-size: 1.19rem;
            letter-spacing: 0.09em;
            margin-top: 15px;
            font-weight: 500;
            color: var(--gold);
        }
        form {
            padding: 28px 24px 0 24px;
        }
        h2 {
            text-align: center;
            color: var(--navy);
            text-transform: uppercase;
            font-weight: 800;
            font-size: 1.18rem;
            margin-bottom: 22px;
            letter-spacing: 0.08em;
        }
        .section-title {
            font-size: 1.05rem;
            color: var(--navy);
            font-weight: 700;
            margin: 22px 0 13px 0;
            border-bottom: 1px solid var(--accent);
            padding-bottom: 6px;
            letter-spacing: 0.03em;
        }

/* Floating Label Styles */
        .float-group {
            position: relative;
            margin-bottom: 24px;
        }
        .float-input {
            width: 100%;
            padding: 18px 14px 10px 14px;
            font-size: 1.08rem;
            border: 1.6px solid #c6cadd;
            border-radius: 10px;
            background: #f7f8fa;
            color: var(--navy);
            transition: border-color 0.18s, box-shadow 0.22s, background 0.18s;
            box-shadow: 0 1px 2px rgba(32,48,75,0.06);
            outline: none;
        }
        .float-input:focus {
            border-color: var(--gold);
            background: #fffbe7;
            box-shadow: 0 0 0 2px #e7c87344;
        }
        .float-label {
            position: absolute;
            left: 15px;
            top: 17px;
            font-size: 1.02rem;
            color: var(--label);
            background: transparent;
            pointer-events: none;
            transition: 
                transform 0.17s cubic-bezier(0.4,0,0.2,1), 
                font-size 0.17s cubic-bezier(0.4,0,0.2,1), 
                color 0.18s;
            padding: 0 2px;
        }
        .float-input:focus + .float-label,
        .float-input:not(:placeholder-shown) + .float-label {
            transform: translateY(-16px) scale(0.93);
            background: var(--white);
            font-size: 0.91rem;
            color: var(--gold);
            padding-left: 4px;
            padding-right: 4px;
        }

/* Form Row & Grouping */
        .form-row {
            display: flex;
            gap: 15px;
            margin-bottom: 0;
            flex-wrap: wrap;
        }
        .form-group {
            flex: 1 1 0;
            min-width: 170px;
        }

/* Qualifications */
        .qualifications-list {
            margin: 0;
            padding: 0 0 0 5px;
            list-style: none;
        }
        .qualifications-list li {
            padding: 7px 0 2px 0;
            color: var(--navy);
            font-size: 0.99rem;
            display: flex;
            align-items: flex-start;
        }
        .qualifications-list input[type="checkbox"] {
            accent-color: var(--gold);
            margin: 4px 10px 0 0;
            width: 18px; height: 18px;
        }

/* Preview Details */
        .preview-details .float-group {
            margin-bottom: 17px;
        }
        .highlight {
            color: var(--gold);
            font-size: 1.08rem;
            font-weight: bold;
            margin-top: 9px;
            letter-spacing: 0.04em;
        }
        textarea {
            width: 100%;
            min-height: 62px;
            border: 1.3px solid var(--accent);
            border-radius: 6px;
            background: #f6f8fa;
            padding: 9px;
            margin: 10px 0 11px 0;
            font-size: 0.98rem;
            resize: vertical;
            font-family: inherit;
        }
        .deposit-row {
            display: flex;
            align-items: center;
            gap: 15px;
            margin: 8px 0 10px 0;
        }
        .deposit-row label {
            margin: 0;
            color: var(--navy);
            font-size: 0.98rem;
        }
        .checkbox-row {
            display: flex;
            gap: 22px;
            margin: 0 0 13px 0;
        }
        .checkbox-row label {
            font-size: 0.96rem;
            color: var(--accent);
            margin: 0;
            font-weight: 400;
        }
        .signature-row {
            margin: 12px 0 5px 0;
        }
        .note {
            font-size: 0.85rem;
            color: #b6a66b;
            display: block;
            margin-top: 7px;
        }
        button[type="submit"] {
            display: block;
            width: 100%;
            background: linear-gradient(90deg, var(--gold) 85%, #ffe7a7 100%);
            color: var(--navy);
            border: none;
            border-radius: 9px;
            font-size: 1.17rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            padding: 15px 0;
            margin-top: 21px;
            box-shadow: 0 4px 16px #e7c87322;
            cursor: pointer;
            transition: background 0.17s, box-shadow 0.15s;
        }
        button[type="submit"]:hover {
            background: linear-gradient(90deg, #ffe7a7 80%, var(--gold) 100%);
            box-shadow: 0 6px 20px #e7c8733a;
        }
        /* Placeholders */
        ::placeholder { color: #b0b6c6; opacity: 1; }
        :-ms-input-placeholder { color: #b0b6c6; }
        ::-ms-input-placeholder { color: #b0b6c6; }

/* Responsive Design */
        @media (max-width: 650px) {
            .arcadia-card { max-width: 99vw; padding: 0 0 10px 0; }
            form { padding: 18px 7vw 0 7vw; }
        }
        @media (max-width: 480px) {
            .arcadia-header { padding: 30px 0 14px 0; }
            form { padding: 8vw 4vw 0 4vw; }
            .form-row { flex-direction: column; gap: 0; }
        }
    </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" autocomplete="on">
            <h2>PREMIERE MEMBERSHIP INVITATION</h2>
            <div class="section-title">Guest Information</div>
            <div class="form-row">
                <div class="form-group">
                    <div class="float-group">
                        <input type="text" class="float-input" name="guest1_first_name" id="guest1_first_name" required autocomplete="given-name" placeholder=" " />
                        <label class="float-label" for="guest1_first_name">Guest One - First Name</label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="float-group">
                        <input type="text" class="float-input" name="guest1_last_name" id="guest1_last_name" required autocomplete="family-name" placeholder=" " />
                        <label class="float-label" for="guest1_last_name">Last Name</label>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <div class="float-group">
                        <input type="text" class="float-input" name="guest1_phone" id="guest1_phone" required autocomplete="tel" placeholder=" " />
                        <label class="float-label" for="guest1_phone">Phone</label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="float-group">
                        <input type="email" class="float-input" name="guest1_email" id="guest1_email" required autocomplete="email" placeholder=" " />
                        <label class="float-label" for="guest1_email">Email</label>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <div class="float-group">
                        <input type="text" class="float-input" name="guest2_first_name" id="guest2_first_name" autocomplete="given-name" placeholder=" " />
                        <label class="float-label" for="guest2_first_name">Guest Two - First Name</label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="float-group">
                        <input type="text" class="float-input" name="guest2_last_name" id="guest2_last_name" autocomplete="family-name" placeholder=" " />
                        <label class="float-label" for="guest2_last_name">Last Name</label>
                    </div>
                </div>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <div class="float-group">
                        <input type="text" class="float-input" name="guest2_phone" id="guest2_phone" autocomplete="tel" placeholder=" " />
                        <label class="float-label" for="guest2_phone">Phone</label>
                    </div>
                </div>
                <div class="form-group">
                    <div class="float-group">
                        <input type="email" class="float-input" name="guest2_email" id="guest2_email" autocomplete="email" placeholder=" " />
                        <label class="float-label" for="guest2_email">Email</label>
                    </div>
                </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">
                <div class="float-group">
                    <input type="date" class="float-input" name="preview_date" id="preview_date" required placeholder=" " />
                    <label class="float-label" for="preview_date">Preview Date</label>
                </div>
                <div class="float-group">
                    <input type="text" class="float-input" name="preview_time" id="preview_time" placeholder=" " />
                    <label class="float-label" for="preview_time">Preview Time (e.g. 11:00 AM)</label>
                </div>
                <div class="float-group">
                    <input type="text" class="float-input" name="invited_area" id="invited_area" placeholder=" " />
                    <label class="float-label" for="invited_area">Invited Area</label>
                </div>
                <div class="float-group">
                    <input type="text" class="float-input" name="invited_by" id="invited_by" placeholder=" " />
                    <label class="float-label" for="invited_by">Invited By</label>
                </div>
            </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" class="float-input" style="max-width:140px;" 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">
                <div class="float-group">
                    <input type="text" class="float-input" name="signature" id="signature" placeholder=" " />
                    <label class="float-label" for="signature">Guest Signature</label>
                </div>
            </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-M.html

Site Builder