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

屿见 YUJIAN 关于我们 HTML 单页源码

小蓝IT • • 网站源码

雾紫+暖杏+墨绿编辑风的品牌关于我们单页，含故事/理念/工艺/时间轴/团队/CTA，响应式、复制即用。

屿见 YUJIAN 关于我们单页是一份面向小众生活方式品牌的「关于我们」模板，采用雾紫、暖杏、墨绿与米白构成的编辑风配色，整体气质安静、克制、有温度。页面以 sticky 顶部导航开场，配合大留白 Hero、品牌故事双栏、理念三卡、调香工艺三步、发展历程时间轴、真实数据条、团队三栏与邮件 CTA，结构完整地覆盖了一个品牌介绍页该有的全部模块。

设计亮点在于用”少即是多”的方式讲品牌：配色以低饱和的雾紫为主调，暖杏做点缀、墨绿压沉，过渡柔和不刺眼；卡片、时间轴、数据区均用细描边与轻投影制造层次，悬浮微动效提升质感但不喧宾夺主。全程单文件、内嵌 CSS、响应式，移动端自动收起导航并把多栏折叠为单列，PC 与手机浏览体验一致，且无需任何图片或外部依赖即可预览。

适用人群广泛：独立品牌主理人可直接套用这套”关于我们”结构对外讲述品牌故事，设计师能借鉴其编辑风配色与卡片栅格写法，初创团队可用它快速搭出官网 About 页原型，前端初学者也能通过这份清晰的源码学习单文件 HTML + CSS 的布局与响应式技巧。复制即用，二次修改成本极低。

屿见 YUJIAN 关于我们预览

使用教程

第一步：下载保存
将本页完整 HTML 源码（见文末代码块）保存为 index.html 文件，注意使用 UTF-8 编码，避免中文乱码。

第二步：本地预览
直接双击用浏览器打开 index.html，即可看到与本站预览图一致的效果，无需任何服务器或依赖。

第三步：自定义修改
替换品牌名、故事文案、团队成员与邮箱；如需换色，修改 <style> 中 --lav / --apricot / --green 等 CSS 变量即可一键换肤。

第四步：上线部署
把修改后的 index.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>屿见 YUJIAN · 关于我们</title>
<style>
  :root{
    --cream:#f7f3ec;
    --paper:#fffdf9;
    --ink:#2b2b2b;
    --muted:#7a736b;
    --lav:#b9a7c9;
    --lav-deep:#6f5a86;
    --apricot:#e8a87c;
    --green:#46584a;
    --line:#e4ddcf;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
    background:var(--cream);color:var(--ink);line-height:1.8;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px;}
  /* 顶部导航 */
  header.nav{
    position:sticky;top:0;z-index:10;background:rgba(247,243,236,.92);
    backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  }
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:64px;}
  .logo{font-size:20px;font-weight:700;letter-spacing:2px;color:var(--lav-deep);}
  .logo span{color:var(--ink);}
  .nav-links{display:flex;gap:28px;font-size:14px;color:var(--muted);}
  .nav-links a:hover{color:var(--lav-deep);}
  /* Hero */
  .hero{
    background:linear-gradient(135deg,#efe7f3 0%,#f7f3ec 55%,#f3ead9 100%);
    padding:96px 0 84px;
  }
  .hero .tag{
    display:inline-block;font-size:13px;letter-spacing:3px;color:var(--lav-deep);
    border:1px solid var(--lav);border-radius:999px;padding:6px 16px;margin-bottom:22px;
  }
  .hero h1{font-size:54px;line-height:1.2;letter-spacing:1px;margin-bottom:18px;}
  .hero h1 em{font-style:normal;color:var(--apricot);}
  .hero p{font-size:18px;color:var(--muted);max-width:560px;}
  .hero .actions{margin-top:34px;display:flex;gap:16px;flex-wrap:wrap;}
  .btn{
    display:inline-block;padding:13px 30px;border-radius:999px;font-size:15px;font-weight:600;
    transition:.25s;
  }
  .btn-primary{background:var(--lav-deep);color:#fff;}
  .btn-primary:hover{background:var(--green);}
  .btn-ghost{border:1px solid var(--lav-deep);color:var(--lav-deep);}
  .btn-ghost:hover{background:var(--lav-deep);color:#fff;}
  /* 通用区块 */
  section{padding:84px 0;}
  .eyebrow{font-size:13px;letter-spacing:3px;color:var(--apricot);font-weight:700;margin-bottom:12px;}
  h2.sec{font-size:34px;letter-spacing:1px;margin-bottom:20px;}
  .lead{font-size:17px;color:var(--muted);max-width:680px;}
  /* 品牌故事 */
  .story p{margin-top:18px;font-size:16px;color:#4a443d;}
  .story-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
  .story-quote{
    background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:34px;
    font-size:19px;color:var(--green);line-height:1.9;box-shadow:0 18px 40px -28px rgba(111,90,134,.4);
  }
  .story-quote b{color:var(--lav-deep);}
  /* 理念卡 */
  .values{background:var(--paper);}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px;}
  .card{
    background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:32px;
    transition:.25s;
  }
  .card:hover{transform:translateY(-6px);box-shadow:0 24px 48px -30px rgba(70,88,74,.5);}
  .card .ic{
    width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;
    font-size:24px;margin-bottom:18px;background:var(--lav);color:#fff;
  }
  .card:nth-child(2) .ic{background:var(--apricot);}
  .card:nth-child(3) .ic{background:var(--green);}
  .card h3{font-size:20px;margin-bottom:10px;}
  .card p{font-size:14px;color:var(--muted);}
  /* 工艺 */
  .craft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;}
  .craft{border-top:3px solid var(--lav);padding-top:20px;}
  .craft h4{font-size:17px;margin-bottom:8px;}
  .craft p{font-size:14px;color:var(--muted);}
  /* 时间轴 */
  .timeline{position:relative;margin-top:44px;padding-left:28px;}
  .timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--lav);}
  .tl-item{position:relative;margin-bottom:30px;}
  .tl-item::before{
    content:"";position:absolute;left:-27px;top:6px;width:14px;height:14px;border-radius:50%;
    background:var(--lav-deep);border:3px solid var(--cream);
  }
  .tl-item .yr{font-weight:700;color:var(--lav-deep);font-size:15px;}
  .tl-item p{font-size:15px;color:var(--muted);}
  /* 数据 */
  .stats{background:var(--green);color:#fff;}
  .stats .eyebrow{color:var(--apricot);}
  .stats h2.sec{color:#fff;}
  .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:36px;text-align:center;}
  .stat .num{font-size:42px;font-weight:800;color:var(--apricot);}
  .stat .lab{font-size:14px;opacity:.85;margin-top:6px;}
  /* 团队 */
  .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:40px;}
  .member{background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:hidden;}
  .member .ph{height:170px;background:linear-gradient(135deg,var(--lav),var(--apricot));}
  .member:nth-child(2) .ph{background:linear-gradient(135deg,var(--green),var(--lav));}
  .member:nth-child(3) .ph{background:linear-gradient(135deg,var(--apricot),var(--lav-deep));}
  .member .info{padding:22px;}
  .member h4{font-size:18px;}
  .member .role{font-size:13px;color:var(--apricot);margin:4px 0 10px;}
  .member p{font-size:14px;color:var(--muted);}
  /* CTA */
  .cta{background:linear-gradient(135deg,#efe7f3,#f3ead9);text-align:center;}
  .cta h2.sec{margin-bottom:14px;}
  .cta p{color:var(--muted);margin-bottom:28px;}
  footer{background:var(--ink);color:#cfc7bb;padding:36px 0;font-size:13px;}
  .foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
  /* 响应式 */
  @media(max-width:820px){
    .nav-links{display:none;}
    .hero h1{font-size:38px;}
    .story-grid,.cards,.craft-grid,.stat-grid,.team-grid{grid-template-columns:1fr;}
    .stat-grid{grid-template-columns:repeat(2,1fr);}
    section{padding:60px 0;}
    h2.sec{font-size:28px;}
  }
</style>
</head>
<body>

<header class="nav">
  <div class="wrap nav-in">
    <div class="logo">屿见<span>YUJIAN</span></div>
    <nav class="nav-links">
      <a href="#story">品牌故事</a>
      <a href="#values">我们的理念</a>
      <a href="#craft">调香工艺</a>
      <a href="#team">团队</a>
      <a href="#contact">联系我们</a>
    </nav>
  </div>
</header>

<section class="hero">
  <div class="wrap">
    <span class="tag">ABOUT US · 关于我们</span>
    <h1>把一座岛的安静，<br>装进<em>你的房间</em>。</h1>
    <p>屿见 YUJIAN 是一个专注家居香氛与生活方式的小众品牌，我们用植物与记忆调香，让每一次回家都像抵达一座只属于自己的小岛。</p>
    <div class="actions">
      <a class="btn btn-primary" href="#story">了解品牌</a>
      <a class="btn btn-ghost" href="#contact">合作咨询</a>
    </div>
  </div>
</section>

<section id="story" class="story">
  <div class="wrap story-grid">
    <div>
      <div class="eyebrow">OUR STORY</div>
      <h2 class="sec">从一间海边旧屋开始</h2>
      <p>屿见诞生于 2019 年一座面朝海湾的旧木屋。创始人小满在旅居海岛的第三年，开始用当地植物与果皮手工熬制香薰，送给在城市里失眠的朋友。意料之外地，这些带着海风与草木气味的蜡烛，成了许多人夜里安睡的理由。</p>
      <p>我们没有把屿见做成一家"卖香水的公司"。比起销量，我们更在意一瓶香薰能否让人慢下来三分钟——关掉手机、深呼吸、想起某片海或某个人。这份近乎固执的浪漫，构成了品牌全部的产品逻辑。</p>
    </div>
    <div class="story-quote">
      "气味是离记忆最近的东西。<b>我们不想制造香味，只想替你保管某些安静的瞬间。</b>"
      <div style="margin-top:18px;font-size:14px;color:var(--muted);">—— 屿见创始人 · 小满</div>
    </div>
  </div>
</section>

<section id="values" class="values">
  <div class="wrap">
    <div class="eyebrow">WHAT WE BELIEVE</div>
    <h2 class="sec">我们的理念</h2>
    <p class="lead">三件我们从不妥协的小事，也是屿见与绝大多数香氛品牌的不同之处。</p>
    <div class="cards">
      <div class="card">
        <div class="ic">🌿</div>
        <h3>真实植物</h3>
        <p>拒绝工业香精勾兑，核心气味全部来自真实花草、果皮与木质萃取，闻得到自然的毛边。</p>
      </div>
      <div class="card">
        <div class="ic">♻️</div>
        <h3>可持续容器</h3>
        <p>玻璃杯身可退回循环，蜡体采用大豆蜡，燃烧更干净，用完的杯子还能当笔筒或花瓶。</p>
      </div>
      <div class="card">
        <div class="ic">🤍</div>
        <h3>克制营销</h3>
        <p>不做夸大功效宣传，不请流量代言。把预算花在原料与包装上，剩下的交给气味自己说话。</p>
      </div>
    </div>
  </div>
</section>

<section id="craft" class="craft">
  <div class="wrap">
    <div class="eyebrow">THE CRAFT</div>
    <h2 class="sec">调香工艺</h2>
    <p class="lead">从一块蜂蜡到一支成品，平均需要经过 21 天。</p>
    <div class="craft-grid">
      <div class="craft">
        <h4>01 · 采气</h4>
        <p>每季度赴合作农场采集当季植物原料，低温萃取保留最本真的气味层次。</p>
      </div>
      <div class="craft">
        <h4>02 · 陈化</h4>
        <p>香基在避光陶罐中静置 14 天，让前中后调自然融合，去除刺鼻的"新味"。</p>
      </div>
      <div class="craft">
        <h4>03 · 灌制</h4>
        <p>手工控温灌蜡，冷却曲线决定燃烧是否均匀，每一支都经人工点火抽检。</p>
      </div>
    </div>
  </div>
</section>

<section class="timeline-sec">
  <div class="wrap">
    <div class="eyebrow">OUR JOURNEY</div>
    <h2 class="sec">一路走来</h2>
    <div class="timeline">
      <div class="tl-item"><div class="yr">2019</div><p>海岛旧屋的第一批手写蜡烛，送给 12 位朋友。</p></div>
      <div class="tl-item"><div class="yr">2021</div><p>开出发售的首个系列「潮间带」，上线三月售罄。</p></div>
      <div class="tl-item"><div class="yr">2023</div><p>建立自有调香实验室，完成容器回收体系。</p></div>
      <div class="tl-item"><div class="yr">2025</div><p>线下体验空间落地三座城市，会员破十万。</p></div>
    </div>
  </div>
</section>

<section class="stats">
  <div class="wrap">
    <div class="eyebrow">BY THE NUMBERS</div>
    <h2 class="sec">一些笨拙但真实的数据</h2>
    <div class="stat-grid">
      <div class="stat"><div class="num">21</div><div class="lab">天平均制作周期</div></div>
      <div class="stat"><div class="num">100%</div><div class="lab">大豆蜡原料</div></div>
      <div class="stat"><div class="num">3</div><div class="lab">座城市体验空间</div></div>
      <div class="stat"><div class="num">10万+</div><div class="lab">安静的会员</div></div>
    </div>
  </div>
</section>

<section id="team" class="values">
  <div class="wrap">
    <div class="eyebrow">THE PEOPLE</div>
    <h2 class="sec">背后的人</h2>
    <div class="team-grid">
      <div class="member">
        <div class="ph"></div>
        <div class="info">
          <h4>小满</h4>
          <div class="role">创始人 / 调香师</div>
          <p>把人生三分之一交给海岛的人，相信气味能替人记住想记的事。</p>
        </div>
      </div>
      <div class="member">
        <div class="ph"></div>
        <div class="info">
          <h4>阿树</h4>
          <div class="role">产品 / 包装</div>
          <p>极简主义信徒，负责让每一只杯子都好看又不浪费。</p>
        </div>
      </div>
      <div class="member">
        <div class="ph"></div>
        <div class="info">
          <h4>林一</h4>
          <div class="role">供应链 / 可持续</div>
          <p>跑遍农场与工厂，确保原料干净、回收闭环真正转得起来。</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section id="contact" class="cta">
  <div class="wrap">
    <div class="eyebrow">SAY HELLO</div>
    <h2 class="sec">想和屿见聊聊？</h2>
    <p>无论你是想代理、想合作线下空间，还是只想告诉我们你最喜欢的那支味道，都欢迎来信。</p>
    <a class="btn btn-primary" href="mailto:hi@yujian.example">hi@yujian.example</a>
  </div>
</section>

<footer>
  <div class="wrap foot-in">
    <div>© 2026 屿见 YUJIAN · 把一座岛的安静，装进你的房间。</div>
    <div>本页为 HTML 单页源码示例，品牌与数据均为演示用途。</div>
  </div>
</footer>

</body>
</html>

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

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

关于作者

小蓝IT的头像

小蓝IT

515 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
声临 SoundPro 旗舰降噪耳机 HTML 单页源码
上一篇 1天前
《GTA 6》上市倒计时之际，Rockstar 31 名前员工解雇案进入劳动法庭终审
下一篇 10小时前

相关推荐

发表回复

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