197 lines
11 KiB
Plaintext
197 lines
11 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>
|
|
{% assign role = current_person.properties.role %}
|
|
{% case role %}
|
|
{% when 'developer', 'architect' %}
|
|
<div class="np-homepage-subheadline np-header-font-color">
|
|
<span>Hi {{ current_person.first_name }}, how is the weather in {{ current_person.properties.location }}?</span>
|
|
<br>
|
|
<span>Your chosen learning style {{ current_person.properties.role }}.</span>
|
|
<br>
|
|
<span style="color: white;">Choose your path</span>
|
|
</div>
|
|
{% else %}
|
|
<div class="np-homepage-subheadline np-header-font-color">
|
|
<span>Hi {{ current_person.first_name }}, how is the weather in {{ current_person.properties.location }}?</span>
|
|
<br>
|
|
<span>Choose your learning style:
|
|
<div class="dropdown">
|
|
<button class="dropbtn">Select learning style ▼ </button>
|
|
<div class="dropdown-content">
|
|
<a href="#">Text Courses</a>
|
|
<a href="#">Video Courses</a>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
<br>
|
|
<span style="color: white;">Choose your path</span>
|
|
</div>
|
|
{% endcase %}
|
|
</div>
|
|
</div>
|
|
{% comment %} <svg class="homepage-waves__wave-1-container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 150">
|
|
<path class="homepage-waves__wave-1 is-animation" d="M5984.23,101c-58.92-1.53-60.5-94.9-141.4-95.37-82.28-.48-87.5,94.18-169.31,92.18-60.28-1.48-80.93-94.31-149.31-92.66-67.51,1.64-83.1,87.24-155.81,86.28-49.22-.65-72-77.4-122.79-82.61-72.21-7.41-72.5,80.57-156.29,79.42-66.63-.92-68.81-87.51-123.81-85C4900.7,6.11,4893.8,95,4827.92,93.55c-51.81-1.16-71.73-83.71-114.42-86.1-72.39-4.06-85.27,88.17-160,89.29C4482.8,97.81,4484.4-.95,4432.57,0,4371.39,1.14,4356.11,93,4294,96.74c-60.14,3.67-78-94.36-142.33-94.61C4083,1.87,4077.21,104.19,4000,104.19c-50.91,0-68.57-98.87-121.86-98.87-59.83,0-80.93,104.18-157.22,102.05-60.56-1.68-68-101-142.92-101-60.32,0-69.95,101.3-156,100.61-46.95-.38-60-97-124.6-99.78C3224.62,4.08,3232.62,101,3148,107.37c-64,4.83-79.69-96.59-138.61-99.24-57.56-2.58-83.72,90.74-153.49,89.68-54.53-.83-79.4-95.2-142.33-94.61-63.24.59-85.42,94.22-156.28,93.54C2492.62,96.13,2493,11,2427,8.26c-77.22-3.19-61.83,95.8-153.5,94.86-52.48-.53-83-97.84-131.16-101C2077.9-2.09,2054,102.8,1984.23,101c-58.92-1.53-60.5-94.9-141.4-95.37-82.28-.48-87.5,94.18-169.31,92.18-60.28-1.48-80.93-94.31-149.31-92.66-67.51,1.64-83.1,87.24-155.81,86.28-49.22-.65-72-77.4-122.79-82.61-72.21-7.41-72.5,80.57-156.29,79.42-66.63-.92-68.81-87.51-123.81-85C900.7,6.11,893.8,95,827.92,93.55,776.11,92.39,756.19,9.84,713.5,7.45c-72.39-4.06-85.27,88.17-160,89.29C482.8,97.81,484.4-.95,432.57,0,371.39,1.14,356.11,93,294,96.74c-60.14,3.67-78-94.36-142.33-94.61C83,1.87,77.21,104.19,0,104.19V150H6000V99.52A65.85,65.85,0,0,1,5984.23,101Z"/>
|
|
</svg>{% endcomment %}
|
|
<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/knowledge">
|
|
<div class="homepage-navigation__title">Text Courses</div>
|
|
<img class="animation-pe homepage-navigation__animation" src="https://s3.amazonaws.com/static.northpass.com/Crossbeam/Text+GIF.gif" alt="">
|
|
</a>
|
|
</div>
|
|
{% if current_person.properties.partner_training_cert == false %}
|
|
<div class="homepage-navigation__item-container">
|
|
<a class="homepage-navigation__item">
|
|
<div class="homepage-navigation__title" style="filter:grayscale(1)" >Video Courses</div>
|
|
<img class="animation-pe homepage-navigation__animation" src="https://s3.amazonaws.com/static.northpass.com/Crossbeam/Video+GIF.gif" alt="" style="filter:grayscale(1)">
|
|
</a>
|
|
</div>
|
|
{% else %}
|
|
<div class="homepage-navigation__item-container">
|
|
<a class="homepage-navigation__item" href="/app/certifications">
|
|
<div class="homepage-navigation__title">Video Courses</div>
|
|
<img class="animation-pe homepage-navigation__animation" src="https://s3.amazonaws.com/static.northpass.com/Crossbeam/Video+GIF.gif" alt="">
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</nav>
|
|
</div >
|
|
</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 %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% comment %}
|
|
<svg class="homepage-waves__wave-2-container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 150">
|
|
<path class="homepage-waves__wave-2 is-animation" d="M7818.66,2.13C7737.85-2.09,7707.9,102.8,7620.41,101c-73.85-1.53-75.84-94.9-177.26-95.37C7340,5.15,7333.46,99.81,7230.91,97.81c-75.58-1.48-101.46-94.31-187.18-92.66-84.64,1.64-104.18,87.24-195.33,86.28-61.7-.65-90.28-77.4-153.94-82.61-90.53-7.41-90.89,80.57-195.92,79.42-83.53-.92-86.27-87.51-155.22-85-81.25,2.91-89.9,91.83-172.48,90.35-65-1.16-89.93-83.71-143.44-86.1a115.28,115.28,0,0,0-27.4,1.9v.13c-67.84,13.2-89.79,86.4-173.18,87.4-88.63,1.06-86.63-97.7-151.61-96.74-76.69,1.13-95.84,93-173.76,96.74-75.39,3.67-97.77-94.36-178.43-94.61-86.08-.27-93.29,102.05-190.09,102.05-63.82,0-86-98.86-152.77-98.86-75,0-95,105.17-190.66,103-75.92-1.69-68-100-160-97-57.86,1.89-77.69,84.57-164,85-78.21.39-82-86-152-88-86.37-2.45-79.66,93.56-174.12,96.75-80.42,2.71-68.16-99-183.61-96.86C3879,9.81,3839.6,101,3762.7,101c-72.94,0-78.26-96.73-169.23-94.61-75.58,1.77-115.21,103-179.46,99.92C3355.25,103.49,3345.2,6,3266.65,7.22c-91.31,1.4-81.21,93.78-187.34,100.15-80.24,4.83-99.9-96.59-173.76-99.24-72.17-2.58-105,90.74-192.42,89.68C2644.77,97,2613.59,2.61,2534.7,3.2c-79.28.59-107.08,94.22-195.92,93.54-81-.61-80.6-85.76-163.26-88.48-96.8-3.19-77.51,95.8-192.42,94.86-65.79-.53-104.08-97.84-164.44-101C1737.85-2.09,1707.9,102.8,1620.41,101c-73.85-1.53-75.84-94.9-177.26-95.37C1340,5.15,1333.46,99.81,1230.91,97.81c-75.58-1.48-101.46-94.31-187.18-92.66C959.09,6.79,939.55,92.39,848.4,91.43,786.7,90.78,758.12,14,694.46,8.82c-90.53-7.41-90.89,80.57-195.92,79.42C415,87.32,412.27.73,343.32,3.2,262.07,6.11,253.42,95,170.84,93.55c-65-1.16-89.93-83.71-143.44-86.1A115.28,115.28,0,0,0,0,9.35V150H8000V102.47c-5.3.46-10.91.7-16.9.65C7917.31,102.59,7879,5.28,7818.66,2.13Z"/>
|
|
</svg>
|
|
<svg class="homepage-waves__wave-3-container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 150">
|
|
<path class="homepage-waves__wave-3 is-animation" d="M7682.34,88.24c-107.48-.92-111-87.51-199.73-85C7378.07,6.11,7366.94,95,7260.68,93.55,7177.1,92.39,7145,9.84,7076.12,7.45,6959.34,3.39,6938.56,95.62,6818,96.74,6704,97.81,6706.56-.95,6623,0,6524.28,1.14,6499.63,93,6399.37,96.74c-97,3.67-125.8-94.36-229.58-94.61-83.25-.2-109.17,57.55-169.79,86.25-20,9.49-43.86,15.81-74.8,15.81-82.12,0-110.6-98.87-196.57-98.87-96.5,0-130.55,104.18-253.6,102.05C5377.34,105.69,5354.78,8.61,5231,9c-76,.24-124,96-227.95,98.37-103.33,2.36-128.55-96.59-223.59-99.24-92.85-2.58-135,90.74-247.59,89.68-88-.83-128.08-95.2-229.58-94.61-102,.59-137.79,94.22-252.09,93.54C3945.93,96.13,3946.48,11,3840.12,8.26c-124.54-3.19-99.73,95.8-247.59,94.86-84.65-.53-133.91-97.84-211.57-101C3277-2.09,3238.43,102.8,3125.86,101c-95-1.53-97.58-94.9-228.08-95.37-132.71-.48-141.14,94.18-273.1,92.18-97.24-1.48-130.55-94.31-240.85-92.66-108.9,1.64-134,87.24-251.33,86.28-79.39-.65-116.16-77.4-198.07-82.61C1818,1.41,1817.49,89.39,1682.34,88.24c-107.48-.92-111-87.51-199.73-85C1378.07,6.11,1366.94,95,1260.68,93.55,1177.1,92.39,1145,9.84,1076.12,7.45,959.34,3.39,938.56,95.62,818,96.74,704,97.81,706.56-.95,623,0,524.28,1.14,499.63,93,399.37,96.74c-97,3.67-125.8-94.36-229.58-94.61C86.54,1.93,60.62,59.68,0,88.38V150H8000V29.78c-19.27-10.91-40.27-19.35-65.57-21C7818,1.41,7817.49,89.39,7682.34,88.24Z"/>
|
|
</svg>{% endcomment %}
|
|
</main>
|
|
{% include "footer" %}
|
|
|
|
<style>
|
|
.np-header {
|
|
background: transparent;
|
|
}
|
|
|
|
|
|
|
|
main {
|
|
background: linear-gradient(145deg, #03313F, #77D9E2, #306674, #F23251, #001A1C);
|
|
background-size: 400% 350%;
|
|
animation: gradient 15s ease-in-out infinite;
|
|
height: 75vh;
|
|
margin-top: -100px;
|
|
padding-top: 100px;
|
|
}
|
|
|
|
@media only screen and (max-height: 730px) {
|
|
body {
|
|
display: block;
|
|
}
|
|
|
|
main {
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
@keyframes gradient {
|
|
0% {
|
|
background-position: 0% 79%;
|
|
}
|
|
50% {
|
|
background-position: 100% 22%;
|
|
}
|
|
100% {
|
|
background-position: 0% 79%;
|
|
}
|
|
}
|
|
|
|
.dropbtn {
|
|
background-color: transparent;
|
|
color: #1B2759;
|
|
border: black;
|
|
}
|
|
|
|
/* The container <div> - needed to position the dropdown content */
|
|
.dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Dropdown Content (Hidden by Default) */
|
|
.dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: #77D9E2;
|
|
min-width: 100%;
|
|
box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Links inside the dropdown */
|
|
.dropdown-content a {
|
|
color: black;
|
|
padding: 12px 16px;
|
|
text-decoration: none;
|
|
display: block;
|
|
}
|
|
|
|
/* Change color of dropdown links on hover */
|
|
.dropdown-content a:hover {background-color: #635bff60;}
|
|
|
|
/* Show the dropdown menu on hover */
|
|
.dropdown:hover .dropdown-content {display: block;}
|
|
|
|
/* Change the background color of the dropdown button when the dropdown content is shown */
|
|
.dropdown:hover .dropbtn {background-color: #77D9E2;}
|
|
</style> |