1. 小蓝资源网首页
  2. 网站源码

屿岛设计事务所团队介绍页 HTML 单页源码

小蓝IT • • 网站源码 • 阅读 16

暗色高级质感的团队介绍页，含成员卡片网格、数据统计与价值观区块。

本源码是一款面向设计工作室、创业公司或独立团队的「关于我们 / 团队介绍」单页模板。整体采用深灰近黑的暗色底，搭配珊瑚橙、薄荷绿、丁香紫三色渐变作为强调色，气质克制而有辨识度，避开了常见团队页的呆板证件照风格。

设计上，成员头像使用彩色渐变色块配单字，无需真实照片即可呈现完整视觉；卡片悬停时整体上浮并加深阴影，底部渐变遮罩让文字层次分明。页面结构包含首屏宣言、四项数据统计条（成立年数/成员数/项目数/奖项数）、六位核心成员卡片、四条工作理念，以及底部招聘 CTA，是一个完整的团队叙事闭环。

适合设计工作室、技术团队、咨询公司、MCN 机构等在官网展示团队面貌；也可作为个人接单者展示合作伙伴的页面。将渐变头像替换为真实照片、更新成员信息即可上线。

屿岛设计事务所团队介绍页 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:#12131a;
  --card:#1a1c26;
  --card2:#21242f;
  --line:#2c303c;
  --text:#f0f1f5;
  --muted:#9aa0b3;
  --pri:#ff6b5b;
  --pri2:#5eead4;
  --pri3:#a78bfa;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:var(--bg);color:var(--text);line-height:1.78;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 26px}

/* 顶栏 */
header{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30;background:rgba(18,19,26,.9);backdrop-filter:blur(14px)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:11px;font-weight:900;font-size:16.5px;letter-spacing:.02em}
.logo i{
  width:30px;height:30px;border-radius:9px;font-style:normal;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--pri),#ff9a76);color:#25100c;font-size:14px;font-weight:900;
}
.nav ul{display:flex;gap:28px;list-style:none;font-size:14px;color:var(--muted)}
.nav ul a:hover{color:var(--text)}
.nav .cta{padding:9px 20px;border-radius:9px;border:1px solid var(--line);font-size:13.5px;transition:.24s}
.nav .cta:hover{border-color:var(--pri);color:var(--pri)}

/* Hero */
.hero{padding:76px 0 58px;max-width:760px}
.kicker{display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.24em;color:var(--pri2);margin-bottom:20px}
.kicker::before{content:"";width:28px;height:1px;background:var(--pri2)}
.hero h1{font-size:clamp(34px,6vw,58px);line-height:1.14;font-weight:900;letter-spacing:-.025em;margin-bottom:20px}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--pri),var(--pri3) 55%,var(--pri2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--muted);font-size:16.5px}

/* 数字条 */
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-bottom:78px}
.nums div{background:var(--card);padding:26px 18px}
.nums b{display:block;font-size:31px;font-weight:900;letter-spacing:-.03em;margin-bottom:4px}
.nums div:nth-child(1) b{color:var(--pri)}
.nums div:nth-child(2) b{color:var(--pri2)}
.nums div:nth-child(3) b{color:var(--pri3)}
.nums div:nth-child(4) b{color:#fbbf24}
.nums span{font-size:13px;color:var(--muted)}

/* 区块标题 */
.sh{margin-bottom:40px}
.sh em{font-style:normal;font-size:12px;letter-spacing:.26em;color:var(--muted);display:block;margin-bottom:11px}
.sh h2{font-size:clamp(25px,4vw,38px);font-weight:900;letter-spacing:-.02em}
.sh p{color:var(--muted);font-size:15px;margin-top:10px;max-width:560px}

/* 团队网格 */
section{padding-bottom:84px}
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:20px}
.m{
  background:var(--card);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:.34s;
  position:relative;
}
.m:hover{transform:translateY(-8px);border-color:#3a3f50;box-shadow:0 26px 54px rgba(0,0,0,.5)}
.ph{
  aspect-ratio:1/1;display:grid;place-items:center;font-size:52px;font-weight:900;position:relative;overflow:hidden;
}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(26,28,38,.92))}
.m:nth-child(1) .ph{background:linear-gradient(145deg,#ff8b7a,#c4453a);color:#3a120d}
.m:nth-child(2) .ph{background:linear-gradient(145deg,#7ff0dc,#22a58f);color:#0a332c}
.m:nth-child(3) .ph{background:linear-gradient(145deg,#bda4ff,#7e5ce0);color:#1e1140}
.m:nth-child(4) .ph{background:linear-gradient(145deg,#ffd580,#dc9c1e);color:#3b2705}
.m:nth-child(5) .ph{background:linear-gradient(145deg,#8bbcff,#3b6fd4);color:#0c1e42}
.m:nth-child(6) .ph{background:linear-gradient(145deg,#ffa6cd,#d4548c);color:#400f27}
.m:nth-child(7) .ph{background:linear-gradient(145deg,#a8e78f,#4f9b34);color:#12300a}
.m:nth-child(8) .ph{background:linear-gradient(145deg,#9fd8e8,#3d90ab);color:#082935}
.mi{padding:20px 22px 24px}
.mi h4{font-size:18px;font-weight:800;margin-bottom:3px}
.mi .rl{font-size:12.5px;color:var(--pri2);letter-spacing:.06em;margin-bottom:11px;font-weight:600}
.m:nth-child(even) .mi .rl{color:var(--pri)}
.mi p{font-size:13.5px;color:var(--muted);line-height:1.72;margin-bottom:14px}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tags span{font-size:11.5px;padding:3px 10px;border-radius:99px;background:var(--card2);color:var(--muted);border:1px solid var(--line)}
.soc{display:flex;gap:9px;margin-top:14px}
.soc a{
  width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:13px;
  background:var(--card2);color:var(--muted);border:1px solid var(--line);transition:.22s;
}
.soc a:hover{background:var(--pri);color:#25100c;border-color:var(--pri)}

/* 价值观 */
.vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:18px}
.v{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px 26px;transition:.3s}
.v:hover{border-color:#3a3f50;transform:translateY(-5px)}
.v .no{font-size:12px;letter-spacing:.2em;color:var(--muted);margin-bottom:14px}
.v h4{font-size:19px;font-weight:800;margin-bottom:9px}
.v p{font-size:14px;color:var(--muted)}

/* 招聘 CTA */
.join{
  background:linear-gradient(135deg,rgba(255,107,91,.16),rgba(167,139,250,.12));
  border:1px solid var(--line);border-radius:24px;padding:52px 40px;text-align:center;
}
.join h3{font-size:clamp(23px,3.6vw,34px);font-weight:900;margin-bottom:12px;letter-spacing:-.02em}
.join p{color:var(--muted);margin-bottom:28px;max-width:480px;margin-left:auto;margin-right:auto}
.jb{display:inline-block;padding:14px 34px;border-radius:12px;background:var(--pri);color:#25100c;font-weight:800;font-size:15px;transition:.25s}
.jb:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(255,107,91,.34)}

footer{border-top:1px solid var(--line);padding:32px 0;text-align:center;color:#6d7285;font-size:13px}

@media(max-width:700px){
  .nav ul{display:none}
  .hero{padding:48px 0 40px}
  section{padding-bottom:56px}
  .join{padding:36px 22px}
}
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <div class="logo"><i>屿</i>屿岛设计事务所</div>
    <ul>
      <li><a href="#">作品</a></li>
      <li><a href="#team">团队</a></li>
      <li><a href="#value">理念</a></li>
      <li><a href="#join">加入</a></li>
    </ul>
    <a href="#" class="cta">聊聊合作</a>
  </div>
</header>

<div class="wrap">
  <div class="hero">
    <div class="kicker">A B O U T &nbsp; T H E &nbsp; T E A M</div>
    <h1>一群相信<em>好设计</em><br>值得被认真对待的人</h1>
    <p>我们是一家 12 人的独立设计事务所，做品牌、做产品、也做一点不合时宜的实验。八年来我们只坚持一件事：不交出自己都不满意的作品。</p>
  </div>

  <div class="nums">
    <div><b>8</b><span>成立年数</span></div>
    <div><b>12</b><span>全职成员</span></div>
    <div><b>146</b><span>交付项目</span></div>
    <div><b>23</b><span>国际设计奖项</span></div>
  </div>
</div>

<section id="team">
  <div class="wrap">
    <div class="sh">
      <em>C O R E &nbsp; M E M B E R S</em>
      <h2>核心成员</h2>
      <p>每个人都有自己偏执的地方，凑在一起反而刚好互补。</p>
    </div>
    <div class="team">
      <div class="m">
        <div class="ph">屿</div>
        <div class="mi">
          <h4>陆屿宁</h4><div class="rl">创始人 · 创意总监</div>
          <p>做了十四年设计，从广告公司出走后创办屿岛。相信克制比炫技更难，也更值钱。</p>
          <div class="tags"><span>品牌策略</span><span>视觉体系</span></div>
          <div class="soc"><a href="#">站</a><a href="#">图</a><a href="#">✉</a></div>
        </div>
      </div>
      <div class="m">
        <div class="ph">禾</div>
        <div class="mi">
          <h4>祁禾禾</h4><div class="rl">产品设计负责人</div>
          <p>前大厂交互设计师，擅长把复杂业务拆解成让人一眼看懂的界面。研究可用性上瘾。</p>
          <div class="tags"><span>交互设计</span><span>用户研究</span></div>
          <div class="soc"><a href="#">站</a><a href="#">图</a><a href="#">✉</a></div>
        </div>
      </div>
      <div class="m">
        <div class="ph">澈</div>
        <div class="mi">
          <h4>顾澈</h4><div class="rl">技术合伙人</div>
          <p>写前端也写后端，最喜欢把设计稿 1:1 还原到浏览器里的那一刻。性能洁癖患者。</p>
          <div class="tags"><span>前端工程</span><span>动效实现</span></div>
          <div class="soc"><a href="#">站</a><a href="#">码</a><a href="#">✉</a></div>
        </div>
      </div>
      <div class="m">
        <div class="ph">晚</div>
        <div class="mi">
          <h4>温晚舟</h4><div class="rl">品牌文案主理人</div>
          <p>中文系毕业，做过图书编辑。认为一句好文案能救活一个平庸的版面。</p>
          <div class="tags"><span>品牌叙事</span><span>内容策划</span></div>
          <div class="soc"><a href="#">站</a><a href="#">书</a><a href="#">✉</a></div>
        </div>
      </div>
      <div class="m">
        <div class="ph">砚</div>
        <div class="mi">
          <h4>裴砚之</h4><div class="rl">插画与动效设计师</div>
          <p>手绘出身，后来一头栽进 3D 与动态设计。作品里总带点温柔的荒诞感。</p>
          <div class="tags"><span>插画</span><span>三维</span><span>动效</span></div>
          <div class="soc"><a href="#">站</a><a href="#">图</a><a href="#">✉</a></div>
        </div>
      </div>
      <div class="m">
        <div class="ph">桑</div>
        <div class="mi">
          <h4>叶桑</h4><div class="rl">项目管理 · 客户对接</div>
          <p>团队里最会说话的人。负责让创意落地不跑偏，也负责挡下不合理的需求。</p>
          <div class="tags"><span>项目管理</span><span>客户沟通</span></div>
          <div class="soc"><a href="#">站</a><a href="#">✆</a><a href="#">✉</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="value">
  <div class="wrap">
    <div class="sh"><em>H O W &nbsp; W E &nbsp; W O R K</em><h2>我们的工作方式</h2></div>
    <div class="vals">
      <div class="v"><div class="no">0 1</div><h4>先想明白，再动手</h4><p>接到需求不急着打开设计软件。搞清楚"为什么做"往往比"怎么做"重要十倍。</p></div>
      <div class="v"><div class="no">0 2</div><h4>拒绝流水线</h4><p>我们同时最多只接四个项目。宁可少赚，也不做把自己名字都不敢署上的东西。</p></div>
      <div class="v"><div class="no">0 3</div><h4>设计要能落地</h4><p>不做只能停在效果图里的方案。前端就在隔壁工位，能不能实现当场就有答案。</p></div>
      <div class="v"><div class="no">0 4</div><h4>坦白比客气重要</h4><p>觉得客户的想法不对，我们会直说。合作是为了做出好东西，不是为了让谁开心。</p></div>
    </div>
  </div>
</section>

<section id="join">
  <div class="wrap">
    <div class="join">
      <h3>我们一直在找同类</h3>
      <p>如果你也相信设计不只是把东西弄好看，欢迎带上作品来聊聊。哪怕暂时没有对口岗位，我们也乐意认识你。</p>
      <a href="#" class="jb">查看开放职位 →</a>
    </div>
  </div>
</section>

<footer>© 2026 屿岛设计事务所 · 杭州市滨江区 · 本页面为演示模板</footer>

</body>
</html>

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

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

小蓝IT的头像

小蓝IT

399 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
用户体验调研问卷 HTML 单页源码（多题型表单）
上一篇 4小时前
在线课程详情页 HTML 单页源码（教育平台模板）
下一篇 4小时前

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部
icon 首页
icon 网站源码
icon IT资讯
icon 网站客服