<div class="np-card-container">
  <div class='np-course-header'>
    <img
    src="{{ course.image_url }}"
    class="np-top-image np-top-image-spacing"
    alt="{{ course.name }}"
    />
    <div class='np-course-header-right'>
      <div class='np-course-header-right-name'>
        {{ course.name }}
      </div>
      <div class='np-course-header-right-short'>
        Learn the basics of profile value, how to customize your profile to catch the eyes of more buyers, and demand capture 101. 
      </div>
      <div class='np-course-header-right-button'>
        {% include "course_progress_and_cta" %}
      </div>
    </div>
  </div>
  <div class='np-course-bottom'>
    <div class='np-course-bottom-left'>
      <div class='np-course-bottom-left-title'>
        Curriculum
      </div>
      <div class='np-course-bottom-left-outline'>
        {% for section in course.sections %}
          <div class='np-course-bottom-left-outline-section'>
            {{ section.name }}
          </div>
          {% for activity in section.activities %}
            <div class='np-course-bottom-left-outline-activity'>
              {{ activity.title }}
            </div>
          {% endfor %}
        {% endfor %}
      </div>
    </div>
    <div class='np-course-bottom-right'>
      <div class='np-course-bottom-right-title'>
        About this course
      </div>
      <div class='np-course-bottom-right-description'>
        {{ course.full_description }}
      </div>
    </div>
  </div>
</div>

<style>
  body {
    background: rgb(254, 254, 254);
  }
  .np-card-container {
    background: rgb(254, 254, 254);
    box-shadow: none;
  }
  .np-course-header {
    display: flex;
    border-bottom: 1px solid #d6d6d6;
    padding-bottom: 40px;
  }
  .np-top-image {
    height: 400;
    margin: auto 0;
  }
  .np-course-header-right {
    padding-left: 50px;
  }
  .np-course-header-right-name {
    color: rgb(38, 49, 61);
    font-size: 50px;
    font-weight: 800;
    margin-bottom: 25px;
    margin-top: 40px;
  }
  .np-course-header-right-short {
    color: rgb(38, 49, 61);
    font-size: 21px;
    font-weight: 400px;
    margin-bottom: 40px;
  }
  .np-course-bottom {
    display: flex;
    margin-top: 70px;
  }
  .np-course-bottom-left{
    width: 70%;
  }
  .np-course-bottom-left-title {
    font-weight: 900;
    color: rgb(38, 49, 61);
    font-size: 24px;
    margin-bottom: 20px;
  }
  .np-course-bottom-left-outline {
    border: 1px solid #979797 !important;
    border-radius: 10px;
    padding: 20px 0;
  }
  .np-course-bottom-left-outline-section {
    margin: 10px 0;
    padding: 0 40px 0 20px;
    font-size: 18px;
    line-height: 1.4;
    text-transform: uppercase;
    font-weight: 900;
  }
  .np-course-bottom-left-outline-activity {
    padding: 7px 30px;
    font-size: 18px;
    line-height: 28.8px;
    font-weight: 400;
  }
  .np-course-bottom-right {
    margin-left: 110px;
  }
  .np-course-bottom-right-title {
    font-weight: 900;
    color: rgb(38, 49, 61);
    font-size: 24px;
  }
  .np-course-bottom-right-description {
    font-size: 18px;
    font-weight: 400;
    color: rgb(10, 10, 10);
  }
</style>