111 lines
4.0 KiB
Plaintext
111 lines
4.0 KiB
Plaintext
{% include "header", current_page_orgin: "false" %}
|
|
<main class="np-main np-homepage">
|
|
<div class="np-homepage-hero" style="background: transparent">
|
|
<div class="np-homepage-hero-content">
|
|
<div class="np-homepage-headline np-header-font-color" style="color: #fff">
|
|
{{ homepage.headline }}
|
|
</div>
|
|
<div class="np-homepage-subheadline np-header-font-color">
|
|
{{ homepage.subheadline }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="page-section homepage-navigation__section np-max-width">
|
|
<nav class="homepage-navigation__wrapper blocks-layout">
|
|
<div class="homepage-navigation__item-container">
|
|
<a class="homepage-navigation__item" href="/app/sec1-courses">
|
|
<div class="homepage-navigation__title">Dubber Section 1 Courses</div>
|
|
<img class="animation-pe homepage-navigation__animation" src="https://s3.amazonaws.com/static.northpass.com/dubber/dubber-graphic-1.png" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="homepage-navigation__item-container">
|
|
<a class="homepage-navigation__item" href="/app/sec2-courses">
|
|
<div class="homepage-navigation__title">Dubber Section 2 Courses</div>
|
|
<img class="animation-pe homepage-navigation__animation" src="https://s3.amazonaws.com/static.northpass.com/dubber/dubber-graphic-2.png" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="homepage-navigation__item-container">
|
|
<a class="homepage-navigation__item" href="/app/sec3-courses">
|
|
<div class="homepage-navigation__title">Dubber Section 3 Courses</div>
|
|
<img class="animation-pe homepage-navigation__animation" src="https://s3.amazonaws.com/static.northpass.com/dubber/dubber-graphic-3.png" alt="">
|
|
</a>
|
|
</div>
|
|
<div class="homepage-navigation__button-container">
|
|
<a class="homepage-navigation__button is-animation" href="{% route dashboard %}">
|
|
Go To <br>My Dashboard
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
</div >
|
|
{% if courses.featured and courses.featured.any? %}
|
|
<div class="np-homepage-featured page-section np-max-width">
|
|
|
|
{% comment %} Show featured section text if either headline or subheadline are defined {% endcomment %}
|
|
{% if homepage.featured_courses_headline and homepage.featured_courses_headline.size > 0 %}
|
|
{% assign has_featured_headline = true %}
|
|
{% else %}
|
|
{% assign has_featured_headline = false %}
|
|
{% endif %}
|
|
{% if homepage.featured_courses_subheadline and homepage.featured_courses_subheadline.size > 0 %}
|
|
{% assign has_featured_subheadline = true %}
|
|
{% else %}
|
|
{% assign has_featured_subheadline = false %}
|
|
{% endif %}
|
|
{% if has_featured_headline or has_featured_subheadline %}
|
|
<div class="np-homepage-featured-text">
|
|
{% if homepage.featured_courses_headline and homepage.featured_courses_headline.size > 0 %}
|
|
<div class="np-homepage-headline">
|
|
{{ homepage.featured_courses_headline }}
|
|
</div>
|
|
{% endif %}
|
|
{% if homepage.featured_courses_subheadline and homepage.featured_courses_subheadline.size > 0 %}
|
|
<div class="np-homepage-subheadline">
|
|
{{ homepage.featured_courses_subheadline }}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="blocks-layout">
|
|
{% comment %} Add different classes dependant on the number of featured courses. {% endcomment %}
|
|
{% assign card_classes = "card--horizontal np-stretch-content" %}
|
|
{% case courses.featured.size %}
|
|
{% when 3 %}
|
|
{% assign card_classes = card_classes | append: " col-lg-4" %}
|
|
{% when 2 %}
|
|
{% assign card_classes = card_classes | append: " col-md-6" %}
|
|
{% endcase %}
|
|
|
|
{% for course in courses.featured %}
|
|
{% include "cards_course", course: course, card_classes: card_classes %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
{% include "footer" %}
|
|
|
|
<style>
|
|
|
|
main {
|
|
background: linear-gradient(145deg, #635bff, #b10bdf, #f52558, #48d4ff, #f9b45e);
|
|
background-size: 400% 350%;
|
|
animation: gradient 15s ease-in-out infinite;
|
|
height: 75vh;
|
|
margin-top: -100px;
|
|
padding-top: 100px;
|
|
}
|
|
|
|
@keyframes gradient {
|
|
0% {
|
|
background-position: 0% 79%;
|
|
}
|
|
50% {
|
|
background-position: 100% 22%;
|
|
}
|
|
100% {
|
|
background-position: 0% 79%;
|
|
}
|
|
}
|
|
|
|
</style> |