296 lines
9.0 KiB
Plaintext
296 lines
9.0 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-lg-6 col-xl-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/dashboard">
|
|
<div class="category-card-container">
|
|
<img
|
|
class="np-categories-image"
|
|
alt="Podcasts"
|
|
src="https://s3.amazonaws.com/static.northpass.com/J%26J/homepage_card_my_topics.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">My Topics</p>
|
|
<p class="homepage-card-desc">Access tailored content based on your specialty.</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/homepage_card_my_topics.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">My Topics</p>
|
|
<p class="homepage-card-desc">Access tailored content based on your specialty.</p>
|
|
<div class="arrow-icon" style="visibility:hidden;"><i class="fal fa-long-arrow-right"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% 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"
|
|
src="https://s3.amazonaws.com/static.northpass.com/J%26J/homepage_card_professional_events.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">We welcome you to join us at Professional Education opportunities across
|
|
the US and near you.</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/homepage_card_professional_events.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">We welcome you to join us at Professional Education opportunities across
|
|
the US and near you.</p>
|
|
<div class="arrow-icon" style="visibility:hidden;"><i class="fal fa-long-arrow-right"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="col-xs-12 col-sm-6">
|
|
<a class="np-card" href="/app/product-education">
|
|
<div class="category-card-container">
|
|
<img
|
|
class="np-categories-image"
|
|
alt="Podcasts"
|
|
src="https://s3.amazonaws.com/static.northpass.com/J%26J/homepage_card_product_education.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">Product Education</p>
|
|
<p class="homepage-card-desc">Videos, webinars, and education programs to improve your knowledge of
|
|
Johnson and Johnson technologies.</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">
|
|
<div class="category-card-container">
|
|
<img
|
|
class="np-categories-image"
|
|
alt="Podcasts"
|
|
src="https://s3.amazonaws.com/static.northpass.com/J%26J/homepage_card_all_content.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">Content Library</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>
|
|
</div>
|
|
<div class="col-xl-1 offset-col"></div>
|
|
<div class="col-12 col-lg-6 col-xl-4">
|
|
{% include "homepage_login_registration" %}
|
|
<a href="mailto:JJSVEducationDigitalPlatformSupport@its.jnj.com" class="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>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{% include "footer" %}
|
|
|
|
<style>
|
|
|
|
.np-homepage .np-subpage-container {
|
|
padding: 40px 24px 0;
|
|
max-width: 1440px;
|
|
margin: auto;
|
|
}
|
|
|
|
.offset-col {
|
|
display:none;
|
|
}
|
|
|
|
.homepage-intro {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.homepage-intro-headline {
|
|
font-size: 28px;
|
|
line-height:36px;
|
|
font-weight: bold;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.homepage-intro-subheadline {
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.contact-block,
|
|
.contact-block:hover {
|
|
background: #f3f3f3;
|
|
padding: 32px;
|
|
color: #212121;
|
|
display: block;
|
|
margin-bottom: 32px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.contact-block .contact-block-header {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.contact-block .arrow-icon {
|
|
margin-top: 0!important;
|
|
position: relative;
|
|
top: 5px;
|
|
left: 5px;
|
|
color: #009999;
|
|
font-size: 32px;
|
|
text-align:right;
|
|
}
|
|
|
|
@media (min-width:768px) {
|
|
.np-homepage .np-subpage-container {
|
|
padding: 80px 24px 0;
|
|
}
|
|
|
|
.homepage-intro-headline {
|
|
font-size: 36px;
|
|
line-height:42px;
|
|
font-weight: bold;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.homepage-intro-subheadline {
|
|
font-size: 18px;
|
|
line-height: 26px;
|
|
}
|
|
}
|
|
|
|
@media (min-width:1200px) {
|
|
.offset-col {
|
|
display:flex;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
.sidebar-header,
|
|
.welcome-block-header,
|
|
.block-header {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.homepage-cards .np-card {
|
|
padding:0 0 32px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
text-decoration:none;
|
|
}
|
|
|
|
.category-card-container {
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 250px;
|
|
}
|
|
|
|
.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;
|
|
font-size:16px;
|
|
flex:1;
|
|
}
|
|
|
|
|
|
</style>
|