original-god
/
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>《原神》官方网站-米哈游开放世界冒险RPG</title>
    <link rel="shortcut icon" href="./asset/favicon.ico" type="image/x-icon" />
    <link
      rel="stylesheet"
      href="https://at.alicdn.com/t/font_3199792_qxbenv3ogv.css"
    />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/header.css" />
    <link rel="stylesheet" href="./css/poster.css" />
    <link rel="stylesheet" href="./css/news.css" />
    <link rel="stylesheet" href="./css/city.css" />
    <link rel="stylesheet" href="./css/footer.css" />
  </head>
  <body>
    <div class="header">
      <div class="header-left">
        <div class="header-music">
          <audio id="bgm-wind" src="./asset/bgm-wind.mp3" loop></audio>
          <audio id="bgm-music" src="./asset/bgm-music.mp3" loop></audio>
        </div>
        <a href="" class="header-logo">
          <h1>原神</h1>
        </a>
        <div class="header-nav">
          <a class="active" href="">首页</a>
          <a href="">新闻</a>
          <a href="">角色</a>
          <a href="">世界</a>
          <a href="">漫画</a>
          <a href="">社区</a>
          <div class="header-nav-bar"></div>
        </div>
      </div>
      <div class="header-right">
        <a href="">
          <span>成长关爱系统</span>
          <img src="./asset/heart.png" alt="" />
        </a>
        <a href="">
          <span>登录</span>
          <img src="./asset/user.png" alt="" />
        </a>
      </div>
    </div>
    <div class="poster">
      <video
        muted
        autoplay
        loop
        class="poster-video"
        src="./asset/video.mp4"
      ></video>
      <img src="./asset/badge.png" class="poster-badge" />
      <div class="poster-arrows">
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="poster-d">
        <a href="" class="poster-d-sq poster-qrcode">
          <img src="./asset/d-qrcode.png" alt="" />
          <img src="./asset/d-qrcode.jpeg" alt="" />
        </a>
        <div class="poster-d-rec">
          <a href="" class="switch">
            <img src="./asset/d-ps.png" alt="" />
            <img src="./asset/d-ps-modal.png" alt="" />
          </a>
          <a href="" class="switch">
            <img src="./asset/d-ios.png" alt="" />
            <img src="./asset/d-ios-modal.png" alt="" />
          </a>
        </div>
        <div class="poster-d-rec">
          <a href="" class="switch">
            <img src="./asset/d-tap.png" alt="" />
            <img src="./asset/d-tap-modal.png" alt="" />
          </a>
          <a href="" class="switch">
            <img src="./asset/d-android.png" alt="" />
            <img src="./asset/d-android-modal.png" alt="" />
          </a>
        </div>
        <a href="" class="poster-d-sq switch poster-pc">
          <img src="./asset/d-pc.png" alt="" />
          <img src="./asset/d-pc-modal.png" alt="" />
        </a>
      </div>
      <div class="poster-play">
        <div class="poster-play-button"></div>
      </div>

      <div class="poster-modal">
        <video
          src="https://webstatic.mihoyo.com/upload/op-public/2020/09/27/fd431739ff26ceeb3010ac561d68446b_345688670889091949.mp4"
          controls
        ></video>
      </div>
    </div>

    <div class="news">
      <h2>
        <span>新闻资讯</span>
      </h2>
      <div class="news-main">
        <div class="news-banner">
          <div class="news-banner-links">
            <a href="">
              <img src="./asset/banner1.jpg" alt="" />
            </a>
            <a href="">
              <img src="./asset/banner2.jpg" alt="" />
            </a>
            <a href="">
              <img src="./asset/banner3.jpg" alt="" />
            </a>
            <a href="">
              <img src="./asset/banner4.jpg" alt="" />
            </a>
          </div>

          <div class="news-banner-indicators">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
        <div class="news-block">
          <div class="news-nav">
            <span class="active">最新</span>
            <span>新闻</span>
            <span>公告</span>
            <span>活动</span>
          </div>
          <div class="news-list"></div>
          <a href="" class="news-more">查看全部资讯</a>
        </div>
      </div>
    </div>
    <div class="city">
      <a href="">
        <img src="./asset/city1.jpg" alt="" class="city-img" />
        <img src="./asset/h1.png" alt="" class="city-hero" />
        <h2>蒙德城</h2>
      </a>
      <a href="">
        <img src="./asset/city2.jpg" alt="" class="city-img" />
        <img src="./asset/h2.png" alt="" class="city-hero" />
        <h2>璃月港</h2>
      </a>
      <a href="">
        <img src="./asset/city3.jpg" alt="" class="city-img" />
        <img src="./asset/h3.png" alt="" class="city-hero" />
        <h2>稻妻城</h2>
      </a>
      <a class="city-wait">
        <img src="./asset/wait.jpg" alt="" class="city-img" />
        <h2>敬请期待</h2>
      </a>
    </div>

    <div class="footer">
      <div class="footer-contact">
        <a href="">
          <i class="iconfont icon-weibo"></i>
        </a>
        <a href="">
          <i class="iconfont icon-weixin"></i>
        </a>
        <a href="">
          <i class="iconfont icon-QQ"></i>
        </a>
        <a href="">
          <i class="iconfont icon-fenxiang"></i>
        </a>
      </div>
      <div class="footer-main">
        <div class="footer-main-container">
          <div class="footer-corp-logo">
            <img src="./asset/corp-logo.png" alt="" />
          </div>
          <div class="footer-split"></div>
          <div class="footer-game-logo">
            <img src="./asset/game-logo.png" alt="" />
          </div>
          <div class="footer-content">
            <div class="footer-links">
              <a href="">用户协议</a>
              <a href="">隐私政策</a>
              <a href="">儿童隐私政策</a>
              <a href="">自律公约</a>
              <a href="">家长监护工程</a>
              <a href="">关于我们</a>
              <a href="">联系我们</a>
              <a href="">加入我们</a>
            </div>
            <div class="footer-info">
              <p>
                健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。
              </p>
              <p>
                <a href="">沪公网安备31010402001113号</a>
                | 增值电信业务经营许可证：沪B2-20190555
              </p>
              <p>
                <a href="">沪ICP备19018275号-4</a>
                | 沪网文〔2019〕3168-216号 | 国新出审【2019】2978号
              </p>
              <p>
                互联网违法不良信息举报邮箱: tousu@mihoyo.com
                互联网违法不良信息举报电话: 021-60371750 （工作时间：每天10点 -
                20点）
              </p>
              <p>
                亲爱的市民朋友，上海警方反诈劝阻电话“962110”系专门针对避免您财产被骗受损而设，请您一旦收到来电，立即接听
              </p>
              <p>未成年成长关爱热线：021-60371740</p>
              <p>
                © 2020 米哈游版权所有 | 上海米哈游影铁科技有限公司
                客服电话：400-666-6312
              </p>
            </div>
            <div class="footer-aside">
              <a href="">
                <img src="./asset/footer-icon1.png" alt="" />
              </a>
              <a href="">
                <img src="./asset/footer-icon2.png" alt="" />
              </a>
              <a href="">
                <img src="./asset/footer-icon3.png" alt="" />
              </a>
              <a href="">
                <img src="./asset/footer-icon4.png" alt="" />
              </a>
              <a href="">
                <img src="./asset/footer-icon5.png" alt="" />
              </a>
              <a href="">
                <img src="./asset/footer-icon6.png" alt="" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="./js/common.js"></script>
    <script src="./js/header.js"></script>
    <script src="./js/poster.js"></script>
    <script src="./js/news.js"></script>
  </body>
</html>