index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>一份 OFFER </title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
        href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Noto+Sans+SC:wght@300;400&display=swap"
        rel="stylesheet" />

    <style>
        /* --- 全局样式 --- */
        body {
            font-family: "Noto Sans SC", sans-serif;
            background-color: #fdf6f8;
            /* 非常淡的粉色背景 */
            color: #4a4a4a;
            margin: 0;
            padding: 30px 15px;
            line-height: 1.8;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            /* Hello Kitty 背景 */
            background-image: url('images/IMG_13123.png');
            /* 替换为Hello Kitty背景图链接 */
            background-repeat: repeat;
            background-size: 500px;
        }

        /* --- 容器卡片 --- */
        .container {
            max-width: 800px;
            width: 100%;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(211, 109, 143, 0.15);
            border: 1px solid #ffe4e1;
            padding: 40px 50px;
            box-sizing: border-box;
            /* 入场动画 */
            animation: fadeIn 1.2s ease-out;
        }

        /* --- 动画定义 --- */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* --- 头部 --- */
        .header {
            text-align: center;
            border-bottom: 2px dashed #f0c4cf;
            /* 虚线分隔 */
            padding-bottom: 25px;
            margin-bottom: 30px;
            position: relative;
            /* 用于定位Hello Kitty装饰 */
        }

        /* Hello Kitty Logo */
        .header .logo {
            width: 150px;
            /* Hello Kitty Logo 尺寸 */
            height: auto;
            margin-bottom: 10px;
        }

        .header h1 {
            font-family: "Noto Serif SC", serif;
            color: #d9534f;
            /* 浪漫的红色 */
            font-size: 2.5em;
            margin: 0 0 5px 0;
            font-weight: 700;
            display: none;
            /* 隐藏原来的H1文字 */
        }

        .header h2 {
            font-family: "Noto Serif SC", serif;
            color: #555;
            font-size: 1.5em;
            margin: 0;
            font-weight: 400;
        }

        .header h3 {
            font-size: 1.2em;
            color: #e67c73;
            /* 柔和的珊瑚红 */
            margin: 15px 0 0 0;
            font-weight: 400;
        }

        /* Hello Kitty 虚线装饰 */
        .header:after {
            content: "";
            display: block;
            width: 100%;
            height: 30px;
            background-image: url('images/t1.png');
            /* Hello Kitty 虚线图案 */
            background-repeat: repeat-x;
            background-size: auto 100%;
            position: absolute;
            bottom: -2px;
            /* 覆盖原来的虚线 */
            left: 0;
            z-index: 1;
        }

        .header::before {
            content: "";
            display: block;
            width: 100%;
            height: 1px;
            background-image: url('images/t2.png');
            /* Hello Kitty 虚线图案 */
            background-repeat: repeat-x;
            background-size: auto 100%;
            position: absolute;
            bottom: -2px;
            /* 覆盖原来的虚线 */
            left: 0;
            z-index: 1;
            opacity: 0;
            /* 隐藏原有的伪元素 */
        }


        /* --- 内容主体 --- */
        .content .recipient {
            font-size: 1.25em;
            font-weight: bold;
            color: #d9534f;
            margin-bottom: 25px;
        }

        .content p {
            font-size: 1.05em;
            margin-bottom: 20px;
        }

        .content strong {
            color: #c0392b;
            /* 强调色 */
            font-weight: bold;
        }

        /* --- 章节标题 --- */
        .section-title {
            display: flex;
            align-items: center;
            font-family: "Noto Serif SC", serif;
            font-size: 1.4em;
            color: #d9534f;
            border-bottom: 1px solid #fceef2;
            padding-bottom: 8px;
            margin: 30px 0 20px 0;
            position: relative;
        }

        .section-title svg {
            width: 22px;
            height: 22px;
            margin-right: 12px;
            fill: #e67c73;
        }

        /* Hello Kitty 章节分隔线装饰 */
        .section-title:after {
            content: "";
            display: block;
            width: 100%;
            height: 10px;
            background-image: url('images/t2.png');
            /* Hello Kitty 虚线图案 */
            background-repeat: repeat-x;
            background-size: auto 100%;
            position: absolute;
            bottom: -1px;
            left: 0;
            z-index: 1;
        }


        /* --- 福利列表 --- */
        .benefits-list {
            list-style: none;
            padding-left: 0;
        }

        .benefits-list li {
            background-color: #fffafb;
            border: 1px solid #fde7ea;
            border-radius: 8px;
            padding: 12px 20px;
            margin-bottom: 10px;
            font-size: 1.05em;
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
        }

        .benefits-list li:before {
            content: "";
            /* 清除原来的对勾 */
            display: inline-block;
            width: 24px;
            /* Hello Kitty 图标尺寸 */
            height: 24px;
            background-image: url('images/fig2.png');
            /* Hello Kitty 图标链接 */
            background-size: cover;
            margin-right: 15px;
        }

        .benefits-list li:hover {
            transform: translateX(5px);
            box-shadow: 0 4px 15px rgba(211, 109, 143, 0.1);
        }

        /* --- 尾部签名 --- */
        .footer {
            text-align: right;
            margin-top: 40px;
            border-top: 1px solid #fceef2;
            padding-top: 30px;
            color: #777;
        }

        .footer p {
            margin: 5px 0;
            font-size: 0.95em;
        }

        .footer .signature {
            font-family: "Noto Serif SC", serif;
            font-size: 1.1em;
            font-weight: bold;
            color: #333;
            margin-top: 20px;
        }

        /* --- 响应式设计 --- */
        @media (max-width: 600px) {
            .container {
                padding: 25px 20px;
            }

            .header h1 {
                font-size: 2em;
            }

            .header h2 {
                font-size: 1.3em;
            }

            .content .recipient {
                font-size: 1.15em;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <header class="header">
            <img src="images/fig1.png" alt="Hello Kitty Logo" class="logo">
            <h1>HWHL</h1>
            <h2>(QJK loves XYT)</h2>
            <h3>爱许月婷永远无限公司</h3>
        </header>

        <main class="content">
            <p class="recipient">致：我亲爱的许月婷女士</p>

            <p>
                非常荣幸的通知您，由于您出众的专业能力和优秀的综合素质，已通过我们公司的终极考核，<strong>正式成为公司最重要的一员</strong>。
            </p>

            <p>
                您将入职 <strong>爱许月婷永远无限公司</strong> 担任
                <strong>女朋友</strong> and <strong>老婆</strong>
                职位，本人对您加入我，表示最热烈的欢迎！
            </p>

            <h4 class="section-title">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path
                        d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z" />
                </svg>
                入职与欢迎会
            </h4>
            <p>
                请您于 <strong>2026年6月1日</strong> 之前，于
                <strong>厦门市</strong> 参加公司为您准备的专属欢迎会。
            </p>

            <h4 class="section-title">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path
                        d="M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3s-3 1.34-3 3c0 .35.07.69.18 1H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-8-1c0-.55.45-1 1-1s1 .45 1 1-.45 1-1 1-1-.45-1-1zm10 15H6V8h14v12z" />
                </svg>
                专属福利包
            </h4>
            <p>请您在参加欢迎会之后，注意查收由本人提供的以下物品：</p>
            <ul class="benefits-list">
                <li>超多彩礼</li>
                <li>若干金</li>
                <li>对戒</li>
                <li>钻戒</li>
                <li>吊坠</li>
                <li>项链</li>
                <li>耳饰</li>
                <li>手链</li>
                <li>手镯</li>
                <li>HelloKitty大礼包</li>
                <li>等等等等</li>
            </ul>

            <h4 class="section-title">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path
                        d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
                </svg>
                薪资与未来
            </h4>
            <p>
                <strong>关于薪资：</strong>您在公司的薪资福利待遇，请您入职后与董事长本人详细了解（承诺终身有效且逐年递增）。
            </p>
            <p>
                <strong>关于住房：</strong>公司争取将在未来十年内提供房子，房子暂定位于
                <strong>厦门市</strong> or <strong>深圳市</strong> or <strong>广州市</strong>。
            </p>
        </main>

        <footer class="footer">
            <p>如有疑问，请与公司老板丘骏锴的电话联系。</p>
            <p class="signature">
                爱许月婷永远无限公司<br />
                丘骏锴（兼您一生的员工） 亲上
            </p>
        </footer>
    </div>
</body>


</html>