林深自由设计师个人主页 HTML 单页源码（赤陶米白暖调，含作品集 + 服务卡片 + 联系 CTA）

本源码是一款为自由设计师、独立开发者、摄影师、插画师等创意工作者打造的「自我介绍 + 作品展示 + 客户转化」单页模板。整体采用赤陶色、奶油白与可可棕的暖调组合，视觉上温暖克制，没有过度装饰，正好衬托出内容的质感。首屏左侧是一句有态度的 slogan「把复杂的事，做成刚刚好的样子」，右侧则是带头像、资历与数据统计的个人名片卡，让访客在三秒内认识你。

页面结构围绕「信任 + 能力 + 行动」展开：「我能帮你做什么」区块以图标卡片清晰列出品牌识别、海报物料、网页视觉三大服务；「精选作品」用四张大图卡片展示过往案例，适合直接替换为真实项目截图；底部的深色 CTA 区用一句「准备好开始了吗？」引导客户发邮件咨询。所有文字、配色与作品缩略图都可直接替换，非常方便。

适合自由职业者接单展示、独立工作室官网、个人品牌首页，也可作为 UI/UX 课程作业或前端入门练手项目。把 HTML 中的名字、邮箱、服务描述与作品链接替换后即可部署上线，无需后端支持。

使用教程

1. 下载与保存

将下方 HTML 源码全部复制，保存为 index.html 文件（注意文件后缀必须是 .html）。

2. 本地预览

直接双击 index.html 文件，浏览器会自动打开并渲染页面效果。也可以在文件夹内运行 python -m http.server 后访问 localhost:8000 进行预览。

3. 自定义修改

替换文字：直接编辑 HTML 中的标题、段落文本与链接。调整配色：修改 <style> 标签内的 CSS 变量（:root 部分）或具体颜色值。更换图片：将 <img> 的 src 属性换成你自己的图片地址，或将背景渐变替换为 background-image。

4. 上线部署

将 index.html 上传到任意支持静态网页托管的服务（GitHub Pages、Vercel、Netlify、阿里云 OSS、腾讯云 COS 等）即可获得独立访问网址。

HTML 源码

复制下方完整代码，保存为 .html 文件即可在浏览器中预览使用。

<!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>
  :root{
    --bg:#fbf6f0; --ink:#2c2420; --muted:#8a7a6e;
    --terra:#c8683f; --terra-d:#a44e2c; --cream:#fff8f1;
    --line:#e7dccf; --gold:#d9a441;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
    background:var(--bg);color:var(--ink);line-height:1.7}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}

  /* 顶部导航 */
  header{position:sticky;top:0;z-index:10;background:rgba(251,246,240,.85);
    backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:64px}
  .logo{font-weight:800;font-size:20px;letter-spacing:1px}
  .logo span{color:var(--terra)}
  .nav-links{display:flex;gap:26px;font-size:14px;color:var(--muted)}
  .nav-links a:hover{color:var(--terra)}

  /* Hero */
  .hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
    padding:84px 0 96px}
  .hero h1{font-size:46px;line-height:1.25;letter-spacing:1px;margin-bottom:20px}
  .hero h1 em{color:var(--terra);font-style:normal}
  .hero p{color:var(--muted);font-size:16px;max-width:440px;margin-bottom:30px}
  .btn{display:inline-block;background:var(--terra);color:#fff;padding:13px 30px;
    border-radius:40px;font-weight:600;font-size:15px;transition:.25s}
  .btn:hover{background:var(--terra-d);transform:translateY(-2px)}
  .hero-card{background:var(--cream);border:1px solid var(--line);border-radius:24px;
    padding:34px;box-shadow:0 20px 50px rgba(200,104,63,.12)}
  .avatar{width:84px;height:84px;border-radius:50%;
    background:linear-gradient(135deg,var(--terra),var(--gold));
    display:flex;align-items:center;justify-content:center;font-size:34px;color:#fff;font-weight:800}
  .hero-card h3{margin:18px 0 6px;font-size:20px}
  .hero-card .role{color:var(--terra);font-size:14px;font-weight:600}
  .hero-card p{font-size:14px;color:var(--muted);margin-top:12px}
  .stats{display:flex;gap:22px;margin-top:22px;border-top:1px dashed var(--line);padding-top:18px}
  .stat b{display:block;font-size:22px;color:var(--ink)}
  .stat span{font-size:12px;color:var(--muted)}

  /* 服务 */
  section{padding:72px 0}
  .sec-title{font-size:30px;margin-bottom:10px}
  .sec-sub{color:var(--muted);margin-bottom:42px}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .card{background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:28px;transition:.25s}
  .card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(200,104,63,.1)}
  .card .ic{font-size:26px;margin-bottom:14px}
  .card h4{font-size:18px;margin-bottom:8px}
  .card p{font-size:14px;color:var(--muted)}

  /* 作品精选 */
  .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  .work{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--cream)}
  .work .thumb{height:180px;background:linear-gradient(135deg,#e9d6c4,#d9a441)}
  .work:nth-child(2) .thumb{background:linear-gradient(135deg,#c8683f,#f0c9a8)}
  .work:nth-child(3) .thumb{background:linear-gradient(135deg,#8a7a6e,#bfae9d)}
  .work:nth-child(4) .thumb{background:linear-gradient(135deg,#d9a441,#c8683f)}
  .work .info{padding:16px 18px}
  .work .info b{font-size:15px}
  .work .info span{display:block;color:var(--muted);font-size:13px;margin-top:4px}

  /* 联系 */
  .contact{background:var(--ink);color:#fbf6f0;border-radius:28px;padding:54px;text-align:center;margin-bottom:72px}
  .contact h2{font-size:30px;margin-bottom:14px}
  .contact p{color:#c9bdb2;margin-bottom:26px}
  .contact .btn{background:var(--gold)}
  .contact .btn:hover{background:#c08e2c}

  footer{border-top:1px solid var(--line);padding:28px 0;color:var(--muted);font-size:13px;
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

  @media(max-width:820px){
    .hero{grid-template-columns:1fr;padding:54px 0 64px}
    .hero h1{font-size:34px}
    .grid3,.grid2{grid-template-columns:1fr}
    .nav-links{display:none}
  }
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <div class="logo">林深<span>.</span></div>
    <nav class="nav-links">
      <a href="#about">关于</a>
      <a href="#service">服务</a>
      <a href="#works">作品</a>
      <a href="#contact">联系</a>
    </nav>
  </div>
</header>

<div class="wrap">
  <section class="hero">
    <div>
      <h1>把复杂的事，<br>做成<em>刚刚好</em>的样子。</h1>
      <p>我是林深，一名自由视觉设计师，专注品牌识别、海报与网页视觉。不堆砌效果，只把你想说的话，用最舒服的方式呈现出来。</p>
      <a href="#contact" class="btn">聊聊你的项目 →</a>
    </div>
    <div class="hero-card">
      <div class="avatar">林</div>
      <h3>林深 / Lin Shen</h3>
      <div class="role">独立视觉设计师 · 6 年经验</div>
      <p>服务过餐饮、文创、科技类品牌，相信好设计是「让人愿意多看一眼」。</p>
      <div class="stats">
        <div class="stat"><b>120+</b><span>合作项目</span></div>
        <div class="stat"><b>6 年</b><span>设计经验</span></div>
        <div class="stat"><b>4.9</b><span>客户评分</span></div>
      </div>
    </div>
  </section>

  <section id="service">
    <h2 class="sec-title">我能帮你做什么</h2>
    <p class="sec-sub">从一句想法，到一份能落地的视觉方案。</p>
    <div class="grid3">
      <div class="card"><div class="ic">🎨</div><h4>品牌识别</h4><p>Logo、字体、配色与基础规范，帮你建立统一的视觉记忆点。</p></div>
      <div class="card"><div class="ic">🖼️</div><h4>海报 / 物料</h4><p>活动海报、产品图、社交媒体配图，强调信息层级与美感兼顾。</p></div>
      <div class="card"><div class="ic">💻</div><h4>网页视觉</h4><p>落地页、官网视觉稿与前端还原，让设计不止停留在图片里。</p></div>
    </div>
  </section>

  <section id="works">
    <h2 class="sec-title">精选作品</h2>
    <p class="sec-sub">一些我比较喜欢的案子。</p>
    <div class="grid2">
      <div class="work"><div class="thumb"></div><div class="info"><b>拾光茶铺 · 品牌升级</b><span>Logo + 包装 + 门店视觉</span></div></div>
      <div class="work"><div class="thumb"></div><div class="info"><b>山野咖啡 · 季节海报</b><span>系列平面海报设计</span></div></div>
      <div class="work"><div class="thumb"></div><div class="info"><b>知野文旅 · 官网</b><span>首页视觉与交互稿</span></div></div>
      <div class="work"><div class="thumb"></div><div class="info"><b>小满书店 · 文创</b><span>书袋 / 书签 / 周边</span></div></div>
    </div>
  </section>

  <section id="contact">
    <div class="contact">
      <h2>准备好开始了吗？</h2>
      <p>告诉我你的项目背景、预算与时间，我会在 24 小时内回复你。</p>
      <a href="mailto:hello@linshen.design" class="btn">发邮件给我</a>
    </div>
  </section>
</div>

<footer class="wrap">
  <span>© 2026 林深设计工作室</span>
  <span>微信：linshen_design · 邮箱：hello@linshen.design</span>
</footer>

</body>
</html>

原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1925.html