index.ejs

<div class="sidebar">
  <div class="sidebar-inner-index">
    <ul class="main-menu">
      <%- partial('partials/main_menu', { context: 'sidebar' }) %>
    </ul>
  </div>
</div>

<div id="hero">
  <div class="inner">
    <div class="left">
      <img class="hero-logo" src="<%- url_for("/images/logo.png") %>">
    </div><div class="right">
      <h2 class="vue">Vue.js</h2>
      <h1>
        The Progressive<br>JavaScript Framework
      </h1>
      <p>
        <a id="modal-player" class="button has-icon" href="javascript:;">
          <%- partial('icons/play') %>
          なぜ VUE.JS ?</a>
        <a class="button white" href="<%- url_for("/v2/guide/") %>">はじめる</a>
        <a class="button gray has-icon" href="https://github.com/vuejs/vue" target="_blank">
          <%- partial('icons/github-dark') %>
          GITHUB</a>
      </p>
    </div>
  </div>
</div>

<div id="special-sponsor">
  <a href="https://stdlib.com/" target="_blank">
    <span>Sponsored by</span>
    <img src="/images/stdlib.png">
    <span>Function as a Service Platform and Library</span>
  </a>
</div>

<div id="highlights">
  <div class="inner">
    <div class="point">
      <h2>親しみやすい</h2>
      <p>すでに HTML、CSS そして JavaScript を知っていますか？<br>
      ガイドを読んで、すぐにモノ作りを開始しましょう！</p>
    </div>

    <div class="point">
      <h2>融通が効く</h2>
      <p>ライブラリと完全な機能を備えたフレームワークの間で拡張できる徐々に採用可能なエコシステム</p>
    </div>

    <div class="point">
      <h2>高性能</h2>
      <p>
        20KB min+gzip<br>
        コンパクトなランタイム。<br>
        猛烈に速い Virtual DOM 。<br>
        最小限のみ成果で最適化が可能。
      </p>
    </div>
  </div>
</div>

<div id="sponsors">
  <div class="inner">
    <%- partial('partials/sponsors') %>
  </div>
</div>

<div id="footer">
  <p>
    <a class="social-icon" href="https://github.com/vuejs/vue" target="_blank">
      <%- partial('icons/github') %>
    </a>
    <a class="social-icon" href="https://twitter.com/vuejs" target="_blank">
      <%- partial('icons/twitter') %>
    </a>
    <a class="social-icon" href="https://medium.com/the-vue-point" target="_blank">
      <%- partial('icons/medium') %>
    </a>
  </p>
  <p>Released under the <a href="https://opensource.org/licenses/MIT" target="_blank">MIT License</a><br>
  Copyright &copy; 2014-<%- new Date().getFullYear() %> Evan You</p>
</div>

<div id="video-modal" class="modal">
  <div class="video-space" style="padding: 56.25% 0 0 0; position: relative;"><iframe src="https://player.vimeo.com/video/247494684" style="height: 100%; left: 0; position: absolute; top: 0; width: 100%;" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
</div>

<script>
(function () {
  var topScrolled = false
  var sponsors = document.getElementById('sponsors')
  var sponsorTop = sponsors.offsetTop
  var sponsorActive = false

  window.addEventListener('resize', function () {
    sponsorTop = sponsors.offsetTop
  })

  window.addEventListener('scroll', function () {
    if (window.pageYOffset > 165 && !topScrolled) {
      topScrolled = true
      document.getElementById('mobile-bar').classList.remove('top')
    } else if (window.pageYOffset <= 165 && topScrolled) {
      topScrolled = false
      document.getElementById('mobile-bar').classList.add('top')
    }
    if (window.pageYOffset > sponsorTop - 100) {
      if (!sponsorActive) {
        sponsorActive = true
        sponsors.classList.add('active')
      }
    } else {
      if (sponsorActive) {
        sponsorActive = false
        sponsors.classList.remove('active')
      }
    }
  })
})()
</script>