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

蓝鲸计划 BLUEWHALE 潜水俱乐部课程报名 HTML 单页源码

小蓝IT • • 网站源码

潜水俱乐部官网模板，深海暗色与青绿霓虹配色，含课程等级、潜点线路与安全承诺。

蓝鲸计划 BLUEWHALE 是一个潜水俱乐部的课程报名官网，目标用户是想系统学习潜水的零基础者与进阶潜水员。页面把「安全」作为核心卖点，用 1:2 教练配比、装备双检与体检前置建立专业信任。

视觉采用深海暗色背景、青绿色高亮与气泡上升动画，营造水下世界的沉浸感；课程等级卡片、潜点线路、安全承诺与报名表单一目了然，信息架构符合潜水这类高信任决策场景。

适合潜水俱乐部、冲浪学校、滑雪培训、攀岩馆等极限运动教育机构，也适合需要「课程 + 安全 + 预约」一体化展示的服务类网站。

蓝鲸计划 BLUEWHALE 潜水俱乐部课程报名 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">
<title>蓝鲸计划 BLUEWHALE · 潜水俱乐部课程报名</title>
<style>
:root{
  --abyss:#04121f;
  --deep:#082b45;
  --mid:#0f4c6b;
  --aqua:#2ee6c5;
  --aqua-d:#12b39a;
  --cyan:#4fc3f7;
  --sand:#f2e6c9;
  --text:#dcecf5;
  --muted:#8bb0c4;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei",Helvetica,sans-serif;background:var(--abyss);color:var(--text);line-height:1.78;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
.wrap{max-width:1150px;margin:0 auto;padding:0 24px}

/* 导航 */
header{position:sticky;top:0;z-index:60;background:rgba(4,18,31,.82);backdrop-filter:blur(14px);border-bottom:1px solid rgba(46,230,197,.16)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18.5px;letter-spacing:-.3px}
.brand .w{width:34px;height:34px;border-radius:11px;background:linear-gradient(150deg,var(--aqua),var(--mid));display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 0 20px rgba(46,230,197,.4)}
.menu{display:flex;gap:30px;font-size:14.5px;color:var(--muted);font-weight:600}
.menu a:hover{color:var(--aqua)}
.btn{display:inline-block;border-radius:999px;font-weight:800;transition:.22s}
.btn-a{background:var(--aqua);color:var(--abyss);padding:11px 24px;font-size:14.5px;box-shadow:0 0 24px rgba(46,230,197,.35)}
.btn-a:hover{background:#fff}
.btn-lg{padding:15px 34px;font-size:16px}
.btn-out{border:1.6px solid rgba(46,230,197,.55);color:var(--aqua);padding:15px 34px;font-size:16px;border-radius:999px;font-weight:800}
.btn-out:hover{background:rgba(46,230,197,.12)}

/* 首屏 */
.hero{position:relative;overflow:hidden;padding:112px 0 100px;
  background:
   radial-gradient(ellipse at 20% 8%,rgba(79,195,247,.25),transparent 52%),
   radial-gradient(ellipse at 82% 68%,rgba(46,230,197,.18),transparent 55%),
   linear-gradient(180deg,#0a3552 0%,#062639 46%,var(--abyss) 100%)}
.rays{position:absolute;inset:0;background:repeating-linear-gradient(105deg,rgba(255,255,255,.05) 0 3px,transparent 3px 46px);pointer-events:none}
.bub{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);animation:rise 12s linear infinite}
@keyframes rise{0%{transform:translateY(60px);opacity:0}12%{opacity:.85}100%{transform:translateY(-620px);opacity:0}}
.u1{width:11px;height:11px;left:12%;bottom:40px;animation-duration:13s}
.u2{width:7px;height:7px;left:26%;bottom:20px;animation-duration:10s;animation-delay:1.6s}
.u3{width:15px;height:15px;left:44%;bottom:60px;animation-duration:15s;animation-delay:.7s}
.u4{width:9px;height:9px;left:63%;bottom:30px;animation-duration:11.5s;animation-delay:2.4s}
.u5{width:13px;height:13px;left:79%;bottom:50px;animation-duration:14s;animation-delay:1.1s}
.u6{width:6px;height:6px;left:91%;bottom:14px;animation-duration:9s;animation-delay:3s}
.hero-in{position:relative;z-index:3;max-width:840px}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(46,230,197,.12);border:1px solid rgba(46,230,197,.4);color:var(--aqua);padding:8px 18px;border-radius:999px;font-size:13px;font-weight:700;margin-bottom:26px}
.hero h1{font-size:60px;font-weight:800;line-height:1.1;letter-spacing:-2.2px;margin-bottom:22px}
.hero h1 em{font-style:normal;background:linear-gradient(100deg,var(--aqua),var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:18px;color:var(--muted);max-width:560px;margin-bottom:36px}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:58px}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:820px}
.kpi div{border-left:2px solid rgba(46,230,197,.45);padding-left:16px}
.kpi b{display:block;font-size:29px;font-weight:800;color:var(--aqua);letter-spacing:-1px;line-height:1.3}
.kpi span{font-size:13px;color:var(--muted)}

/* 通用 */
.sec{padding:90px 0}
.sec-alt{background:linear-gradient(180deg,var(--abyss),#061f31)}
.head{max-width:660px;margin:0 auto 54px;text-align:center}
.head .kk{font-size:12px;font-weight:800;letter-spacing:4px;color:var(--aqua);margin-bottom:13px}
.head h2{font-size:37px;font-weight:800;letter-spacing:-1.2px;margin-bottom:13px;color:#fff}
.head p{color:var(--muted);font-size:16px}

/* 课程等级 */
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.lv{background:rgba(255,255,255,.045);border:1px solid rgba(139,176,196,.22);border-radius:20px;padding:30px 24px;position:relative;transition:.26s;overflow:hidden}
.lv::before{content:"";position:absolute;left:0;top:0;right:0;height:3px}
.lv:hover{transform:translateY(-7px);border-color:rgba(46,230,197,.55);background:rgba(46,230,197,.07)}
.lv1::before{background:var(--cyan)}
.lv2::before{background:var(--aqua)}
.lv3::before{background:#ffb74d}
.lv4::before{background:#ff7043}
.lv .dep{font-size:12px;font-weight:800;letter-spacing:2px;color:var(--muted);margin-bottom:12px}
.lv h3{font-size:20px;font-weight:800;color:#fff;margin-bottom:4px}
.lv .en{font-size:12px;color:var(--muted);letter-spacing:1.5px;margin-bottom:16px}
.lv .pz{font-size:30px;font-weight:800;color:var(--aqua);letter-spacing:-1px;line-height:1.2}
.lv .pz small{font-size:13px;color:var(--muted);font-weight:600;letter-spacing:0}
.lv ul{list-style:none;margin:18px 0 22px;font-size:14px}
.lv li{padding-left:20px;position:relative;margin-bottom:9px;color:var(--muted)}
.lv li::before{content:"◆";position:absolute;left:0;color:var(--aqua);font-size:10px;top:1px}
.lv .go{display:block;text-align:center;padding:11px;border-radius:999px;font-size:14px;font-weight:800;border:1.4px solid rgba(46,230,197,.45);color:var(--aqua)}
.lv .go:hover{background:var(--aqua);color:var(--abyss)}

/* 潜点 */
.sites{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.site{border-radius:20px;overflow:hidden;position:relative;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;padding:28px 26px;border:1px solid rgba(139,176,196,.2)}
.site::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(4,18,31,.9) 100%)}
.site>*{position:relative;z-index:2}
.s1{background:linear-gradient(155deg,#0d5c7a,#04263a)}
.s2{background:linear-gradient(155deg,#12756b,#05302c)}
.s3{background:linear-gradient(155deg,#1a4a80,#05203d)}
.site .em{position:absolute;top:24px;left:26px;font-size:48px;z-index:2;opacity:.9}
.site h3{font-size:22px;font-weight:800;color:#fff;margin-bottom:8px}
.site .meta{display:flex;gap:16px;font-size:13px;color:var(--aqua);font-weight:700;margin-bottom:10px;flex-wrap:wrap}
.site p{font-size:14.5px;color:#b9d4e2}

/* 安全承诺 */
.safe{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.safe h2{font-size:34px;font-weight:800;letter-spacing:-1px;color:#fff;margin-bottom:18px}
.safe p{color:var(--muted);margin-bottom:16px}
.safe-list{display:grid;gap:14px}
.si{display:flex;gap:16px;background:rgba(255,255,255,.045);border:1px solid rgba(139,176,196,.2);border-radius:14px;padding:18px 20px}
.si .ic{width:44px;height:44px;flex:0 0 44px;border-radius:12px;background:rgba(46,230,197,.14);display:flex;align-items:center;justify-content:center;font-size:21px}
.si h4{font-size:16px;font-weight:800;color:#fff;margin-bottom:3px}
.si p{font-size:14px;color:var(--muted);margin:0}

/* 报名 */
.signup{background:linear-gradient(135deg,var(--mid),var(--deep));padding:86px 0}
.su-in{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.su-in h2{font-size:35px;font-weight:800;letter-spacing:-1.2px;color:#fff;margin-bottom:16px}
.su-in p{color:#b9d4e2;margin-bottom:12px}
.checklist{list-style:none;margin-top:20px;font-size:14.5px}
.checklist li{padding:9px 0 9px 26px;position:relative;color:#cfe6f0}
.checklist li::before{content:"✓";position:absolute;left:0;color:var(--aqua);font-weight:900}
.form{background:rgba(4,18,31,.62);border:1px solid rgba(46,230,197,.28);border-radius:20px;padding:32px;backdrop-filter:blur(8px)}
.form h4{font-size:19px;font-weight:800;color:#fff;margin-bottom:20px}
.fd{margin-bottom:16px}
.fd label{display:block;font-size:12.5px;color:var(--aqua);letter-spacing:1px;margin-bottom:6px;font-weight:700}
.fd input,.fd select{width:100%;padding:13px 15px;background:rgba(255,255,255,.06);border:1px solid rgba(139,176,196,.3);border-radius:10px;color:var(--text);font-size:14.5px;font-family:inherit;outline:none}
.fd input:focus,.fd select:focus{border-color:var(--aqua)}
.fd input::placeholder{color:#6f93a8}
.sb{width:100%;padding:15px;background:var(--aqua);color:var(--abyss);border:none;border-radius:999px;font-size:15.5px;font-weight:800;cursor:pointer;font-family:inherit;box-shadow:0 0 26px rgba(46,230,197,.32)}
.sb:hover{background:#fff}
.tip{font-size:12.5px;color:var(--muted);text-align:center;margin-top:14px}

footer{background:#020c15;color:#6f93a8;padding:48px 0 28px;font-size:14px}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;margin-bottom:32px}
.f-grid h5{color:#fff;font-size:15px;font-weight:800;margin-bottom:13px}
.f-grid a{display:block;margin-bottom:8px}
.f-grid a:hover{color:var(--aqua)}
.cp{border-top:1px solid rgba(255,255,255,.09);padding-top:20px;text-align:center;font-size:13px}

@media(max-width:980px){
  .levels{grid-template-columns:repeat(2,1fr)}
  .sites,.safe,.su-in{grid-template-columns:1fr}
  .kpi{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:42px}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .menu{display:none}
  .hero h1{font-size:33px}
  .head h2{font-size:27px}
  .levels{grid-template-columns:1fr}
}
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <div class="brand"><span class="w">🐳</span>蓝鲸计划 BLUEWHALE</div>
    <nav class="menu">
      <a href="#level">课程等级</a>
      <a href="#site">潜点线路</a>
      <a href="#safe">安全承诺</a>
      <a href="#signup">立即报名</a>
    </nav>
    <a href="#signup" class="btn btn-a">报名下潜</a>
  </div>
</header>

<section class="hero">
  <div class="rays"></div>
  <span class="bub u1"></span><span class="bub u2"></span><span class="bub u3"></span>
  <span class="bub u4"></span><span class="bub u5"></span><span class="bub u6"></span>
  <div class="wrap hero-in">
    <div class="pill">🌊 2026 夏季班开放报名 · 每期限 8 人</div>
    <h1>海面之下<br>还有<em>另外七成的世界</em></h1>
    <p>蓝鲸计划是一间只做小班教学的潜水俱乐部。从第一次呼吸调节器，到 40 米深度进阶，我们用最慢的节奏，把你安全地带下去，再完整地带上来。</p>
    <div class="hero-btns">
      <a href="#level" class="btn btn-a btn-lg">查看课程等级</a>
      <a href="#site" class="btn-out">看看潜点</a>
    </div>
    <div class="kpi">
      <div><b>1,860+</b><span>累计培训学员</span></div>
      <div><b>1 : 2</b><span>教练学员配比</span></div>
      <div><b>12</b><span>常规潜点</span></div>
      <div><b>0</b><span>重大事故记录</span></div>
    </div>
  </div>
</section>

<section class="sec" id="level">
  <div class="wrap">
    <div class="head">
      <div class="kk">COURSES / 课程等级</div>
      <h2>从零基础到深潜，四级递进</h2>
      <p>全部课程含国际认证证书、教材、装备与保险，无隐性收费。</p>
    </div>
    <div class="levels">
      <div class="lv lv1">
        <div class="dep">最大深度 6 米</div>
        <h3>体验潜水</h3>
        <div class="en">DISCOVER DIVING</div>
        <div class="pz">¥680<small> /半天</small></div>
        <ul>
          <li>零基础当天可下水</li>
          <li>教练全程一对一陪同</li>
          <li>含水下摄影 20 张</li>
          <li>可抵扣开放水域学费</li>
        </ul>
        <a href="#signup" class="go">先试一次</a>
      </div>
      <div class="lv lv2">
        <div class="dep">最大深度 18 米</div>
        <h3>开放水域潜水员</h3>
        <div class="en">OPEN WATER · OW</div>
        <div class="pz">¥3,280<small> /3 天</small></div>
        <ul>
          <li>理论 + 泳池 + 4 次开放水域</li>
          <li>国际认证终身有效</li>
          <li>含全套装备与保险</li>
          <li>结业可全球自由潜点下水</li>
        </ul>
        <a href="#signup" class="go">最多人选</a>
      </div>
      <div class="lv lv3">
        <div class="dep">最大深度 30 米</div>
        <h3>进阶开放水域</h3>
        <div class="en">ADVANCED · AOW</div>
        <div class="pz">¥3,880<small> /3 天</small></div>
        <ul>
          <li>深潜 / 导航 / 夜潜专长</li>
          <li>中性浮力精修训练</li>
          <li>含 5 次进阶潜水</li>
          <li>需持 OW 证书</li>
        </ul>
        <a href="#signup" class="go">继续往下</a>
      </div>
      <div class="lv lv4">
        <div class="dep">最大深度 40 米</div>
        <h3>救援与深潜专长</h3>
        <div class="en">RESCUE &amp; DEEP</div>
        <div class="pz">¥5,680<small> /5 天</small></div>
        <ul>
          <li>应急处置与水面救援</li>
          <li>减压程序与气体管理</li>
          <li>含 8 次深潜实操</li>
          <li>通往潜导之路的必修</li>
        </ul>
        <a href="#signup" class="go">走专业路线</a>
      </div>
    </div>
  </div>
</section>

<section class="sec sec-alt" id="site">
  <div class="wrap">
    <div class="head">
      <div class="kk">DIVE SITES / 潜点线路</div>
      <h2>三条常规线路，各有各的脾气</h2>
      <p>所有潜点均由俱乐部教练年度复勘，按季节水温与能见度动态排期。</p>
    </div>
    <div class="sites">
      <div class="site s1">
        <span class="em">🪸</span>
        <h3>珊瑚花园</h3>
        <div class="meta"><span>深度 8–16 m</span><span>能见度 15–25 m</span><span>难度 ★★</span></div>
        <p>缓坡地形，软珊瑚成片铺开，小丑鱼与海葵密集。水流温和，最适合刚拿证的新手完成第一次自主潜水。</p>
      </div>
      <div class="site s2">
        <span class="em">🐢</span>
        <h3>海龟湾</h3>
        <div class="meta"><span>深度 12–24 m</span><span>能见度 20–30 m</span><span>难度 ★★★</span></div>
        <p>常年可见绿海龟觅食，偶遇魔鬼鱼群。有轻微侧流，适合已完成中性浮力训练的进阶潜水员。</p>
      </div>
      <div class="site s3">
        <span class="em">🚢</span>
        <h3>沉船遗址</h3>
        <div class="meta"><span>深度 26–38 m</span><span>能见度 10–20 m</span><span>难度 ★★★★</span></div>
        <p>一艘 1970 年代的货轮残骸，甲板已被软珊瑚覆盖。需持深潜专长证书，禁止单独进入舱内。</p>
      </div>
    </div>
  </div>
</section>

<section class="sec" id="safe">
  <div class="wrap safe">
    <div>
      <h2>安全不是卖点，是底线</h2>
      <p>潜水是一项容错率很低的运动。我们宁愿一天少带四个学员，也不愿在配比和检查流程上省一分钟。</p>
      <p>所有课程遇到能见度不足、水流超标或学员身体状态不佳时，教练有权无条件终止当次下潜，费用全额顺延或退还。</p>
    </div>
    <div class="safe-list">
      <div class="si">
        <div class="ic">👥</div>
        <div><h4>1 : 2 师生配比</h4><p>一名教练最多带两名学员，泳池阶段一对一。</p></div>
      </div>
      <div class="si">
        <div class="ic">🧰</div>
        <div><h4>装备每日双检</h4><p>出海前与下水前各检查一次，气瓶年度送检并留存记录。</p></div>
      </div>
      <div class="si">
        <div class="ic">🚑</div>
        <div><h4>船上急救配置</h4><p>纯氧急救包、AED 与卫星电话常备，教练均持急救证。</p></div>
      </div>
      <div class="si">
        <div class="ic">📋</div>
        <div><h4>体检前置</h4><p>报名需提交健康问卷，心肺与耳鼻异常者须医生签字。</p></div>
      </div>
    </div>
  </div>
</section>

<section class="signup" id="signup">
  <div class="wrap su-in">
    <div>
      <h2>下一期开班还剩 3 个名额</h2>
      <p>填写下方信息，我们会在 24 小时内与你确认体检要求、开班日期与集合方式。</p>
      <p>报名前不收取任何费用，确认开班后再付款，未成行全额退还。</p>
      <ul class="checklist">
        <li>会不会游泳？不会也能学，OW 课程只要求水中不恐慌</li>
        <li>近视可以配光学面镜，度数在报名时告知即可</li>
        <li>装备与教材全部包含，只需自带泳衣与防晒</li>
        <li>雨季与台风期自动顺延，不额外收费</li>
      </ul>
    </div>
    <form class="form" onsubmit="return false">
      <h4>报名下潜</h4>
      <div class="fd">
        <label>你的称呼</label>
        <input type="text" placeholder="怎么称呼你">
      </div>
      <div class="fd">
        <label>联系方式</label>
        <input type="tel" placeholder="手机号或微信">
      </div>
      <div class="fd">
        <label>想报的课程</label>
        <select>
          <option>体验潜水（半天 · ¥680）</option>
          <option>开放水域潜水员 OW（3 天 · ¥3,280）</option>
          <option>进阶开放水域 AOW（3 天 · ¥3,880）</option>
          <option>救援与深潜专长（5 天 · ¥5,680）</option>
        </select>
      </div>
      <div class="fd">
        <label>是否有潜水经验</label>
        <select>
          <option>完全零基础</option>
          <option>体验过，没有证书</option>
          <option>持 OW 证书</option>
          <option>持 AOW 及以上</option>
        </select>
      </div>
      <button class="sb" type="submit">提交报名意向</button>
      <div class="tip">提交即代表同意我们联系你确认体检要求</div>
    </form>
  </div>
</section>

<footer>
  <div class="wrap">
    <div class="f-grid">
      <div>
        <h5>蓝鲸计划 BLUEWHALE</h5>
        <p>只做小班教学的潜水俱乐部，把安全放在体验之前。</p>
      </div>
      <div>
        <h5>课程</h5>
        <a href="#level">体验潜水</a><a href="#level">开放水域 OW</a><a href="#level">进阶 AOW</a>
      </div>
      <div>
        <h5>潜点</h5>
        <a href="#site">珊瑚花园</a><a href="#site">海龟湾</a><a href="#site">沉船遗址</a>
      </div>
      <div>
        <h5>关于</h5>
        <a href="#safe">安全标准</a><a href="#">教练团队</a><a href="#">联系我们</a>
      </div>
    </div>
    <div class="cp">© 2026 蓝鲸计划 BLUEWHALE · 本页为演示用 HTML 单页模板</div>
  </div>
</footer>

</body>
</html>

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

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

关于作者

小蓝IT的头像

小蓝IT

496 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
拾革 SHIGE 手工皮具工作室 HTML 单页源码
上一篇 1小时前
岐黄堂中医养生理疗馆 HTML 单页源码
下一篇 41分钟前

相关推荐

发表回复

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