jjsv
This commit is contained in:
Norm Rasmussen
@ -1,118 +1,241 @@
|
||||
{% include "header" %}
|
||||
{% include "course_version_outdated_alert", courses: courses.featured %}
|
||||
{% comment %} {% include "course_version_outdated_alert", courses: courses.featured %} {% endcomment %}
|
||||
|
||||
|
||||
<main class="np-main np-homepage">
|
||||
{% include "homepage_hero_carousel" %}
|
||||
{% comment %} {% include "sub_navigation" %} {% endcomment %}
|
||||
<div class="np-subpage-container">
|
||||
<div class="row intro-row" style="margin-top:64px;">
|
||||
<div class="col-12 col-md-6 col-lg-7">
|
||||
<div class="homepage-intro">
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<div class="col-0 col-lg-1"></div>
|
||||
<div class="col-12 col-md-6 col-lg-4">
|
||||
<a href="{% route catalog %}" class="catalog-card">
|
||||
<p class="catalog-card-header">Course Library</p>
|
||||
|
||||
<p class="catalog-card-subhead">Click here to explore our catalog of courses <i class="fal fa-long-arrow-right"></i></p>
|
||||
</a>
|
||||
|
||||
{% 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>
|
||||
|
||||
{% include "cards_categories", class: "col-xs-12 col-sm-6 col-md-4 col-lg-3" %}
|
||||
|
||||
</div>
|
||||
|
||||
{% include "homepage_events" %}
|
||||
|
||||
{% include "section_faqs" %}
|
||||
|
||||
{% include "section_contact_us" %}
|
||||
|
||||
</main>
|
||||
|
||||
{% include "footer" %}
|
||||
|
||||
|
||||
<style>
|
||||
.homepage-intro {
|
||||
margin-bottom:64px;
|
||||
}
|
||||
.sidebar-content-block,
|
||||
.sidebar-content-block:hover {
|
||||
background: #f3f3f3;
|
||||
padding: 32px;
|
||||
color: #212121;
|
||||
display: block;
|
||||
margin-bottom:32px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.homepage-intro-headline {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
margin-bottom:16px;
|
||||
}
|
||||
.sidebar-header,
|
||||
.welcome-block-header,
|
||||
.block-header {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.homepage-intro-subheadline {
|
||||
font-size: 18px;
|
||||
line-height: 26px;
|
||||
}
|
||||
.sidebar-content-block .arrow-icon {
|
||||
text-align: right;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.np-homepage .np-subpage-container {
|
||||
padding: 0 24px 50px;
|
||||
max-width: 1400px;
|
||||
margin:auto;
|
||||
}
|
||||
.sidebar-content-block .arrow-icon .fa-long-arrow-right,
|
||||
.sidebar-desc .arrow-icon {
|
||||
color: #009999;
|
||||
font-size: 32px;
|
||||
|
||||
}
|
||||
|
||||
.catalog-card {
|
||||
background: #fafafa;
|
||||
padding: 32px;
|
||||
color: #212121;
|
||||
text-decoration: none;
|
||||
.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;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.catalog-card:hover {
|
||||
color: #212121;
|
||||
.np-categories-content p {
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.catalog-card:hover .catalog-card-subhead {
|
||||
.np-categories-content .arrow-icon {
|
||||
text-align:right;
|
||||
margin-top:12px;
|
||||
}
|
||||
|
||||
.np-categories-content .arrow-icon i {
|
||||
color: #009999;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.catalog-card-header {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
p.homepage-card-title {
|
||||
color: #212121;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 12px!important;
|
||||
}
|
||||
|
||||
.catalog-card-subhead {
|
||||
font-size:18px;
|
||||
line-height:22px;
|
||||
color:#009999;
|
||||
display:inline-flex;
|
||||
align-items: center;
|
||||
p.homepage-card-desc {
|
||||
line-height:normal;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.np-card-content {
|
||||
background: #f4f4f4!important;
|
||||
}
|
||||
|
||||
.np-card-content-title {
|
||||
shadow: 0!important;
|
||||
}
|
||||
|
||||
.courses-left-small {
|
||||
padding-top: 190px;
|
||||
}
|
||||
|
||||
@media (min-width:1170px) {
|
||||
.np-homepage .np-subpage-container {
|
||||
padding: 0 22px 120px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user