<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生日快乐</title>
    <style>
        *{margin:0;padding:0;box-sizing:border-box}
        body{font-family:"PingFang SC",sans-serif;background:#fff7f0;color:#5c4840;line-height:1.9;padding-bottom:60px}
        .cover{width:100%;display:block;border-bottom-left-radius:20px;border-bottom-right-radius:20px;box-shadow:0 4px 12px rgba(224,137,109,.15)}
        .letter-box{max-width:600px;margin:-30px auto 0;padding:0 20px;position:relative;z-index:2}
        .letter{background:#fff;padding:35px 28px;border-radius:16px;box-shadow:0 4px 15px rgba(224,137,109,.12);border:1px solid #f3e0d5}
        .letter p{margin-bottom:18px;text-indent:2em;font-size:16px}
        .letter-img{width:100%;border-radius:10px;margin:20px 0}
        .sign{text-align:right;margin-top:40px;color:#9c7b6e;font-size:15px}
        .date{text-align:right;color:#b8a095;font-size:14px;margin-top:8px}
    </style>
</head>
<body>
    <!-- 替换成你的封面图链接 -->
    <img class="cover" src="https://picsum.photos/id/106/800/500" alt="生日快乐">

    <div class="letter-box">
        <div class="letter">
            <!-- 下面替换成你的信，每一段用<p></p>包起来 -->
            <p>展信佳。</p>
            <p>先看到这张图的时候，应该就收到我这份小小的惊喜啦。想了很久，还是决定把想说的话都认认真真写在这里。</p>

            <!-- 信里插图就加这行，替换成你的图片链接，不插就删掉 -->
            <img class="letter-img" src="https://picsum.photos/id/237/600/400" alt="合照">

            <p>这是陪你过的第X个生日，这一年里发生了好多事，开心的难捱的，幸好都一起走过来了。</p>
            <p>希望你新的一岁，平安顺遂，想做的事都能做成，想去的地方都能去到，我们还要一起吃好多好多饭，拍好多好多照。</p>
            
            <div class="sign">你的名字</div>
            <div class="date">202X年X月X日</div>
        </div>
    </div>
</body>
</html>