{% set guest = true %}
{% extends 'layouts/' + layout + '.html' %}

{% block page %}
  <div class="mdk-box mdk-box--bg-{{ header_variant or 'dark' }} bg-dark js-mdk-box {{ headerClass or 'mb-0' }}" 
    data-effects="parallax-background blend-background">
    <div class="mdk-box__bg">
      <div class="mdk-box__bg-front" style="background-image: url({{ header_image or 'assets/images/photodune-4161018-group-of-students-m.jpg' }});"></div>
    </div>
    <div class="mdk-box__content justify-content-center">
      <div class="{% if header_hero !== false %}hero {% endif %}{{ containerClass }} text-center py-112pt{% if not header_center %} text-md-left{% endif %}">
        <h1 class="text-white text-shadow">{{ header_title or 'Learn to Code' }}</h1>
        <p class="lead measure{% if header_hero !== false %}-hero{% endif %}-lead mx-auto{% if not header_center %} mx-md-0{% endif %} text-white text-shadow{% if header_cta !== false or header_link !== false %} mb-48pt{% else %} mb-0{% endif %}">{{ header_subtitle or 'Business, Technology and Creative Skills taught by industry experts. Explore a wide range of skills with our professional tutorials.' }}</p>
        
        {% if header_cta !== false %}
          <a href="{{ prefix or '' }}courses.html" class="btn{% if header_hero !== false %} btn-lg{% endif %} btn-white btn--raised mb-16pt">Browse Courses</a>
        {% endif %}
        {% if header_link !== false %}
          <p class="mb-0"><a href="" class="text-white text-shadow"><strong>Are you a teacher?</strong></a></p>
        {% endif %}
      </div>
    </div>
  </div>

  {{ super() }}
{% endblock %}