242 lines
8.2 KiB
Plaintext
242 lines
8.2 KiB
Plaintext
{% include "header" %}
|
|
{% comment %} {% include "course_version_outdated_alert", courses: courses.featured %} {% endcomment %}
|
|
|
|
|
|
<main class="np-main np-homepage">
|
|
{% include "homepage_hero_carousel" %}
|
|
|
|
<div class="np-subpage-container">
|
|
<div class="row">
|
|
<div class="col-12 col-md-6 col-lg-7">
|
|
<div class="homepage-intro">
|
|
<div class="homepage-intro-headline np-header-font-color">
|
|
{{ homepage.featured_courses_headline }}
|
|
</div>
|
|
<div class="homepage-intro-subheadline">
|
|
{{ homepage.featured_courses_subheadline }}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-12">
|
|
{% include "video_carousel" %}
|
|
</div>
|
|
</div>
|
|
<div class="row homepage-cards">
|
|
{% if current_person.signed_in? %}
|
|
<div class="col-xs-12 col-sm-6">
|
|
<a class="np-card" href="/app/training_events">
|
|
<div class="category-card-container">
|
|
<img
|
|
class="np-categories-image"
|
|
alt="Podcasts"
|
|
src="https://s3.amazonaws.com/static.northpass.com/J%26J/conference-audience.jpg"
|
|
>
|
|
</div>
|
|
<div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
|
|
<p class="homepage-card-title">Professional Events</p>
|
|
<p class="homepage-card-desc">Click here to register for upcoming events.</p>
|
|
<div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% else %}
|
|
<div class="col-xs-12 col-sm-6">
|
|
<div class="np-card">
|
|
<div class="category-card-container">
|
|
<img
|
|
class="np-categories-image"
|
|
src="https://s3.amazonaws.com/static.northpass.com/J%26J/conference-audience.jpg"
|
|
>
|
|
</div>
|
|
<div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
|
|
<p class="homepage-card-title">Professional Events</p>
|
|
<p class="homepage-card-desc">Register today and get access to upcoming profressional events.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="col-xs-12 col-sm-6">
|
|
<a class="np-card" href="/app/catalog">
|
|
<div class="category-card-container">
|
|
<img
|
|
class="np-categories-image"
|
|
alt="Podcasts"
|
|
src="https://s3.amazonaws.com/static.northpass.com/J%26J/JNJ4.png"
|
|
>
|
|
</div>
|
|
<div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
|
|
<p class="homepage-card-title">Explore All Content</p>
|
|
<p class="homepage-card-desc">Discover all available topics</p>
|
|
<div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6">
|
|
<a class="np-card" href="/app/catalog?category=productinformation">
|
|
<div class="category-card-container">
|
|
<img
|
|
class="np-categories-image"
|
|
alt="Podcasts"
|
|
src="https://s3.amazonaws.com/static.northpass.com/J%26J/white_beard_eye_exam.jpg"
|
|
>
|
|
</div>
|
|
<div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
|
|
<p class="homepage-card-title">Product Information</p>
|
|
{% comment %} <p class="homepage-card-desc"></p> {% endcomment %}
|
|
<div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% if current_person.signed_in? %}
|
|
<div class="col-xs-12 col-sm-6">
|
|
<a class="np-card" href="/app/dashboard">
|
|
<div class="category-card-container">
|
|
<img
|
|
class="np-categories-image"
|
|
alt="Podcasts"
|
|
src="https://s3.amazonaws.com/static.northpass.com/J%26J/couple_ipad_podcast.jpg"
|
|
>
|
|
</div>
|
|
<div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
|
|
<p class="homepage-card-title">My Topics</p>
|
|
<p class="homepage-card-desc">Tailored content based on your area of expertise</p>
|
|
<div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
{% else %}
|
|
<div class="col-xs-12 col-sm-6">
|
|
<div class="np-card">
|
|
<div class="category-card-container">
|
|
<img
|
|
class="np-categories-image"
|
|
alt="Podcasts"
|
|
src="https://s3.amazonaws.com/static.northpass.com/J%26J/couple_ipad_podcast.jpg"
|
|
>
|
|
</div>
|
|
<div class="np-categories-content np-categories-content-vertical np-card-padding course-card-content" style='padding: 1.5rem;'>
|
|
<p class="homepage-card-title">My Topics</p>
|
|
<p class="homepage-card-desc">Tailored content based on your area of expertise</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% comment %} {% include "homepage_category_cards", class: "col-xs-12 col-sm-6" %} {% endcomment %}
|
|
</div>
|
|
<div class="col-0 col-lg-1"></div>
|
|
<div class="col-12 col-md-6 col-lg-4">
|
|
{% include "homepage_login_registration" %}
|
|
<a href="https://app.smartsheet.com/b/form/36c0f66e21ff4bf8b833bb4bbbf0b635" class="sidebar-content-block contact-block" target="_blank">
|
|
<p class="sidebar-header">Contact Us </p>
|
|
|
|
<div class="sidebar-desc">Click here to contact us for more information <i class=" arrow-icon fal fa-long-arrow-right"></i></div>
|
|
{% comment %} <div class="arrow-icon"><i class="fal fa-long-arrow-right"></i></div> {% endcomment %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{% include "footer" %}
|
|
|
|
<style>
|
|
.sidebar-content-block,
|
|
.sidebar-content-block:hover {
|
|
background: #f3f3f3;
|
|
padding: 32px;
|
|
color: #212121;
|
|
display: block;
|
|
margin-bottom:32px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.sidebar-header,
|
|
.welcome-block-header,
|
|
.block-header {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.sidebar-content-block .arrow-icon {
|
|
text-align: right;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.sidebar-content-block .arrow-icon .fa-long-arrow-right,
|
|
.sidebar-desc .arrow-icon {
|
|
color: #009999;
|
|
font-size: 32px;
|
|
|
|
}
|
|
|
|
.sidebar-desc .arrow-icon {
|
|
margin-top: 0!important;
|
|
position: relative;
|
|
top: 5px;
|
|
left: 5px;
|
|
}
|
|
|
|
.homepage-cards .np-card {
|
|
padding:0 0 32px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-decoration:none;
|
|
}
|
|
|
|
.category-card-container {
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 200px;
|
|
}
|
|
|
|
.category-card-container img {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
width: 100%;
|
|
height: 100%;
|
|
transform: translate(-50%, -50%);
|
|
object-fit: cover;
|
|
}
|
|
|
|
.np-categories-content {
|
|
color: #212121;
|
|
background: #f3f3f3;
|
|
font-size: 18px;
|
|
flex:2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.np-categories-content p {
|
|
margin:0;
|
|
}
|
|
|
|
.np-categories-content .arrow-icon {
|
|
text-align:right;
|
|
margin-top:12px;
|
|
}
|
|
|
|
.np-categories-content .arrow-icon i {
|
|
color: #009999;
|
|
font-size: 32px;
|
|
}
|
|
|
|
p.homepage-card-title {
|
|
color: #212121;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
margin-bottom: 12px!important;
|
|
}
|
|
|
|
p.homepage-card-desc {
|
|
line-height:normal;
|
|
}
|
|
|
|
|
|
</style>
|