instructor led course sample

Author: hmillersarah

ims-education.html

@@ -675,6 +675,25 @@ <h1>IMS courses</h1>
 			<section id="live" class="white-bg card-section">
 				<div><h2>Instructor-led</h2></div>
 				<p>No instructor-led courses are currently available for enrollment. Please check back to see if new courses are available.</p>
+				
+				<!-- EX: IMS Fundamentals -->
+				<course-card
+				id="ims-fundamentals"
+				name="IMS Fundamentals"
+				desc="Learn about the main components of IBM IMS: IMS Database Manager (IMS DB), 
+					IMS Transaction Manager (IMS TM), and common system services for IMS DB and 
+					IMS TM. Learn how these components work and interact with applications, how 
+					IMS databases differ from each other and differ from relational databases 
+					message types, security, maintenance, troubleshooting, and more."
+				imgsrc="wp-content/icons/icon_education.svg"
+				selfpaced="false"
+				level="Beginner"
+				cost="None"
+				badge="Yes"
+				time="32 hours"
+				link="https://learn.ibm.com/course/view.php?id=8829"
+			>
+			</course-card>
 			</section>
 
 			<!-- =========================== FAQ =========================== -->

web-components/course-card/course-card.css

@@ -48,13 +48,8 @@ img {
 .inline-g p {
     padding: 0em;
     margin: 0em;
-    /* font-weight: bold; */
 }
 
-/* .inline-g span {
-    font-weight: normal;
-} */
-
 /* Styling for course card */
 .course-card {
     margin: 1em 0em;
@@ -86,11 +81,6 @@ img {
         align-items: center;
     }
 
-    /* .inline-g {
-        display: grid;
-        grid-template-columns: 1fr 6fr;
-    } */
-
     .inline-g div {
         display: grid;
         grid-template-columns: repeat(4, 1fr);

web-components/course-card/course-card.js

@@ -47,6 +47,10 @@ function createComponent(html) {
             const courseImg = shadow.querySelector('.course-img');
             courseImg.src = this.imgsrc;
             courseImg.setAttribute('alt', `${this.name} badge`);
+            if (this.selfpaced != 'true') {
+                const courseCard = shadow.querySelector('.course-card');
+                courseCard.style.alignItems = 'flex-start';
+            }
 
             // Set course name
             setContent('.course-name', this.name, shadow);
@@ -65,24 +69,6 @@ function createComponent(html) {
             setContent('.course-time', this.time, shadow);
             // Set course link
             setLink('.course-link', this.link, this.name, shadow);
-
-            // Hide live course if not available
-            // if (this.livelevel == undefined) {
-            //     const liveCourse = shadow.querySelector('.live-course');
-            //     const liveCourseLink = shadow.querySelector('.live-link');
-            //     liveCourse.style.display = liveCourseLink.style.display = "none";
-            // } else {
-            //     // Set course level
-            //     setContent('.live-level', this.livelevel, shadow);
-            //     // Set course cost
-            //     setContent('.live-cost', this.livecost, shadow);
-            //     // Set course badge
-            //     setContent('.live-badge', this.livebadge, shadow);
-            //     // Set course time
-            //     setContent('.live-time', this.livetime, shadow);
-            //     // Set course link
-            //     setLink('.live-link', this.livelink, this.name, shadow);
-            // }
         }
     }