css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div id="app">
  <section class="showtime is-primary">
    <router-view></router-view>
    <div class="hero-foot">
      <div class="row is-mobile flex">
        <div class="chosen col-sm-4 col-md-3" v-if="['home', 'intro', 'video', 'videotrailer'].indexOf($route.name) &gt; -1" v-for="videoChoice in videoChoices">
          <router-link class="video-choice" :to="`/videos/${videoChoice.id}`" tag="div"><i :class="[{ 'fa fa-check-circle favorite-check': videoChoice.favorite }]" aria-hidden="true"></i><img class="vid-thumb" :src="`${videoChoice.smallImgSrc}`"/>
            <p class="video-title">{{ videoChoice.subtitle }}</p>
          </router-link>
        </div>
        <div class="chosen col-sm-4 col-md-3" v-if="['splash', 'product', 'productpreview'].indexOf($route.name) &gt; -1" v-for="productChoice in productChoices">
          <router-link class="video-choice" :to="`/products/${productChoice.id}`" tag="div"><i :class="[{ 'fa fa-check-circle favorite-check': productChoice.favorite }]" aria-hidden="true"></i><img class="vid-thumb" :src="`${productChoice.smallImgSrc}`"/>
            <p class="video-title">{{ productChoice.subtitle }}</p>
          </router-link>
        </div>
      </div>
      <div class="scrolls text-center"><span class="dashed-shadow sorta" data-text="<- Scroll ->"><- Scroll -></span></div>
    </div>
  </section>
</div>
            
          
!
            
              html, body {
  height: 100%;
  width: 100%;
  background: linear-gradient(to bottom right, #fff, #f2f2f2);
}

.showtime {
  font-size: 1rem;
  align-items: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #1e1d1d !important;
  position: relative;
  color: #fff;
  width: 100%;
  max-width: 980px;
  box-shadow: 0 0 50px 5px rgba(0, 0, 0, 0.25);
  margin: 0 auto;
  a {
    color: #fff;
    text-decoration: none;
  }
  .showtime-body {
    background-color: rgba(0, 0, 0, 0.8);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center center;
    padding-bottom: 4rem !important;
    padding-top: 4.5rem !important;
    height: 100%;
    min-height: 551px;
    max-height: 551px;
    .container {
      width: 100%;
      .home-intro {
        font-size: 2.6rem;
        font-weight: 600;
        color: #b0d235;
        text-align: center;
        text-transform: uppercase;
        svg {
          width: 100%;
          max-width: 350px;
          height: auto;
          fill: #fff;
          .cls-1 {
            fill: #fff;
          }
          .cls-2 {
            fill: #b0d235;
          }
        }
      }
      .home-subintro a {
        color: #b0d235;
        font-weight: 600;
        &:hover {
          color: #b0d235;
        }
      }
    }
    .nav {
      position: absolute;
      top: 10px;
      width: 100%;
      padding-left: 10px;
      padding-right: 10px;
      box-shadow: 0px 0px 0px !important;
      svg {
        width: 50px;
        height: 50px;
        margin-bottom: -20px;
      }
      .nav-item {
        font-size: 1rem;
        margin-left: 20px;
        .fa-bars {
          color: #b0d235;
          font-size: 40px;
        }
        .tag {
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          background-color: #f5f5f5;
          border-radius: 4px;
          color: #4a4a4a;
          display: -webkit-inline-box;
          display: -ms-inline-flexbox;
          display: inline-flex;
          font-size: 0.75rem;
          height: 2em;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          line-height: 1.5;
          padding-left: 0.875em;
          padding-right: 0.875em;
          white-space: nowrap;
          font-size: 15px;
        }
        .title {
          color: #fff;
          font-size: 18px;
          font-weight: 600;
          text-align: center;
          text-transform: uppercase;
        }
      }
      .nav-right .nav-item {
        float: right;
      }
    }
    .description-container {
      padding-left: 10%;
    }
    .details {
      min-height: 264px;
      .title {
        font-size: 2.6rem;
        font-weight: 600;
      }
      .subtitle {
        font-size: 1rem;
        font-weight: 600;
        color: #b0d235;
        .subtitle-tag {
          display: inline;
        }
      }
      .description {
        font-size: 1.2rem;
        margin-bottom: 24px;
        max-width: 80%;
      }
      .links {
        text-align: left !important;
        .play-button {
          background: #b0d235;
          color: #010101;
          border-radius: 3px;
          border: 0px;
          margin-right: 20px;
          padding: 10px;
          font-size: 1rem;
          .fa-play {
            padding-left: 7px;
          }
        }
        .favorites-button {
          text-decoration: none;
          color: #fff;
          &:hover {
            background: none;
            text-decoration: none;
          }
          .fa-plus-square-o {
            padding-left: 10px;
            padding-top: 2px;
          }
        }
      }
    }
  }
  .showreal-body {
    position: relative;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: 551px;
    .embed-responsive {
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      margin-top: -28.1%;
      padding-bottom: 56.2%;
      height: 0;
      overflow: hidden;
      iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
  }
  .hero-foot {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom right, #b0d235, #63771b);
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px;
    padding-bottom: 5px;
    clear: both;
    position: relative;
    z-index: 1;
    overflow: hidden;
    .router-link-active {
      transform: scale(1.1, 1.1);
      .vid-thumb {
        box-shadow: 0 0 50px 5px rgba(251, 255, 15, 0.8);
      }
    }
    .scrolls {
      position: absolute;
      bottom: 3%;
      left: 50%;
      margin-left: -30px;
      font-weight: 700;
      font-size: 0.8rem;
      color: #63771b;
      text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.1);
      display: none;
    }
    .is-mobile {
      padding-bottom: 10px;
      text-align: center;
      .video-choice {
        position: relative;
        list-style: none;
        cursor: pointer;
        .favorite-check {
          position: absolute;
          right: 5px;
          top: 5px;
          z-index: 1;
          color: #fcff4c;
        }
        img {
          opacity: 0.9;
          max-width: 100%;
        }
        .video-title {
          font-size: 15px;
          &:active {
            font-weight: 600;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .bigscreen .bigscreen-body {
    background-color: rgba(0, 0, 0, 0.8);
    min-height: 431px;
  }
}

@media screen and (max-width: 480px) {
  .bigscreen .bigscreen-body {
    min-height: 431px;
  }
}

@media screen and (max-width: 767px) {
  .bigscreen .bigscreen-body .container .home-intro {
    font-size: 35px;
    letter-spacing: 2px;
  }
}

@media screen and (max-width: 767px) {
  .bigscreen .bigscreen-body .container .home-intro svg {
    max-width: 250px;
  }
}

@media screen and (max-width: 767px) {
  .bigscreen .bigscreen-body .nav {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (max-width: 767px) {
  .bigscreen .bigscreen-body .nav svg {
    width: 2rem;
  }
}

@media screen and (max-width: 767px) {
  .bigscreen .bigscreen-body .nav .nav-item {
    font-size: 0.7rem;
  }
}

@media screen and (max-width: 767px) {
  .bigscreen .bigscreen-body .nav .nav-item .tag {
    font-size: 12px;
  }
}

@media screen and (max-width: 767px) {
  .bigscreen .bigscreen-body .details .title {
    font-size: 2.3rem;
  }
}

@media screen and (max-width: 767px) {
  .bigscreen .bigscreen-body .details .subtitle {
    font-size: 0.8rem;
  }
}

@media screen and (max-width: 767px) {
  .bigscreen .bigscreen-body .details .description {
    font-size: 1rem;
  }
}

@media screen and (max-width: 767px) {
  .bigscreen .bigscreen-body .details .links .play-button {
    font-size: 1rem;
  }
}

@media screen and (max-width: 767px) {
  .showtime .showtime-body .details .links .favorites-button {
    background: #fff;
    color: #4a4a4a;
    border-radius: 15px;
    border: 0px;
    margin-right: 20px;
    padding: 10px;
    font-size: 1rem;
    &:hover {
      background: #fff;
    }
  }
}

@media screen and (max-width: 767px) {
  .showtime .showtime-body .details .links {
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .showtime .trailer-body {
    min-height: 431px;
  }
}

@media screen and (max-width: 480px) {
  .showtime .trailer-body {
    min-height: 431px;
  }
}

@media (max-width: 767px) {
  .showtime .hero-foot .is-mobile .video-choice img {
    max-width: 150px;
  }
}

@media (max-width: 767px) {
  .showtime .hero-foot .is-mobile .video-choice .video-title {
    font-size: 10px;
  }
}

.appreciation-tag {
  color: #fff;
  text-align: center;
  a {
    color: #b0d235;
    font-weight: 600;
  }
}

.medium-section {
  position: absolute;
  left: 10px;
  bottom: 10px;
  .fa-medium {
    font-size: 15px;
  }
}

.vertical-align {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  -webkit-align-items: center;
  justify-content: center;
  -webkit-justify-content: center;
}

.video-title-active {
  font-size: 18px;
  font-weight: 600;
}

.iframe-box {
  max-width: 1280px;
  /* video width */
  max-height: 720px;
  /* video height */
}

.favorite-shadow {
  border: 1px solid rgba(251, 255, 15, 0.25);
}

.desktop {
  display: block;
}

@media screen and (max-width: 767px) {
  .desktop {
    display: none;
  }
}

.mobile, .hide {
  display: none;
}

@media screen and (max-width: 767px) {
  .mobile {
    display: block;
  }
}

.bg-light {
  background-color: transparent !important;
}

@keyframes fadeOutUp {
  from {
    opacity: 1;
    transform: rotate(90deg);
  }

  to {
    opacity: 0;
    transform: translate3d(0, -75%, 0) rotate(90deg);
  }
}
            
          
!
            
              const videos = {
  vid1: {
    id: "vid1",
    title: "Nutanix - Freedom",
    subtitle: "Nutanix - Freedom",
    description: `Nutanix gives you the freedom to manage complexity with ease. The freedom to choose your clouds, your apps, and your technology stack. The freedom to invent what’s next.`,
    smallImgSrc: "http://i3.ytimg.com/vi/hjTROszmSiI/maxresdefault.jpg",
    largeImgSrc: `url('http://i3.ytimg.com/vi/hjTROszmSiI/maxresdefault.jpg')`,
    releaseDate: "May 8 2018",
    duration: "1min 5sec",
    genre: ".NEXT, Freedom, Enterprise Cloud",
    trailerPath: "https://www.youtube.com/embed/hjTROszmSiI?autoplay=1&modestbranding=1&rel=0&theme=light&color=white",
    favorite: false
  },
  vidalt: {
    id: "vidalt",
    title: "What Does Freedom Mean to You?",
    subtitle: "What Does Freedom Mean to You?",
    description: `Hear our customers and partners talk about what Nutanix gives them the Freedom to do. Freedom to Build, Run, Cloud, Invent and Play.`,
    smallImgSrc: "http://i3.ytimg.com/vi/pO1g4bw8bIQ/maxres1.jpg",
    largeImgSrc: `url('http://i3.ytimg.com/vi/pO1g4bw8bIQ/maxres1.jpg')`,
    releaseDate: "May 15 2018",
    duration: "1min 52sec",
    genre: ".NEXT, Freedom, Enterprise Cloud",
    trailerPath: "https://www.youtube.com/embed/pO1g4bw8bIQ?autoplay=1&modestbranding=1&rel=0&theme=light&color=white",
    favorite: false
  },
  vid2: {
    id: "vid2",
    title: "Day 1 Opening",
    subtitle: "Day 1 Opening",
    description: `Opening keynote from .NEXT 2018 in New Orleans at the Ernest N. Morial Convention Center`,
    largeImgSrc: `url('http://i3.ytimg.com/vi/g0ZYq6jQmAI/maxres1.jpg')`,
    smallImgSrc: "http://i3.ytimg.com/vi/g0ZYq6jQmAI/maxres1.jpg",
    releaseDate: "May 8 2018",
    duration: "2hr 36min",
    genre: "Keynote, .NEXT, Enterprise Cloud",
    trailerPath: "https://www.youtube.com/embed/g0ZYq6jQmAI?autoplay=1&modestbranding=1&rel=0&theme=light&color=white",
    favorite: false
  },
  vid3: {
    id: "vid3",
    title: "Day 1 Afternoon",
    subtitle: "Day 1 Afternoon",
    description: `Afternoon keynote from .NEXT 2018 in New Orleans at the Ernest N. Morial Convention Center`,
    largeImgSrc: `url('http://i3.ytimg.com/vi/0SRGd7FknIw/maxresdefault.jpg')`,
    smallImgSrc: "http://i3.ytimg.com/vi/0SRGd7FknIw/maxresdefault.jpg",
    releaseDate: "May 8 2018",
    duration: "1hr 20min",
    genre: "Keynote, .NEXT, Enterprise Cloud",
    trailerPath: "https://www.youtube.com/embed/0SRGd7FknIw?autoplay=1&modestbranding=1&rel=0&theme=light&color=white",
    favorite: false
  },
  vid4: {
    id: "vid4",
    title: "Day 2 Afternoon",
    subtitle: "Day 2 Afternoon",
    description: `Afternoon keynote from .NEXT 2018 in New Orleans at the Ernest N. Morial Convention Center`,
    smallImgSrc: "http://i3.ytimg.com/vi/FfRFNHwku-U/maxres2.jpg",
    largeImgSrc: `url('http://i3.ytimg.com/vi/FfRFNHwku-U/maxres2.jpg')`,
    releaseDate: "May 9 2018",
    duration: "9min 52sec",
    genre: "Keynote, .NEXT, Enterprise Cloud",
    trailerPath: "https://www.youtube.com/embed/FfRFNHwku-U?autoplay=1&modestbranding=1&rel=0&theme=light&color=white",
    favorite: false
  },
  vid5: {
    id: "vid5",
    title: ".NEXT Recap",
    subtitle: ".NEXT Recap",
    description: `.NEXT 2018 New Orleans Full Recap. Watch all of the announcements, product news and more!`,
    largeImgSrc: `url('http://i3.ytimg.com/vi/fjNCVk3IsBA/maxresdefault.jpg')`,
    smallImgSrc: "http://i3.ytimg.com/vi/fjNCVk3IsBA/maxresdefault.jpg",
    releaseDate: "May 8-10 2018",
    duration: "1min 22sec",
    genre: ".NEXT, Enterprise Cloud",
    trailerPath: "https://www.youtube.com/embed/fjNCVk3IsBA?autoplay=1&modestbranding=1&rel=0&theme=light&color=white",
    favorite: false
  }
};

const products = {
  prod1: {
    id: "prod1",
    title: "IBM AIX now on Nutanix and IBM Hyperconverged Systems",
    subtitle: "IBM AIX",
    description: `Announcing IBM AIX now on Nutanix and IBM Hyperconverged Systems.`,
    largeImgSrc: `url('http://i3.ytimg.com/vi/163HHsVgSZ4/maxresdefault.jpg')`,
    smallImgSrc: "http://i3.ytimg.com/vi/163HHsVgSZ4/maxresdefault.jpg",
    releaseDate: "May 9 2018",
    duration: "56sec",
    genre: "Products, .NEXT, Enterprise Cloud",
    previewPath: "https://www.youtube.com/embed/163HHsVgSZ4?autoplay=1&modestbranding=1&rel=0&theme=light&color=white",
    favorite: false
  },
  prod2: {
    id: "prod2",
    title:
      "Introducing: Nutanix Flow",
    subtitle: "Nutanix - Flow",
    description: `With Nutanix Flow, get network and application visibility, security and control from one place -- and one platform.`,
    smallImgSrc: "http://i3.ytimg.com/vi/3TiaSkQLVhk/maxresdefault.jpg",
    largeImgSrc: `url('http://i3.ytimg.com/vi/3TiaSkQLVhk/maxresdefault.jpg')`,
    releaseDate: "May 8 2018",
    duration: "37sec",
    genre: ".NEXT, Freedom, Enterprise Cloud",
    previewPath: "https://www.youtube.com/embed/3TiaSkQLVhk?autoplay=1&modestbranding=1&rel=0&theme=light&color=white",
    favorite: false
  },
  prod3: {
    id: "prod3",
    title:
      "Introducing: Nutanix Beam",
    subtitle: "Nutanix Beam",
    description: `Gain visibility into your cloud usage -- and make smart decisions. With Nutanix Beam, built-in cost optimization and security compliance with single-click remediation are here to stay.`,
    largeImgSrc: `url('http://i3.ytimg.com/vi/1o3X1ACBnsc/maxresdefault.jpg')`,
    smallImgSrc: "http://i3.ytimg.com/vi/1o3X1ACBnsc/maxresdefault.jpg",
    releaseDate: "May 8 2018",
    duration: "44sec",
    genre: "Products, .NEXT, Enterprise Cloud",
    previewPath: "https://www.youtube.com/embed/1o3X1ACBnsc?autoplay=1&modestbranding=1&rel=0&theme=light&color=white",
    favorite: false
  },
  prod4: {
    id: "prod4",
    title: "Nutanix announces Flow, Era and Beam",
    subtitle: "Flow, Era and Beam",
    description: `These three new services flesh out our product vision by completing our infrastructure services with Nutanix Flow, enhancing our platform services with Nutanix Era, and introduce our software as a service with Nutanix Beam.`,
    largeImgSrc: `url('http://i3.ytimg.com/vi/w40asaGtrkU/maxresdefault.jpg')`,
    smallImgSrc: "http://i3.ytimg.com/vi/w40asaGtrkU/maxresdefault.jpg",
    releaseDate: "May 9 2018",
    duration: "2min 20sec",
    genre: "Products, .NEXT, Enterprise Cloud",
    previewPath: "https://www.youtube.com/embed/w40asaGtrkU?autoplay=1&modestbranding=1&rel=0&theme=light&color=white",
    favorite: false
  },
  prod5: {
    id: "prod5",
    title: "Nutanix: Power to the Partner",
    subtitle: "Power to the Partner",
    description: `We promise to help our partners capitalize on the modern cloud era opportunity, enjoy predictable profits and work with us - friction free. We lay the exponential power in your hands!`,
    smallImgSrc: "http://i3.ytimg.com/vi/zckwspHQVjg/maxresdefault.jpg",
    largeImgSrc: `url('http://i3.ytimg.com/vi/zckwspHQVjg/maxresdefault.jpg')`,
    releaseDate: "May 10 2018",
    duration: "1min 32sec",
    genre: "Partners, .NEXT, Enterprise Cloud",
    previewPath: "https://www.youtube.com/embed/zckwspHQVjg?autoplay=1&modestbranding=1&rel=0&theme=light&color=white",
    favorite: false
  }
};

// 1. Define route components.
const Intro = {
  template: `
    <div class="showtime-body vertical-align" style="background-image: url(https://www.nutanix.com/freedom/assets/images/fb-og/fb-og-ntx-freedom-build.jpg);background-size:cover;background-repeat:no-repeat;background-position:center;">
<div class="nav">
          <div class="container-fluid">
            <div class="nav-left ">
              <router-link to="/" class="nav-item">
                <svg id="icon-nutanix-x" viewBox="0 0 55 32" width="40px" height="100%"> <title>nutanix-x</title> <path fill="#ffffff" style="fill: var(--color1, #ffffff)" d="M46.7 27h-1.2c-0.2 0-0.4-0.2-0.4-0.4s0.2-0.4 0.4-0.4h3.3c0.2 0 0.4 0.2 0.4 0.4s-0.2 0.4-0.4 0.4h-1.2v3.8c0 0.2-0.2 0.4-0.4 0.4s-0.4-0.2-0.4-0.4l-0.1-3.8z"></path> <path fill="#ffffff" style="fill: var(--color1, #ffffff)" d="M50.1 26.6c0-0.2 0.2-0.5 0.4-0.5h0.1c0.2 0 0.3 0.1 0.4 0.2l1.5 2.4 1.5-2.4c0.1-0.2 0.2-0.2 0.4-0.2h0.1c0.2 0 0.4 0.2 0.4 0.5v4.3c0 0.2-0.2 0.4-0.4 0.4s-0.4-0.2-0.4-0.4v-3l-1.2 1.9c-0.1 0.1-0.2 0.2-0.4 0.2s-0.3-0.1-0.4-0.2l-1.1-2v3c0 0.2-0.2 0.4-0.4 0.4s-0.4-0.2-0.4-0.4l-0.1-4.2z"></path> <path fill="#ffffff" style="fill: var(--color1, #ffffff)" d="M33.7 0.2c0.1-0.1 0.3-0.2 0.5-0.2h8.9c0.4 0 0.7 0.3 0.7 0.7 0 0.2-0.1 0.4-0.3 0.6l-13 11.6c-0.1 0.1-0.3 0.2-0.5 0.2s-0.4-0.1-0.5-0.2l-4.5-4c-0.1-0.1-0.2-0.3-0.2-0.5s0.1-0.4 0.3-0.6l8.6-7.6z"></path> <path fill="#ffffff" style="fill: var(--color1, #ffffff)" d="M33.7 31.1c0.1 0.1 0.3 0.2 0.5 0.2h8.9c0.4 0 0.7-0.3 0.7-0.7 0-0.2-0.1-0.4-0.3-0.6l-13-11.6c-0.1-0.1-0.3-0.2-0.5-0.2s-0.4 0.1-0.5 0.2l-4.5 4c-0.1 0.1-0.2 0.3-0.2 0.5s0.1 0.4 0.3 0.6l8.6 7.6z"></path> <path fill="#afcf44" style="fill: var(--color2, #afcf44)" d="M10.1 31.1c-0.1 0.1-0.3 0.2-0.5 0.2h-8.9c-0.4 0-0.7-0.3-0.7-0.7 0-0.2 0.1-0.4 0.2-0.5l15.5-13.8c0.2-0.1 0.3-0.3 0.3-0.6 0-0.2-0.1-0.4-0.2-0.5l-15.5-13.9c-0.2-0.1-0.3-0.3-0.3-0.6 0-0.4 0.3-0.7 0.7-0.7h8.9c0.2 0 0.4 0.1 0.5 0.2l16.7 14.9c0.2 0.1 0.2 0.3 0.2 0.6s-0.1 0.4-0.2 0.6l-16.7 14.8z"></path> </svg>
              </router-link>
              <a class="nav-item is-active">
                <span class="tag is-rounded">
                   Home
                </span>
              </a>
              <router-link to="/videos/" class="nav-item is-active">
                .NEXT
              </router-link>
              <router-link to="/products/" class="nav-item is-active">
                Products
              </router-link>
            </div>
          </div>
        </div>
      <div class="container">
        <div class="row is-mobile">
          <div class="col-sm-8 offset-sm-2 text-center">
            <h1 class="home-intro">
              <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 157 19"><title>nutanix-logo-white</title><path class="cls-1" d="M121.09.13h-3.92a.43.43 0 0 0-.43.43v17.88a.43.43 0 0 0 .43.43h3.92a.43.43 0 0 0 .43-.43V.55a.43.43 0 0 0-.43-.42zm30.82 16.17h-.74a.25.25 0 1 1 0-.5h2a.25.25 0 0 1 0 .5h-.75v2.3a.27.27 0 0 1-.54 0zm2.09-.24a.27.27 0 0 1 .27-.27h.06a.28.28 0 0 1 .25.14l.93 1.44.93-1.45a.27.27 0 0 1 .25-.14h.06a.27.27 0 0 1 .27.27v2.55a.27.27 0 0 1-.27.27.27.27 0 0 1-.27-.27v-1.82l-.75 1.12a.25.25 0 0 1-.45 0l-.74-1.11v1.81a.26.26 0 0 1-.27.26.26.26 0 0 1-.26-.26zM46 .13h-3.32a.72.72 0 0 0-.68.72V13c0 1.28-1.8 1.69-4 1.69h-5c-2.21 0-4-.41-4-1.69V.85a.72.72 0 0 0-.73-.72h-3.36a.72.72 0 0 0-.73.72v12.43a4.91 4.91 0 0 0 2.73 4.57c1.79 1.07 6 1 7.2 1h2.7c1.24 0 5.41 0 7.2-1a4.91 4.91 0 0 0 2.73-4.57V.85A.72.72 0 0 0 46 .13zm97.87.12a.44.44 0 0 1 .31-.13h5.47a.44.44 0 0 1 .27.79l-8 6.93a.44.44 0 0 1-.64 0l-2.73-2.36a.44.44 0 0 1 0-.63zm0 18.49a.44.44 0 0 0 .31.13h5.47a.44.44 0 0 0 .27-.79l-8-6.93a.44.44 0 0 0-.64 0l-2.73 2.36a.44.44 0 0 0 0 .63z"/><path class="cls-2" d="M129.28 18.75a.44.44 0 0 1-.3.12h-5.47a.44.44 0 0 1-.44-.44.43.43 0 0 1 .13-.31l9.59-8.29a.44.44 0 0 0 0-.66L123.22.9a.43.43 0 0 1-.16-.33.44.44 0 0 1 .44-.44h5.5a.44.44 0 0 1 .3.12l10.33 8.92a.44.44 0 0 1 0 .66z"/><path class="cls-1" d="M61 4.74a.44.44 0 0 1 .44-.44h6.79a.72.72 0 0 0 .77-.72V.85a.72.72 0 0 0-.73-.72H49a.72.72 0 0 0-.73.72v2.73a.72.72 0 0 0 .73.72h6.8a.44.44 0 0 1 .44.44v13.4a.72.72 0 0 0 .73.72h3.32a.72.72 0 0 0 .73-.72zm-43.68 7.01a.34.34 0 0 0 .22.09.3.3 0 0 0 .31-.3V.85a.72.72 0 0 1 .73-.72h3.33a.72.72 0 0 1 .73.72v15.49c0 1.58-.62 2.27-1.23 2.54a4.21 4.21 0 0 1-3.56-.79L5.9 7.76l-.68-.59a.27.27 0 0 0-.43.21v10.76a.72.72 0 0 1-.73.72H.73a.72.72 0 0 1-.73-.72V2.66C0 1.08.62.39 1.23.13a4.21 4.21 0 0 1 3.56.79l11.94 10.32zm92.55 0a.34.34 0 0 0 .22.09.3.3 0 0 0 .31-.3V.85a.72.72 0 0 1 .73-.72h3.33a.72.72 0 0 1 .73.72v15.49c0 1.58-.62 2.27-1.23 2.54a4.21 4.21 0 0 1-3.56-.79L98.45 7.76l-.68-.59a.27.27 0 0 0-.43.21v10.76a.72.72 0 0 1-.73.72h-3.34a.72.72 0 0 1-.73-.72V2.66c0-1.58.62-2.27 1.23-2.54a4.21 4.21 0 0 1 3.56.79l11.94 10.32zm6.86-10.9a.72.72 0 0 1 .73-.72h3.33a.72.72 0 0 1 .73.72v17.29a.72.72 0 0 1-.73.72h-3.33a.72.72 0 0 1-.73-.72zM90.89 18.14L79.1 1.24A2.81 2.81 0 0 0 76.78 0a2.81 2.81 0 0 0-2.32 1.21L62.68 18.14a.44.44 0 0 0-.1.28.44.44 0 0 0 .44.44h4.31a.44.44 0 0 0 .38-.22l3.05-4.38a.44.44 0 0 1 .4-.25h11.25a.44.44 0 0 1 .4.25l3.05 4.38a.44.44 0 0 0 .38.22h4.31a.44.44 0 0 0 .44-.44.44.44 0 0 0-.1-.28zM79.22 9.85h-4.87a.26.26 0 0 1-.27-.26.26.26 0 0 1 .08-.19l2.4-3.4.05-.05h.22L77 6l2.4 3.44a.26.26 0 0 1-.19.45z"/></svg>
            </h1>
            <p class="home-subintro">Catch up the the latest and greatest video presentations, product announcements, demos and more!<br><br> <router-link to="/videos/">.NEXT</router-link>&nbsp;&nbsp;|&nbsp;&nbsp;<router-link to="/products/">Products</router-link>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">Demos</a></p>
          </div>
        </div>
      </div>
    </div>`
};

// 1. Define route components.
const Home = {
  template: `
    <div class="showtime-body vertical-align" style="background-image: url(https://www.nutanix.com/freedom/assets/images/fb-og/fb-og-ntx-freedom-invent.jpg);background-size:cover;background-repeat:no-repeat;background-position:center;">
<header class="nav">
          <div class="container-fluid">
            <div class="nav-left ">
              <router-link to="/" class="nav-item">
                <svg id="icon-nutanix-x" viewBox="0 0 55 32" width="40px" height="100%"> <title>nutanix-x</title> <path fill="#ffffff" style="fill: var(--color1, #ffffff)" d="M46.7 27h-1.2c-0.2 0-0.4-0.2-0.4-0.4s0.2-0.4 0.4-0.4h3.3c0.2 0 0.4 0.2 0.4 0.4s-0.2 0.4-0.4 0.4h-1.2v3.8c0 0.2-0.2 0.4-0.4 0.4s-0.4-0.2-0.4-0.4l-0.1-3.8z"></path> <path fill="#ffffff" style="fill: var(--color1, #ffffff)" d="M50.1 26.6c0-0.2 0.2-0.5 0.4-0.5h0.1c0.2 0 0.3 0.1 0.4 0.2l1.5 2.4 1.5-2.4c0.1-0.2 0.2-0.2 0.4-0.2h0.1c0.2 0 0.4 0.2 0.4 0.5v4.3c0 0.2-0.2 0.4-0.4 0.4s-0.4-0.2-0.4-0.4v-3l-1.2 1.9c-0.1 0.1-0.2 0.2-0.4 0.2s-0.3-0.1-0.4-0.2l-1.1-2v3c0 0.2-0.2 0.4-0.4 0.4s-0.4-0.2-0.4-0.4l-0.1-4.2z"></path> <path fill="#ffffff" style="fill: var(--color1, #ffffff)" d="M33.7 0.2c0.1-0.1 0.3-0.2 0.5-0.2h8.9c0.4 0 0.7 0.3 0.7 0.7 0 0.2-0.1 0.4-0.3 0.6l-13 11.6c-0.1 0.1-0.3 0.2-0.5 0.2s-0.4-0.1-0.5-0.2l-4.5-4c-0.1-0.1-0.2-0.3-0.2-0.5s0.1-0.4 0.3-0.6l8.6-7.6z"></path> <path fill="#ffffff" style="fill: var(--color1, #ffffff)" d="M33.7 31.1c0.1 0.1 0.3 0.2 0.5 0.2h8.9c0.4 0 0.7-0.3 0.7-0.7 0-0.2-0.1-0.4-0.3-0.6l-13-11.6c-0.1-0.1-0.3-0.2-0.5-0.2s-0.4 0.1-0.5 0.2l-4.5 4c-0.1 0.1-0.2 0.3-0.2 0.5s0.1 0.4 0.3 0.6l8.6 7.6z"></path> <path fill="#afcf44" style="fill: var(--color2, #afcf44)" d="M10.1 31.1c-0.1 0.1-0.3 0.2-0.5 0.2h-8.9c-0.4 0-0.7-0.3-0.7-0.7 0-0.2 0.1-0.4 0.2-0.5l15.5-13.8c0.2-0.1 0.3-0.3 0.3-0.6 0-0.2-0.1-0.4-0.2-0.5l-15.5-13.9c-0.2-0.1-0.3-0.3-0.3-0.6 0-0.4 0.3-0.7 0.7-0.7h8.9c0.2 0 0.4 0.1 0.5 0.2l16.7 14.9c0.2 0.1 0.2 0.3 0.2 0.6s-0.1 0.4-0.2 0.6l-16.7 14.8z"></path> </svg>
              </router-link>
              <router-link to="/" class="nav-item is-active">
                Home
              </router-link>
              <a class="nav-item is-active">
                <span class="tag is-rounded">
                   .NEXT
                </span>
              </a>
              <router-link to="/products/" class="nav-item is-active">
                Products
              </router-link>
            </div>
          </div>
        </header>
      <div class="container has-text-centered">
        <div class="row is-mobile">
          <div class="col-sm-8 offset-sm-2 text-center">
            <h1 class="home-intro">
              <svg id="icon-next-conference" viewBox="0 0 95 32" width="100%" height="100%"> <path d="M53.925 17.511c-0.076 0.060-0.17 0.091-0.266 0.089h-5.029c-0.163 0.001-0.312-0.091-0.385-0.237-0.085-0.165-0.034-0.368 0.118-0.474l9.17-7.733c0.099-0.079 0.156-0.199 0.156-0.326s-0.057-0.247-0.156-0.326l-9.14-7.793c-0.12-0.089-0.177-0.239-0.148-0.385 0.028-0.19 0.193-0.33 0.385-0.326h4.822c0.096 0.002 0.188 0.033 0.266 0.089l9.969 8.415 0.089 0.089c0.071 0.065 0.111 0.156 0.111 0.252s-0.040 0.187-0.111 0.252l-0.089 0.089-9.762 8.326z"></path> <path d="M27.303 0.119h-3.076c-0.374 0.005-0.676 0.307-0.68 0.681v9.926c0.001 0.106-0.060 0.202-0.155 0.246s-0.208 0.029-0.288-0.039l-11.329-9.896c-0.669-0.645-1.556-1.015-2.485-1.037-0.769 0-2.1 0.326-2.1 2.459v14.341c0.005 0.374 0.307 0.677 0.68 0.681h3.076c0.374-0.005 0.676-0.307 0.68-0.681v-9.926c-0.001-0.106 0.060-0.202 0.155-0.246s0.208-0.029 0.288 0.039l11.477 10.044c0.625 0.593 1.447 0.931 2.307 0.948 0.828 0 2.189-0.326 2.189-2.578v-14.281c-0.051-0.376-0.361-0.662-0.739-0.681z"></path> <path d="M94.45 3.2v-2.311c0.001-0.212-0.083-0.416-0.233-0.567s-0.354-0.234-0.566-0.233h-17.423c-0.212-0.001-0.416 0.083-0.566 0.233s-0.234 0.354-0.233 0.567v2.281c-0.001 0.212 0.083 0.416 0.233 0.567s0.354 0.234 0.566 0.233h6.094c0.111-0.002 0.217 0.040 0.296 0.119s0.121 0.185 0.119 0.296v12.296c-0.001 0.212 0.083 0.416 0.233 0.567s0.354 0.234 0.566 0.233h2.81c0.212 0.001 0.416-0.083 0.566-0.233s0.234-0.354 0.233-0.567v-12.296c-0.002-0.111 0.040-0.218 0.119-0.296s0.185-0.121 0.296-0.119h6.123c0.206 0.007 0.405-0.072 0.551-0.218s0.225-0.346 0.218-0.552v0z"></path> <path d="M34.787 3.97h11.152c0.252 0.003 0.495-0.096 0.673-0.274s0.277-0.422 0.274-0.674v-1.985c0.003-0.252-0.096-0.495-0.274-0.674s-0.421-0.277-0.673-0.274h-15.204c-0.505 0.003-0.914 0.413-0.917 0.919v15.674c-0.001 0.212 0.083 0.416 0.233 0.567s0.354 0.234 0.566 0.233h15.264c0.252 0.003 0.495-0.096 0.673-0.274s0.277-0.422 0.274-0.674v-1.985c0.003-0.252-0.096-0.495-0.274-0.674s-0.421-0.277-0.673-0.274h-11.033c-0.358-0.003-0.648-0.293-0.651-0.652v-1.926c-0.003-0.095 0.033-0.188 0.1-0.255s0.16-0.104 0.255-0.1h8.223c0.212 0.001 0.416-0.083 0.566-0.233s0.234-0.354 0.233-0.567v-2.281c0.001-0.212-0.083-0.416-0.233-0.567s-0.354-0.234-0.566-0.233h-8.223c-0.095 0.003-0.187-0.033-0.255-0.1s-0.104-0.16-0.1-0.255v-1.896c0.024-0.312 0.28-0.555 0.592-0.563v0z"></path> <path d="M65.254 7.378c0.158 0.148 0.404 0.148 0.562 0l7.987-6.667c0.12-0.089 0.177-0.239 0.148-0.385-0.028-0.19-0.193-0.33-0.385-0.326h-4.822c-0.096 0.002-0.188 0.033-0.266 0.089l-5.62 4.593c-0.099 0.079-0.156 0.199-0.156 0.326s0.057 0.247 0.156 0.326l2.396 2.044z"></path> <path d="M65.225 10.281c0.158-0.148 0.404-0.148 0.562 0l8.105 6.637c0.12 0.089 0.177 0.239 0.148 0.385-0.028 0.19-0.193 0.329-0.385 0.326h-4.822c-0.096-0.002-0.188-0.033-0.266-0.089l-5.591-4.652c-0.099-0.079-0.156-0.199-0.156-0.326s0.057-0.247 0.156-0.326l2.248-1.956z"></path> <path d="M4.437 15.23c0 1.227-0.993 2.222-2.219 2.222s-2.219-0.995-2.219-2.222c0-1.227 0.993-2.222 2.219-2.222s2.219 0.995 2.219 2.222z"></path> <path d="M11.527 31.848c1.521 0 2.48-0.588 3.354-1.476l-0.623-0.612c-0.803 0.768-1.557 1.212-2.707 1.212-1.845 0-3.247-1.524-3.247-3.468v-0.024c0-1.932 1.39-3.444 3.247-3.444 1.138 0 1.929 0.48 2.636 1.152l0.647-0.696c-0.839-0.792-1.749-1.332-3.271-1.332-2.468 0-4.241 1.968-4.241 4.344v0.024c0 2.412 1.785 4.32 4.205 4.32zM20.429 31.848c-2.552 0-4.265-2.004-4.265-4.32v-0.024c0-2.316 1.737-4.344 4.289-4.344s4.265 2.004 4.265 4.32v0.024c0 2.316-1.737 4.344-4.289 4.344zM20.453 30.972c1.917 0 3.283-1.536 3.283-3.444v-0.024c0-1.908-1.39-3.468-3.306-3.468s-3.283 1.536-3.283 3.444v0.024c0 1.908 1.39 3.468 3.306 3.468zM26.718 31.704h0.922v-6.888l5.415 6.888h0.755v-8.4h-0.922v6.732l-5.283-6.732h-0.887v8.4zM36.182 31.704h0.946v-3.66h4.54v-0.864h-4.54v-3h5.080v-0.876h-6.026v8.4zM44.041 31.704h6.122v-0.864h-5.175v-2.94h4.576v-0.864h-4.576v-2.868h5.115v-0.864h-6.062v8.4zM52.068 31.704v-8.4h3.606c1.030 0 1.857 0.312 2.384 0.84 0.407 0.408 0.647 0.996 0.647 1.656v0.024c0 1.392-0.958 2.208-2.276 2.448l2.576 3.432h-1.162l-2.432-3.264h-2.396v3.264h-0.946zM53.014 27.588h2.576c1.258 0 2.156-0.648 2.156-1.728v-0.024c0-1.032-0.791-1.656-2.144-1.656h-2.588v3.408zM60.73 31.704h6.122v-0.864h-5.175v-2.94h4.576v-0.864h-4.576v-2.868h5.116v-0.864h-6.062v8.4zM68.756 31.704h0.922v-6.888l5.415 6.888h0.755v-8.4h-0.922v6.732l-5.283-6.732h-0.887v8.4zM82.054 31.848c1.521 0 2.48-0.588 3.354-1.476l-0.623-0.612c-0.803 0.768-1.557 1.212-2.707 1.212-1.845 0-3.247-1.524-3.247-3.468v-0.024c0-1.932 1.39-3.444 3.247-3.444 1.138 0 1.929 0.48 2.636 1.152l0.647-0.696c-0.839-0.792-1.749-1.332-3.271-1.332-2.468 0-4.241 1.968-4.241 4.344v0.024c0 2.412 1.785 4.32 4.205 4.32zM87.062 31.704h6.122v-0.864h-5.175v-2.94h4.576v-0.864h-4.576v-2.868h5.115v-0.864h-6.062v8.4z"></path> </svg>
            </h1>
            <p class="home-subintro">Did you miss .NEXT 2018 New Orleans? It's ok, this time. Grab a favorite snack, kickback and catch up on the latest!<br><br> Register for .NEXT <a href="https://www.nutanix.com/next">Europe 2018</a>, or <a href="https://www.nutanix.com/next">Anaheim 2019.</a></p>
          </div>
        </div>
      </div>
    </div>`
};

// 1. Define route components.
const Splash = {
  template: `
    <div class="showtime-body vertical-align" style="background-image: url(https://www.nutanix.com/freedom/assets/images/fb-og/fb-og-ntx-freedom-cloud.jpg);background-size:cover;background-repeat:no-repeat;background-position:center;">
<header class="nav">
          <div class="container-fluid">
            <div class="nav-left ">
              <router-link to="/" class="nav-item">
                <svg id="icon-nutanix-x" viewBox="0 0 55 32" width="40px" height="100%"> <title>nutanix-x</title> <path fill="#ffffff" style="fill: var(--color1, #ffffff)" d="M46.7 27h-1.2c-0.2 0-0.4-0.2-0.4-0.4s0.2-0.4 0.4-0.4h3.3c0.2 0 0.4 0.2 0.4 0.4s-0.2 0.4-0.4 0.4h-1.2v3.8c0 0.2-0.2 0.4-0.4 0.4s-0.4-0.2-0.4-0.4l-0.1-3.8z"></path> <path fill="#ffffff" style="fill: var(--color1, #ffffff)" d="M50.1 26.6c0-0.2 0.2-0.5 0.4-0.5h0.1c0.2 0 0.3 0.1 0.4 0.2l1.5 2.4 1.5-2.4c0.1-0.2 0.2-0.2 0.4-0.2h0.1c0.2 0 0.4 0.2 0.4 0.5v4.3c0 0.2-0.2 0.4-0.4 0.4s-0.4-0.2-0.4-0.4v-3l-1.2 1.9c-0.1 0.1-0.2 0.2-0.4 0.2s-0.3-0.1-0.4-0.2l-1.1-2v3c0 0.2-0.2 0.4-0.4 0.4s-0.4-0.2-0.4-0.4l-0.1-4.2z"></path> <path fill="#ffffff" style="fill: var(--color1, #ffffff)" d="M33.7 0.2c0.1-0.1 0.3-0.2 0.5-0.2h8.9c0.4 0 0.7 0.3 0.7 0.7 0 0.2-0.1 0.4-0.3 0.6l-13 11.6c-0.1 0.1-0.3 0.2-0.5 0.2s-0.4-0.1-0.5-0.2l-4.5-4c-0.1-0.1-0.2-0.3-0.2-0.5s0.1-0.4 0.3-0.6l8.6-7.6z"></path> <path fill="#ffffff" style="fill: var(--color1, #ffffff)" d="M33.7 31.1c0.1 0.1 0.3 0.2 0.5 0.2h8.9c0.4 0 0.7-0.3 0.7-0.7 0-0.2-0.1-0.4-0.3-0.6l-13-11.6c-0.1-0.1-0.3-0.2-0.5-0.2s-0.4 0.1-0.5 0.2l-4.5 4c-0.1 0.1-0.2 0.3-0.2 0.5s0.1 0.4 0.3 0.6l8.6 7.6z"></path> <path fill="#afcf44" style="fill: var(--color2, #afcf44)" d="M10.1 31.1c-0.1 0.1-0.3 0.2-0.5 0.2h-8.9c-0.4 0-0.7-0.3-0.7-0.7 0-0.2 0.1-0.4 0.2-0.5l15.5-13.8c0.2-0.1 0.3-0.3 0.3-0.6 0-0.2-0.1-0.4-0.2-0.5l-15.5-13.9c-0.2-0.1-0.3-0.3-0.3-0.6 0-0.4 0.3-0.7 0.7-0.7h8.9c0.2 0 0.4 0.1 0.5 0.2l16.7 14.9c0.2 0.1 0.2 0.3 0.2 0.6s-0.1 0.4-0.2 0.6l-16.7 14.8z"></path> </svg>
              </router-link>
              <router-link to="/" class="nav-item is-active">
                Home
              </router-link>
              <router-link to="/videos/" class="nav-item is-active">
                .NEXT
              </router-link>
              <a class="nav-item is-active">
                <span class="tag is-rounded">
                   Products
                </span>
              </a>
            </div>
          </div>
        </header>
      <div class="container has-text-centered">
        <div class="row is-mobile">
          <div class="col-sm-10 offset-sm-1 text-center vertical-align">
            <span class="home-intro">
              <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 157 19"><title>nutanix-logo-white</title><path class="cls-1" d="M121.09.13h-3.92a.43.43 0 0 0-.43.43v17.88a.43.43 0 0 0 .43.43h3.92a.43.43 0 0 0 .43-.43V.55a.43.43 0 0 0-.43-.42zm30.82 16.17h-.74a.25.25 0 1 1 0-.5h2a.25.25 0 0 1 0 .5h-.75v2.3a.27.27 0 0 1-.54 0zm2.09-.24a.27.27 0 0 1 .27-.27h.06a.28.28 0 0 1 .25.14l.93 1.44.93-1.45a.27.27 0 0 1 .25-.14h.06a.27.27 0 0 1 .27.27v2.55a.27.27 0 0 1-.27.27.27.27 0 0 1-.27-.27v-1.82l-.75 1.12a.25.25 0 0 1-.45 0l-.74-1.11v1.81a.26.26 0 0 1-.27.26.26.26 0 0 1-.26-.26zM46 .13h-3.32a.72.72 0 0 0-.68.72V13c0 1.28-1.8 1.69-4 1.69h-5c-2.21 0-4-.41-4-1.69V.85a.72.72 0 0 0-.73-.72h-3.36a.72.72 0 0 0-.73.72v12.43a4.91 4.91 0 0 0 2.73 4.57c1.79 1.07 6 1 7.2 1h2.7c1.24 0 5.41 0 7.2-1a4.91 4.91 0 0 0 2.73-4.57V.85A.72.72 0 0 0 46 .13zm97.87.12a.44.44 0 0 1 .31-.13h5.47a.44.44 0 0 1 .27.79l-8 6.93a.44.44 0 0 1-.64 0l-2.73-2.36a.44.44 0 0 1 0-.63zm0 18.49a.44.44 0 0 0 .31.13h5.47a.44.44 0 0 0 .27-.79l-8-6.93a.44.44 0 0 0-.64 0l-2.73 2.36a.44.44 0 0 0 0 .63z"/><path class="cls-2" d="M129.28 18.75a.44.44 0 0 1-.3.12h-5.47a.44.44 0 0 1-.44-.44.43.43 0 0 1 .13-.31l9.59-8.29a.44.44 0 0 0 0-.66L123.22.9a.43.43 0 0 1-.16-.33.44.44 0 0 1 .44-.44h5.5a.44.44 0 0 1 .3.12l10.33 8.92a.44.44 0 0 1 0 .66z"/><path class="cls-1" d="M61 4.74a.44.44 0 0 1 .44-.44h6.79a.72.72 0 0 0 .77-.72V.85a.72.72 0 0 0-.73-.72H49a.72.72 0 0 0-.73.72v2.73a.72.72 0 0 0 .73.72h6.8a.44.44 0 0 1 .44.44v13.4a.72.72 0 0 0 .73.72h3.32a.72.72 0 0 0 .73-.72zm-43.68 7.01a.34.34 0 0 0 .22.09.3.3 0 0 0 .31-.3V.85a.72.72 0 0 1 .73-.72h3.33a.72.72 0 0 1 .73.72v15.49c0 1.58-.62 2.27-1.23 2.54a4.21 4.21 0 0 1-3.56-.79L5.9 7.76l-.68-.59a.27.27 0 0 0-.43.21v10.76a.72.72 0 0 1-.73.72H.73a.72.72 0 0 1-.73-.72V2.66C0 1.08.62.39 1.23.13a4.21 4.21 0 0 1 3.56.79l11.94 10.32zm92.55 0a.34.34 0 0 0 .22.09.3.3 0 0 0 .31-.3V.85a.72.72 0 0 1 .73-.72h3.33a.72.72 0 0 1 .73.72v15.49c0 1.58-.62 2.27-1.23 2.54a4.21 4.21 0 0 1-3.56-.79L98.45 7.76l-.68-.59a.27.27 0 0 0-.43.21v10.76a.72.72 0 0 1-.73.72h-3.34a.72.72 0 0 1-.73-.72V2.66c0-1.58.62-2.27 1.23-2.54a4.21 4.21 0 0 1 3.56.79l11.94 10.32zm6.86-10.9a.72.72 0 0 1 .73-.72h3.33a.72.72 0 0 1 .73.72v17.29a.72.72 0 0 1-.73.72h-3.33a.72.72 0 0 1-.73-.72zM90.89 18.14L79.1 1.24A2.81 2.81 0 0 0 76.78 0a2.81 2.81 0 0 0-2.32 1.21L62.68 18.14a.44.44 0 0 0-.1.28.44.44 0 0 0 .44.44h4.31a.44.44 0 0 0 .38-.22l3.05-4.38a.44.44 0 0 1 .4-.25h11.25a.44.44 0 0 1 .4.25l3.05 4.38a.44.44 0 0 0 .38.22h4.31a.44.44 0 0 0 .44-.44.44.44 0 0 0-.1-.28zM79.22 9.85h-4.87a.26.26 0 0 1-.27-.26.26.26 0 0 1 .08-.19l2.4-3.4.05-.05h.22L77 6l2.4 3.44a.26.26 0 0 1-.19.45z"/></svg>
            </span>
            <h1 class="home-intro">Product News</h1><p class="home-subintro">Nutanix Enterprise Cloud OS software combines the speed and simplicity of the public cloud with the security and control you need in a private cloud.</p>
          </div>
        </div>
      </div>
    </div>`
};

const Video = {
  template: `<div :class="[{ 'favorite-shadow': selectedVideo.favorite }, 'showtime-body', 'vertical-align']" :style="{ 'background-image': selectedVideo.largeImgSrc }">
        <header class="nav">
          <div class="container-fluid">
            <div class="nav-left ">
              <router-link to="/" class="nav-item">
                <svg id="icon-nutanix-x" viewBox="0 0 55 32" width="40px" height="100%"> <title>nutanix-x</title> <path fill="#ffffff" style="fill: var(--color1, #ffffff)" d="M46.7 27h-1.2c-0.2 0-0.4-0.2-0.4-0.4s0.2-0.4 0.4-0.4h3.3c0.2 0 0.4 0.2 0.4 0.4s-0.2 0.4-0.4 0.4h-1.2v3.8c0 0.2-0.2 0.4-0.4 0.4s-0.4-0.2-0.4-0.4l-0.1-3.8z"></path> <path fill="#ffffff" style="fill: var(--color1, #ffffff)" d="M50.1 26.6c0-0.2 0.2-0.5 0.4-0.5h0.1c0.2 0 0.3 0.1 0.4 0.2l1.5 2.4 1.5-2.4c0.1-0.2 0.2-0.2 0.4-0.2h0.1c0.2 0 0.4 0.2 0.4 0.5v4.3c0 0.2-0.2 0.4-0.4 0.4s-0.4-0.2-0.4-0.4v-3l-1.2 1.9c-0.1 0.1-0.2 0.2-0.4 0.2s-0.3-0.1-0.4-0.2l-1.1-2v3c0 0.2-0.2 0.4-0.4 0.4s-0.4-0.2-0.4-0.4l-0.1-4.2z"></path> <path fill="#ffffff" style="fill: var(--color1, #ffffff)" d="M33.7 0.2c0.1-0.1 0.3-0.2 0.5-0.2h8.9c0.4 0 0.7 0.3 0.7 0.7 0 0.2-0.1 0.4-0.3 0.6l-13 11.6c-0.1 0.1-0.3 0.2-0.5 0.2s-0.4-0.1-0.5-0.2l-4.5-4c-0.1-0.1-0.2-0.3-0.2-0.5s0.1-0.4 0.3-0.6l8.6-7.6z"></path> <path fill="#ffffff" style="fill: var(--color1, #ffffff)" d="M33.7 31.1c0.1 0.1 0.3 0.2 0.5 0.2h8.9c0.4 0 0.7-0.3 0.7-0.7 0-0.2-0.1-0.4-0.3-0.6l-13-11.6c-0.1-0.1-0.3-0.2-0.5-0.2s-0.4 0.1-0.5 0.2l-4.5 4c-0.1 0.1-0.2 0.3-0.2 0.5s0.1 0.4 0.3 0.6l8.6 7.6z"></path> <path fill="#afcf44" style="fill: var(--color2, #afcf44)" d="M10.1 31.1c-0.1 0.1-0.3 0.2-0.5 0.2h-8.9c-0.4 0-0.7-0.3-0.7-0.7 0-0.2 0.1-0.4 0.2-0.5l15.5-13.8c0.2-0.1 0.3-0.3 0.3-0.6 0-0.2-0.1-0.4-0.2-0.5l-15.5-13.9c-0.2-0.1-0.3-0.3-0.3-0.6 0-0.4 0.3-0.7 0.7-0.7h8.9c0.2 0 0.4 0.1 0.5 0.2l16.7 14.9c0.2 0.1 0.2 0.3 0.2 0.6s-0.1 0.4-0.2 0.6l-16.7 14.8z"></path> </svg>
              </router-link>
              <router-link to="/" class="nav-item is-active">
                Home
              </router-link>
              <a class="nav-item is-active">
                <span class="tag is-rounded">
                .NEXT
                </span>
              </a>
              <router-link to="/products/" class="nav-item is-active">
                Products
              </router-link>
            </div>
          </div>
        </header>
        <div class="container-fluid description-container">
          <div class="row details">
            <div class="col-12">
              <h1 class="title">
                {{ selectedVideo.title }}
              </h1>
              <h4 class="subtitle">
                <p class="subtitle-tag">{{ selectedVideo.duration }} |</p>
                <p class="subtitle-tag">{{ selectedVideo.genre }} |</p>
                <p class="subtitle-tag">{{ selectedVideo.releaseDate }}</p>
              </h4>
              <p class="description">{{ selectedVideo.description }}</p>
              <div class="links">
                <router-link :to="{path: '/videos/' + $route.params.id + '/trailer'}" class="button play-button">Play <i class="fa fa-play"></i></router-link>
              </div>
            </div>
          </div>
        </div>
    </div>`,
  data() {
    return {
      selectedVideo: videos[this.$route.params.id]
    };
  },
  watch: {
    $route() {
      this.selectVideo();
    }
  },
  methods: {
    selectVideo() {
      this.selectedVideo = videos[this.$route.params.id];
    },
    addToFavorites(selectedVideo) {
      videos[this.$route.params.id].favorite = !videos[this.$route.params.id]
        .favorite;
    }
  }
};

const VideoTrailer = {
  template: `
    <div class="showreal-body" style="background: #000000">
      <div class="d-flex align-items-center" style="height: 100%;">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe 
            allow="autoplay; encrypted-media"
            class="embed-responsive-item" 
            frameborder="0"
            :src="trailerUrlPath"
            allowFullScreen>
          </iframe>
        </div>
      </div>
    </div>`,
  data() {
    return {
      trailerUrlPath: videos[this.$route.params.id].trailerPath
    };
  }
};

const Product = {
  template: `<div :class="[{ 'favorite-shadow': selectedProduct.favorite }, 'showtime-body', 'vertical-align']" :style="{ 'background-image': selectedProduct.largeImgSrc }">
        <div class="nav">
          <div class="container-fluid">
            <div class="nav-left ">
              <router-link to="/" class="nav-item">
                <svg id="icon-nutanix-x" viewBox="0 0 55 32" width="40px" height="100%"> <title>nutanix-x</title> <path fill="#ffffff" style="fill: var(--color1, #ffffff)" d="M46.7 27h-1.2c-0.2 0-0.4-0.2-0.4-0.4s0.2-0.4 0.4-0.4h3.3c0.2 0 0.4 0.2 0.4 0.4s-0.2 0.4-0.4 0.4h-1.2v3.8c0 0.2-0.2 0.4-0.4 0.4s-0.4-0.2-0.4-0.4l-0.1-3.8z"></path> <path fill="#ffffff" style="fill: var(--color1, #ffffff)" d="M50.1 26.6c0-0.2 0.2-0.5 0.4-0.5h0.1c0.2 0 0.3 0.1 0.4 0.2l1.5 2.4 1.5-2.4c0.1-0.2 0.2-0.2 0.4-0.2h0.1c0.2 0 0.4 0.2 0.4 0.5v4.3c0 0.2-0.2 0.4-0.4 0.4s-0.4-0.2-0.4-0.4v-3l-1.2 1.9c-0.1 0.1-0.2 0.2-0.4 0.2s-0.3-0.1-0.4-0.2l-1.1-2v3c0 0.2-0.2 0.4-0.4 0.4s-0.4-0.2-0.4-0.4l-0.1-4.2z"></path> <path fill="#ffffff" style="fill: var(--color1, #ffffff)" d="M33.7 0.2c0.1-0.1 0.3-0.2 0.5-0.2h8.9c0.4 0 0.7 0.3 0.7 0.7 0 0.2-0.1 0.4-0.3 0.6l-13 11.6c-0.1 0.1-0.3 0.2-0.5 0.2s-0.4-0.1-0.5-0.2l-4.5-4c-0.1-0.1-0.2-0.3-0.2-0.5s0.1-0.4 0.3-0.6l8.6-7.6z"></path> <path fill="#ffffff" style="fill: var(--color1, #ffffff)" d="M33.7 31.1c0.1 0.1 0.3 0.2 0.5 0.2h8.9c0.4 0 0.7-0.3 0.7-0.7 0-0.2-0.1-0.4-0.3-0.6l-13-11.6c-0.1-0.1-0.3-0.2-0.5-0.2s-0.4 0.1-0.5 0.2l-4.5 4c-0.1 0.1-0.2 0.3-0.2 0.5s0.1 0.4 0.3 0.6l8.6 7.6z"></path> <path fill="#afcf44" style="fill: var(--color2, #afcf44)" d="M10.1 31.1c-0.1 0.1-0.3 0.2-0.5 0.2h-8.9c-0.4 0-0.7-0.3-0.7-0.7 0-0.2 0.1-0.4 0.2-0.5l15.5-13.8c0.2-0.1 0.3-0.3 0.3-0.6 0-0.2-0.1-0.4-0.2-0.5l-15.5-13.9c-0.2-0.1-0.3-0.3-0.3-0.6 0-0.4 0.3-0.7 0.7-0.7h8.9c0.2 0 0.4 0.1 0.5 0.2l16.7 14.9c0.2 0.1 0.2 0.3 0.2 0.6s-0.1 0.4-0.2 0.6l-16.7 14.8z"></path> </svg>
              </router-link>
              <router-link to="/" class="nav-item is-active">
                Home
              </router-link>
              <router-link to="/videos/" class="nav-item is-active">
                .NEXT
              </router-link>
              <a class="nav-item is-active">
                <span class="tag is-rounded">
                   Products
                </span>
              </a>
            </div>
          </div>
        </div>
        <div class="container description-container">
          <div class="row details">
            <div class="col-11">
              <h1 class="title">
                {{ selectedProduct.title }}
              </h1>
              <h4 class="subtitle">
                <p class="subtitle-tag">{{ selectedProduct.duration }} |</p>
                <p class="subtitle-tag">{{ selectedProduct.genre }} |</p>
                <p class="subtitle-tag">{{ selectedProduct.releaseDate }}</p>
              </h4>
              <p class="description">{{ selectedProduct.description }}</p>
              <div class="links">
                <router-link :to="{path: '/products/' + $route.params.id + '/preview'}" class="button play-button">Play <i class="fa fa-play"></i></router-link>
                
              </div>
            </div>
          </div>
        </div>
    </div>`,
  data() {
    return {
      selectedProduct: products[this.$route.params.id]
    };
  },
  watch: {
    $route() {
      this.selectProduct();
    }
  },
  methods: {
    selectProduct() {
      this.selectedProduct = products[this.$route.params.id];
    },
    addToFavorites(selectedProduct) {
      products[this.$route.params.id].favorite = !products[
        this.$route.params.id
      ].favorite;
    }
  }
};

const ProductTrailer = {
  template: `
    <div class="showreal-body" style="background: #000000">
      <div class="has-text-centered">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe 
            allow="autoplay; encrypted-media"
            class="embed-responsive-item" 
            frameborder="0"
            :src="previewUrlPath"
            allowFullScreen>
          </iframe>
        </div>
      </div>
    </div>`,
  data() {
    return {
      previewUrlPath: products[this.$route.params.id].previewPath
    };
  }
};

// 2. Define routes
const routes = [
  { path: "/", name: "intro", component: Intro },
  { path: "/videos/", name: "home", component: Home },
  { path: "/products/", name: "splash", component: Splash },
  { path: "/videos/:id", name: "video", component: Video },
  {
    path: "/videos/:id/trailer",
    name: "videotrailer",
    component: VideoTrailer
  },
  { path: "/products/:id", name: "product", component: Product },
  {
    path: "/products/:id/preview",
    name: "productpreview",
    component: ProductTrailer
  }
];

const router = new VueRouter({
  routes
});

const rootApp = new Vue({
  el: "#app",
  router: router,
  data() {
    return {
      videoChoices: videos,
      productChoices: products
    };
  }
});

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console