82 lines
1.7 KiB
Plaintext
82 lines
1.7 KiB
Plaintext
{% assign bg_color = "#FAFAFA" %}
|
|
{% assign txt_color = "#2E29FC" %}
|
|
{% assign content_type = course.properties.content_type | downcase | replace: " ", "-" %}
|
|
|
|
{% if content_type == "blue-mattr" %}
|
|
{% assign bg_color = "#E2E5FF" %}
|
|
{% assign txt_color = "#2E29FC" %}
|
|
{% endif %}
|
|
|
|
{% if content_type == "dark-mattr" %}
|
|
{% assign bg_color = "#333132" %}
|
|
{% assign txt_color = "#EAD9E3" %}
|
|
{% endif %}
|
|
|
|
{% if content_type == "grey-mattr" %}
|
|
{% assign bg_color = "#C0BDBF" %}
|
|
{% assign txt_color = "#333132" %}
|
|
{% endif %}
|
|
|
|
<div class="course-header" style="background-color:{{bg_color}}">
|
|
<img class="course-header-image np-hidden-mobile" src="{{ course.image_url }}" alt="{{ course.name }}" />
|
|
<div class="np-max-width course-header-container">
|
|
<div class="course-title" style="color:{{txt_color}}">
|
|
{{ course.name }} ({{course.properties.experience}})
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.course-header {
|
|
position: relative;
|
|
width: 100%;
|
|
margin-top:70px;
|
|
}
|
|
|
|
.course-header-image {
|
|
position:absolute;
|
|
right:0;
|
|
top:50%;
|
|
transform:translateY(-50%);
|
|
height:100%;
|
|
width:auto;
|
|
}
|
|
|
|
.course-header-container {
|
|
padding: 32px 24px;
|
|
}
|
|
|
|
.course-title {
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
max-width: 520px;
|
|
line-height: 38px;
|
|
position: relative;
|
|
}
|
|
|
|
@media (min-width:768px) {
|
|
.course-header {
|
|
height: 300px;
|
|
}
|
|
|
|
.course-header-container {
|
|
padding: 48px 24px 32px;
|
|
}
|
|
|
|
.course-title {
|
|
font-size: 40px;
|
|
line-height: 48px;
|
|
}
|
|
}
|
|
|
|
@media (min-width:1200px) {
|
|
.course-header-container {
|
|
padding: 48px 5% 32px;
|
|
}
|
|
|
|
.course-title {
|
|
font-size: 48px;
|
|
line-height: 52px;
|
|
}
|
|
}
|
|
</style> |