拾光工作室「关于我们」HTML 单页源码（暖色故事风）

这是一款「关于我们」品牌介绍单页源码。开篇是居中标语区，接着用左右分栏讲品牌故事（左图右文），再往下是一条带圆点的发展时间轴，最后是三栏价值观卡片。很适合工作室、品牌、初创公司做官网的「关于我们」页。

设计上走暖橙到红的渐变点缀，背景用米白营造温度感，时间轴用左侧色条 + 圆点节点表现节点感，整体亲和、有故事性。响应式下图文自动竖排、价值观改为单列。

单文件、零依赖。把团队照/插画换成你的真实素材、把年份和故事改成你的历程，一张有温度的品牌介绍页就完成了。也是拆解「故事叙事 + 时间轴」排版的范例。

使用教程

1. 下载与保存

复制下方代码保存为 about.html。

2. 本地预览

双击打开即可查看。

3. 自定义修改

换图：把 .story .pic 的 emoji 换成 <img> 或背景图。改时间轴：增删 .timeline div 并改年份/文字。换主色：调 :root 的 --brand / --brand2。改价值观：编辑 .values .v 三块。

4. 上线部署

作为静态页托管，或嵌入你的官网「关于我们」路由。

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{ --brand:#f59e0b; --brand2:#ef4444; --ink:#1f2937; --muted:#6b7280; --bg:#fffdf7; }
  *{ box-sizing:border-box; margin:0; padding:0; }
  body{ font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; color:var(--ink); background:var(--bg); line-height:1.8; }
  .wrap{ max-width:980px; margin:0 auto; padding:0 24px; }
  .hero{ text-align:center; padding:70px 0 30px; }
  .hero .tag{ color:var(--brand); letter-spacing:4px; font-size:13px; }
  .hero h1{ font-size:40px; margin:10px 0 14px; }
  .hero p{ color:var(--muted); max-width:600px; margin:0 auto; }
  .story{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:50px 0; }
  .story .pic{ aspect-ratio:4/3; border-radius:20px; background:linear-gradient(135deg,var(--brand),var(--brand2)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:60px; }
  .story h2{ font-size:26px; margin-bottom:14px; }
  .timeline{ border-left:3px solid #fde68a; padding-left:24px; margin:30px 0; }
  .timeline div{ position:relative; padding:0 0 26px; }
  .timeline div::before{ content:""; position:absolute; left:-32px; top:4px; width:14px; height:14px; border-radius:50%; background:var(--brand); }
  .timeline b{ color:var(--brand); }
  .values{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:20px 0 70px; }
  .values .v{ background:#fff; border:1px solid #fde68a; border-radius:16px; padding:24px; }
  .values .v h3{ color:var(--brand); margin-bottom:8px; }
  .values .v p{ color:var(--muted); font-size:14px; }
  @media (max-width:760px){ .story{ grid-template-columns:1fr; } .values{ grid-template-columns:1fr; } .hero h1{ font-size:30px; } }
</style>
</head>
<body>
  <div class="wrap">
    <section class="hero">
      <div class="tag">ABOUT US</div>
      <h1>拾光工作室</h1>
      <p>我们是一支专注品牌视觉与互动体验的小团队，相信好设计能让人多停留三秒。</p>
    </section>
    <section class="story">
      <div class="pic">🎨</div>
      <div>
        <h2>从一间出租屋到城市工作室</h2>
        <p>2019 年三个人、两台电脑，我们在出租屋里接下第一个 logo 订单。六年过去，团队扩到 12 人，服务过 80+ 品牌，但「把每个细节做到位」的执念一点没变。</p>
        <div class="timeline">
          <div><b>2019</b> 工作室成立，首单交付</div>
          <div><b>2021</b> 涉足互动网页与动效</div>
          <div><b>2024</b> 成立品牌全案部门</div>
        </div>
      </div>
    </section>
    <section class="values">
      <div class="v"><h3>真诚</h3><p>不夸大效果，不隐瞒风险，把客户当长期伙伴。</p></div>
      <div class="v"><h3>克制</h3><p>少即是多，拒绝为了炫技堆砌无用的元素。</p></div>
      <div class="v"><h3>长期</h3><p>交付不是终点，我们陪品牌一起长大。</p></div>
    </section>
  </div>
</body>
</html>

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