苏野插画师作品集 HTML 单页源码（深靛蓝 + 珊瑚粉暗色风格，含作品墙 + 技能标签）

本源码是一款为插画师、视觉艺术家、绘本创作者打造的「作品集展示 + 个人品牌」单页模板。整体采用深靛蓝为主背景，搭配珊瑚粉作为强调色，营造出深夜工作室里发光的屏幕感，非常契合插画师的艺术气质。首屏用「用画面，讲一个温柔的故事」直接点题，配合左侧标签与右侧巨型插画容器，第一眼就能抓住潜在客户的眼球。

页面核心是一个「作品墙」网格：六张卡片分别对应品牌吉祥物、个人创作、绘本内页、概念海报、商业包装与系列组图，每张卡片都包含项目标题与分类说明。下方的「关于苏野」区块用左侧文字介绍经历、右侧色块展示头像的方式建立专业感；底部「有故事想画出来吗？」的合作 CTA 简洁有力。

适合插画师求职作品集、自由创作者接单页、绘本宣传页或艺术类课程项目展示。替换作品图片、姓名、联系方式后即可发布到 GitHub Pages、Vercel 等平台，也适合打印成 PDF 作品集前用于线上展示。

使用教程

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:#14122b; --panel:#1d1a3d; --ink:#f3f1ff; --muted:#a59fd6;
    --indigo:#5b4bdb; --coral:#ff6b6b; --coral-d:#e85555; --line:#2c2856;
  }
  *{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:1120px;margin:0 auto;padding:0 24px}

  header{position:sticky;top:0;z-index:10;background:rgba(20,18,43,.82);
    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(--coral)}
  .nav-links{display:flex;gap:26px;font-size:14px;color:var(--muted)}
  .nav-links a:hover{color:var(--coral)}

  .hero{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;padding:90px 0 80px}
  .tag{display:inline-block;background:var(--indigo);color:#fff;font-size:12px;
    padding:5px 14px;border-radius:30px;margin-bottom:20px;letter-spacing:1px}
  .hero h1{font-size:48px;line-height:1.2;letter-spacing:1px;margin-bottom:18px}
  .hero h1 em{color:var(--coral);font-style:normal}
  .hero p{color:var(--muted);max-width:420px;margin-bottom:28px}
  .btns{display:flex;gap:14px}
  .btn{display:inline-block;padding:13px 28px;border-radius:40px;font-weight:600;font-size:15px;transition:.25s}
  .btn.p{background:var(--coral);color:#fff}
  .btn.p:hover{background:var(--coral-d);transform:translateY(-2px)}
  .btn.g{background:transparent;border:1px solid var(--line);color:var(--ink)}
  .btn.g:hover{border-color:var(--coral)}
  .hero-img{height:340px;border-radius:24px;
    background:radial-gradient(circle at 30% 30%,var(--indigo),transparent 60%),
               linear-gradient(135deg,#2a2566,#ff6b6b22);
    display:flex;align-items:center;justify-content:center;font-size:90px;
    box-shadow:0 30px 60px rgba(91,75,219,.3)}

  section{padding:70px 0}
  .sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:38px;flex-wrap:wrap;gap:10px}
  .sec-title{font-size:30px}
  .sec-sub{color:var(--muted);font-size:14px}

  .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .item{border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--panel);transition:.25s}
  .item:hover{transform:translateY(-6px);border-color:var(--coral)}
  .item .thumb{height:200px;display:flex;align-items:center;justify-content:center;font-size:60px;color:#fff}
  .item:nth-child(1) .thumb{background:linear-gradient(135deg,#5b4bdb,#8b7bff)}
  .item:nth-child(2) .thumb{background:linear-gradient(135deg,#ff6b6b,#ffa36b)}
  .item:nth-child(3) .thumb{background:linear-gradient(135deg,#2a2566,#5b4bdb)}
  .item:nth-child(4) .thumb{background:linear-gradient(135deg,#ffa36b,#5b4bdb)}
  .item:nth-child(5) .thumb{background:linear-gradient(135deg,#8b7bff,#ff6b6b)}
  .item:nth-child(6) .thumb{background:linear-gradient(135deg,#3a2f8a,#ff8a8a)}
  .item .cap{padding:16px 18px}
  .item .cap b{font-size:15px}
  .item .cap span{display:block;color:var(--muted);font-size:13px;margin-top:3px}

  .about{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
    background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:40px}
  .about .txt h3{font-size:24px;margin-bottom:14px}
  .about .txt p{color:var(--muted);margin-bottom:14px}
  .skills{display:flex;flex-wrap:wrap;gap:10px}
  .skills span{background:var(--bg);border:1px solid var(--line);padding:7px 14px;border-radius:30px;font-size:13px}
  .about .pic{height:240px;border-radius:18px;background:linear-gradient(135deg,#5b4bdb,#ff6b6b);
    display:flex;align-items:center;justify-content:center;font-size:80px}

  .contact{text-align:center;padding:60px 0 90px}
  .contact h2{font-size:32px;margin-bottom:14px}
  .contact p{color:var(--muted);margin-bottom:26px}

  footer{border-top:1px solid var(--line);padding:26px 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:56px 0 60px}
    .hero h1{font-size:34px}
    .gallery,.about{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="#gallery">作品</a>
      <a href="#about">关于</a>
      <a href="#contact">联系</a>
    </nav>
  </div>
</header>

<div class="wrap">
  <section class="hero">
    <div>
      <span class="tag">ILLUSTRATOR · 自由插画师</span>
      <h1>用画面，<br>讲一个<em>温柔</em>的故事。</h1>
      <p>我是苏野，专注故事类插画、品牌吉祥物与绘本风格视觉。喜欢暖色与微光，相信每一幅画都该有温度。</p>
      <div class="btns">
        <a href="#gallery" class="btn p">查看作品</a>
        <a href="#contact" class="btn g">合作邀约</a>
      </div>
    </div>
    <div class="hero-img">🎨</div>
  </section>

  <section id="gallery">
    <div class="sec-head">
      <div>
        <h2 class="sec-title">作品墙</h2>
        <p class="sec-sub">商业约稿 · 个人创作 · 绘本节选</p>
      </div>
      <span class="sec-sub">2023 — 2026</span>
    </div>
    <div class="gallery">
      <div class="item"><div class="thumb">🌿</div><div class="cap"><b>森林小食店</b><span>品牌吉祥物设定</span></div></div>
      <div class="item"><div class="thumb">🌇</div><div class="cap"><b>黄昏列车</b><span>个人创作插画</span></div></div>
      <div class="item"><div class="thumb">🐱</div><div class="cap"><b>橘猫物语</b><span>绘本内页</span></div></div>
      <div class="item"><div class="thumb">🪐</div><div class="cap"><b>星际邮差</b><span>概念海报</span></div></div>
      <div class="item"><div class="thumb">🌷</div><div class="cap"><b>花房姑娘</b><span>商业包装插画</span></div></div>
      <div class="item"><div class="thumb">🏔️</div><div class="cap"><b>远山来信</b><span>系列组图之一</span></div></div>
    </div>
  </section>

  <section id="about">
    <div class="about">
      <div class="txt">
        <h3>关于苏野</h3>
        <p>毕业于视觉传达专业，做过三年出版插画，现在以自由插画师身份与品牌、出版社、独立工作室合作。</p>
        <p>擅长把抽象的情绪转译成具体的画面，尤其喜欢食物、小动物与城市夜景题材。</p>
        <div class="skills">
          <span>角色设定</span><span>绘本插画</span><span>品牌吉祥物</span>
          <span>Procreate</span><span>Photoshop</span><span>故事分镜</span>
        </div>
      </div>
      <div class="pic">🖌️</div>
    </div>
  </section>

  <section id="contact" class="contact">
    <h2>有故事想画出来吗？</h2>
    <p>约稿 / 合作请发邮件，附上需求与预算我会尽快回复。</p>
    <a href="mailto:hi@suye.art" class="btn p">写信给苏野</a>
  </section>
</div>

<footer class="wrap">
  <span>© 2026 苏野插画工作室</span>
  <span>邮箱：hi@suye.art · 站酷 / 小红书：苏野SuYe</span>
</footer>

</body>
</html>

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