<!doctype html>
<html lang="en">

  {% include head.html %}

  <body>
    <header class="hero" role="banner">
      <nav class="navbar navbar-expand-lg navbar-dark fixed-top navbar-home" role="navigation">
        {% include header.html %}
      </nav>
      <div class="container-fluid hero-overlay">
        <div class="row align-items-center justify-content-center">
          <div class="col align-self-center">
            <h1 class="hero-overlay-text">Building a virtualization API for Kubernetes</h1>
            <a id="demo-video" href="#" video-url="https://youtu.be/uusM5SyK-vc" class="btn kv-btn kv-btn-primary hero-overlay__action">
              <svg width="20px" height="20px" enable-background="new 0 0 142.448 142.448" viewBox="0 0 142.448 142.448" xmlns="http://www.w3.org/2000/svg"><g fill="#006166"><path d="m142.411 68.9c-1.195-37.42-31.443-67.667-68.862-68.862-20.361-.646-39.41 7.104-53.488 21.639-13.534 13.973-20.645 32.394-20.023 51.872 1.194 37.419 31.442 67.667 68.861 68.861.779.025 1.551.037 2.325.037 19.454 0 37.624-7.698 51.163-21.676 13.534-13.972 20.646-32.394 20.024-51.871zm-30.798 41.436c-10.688 11.035-25.032 17.112-40.389 17.112-.614 0-1.228-.01-1.847-.029-29.532-.943-53.404-24.815-54.348-54.348-.491-15.382 5.122-29.928 15.806-40.958 10.688-11.035 25.032-17.112 40.389-17.112.614 0 1.228.01 1.847.029 29.532.943 53.404 24.815 54.348 54.348.491 15.382-5.123 29.928-15.806 40.958z"/><path d="m94.585 67.086-31.584-22.646c-3.369-2.416-8.059-.008-8.059 4.138v45.293c0 4.146 4.69 6.554 8.059 4.138l31.583-22.647c2.834-2.031 2.834-6.244.001-8.276z"/></g></svg>
              Watch our intro video
            </a>
          </div>
        </div>
          <div class="kv-card-group">
            <header class="kv-card-group__header">
              <h2>Try KubeVirt now</h2>
              <p>Try KubeVirt right now on the following platforms</p>
            </header>
            <div class="kv-card">
              <div class="kv-card-body">
                <img src="./../assets/images/minikube-logo.svg" width="60px" height="60px" alt="MiniKube Logo">
                <p class="kv-card-text">
                  KubeVirt on MiniKube
                </p>
              </div>
                <a href="{{ site.baseURL }}quickstart_minikube" class="btn kv-btn kv-btn-primary" aria-label="Try It button">Try MiniKube!</a>
            </div>
            <div class="kv-card">
              <div class="kv-card-body">
                <img src="./../assets/images/kind.svg" width="84px" height="64px" alt="Kind Logo">
                <p class="kv-card-text">
                  KubeVirt on Kind
                </p>
              </div>
                <a href="{{ site.baseURL }}quickstart_kind" class="btn kv-btn kv-btn-primary" aria-label="Try It button">Try Kind!</a>
            </div>
            <div class="kv-card">
              <div class="kv-card-body">
                <img src="./../assets/images/killercoda_logo.svg" width="84px" height="64px" alt="Killercoda Logo">
                <p class="kv-card-text">
                  KubeVirt on Killercoda
                </p>
              </div>
                <a href="https://killercoda.com/kubevirt" class="btn kv-btn kv-btn-primary" aria-label="Try It button">Try Killercoda!</a>
            </div>
            <div class="kv-card">
              <div class="kv-card-body">
                <img src="./../assets/images/cloud.png" height="64px" alt="Cloud Logo">
                <p class="kv-card-text">
                  KubeVirt on Cloud Providers
                </p>
              </div>
                <a href="{{ site.baseURL }}quickstart_cloud" class="btn kv-btn kv-btn-primary" aria-label="Try It button">Try It!</a>
            </div>
          </div>
      </div>
    </header>

    <main role="main" class="kv-homepage-grid">
      {{ content }}
    </main>

    <footer class="footer" role="contentinfo">
      {% include footer.html %}
    </footer>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script src="{{ site.baseurl }}/js/kubevirt-io.js"></script>
    <script src="{{ site.baseurl }}/js/video.popup.js"></script>
    <script type="text/javascript">
        if (("undefined" !== typeof _satellite) && ("function" === typeof _satellite.pageBottom)) {
            _satellite.pageBottom();
        }
        $("#demo-video").videoPopup();

    </script>

  </body>

</html>
