norm/Gainsight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

JNJ Updated Templates

Browse Source
This commit is contained in:
Norm Rasmussen
2022-04-14 09:56:07 -04:00
parent 902a608f99
commit a3290eef6c
12 changed files with 369 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
NP_Custom_Templates/customer_templates/JnJVision/.DS_Store vendored Normal file
View File

Binary file not shown.

4
NP_Custom_Templates/customer_templates/JnJVision/_cards_course.html.liquid
View File

@ -74,6 +74,10 @@
padding: 22px 16px 16px;
}
.np-card-image {
border-radius:0;
}
.np-card {
margin-bottom: 10px!important;
}

6
NP_Custom_Templates/customer_templates/JnJVision/_cards_featured_course.html.liquid
View File

@ -69,7 +69,11 @@
<style>
.np-card-content-title {
color: #006161!important;
color: #cc0033!important;
}
.np-card-image {
border-radius:0;
}
</style>

11
NP_Custom_Templates/customer_templates/JnJVision/_footer.html.liquid
View File

@ -90,16 +90,19 @@
<style>
.np-footer {
background: #555269 !important;
background: #dadada !important;
}
.np-powered-by {
background: #555269 !important;
background: #dadada !important;
text-transform: uppercase !important;
font-size: 12px !important;
font-weight: bold;
}
.np-powered-by-link {
color: rgba(256,256,256,0.25) !important;
.np-footer-logo-image {
height:50px;
opacity:1;
filter:none;
}
</style>

36
NP_Custom_Templates/customer_templates/JnJVision/_header.html.liquid
View File

@ -51,6 +51,38 @@
</a>
</li>
{% endfor %}
<li class= "np-header-desktop-nav-item">
<a
href="#featured"
class="np-header-desktop-nav-link np-header-font-color"
>
Featured Courses
</a>
</li>
<li class= "np-header-desktop-nav-item">
<a
href="#webinars"
class="np-header-desktop-nav-link np-header-font-color"
>
Webinars
</a>
</li>
<li class= "np-header-desktop-nav-item">
<a
href="#faq"
class="np-header-desktop-nav-link np-header-font-color"
>
FAQ
</a>
</li>
<li class= "np-header-desktop-nav-item">
<a
href="#contact"
class="np-header-desktop-nav-link np-header-font-color"
>
Contact Us
</a>
</li>
</ul>
</div>
@ -203,4 +235,8 @@
background: white!important;
}
.np-header-nav-list {
margin: 0 32px;
}
</style>

261
NP_Custom_Templates/customer_templates/JnJVision/_homepage_events.html.liquid Normal file
View File

@ -0,0 +1,261 @@
<div class='events-wrapper' id="webinars">
<div class='events'>
<div class='events-header'>
<div class='events-header-title'>
Webinars
</div>
</div>
<div class='events-event'>
<div class='events-event-left'>
<div class='events-event-left-title'>
Lorem Ipsum dolor
</div>
<div class='events-event-left-subtitle'>
Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
</div>
<div class='events-event-left-date'>
June 12, 2022 @ 2PM EST
</div>
<button class='events-event-left-button np-button np-top-button'>
Register
</button>
</div>
<div class='events-event-right'>
<div class='events-event-right-title'>
Hosts
</div>
<div class='events-event-right-person'>
<img class='events-event-right-person-image' src='https://via.placeholder.com/50'>
<div class='events-event-right-person-right'>
<div class='events-event-right-person-right-name'>
Host 1 name
</div>
<div class='events-event-right-person-right-title'>
Host 1 job title
</div>
</div>
</div>
<div class='events-event-right-person'>
<img class='events-event-right-person-image' src='https://via.placeholder.com/50'>
<div class='events-event-right-person-right'>
<div class='events-event-right-person-right-name'>
Host 2 name
</div>
<div class='events-event-right-person-right-title'>
Host 2 job title
</div>
</div>
</div>
</div>
</div>
<div class='events-event'>
<div class='events-event-left'>
<div class='events-event-left-title'>
Lorem Ipsum dolor
</div>
<div class='events-event-left-subtitle'>
Vestibulum ante ipsum primis in faucibus ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel.
</div>
<div class='events-event-left-date'>
July 17th, 2022
</div>
<button class='events-event-left-button np-button np-top-button'>
Register
</button>
</div>
<div class='events-event-right'>
<div class='events-event-right-title'>
Host
</div>
<div class='events-event-right-person'>
<img class='events-event-right-person-image' src='https://via.placeholder.com/50'>
<div class='events-event-right-person-right'>
<div class='events-event-right-person-right-name'>
Host name
</div>
<div class='events-event-right-person-right-title'>
Host job title
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.events-wrapper {
background-color:#f4f4f4;
background: url(https://s3.amazonaws.com/static.northpass.com/J%26J/pexels-magda-ehlers-1307391.jpg) no-repeat;
background-size:cover;
}
.events {
margin: auto;
width: 100%;
max-width: 1290px;
padding: 60px 32px;
}
.events-header {
margin: 0 auto 32px;
max-width:850px;
}
.events-header-title {
font-size: 26px;
line-height: 32px;
font-weight: 800;
text-align: center;
color:#fff;
}
.events-header-subtitle {
font-size: 21px;
line-height: 29px;
font-weight: 400;
text-align: center;
margin-top: 24px;
}
.events-event {
margin-bottom: 32px;
padding: 30px;
border-radius: 10px;
background-color: #fff;
box-shadow: 0 2px 20px 10px rgb(0 0 0 / 5%);
}
.events-event-left {
text-align:center;
}
.events-event-left-title {
font-size: 24px;
line-height: 30px;
font-weight: 800;
color: rgb(6, 40, 70);
margin: 10px 0 20px;
color:#cc0033;
}
.events-event-left-subtitle {
font-size: 21px;
font-weight: 400;
color: rgba(0, 0, 0, 0.75);
margin-bottom: 20px;
}
.events-event-left-date {
font-size: 16px;
line-height:22px;
font-weight: 700;
color: rgb(6, 40, 70);
margin: 10px 0;
}
.events-event-left-button {
padding: 16px 45px;
margin-top: 40px;
}
.events-event-right {
display: flex;
flex-direction: column;
padding: 32px 0;
border-top: 1px solid #ccc;
border-top: 1px solid rgba(0,0,0,.15);
margin-top: 35px;
}
.events-event-right-title {
font-size: 16px;
line-height:22px;
font-weight: 800;
color: #9BA9B5;
}
.events-event-right-person {
display: flex;
margin: 30px 0;
}
.events-event-right-person-image {
border-radius: 50%;
height: 52px;
}
.events-event-right-person-right {
margin-left: 20px;
}
.events-event-right-person-right-name {
color: rgb(6, 40, 70);
font-size: 16px;
font-weight: 700;
margin-bottom: 7px;
}
.events-event-right-person-right-title {
color: rgb(38, 49, 61);
font-size: 16px;
font-weight: 400;
}
@media (min-width:768px) {
.events {
padding: 120px 32px;
}
.events-header {
margin-bottom:50px;
}
.events-header-title {
font-size: 43px;
line-height:51px;
}
.events-header-subtitle {
font-size: 21px;
width: 75%;
margin: 40px auto 0;
}
.events-event {
padding: 50px 60px;
display: flex;
}
.events-event-left {
width: 55%;
text-align:left;
}
.events-event-left-title {
font-size: 28px;
}
.events-event-left-date {
font-size: 18px;
}
.events-event-right {
width:45%;
margin-left: 70px;
margin-top:0;
padding:0;
display: flex;
flex-direction: column;
border:none;
}
.events-event-right-title {
font-size: 21px;
line-height:29px;
}
}
</style>

4
NP_Custom_Templates/customer_templates/JnJVision/_homepage_hero_carousel.html.liquid
View File

@ -1,7 +1,7 @@
<div class="homepage-hero-carousel">
<div class="np-homepage-hero custom-flex">
<img class="np-homepage-hero-image"
src="https://s3.amazonaws.com/static.northpass.com/J%26J/0d7c2557-b4c3-4cb7-a98d-320673e33812.jpeg"
src="https://s3.amazonaws.com/static.northpass.com/J%26J/pexels-andrea-piacquadio-3768131.jpg"
alt="{{ homepage.headline }}" />
<div class="np-homepage-hero-content">
<div class="homepage-headline np-header-font-color">
@ -104,7 +104,7 @@
.custom-flex {
display: flex;
flex-direction: row;
background-color: #555269;
background-color: #cc0033;
}
.custom-flex>img {

17
NP_Custom_Templates/customer_templates/JnJVision/_section_contact_us.html.liquid Normal file
View File

@ -0,0 +1,17 @@
<div class="homepage-contact-section np-homepage-featured np-max-width" id="contact">
<div class="np-homepage-headline">Contact us to learn more</div>
<a class="np-button np-top-button
" href="#">Contact us</a>
</div>
<style>
.homepage-contact-section {
text-align:center;
margin-bottom:75px;
}
.homepage-contact-section .np-button {
margin-top:32px;
padding: 24px 40px;
}
</style>

2
NP_Custom_Templates/customer_templates/JnJVision/_section_faqs.html.liquid
View File

@ -1,4 +1,4 @@
<div class="np-homepage-featured np-faq np-max-width">
<div class="np-homepage-featured np-faq np-max-width" id="faq">
<div class="np-homepage-featured-text">
<div class="np-homepage-headline">
Frequently Asked Questions

6
NP_Custom_Templates/customer_templates/JnJVision/course.html.liquid
View File

@ -30,6 +30,12 @@
.np-top-cta {
border-radius: 8px;
}
#course-desktop .np-course-outline .np-course-outline-title {
color:#cc0033;
}
@media screen and (max-width: 1170px) {
.course-detail-rating-stars {
margin-bottom: 5px;

17
NP_Custom_Templates/customer_templates/JnJVision/homepage.html.liquid
View File

@ -3,7 +3,7 @@
<main class="np-main np-homepage">
{% include "homepage_hero_carousel" %}
{% comment %} {% include "sub_navigation" %} {% endcomment %}
<div class="np-subpage-container">
<div class="np-subpage-container" id="featured">
<div class="row">
<div class="col-12 col-lg-4 courses-left-small">
{% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %}
@ -43,9 +43,11 @@
</div>
{% include "homepage_events" %}
{% include "section_faqs" %}
{% include "section_faqs" %}
{% include "section_contact_us" %}
</main>
{% include "footer" %}
@ -64,13 +66,8 @@
margin:0;
}
.np-homepage-headline {
color: black!important;
}
.np-card-content {
background: #f4f4f4!important;
border-color: black;
}
.np-card-content-title {
@ -81,4 +78,10 @@
padding-top: 190px;
}
@media (min-width:1170px) {
.np-homepage .np-subpage-container {
padding: 0 22px 120px;
}
}
</style>

44
NP_Custom_Templates/customer_templates/JnJVision/styles.css.liquid
View File

@ -199,7 +199,7 @@ body {
}
.np-homepage-featured .np-homepage-headline,
.np-homepage-featured .np-homepage-subheadline {
color: #fff;
color: #4f4f4f;
}
.np-homepage-hero .np-homepage-headline {
@ -583,16 +583,13 @@ body {
/*
3.3 - FOOTER
*/
.np-footer {
/* .np-footer {
background: #002532 !important;
}
.np-footer + .np-powered-by {
background: #002532 !important;
}
} */
.np-footer-support-item {
color: rgba(255, 255, 255, 0.5);
}
/*
3.4 - BUTTONS
@ -619,13 +616,13 @@ body {
.np-button.np-top-button {
border-radius:40px;
border:1px solid #006161;
border:1px solid #009999;
transition:background-color 0.1s;
}
.np-button.np-top-button:hover {
background-color:transparent;
color:#006161;
color:#009999;
}
button.enwYlE,
@ -781,19 +778,13 @@ button.jryxug {
z-index: 2;
}
.np-learning-paths .np-card-content-description {
color: #fff;
}
.np-learning-path .np-card-content-title {
color: #fff;
flex: 2;
}
.np-learning-paths .np-learning-path .np-card-content-title {
flex: none;
}
.np-learning-path .np-card-content-progress {
color: #2bb24c;
}
.np-learning-path .np-card-content-footer .np-button {
width: auto;
}
@ -1096,7 +1087,7 @@ button.jryxug {
.np-course-outline-content-activity-icon,
.np-course-outline-content-activity-title {
color: rgba(255, 255, 255, 0.5);
color: rgba(255, 0, 51, 0.7);
font-size: 0.937rem;
padding: 0.15rem 1.25rem 0 0.75rem;
}
@ -1119,7 +1110,7 @@ button.jryxug {
position: absolute;
width: 16px;
height: 2px;
background-color: #006161;
background-color: rgba(255, 0, 51, 0.7);
left: 0;
top: 5px;
}
@ -1584,6 +1575,10 @@ button.jryxug {
3.19 - HOMEPAGE SECTION - FAQ
*/
.np-homepage-featured.np-faq .np-homepage-headline {
color: #212121;
}
.np-faq {
margin-bottom: 3rem;
}
@ -1592,14 +1587,13 @@ button.jryxug {
}
.accordion-btn {
background-color: #555269;
color: #fff;
color: #212121;
background:#f4f4f4;
cursor: pointer;
width: 100%;
min-height: 76px;
min-height: 77px;
padding: 0 18px 0 92px;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
position: relative;
@ -1610,7 +1604,7 @@ button.jryxug {
.fa-plus,
.fa-minus {
background: linear-gradient(90deg, #006161 0%, #006161 100%);
background: #cc0033;
font-size: 2.5rem;
color: #fff;
position: absolute;
@ -1635,26 +1629,28 @@ button.jryxug {
}
.accordion-panel-content p {
margin-top: 0;
color:#212121;
}
.accordion-panel-content:before {
content: "";
width: 75px;
height: 1px;
background: #2bb24c;
background: #cc0033;
position: absolute;
top: 0;
left: 18px;
}
.accordion-panel {
background-color: #555269;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
margin-left: 76px;
background:#f4f4f4;
}
@media (min-width: 768px) {
.np-faqs {
margin: 0 4.0625rem;