<div 
  class="mdk-box bg-dark mdk-box--bg-gradient-primary js-mdk-box mb-0" 
  data-effects="blend-background">
  <div class="mdk-box__content">
    <div class="hero py-64pt text-center text-sm-left">
      <div class="container">
        <div class="d-flex flex-column flex-sm-row">
          <div class="order-1 order-sm-0">
            <h1 class="text-white">Learn Angular</h1>
            <p class="lead text-white-50 measure-hero-lead mb-24pt">It’s not every day that one of the most important front-end libraries in web development gets a complete overhaul. Keep your skills relevant and up-to-date with this comprehensive introduction to Google’s popular community project.</p>
            <a href="{{ prefix or '' }}student-path-assessment.html" class="btn btn-outline-white">Get started</a>
          </div>
          <div class="ml-sm-auto order-sm-1">
            <div class="position-relative overflow-hidden rounded border-4 border-light mb-16pt mb-sm-0">
              <div class="bg-primary fullbleed" style="opacity: .5;"></div>
              <img class="" src="assets/images/paths/angular_96x96.png" alt="Angular">
            </div>
          </div>
        </div>
      </div>
    </div>
    {% include 'pages/_path.navbar.html' %}
  </div>
</div>

<div class="{{ alt_bg }} border-bottom-2">
  {% import 'pages/_course.description.html' as desc %}
  {{ desc.component(
    title='Introduction',
    desc='<p class="text-70">Learn one way to build applications with Angu*lar and reuse your code and ab*ilities to build apps for any deployment target. For web, mobile web, native mobile and native desktop.</p>') }}
  
  <div class="page-section">
    <div class="{{ containerClass }}">
      <div class="row">
        <div class="col-lg-5 mb-24pt mb-lg-0">
          <div class="border-left-3 border-left-primary pl-24pt pl-md-32pt">
            <h4 class="mb-8pt">Skill Assessment</h4>
            <p class="text-70 mb-24pt">Measure your skill to find our where to start.</p>
            <a href="{{ prefix }}student-path-assessment.html" class="btn btn-primary">Start assessment</a>
          </div>
        </div>
        <div class="col-lg-7 d-flex align-items-center">
          <div class="page-num-timeline d-flex flex-column flex-sm-row align-items-center justify-content-center flex">
            <a href="" data-toggle="tooltip" data-placement="top" data-title="Your current level: Unknown" class="page-num-timeline__item page-num-timeline__item-current">
              <span class="page-num-timeline__item-tip"></span>
              <span class="page-num"><i class="material-icons">person</i></span>
            </a>
            <a href="" data-toggle="tooltip" data-placement="top" data-title="Beginner" class="page-num-timeline__item active">
              <span class="page-num-timeline__item-tip"></span>
              <span class="page-num">1</span>
            </a>
            <a href="" data-toggle="tooltip" data-placement="top" data-title="Intermediate" class="page-num-timeline__item">
              <span class="page-num-timeline__item-tip"></span>
              <span class="page-num">2</span>
            </a>
            <a href="" data-toggle="tooltip" data-placement="top" data-title="Advanced" class="page-num-timeline__item">
              <span class="page-num-timeline__item-tip"></span>
              <span class="page-num">3</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

{% import '_courses.carousel.html' as courses %}

<div class="{{ containerClass }}">
  <div class="border-left-2 page-section pl-32pt pb-8pt">
    <div class="d-flex align-items-center page-num-container">
      <div class="page-num">1</div>
      <h4>Beginner</h4>
    </div>
    <p class="text-70 mb-lg-32pt">Throughout these Angular courses for beginner*s you will learn core concepts*, common patterns using Angular and, finally, some of the best practices to build fully-functioning web applications using the Angular framework.</p>
    {{ courses.component(pager=false, control=true) }}
  </div>
  <div class="border-left py-32pt pb-lg-64pt pl-32pt">
    <div class="d-flex align-items-center page-num-container">
      <div class="page-num">2</div>
      <h4>Intermediate</h4>
    </div>
    <p class="text-70 mb-lg-32pt">Once you have the basics using the Angular framework, you will continue to build on your existing knowledge and, with these intermediate courses you will have a deeper understanding into features like services, routing and testing.</p>
    {{ courses.component(
      id="2",
      pager=false, 
      control=true,
      items=[{
        title: 'Angular Unit Testing',
        image: 'angular_testing',
        avatar: 'angular',
        position: 'left'
      }, {
        title: 'Angular Routing In-Depth',
        image: 'angular_routing',
        avatar: 'angular',
        position: 'left'
      }, {
        title: 'Angular Services',
        image: 'angular_services',
        avatar: 'angular',
        position: 'left'
      }, {
        title: 'Angular Patterns',
        image: 'angular_patterns',
        avatar: 'angular'
      }]) }}
  </div>
</div>