极光旅人 Aurora 极地探险旅行品牌官网 HTML 单页源码

极光旅人 Aurora 是专注极地与高纬度深度探险旅行的品牌官网，面向愿意为”小众目的地 + 当地向导 + 全程保障”买单的旅行者，主张把孤独写成浪漫的远行体验。

设计以深蓝夜空为底，叠加多重极光径向渐变，标题用流光渐变文字制造极光流动感；目的地三栏卡片、雪橇/玻璃屋/摄影体验区与极光专线预订卡层层递进，沉浸氛围拉满。

它适合极地与小众目的地旅行服务商、高端定制游与户外探险品牌，也适合想用沉浸氛围讲好品牌故事的旅行机构。作为旅行品牌落地页，氛围营造与行程承接的平衡值得借鉴。

使用教程

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>极光旅人 Aurora · 极地探险旅行品牌官网</title>
<style>
  :root{
    --night:#070b1e; --deep:#0d1530; --ice:#aef3ff; --aurora1:#34f5c5; --aurora2:#7b8cff;
    --aurora3:#c77dff; --mist:#9fb2d8; --soft:#dce8ff;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;background:var(--night);color:var(--soft);line-height:1.7;overflow-x:hidden}
  .wrap{max-width:1140px;margin:0 auto;padding:0 26px}
  .aurora{position:fixed;inset:0;z-index:0;background:
    radial-gradient(60% 40% at 20% 10%,rgba(52,245,197,.20),transparent 60%),
    radial-gradient(50% 45% at 75% 8%,rgba(123,140,255,.22),transparent 60%),
    radial-gradient(45% 40% at 50% 22%,rgba(199,125,255,.16),transparent 60%),
    linear-gradient(180deg,var(--night),var(--deep) 55%,#04060f);opacity:.95}
  header{position:relative;z-index:3;padding:24px 0}
  .nav{display:flex;align-items:center;justify-content:space-between}
  .logo{font-weight:800;letter-spacing:1px;font-size:20px;color:#fff}
  .logo span{background:linear-gradient(90deg,var(--aurora1),var(--aurora2),var(--aurora3));-webkit-background-clip:text;background-clip:text;color:transparent}
  .nav a{margin-left:26px;color:var(--mist);font-size:14px;transition:.2s}
  .nav a:hover{color:var(--ice)}
  .hero{position:relative;z-index:3;text-align:center;padding:96px 0 80px}
  .hero .tag{display:inline-block;padding:6px 18px;border:1px solid rgba(174,243,255,.4);border-radius:30px;color:var(--ice);font-size:13px;margin-bottom:22px;letter-spacing:1px}
  .hero h1{font-size:56px;line-height:1.15;font-weight:800;max-width:760px;margin:0 auto;color:#fff}
  .hero h1 em{font-style:normal;background:linear-gradient(90deg,var(--aurora1),var(--aurora2),var(--aurora3));-webkit-background-clip:text;background-clip:text;color:transparent}
  .hero p{margin:22px auto 0;max-width:540px;color:var(--mist);font-size:17px}
  .cta{display:inline-flex;gap:14px;margin-top:38px;flex-wrap:wrap;justify-content:center}
  .btn{background:linear-gradient(90deg,var(--aurora1),var(--aurora2));color:#04121f;padding:14px 36px;border-radius:40px;font-weight:800;transition:.25s}
  .btn:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(123,140,255,.45)}
  .btn.ghost{background:transparent;border:1px solid rgba(174,243,255,.45);color:var(--soft)}
  .dest{position:relative;z-index:3;padding:40px 0 90px}
  .section-h{text-align:center;margin-bottom:44px}
  .section-h .k{font-size:12px;letter-spacing:4px;color:var(--aurora1);margin-bottom:12px}
  .section-h h2{font-size:34px;font-weight:800;color:#fff}
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .card{border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);transition:.3s}
  .card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(52,245,197,.18)}
  .card .img{aspect-ratio:4/3;display:flex;align-items:flex-end;padding:18px;font-size:30px;font-weight:800;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4)}
  .card:nth-child(1) .img{background:linear-gradient(135deg,#0a3b52,#0f6e6e)}
  .card:nth-child(2) .img{background:linear-gradient(135deg,#1a1147,#5b3bd6)}
  .card:nth-child(3) .img{background:linear-gradient(135deg,#06303f,#1f8fae)}
  .card .meta{padding:20px 22px}
  .card .meta h3{font-size:18px;color:#fff}
  .card .meta p{color:var(--mist);font-size:14px;margin-top:6px}
  .feat{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:10px 0 90px}
  .feat .c{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:30px 24px}
  .feat .c .ic{font-size:30px}
  .feat .c h3{color:#fff;font-size:18px;margin:12px 0 8px}
  .feat .c p{color:var(--mist);font-size:14px}
  .pledge{position:relative;z-index:3;text-align:center;padding:20px 0 100px}
  .pledge .card{display:inline-block;background:linear-gradient(135deg,rgba(13,21,48,.9),rgba(28,40,90,.9));border:1px solid rgba(123,140,255,.5);border-radius:26px;padding:48px 54px;max-width:480px}
  .pledge .card h2{font-size:28px;color:#fff;margin-bottom:14px}
  .pledge .card p{color:var(--mist);margin-bottom:26px}
  .pledge .card a{display:inline-block;background:linear-gradient(90deg,var(--aurora1),var(--aurora2));color:#04121f;padding:14px 40px;border-radius:40px;font-weight:800}
  footer{position:relative;z-index:3;text-align:center;padding:30px 0;color:#6f82ad;font-size:13px;border-top:1px solid rgba(255,255,255,.08)}
  @media(max-width:760px){.hero h1{font-size:36px}.grid,.feat{grid-template-columns:1fr}.nav a{margin-left:14px}.pledge .card{padding:38px 26px}}
</style>
</head>
<body>
<div class="aurora"></div>
<header><div class="wrap nav">
  <div class="logo">极光旅人<span>Aurora</span></div>
  <nav><a href="#dest">目的地</a><a href="#exp">体验</a><a href="#book">预订</a></nav>
</div></header>

<section class="hero"><div class="wrap">
  <span class="tag">去世界的尽头，看光</span>
  <h1>追寻<em>北极光</em><br>把孤独写成浪漫</h1>
  <p>极光旅人 Aurora 专注极地与高纬度的深度探险旅行，用当地向导、小众路线与全程保障，带你抵达别人到不了的地方。</p>
  <div class="cta">
    <a class="btn" href="#book">查看行程</a>
    <a class="btn ghost" href="#dest">热门目的地</a>
  </div>
</div></section>

<section id="dest" class="dest"><div class="wrap">
  <div class="section-h"><div class="k">DESTINATIONS</div><h2>热门极地目的地</h2></div>
  <div class="grid">
    <div class="card"><div class="img">特罗姆瑟</div><div class="meta"><h3>挪威 · 特罗姆瑟</h3><p>北极圈内的极光之城，9 月至次年 4 月追光成功率最高。</p></div></div>
    <div class="card"><div class="img">冰岛南岸</div><div class="meta"><h3>冰岛 · 南岸环线</h3><p>冰川、黑沙滩与火山同框，极光之下地貌如外星球。</p></div></div>
    <div class="card"><div class="img">黄刀镇</div><div class="meta"><h3>加拿大 · 黄刀镇</h3><p>地处极光椭圆中心，晴夜可见概率超过 90%。</p></div></div>
  </div>
</div></section>

<section id="exp" class="dest" style="padding-top:0"><div class="wrap">
  <div class="section-h"><div class="k">EXPERIENCE</div><h2>我们提供的远行体验</h2></div>
  <div class="feat">
    <div class="c"><div class="ic">🛷</div><h3>雪原狗拉雪橇</h3><p>在专业驯犬师带领下穿越冰原，感受最原始的极地速度。</p></div>
    <div class="c"><div class="ic">🏕️</div><h3>玻璃屋住宿</h3><p>躺在恒温玻璃穹顶下，盖着被子等一场极光在头顶炸开。</p></div>
    <div class="c"><div class="ic">📷</div><h3>极光摄影课</h3><p>随团摄影师手把手教你长曝参数，把今晚的光带回家。</p></div>
  </div>
</div></section>

<section id="book" class="pledge"><div class="wrap">
  <div class="card">
    <h2>5 天 4 晚极光专线</h2>
    <p>含当地接送、玻璃屋住宿、狗拉雪橇与摄影课程，全年多团期可选。</p>
    <a href="#">立即预订</a>
  </div>
</div></section>

<footer>© 2026 极光旅人 Aurora · 愿你与光同行</footer>
</body>
</html>

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