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") %>" alt="vue logo">
    </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') %>
          NEDEN VUE.JS?</a>
        <a class="button white" href="<%- url_for("/v2/guide/") %>">ÖĞRENMEYE BAŞLAYIN</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">
  <h3>Özel Sponsorumuz</h3>
  <% var specialSponsor = theme.special_sponsors[0]; %>
  <a href="<%- specialSponsor.url %>" target="_blank">
    <img src="<%- url_for(`/images/${specialSponsor.img}`) %>" style="width:160px" alt="Code.xyz Logo">
    <br>
    <span><%- specialSponsor.description %></span>
  </a>
</div>

<div id="highlights">
  <div class="inner">
    <div class="point">
      <h2>Öğrenmesi kolay</h2>
      <p>HTML, CSS ve JavaScript'e hakim misiniz? Kullanım kılavuzunu okuyarak projenize hızla başlayın!</p>
    </div>

    <div class="point">
      <h2>Çok yönlü kullanım</h2>
      <p>Projelerinizde bir kütüphaneden tam donanımlı bir framework'e kadar kademeli olarak kullanmaya başlayabileceğiniz bir ekosistem.</p>
    </div>

    <div class="point">
      <h2>Yüksek Performanslı</h2>
      <p>
        Min+gzip olarak 20KB Runtime<br>
        Hız sınırı tanımayan Sanal DOM<br>
        Asgari Optimizasyon ihtiyacı
      </p>
    </div>
  </div>
</div>

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

<div id="news">
  <div class="inner">
    <h3><label for="member_email">Haftalık Haber Bültenimize abone olun</label></h3>
    <form
      class="newsletter-form"
      id="revue-form"
      name="revue-form"
      target="_blank"
      action="https://www.getrevue.co/profile/vuenewsletter/add_subscriber"
      method="post"
      @submit="subscribe"
    >
      <input
        class="newsletter-input"
        type="email"
        name="member[email]"
        id="member_email"
        required
        placeholder="E-posta adresi"
      >
      <input
        class="button newsletter-button"
        type="submit"
        value="Subscribe"
        name="member[subscribe]"
        id="member_submit"
      >
    </form>
    <p>
      Geçmişteki yayınları okumak ve podcastımızı dinlemek için <a href="https://news.vuejs.org" target="_blank">news.vuejs.org</a> adresini ziyaret edin.
    </p>
  </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><a href="https://opensource.org/licenses/MIT" target="_blank">MIT Lisansı</a> çerçevesinde yayınlanmaktadır<br>
  Telif Hakkı &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>
  <p class="modal-text">Videoyu hazırlayan: <a href="https://www.vuemastery.com" target="_blank" rel="noopener" title="Vue.js Courses on Vue Mastery">Vue Mastery</a>. Watch Vue Mastery's free <a href="https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/" target="_blank" rel="noopener" title="Vue.js Courses on Vue Mastery">Intro to Vue course</a>.
  </p>
</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>