栖香 Nose Garden 香氛品牌产品展示页 HTML 单页源码

这是一款为独立香氛工作室、原创香水品牌与调香师个人 IP 设计的产品展示页模板。整体以深紫为底色，搭配玫瑰金与琥珀金点缀，营造出「暗夜 + 花香」的质感氛围，契合精品香氛「不张扬、有记忆点」的产品调性。首屏以「把一座花园，装进你的呼吸里」点题，配合 21 天新香首发倒计时钩子，第一时间建立品牌故事感。

页面结构上首屏是品牌主张 + 倒计时，中段为三款常驻香氛的产品网格（每款都配 CSS 绘制的香水瓶 silhouette + 名称 / 香调 / 价格），再往下是「前调 / 中调 / 后调」香调故事三段，底部是季度订阅礼盒的邮箱收集表单。整体响应式适配，移动端多列网格自动堆叠为单列。

非常适合独立香氛工作室、原创香水品牌、香薰蜡烛与精油品牌，也可作为芳疗或生活方式集合页。替换品牌名、香水名、香调、价格与订阅文案后即可直接上线。

使用教程

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>栖香 Nose Garden · 小众香氛品牌</title>
<style>
  :root{
    --bg:#150d20; --bg2:#1d1230; --card:#241733; --line:#33223f;
    --gold:#e8b894; --gold2:#d49a73; --txt:#f5ecf3; --mut:#b6a3c4; --dim:#7d6b8c;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:system-ui,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--txt);line-height:1.7}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1140px;margin:0 auto;padding:0 24px}
  header{background:rgba(21,13,32,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
  .nav{display:flex;align-items:center;justify-content:space-between;height:64px}
  .logo{font-weight:800;letter-spacing:2px;font-size:20px;color:var(--gold)}
  .nav a{color:var(--mut);margin-left:26px;font-size:14px}
  .nav a:hover{color:var(--gold)}
  .hero{padding:84px 0 70px;text-align:center;
    background:radial-gradient(820px 420px at 50% -10%,rgba(232,184,148,.18),transparent 60%),radial-gradient(680px 360px at 85% 5%,rgba(212,154,115,.12),transparent 60%)}
  .hero .tag{color:var(--gold2);letter-spacing:6px;font-size:13px}
  .hero h1{font-size:54px;line-height:1.12;margin:14px 0;letter-spacing:2px}
  .hero h1 em{font-style:normal;color:var(--gold)}
  .hero p{color:var(--mut);max-width:560px;margin:0 auto 26px;font-size:16px}
  .btn{display:inline-block;background:linear-gradient(135deg,var(--gold),var(--gold2));color:#23131f;padding:13px 36px;border-radius:999px;font-weight:700;letter-spacing:1px}
  .count{display:flex;gap:14px;justify-content:center;margin:30px 0 6px}
  .count .u{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 20px;min-width:78px}
  .count .u b{display:block;font-size:30px;color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums}
  .count .u span{color:var(--mut);font-size:12px}
  section{padding:68px 0}
  .tag{color:var(--gold);letter-spacing:4px;font-size:13px;text-align:center}
  h2{font-size:31px;text-align:center;letter-spacing:1px;margin:8px 0 12px}
  .lead{color:var(--mut);text-align:center;max-width:620px;margin:0 auto}
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
  .p{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;text-align:center;transition:.25s}
  .p:hover{transform:translateY(-6px);border-color:var(--gold)}
  .p .bot{width:84px;height:104px;margin:0 auto 16px;border-radius:14px 14px 18px 18px;
    background:linear-gradient(160deg,var(--gold),var(--gold2));position:relative;box-shadow:inset 0 -14px 22px rgba(0,0,0,.25)}
  .p .bot::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:20px;height:12px;background:var(--bg2);border-radius:3px}
  .p h3{font-size:18px;color:var(--gold)}
  .p .note{color:var(--mut);font-size:13px;margin:6px 0 10px}
  .p .price{color:var(--txt);font-weight:700}
  .notes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
  .n{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:24px}
  .n h3{color:var(--gold);font-size:17px;margin-bottom:6px}
  .n p{color:var(--mut);font-size:14px}
  .cta{text-align:center;background:linear-gradient(160deg,var(--bg2),var(--bg));border-top:1px solid var(--line)}
  .cta .box{max-width:560px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:36px}
  .cta input{width:100%;padding:13px 16px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--txt);margin:14px 0 0;font-size:14px}
  footer{border-top:1px solid var(--line);padding:28px 0;text-align:center;color:var(--dim);font-size:13px}
  @media(max-width:860px){.hero h1{font-size:36px}.grid,.notes{grid-template-columns:1fr}.nav a{margin-left:14px;font-size:13px}.count .u{min-width:62px;padding:10px 12px}.count .u b{font-size:24px}}
</style>
</head>
<body>
<header><div class="wrap nav">
  <div class="logo">栖香 · Nose Garden</div>
  <nav><a href="#shop">香氛系列</a><a href="#notes">香调故事</a><a href="#box">订阅礼盒</a><a href="#box">购买</a></nav>
</div></header>

<section class="hero"><div class="wrap">
  <div class="tag">SMALL-BATCH INDIE PERFUME</div>
  <h1>把一座<em>花园</em>，<br>装进你的呼吸里</h1>
  <p>栖香是一间专注小批量调香的独立香氛工作室，每一支都来自真实植物与手工萃取，拒绝千篇一律的工业香精。</p>
  <a class="btn" href="#shop">探索香氛</a>
  <div class="count" id="count">
    <div class="u"><b id="d">--</b><span>天</span></div>
    <div class="u"><b id="h">--</b><span>时</span></div>
    <div class="u"><b id="m">--</b><span>分</span></div>
    <div class="u"><b id="s">--</b><span>秒</span></div>
  </div>
  <div class="tag" style="margin-top:6px">新香「暮山」限量首发倒计时</div>
</div></section>

<section id="shop"><div class="wrap">
  <div class="tag">THE COLLECTION</div>
  <h2>三款常驻香氛</h2>
  <div class="lead">从清晨的柑橘到深夜的木质，覆盖你一天的情绪光谱。</div>
  <div class="grid">
    <div class="p"><div class="bot"></div><h3>晨雾 Citrus</h3><div class="note">佛手柑 · 白茶 · 薄荷</div><div class="price">¥ 268 / 30ml</div></div>
    <div class="p"><div class="bot"></div><h3>暖木 Wood</h3><div class="note">雪松 · 广藿香 · 香草</div><div class="price">¥ 298 / 30ml</div></div>
    <div class="p"><div class="bot"></div><h3>夜蔷 Rose</h3><div class="note">大马士革玫瑰 · 麝香</div><div class="price">¥ 318 / 30ml</div></div>
  </div>
</div></section>

<section id="notes" style="background:var(--bg2)"><div class="wrap">
  <div class="tag">SCENT NOTES</div>
  <h2>每一支都有故事</h2>
  <div class="notes">
    <div class="n"><h3>前调 · 第一印象</h3><p>柑橘与清茶在喷上的瞬间炸开，像推开窗迎面而来的晨风，干净而轻盈。</p></div>
    <div class="n"><h3>中调 · 情绪核心</h3><p>花香与草本在中段缓缓铺陈，是整支香的灵魂，决定它“像不像你”。</p></div>
    <div class="n"><h3>后调 · 余温记忆</h3><p>木质与麝香沉到皮肤里，几小时后仍留一缕暖意，是只属于你的签名。</p></div>
  </div>
</div></section>

<section class="cta" id="box"><div class="wrap">
  <div class="tag">SUBSCRIPTION</div>
  <h2>订阅季度香盒</h2>
  <div class="box">
    <p class="lead">每季一支限定小样 + 一支正装折扣券，让嗅觉永远有新鲜感。</p>
    <input placeholder="输入邮箱，抢先收到新香提醒" />
    <a class="btn" href="#" style="margin-top:16px">立即订阅 ¥99/季</a>
  </div>
</div></section>

<footer>© 2026 栖香 Nose Garden 调香工作室 · 慢一点，才好闻</footer>

<script>
  (function(){
    var target = new Date(); target.setDate(target.getDate() + 21); target.setHours(20,0,0,0);
    function pad(n){return (n<10?"0":"")+n;}
    function tick(){
      var diff = target - new Date(); if(diff<0) diff=0;
      document.getElementById("d").textContent = Math.floor(diff/86400000);
      document.getElementById("h").textContent = pad(Math.floor(diff%86400000/3600000));
      document.getElementById("m").textContent = pad(Math.floor(diff%3600000/60000));
      document.getElementById("s").textContent = pad(Math.floor(diff%60000/1000));
    }
    tick(); setInterval(tick,1000);
  })();
</script>
</body>
</html>

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