<div class="navbar {{ navbar_submenu_class }} border-0 navbar-expand">
  <div class="container">
    <div class="media flex-nowrap">
      <div class="media-left mr-16pt">
        <a href="{{ prefix or '' }}course.html"><img src="assets/images/paths/angular_64x64.png" width="40" alt="Angular" class="rounded"></a>
      </div>
      <div class="media-body">
        <a href="{{ prefix or '' }}course.html" class="card-title text-body mb-0">Angular Fundamentals</a>
        <p class="lh-1 d-flex align-items-center mb-0">
          <span class="text-50 small font-weight-bold mr-8pt">Elijah Murray</span>
          <span class="text-50 small">Software Engineer and Developer</span>
        </p>
      </div>
    </div>
  </div>
</div>
<div class="bg-gradient-primary pb-lg-64pt py-32pt">
  <div class="container">
    <nav class="course-nav">
      <a data-toggle="tooltip" data-placement="bottom" data-title="Getting Started with Angular: Introduction"><span class="material-icons" href="">lock</span></a>
      <a class="active" data-toggle="tooltip" data-placement="bottom" data-title="Getting Started with Angular: Introduction to TypeScript" href=""><span class="material-icons">account_circle</span></a>
      <a data-toggle="tooltip" data-placement="bottom" data-title="Getting Started with Angular: Comparing Angular to AngularJS" href=""><span class="material-icons">lock</span></a>
      <a data-toggle="tooltip" data-placement="bottom" data-title="Getting Started with Angular: Lesson 4" href=""><span class="material-icons">lock</span></a>
    </nav>
    <div class="js-player embed-responsive embed-responsive-16by9 mb-32pt">
      <div class="player embed-responsive-item">
        <div class="player__content">
          <div class="player__image" style="--player-image: url(assets/images/illustration/player.svg)"></div>
          <a href="" class="player__play">
            <span class="material-icons">play_arrow</span>
          </a>
        </div>
        <div class="player__embed d-none">
          <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/97243285?title=0&amp;byline=0&amp;portrait=0" allowfullscreen=""></iframe>
        </div>
      </div>
    </div>

    <div class="d-flex flex-wrap align-items-end mb-16pt">
      <h1 class="text-white flex m-0">Introduction to TypeScript</h1>
      <p class="h1 text-white-50 font-weight-light m-0">50:13</p>
    </div>

    <p class="hero__lead measure-hero-lead text-white-50 mb-24pt">JavaScript is now used to power backends, create hybrid mobile applications, architect cloud solutions, design neural networks and even control robots. Enter TypeScript: a superset of JavaScript for scalable, secure, performant and feature-rich applications.</p>

    <div class="d-flex flex-column flex-sm-row align-items-center justify-content-start">
      <a href="{{ prefix or '' }}lesson.html" class="btn btn-outline-white mb-16pt mb-sm-0 mr-sm-16pt">Watch trailer <i class="material-icons icon--right">play_circle_outline</i></a>
      <a href="{{ prefix or '' }}pricing.html" class="btn btn-white">Get started</a>
    </div>
  </div>
</div>
{% include 'pages/_course.navbar.html' %}