JNJ Updated Templates

NP_Custom_Templates/customer_templates/JnJVision/_cards_course.html.liquid

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

NP_Custom_Templates/customer_templates/JnJVision/_cards_featured_course.html.liquid

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

NP_Custom_Templates/customer_templates/JnJVision/_footer.html.liquid

@@ -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>
 

NP_Custom_Templates/customer_templates/JnJVision/_header.html.liquid

@@ -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>

NP_Custom_Templates/customer_templates/JnJVision/_homepage_events.html.liquid

@@ -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>

NP_Custom_Templates/customer_templates/JnJVision/_homepage_hero_carousel.html.liquid

@@ -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 {

NP_Custom_Templates/customer_templates/JnJVision/_section_contact_us.html.liquid

@@ -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>

NP_Custom_Templates/customer_templates/JnJVision/_section_faqs.html.liquid

@@ -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

NP_Custom_Templates/customer_templates/JnJVision/course.html.liquid

@@ -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;

NP_Custom_Templates/customer_templates/JnJVision/homepage.html.liquid

@@ -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>

NP_Custom_Templates/customer_templates/JnJVision/styles.css.liquid

@@ -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: #212121;
-	color: #fff;
+	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;