49 lines
1.3 KiB
Plaintext
49 lines
1.3 KiB
Plaintext
<a class="np-card" href="{% route course_enrollment, code: course.enrollment_code %}">
|
|
<div class="np-card-container">
|
|
{% if course.ribbon %}
|
|
<div class="np-card-ribbon">
|
|
{{ course.ribbon }}
|
|
</div>
|
|
{% endif %}
|
|
<video class='left-video' autoplay muted loop>
|
|
<source src="{{course.promo_video_embed_url}}" type="video/mp4" alt="{{ course.name }}">
|
|
</video>
|
|
<div class="np-card-content-bottom">
|
|
<h3 class="np-card-content-title np-color-white">
|
|
{{ course.name }}
|
|
</h3>
|
|
<div class='np-card-content-description'>
|
|
{{ course.full_description }}
|
|
</div>
|
|
|
|
<div class="np-card-content-progress np-button-color">
|
|
{% t shared.progress, count: course.progress %}
|
|
</div>
|
|
<div class="np-card-content-category">
|
|
{{course.categories.first.name}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<style>
|
|
.np-card {
|
|
text-decoration: none;
|
|
color: white;
|
|
}
|
|
.np-card-content-category {
|
|
border-top: 1px solid lightgray;
|
|
padding: 10px;
|
|
}
|
|
.np-card-content-description {
|
|
display: block;
|
|
color: lightgray;
|
|
}
|
|
.np-card-content-bottom {
|
|
padding: 15px;
|
|
}
|
|
.np-button-color {
|
|
color: lightslategray;
|
|
font-size: 15px;
|
|
padding-bottom: 10px;
|
|
}
|
|
</style> |