From bb2f26d6fdcf06c6313d232f9d5938e051ff22ac Mon Sep 17 00:00:00 2001
From: Sarah Miller <hmillersarah@gmail.com>
Date: Mon, 17 Mar 2025 15:53:56 -0400
Subject: [PATCH 01/11] course card component setup

---
 ims-education.html                          | 15 +++++
 web-components/course-card/course-card.css  |  0
 web-components/course-card/course-card.html | 20 ++++++
 web-components/course-card/course-card.js   | 70 +++++++++++++++++++++
 web-components/video-card/video-card.js     | 12 ++--
 5 files changed, 111 insertions(+), 6 deletions(-)
 create mode 100644 web-components/course-card/course-card.css
 create mode 100644 web-components/course-card/course-card.html
 create mode 100644 web-components/course-card/course-card.js

diff --git a/ims-education.html b/ims-education.html
index 71f0403a..e7f37d6f 100644
--- a/ims-education.html
+++ b/ims-education.html
@@ -77,6 +77,9 @@
 <!-- Hamburger menu -->
 <script src="wp-includes/js/navbar.js"></script>
 
+<!-- Web components -->
+<script src="web-components/course-card/course-card.js" type="module"></script>
+
 </head>
 
 <!-- MASTHEAD_SITENAV_BEGIN -->
@@ -349,6 +352,18 @@ <h1>IMS courses</h1>
 									<!-- ALL ROLES header -->
 									<h2 id="all">All roles</h2>
 
+								  	<course-card
+								  		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."
+										level="Beginner"
+										cost="None"
+										badge="Yes"
+										time="32 hours"
+										imgsrc="wp-content/course-badges/badge_ims_fundamentals.png"
+										link="https://learn.ibm.com/course/view.php?id=8829"
+									>
+									</course-card>
+
 									<!-- card -->
 									<div class="ims-course-card">
 										<div class="course-c-id" id="ims-fundamentals"></div>
diff --git a/web-components/course-card/course-card.css b/web-components/course-card/course-card.css
new file mode 100644
index 00000000..e69de29b
diff --git a/web-components/course-card/course-card.html b/web-components/course-card/course-card.html
new file mode 100644
index 00000000..37fcf75a
--- /dev/null
+++ b/web-components/course-card/course-card.html
@@ -0,0 +1,20 @@
+<!-- HTML template -->
+<link href="" rel="stylesheet">
+<div class="course-card">
+    <div>
+        <img class="course-img" src="">
+    </div>
+    <div>
+        <h2 class="course-name"></h2>
+        <p class="course-desc"></p>
+        <div class="inline-g">
+            <p><b>Level: </b><span class="course-level"></span></p>
+            <p><b>Cost: </b><span class="course-cost"></span></p>
+            <p><b>Badge: </b><span class="course-badge"></span></p>
+            <p><b>Time: </b><span class="course-time"></span></p>
+        </div>
+    </div>
+    <div class="link-g">
+        <a class="course-link" target="_blank" rel="noopener noreferrer">Learn more →</a>
+    </div>
+</div>
diff --git a/web-components/course-card/course-card.js b/web-components/course-card/course-card.js
new file mode 100644
index 00000000..8fc2bd4a
--- /dev/null
+++ b/web-components/course-card/course-card.js
@@ -0,0 +1,70 @@
+// Fetch HTML template
+fetch("web-components/course-card/course-card.html")
+    .then(stream => stream.text())
+    .then(text => createComponent(text))
+
+// Create web component
+function createComponent(html) {
+    // Web component class
+    class CourseCard extends HTMLElement {
+
+        // Creates element with default values
+        constructor() {
+            super();
+        }
+
+        // Return array of properties to observe
+        static get observedAttributes() {
+            return ['name', 'desc', 'level', 'cost', 'badge', 'time', 'link', 'imgsrc'];
+        }
+
+        // Called when an attribute is defined or changed
+        attributeChangedCallback(property, oldValue, newValue) {
+            if (oldValue === newValue) return;
+            this[property] = newValue;
+        }
+    
+        // Invoked when element is added to document
+        connectedCallback() {
+            // Create shadow root for element
+            const shadow = this.attachShadow({mode: 'closed'});
+            shadow.innerHTML = html;
+
+            // Set course name
+            const courseName = shadow.querySelector('.course-name');
+            courseName.textContent = this.name;
+
+            // Set course desc
+            const courseDesc = shadow.querySelector('.course-desc');
+            courseDesc.textContent = this.desc;
+
+            // Set course level
+            const courseLevel = shadow.querySelector('.course-level');
+            courseLevel.textContent = this.level;
+
+            // Set course cost
+            const courseCost = shadow.querySelector('.course-cost');
+            courseCost.textContent = this.cost;
+
+            // Set course badge
+            const courseBadge = shadow.querySelector('.course-badge');
+            courseBadge.textContent = this.badge;
+
+            // Set course time
+            const courseTime = shadow.querySelector('.course-time');
+            courseTime.textContent = this.time;
+
+            // Set course link
+            const courseLink = shadow.querySelector('.course-link');
+            courseLink.href = this.link;
+            courseLink.setAttribute('aria-label', `Learn more about ${this.name}`);
+
+            // Set course img
+            const courseImg = shadow.querySelector('.course-img');
+            courseImg.src = this.imgsrc;
+            courseImg.setAttribute('alt', `${this.name} badge`);
+        }
+    }
+
+    customElements.define('course-card', CourseCard);
+}
\ No newline at end of file
diff --git a/web-components/video-card/video-card.js b/web-components/video-card/video-card.js
index f4e6a7c0..91d1d0e7 100644
--- a/web-components/video-card/video-card.js
+++ b/web-components/video-card/video-card.js
@@ -39,19 +39,19 @@ function createComponent(html) {
 
             // Set video name
             const videoName = shadow.querySelector('.video-name');
-            videoName.textContent = `${this.name}`;
+            videoName.textContent = this.name;
 
             // Set video desc
             const videoDesc = shadow.querySelector('.video-desc');
-            videoDesc.textContent = `${this.desc}`;
+            videoDesc.textContent = this.desc;
 
             // Set video level
             const videoLevel = shadow.querySelector('.video-level');
-            videoLevel.textContent = `${this.level}`;
+            videoLevel.textContent = this.level;
 
             // Set video time
             const videoTime = shadow.querySelector('.video-time');
-            videoTime.textContent = `${this.time}`;
+            videoTime.textContent = this.time;
 
             // Set video links
             const videoLink = shadow.querySelector('.video-link');
@@ -71,8 +71,8 @@ function createComponent(html) {
                 // Check if urls have been defined
                 if (url != undefined) {
                     linkObj.href = url;
-                    const altText = (linkText != 'now') ? `Watch ${this.name}, ${linkText}` : `Watch ${this.name}`; // Change link text if defined
-                    linkObj.setAttribute('alt', altText);
+                    const ariaText = (linkText != 'now') ? `Watch ${this.name}, ${linkText}` : `Watch ${this.name}`; // Change link text if defined
+                    linkObj.setAttribute('aria-label', ariaText);
                     linkObj.textContent = `Watch ${linkText} →`;
                 }
             })

From aecda087f9520b00942586ed677952d22c7b141e Mon Sep 17 00:00:00 2001
From: Sarah Miller <hmillersarah@gmail.com>
Date: Tue, 18 Mar 2025 10:40:51 -0400
Subject: [PATCH 02/11] styled course card component

---
 web-components/course-card/course-card.css  | 54 +++++++++++++++++++++
 web-components/course-card/course-card.html | 24 ++++-----
 web-components/video-card/video-card.css    | 11 -----
 3 files changed, 67 insertions(+), 22 deletions(-)

diff --git a/web-components/course-card/course-card.css b/web-components/course-card/course-card.css
index e69de29b..1c2c59fd 100644
--- a/web-components/course-card/course-card.css
+++ b/web-components/course-card/course-card.css
@@ -0,0 +1,54 @@
+h2 {
+    font-weight: 500;
+    font-size: 1.5em;
+    padding: 0em;
+    margin: 0em;
+}
+
+p {
+    font-size: 1.125em;
+}
+
+a {
+    text-decoration: none;
+    color: #0f62fe;
+}
+
+img {
+    max-width: 16em;
+}
+
+/* Styling for a link group */
+.link-g {
+    margin-top: 1.4em;
+}
+
+/* Styling for inline group (level, time) */
+.inline-g {
+    display: flex;
+    flex-flow: row wrap;
+    gap: 1em;
+}
+
+.inline-g p {
+    padding: 0em;
+    margin: 0em;
+}
+
+/* Styling for course card */
+.course-card {
+    margin: 1em 0em;
+    padding: 2em 0em;
+    display: flex;
+    flex-flow: row wrap;
+    align-items: flex-start;
+    gap: 2em;
+    border-bottom: 2px dotted lightgray;
+}
+
+/* 1024px and above screen sizes */
+@media screen and (min-width: 64em) {
+    .course-card {
+        flex-flow: row nowrap;
+    }
+}
\ No newline at end of file
diff --git a/web-components/course-card/course-card.html b/web-components/course-card/course-card.html
index 37fcf75a..52886f68 100644
--- a/web-components/course-card/course-card.html
+++ b/web-components/course-card/course-card.html
@@ -1,20 +1,22 @@
 <!-- HTML template -->
-<link href="" rel="stylesheet">
+<link href="web-components/course-card/course-card.css" rel="stylesheet">
 <div class="course-card">
     <div>
         <img class="course-img" src="">
     </div>
     <div>
-        <h2 class="course-name"></h2>
-        <p class="course-desc"></p>
-        <div class="inline-g">
-            <p><b>Level: </b><span class="course-level"></span></p>
-            <p><b>Cost: </b><span class="course-cost"></span></p>
-            <p><b>Badge: </b><span class="course-badge"></span></p>
-            <p><b>Time: </b><span class="course-time"></span></p>
+        <div>
+            <h2 class="course-name"></h2>
+            <p class="course-desc"></p>
+            <div class="inline-g">
+                <p><b>Level: </b><span class="course-level"></span></p>
+                <p><b>Cost: </b><span class="course-cost"></span></p>
+                <p><b>Badge: </b><span class="course-badge"></span></p>
+                <p><b>Time: </b><span class="course-time"></span></p>
+            </div>
+        </div>
+        <div class="link-g">
+            <a class="course-link" target="_blank" rel="noopener noreferrer">Learn more →</a>
         </div>
-    </div>
-    <div class="link-g">
-        <a class="course-link" target="_blank" rel="noopener noreferrer">Learn more →</a>
     </div>
 </div>
diff --git a/web-components/video-card/video-card.css b/web-components/video-card/video-card.css
index a187ba3b..6d87e9ec 100644
--- a/web-components/video-card/video-card.css
+++ b/web-components/video-card/video-card.css
@@ -1,14 +1,3 @@
-:root {
-    /* Color */
-    --blue: #0f62fe;
-        /* Background Color */
-        --bg-light-gray: #f4f4f4;
-
-    /* Sizing */
-    --plex-18: 1.125em;
-    --plex-24: 1.5em; 
-}
-
 h2 {
     font-weight: 400;
     font-size: var(--plex-24);

From 7852bdb4d3b24fca1c9554adb74f9f7001f4608a Mon Sep 17 00:00:00 2001
From: Sarah Miller <hmillersarah@gmail.com>
Date: Wed, 19 Mar 2025 12:18:20 -0400
Subject: [PATCH 03/11] live course designation

---
 ims-education.html                          | 17 ++++++
 web-components/course-card/course-card.css  | 14 ++++-
 web-components/course-card/course-card.html | 19 ++++--
 web-components/course-card/course-card.js   | 68 +++++++++++++--------
 4 files changed, 84 insertions(+), 34 deletions(-)

diff --git a/ims-education.html b/ims-education.html
index e7f37d6f..8f2ff352 100644
--- a/ims-education.html
+++ b/ims-education.html
@@ -355,12 +355,29 @@ <h2 id="all">All roles</h2>
 								  	<course-card
 								  		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/course-badges/badge_ims_fundamentals.png"
 										level="Beginner"
 										cost="None"
 										badge="Yes"
 										time="32 hours"
+										link="https://learn.ibm.com/course/view.php?id=8829"
+									>
+									</course-card>
+
+									<course-card
+										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/course-badges/badge_ims_fundamentals.png"
+										level="Beginner"
+										cost="None"
+										badge="Yes"
+										time="32 hours"
 										link="https://learn.ibm.com/course/view.php?id=8829"
+										livelevel="Beginner"
+										livecost="$"
+										livebadge="No"
+										livetime="30 hours"
+										livelink="https://learn.ibm.com/course/view.php?id=8829"
 									>
 									</course-card>
 
diff --git a/web-components/course-card/course-card.css b/web-components/course-card/course-card.css
index 1c2c59fd..0ee1f955 100644
--- a/web-components/course-card/course-card.css
+++ b/web-components/course-card/course-card.css
@@ -21,18 +21,26 @@ img {
 /* Styling for a link group */
 .link-g {
     margin-top: 1.4em;
+    display: flex;
+    flex-flow: row wrap;
+    gap: 2em;
 }
 
 /* Styling for inline group (level, time) */
 .inline-g {
-    display: flex;
-    flex-flow: row wrap;
-    gap: 1em;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    width: 75%;
 }
 
 .inline-g p {
     padding: 0em;
     margin: 0em;
+    font-weight: bold;
+}
+
+.inline-g span {
+    font-weight: normal;
 }
 
 /* Styling for course card */
diff --git a/web-components/course-card/course-card.html b/web-components/course-card/course-card.html
index 52886f68..d52c9645 100644
--- a/web-components/course-card/course-card.html
+++ b/web-components/course-card/course-card.html
@@ -9,14 +9,23 @@
             <h2 class="course-name"></h2>
             <p class="course-desc"></p>
             <div class="inline-g">
-                <p><b>Level: </b><span class="course-level"></span></p>
-                <p><b>Cost: </b><span class="course-cost"></span></p>
-                <p><b>Badge: </b><span class="course-badge"></span></p>
-                <p><b>Time: </b><span class="course-time"></span></p>
+                <p>Self-paced:</p>
+                <p>Level: <span class="course-level"></span></p>
+                <p>Cost: <span class="course-cost"></span></p>
+                <p>Badge: <span class="course-badge"></span></p>
+                <p>Time: <span class="course-time"></span></p>
+            </div>
+            <div class="inline-g live-course">
+                <p>Instructor-led:</p>
+                <p>Level: <span class="live-level"></span></p>
+                <p>Cost: <span class="live-cost"></span></p>
+                <p>Badge: <span class="live-badge"></span></p>
+                <p>Time: <span class="live-time"></span></p>
             </div>
         </div>
         <div class="link-g">
-            <a class="course-link" target="_blank" rel="noopener noreferrer">Learn more →</a>
+            <a class="course-link" target="_blank" rel="noopener noreferrer">Self-paced course →</a>
+            <a class="live-link" target="_blank" rel="noopener noreferrer">Instructor-led course →</a>
         </div>
     </div>
 </div>
diff --git a/web-components/course-card/course-card.js b/web-components/course-card/course-card.js
index 8fc2bd4a..782c7327 100644
--- a/web-components/course-card/course-card.js
+++ b/web-components/course-card/course-card.js
@@ -5,6 +5,18 @@ fetch("web-components/course-card/course-card.html")
 
 // Create web component
 function createComponent(html) {
+
+    function setContent(cssSelector, content, shadow) {
+        const selector = shadow.querySelector(cssSelector);
+        selector.textContent = content;
+    }
+
+    function setLink(cssSelector, url, name, shadow) {
+        const link = shadow.querySelector(cssSelector);
+        link.href = url;
+        link.setAttribute('aria-label', `Learn more about ${name}`);
+    }
+
     // Web component class
     class CourseCard extends HTMLElement {
 
@@ -15,7 +27,7 @@ function createComponent(html) {
 
         // Return array of properties to observe
         static get observedAttributes() {
-            return ['name', 'desc', 'level', 'cost', 'badge', 'time', 'link', 'imgsrc'];
+            return ['name', 'desc', 'imgsrc', 'level', 'cost', 'badge', 'time', 'link', 'livelevel', 'livecost', 'livebadge', 'livetime', 'livelink'];
         }
 
         // Called when an attribute is defined or changed
@@ -29,40 +41,44 @@ function createComponent(html) {
             // Create shadow root for element
             const shadow = this.attachShadow({mode: 'closed'});
             shadow.innerHTML = html;
+            
+            // Set course img
+            const courseImg = shadow.querySelector('.course-img');
+            courseImg.src = this.imgsrc;
+            courseImg.setAttribute('alt', `${this.name} badge`);
 
             // Set course name
-            const courseName = shadow.querySelector('.course-name');
-            courseName.textContent = this.name;
-
+            setContent('.course-name', this.name, shadow);
             // Set course desc
-            const courseDesc = shadow.querySelector('.course-desc');
-            courseDesc.textContent = this.desc;
-
+            setContent('.course-desc', this.desc, shadow);
             // Set course level
-            const courseLevel = shadow.querySelector('.course-level');
-            courseLevel.textContent = this.level;
-
+            setContent('.course-level', this.level, shadow);
             // Set course cost
-            const courseCost = shadow.querySelector('.course-cost');
-            courseCost.textContent = this.cost;
-
+            setContent('.course-cost', this.cost, shadow);
             // Set course badge
-            const courseBadge = shadow.querySelector('.course-badge');
-            courseBadge.textContent = this.badge;
-
+            setContent('.course-badge', this.badge, shadow);
             // Set course time
-            const courseTime = shadow.querySelector('.course-time');
-            courseTime.textContent = this.time;
-
+            setContent('.course-time', this.time, shadow);
             // Set course link
-            const courseLink = shadow.querySelector('.course-link');
-            courseLink.href = this.link;
-            courseLink.setAttribute('aria-label', `Learn more about ${this.name}`);
+            setLink('.course-link', this.link, this.name, shadow);
 
-            // Set course img
-            const courseImg = shadow.querySelector('.course-img');
-            courseImg.src = this.imgsrc;
-            courseImg.setAttribute('alt', `${this.name} badge`);
+            // 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);
+            }
         }
     }
 

From 0b135da4436d108dc525b8b8faf42af4fba653b5 Mon Sep 17 00:00:00 2001
From: Sarah Miller <hmillersarah@gmail.com>
Date: Wed, 19 Mar 2025 12:45:46 -0400
Subject: [PATCH 04/11] update styling

---
 web-components/course-card/course-card.css  | 43 +++++++++++++++++++--
 web-components/course-card/course-card.html | 32 ++++++++-------
 2 files changed, 59 insertions(+), 16 deletions(-)

diff --git a/web-components/course-card/course-card.css b/web-components/course-card/course-card.css
index 0ee1f955..98e277a8 100644
--- a/web-components/course-card/course-card.css
+++ b/web-components/course-card/course-card.css
@@ -26,11 +26,23 @@ img {
     gap: 2em;
 }
 
+.column-g {
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 1em;
+}
+
 /* Styling for inline group (level, time) */
 .inline-g {
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    width: 75%;
+    display: flex;
+    flex-flow: row wrap;
+    gap: 1em;
+}
+
+.inline-g div {
+    display: flex;
+    flex-flow: row wrap;
+    gap: 1em;
 }
 
 .inline-g p {
@@ -54,9 +66,34 @@ img {
     border-bottom: 2px dotted lightgray;
 }
 
+/* 768px and below screen sizes */
+@media screen and (max-width: 48em) {
+    .inline-g {
+        width: 90%;
+    }
+}
+
 /* 1024px and above screen sizes */
 @media screen and (min-width: 64em) {
     .course-card {
         flex-flow: row nowrap;
     }
+}
+
+/* 1440px and above screen sizes */
+@media screen and (min-width: 90em) {
+    .course-card {
+        align-items: center;
+    }
+
+    .inline-g {
+        display: grid;
+        grid-template-columns: 1fr 6fr;
+    }
+
+    .inline-g div {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        width: 75%;
+    }
 }
\ No newline at end of file
diff --git a/web-components/course-card/course-card.html b/web-components/course-card/course-card.html
index d52c9645..2d4e7d06 100644
--- a/web-components/course-card/course-card.html
+++ b/web-components/course-card/course-card.html
@@ -8,19 +8,25 @@
         <div>
             <h2 class="course-name"></h2>
             <p class="course-desc"></p>
-            <div class="inline-g">
-                <p>Self-paced:</p>
-                <p>Level: <span class="course-level"></span></p>
-                <p>Cost: <span class="course-cost"></span></p>
-                <p>Badge: <span class="course-badge"></span></p>
-                <p>Time: <span class="course-time"></span></p>
-            </div>
-            <div class="inline-g live-course">
-                <p>Instructor-led:</p>
-                <p>Level: <span class="live-level"></span></p>
-                <p>Cost: <span class="live-cost"></span></p>
-                <p>Badge: <span class="live-badge"></span></p>
-                <p>Time: <span class="live-time"></span></p>
+            <div class="column-g">
+                <div class="inline-g">
+                    <p>Self-paced:</p>
+                    <div>
+                        <p>Level: <span class="course-level"></span></p>
+                        <p>Cost: <span class="course-cost"></span></p>
+                        <p>Badge: <span class="course-badge"></span></p>
+                        <p>Time: <span class="course-time"></span></p>
+                    </div>
+                </div>
+                <div class="inline-g live-course">
+                    <p>Instructor-led:</p>
+                    <div>
+                        <p>Level: <span class="live-level"></span></p>
+                        <p>Cost: <span class="live-cost"></span></p>
+                        <p>Badge: <span class="live-badge"></span></p>
+                        <p>Time: <span class="live-time"></span></p>
+                    </div>
+                </div>
             </div>
         </div>
         <div class="link-g">

From 0c6941da9a4ff1ae67ba2c71228da44abd154a3b Mon Sep 17 00:00:00 2001
From: Sarah Miller <hmillersarah@gmail.com>
Date: Wed, 19 Mar 2025 13:04:03 -0400
Subject: [PATCH 05/11] convert cards to components for testing

---
 ims-education.html                         | 239 ++++++++-------------
 web-components/course-card/course-card.css |   2 +-
 2 files changed, 85 insertions(+), 156 deletions(-)

diff --git a/ims-education.html b/ims-education.html
index 8f2ff352..d591adc9 100644
--- a/ims-education.html
+++ b/ims-education.html
@@ -352,186 +352,115 @@ <h1>IMS courses</h1>
 									<!-- ALL ROLES header -->
 									<h2 id="all">All roles</h2>
 
-								  	<course-card
-								  		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."
+									<!-- IMS Fundamentals, with live course -->
+									<course-card
+										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/course-badges/badge_ims_fundamentals.png"
 										level="Beginner"
 										cost="None"
 										badge="Yes"
 										time="32 hours"
 										link="https://learn.ibm.com/course/view.php?id=8829"
+										livelevel="Beginner"
+										livecost="$"
+										livebadge="No"
+										livetime="30 hours"
+										livelink="https://learn.ibm.com/course/view.php?id=8829"
 									>
 									</course-card>
 
+									<!-- IMS Fundamentals, no live course -->
 									<course-card
 										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."
+										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/course-badges/badge_ims_fundamentals.png"
 										level="Beginner"
 										cost="None"
 										badge="Yes"
 										time="32 hours"
 										link="https://learn.ibm.com/course/view.php?id=8829"
-										livelevel="Beginner"
-										livecost="$"
-										livebadge="No"
-										livetime="30 hours"
-										livelink="https://learn.ibm.com/course/view.php?id=8829"
 									>
 									</course-card>
 
-									<!-- card -->
-									<div class="ims-course-card">
-										<div class="course-c-id" id="ims-fundamentals"></div>
-										<div class="pure-u-1">
-											<div class="pure-u-1 pure-u-md-6-24">
-												<img src="wp-content/course-badges/badge_ims_fundamentals.png" alt="IMS Fundamentals badge">
-											</div>
-											<div class="pure-u-1 pure-u-md-18-24 course-c-desc">
-												<h3>IMS Fundamentals</h3>
-												<p>
-													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.
-												</p>	
-												<div class="pure-u-1 pure-u-md-1 course-c-info">
-													<p>
-														<b>Level</b>: Beginner
-														&ensp;
-														<b>Cost</b>: None
-														&ensp;
-														<b>Badge</b>: Yes
-														&ensp;
-														<b>Time</b>: 32 hours
-													</p>
-													<div class="course-c-info">
-														<a aria-label="Learn more about IMS Fundamentals"
-															title="IMS Fundamentals" target="_blank" rel="noopener noreferrer" 
-															href="https://learn.ibm.com/course/view.php?id=8829">
-															Learn more →
-														</a>
-													</div>
-												</div>
-											</div>
-										</div>
-									</div>
-
-									<!-- card -->
-									<div class="ims-course-card">
-										<div style="position: absolute; margin-top:-60px;" id="ims-intro-pli"></div>
-										<div class="pure-u-1">
-											<div class="pure-u-1 pure-u-md-6-24">
-												<img src="wp-content/course-badges/badge_intro_pli.png" alt="Introduction to PL/I badge" style="width: 100%;height:100%;max-height: 300px;padding-bottom: 1px;">
-											</div>
-											<div class="pure-u-md-18-24" style="padding:35px;margin-right: -10px;">
-												<h3 style="color: black;">Introduction to the PL/I Programming Language</h3>
-												<p>In this 8-hour, introductory course, you’ll learn about the parallels and differences 
-													between C and PL/I, particularly in language syntax, program structure, declarations, 
-													loops, data types, arrays, structures, and more.</p>	
-													<div class="pure-u-1 pure-u-md-1">
-														<div style="margin-top:15px;" >
-															<p>
-																<b>Level</b>: Beginner
-																&ensp;
-																<b>Cost</b>: None
-																&ensp;
-																<b>Badge</b>: Yes
-																&ensp;
-																<b>Time</b>: 8 hours
-															</p>
-														</div>
-														<div style="margin-top:15px;" >
-														<a aria-label="Learn more about Introduction to the PL/I Programming Language"
-														title="Introduction to the PL/I Programming Language" target="_blank" rel="noopener noreferrer" 
-														href="https://www.ibm.com/training/course/introduction-to-the-pli-programming-language-DL00964G" 
-														style="position: relative;bottom:0;margin-bottom:30px;text-align: left;">Learn more →</a>
-														</div>
-													</div>
-
-											</div>
-										</div>
-									</div>		
+									<!-- PL/I Programming -->
+									<course-card
+										name="Introduction to the PL/I Programming Language"
+										desc="In this 8-hour, introductory course, you’ll learn about the parallels and differences 
+											between C and PL/I, particularly in language syntax, program structure, declarations, 
+											loops, data types, arrays, structures, and more."
+										imgsrc="wp-content/course-badges/badge_intro_pli.png"
+										level="Beginner"
+										cost="None"
+										badge="Yes"
+										time="8 hours"
+										link="https://www.ibm.com/training/course/introduction-to-the-pli-programming-language-DL00964G"
+									>
+									</course-card>	
 
 									<!-- DB header -->
 									<h2 id="imsdb" style="color: black;margin-left: 16px;">IMS database</h2>
 
-									<!-- card -->
-									<div class="ims-course-card" style="margin-top: 3.5em;">
-										<div style="position: absolute; margin-top:-60px;" id="ims-dbfund"></div>
-										<div class="pure-u-1">
-											<div class="pure-u-1 pure-u-md-6-24">
-												<img src="wp-content/course-badges/badge_log_rel.png" alt="IMS Logical Relationships badge" style="width: 100%;height:100%;max-height: 300px;padding-bottom: 1px;">
-											</div>
-											<div class="pure-u-1 pure-u-md-18-24" style="padding:35px;margin-right: -10px;">
-												<h3 style="color: black;">IMS Logical Relationships</h3>
-												<p>
-													Logical relationships establish a logical access paths between segments that are usually in different databases. In this course, you’ll 
-													learn how to code the DBDs and PSBs for IMS databases involved in logical relationships, adjust the performance of these 
-													databases, and review IMS Monitor reports to see whether the logical relationships are effective.
-												</p>	
-													<div class="pure-u-1 pure-u-md-1">
-														<div style=" margin-top:15px;">
-															<p>
-																<b>Level</b>: Advanced
-																&ensp;
-																<b>Cost</b>: None
-																&ensp;
-																<b>Badge</b>: Yes
-																&ensp;
-																<b>Time</b>: 30 hours
-															</p>
-														</div>
-														<div style="margin-top:15px;" >
-														<a aria-label="Learn more about IMS Logical Relationships"
-														title="IMS Logical Relationships" target="_blank" rel="noopener noreferrer" 
-														href="https://www.ibm.com/training/course/ims-logical-relationships-DL00966G" 
-														style="position: relative;bottom:0;margin-bottom:30px;text-align: left;">Learn more →</a>
-														</div>
-												</div>
-						
-											</div>
-										</div>
-									</div>
+									<!-- Logical Relationships -->
+									<course-card
+										name="IMS Logical Relationships"
+										desc="Logical relationships establish a logical access paths between segments that 
+											are usually in different databases. In this course, you’ll learn how to code 
+											the DBDs and PSBs for IMS databases involved in logical relationships, adjust 
+											the performance of these databases, and review IMS Monitor reports to see whether 
+											the logical relationships are effective."
+										imgsrc="wp-content/course-badges/badge_log_rel.png"
+										level="Advanced"
+										cost="None"
+										badge="Yes"
+										time="30 hours"
+										link="https://www.ibm.com/training/course/ims-logical-relationships-DL00966G"
+										class="pure-u-1"
+									>
+									</course-card>	
 
-									<!-- card -->
-									<div class="ims-course-card" style="margin-top: 3.5em;">
-										<div style="position: absolute; margin-top:-60px;" id="ims-dbfund"></div>
-										<div class="pure-u-1">
-											<div class="pure-u-1 pure-u-md-6-24">
-												<img src="wp-content/course-badges/badge_ims_db_fundamentals.png" alt="IMS Database Fundamentals badge" style="width: 100%;height:100%;max-height: 300px;padding-bottom: 1px;">
-											</div>
-											<div class="pure-u-1 pure-u-md-18-24" style="padding:35px;margin-right: -10px;">
-												<h3 style="color: black;">IMS Database Fundamentals</h3>
-												<p>
-													Learn about IMS databases, including the 
-													structure of database records, how those records are accessed, DBDs, PSBs, DL/I calls, 
-													secondary indexes, logical relationships, database types, 
-													access methods, database recovery, and more.</p>	
-													<div class="pure-u-1 pure-u-md-1">
-														<div style=" margin-top:15px;">
-															<p>
-																<b>Level</b>: Beginner
-																&ensp;
-																<b>Cost</b>: None
-																&ensp;
-																<b>Badge</b>: Yes
-																&ensp;
-																<b>Time</b>: 24 hours
-															</p>
-														</div>
-														<div style="margin-top:15px;" >
-														<a aria-label="Learn more about IMS DB Fundamentals"
-														title="IMS DB Fundamentals" target="_blank" rel="noopener noreferrer" 
-														href="https://learn.ibm.com/course/view.php?id=10118" 
-														style="position: relative;bottom:0;margin-bottom:30px;text-align: left;">Learn more →</a>
-														</div>
-												</div>
-						
-											</div>
-										</div>
-									</div>
+									<!-- Database Fundamentals -->
+									<course-card
+										name="IMS Database Fundamentals"
+										desc="Learn about IMS databases, including the structure of database records, 
+											how those records are accessed, DBDs, PSBs, DL/I calls, 
+											secondary indexes, logical relationships, database types, 
+											access methods, database recovery, and more."
+										imgsrc="wp-content/course-badges/badge_ims_db_fundamentals.png"
+										level="Beginner"
+										cost="None"
+										badge="Yes"
+										time="24 hours"
+										link="https://learn.ibm.com/course/view.php?id=10118"
+										class="pure-u-1"
+									>
+									</course-card>	
+
+									<!-- DBRC -->
+									<course-card
+										name="IMS Database Recovery Control (DBRC)"
+										desc="IMS DBRC, which is a feature of the IMS Database Manager, helps with the recovery of IMS databases.
+											In this comprehensive course, you'll learn how to install, customize, administer, and maintain DBRC. 
+											This course is for experienced IMS system programmers and database administrators who need to work with 
+											DBRC."
+										imgsrc="wp-content/course-badges/badge_dbrc.png"
+										level="Intermediate"
+										cost="None"
+										badge="Yes"
+										time="32 hours"
+										link="https://learn.ibm.com/course/view.php?id=12150"
+										class="pure-u-1"
+									>
+									</course-card>	
 
 									<!-- card -->
 									<div class="ims-course-card">
diff --git a/web-components/course-card/course-card.css b/web-components/course-card/course-card.css
index 98e277a8..5078015e 100644
--- a/web-components/course-card/course-card.css
+++ b/web-components/course-card/course-card.css
@@ -94,6 +94,6 @@ img {
     .inline-g div {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
-        width: 75%;
+        width: 90%;
     }
 }
\ No newline at end of file

From e5f7678103eb8d23e8e1b63963c845ee4fa66cbb Mon Sep 17 00:00:00 2001
From: Sarah Miller <hmillersarah@gmail.com>
Date: Wed, 19 Mar 2025 14:28:55 -0400
Subject: [PATCH 06/11] convert cards to components

---
 ims-education.html                          | 738 ++++++--------------
 web-components/course-card/course-card.css  |   4 +-
 web-components/course-card/course-card.html |  11 +-
 3 files changed, 240 insertions(+), 513 deletions(-)

diff --git a/ims-education.html b/ims-education.html
index d591adc9..329a0639 100644
--- a/ims-education.html
+++ b/ims-education.html
@@ -353,7 +353,7 @@ <h1>IMS courses</h1>
 									<h2 id="all">All roles</h2>
 
 									<!-- IMS Fundamentals, with live course -->
-									<course-card
+									<!-- <course-card
 										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 
@@ -373,10 +373,11 @@ <h2 id="all">All roles</h2>
 										livetime="30 hours"
 										livelink="https://learn.ibm.com/course/view.php?id=8829"
 									>
-									</course-card>
+									</course-card> -->
 
 									<!-- IMS Fundamentals, no live course -->
 									<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 
@@ -394,6 +395,7 @@ <h2 id="all">All roles</h2>
 
 									<!-- PL/I Programming -->
 									<course-card
+										id="ims-intro-pli"
 										name="Introduction to the PL/I Programming Language"
 										desc="In this 8-hour, introductory course, you’ll learn about the parallels and differences 
 											between C and PL/I, particularly in language syntax, program structure, declarations, 
@@ -430,6 +432,7 @@ <h2 id="imsdb" style="color: black;margin-left: 16px;">IMS database</h2>
 
 									<!-- Database Fundamentals -->
 									<course-card
+										id="ims-dbfund"
 										name="IMS Database Fundamentals"
 										desc="Learn about IMS databases, including the structure of database records, 
 											how those records are accessed, DBDs, PSBs, DL/I calls, 
@@ -447,6 +450,7 @@ <h2 id="imsdb" style="color: black;margin-left: 16px;">IMS database</h2>
 
 									<!-- DBRC -->
 									<course-card
+										id="ims-dbrc"
 										name="IMS Database Recovery Control (DBRC)"
 										desc="IMS DBRC, which is a feature of the IMS Database Manager, helps with the recovery of IMS databases.
 											In this comprehensive course, you'll learn how to install, customize, administer, and maintain DBRC. 
@@ -462,528 +466,244 @@ <h2 id="imsdb" style="color: black;margin-left: 16px;">IMS database</h2>
 									>
 									</course-card>	
 
-									<!-- card -->
-									<div class="ims-course-card">
-										<div style="position: absolute; margin-top:-60px;" id="ims-dbrc"></div>
-										<div class="pure-u-1">
-											<div class="pure-u-1 pure-u-md-6-24">
-												<img src="wp-content/course-badges/badge_dbrc.png" alt="DBRC badge" style="width: 100%;height:100%;max-height: 300px;padding-bottom: 1px;">
-											</div>
-											<div class="pure-u-md-18-24" style="padding:35px;margin-right: -10px;">
-												<h3 style="color: black;">IMS Database Recovery Control (DBRC)</h3>
-												<p>IMS DBRC, which is a feature of the IMS Database Manager, helps with the recovery of IMS databases.</p>	
-												<p>In this comprehensive course, you'll learn how to install, customize, administer, and maintain DBRC. 
-													This course is for experienced IMS system programmers and database administrators who need to work with DBRC.
-												</p>
-												<div class="pure-u-1 pure-u-md-1">
-													<div style="margin-top:15px;" >
-														<p>
-															<b>Level</b>: Intermediate
-															&ensp;
-															<b>Cost</b>: None
-															&ensp;
-															<b>Badge</b>: Yes
-															&ensp;
-															<b>Time</b>: 32 hours
-														</p>
-													</div>
-													<div style="margin-top:15px;" >
-													<a aria-label="Learn more about IMS DBRC"
-													title="IMS DBRC" target="_blank" rel="noopener noreferrer" 
-													href="https://learn.ibm.com/course/view.php?id=12150" 
-													style="position: relative;bottom:0;margin-bottom:30px;text-align: left;">Learn more →</a>
-													</div>
-											</div>
-
-											</div>
-										</div>
-									</div>
-
-									<!-- card -->
-									<div class="ims-course-card" style="margin-top: 3.5em;">
-										<div style="position: absolute; margin-top:-60px;" id="ims-datashare"></div>
-										<div class="pure-u-1">
-											<div class="pure-u-1 pure-u-md-6-24">
-												<img src="wp-content/course-badges/badge_ims_data_sharing.png" alt="IMS Data Sharing badge" style="width: 100%;height:100%;max-height: 300px;padding-bottom: 1px;">
-											</div>
-											<div class="pure-u-1 pure-u-md-18-24" style="padding:35px;margin-right: -10px;">
-												<h3 style="color: black;">IMS Data Sharing</h3>
-												<p>When more than one IMS system has concurrent access to an IMS database, those systems are sharing data. 
-													In this advanced course, you'll learn about IMS data sharing capabilities, how multiple 
-													IMS systems on different LPARs and processors can access and update the same databases 
-													with complete integrity, and how to implement and maintain a data sharing environment.</p>	
-													<div class="pure-u-1 pure-u-md-1">
-														<div style=" margin-top:15px;">
-															<p>
-																<b>Level</b>: Advanced
-																&ensp;
-																<b>Cost</b>: None
-																&ensp;
-																<b>Badge</b>: Yes
-																&ensp;
-																<b>Time</b>: 12 hours
-															</p>
-														</div>
-														<div style="margin-top:15px;" >
-														<a aria-label="Learn more about IMS Data Sharing"
-														title="IMS Data Sharing" target="_blank" rel="noopener noreferrer" 
-														href="https://learn.ibm.com/course/view.php?id=11499" 
-														style="position: relative;bottom:0;margin-bottom:30px;text-align: left;">Learn more →</a>
-														</div>
-												</div>
-
-											</div>
-										</div>
-									</div>
-
-									<!-- card -->
-									<div class="ims-course-card" style="margin-top: 3.5em;">
-										<div style="position: absolute; margin-top:-60px;" id="ims-haldb"></div>
-										<div class="pure-u-1">
-											<div class="pure-u-1 pure-u-md-6-24">
-												<img src="wp-content/course-badges/badge_haldb.png" alt="HALDB badge" style="width: 100%;height:100%;max-height: 300px;padding-bottom: 1px;">
-											</div>
-											<div class="pure-u-md-18-24" style="padding:35px;margin-right: -10px;">
-												<h3 style="color: black;">IMS HALDB</h3>
-												<p>In this intermediate course, you’ll learn how to design, implement, 
-													maintain, troubleshoot, and recover IMS High Availability Large Databases (HALDBs). 
-													You’ll learn how other IMS databases can be migrated to HALDB and the advantages of using HALDBs.</p>	
-													<p>This is an intermediate course for experienced IMS database administrators who implement and manage HALDBs.</p>
-													<div class="pure-u-1 pure-u-md-1">
-														<div style="margin-top:15px;" >
-															<p>
-																<b>Level</b>: Intermediate
-																&ensp;
-																<b>Cost</b>: None
-																&ensp;
-																<b>Badge</b>: Yes
-																&ensp;
-																<b>Time</b>: 10 hours
-															</p>
-														</div>
-														<div style="margin-top:15px;" >
-														<a aria-label="Learn more about IMS HALDB"
-														title="IMS HALDB" target="_blank" rel="noopener noreferrer" 
-														href="https://learn.ibm.com/course/view.php?id=12157" 
-														style="position: relative;bottom:0;margin-bottom:30px;text-align: left;">Learn more →</a>
-														</div>
-												</div>
-
-											</div>
-										</div>
-									</div>
-
-									<!-- card -->
-									<div class="ims-course-card" style="margin-top: 3.5em;">
-										<div style="position: absolute; margin-top:-60px;" id="ims-fpimpl"></div>
-										<div class="pure-u-1">
-											<div class="pure-u-1 pure-u-md-6-24">
-												<img src="wp-content/course-badges/bacge_fp_implementation.png" alt="Fast Path Implementation badge" style="width: 100%;height:100%;max-height: 300px;padding-bottom: 1px;">
-											</div>
-											<div class="pure-u-1 pure-u-md-18-24" style="padding:35px;margin-right: -10px;">
-												<h3 style="color: black;">IMS Fast Path Implementation</h3>
-												<p>This is an advanced course for IBM IMS system administrators, database administrators, 
-													and application programmers who design or implement IMS Fast Path applications in an 
-													IMS Transaction Management (TM) or IBM CICS Database Control (DBCTL) environment. 
-													</p>		
-													<div class="pure-u-1 pure-u-md-1">
-														<div style=" margin-top:15px;">
-															<p>
-																<b>Level</b>: Advanced
-																&ensp;
-																<b>Cost</b>: None
-																&ensp;
-																<b>Badge</b>: Yes
-																&ensp;
-																<b>Time</b>: 18 hours
-															</p>
-														</div>
-														<div style="margin-top:15px;" >
-														<a aria-label="Learn more about IMS Fast Path Implementation"
-														title="IMS Fast Path Implementation" target="_blank" rel="noopener noreferrer" 
-														href="https://learn.ibm.com/course/view.php?id=9907" 
-														style="position: relative;bottom:0;margin-bottom:30px;">Learn more →</a>
-														</div>
-												</div>
-							
-											</div>
-										</div>
-									</div>
+									<!-- Data Sharing -->
+									<course-card
+										id="ims-datashare"
+										name="IMS Data Sharing"
+										desc="When more than one IMS system has concurrent access to an IMS database, those systems are sharing data. 
+											In this advanced course, you'll learn about IMS data sharing capabilities, how multiple 
+											IMS systems on different LPARs and processors can access and update the same databases 
+											with complete integrity, and how to implement and maintain a data sharing environment."
+										imgsrc="wp-content/course-badges/badge_ims_data_sharing.png"
+										level="Advanced"
+										cost="None"
+										badge="Yes"
+										time="12 hours"
+										link="https://learn.ibm.com/course/view.php?id=11499"
+										class="pure-u-1"
+									>
+									</course-card>	
 
-									<!-- card -->
-									<div class="ims-course-card">
-										<div style="position: absolute; margin-top:-60px;" id="ims-db-repair"></div>
-										<div class="pure-u-1">
-											<div class="pure-u-1 pure-u-md-6-24">
-												<img src="wp-content/course-badges/badge_db_repair.png" alt="Database Repair badge" style="width: 100%;height:100%;max-height: 300px;padding-bottom: 1px;">
-											</div>
-											<div class="pure-u-md-18-24" style="padding:35px;margin-right: -10px;">
-												<h3 style="color: black;">IMS Database Repair</h3>
-												<p>This advanced course shows you techniques and tools for diagnosing 
-													and repairing corrupted IMS databases, including full-function, 
-													DEDB, and HALDB. To do that, you’ll need to understand 
-													database access methods, secondary indexes, database layouts, 
-													control interval (CI) layouts, sequential dependents (SDEPs), 
-													and other database components, features, and structures.</p>	
-													<div class="pure-u-1 pure-u-md-1">
-														<div style="margin-top:15px;" >
-															<p>
-																<b>Level</b>: Advanced
-																&ensp;
-																<b>Cost</b>: None
-																&ensp;
-																<b>Badge</b>: Yes
-																&ensp;
-																<b>Time</b>: 11 hours
-															</p>
-														</div>
-														<div style="margin-top:15px;" >
-														<a aria-label="Learn more about IMS Database Repair"
-														title="IMS Database Repair" target="_blank" rel="noopener noreferrer" 
-														href="https://www.ibm.com/training/course/ims-database-repair-DL00963G" 
-														style="position: relative;bottom:0;margin-bottom:30px;text-align: left;">Learn more →</a>
-														</div>
-													</div>
+									<!-- HALDB -->
+									<course-card
+										id="ims-haldb"
+										name="IMS HALDB"
+										desc="In this intermediate course, you’ll learn how to design, implement, 
+											maintain, troubleshoot, and recover IMS High Availability Large Databases (HALDBs). 
+											You’ll learn how other IMS databases can be migrated to HALDB and the advantages of using HALDBs.
+											This is an intermediate course for experienced IMS database administrators who implement and manage HALDBs."
+										imgsrc="wp-content/course-badges/badge_haldb.png"
+										level="Intermediate"
+										cost="None"
+										badge="Yes"
+										time="10 hours"
+										link="https://learn.ibm.com/course/view.php?id=12157"
+										class="pure-u-1"
+									>
+									</course-card>
 
-											</div>
-										</div>
-									</div>		
+									<!-- Fast Path -->
+									<course-card
+										id="ims-fpimpl"
+										name="IMS Fast Path Implementation"
+										desc="This is an advanced course for IBM IMS system administrators, database administrators, 
+											and application programmers who design or implement IMS Fast Path applications in an 
+											IMS Transaction Management (TM) or IBM CICS Database Control (DBCTL) environment."
+										imgsrc="wp-content/course-badges/bacge_fp_implementation.png"
+										level="Advanced"
+										cost="None"
+										badge="Yes"
+										time="18 hours"
+										link="https://learn.ibm.com/course/view.php?id=9907"
+										class="pure-u-1"
+									>
+									</course-card>
 
-									<!-- card -->
-									<div class="ims-course-card">
-										<div style="position: absolute; margin-top:-60px;" id="ims-db-tune"></div>
-										<div class="pure-u-1">
-											<div class="pure-u-1 pure-u-md-6-24">
-												<img src="wp-content/course-badges/badge_perf_tuning.png" alt="Database Performance and Tuning badge" style="width: 100%;height:100%;max-height: 300px;padding-bottom: 1px;">
-											</div>
-											<div class="pure-u-md-18-24" style="padding:35px;margin-right: -10px;">
-												<h3 style="color: black;">IMS Database Performance and Tuning</h3>
-												<p>This course shows you how to tune IBM® IMS™ databases. 
-													It also discusses IMS database options that affect performance such as data set considerations 
-													and buffering for Virtual Storage Access Method (VSAM) and Overflow Sequential Access Method 
-													(OSAM) databases.</p>	
-											
-													<div class="pure-u-1 pure-u-md-1">
-														<div style="margin-top:15px;" >
-															<p>
-																<b>Level</b>: Advanced
-																&ensp;
-																<b>Cost</b>: None
-																&ensp;
-																<b>Badge</b>: Yes
-																&ensp;
-																<b>Time</b>: 36 hours
-															</p>
-														</div>
-														<div style="margin-top:15px;" >
-														<a  aria-label="Learn more about IMS Database Performance and Tuning" 
-														title="IMS Database Performance and Tuning" target="_blank" rel="noopener noreferrer" 
-														href="https://learn.ibm.com/course/view.php?id=12404" 
-														style="position: relative;bottom:0;margin-bottom:30px;text-align: left;">Learn more →</a>
-														</div>	</div>
-								
-											</div>
-										</div>
-									</div>
+									<!-- Database Repair -->
+									<course-card
+										id="ims-db-repair"
+										name="IMS Database Repair"
+										desc="This advanced course shows you techniques and tools for diagnosing 
+											and repairing corrupted IMS databases, including full-function, 
+											DEDB, and HALDB. To do that, you’ll need to understand 
+											database access methods, secondary indexes, database layouts, 
+											control interval (CI) layouts, sequential dependents (SDEPs), 
+											and other database components, features, and structures."
+										imgsrc="wp-content/course-badges/badge_db_repair.png"
+										level="Advanced"
+										cost="None"
+										badge="Yes"
+										time="11 hours"
+										link="https://www.ibm.com/training/course/ims-database-repair-DL00963G"
+										class="pure-u-1"
+									>
+									</course-card>	
 
-									<!-- card -->
-									<div class="ims-course-card">
-										<div style="position: absolute; margin-top:-60px;" id="ims-phys-db"></div>
-										<div class="pure-u-1">
-											<div class="pure-u-1 pure-u-md-6-24">
-												<img src="wp-content/course-badges/badge_physical_org_db.png" alt="Physical Organization of Databases badge" style="width: 100%;height:100%;max-height: 300px;padding-bottom: 1px;">
-											</div>
-											<div class="pure-u-md-18-24" style="padding:35px;margin-right: -10px;">
-												<h3 style="color: black;">IMS Physical Organization of Databases</h3>
-												<p>In this comprehensive course, you’ll learn about IMS DB access methods, 
-													how to code DBDs and PSBs, use IMS utilities to reorganize and recover 
-													databases,  use the DL/I test program, and how to prepare a job stream 
-													to load a database.</p>	
-													<div class="pure-u-1 pure-u-md-1">
-														<div style="margin-top:15px;" >
-															<p>
-																<b>Level</b>: Intermediate
-																&ensp;
-																<b>Cost</b>: None
-																&ensp;
-																<b>Badge</b>: Yes
-																&ensp;
-																<b>Time</b>: 33 hours
-															</p>
-														</div>
-														<div style="margin-top:15px;" >
-														<a  aria-label="Learn more about IMS Physical Organization of Databases" 
-														title="IMS Physical Organization of Databases" target="_blank" rel="noopener noreferrer" 
-														href="https://www.ibm.com/training/course/ims-physical-organization-of-databases-DL00965G" 
-														style="position: relative;bottom:0;margin-bottom:30px;text-align: left;">Learn more →</a>
-														</div>
-													</div>
+									<!-- Database Performance and Tuning -->
+									<course-card
+										id="ims-db-tune"
+										name="IMS Database Performance and Tuning"
+										desc="This course shows you how to tune IBM® IMS™ databases. 
+											It also discusses IMS database options that affect performance such as data set considerations 
+											and buffering for Virtual Storage Access Method (VSAM) and Overflow Sequential Access Method 
+											(OSAM) databases"
+										imgsrc="wp-content/course-badges/badge_perf_tuning.png"
+										level="Advanced"
+										cost="None"
+										badge="Yes"
+										time="36 hours"
+										link="https://learn.ibm.com/course/view.php?id=12404"
+										class="pure-u-1"
+									>
+									</course-card>	
 
-											</div>
-										</div>
-									</div>	
+									<!-- Physical Organization of Databases -->
+									<course-card
+										id="ims-phys-db"
+										name="IMS Physical Organization of Databases"
+										desc="In this comprehensive course, you’ll learn about IMS DB access methods, 
+											how to code DBDs and PSBs, use IMS utilities to reorganize and recover 
+											databases,  use the DL/I test program, and how to prepare a job stream 
+											to load a database."
+										imgsrc="wp-content/course-badges/badge_physical_org_db.png"
+										level="Intermediate"
+										cost="None"
+										badge="Yes"
+										time="33 hours"
+										link="https://www.ibm.com/training/course/ims-physical-organization-of-databases-DL00965G"
+										class="pure-u-1"
+									>
+									</course-card>	
 
 									<!-- SYS header -->
 									<h2 id="sysprog" style="color: black;margin-left: 16px;">System programming</h2>
 
-									<!-- card-->
-									<div class="ims-course-card" style="margin-top: 3.5em;">
-										<div style="position: absolute; margin-top:-60px;" id="ims-dmtm"></div>
-										<div class="pure-u-1">
-											<div class="pure-u-1 pure-u-md-6-24">
-												<img src="wp-content/course-badges/badge_db_tm_sysprog.png" alt="System Programming badge" style="width: 100%;height:100%;max-height: 300px;padding-bottom: 1px;">
-											</div>
-											<div class="pure-u-1 pure-u-md-18-24" style="padding:35px;margin-right: -10px;">
-												<h3 style="color: black;">IMS System Programming</h3>
-												<p>Learn about IMS architecture, installation, transaction management, locking, logging, connecting IMS to IBM CICS® and IBM Db2®,  
-													data sharing, shared queues, preparing and starting the system, and more.</p>	
-													<div class="pure-u-1 pure-u-md-1">
-														<div style=" margin-top:15px;">
-															<p>
-																<b>Level</b>: Intermediate
-																&ensp;
-																<b>Cost</b>: None
-																&ensp;
-																<b>Badge</b>: Yes
-																&ensp;
-																<b>Time</b>: 13 hours
-															</p>
-														</div>
-														<div style="margin-top:15px;" >
-														<a aria-label="Learn more about IMS System Programming"
-														title="IMS System Programming" target="_blank" rel="noopener noreferrer" 
-														href="https://learn.ibm.com/course/view.php?id=10973" 
-														style="position: relative;bottom:0;margin-bottom:30px;text-align: left;">Learn more →</a>
-														</div>
-												</div>
-							
-											</div>
-										</div>
-									</div>
-
-									<!-- card -->
-									<div class="ims-course-card" style="margin-top: 3.5em;">
-										<div style="position: absolute; margin-top:-60px;" id="ims-diagnostics"></div>
-										<div class="pure-u-1">
-											<div class="pure-u-1 pure-u-md-6-24">
-												<img src="wp-content/course-badges/badge_ims_diagnostics.png" alt="IMS Diagnostics badge" style="width: 100%;height:100%;max-height: 300px;padding-bottom: 1px;">
-											</div>
-											<div class="pure-u-1 pure-u-md-18-24" style="padding:35px;margin-right: -10px;">
-												<h3 style="color: black;">IMS Diagnostics</h3>
-												<p>Learn about the relationships between IMS components so that you can explain IBM's recommendations for IMS
-													diagnostic setup. Learn how to use the IMS Interactive Dump Formatter, identify the key z/OS® IPCS commands
-														that are useful for IMS problem diagnostics, perform the methodology for debugging IMS abends, and understand the
-														methodology for debugging IMS waits and loops.</p>
-														<div class="pure-u-1 pure-u-md-1">
-															<div style=" margin-top:15px;">
-																<p>
-																	<b>Level</b>: Intermediate
-																	&ensp;
-																	<b>Cost</b>: None
-																	&ensp;
-																	<b>Badge</b>: Yes
-																	&ensp;
-																	<b>Time</b>: 10 hours
-																</p>
-															</div>
-															<div style="margin-top:15px;" >
-															<a aria-label="Learn more about IMS Diagnostics"
-															title="IMS Diagnostics" target="_blank" rel="noopener noreferrer" 
-															href="https://learn.ibm.com/course/view.php?id=7405" 
-															style="position: relative;bottom:0;margin-bottom:30px;">Learn more →</a>
-															</div>
-													</div>
-
-											</div>
-										</div>
-									</div>
-
-									<!-- card -->
-									<div class="ims-course-card" style="margin-top: 3.5em;">
-										<div style="position: absolute; margin-top:-60px;" id="ims-squeues"></div>
-										<div class="pure-u-1">
-											<div class="pure-u-1 pure-u-md-6-24">
-												<img src="wp-content/course-badges/badge_ims_shared_queues.png" alt="Shared Queues badge" style="width: 100%;height:100%;max-height: 300px;padding-bottom: 1px;">
-											</div>
-											<div class="pure-u-1 pure-u-md-18-24" style="padding:35px;margin-right: -10px;">
-												<h3 style="color: black;">IMS Shared Queues</h3>
-												<p>Learn how shared message queues work in IBM IMS, and how full-function queues and Fast Path expedited message handler (EMH) queues 
-													are shared within a parallel sysplex environment. Learn how to prepare and implement IMS shared queues 
-													and manage and troubleshoot an IMS shared queues environment.</p>		
-													<div class="pure-u-1 pure-u-md-1">
-														<div style=" margin-top:15px;">
-															<p>
-																<b>Level</b>: Intermediate
-																&ensp;
-																<b>Cost</b>: None
-																&ensp;
-																<b>Badge</b>: Yes
-																&ensp;
-																<b>Time</b>: 17 hours
-															</p>
-														</div>
-														<div style="margin-top:15px;" >
-														<a aria-label="Learn more about IMS Shared Queues"
-														title="IMS Shared Queues" target="_blank" rel="noopener noreferrer" 
-														href="https://learn.ibm.com/course/view.php?id=9359" 
-														style="position: relative;bottom:0;margin-bottom:30px;">Learn more →</a>
-														</div>
-												</div>
-
-											</div>
-										</div>
-									</div>
-
-									<!-- card -->
-									<div class="ims-course-card">
-										<div style="position: absolute; margin-top:-60px;" id="ims-tm-performance"></div>
-										<div class="pure-u-1">
-											<div class="pure-u-1 pure-u-md-6-24">
-												<img src="wp-content/course-badges/badge_ims_tm_tuning.png" alt="TM Performance Analysis badge" style="width: 100%;height:100%;max-height: 300px;padding-bottom: 1px;">
-											</div>
-											<div class="pure-u-md-18-24" style="padding:35px;margin-right: -10px;">
-												<h3 style="color: black;">IMS TM Performance Analysis</h3>
-												<p>In this advanced course, you'll learn how to use and adjust IMS 
-													Transaction Manager (IMS TM), other components in the IMS system, and z/OS 
-													components, commands, processes, parameters, and more to ensure that the 
-													IMS TM system is running as efficiently as possible.</p>	
-														<div class="pure-u-1 pure-u-md-1">
-															<div style="margin-top:15px;" >
-															<p>
-																<b>Level</b>: Advanced
-																&ensp;
-																<b>Cost</b>: None
-																&ensp;
-																<b>Badge</b>: Yes
-																&ensp;
-																<b>Time</b>: 11 hours
-															</p>
-														</div>
-															<div style="margin-top:15px;" >
-														<a aria-label="Learn more about IMS TM Performance Analysis"
-														title="IMS TM Performance Analysis" target="_blank" rel="noopener noreferrer" 
-														href="https://www.ibm.com/training/course/ims-transaction-manager-performance-analysis-DL00962G" 
-														style="position: relative;bottom:0;margin-bottom:30px;text-align: left;">Learn more →</a>
-														</div>
-													</div>
-
-											</div>
-										</div>
-									</div>		
-
-									<!-- card -->
-									<div class="ims-course-card" style="margin-top: 3.5em;">
-										<div style="position: absolute; margin-top:-60px;" id="ims-dbctl"></div>
-										<div class="pure-u-1">
-											<div class="pure-u-1 pure-u-md-6-24">
-												<img src="wp-content/course-badges/badge_ims_dbctl.png" alt="DBCTL System Programming badge" style="width: 100%;height:100%;max-height: 300px;padding-bottom: 1px;">
-											</div>
-											<div class="pure-u-1 pure-u-md-18-24" style="padding:35px;margin-right: -10px;">
-												<h3 style="color: black;">IMS System Programming in a DBCTL Environment</h3>
-												<p>Learn about the IMS database control (DBCTL) environment, which provides access between CICS and
-													IMS-managed databases. Learn  how to install, configure, maintain, troubleshoot, and support
-													an IMS DBCTL system, and understand the IMS architecture that applies to database management and attaching 
-													to CICS systems and transactions.</p>		
-													<div class="pure-u-1 pure-u-md-1">
-														<div style=" margin-top:15px;">
-															<p>
-																<b>Level</b>: Intermediate
-																&ensp;
-																<b>Cost</b>: None
-																&ensp;
-																<b>Badge</b>: Yes
-																&ensp;
-																<b>Time</b>: 12 hours
-															</p>
-														</div>
-														<div style="margin-top:15px;" >
-														<a aria-label="Learn more about IMS System Programming in DBCTL Environment"
-														title="IMS System Programming in DBCTL Environment" target="_blank" rel="noopener noreferrer" 
-														href="https://learn.ibm.com/course/view.php?id=8352" 
-														style="position: relative;bottom:0;margin-bottom:30px;">Learn more →</a>
-														</div>
-													</div>
+									<!-- System Programming -->
+									<course-card
+										id="ims-dmtm"
+										name="IMS System Programming"
+										desc="Learn about IMS architecture, installation, transaction management, locking, 
+											logging, connecting IMS to IBM CICS® and IBM Db2®, data sharing, shared queues, 
+											preparing and starting the system, and more."
+										imgsrc="wp-content/course-badges/badge_db_tm_sysprog.png"
+										level="Intermediate"
+										cost="None"
+										badge="Yes"
+										time="13 hours"
+										link="https://learn.ibm.com/course/view.php?id=10973"
+										class="pure-u-1"
+									>
+									</course-card>	
 
-											</div>
-										</div>
-									</div>
+									<!-- Diagnostics -->
+									<course-card
+										id="ims-diagnostics"
+										name="IMS Diagnostics"
+										desc="Learn about the relationships between IMS components so that you can explain IBM's recommendations for IMS
+											diagnostic setup. Learn how to use the IMS Interactive Dump Formatter, identify the key z/OS® IPCS commands
+											that are useful for IMS problem diagnostics, perform the methodology for debugging IMS abends, and understand the
+											methodology for debugging IMS waits and loops."
+										imgsrc="wp-content/course-badges/badge_ims_diagnostics.png"
+										level="Intermediate"
+										cost="None"
+										badge="Yes"
+										time="10 hours"
+										link="https://learn.ibm.com/course/view.php?id=7405"
+										class="pure-u-1"
+									>
+									</course-card>		
+									
+									<!-- Shared Queues -->
+									<course-card
+										id="ims-squeues"
+										name="IMS Shared Queues"
+										desc="Learn how shared message queues work in IBM IMS, and how full-function queues and Fast Path expedited message handler (EMH) queues 
+											are shared within a parallel sysplex environment. Learn how to prepare and implement IMS shared queues 
+											and manage and troubleshoot an IMS shared queues environment."
+										imgsrc="wp-content/course-badges/badge_ims_shared_queues.png"
+										level="Intermediate"
+										cost="None"
+										badge="Yes"
+										time="17 hours"
+										link="https://learn.ibm.com/course/view.php?id=9359"
+										class="pure-u-1"
+									>
+									</course-card>		
+									
+									<!-- TM Performance Analysis -->
+									<course-card
+										id="ims-tm-performance"
+										name="IMS TM Performance Analysis"
+										desc="In this advanced course, you'll learn how to use and adjust IMS 
+											Transaction Manager (IMS TM), other components in the IMS system, and z/OS 
+											components, commands, processes, parameters, and more to ensure that the 
+											IMS TM system is running as efficiently as possible."
+										imgsrc="wp-content/course-badges/badge_ims_tm_tuning.png"
+										level="Advanced"
+										cost="None"
+										badge="Yes"
+										time="11 hours"
+										link="https://www.ibm.com/training/course/ims-transaction-manager-performance-analysis-DL00962G"
+										class="pure-u-1"
+									>
+									</course-card>	
+	
+									<!-- System Programming in a DBCTL Environment -->
+									<course-card
+										id="ims-dbctl"
+										name="IMS System Programming in a DBCTL Environment"
+										desc="Learn about the IMS database control (DBCTL) environment, which provides access between CICS and
+											IMS-managed databases. Learn  how to install, configure, maintain, troubleshoot, and support
+											an IMS DBCTL system, and understand the IMS architecture that applies to database management and attaching 
+											to CICS systems and transactions."
+										imgsrc="wp-content/course-badges/badge_ims_dbctl.png"
+										level="Intermediate"
+										cost="None"
+										badge="Yes"
+										time="12 hours"
+										link="https://learn.ibm.com/course/view.php?id=8352"
+										class="pure-u-1"
+									>
+									</course-card>	
 
 									<!-- APPDEV header -->
 									<h2 id="appdev" style="color: black;margin-left: 16px;">Application development</h2>
 
-									<!-- card -->
-									<div class="ims-course-card">
-										<div style="position: absolute; margin-top:-60px;" id="ims-tm-prog"></div>
-										<div class="pure-u-1">
-											<div class="pure-u-1 pure-u-md-6-24">
-												<img src="wp-content/course-badges/badge_tm_app_prog.png" alt="TM Application Programming badge" style="width: 100%;height:100%;max-height: 300px;padding-bottom: 1px;">
-											</div>
-											<div class="pure-u-md-18-24" style="padding:35px;margin-right: -10px;">
-												<h3 style="color: black;">IMS TM Application Programming</h3>
-												<p>This course shows you through lectures and lab demos how to write
-													application programs that use Data Language One (DL/I) to process
-													terminal input and output messages in an IMS Transaction manager system.</p>	
-													<p>This course does not teach basic COBOL or PL/I. You
-														should already have experience developing applications with one or both of those languages.</p>
-														<div class="pure-u-1 pure-u-md-1">
-															<div style="margin-top:15px;" >
-																<p>
-																	<b>Level</b>: Intermediate
-																	&ensp;
-																	<b>Cost</b>: None
-																	&ensp;
-																	<b>Badge</b>: Yes
-																	&ensp;
-																	<b>Time</b>: 14 hours
-																</p>
-															</div>
-															<div style="margin-top:15px;" >
-															<a aria-label="Learn more about IMS TM Application Programming" 
-															title="IMS TM Application Programming" target="_blank" rel="noopener noreferrer" 
-															href="https://learn.ibm.com/course/view.php?id=13017" 
-															style="position: relative;bottom:0;margin-bottom:30px;text-align: left;">Learn more →</a>
-															</div>
-														</div>
-
-											</div>
-										</div>
-									</div>
-
-									<!-- card -->
-									<div class="ims-course-card">
-										<div style="position: absolute; margin-top:-60px;" id="ims-db-prog"></div>
-										<div class="pure-u-1">
-											<div class="pure-u-1 pure-u-md-6-24">
-												<img src="wp-content/course-badges/badge_db_app_prog.png" alt="Database Application Programming badge" style="width: 100%;height:100%;max-height: 300px;padding-bottom: 1px;">
-											</div>
-											<div class="pure-u-md-18-24" style="padding:35px;margin-right: -10px;">
-												<h3 style="color: black;">IMS Database Application Programming</h3>
-												<p>In this course, you'll learn how to code application programs that perform processing
-													on IMS database records. You'll learn about the hierarchic structure of IMS databases,
-													how to construct DL/I calls, how to test your applications, and more.</p>	
-													<div class="pure-u-1 pure-u-md-1">
-														<div style="margin-top:15px;" >
-															<p>
-																<b>Level</b>: Intermediate
-																&ensp;
-																<b>Cost</b>: None
-																&ensp;
-																<b>Badge</b>: Yes
-																&ensp;
-																<b>Time</b>: 20 hours
-															</p>
-														</div>
-														<div style="margin-top:15px;" >
-														<a aria-label="Learn more about IMS Database Application Programming"
-														title="IMS Database Application Programming" target="_blank" rel="noopener noreferrer" 
-														href="https://learn.ibm.com/course/view.php?id=12691" 
-														style="position: relative;bottom:0;margin-bottom:30px;text-align: left;">Learn more →</a>
-														</div>
-													</div>
+									<!-- TM Application Programming -->
+									<course-card
+										id="ims-tm-prog"
+										name="IMS TM Application Programming"
+										desc="This course shows you through lectures and lab demos how to write
+											application programs that use Data Language One (DL/I) to process
+											terminal input and output messages in an IMS Transaction manager system.
+											This course does not teach basic COBOL or PL/I. You should already have 
+											experience developing applications with one or both of those languages."
+										imgsrc="wp-content/course-badges/badge_tm_app_prog.png"
+										level="Intermediate"
+										cost="None"
+										badge="Yes"
+										time="14 hours"
+										link="https://learn.ibm.com/course/view.php?id=13017"
+										class="pure-u-1"
+									>
+									</course-card>
 
-											</div>
-										</div>
-									</div>
+									<!-- DB Application Programming -->
+									<course-card
+										id="ims-db-prog"
+										name="IMS Database Application Programming"
+										desc="In this course, you'll learn how to code application programs that perform processing
+											on IMS database records. You'll learn about the hierarchic structure of IMS databases,
+											how to construct DL/I calls, how to test your applications, and more."
+										imgsrc="wp-content/course-badges/badge_db_app_prog.png"
+										level="Intermediate"
+										cost="None"
+										badge="Yes"
+										time="20 hours"
+										link="https://learn.ibm.com/course/view.php?id=12691"
+										class="pure-u-1"
+									>
+									</course-card>
 
 								</div>
 							</section>
diff --git a/web-components/course-card/course-card.css b/web-components/course-card/course-card.css
index 5078015e..4751d4d6 100644
--- a/web-components/course-card/course-card.css
+++ b/web-components/course-card/course-card.css
@@ -86,10 +86,10 @@ img {
         align-items: center;
     }
 
-    .inline-g {
+    /* .inline-g {
         display: grid;
         grid-template-columns: 1fr 6fr;
-    }
+    } */
 
     .inline-g div {
         display: grid;
diff --git a/web-components/course-card/course-card.html b/web-components/course-card/course-card.html
index 2d4e7d06..30b51b8c 100644
--- a/web-components/course-card/course-card.html
+++ b/web-components/course-card/course-card.html
@@ -10,6 +10,13 @@ <h2 class="course-name"></h2>
             <p class="course-desc"></p>
             <div class="column-g">
                 <div class="inline-g">
+                    <p>Level: <span class="course-level"></span></p>
+                    <p>Cost: <span class="course-cost"></span></p>
+                    <p>Badge: <span class="course-badge"></span></p>
+                    <p>Time: <span class="course-time"></span></p>
+                </div>
+                <!-- Uncomment if using self-paced/live distinction -->
+                <!-- <div class="inline-g">
                     <p>Self-paced:</p>
                     <div>
                         <p>Level: <span class="course-level"></span></p>
@@ -17,7 +24,7 @@ <h2 class="course-name"></h2>
                         <p>Badge: <span class="course-badge"></span></p>
                         <p>Time: <span class="course-time"></span></p>
                     </div>
-                </div>
+                </div> -->
                 <div class="inline-g live-course">
                     <p>Instructor-led:</p>
                     <div>
@@ -30,7 +37,7 @@ <h2 class="course-name"></h2>
             </div>
         </div>
         <div class="link-g">
-            <a class="course-link" target="_blank" rel="noopener noreferrer">Self-paced course →</a>
+            <a class="course-link" target="_blank" rel="noopener noreferrer">Learn more →</a>
             <a class="live-link" target="_blank" rel="noopener noreferrer">Instructor-led course →</a>
         </div>
     </div>

From 717005301aba3168094f9ec3f24f1c88b8916b4b Mon Sep 17 00:00:00 2001
From: Sarah Miller <hmillersarah@gmail.com>
Date: Wed, 19 Mar 2025 15:17:01 -0400
Subject: [PATCH 07/11] update course page styling

---
 ims-education.html       | 1615 +++++++++++++++++++-------------------
 wp-includes/css/page.css |   16 +-
 2 files changed, 807 insertions(+), 824 deletions(-)

diff --git a/ims-education.html b/ims-education.html
index 329a0639..75aaf810 100644
--- a/ims-education.html
+++ b/ims-education.html
@@ -1,863 +1,844 @@
 <!DOCTYPE html>
-<html lang="en-US" prefix="og: http://ogp.me/ns#">
+<html lang="en-US">
 
 <head>
+	<!-- Basic meta -->
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-<!-- v18 basic meta -->
 	<meta name="geo.country" content="ZZ" />
 	<meta name="dcterms.rights" content="� Copyright IBM Corp. 2020" />
 	<meta name="dcterms.date" content="2020-07-18" />
 	<meta name="keywords" content="IMS Central, IMS Developer, IMS" />
 	<meta name="robots" content="index, follow" />
-<!-- Favicon -->
+
+	<!-- Favicon -->
 	<link id="favicon"
 	rel="shortcut icon"
 	type="image/x-icon"
 	href="wp-content/IMS_logo_small.png">
 
-<!-- Pageittle -->
-<title>IMS Courses</title>
-
-<!-- Meta -->
-<link rel="canonical" href="ims-education.html" />
-<meta property="og:locale" content="en_US" />
-<meta property="og:type" content="article" />
-<meta property="og:title" content="IMS Courses" />
-<meta property="og:description" content="IMS Courses" />
-<meta property="og:url" content="http://www/imsdev.github.io/ims-education.html" />
-<meta property="og:site_name" content="IMS Central" />
-<meta property="og:image" content="http://www/imsdev.github.io/wp-content/IMS_logo_large.png" />
-<meta name="twitter:card" content="summary" />
-<meta name="twitter:description" content="IMS Courses" />
-<meta name="twitter:title" content="IMS Courses" />
-<meta property="og:image" content="http://www/imsdev.github.io/wp-content/IMS_logo_large.png" />
-
-<!-- Sheets -->
-<link rel='stylesheet' id='dwboomer-style-css'  href='wp-content/themes/boomer-v18/style.css' type='text/css' media='all' />
-<link rel='stylesheet' id='dashicons-css'  href='wp-includes/css/dashicons.min.css' type='text/css' media='all' />
-<link rel='stylesheet' id='pagepost_css-css'  href='wp-content/themes/boomer-v18/css/pagepost.css' type='text/css' media='all' />
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
-<link rel="stylesheet" href="wp-includes/css/nav.css">
-<link rel="stylesheet" href="wp-includes/css/dropnav.css">
-<link href="wp-includes/css/www.css" rel="stylesheet" />
-<link href="wp-includes/css/grid-fluid.css" rel="stylesheet">
-<link href="wp-includes/css/tables.css" rel="stylesheet">
-<link href="wp-includes/css/pages/education.css" rel="stylesheet">
-
-<!-- Hotjar Tracking Code for ibm.com/demos &  githhub -->
-<script>
-	(function(h,o,t,j,a,r){
-		h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
-		h._hjSettings={hjid:132193,hjsv:6};
-		a=o.getElementsByTagName('head')[0];
-		r=o.createElement('script');r.async=1;
-		r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
-		a.appendChild(r);
-	})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
-  </script>
-
-<!-- Additional styling for content after navigation -->
-
-<link rel="stylesheet" type="text/css" href="wp-includes/css/pure.css">
-<link rel="stylesheet" href="wp-includes/css/grids-responsive-min.css">
-<link rel="stylesheet" type="text/css" href="wp-includes/css/homepage.css">
-<script src="wp-includes/js/jquery.min.js"></script>
-
-<!-- TipueSearch -->
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
-<script src="jekyll-tipue-search/assets/tipuesearch/tipuesearch_content.js"></script>
-<script src="jekyll-tipue-search/assets/tipuesearch/tipuesearch_set.js"></script>
-<script src="jekyll-tipue-search/assets/tipuesearch/tipuesearch.min.js"></script>
-
-<!-- delayed search -->
-<script src="jekyll-tipue-search/assets/tipuesearch/delayedsearch.js"></script>
-
-<!-- Hamburger menu -->
-<script src="wp-includes/js/navbar.js"></script>
-
-<!-- Web components -->
-<script src="web-components/course-card/course-card.js" type="module"></script>
-
+	<!-- Page title -->
+	<title>IMS Courses</title>
+
+	<!-- Meta -->
+	<link rel="canonical" href="ims-education.html" />
+	<meta property="og:locale" content="en_US" />
+	<meta property="og:type" content="article" />
+	<meta property="og:title" content="IMS Courses" />
+	<meta property="og:description" content="IMS Courses" />
+	<meta property="og:url" content="http://www/imsdev.github.io/ims-education.html" />
+	<meta property="og:site_name" content="IMS Central" />
+	<meta property="og:image" content="http://www/imsdev.github.io/wp-content/IMS_logo_large.png" />
+	<meta name="twitter:card" content="summary" />
+	<meta name="twitter:description" content="IMS Courses" />
+	<meta name="twitter:title" content="IMS Courses" />
+	<meta property="og:image" content="http://www/imsdev.github.io/wp-content/IMS_logo_large.png" />
+
+	<!-- Sheets -->
+	<!-- Imported styling -->
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+	<!-- Migrated stylesheets -->
+	<link rel='stylesheet' id='dwboomer-style-css'  href='wp-content/themes/boomer-v18/style.css' type='text/css' media='all' />
+	<link rel="stylesheet" href="wp-includes/css/www.css" />
+	<!-- Pure CSS -->
+	<link rel="stylesheet" href="wp-includes/css/pure.css">
+	<link rel="stylesheet" href="wp-includes/css/grids-responsive-min.css">
+	<!-- Custom CSS -->
+	<link rel="stylesheet" href="wp-includes/css/homepage.css">
+	<link rel="stylesheet" href="wp-includes/css/nav.css">
+	<link rel="stylesheet" href="wp-includes/css/dropnav.css">
+	<link rel="stylesheet" href="wp-includes/css/page.css">
+	<link href="wp-includes/css/pages/education.css" rel="stylesheet">
+
+	<!-- Hotjar Tracking Code for ibm.com/demos &  githhub -->
+	<script>
+		(function(h,o,t,j,a,r){
+			h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
+			h._hjSettings={hjid:132193,hjsv:6};
+			a=o.getElementsByTagName('head')[0];
+			r=o.createElement('script');r.async=1;
+			r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
+			a.appendChild(r);
+		})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
+	</script>
+
+	<!-- Additional styling for content after navigation -->
+	<script src="wp-includes/js/jquery.min.js"></script>
+
+	<!-- TipueSearch -->
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+	<script src="jekyll-tipue-search/assets/tipuesearch/tipuesearch_content.js"></script>
+	<script src="jekyll-tipue-search/assets/tipuesearch/tipuesearch_set.js"></script>
+	<script src="jekyll-tipue-search/assets/tipuesearch/tipuesearch.min.js"></script>
+
+	<!-- delayed search -->
+	<script src="jekyll-tipue-search/assets/tipuesearch/delayedsearch.js"></script>
+
+	<!-- Hamburger menu -->
+	<script src="wp-includes/js/navbar.js"></script>
+
+	<!-- Web components -->
+	<script src="web-components/course-card/course-card.js" type="module"></script>
 </head>
 
 <!-- MASTHEAD_SITENAV_BEGIN -->
-<body id="ibm-com" class="ibm-com ibm-type group-blog">
-	<div class="ibm-landing-page">
-	    <div id="ibm-content-wrapper" class="sticky-nav">
-			<header id="ibm-pageheader" aria-label="Site navigation bar">
-			<a class="skip-link screen-reader-text" href="#main">Skip to content</a>
-	
-			<!-- --------------- NAV BAR --------------- -->
-			<section class="p-menu1">
-			  <nav id="navbar" class="navigation" aria-labelledby="ibm-pageheader">
+<body id="ibm-com" class="ibm-com ibm-type">
+	<div id="ibm-content-wrapper" class="sticky-nav">
+		<header id="ibm-pageheader" aria-label="Site navigation bar">
+		<a class="skip-link screen-reader-text" href="#main">Skip to content</a>
+
+		<!-- --------------- NAV BAR --------------- -->
+		<section class="p-menu1">
+			<nav id="navbar" class="navigation" aria-labelledby="ibm-pageheader">
+		
+			<!-- Site name wrapper -->
+			<span class="sitename-wrap">
+			<a href="index.html" class="logo-container">
+				<img src="wp-content/IMS_logo_small.png"
+				id="left-bar-brand"
+				alt="IMS logo"
+				>
+			</a>
+			<a href="index.html" class="logo-container">
+				<h4 class="site-header-text">
+				IBM <b>IMS Central</b>
+				</h4>
+			</a>
+			</span>
+		
+			<!-- Search wrapper -->
+			<form id="searchbar" aria-label="Search">
+			<div class="tipue_search_right">
+				<svg id="search-mag" alt="Search magnifying glass" xmlns="http://www.w3.org/2000/svg" width="22px" height="22px" viewBox="0 0 32 32">
+				<defs>
+					<style> .cls-1 { fill: none; } </style>
+				</defs>
+				<path d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z" transform="translate(0 0)"/>
+				<rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1" width="32" height="32"/>
+				</svg>
+				<input type="text" name="q" id="tipue_search_input"
+				pattern=".{3,}" title="Search bar"
+				placeholder="What are you looking for today?" autocomplete="off" required autofocus>
+				<svg id="search-clr" aria-label="Clear search" role="button" tabindex="0" xmlns="http://www.w3.org/2000/svg" height="15px" viewBox="0 0 329.26933 329" width="15px">
+				<path d="m194.800781 164.769531 128.210938-128.214843c8.34375-8.339844 8.34375-21.824219 0-30.164063-8.339844-8.339844-21.824219-8.339844-30.164063 0l-128.214844 128.214844-128.210937-128.214844c-8.34375-8.339844-21.824219-8.339844-30.164063 0-8.34375 8.339844-8.34375 21.824219 0 30.164063l128.210938 128.214843-128.210938 128.214844c-8.34375 8.339844-8.34375 21.824219 0 30.164063 4.15625 4.160156 9.621094 6.25 15.082032 6.25 5.460937 0 10.921875-2.089844 15.082031-6.25l128.210937-128.214844 128.214844 128.214844c4.160156 4.160156 9.621094 6.25 15.082032 6.25 5.460937 0 10.921874-2.089844 15.082031-6.25 8.34375-8.339844 8.34375-21.824219 0-30.164063zm0 0"/>
+				</svg>
+			</div>
+			</form>
+
+			<!-- On page-load activation -->
+			<script>
+			$(document).ready(function() {
+				$('#tipue_search_input').tipuesearch();
+			});
+			</script>
+
+			<!-- Search drop-down -->
+			<div id="tipue_search_content" class="search_content search-dropdown"></div>
+
+			<!-- Hamburger drop-down menu -->
+			<input type="checkbox" tabindex="0" id="toggle1" class="support-enter" aria-label="Hamburger Menu"/>
 			
-			  <!-- Site name wrapper -->
-			  <span class="sitename-wrap">
-				<a href="index.html" class="logo-container">
-				  <img src="wp-content/IMS_logo_small.png"
-					id="left-bar-brand"
-					alt="IMS logo"
-				  >
+			<label class="hamburger1">
+			<!-- Burgie wrapper -->
+			<label class="burg-wrap" for="toggle1">
+				<span class="hide-label">Label for input</span>
+				<span class="burg-bars">
+				<span class="hide-label">Label for input</span>
+				<div class="top"></div>
+				<div class="meat"></div>
+				<div class="bottom"></div>
+				</span>
+			</label>
+			</label>
+		
+			<!-- Hamburger drop-down menu options -->
+			<nav class="menu1" aria-label="Dropdown menu items">
+			<div class="pages pure-g">
+				
+				<!-- Learn -->
+				<div class="pure-u-1 pure-u-sm-1-4">
+				<h3>Learn</h3>
+				<!-- cards/pages -->
+				<!-- 1 -->
+				<a title="IMS Videos" href="ims-videos.html" class="nav-item" tabindex="-1">
+					<div class="navcard">
+					<h5>IMS videos</h5>
+					<p>Choose from hundreds of educational videos on IMS components, functions, and tools.</p>
+					</div>
 				</a>
-				<a href="index.html" class="logo-container">
-				  <h4 class="site-header-text">
-					IBM <b>IMS Central</b>
-				  </h4>
+				<!-- 2 -->
+				<a title="IMS Courses" href="ims-education.html" class="nav-item" tabindex="-1">
+					<div class="navcard">
+					<h5>IMS courses</h5>
+					<p>Get in-depth IMS education with these self-paced courses and earn digital badges.</p>
+					</div>
+				</a>
+				<!-- 3 -->
+				<a title="IMS Repos on GitHub" href="ims-repos.html" class="nav-item" tabindex="-1">
+					<div class="navcard">
+					<h5>IMS repos on GitHub</h5>
+					<p>Get code samples and tutorials on IMS components, workflows, Java, and more.</p>
+					</div>
+				</a>
+				</div>
+
+				<!-- Innovate -->
+				<div class="pure-u-1 pure-u-sm-1-4">
+				<h3>Innovate</h3>
+				<!-- cards/pages -->
+				<!-- 1 -->
+				<a title="APIs" href="ims-apis.html" class="nav-item" tabindex="-1"> 
+					<div class="navcard">
+					<h5>APIs</h5>
+					<p>Unlock the value of your IMS applications by making easily consumable APIs in minutes.</p>
+					</div>
+				</a>
+				<!-- 2 -->
+				<a title="DevOps" href="ims-devops.html" class="nav-item" tabindex="-1">
+					<div class="navcard">
+					<h5>Automation</h5>
+					<p>Learn how to automate your IT infrastructure and applications on IBM Z.</p>
+					</div>
+				</a>
+				<!-- 3 -->
+				<a title="Java" href="ims-java.html" class="nav-item" tabindex="-1">
+					<div class="navcard">
+					<h5>Java</h5>
+					<p>Build Java applications to run inside or outside IMS.</p>
+					</div>
+				</a>
+				<!-- 4 -->
+				<a title="Database" href="ims-db.html" class="nav-item" tabindex="-1">
+					<div class="navcard">
+					<h5>IMS Database</h5>
+					<p>IMS Database: fast, secure, reliable.</p>
+					</div>
+				</a>
+				<!-- 5 -->
+				<a title="Transaction Manager" href="ims-tm.html" class="nav-item" tabindex="-1">
+					<div class="navcard">
+						<h5>IMS Transaction Manager</h5>
+						<p>IMS Transaction Manager: fast, secure, connected.</p>
+					</div>
 				</a>
-			  </span>
-			
-			  <!-- Search wrapper -->
-			  <form id="searchbar" aria-label="Search">
-				<div class="tipue_search_right">
-				  <svg id="search-mag" alt="Search magnifying glass" xmlns="http://www.w3.org/2000/svg" width="22px" height="22px" viewBox="0 0 32 32">
-					<defs>
-					  <style> .cls-1 { fill: none; } </style>
-					</defs>
-					<path d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z" transform="translate(0 0)"/>
-					<rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1" width="32" height="32"/>
-				  </svg>
-				  <input type="text" name="q" id="tipue_search_input"
-					pattern=".{3,}" title="Search bar"
-					placeholder="What are you looking for today?" autocomplete="off" required autofocus>
-				  <svg id="search-clr" aria-label="Clear search" role="button" tabindex="0" xmlns="http://www.w3.org/2000/svg" height="15px" viewBox="0 0 329.26933 329" width="15px">
-					<path d="m194.800781 164.769531 128.210938-128.214843c8.34375-8.339844 8.34375-21.824219 0-30.164063-8.339844-8.339844-21.824219-8.339844-30.164063 0l-128.214844 128.214844-128.210937-128.214844c-8.34375-8.339844-21.824219-8.339844-30.164063 0-8.34375 8.339844-8.34375 21.824219 0 30.164063l128.210938 128.214843-128.210938 128.214844c-8.34375 8.339844-8.34375 21.824219 0 30.164063 4.15625 4.160156 9.621094 6.25 15.082032 6.25 5.460937 0 10.921875-2.089844 15.082031-6.25l128.210937-128.214844 128.214844 128.214844c4.160156 4.160156 9.621094 6.25 15.082032 6.25 5.460937 0 10.921874-2.089844 15.082031-6.25 8.34375-8.339844 8.34375-21.824219 0-30.164063zm0 0"/>
-				  </svg>
 				</div>
-			  </form>
-	
-			  <!-- On page-load activation -->
-			  <script>
-				$(document).ready(function() {
-				  $('#tipue_search_input').tipuesearch();
-				});
-			  </script>
-	
-			  <!-- Search drop-down -->
-			  <div id="tipue_search_content" class="search_content search-dropdown"></div>
-	
-			  <!-- Hamburger drop-down menu -->
-			  <input type="checkbox" tabindex="0" id="toggle1" class="support-enter" aria-label="Hamburger Menu"/>
-			  
-			  <label class="hamburger1">
-				<!-- Burgie wrapper -->
-				<label class="burg-wrap" for="toggle1">
-				  <span class="hide-label">Label for input</span>
-				  <span class="burg-bars">
-					<span class="hide-label">Label for input</span>
-					<div class="top"></div>
-					<div class="meat"></div>
-					<div class="bottom"></div>
-				  </span>
-				</label>
-			  </label>
 			
-			  <!-- Hamburger drop-down menu options -->
-			  <nav class="menu1" aria-label="Dropdown menu items">
-				<div class="pages pure-g">
-					
-					<!-- Learn -->
-				  <div class="pure-u-1 pure-u-sm-1-4">
-					<h3>Learn</h3>
-					<!-- cards/pages -->
-					<!-- 1 -->
-					<a title="IMS Videos" href="ims-videos.html" class="nav-item" tabindex="-1">
-					  <div class="navcard">
-						<h5>IMS videos</h5>
-						<p>Choose from hundreds of educational videos on IMS components, functions, and tools.</p>
-					  </div>
-					</a>
-					<!-- 2 -->
-					<a title="IMS Courses" href="ims-education.html" class="nav-item" tabindex="-1">
-					  <div class="navcard">
-						<h5>IMS courses</h5>
-						<p>Get in-depth IMS education with these self-paced courses and earn digital badges.</p>
-					  </div>
-					</a>
-					<!-- 3 -->
-					<a title="IMS Repos on GitHub" href="ims-repos.html" class="nav-item" tabindex="-1">
-					  <div class="navcard">
-						<h5>IMS repos on GitHub</h5>
-						<p>Get code samples and tutorials on IMS components, workflows, Java, and more.</p>
-					  </div>
-					</a>
-				  </div>
-
-				  <!-- Innovate -->
-				  <div class="pure-u-1 pure-u-sm-1-4">
-					<h3>Innovate</h3>
-					<!-- cards/pages -->
-					<!-- 1 -->
-					<a title="APIs" href="ims-apis.html" class="nav-item" tabindex="-1"> 
-					  <div class="navcard">
-						<h5>APIs</h5>
-						<p>Unlock the value of your IMS applications by making easily consumable APIs in minutes.</p>
-					  </div>
-					</a>
-					<!-- 2 -->
-					<a title="DevOps" href="ims-devops.html" class="nav-item" tabindex="-1">
-					  <div class="navcard">
-						<h5>Automation</h5>
-						<p>Learn how to automate your IT infrastructure and applications on IBM Z.</p>
-					  </div>
-					</a>
-					<!-- 3 -->
-					<a title="Java" href="ims-java.html" class="nav-item" tabindex="-1">
-					  <div class="navcard">
-						<h5>Java</h5>
-						<p>Build Java applications to run inside or outside IMS.</p>
-					  </div>
-					</a>
-					<!-- 4 -->
-					<a title="Database" href="ims-db.html" class="nav-item" tabindex="-1">
-					  <div class="navcard">
-						<h5>IMS Database</h5>
-						<p>IMS Database: fast, secure, reliable.</p>
-					  </div>
-					</a>
-					<!-- 5 -->
-					<a title="Transaction Manager" href="ims-tm.html" class="nav-item" tabindex="-1">
-						<div class="navcard">
-							<h5>IMS Transaction Manager</h5>
-							<p>IMS Transaction Manager: fast, secure, connected.</p>
-						</div>
-					</a>
-				  </div>
-			  
-				  <!-- Engage -->
-				  <div class="pure-u-1 pure-u-sm-1-4">
-					<h3>Engage</h3>
-					<!-- cards/pages -->
-					<!-- 1 -->
-					<a title="Gold" href="ims-gold.html" class="nav-item" tabindex="-1">
-					  <div class="navcard">
-						<h5>IMS Gold</h5>
-						<p>Join the IMS client feedback program for the latest IMS news and engage with other customers.</p>
-					  </div>
-					</a>
-					<!-- 2 -->
-					<a title="IMS Community" class="nav-item" tabindex="-1" target="_blank" rel="noopener noreferrer"
-					  href="https://community.ibm.com/community/user/ibmz-and-linuxone/groups/topic-home?CommunityKey=eba3ada3-db89-4dca-9154-328195f5e560">
-					  <div class="navcard">
-						<h5>IMS community
-						  <img src="wp-content/Icon07.png" alt="External link" style="height: 15px; width: 15px;margin-left:10px"></img>
-						</h5>
-						<p>See the latest IMS blogs, engage in IMS forums, and more by visiting the <b><em>IMS Community</em></b> website.</p>
-					  </div>
+				<!-- Engage -->
+				<div class="pure-u-1 pure-u-sm-1-4">
+				<h3>Engage</h3>
+				<!-- cards/pages -->
+				<!-- 1 -->
+				<a title="Gold" href="ims-gold.html" class="nav-item" tabindex="-1">
+					<div class="navcard">
+					<h5>IMS Gold</h5>
+					<p>Join the IMS client feedback program for the latest IMS news and engage with other customers.</p>
+					</div>
+				</a>
+				<!-- 2 -->
+				<a title="IMS Community" class="nav-item" tabindex="-1" target="_blank" rel="noopener noreferrer"
+					href="https://community.ibm.com/community/user/ibmz-and-linuxone/groups/topic-home?CommunityKey=eba3ada3-db89-4dca-9154-328195f5e560">
+					<div class="navcard">
+					<h5>IMS community
+						<img src="wp-content/Icon07.png" alt="External link" style="height: 15px; width: 15px;margin-left:10px"></img>
+					</h5>
+					<p>See the latest IMS blogs, engage in IMS forums, and more by visiting the <b><em>IMS Community</em></b> website.</p>
+					</div>
+				</a>
+				<!-- 3 -->
+				<a title="Advocates and ideas" href="ims-advocacy.html" class="nav-item" tabindex="-1">
+					<div class="navcard">
+						<h5>Advocates and ideas</h5>
+						<p>Get an IMS advocate to represent you and learn how to submit ideas to the IMS team.</p>
+					</div>
 					</a>
-					<!-- 3 -->
-					<a title="Advocates and ideas" href="ims-advocacy.html" class="nav-item" tabindex="-1">
-						<div class="navcard">
-						  <h5>Advocates and ideas</h5>
-						  <p>Get an IMS advocate to represent you and learn how to submit ideas to the IMS team.</p>
-						</div>
-					  </a>
-					<!-- 4 -->
-					<a title="IMS Internship" href="ims-internship-2025.html" class="nav-item" tabindex="-1">
-						<div class="navcard">
-							<h5>IMS Customer Internship</h5>
-							<p>Register for the May 2025 event today.</p>
+				<!-- 4 -->
+				<a title="IMS Internship" href="ims-internship-2025.html" class="nav-item" tabindex="-1">
+					<div class="navcard">
+						<h5>IMS Customer Internship</h5>
+						<p>Register for the May 2025 event today.</p>
+					</div>
+				</a>
+				</div>
+			
+				<!-- Docs & Support -->
+				<div class="pure-u-1 pure-u-sm-1-4">
+				<h3>
+					Documentation & support
+				</h3>
+				<!-- cards/pages -->
+				<!-- 1 -->
+				<a title="IMS Docs" href="ims-docs.html" class="nav-item" tabindex="-1">
+					<div class="navcard">
+					<h5>IMS documentation</h5>
+					<p>Find information on IMS, tools, and other IBM products.</p>
+					</div>
+				</a>
+				<!-- 2 -->
+				<a title="IMS Support" href="ims-support.html" class="nav-item" tabindex="-1">
+					<div class="navcard">
+					<h5>IMS support</h5>
+					<p>Get help with IMS or other IBM products.</p>
+					</div>
+				</a>
+				</div>
+			</div>
+			</nav>
+		</section>
+		</header>
+	</div>
+
+	<div id="content" class="main-content">
+		<!-- MAIN CONTENT -->
+		<main id="main">
+			<!-- =========================== Hero =========================== -->
+			<section class="learn-bg">
+				<div id="intro-section" class="pure-g hero">
+					<div class="pure-u-1 pure-u-md-1-24">
+						<img src="wp-content/course.svg" alt="" class="icon icon-xl">
+					</div>
+					<div class="pure-u-1 pure-u-md-23-24">
+						<h6>Learn</h6>
+						<h1>IMS courses</h1>
+						<p>Get comprehensive IMS™ education by taking these self-paced, digital courses.</p>
+						<p class="subtext">You can also earn a digital badge!</p>
+						<div class="button-g">
+							<a class="button button-primary" 
+							onfocus="closeNavMenu()" 
+							target="_blank"
+							aria-label="Sign up for an IBM ID to enroll in IMS courses" 
+							href="https://login.ibm.com/authsvc/mtfim/sps/authsvc?PolicyId=urn:ibm:security:authentication:asf:basicldapuser&Target=https%3A%2F%2Flogin.ibm.com%2Foidc%2Fendpoint%2Fdefault%2Fauthorize%3FqsId%3D9fe3fe66-c22f-4c7b-8e5d-01dfc0e8defa%26client_id%3DMyIBMDallasProdCI" 
+							rel="noopener noreferrer">
+							Sign up for an IBM ID →
+							</a>
 						</div>
-					</a>
-				  </div>
-			  
-				  <!-- Docs & Support -->
-				  <div class="pure-u-1 pure-u-sm-1-4">
-					<h3>
-					  Documentation & support
-					</h3>
-					<!-- cards/pages -->
-					<!-- 1 -->
-					<a title="IMS Docs" href="ims-docs.html" class="nav-item" tabindex="-1">
-					  <div class="navcard">
-						<h5>IMS documentation</h5>
-						<p>Find information on IMS, tools, and other IBM products.</p>
-					  </div>
-					</a>
-					<!-- 2 -->
-					<a title="IMS Support" href="ims-support.html" class="nav-item" tabindex="-1">
-					  <div class="navcard">
-						<h5>IMS support</h5>
-						<p>Get help with IMS or other IBM products.</p>
-					  </div>
-					</a>
-				  </div>
+					</div>
 				</div>
-			  </nav>
 			</section>
-		  </header>
-		</div>
 
-		<!-- Additional styling for content after navigation -->
-		<head>
-			<link rel="stylesheet" type="text/css" href="wp-includes/css/pure.css">
-			<link rel="stylesheet" href="wp-includes/css/grids-responsive-min.css">
-			<link rel="stylesheet" type="text/css" href="wp-includes/css/homepage.css">
-		</head>
-
-		<div id="content" class="site-content">
-			<div class="content-area" id="content-area">
-				<div class="entry-content">
-					<!-- MAIN CONTENT -->
-					<main class="zs-main" id="main">
-
-						<div>	
-							<!-- =========================== IMS Courses banner =========================== -->
-							<div class="banner learn-bg ed-banner">
-								<section id="intro-section" class="pure-g zs-section intro-sec">
-									<div id="intro-header" class="pure-u-1"></div>
-									<div class="pure-u-3-25">
-										<img class="ims-card-icon" src="wp-content/course.svg" alt="">
-									</div>
-									<div id="intro-info" class="pure-u-1 pure-u-sm-1-2">
-										<h6>Learn</h6>
-										<h1>IMS courses</h1>
-										<p id="p-style">Get comprehensive IMS™ education by taking these self-paced, digital courses.</p>
-										<p class="intro-p-sub">You can also earn a digital badge!</p>
-										<div class="pure-u-1 intro-button">
-											<a class="zs-w-button-transparent" onfocus="closeNavMenu()" aria-label="Sign up for an IBM ID to enroll in IMS courses"
-												href="https://login.ibm.com/authsvc/mtfim/sps/authsvc?PolicyId=urn:ibm:security:authentication:asf:basicldapuser&Target=https%3A%2F%2Flogin.ibm.com%2Foidc%2Fendpoint%2Fdefault%2Fauthorize%3FqsId%3D9fe3fe66-c22f-4c7b-8e5d-01dfc0e8defa%26client_id%3DMyIBMDallasProdCI" target="_blank" rel="noopener noreferrer">
-												Sign up for an IBM ID →
-											</a>
-										</div>
-									</div>
-								</section>
+			<!-- =========================== Row for filtering =========================== -->
+			<div class="zs-section ed-filter">
+				<div class="pure-g">
+					<!-- Filter list -->
+					<div class="ibm-sitenav-menu-list ed-filter-list">
+						<ul class="menu">
+							<li><a href="#all">All roles</a></li>
+							<li><a href="#imsdb">IMS database</a></li>
+							<li><a href="#sysprog">System programming</a></li>
+							<li><a href="#appdev">Application development</a></li>
+							<li><a href="#faq">FAQs</a></li>
+							<li><a href="#support">Support</a></li>
+						</ul>
+					</div>
+				</div>
+			</div>
+
+			<!-- =========================== Courses - all roles =========================== -->
+			<section id="all" class="white-bg card-section">
+				<div class="card-section-header"><h2>All roles</h2></div>
+					<!-- IMS Fundamentals, with live course -->
+					<!-- <course-card
+						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/course-badges/badge_ims_fundamentals.png"
+						level="Beginner"
+						cost="None"
+						badge="Yes"
+						time="32 hours"
+						link="https://learn.ibm.com/course/view.php?id=8829"
+						livelevel="Beginner"
+						livecost="$"
+						livebadge="No"
+						livetime="30 hours"
+						livelink="https://learn.ibm.com/course/view.php?id=8829"
+					>
+					</course-card> -->
+
+					<!-- IMS Fundamentals, no live course -->
+					<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/course-badges/badge_ims_fundamentals.png"
+						level="Beginner"
+						cost="None"
+						badge="Yes"
+						time="32 hours"
+						link="https://learn.ibm.com/course/view.php?id=8829"
+					>
+					</course-card>
+
+					<!-- PL/I Programming -->
+					<course-card
+						id="ims-intro-pli"
+						name="Introduction to the PL/I Programming Language"
+						desc="In this 8-hour, introductory course, you’ll learn about the parallels and differences 
+							between C and PL/I, particularly in language syntax, program structure, declarations, 
+							loops, data types, arrays, structures, and more."
+						imgsrc="wp-content/course-badges/badge_intro_pli.png"
+						level="Beginner"
+						cost="None"
+						badge="Yes"
+						time="8 hours"
+						link="https://www.ibm.com/training/course/introduction-to-the-pli-programming-language-DL00964G"
+					>
+					</course-card>	
+			</section>
+
+			<!-- =========================== Courses - IMS database =========================== -->
+			<section id="imsdb" class="white-bg card-section">
+				<div class="card-section-header"><h2>IMS database</h2></div>
+					<!-- Logical Relationships -->
+					<course-card
+						name="IMS Logical Relationships"
+						desc="Logical relationships establish a logical access paths between segments that 
+							are usually in different databases. In this course, you’ll learn how to code 
+							the DBDs and PSBs for IMS databases involved in logical relationships, adjust 
+							the performance of these databases, and review IMS Monitor reports to see whether 
+							the logical relationships are effective."
+						imgsrc="wp-content/course-badges/badge_log_rel.png"
+						level="Advanced"
+						cost="None"
+						badge="Yes"
+						time="30 hours"
+						link="https://www.ibm.com/training/course/ims-logical-relationships-DL00966G"
+						class="pure-u-1"
+					>
+					</course-card>	
+
+					<!-- Database Fundamentals -->
+					<course-card
+						id="ims-dbfund"
+						name="IMS Database Fundamentals"
+						desc="Learn about IMS databases, including the structure of database records, 
+							how those records are accessed, DBDs, PSBs, DL/I calls, 
+							secondary indexes, logical relationships, database types, 
+							access methods, database recovery, and more."
+						imgsrc="wp-content/course-badges/badge_ims_db_fundamentals.png"
+						level="Beginner"
+						cost="None"
+						badge="Yes"
+						time="24 hours"
+						link="https://learn.ibm.com/course/view.php?id=10118"
+						class="pure-u-1"
+					>
+					</course-card>	
+
+					<!-- DBRC -->
+					<course-card
+						id="ims-dbrc"
+						name="IMS Database Recovery Control (DBRC)"
+						desc="IMS DBRC, which is a feature of the IMS Database Manager, helps with the recovery of IMS databases.
+							In this comprehensive course, you'll learn how to install, customize, administer, and maintain DBRC. 
+							This course is for experienced IMS system programmers and database administrators who need to work with 
+							DBRC."
+						imgsrc="wp-content/course-badges/badge_dbrc.png"
+						level="Intermediate"
+						cost="None"
+						badge="Yes"
+						time="32 hours"
+						link="https://learn.ibm.com/course/view.php?id=12150"
+						class="pure-u-1"
+					>
+					</course-card>	
+
+					<!-- Data Sharing -->
+					<course-card
+						id="ims-datashare"
+						name="IMS Data Sharing"
+						desc="When more than one IMS system has concurrent access to an IMS database, those systems are sharing data. 
+							In this advanced course, you'll learn about IMS data sharing capabilities, how multiple 
+							IMS systems on different LPARs and processors can access and update the same databases 
+							with complete integrity, and how to implement and maintain a data sharing environment."
+						imgsrc="wp-content/course-badges/badge_ims_data_sharing.png"
+						level="Advanced"
+						cost="None"
+						badge="Yes"
+						time="12 hours"
+						link="https://learn.ibm.com/course/view.php?id=11499"
+						class="pure-u-1"
+					>
+					</course-card>	
+
+					<!-- HALDB -->
+					<course-card
+						id="ims-haldb"
+						name="IMS HALDB"
+						desc="In this intermediate course, you’ll learn how to design, implement, 
+							maintain, troubleshoot, and recover IMS High Availability Large Databases (HALDBs). 
+							You’ll learn how other IMS databases can be migrated to HALDB and the advantages of using HALDBs.
+							This is an intermediate course for experienced IMS database administrators who implement and manage HALDBs."
+						imgsrc="wp-content/course-badges/badge_haldb.png"
+						level="Intermediate"
+						cost="None"
+						badge="Yes"
+						time="10 hours"
+						link="https://learn.ibm.com/course/view.php?id=12157"
+						class="pure-u-1"
+					>
+					</course-card>
+
+					<!-- Fast Path -->
+					<course-card
+						id="ims-fpimpl"
+						name="IMS Fast Path Implementation"
+						desc="This is an advanced course for IBM IMS system administrators, database administrators, 
+							and application programmers who design or implement IMS Fast Path applications in an 
+							IMS Transaction Management (TM) or IBM CICS Database Control (DBCTL) environment."
+						imgsrc="wp-content/course-badges/bacge_fp_implementation.png"
+						level="Advanced"
+						cost="None"
+						badge="Yes"
+						time="18 hours"
+						link="https://learn.ibm.com/course/view.php?id=9907"
+						class="pure-u-1"
+					>
+					</course-card>
+
+					<!-- Database Repair -->
+					<course-card
+						id="ims-db-repair"
+						name="IMS Database Repair"
+						desc="This advanced course shows you techniques and tools for diagnosing 
+							and repairing corrupted IMS databases, including full-function, 
+							DEDB, and HALDB. To do that, you’ll need to understand 
+							database access methods, secondary indexes, database layouts, 
+							control interval (CI) layouts, sequential dependents (SDEPs), 
+							and other database components, features, and structures."
+						imgsrc="wp-content/course-badges/badge_db_repair.png"
+						level="Advanced"
+						cost="None"
+						badge="Yes"
+						time="11 hours"
+						link="https://www.ibm.com/training/course/ims-database-repair-DL00963G"
+						class="pure-u-1"
+					>
+					</course-card>	
+
+					<!-- Database Performance and Tuning -->
+					<course-card
+						id="ims-db-tune"
+						name="IMS Database Performance and Tuning"
+						desc="This course shows you how to tune IBM® IMS™ databases. 
+							It also discusses IMS database options that affect performance such as data set considerations 
+							and buffering for Virtual Storage Access Method (VSAM) and Overflow Sequential Access Method 
+							(OSAM) databases"
+						imgsrc="wp-content/course-badges/badge_perf_tuning.png"
+						level="Advanced"
+						cost="None"
+						badge="Yes"
+						time="36 hours"
+						link="https://learn.ibm.com/course/view.php?id=12404"
+						class="pure-u-1"
+					>
+					</course-card>	
+
+					<!-- Physical Organization of Databases -->
+					<course-card
+						id="ims-phys-db"
+						name="IMS Physical Organization of Databases"
+						desc="In this comprehensive course, you’ll learn about IMS DB access methods, 
+							how to code DBDs and PSBs, use IMS utilities to reorganize and recover 
+							databases,  use the DL/I test program, and how to prepare a job stream 
+							to load a database."
+						imgsrc="wp-content/course-badges/badge_physical_org_db.png"
+						level="Intermediate"
+						cost="None"
+						badge="Yes"
+						time="33 hours"
+						link="https://www.ibm.com/training/course/ims-physical-organization-of-databases-DL00965G"
+						class="pure-u-1"
+					>
+					</course-card>	
+			</section>
+
+			<!-- =========================== Courses - System programming =========================== -->
+			<section id="sysprog" class="white-bg card-section">
+				<div class="card-section-header"><h2>System programming</h2></div>
+					<!-- System Programming -->
+					<course-card
+						id="ims-dmtm"
+						name="IMS System Programming"
+						desc="Learn about IMS architecture, installation, transaction management, locking, 
+							logging, connecting IMS to IBM CICS® and IBM Db2®, data sharing, shared queues, 
+							preparing and starting the system, and more."
+						imgsrc="wp-content/course-badges/badge_db_tm_sysprog.png"
+						level="Intermediate"
+						cost="None"
+						badge="Yes"
+						time="13 hours"
+						link="https://learn.ibm.com/course/view.php?id=10973"
+						class="pure-u-1"
+					>
+					</course-card>	
+
+					<!-- Diagnostics -->
+					<course-card
+						id="ims-diagnostics"
+						name="IMS Diagnostics"
+						desc="Learn about the relationships between IMS components so that you can explain IBM's recommendations for IMS
+							diagnostic setup. Learn how to use the IMS Interactive Dump Formatter, identify the key z/OS® IPCS commands
+							that are useful for IMS problem diagnostics, perform the methodology for debugging IMS abends, and understand the
+							methodology for debugging IMS waits and loops."
+						imgsrc="wp-content/course-badges/badge_ims_diagnostics.png"
+						level="Intermediate"
+						cost="None"
+						badge="Yes"
+						time="10 hours"
+						link="https://learn.ibm.com/course/view.php?id=7405"
+						class="pure-u-1"
+					>
+					</course-card>		
+					
+					<!-- Shared Queues -->
+					<course-card
+						id="ims-squeues"
+						name="IMS Shared Queues"
+						desc="Learn how shared message queues work in IBM IMS, and how full-function queues and Fast Path expedited message handler (EMH) queues 
+							are shared within a parallel sysplex environment. Learn how to prepare and implement IMS shared queues 
+							and manage and troubleshoot an IMS shared queues environment."
+						imgsrc="wp-content/course-badges/badge_ims_shared_queues.png"
+						level="Intermediate"
+						cost="None"
+						badge="Yes"
+						time="17 hours"
+						link="https://learn.ibm.com/course/view.php?id=9359"
+						class="pure-u-1"
+					>
+					</course-card>		
+					
+					<!-- TM Performance Analysis -->
+					<course-card
+						id="ims-tm-performance"
+						name="IMS TM Performance Analysis"
+						desc="In this advanced course, you'll learn how to use and adjust IMS 
+							Transaction Manager (IMS TM), other components in the IMS system, and z/OS 
+							components, commands, processes, parameters, and more to ensure that the 
+							IMS TM system is running as efficiently as possible."
+						imgsrc="wp-content/course-badges/badge_ims_tm_tuning.png"
+						level="Advanced"
+						cost="None"
+						badge="Yes"
+						time="11 hours"
+						link="https://www.ibm.com/training/course/ims-transaction-manager-performance-analysis-DL00962G"
+						class="pure-u-1"
+					>
+					</course-card>	
+
+					<!-- System Programming in a DBCTL Environment -->
+					<course-card
+						id="ims-dbctl"
+						name="IMS System Programming in a DBCTL Environment"
+						desc="Learn about the IMS database control (DBCTL) environment, which provides access between CICS and
+							IMS-managed databases. Learn  how to install, configure, maintain, troubleshoot, and support
+							an IMS DBCTL system, and understand the IMS architecture that applies to database management and attaching 
+							to CICS systems and transactions."
+						imgsrc="wp-content/course-badges/badge_ims_dbctl.png"
+						level="Intermediate"
+						cost="None"
+						badge="Yes"
+						time="12 hours"
+						link="https://learn.ibm.com/course/view.php?id=8352"
+						class="pure-u-1"
+					>
+					</course-card>
+			</section>
+
+			<!-- =========================== Courses - Application development =========================== -->
+			<section id="appdev" class="white-bg card-section">
+				<div class="card-section-header"><h2>Application development</h2></div>
+					<!-- TM Application Programming -->
+					<course-card
+						id="ims-tm-prog"
+						name="IMS TM Application Programming"
+						desc="This course shows you through lectures and lab demos how to write
+							application programs that use Data Language One (DL/I) to process
+							terminal input and output messages in an IMS Transaction manager system.
+							This course does not teach basic COBOL or PL/I. You should already have 
+							experience developing applications with one or both of those languages."
+						imgsrc="wp-content/course-badges/badge_tm_app_prog.png"
+						level="Intermediate"
+						cost="None"
+						badge="Yes"
+						time="14 hours"
+						link="https://learn.ibm.com/course/view.php?id=13017"
+						class="pure-u-1"
+					>
+					</course-card>
+
+					<!-- DB Application Programming -->
+					<course-card
+						id="ims-db-prog"
+						name="IMS Database Application Programming"
+						desc="In this course, you'll learn how to code application programs that perform processing
+							on IMS database records. You'll learn about the hierarchic structure of IMS databases,
+							how to construct DL/I calls, how to test your applications, and more."
+						imgsrc="wp-content/course-badges/badge_db_app_prog.png"
+						level="Intermediate"
+						cost="None"
+						badge="Yes"
+						time="20 hours"
+						link="https://learn.ibm.com/course/view.php?id=12691"
+						class="pure-u-1"
+					>
+					</course-card>
+			</section>
+
+			<!-- =========================== FAQ =========================== -->
+			<div class="gray-bg">
+				<section id="faq-section"class="zs-section pure-g">
+					<!-- Header -->
+					<div class="pure-u-1 pure-u-md-5-24 faq-title">
+						<h2 id="faq">Frequently asked questions</h2>
+					</div>
+					<!-- Contents -->
+					<div class="pure-u-sm-1 pure-u-md-18-24">
+
+						<div class="pure-u-1" style="margin-bottom:25px;">
+							<p>Have questions about IMS courses, or the badge program? Here are 
+								some quick answers that can help you.</p>
+						</div>
+
+						<!-- row1 -->
+						<div class="pure-u-1">
+							<div class="pure-u-1 pure-u-md-5-12">
+								<h4 class="faq-q">How do I earn a badge?</h4>
+								<p>Courses that offer badges include one or more exams. 
+									You must pass those exams and complete required activities. 
+									See the "Grading and badge" topic in the course to see the grading policy and how exams are graded.</p>
 							</div>
+							<div class="pure-u-1 pure-u-md-1-12"></div>
 
-							<!-- =========================== Row for filtering =========================== -->
-							<!-- remember, the behaviour is that clicking pulls you to the anchors -->
-							<div class="zs-section ed-filter">
-								<div class="pure-g">
-									<!-- Filter list -->
-									<div class="ibm-sitenav-menu-list ed-filter-list">
-										<ul class="menu">
-											<li><a href="#all">All roles</a></li>
-											<li><a href="#imsdb">IMS database</a></li>
-											<li><a href="#sysprog">System programming</a></li>
-											<li><a href="#appdev">Application development</a></li>
-											<li><a href="#faq">FAQs</a></li>
-											<li><a href="#support">Support</a></li>
-										</ul>
-									</div>
-								</div>
+							<div class="pure-u-1 pure-u-md-5-12">
+								<h4 class="faq-q">If I pass the course, when do I get the badge?</h4>
+								<p>Badges are typically issued automatically after you meet the course requirements and grading policy. You should get an email notification of receiving the badge in one to four days.</p>
 							</div>
 						</div>
+						<!-- row2 -->
+						<div class="pure-u-1">
+							<div class="pure-u-1 pure-u-md-5-12">
+								<h4 class="faq-q">Whom do I contact if I have problems with course content?</h4>
+								<p>You can contact the IMS Education team at <a href="mailto:ibmimsom@us.ibm.com">ibmimsom@us.ibm.com</a>.</p>
+							</div>
+							<div class="pure-u-1 pure-u-md-1-12"></div>
 
-						<!-- =========================== Badges & courses  =========================== -->
-						<div class="zs-gray-section zs-white-section courses-sec">
-							<section id="courses-section" class="zs-section pure-g">
-								<div class="pure-u-22-24 courses-sec-space">
-
-									<!-- ALL ROLES header -->
-									<h2 id="all">All roles</h2>
-
-									<!-- IMS Fundamentals, with live course -->
-									<!-- <course-card
-										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/course-badges/badge_ims_fundamentals.png"
-										level="Beginner"
-										cost="None"
-										badge="Yes"
-										time="32 hours"
-										link="https://learn.ibm.com/course/view.php?id=8829"
-										livelevel="Beginner"
-										livecost="$"
-										livebadge="No"
-										livetime="30 hours"
-										livelink="https://learn.ibm.com/course/view.php?id=8829"
-									>
-									</course-card> -->
-
-									<!-- IMS Fundamentals, no live course -->
-									<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/course-badges/badge_ims_fundamentals.png"
-										level="Beginner"
-										cost="None"
-										badge="Yes"
-										time="32 hours"
-										link="https://learn.ibm.com/course/view.php?id=8829"
-									>
-									</course-card>
-
-									<!-- PL/I Programming -->
-									<course-card
-										id="ims-intro-pli"
-										name="Introduction to the PL/I Programming Language"
-										desc="In this 8-hour, introductory course, you’ll learn about the parallels and differences 
-											between C and PL/I, particularly in language syntax, program structure, declarations, 
-											loops, data types, arrays, structures, and more."
-										imgsrc="wp-content/course-badges/badge_intro_pli.png"
-										level="Beginner"
-										cost="None"
-										badge="Yes"
-										time="8 hours"
-										link="https://www.ibm.com/training/course/introduction-to-the-pli-programming-language-DL00964G"
-									>
-									</course-card>	
-
-									<!-- DB header -->
-									<h2 id="imsdb" style="color: black;margin-left: 16px;">IMS database</h2>
-
-									<!-- Logical Relationships -->
-									<course-card
-										name="IMS Logical Relationships"
-										desc="Logical relationships establish a logical access paths between segments that 
-											are usually in different databases. In this course, you’ll learn how to code 
-											the DBDs and PSBs for IMS databases involved in logical relationships, adjust 
-											the performance of these databases, and review IMS Monitor reports to see whether 
-											the logical relationships are effective."
-										imgsrc="wp-content/course-badges/badge_log_rel.png"
-										level="Advanced"
-										cost="None"
-										badge="Yes"
-										time="30 hours"
-										link="https://www.ibm.com/training/course/ims-logical-relationships-DL00966G"
-										class="pure-u-1"
-									>
-									</course-card>	
-
-									<!-- Database Fundamentals -->
-									<course-card
-										id="ims-dbfund"
-										name="IMS Database Fundamentals"
-										desc="Learn about IMS databases, including the structure of database records, 
-											how those records are accessed, DBDs, PSBs, DL/I calls, 
-											secondary indexes, logical relationships, database types, 
-											access methods, database recovery, and more."
-										imgsrc="wp-content/course-badges/badge_ims_db_fundamentals.png"
-										level="Beginner"
-										cost="None"
-										badge="Yes"
-										time="24 hours"
-										link="https://learn.ibm.com/course/view.php?id=10118"
-										class="pure-u-1"
-									>
-									</course-card>	
-
-									<!-- DBRC -->
-									<course-card
-										id="ims-dbrc"
-										name="IMS Database Recovery Control (DBRC)"
-										desc="IMS DBRC, which is a feature of the IMS Database Manager, helps with the recovery of IMS databases.
-											In this comprehensive course, you'll learn how to install, customize, administer, and maintain DBRC. 
-											This course is for experienced IMS system programmers and database administrators who need to work with 
-											DBRC."
-										imgsrc="wp-content/course-badges/badge_dbrc.png"
-										level="Intermediate"
-										cost="None"
-										badge="Yes"
-										time="32 hours"
-										link="https://learn.ibm.com/course/view.php?id=12150"
-										class="pure-u-1"
-									>
-									</course-card>	
-
-									<!-- Data Sharing -->
-									<course-card
-										id="ims-datashare"
-										name="IMS Data Sharing"
-										desc="When more than one IMS system has concurrent access to an IMS database, those systems are sharing data. 
-											In this advanced course, you'll learn about IMS data sharing capabilities, how multiple 
-											IMS systems on different LPARs and processors can access and update the same databases 
-											with complete integrity, and how to implement and maintain a data sharing environment."
-										imgsrc="wp-content/course-badges/badge_ims_data_sharing.png"
-										level="Advanced"
-										cost="None"
-										badge="Yes"
-										time="12 hours"
-										link="https://learn.ibm.com/course/view.php?id=11499"
-										class="pure-u-1"
-									>
-									</course-card>	
-
-									<!-- HALDB -->
-									<course-card
-										id="ims-haldb"
-										name="IMS HALDB"
-										desc="In this intermediate course, you’ll learn how to design, implement, 
-											maintain, troubleshoot, and recover IMS High Availability Large Databases (HALDBs). 
-											You’ll learn how other IMS databases can be migrated to HALDB and the advantages of using HALDBs.
-											This is an intermediate course for experienced IMS database administrators who implement and manage HALDBs."
-										imgsrc="wp-content/course-badges/badge_haldb.png"
-										level="Intermediate"
-										cost="None"
-										badge="Yes"
-										time="10 hours"
-										link="https://learn.ibm.com/course/view.php?id=12157"
-										class="pure-u-1"
-									>
-									</course-card>
-
-									<!-- Fast Path -->
-									<course-card
-										id="ims-fpimpl"
-										name="IMS Fast Path Implementation"
-										desc="This is an advanced course for IBM IMS system administrators, database administrators, 
-											and application programmers who design or implement IMS Fast Path applications in an 
-											IMS Transaction Management (TM) or IBM CICS Database Control (DBCTL) environment."
-										imgsrc="wp-content/course-badges/bacge_fp_implementation.png"
-										level="Advanced"
-										cost="None"
-										badge="Yes"
-										time="18 hours"
-										link="https://learn.ibm.com/course/view.php?id=9907"
-										class="pure-u-1"
-									>
-									</course-card>
-
-									<!-- Database Repair -->
-									<course-card
-										id="ims-db-repair"
-										name="IMS Database Repair"
-										desc="This advanced course shows you techniques and tools for diagnosing 
-											and repairing corrupted IMS databases, including full-function, 
-											DEDB, and HALDB. To do that, you’ll need to understand 
-											database access methods, secondary indexes, database layouts, 
-											control interval (CI) layouts, sequential dependents (SDEPs), 
-											and other database components, features, and structures."
-										imgsrc="wp-content/course-badges/badge_db_repair.png"
-										level="Advanced"
-										cost="None"
-										badge="Yes"
-										time="11 hours"
-										link="https://www.ibm.com/training/course/ims-database-repair-DL00963G"
-										class="pure-u-1"
-									>
-									</course-card>	
-
-									<!-- Database Performance and Tuning -->
-									<course-card
-										id="ims-db-tune"
-										name="IMS Database Performance and Tuning"
-										desc="This course shows you how to tune IBM® IMS™ databases. 
-											It also discusses IMS database options that affect performance such as data set considerations 
-											and buffering for Virtual Storage Access Method (VSAM) and Overflow Sequential Access Method 
-											(OSAM) databases"
-										imgsrc="wp-content/course-badges/badge_perf_tuning.png"
-										level="Advanced"
-										cost="None"
-										badge="Yes"
-										time="36 hours"
-										link="https://learn.ibm.com/course/view.php?id=12404"
-										class="pure-u-1"
-									>
-									</course-card>	
-
-									<!-- Physical Organization of Databases -->
-									<course-card
-										id="ims-phys-db"
-										name="IMS Physical Organization of Databases"
-										desc="In this comprehensive course, you’ll learn about IMS DB access methods, 
-											how to code DBDs and PSBs, use IMS utilities to reorganize and recover 
-											databases,  use the DL/I test program, and how to prepare a job stream 
-											to load a database."
-										imgsrc="wp-content/course-badges/badge_physical_org_db.png"
-										level="Intermediate"
-										cost="None"
-										badge="Yes"
-										time="33 hours"
-										link="https://www.ibm.com/training/course/ims-physical-organization-of-databases-DL00965G"
-										class="pure-u-1"
-									>
-									</course-card>	
-
-									<!-- SYS header -->
-									<h2 id="sysprog" style="color: black;margin-left: 16px;">System programming</h2>
-
-									<!-- System Programming -->
-									<course-card
-										id="ims-dmtm"
-										name="IMS System Programming"
-										desc="Learn about IMS architecture, installation, transaction management, locking, 
-											logging, connecting IMS to IBM CICS® and IBM Db2®, data sharing, shared queues, 
-											preparing and starting the system, and more."
-										imgsrc="wp-content/course-badges/badge_db_tm_sysprog.png"
-										level="Intermediate"
-										cost="None"
-										badge="Yes"
-										time="13 hours"
-										link="https://learn.ibm.com/course/view.php?id=10973"
-										class="pure-u-1"
-									>
-									</course-card>	
-
-									<!-- Diagnostics -->
-									<course-card
-										id="ims-diagnostics"
-										name="IMS Diagnostics"
-										desc="Learn about the relationships between IMS components so that you can explain IBM's recommendations for IMS
-											diagnostic setup. Learn how to use the IMS Interactive Dump Formatter, identify the key z/OS® IPCS commands
-											that are useful for IMS problem diagnostics, perform the methodology for debugging IMS abends, and understand the
-											methodology for debugging IMS waits and loops."
-										imgsrc="wp-content/course-badges/badge_ims_diagnostics.png"
-										level="Intermediate"
-										cost="None"
-										badge="Yes"
-										time="10 hours"
-										link="https://learn.ibm.com/course/view.php?id=7405"
-										class="pure-u-1"
-									>
-									</course-card>		
-									
-									<!-- Shared Queues -->
-									<course-card
-										id="ims-squeues"
-										name="IMS Shared Queues"
-										desc="Learn how shared message queues work in IBM IMS, and how full-function queues and Fast Path expedited message handler (EMH) queues 
-											are shared within a parallel sysplex environment. Learn how to prepare and implement IMS shared queues 
-											and manage and troubleshoot an IMS shared queues environment."
-										imgsrc="wp-content/course-badges/badge_ims_shared_queues.png"
-										level="Intermediate"
-										cost="None"
-										badge="Yes"
-										time="17 hours"
-										link="https://learn.ibm.com/course/view.php?id=9359"
-										class="pure-u-1"
-									>
-									</course-card>		
-									
-									<!-- TM Performance Analysis -->
-									<course-card
-										id="ims-tm-performance"
-										name="IMS TM Performance Analysis"
-										desc="In this advanced course, you'll learn how to use and adjust IMS 
-											Transaction Manager (IMS TM), other components in the IMS system, and z/OS 
-											components, commands, processes, parameters, and more to ensure that the 
-											IMS TM system is running as efficiently as possible."
-										imgsrc="wp-content/course-badges/badge_ims_tm_tuning.png"
-										level="Advanced"
-										cost="None"
-										badge="Yes"
-										time="11 hours"
-										link="https://www.ibm.com/training/course/ims-transaction-manager-performance-analysis-DL00962G"
-										class="pure-u-1"
-									>
-									</course-card>	
-	
-									<!-- System Programming in a DBCTL Environment -->
-									<course-card
-										id="ims-dbctl"
-										name="IMS System Programming in a DBCTL Environment"
-										desc="Learn about the IMS database control (DBCTL) environment, which provides access between CICS and
-											IMS-managed databases. Learn  how to install, configure, maintain, troubleshoot, and support
-											an IMS DBCTL system, and understand the IMS architecture that applies to database management and attaching 
-											to CICS systems and transactions."
-										imgsrc="wp-content/course-badges/badge_ims_dbctl.png"
-										level="Intermediate"
-										cost="None"
-										badge="Yes"
-										time="12 hours"
-										link="https://learn.ibm.com/course/view.php?id=8352"
-										class="pure-u-1"
-									>
-									</course-card>	
-
-									<!-- APPDEV header -->
-									<h2 id="appdev" style="color: black;margin-left: 16px;">Application development</h2>
-
-									<!-- TM Application Programming -->
-									<course-card
-										id="ims-tm-prog"
-										name="IMS TM Application Programming"
-										desc="This course shows you through lectures and lab demos how to write
-											application programs that use Data Language One (DL/I) to process
-											terminal input and output messages in an IMS Transaction manager system.
-											This course does not teach basic COBOL or PL/I. You should already have 
-											experience developing applications with one or both of those languages."
-										imgsrc="wp-content/course-badges/badge_tm_app_prog.png"
-										level="Intermediate"
-										cost="None"
-										badge="Yes"
-										time="14 hours"
-										link="https://learn.ibm.com/course/view.php?id=13017"
-										class="pure-u-1"
-									>
-									</course-card>
-
-									<!-- DB Application Programming -->
-									<course-card
-										id="ims-db-prog"
-										name="IMS Database Application Programming"
-										desc="In this course, you'll learn how to code application programs that perform processing
-											on IMS database records. You'll learn about the hierarchic structure of IMS databases,
-											how to construct DL/I calls, how to test your applications, and more."
-										imgsrc="wp-content/course-badges/badge_db_app_prog.png"
-										level="Intermediate"
-										cost="None"
-										badge="Yes"
-										time="20 hours"
-										link="https://learn.ibm.com/course/view.php?id=12691"
-										class="pure-u-1"
-									>
-									</course-card>
-
-								</div>
-							</section>
-						</div>	
-
-						<!-- =========================== FAQ =========================== -->
-						<div class="zs-gray-section">
-							<section id="faq-section"class="zs-section pure-g">
-								<!-- Header -->
-								<div class="pure-u-1 pure-u-md-5-24 faq-title">
-									<h2 id="faq">Frequently asked questions</h2>
-								</div>
-								<!-- Contents -->
-								<div class="pure-u-sm-1 pure-u-md-18-24">
-
-									<div class="pure-u-1" style="margin-bottom:25px;">
-										<p>Have questions about IMS courses, or the badge program? Here are 
-											some quick answers that can help you.</p>
-									</div>
-
-									<!-- row1 -->
-									<div class="pure-u-1">
-										<div class="pure-u-1 pure-u-md-5-12">
-											<h4 class="faq-q">How do I earn a badge?</h4>
-											<p>Courses that offer badges include one or more exams. 
-												You must pass those exams and complete required activities. 
-												See the "Grading and badge" topic in the course to see the grading policy and how exams are graded.</p>
-										</div>
-										<div class="pure-u-1 pure-u-md-1-12"></div>
-
-										<div class="pure-u-1 pure-u-md-5-12">
-											<h4 class="faq-q">If I pass the course, when do I get the badge?</h4>
-											<p>Badges are typically issued automatically after you meet the course requirements and grading policy. You should get an email notification of receiving the badge in one to four days.</p>
-										</div>
-									</div>
-									<!-- row2 -->
-									<div class="pure-u-1">
-										<div class="pure-u-1 pure-u-md-5-12">
-											<h4 class="faq-q">Whom do I contact if I have problems with course content?</h4>
-											<p>You can contact the IMS Education team at <a href="mailto:ibmimsom@us.ibm.com">ibmimsom@us.ibm.com</a>.</p>
-										</div>
-										<div class="pure-u-1 pure-u-md-1-12"></div>
-
-										<div class="pure-u-1 pure-u-md-5-12">
-											<h4 class="faq-q">Where can I find more information about digital badges?</h4>
-											<p>For more information about badges, see <a 
-												target="_blank" rel="noopener noreferrer" href="https://www.ibm.com/training/credentials/faq">Frequently asked questions</a> on IBM Training.</p>
-										</div>
-									</div>
-									<!-- row3 -->
-									<div class="pure-u-1">
-										<div class="pure-u-1 pure-u-md-5-12">
-											<h4 class="faq-q">Credly Support</h4>
-											<p>For questions related to your Credly badge earner account and 
-												profile, as well as issues related to claiming your badge after receiving a notification,
-												go to <a target="_blank" rel="noopener noreferrer" href="https://support.credly.com/hc/en-us">support.credly.com</a>.</p>
-										</div>
-										<div class="pure-u-1 pure-u-md-1-12"></div>
-
-										<div class="pure-u-1 pure-u-md-5-12">
-											<!-- <p>
-												<b>Where can I find more information about digital badges?</b>
-											</p>
-											<p>For more information about badges, see <a href="https://www.ibm.com/training/P430723G05904L37">Frequently asked questions</a> on IBM Training.</p> -->
-										</div>
-									</div>
-
-
-								</div>
-						
-						</section>
+							<div class="pure-u-1 pure-u-md-5-12">
+								<h4 class="faq-q">Where can I find more information about digital badges?</h4>
+								<p>For more information about badges, see <a 
+									target="_blank" rel="noopener noreferrer" href="https://www.ibm.com/training/credentials/faq">Frequently asked questions</a> on IBM Training.</p>
+							</div>
 						</div>
+						<!-- row3 -->
+						<div class="pure-u-1">
+							<div class="pure-u-1 pure-u-md-5-12">
+								<h4 class="faq-q">Credly Support</h4>
+								<p>For questions related to your Credly badge earner account and 
+									profile, as well as issues related to claiming your badge after receiving a notification,
+									go to <a target="_blank" rel="noopener noreferrer" href="https://support.credly.com/hc/en-us">support.credly.com</a>.</p>
+							</div>
+							<div class="pure-u-1 pure-u-md-1-12"></div>
 
-						<!-- =========================== Support =========================== -->
-						<div class="zs-gray-section support-sec">
-							<section id="support-section" class="zs-section pure-g">
-								<!-- Header -->
-								<div class="pure-u-1 pure-u-md-5-24">
-									<h2 id="support">Support</h2>
-								</div>
-								<!-- Contents -->
-								<div class="pure-u-sm-1 pure-u-md-18-24">
-									<!-- row1 -->
-									<div class="pure-u-1">
-										<div class="pure-u-1 pure-u-md-5-12">
-											<p>Receiving a badge notification that allows you to accept your badge can take 1 - 2 weeks after you complete the activities required to earn a badge.</p>
-											<p>If you have questions about IBM IMS badges, contact <a href="mailto:ibmimsom@us.ibm.com">ibmimsom@us.ibm.com.</a></p>
-										</div>
-										<div class="pure-u-1 pure-u-md-1-12"></div>
-
-										<div class="pure-u-1 pure-u-md-5-12">
-											<p>For questions related to your badge earner account and profile or issues related to claiming your badge after receiving a notification, go to <a 
-												target="_blank" rel="noopener noreferrer" href="https://support.credly.com/hc/en-us">https://support.credly.com/hc/en-us.</a></p>
-										</div>
-									</div>
-
-									<!-- Notice -->
-									<div class="pure-u-1 supp-notice">
-										<p>IBM leverages the services of Credly, a 3rd party data 
-											processor authorized by IBM and located in the United States, to assist in the 
-											administration of the IBM Digital Badge program. In order to issue you an IBM 
-											Digital Badge, your personal information (name, email address, and badge earned) 
-											will be shared with Credly. You will receive an email notification from Credly 
-											with instructions for claiming the badge. Your personal information is used to 
-											issue your badge and for program reporting and operational purposes. IBM may 
-											share the personal information collected with IBM subsidiaries and third parties 
-											globally. It will be handled in a manner consistent with IBM privacy practices. 
-										</p>
-										<p>
-											The IBM Privacy Statement can be viewed here: 
-											<a  target="_blank" rel="noopener noreferrer" href="https://www.ibm.com/privacy/us/en/"> https://www.ibm.com/privacy/us/en/</a>. 
-										</p>
-										<p>
-											IBM employees can view the IBM Internal Privacy Statement here:  
-											<a  target="_blank" rel="noopener noreferrer" href="https://w3.ibm.com/w3publisher/w3-privacy-notice">https://w3.ibm.com/w3publisher/w3-privacy-notice.</a>
-										</p>
-									</div>
-								</div>
-							</section>
+							<div class="pure-u-1 pure-u-md-5-12">
+								<!-- <p>
+									<b>Where can I find more information about digital badges?</b>
+								</p>
+								<p>For more information about badges, see <a href="https://www.ibm.com/training/P430723G05904L37">Frequently asked questions</a> on IBM Training.</p> -->
+							</div>
 						</div>
 
-						<!-- =========================== back to top =========================== -->
-						<div>
-							<img id="btt" src="wp-content/Icon_Back_to_top.svg" alt="Back to top" tabindex="0" role="button">
-						</div>
 
-					</main>
-				</div><!-- .entry-content -->
+					</div>
+			
+			</section>
 			</div>
-		</div><!-- #content -->
-
-		<footer aria-label="IBM" id="themeFooter">
-			<div id="boomer-footer" class="boomer_footer_menu"></div>
-			<div id="dw-footer" class="ibm-alternate ibm-padding-normal">
-				<div class="ibm-columns ibm-padding-bottom-0">
-					<div class="ibm-col-1-1">
-						<div class="ibm-footer-corporate-links">
-							<ul>
-								<li><a href="https://www.ibm.com/contact/us" target="_blank">Contact</a></li>
-								<li><div></div></li>
-								<li><a href="http://www.ibm.com/privacy/us/en/" target="_blank">Privacy</a></li>
-								<li><div></div></li>
-								<li><a href="https://www.ibm.com/legal?lnk=flg-tous-usen" target="_blank">Terms of use</a></li>
-								<li><div></div></li>
-								<li><a href="http://www.ibm.com/accessibility/us/en/" target="_blank">Accessibility</a></li>
-							</ul>
+
+			<!-- =========================== Support =========================== -->
+			<div class="zs-gray-section support-sec">
+				<section id="support-section" class="zs-section pure-g">
+					<!-- Header -->
+					<div class="pure-u-1 pure-u-md-5-24">
+						<h2 id="support">Support</h2>
+					</div>
+					<!-- Contents -->
+					<div class="pure-u-sm-1 pure-u-md-18-24">
+						<!-- row1 -->
+						<div class="pure-u-1">
+							<div class="pure-u-1 pure-u-md-5-12">
+								<p>Receiving a badge notification that allows you to accept your badge can take 1 - 2 weeks after you complete the activities required to earn a badge.</p>
+								<p>If you have questions about IBM IMS badges, contact <a href="mailto:ibmimsom@us.ibm.com">ibmimsom@us.ibm.com.</a></p>
+							</div>
+							<div class="pure-u-1 pure-u-md-1-12"></div>
+
+							<div class="pure-u-1 pure-u-md-5-12">
+								<p>For questions related to your badge earner account and profile or issues related to claiming your badge after receiving a notification, go to <a 
+									target="_blank" rel="noopener noreferrer" href="https://support.credly.com/hc/en-us">https://support.credly.com/hc/en-us.</a></p>
+							</div>
+						</div>
+
+						<!-- Notice -->
+						<div class="pure-u-1 supp-notice">
+							<p>IBM leverages the services of Credly, a 3rd party data 
+								processor authorized by IBM and located in the United States, to assist in the 
+								administration of the IBM Digital Badge program. In order to issue you an IBM 
+								Digital Badge, your personal information (name, email address, and badge earned) 
+								will be shared with Credly. You will receive an email notification from Credly 
+								with instructions for claiming the badge. Your personal information is used to 
+								issue your badge and for program reporting and operational purposes. IBM may 
+								share the personal information collected with IBM subsidiaries and third parties 
+								globally. It will be handled in a manner consistent with IBM privacy practices. 
+							</p>
+							<p>
+								The IBM Privacy Statement can be viewed here: 
+								<a  target="_blank" rel="noopener noreferrer" href="https://www.ibm.com/privacy/us/en/"> https://www.ibm.com/privacy/us/en/</a>. 
+							</p>
+							<p>
+								IBM employees can view the IBM Internal Privacy Statement here:  
+								<a  target="_blank" rel="noopener noreferrer" href="https://w3.ibm.com/w3publisher/w3-privacy-notice">https://w3.ibm.com/w3publisher/w3-privacy-notice.</a>
+							</p>
 						</div>
-						<p class="copyright">Copyright IBM Corporation 2023, 2025</p>
-						<div id="ibm-footer-locale-selector"></div>
 					</div>
+				</section>
+			</div>
+
+			<!-- =========================== back to top =========================== -->
+			<div>
+				<img id="btt" src="wp-content/Icon_Back_to_top.svg" alt="Back to top" tabindex="0" role="button">
+			</div>
+
+		</main>
+	</div><!-- #content -->
+
+	<footer aria-label="IBM" id="themeFooter">
+		<div id="boomer-footer" class="boomer_footer_menu"></div>
+		<div id="dw-footer" class="ibm-alternate ibm-padding-normal">
+			<div class="ibm-columns ibm-padding-bottom-0">
+				<div class="ibm-col-1-1">
+					<div class="ibm-footer-corporate-links">
+						<ul>
+							<li><a href="https://www.ibm.com/contact/us" target="_blank">Contact</a></li>
+							<li><div></div></li>
+							<li><a href="http://www.ibm.com/privacy/us/en/" target="_blank">Privacy</a></li>
+							<li><div></div></li>
+							<li><a href="https://www.ibm.com/legal?lnk=flg-tous-usen" target="_blank">Terms of use</a></li>
+							<li><div></div></li>
+							<li><a href="http://www.ibm.com/accessibility/us/en/" target="_blank">Accessibility</a></li>
+						</ul>
+					</div>
+					<p class="copyright">Copyright IBM Corporation 2023, 2025</p>
+					<div id="ibm-footer-locale-selector"></div>
 				</div>
 			</div>
-		</footer>
-	</div><!-- #page -->
+		</div>
+	</footer>
 
 <!-- Search box functions -->
 <script src="jekyll-tipue-search/assets/tipuesearch/searchBox.js"></script>
diff --git a/wp-includes/css/page.css b/wp-includes/css/page.css
index 38c3a174..711fd1ed 100644
--- a/wp-includes/css/page.css
+++ b/wp-includes/css/page.css
@@ -110,15 +110,12 @@
   margin-bottom: 1.25em;
 }
 
-.icon-md {
-  max-height: var(--plex-72);
-  max-width: var(--plex-72);
-}
-
 .icon-lg {
   height: var(--plex-28);
-  max-height: var(--plex-72);
-  max-width: var(--plex-72);
+}
+
+.icon-xl {
+  height: var(--plex-36);
 }
 
 .icon {
@@ -343,6 +340,11 @@
 .spacer {
   height: 0.3125em;
 }
+
+/* Hero section subtext */
+.subtext {
+  font-weight: 300;
+}
 /* -------------------------------------------------------- */
 
 /* Media queries */

From 5344f6459fc388870103cf25a1e3683f02e01873 Mon Sep 17 00:00:00 2001
From: Sarah Miller <hmillersarah@gmail.com>
Date: Wed, 19 Mar 2025 15:21:16 -0400
Subject: [PATCH 08/11] update link styling

---
 wp-includes/css/page.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/wp-includes/css/page.css b/wp-includes/css/page.css
index 38c3a174..a40fa883 100644
--- a/wp-includes/css/page.css
+++ b/wp-includes/css/page.css
@@ -78,6 +78,10 @@
     color: var(--black);
   }
 
+  .gray-bg a {
+    color: var(--blue)
+  }
+
 .blue-bg {
   background-color: var(--bg-dark-blue);
   color: var(--white);

From f616dda8a2ed8c134aa77f945ca605cf624c9b44 Mon Sep 17 00:00:00 2001
From: Sarah Miller <hmillersarah@gmail.com>
Date: Wed, 19 Mar 2025 15:31:45 -0400
Subject: [PATCH 09/11] fix styling for faq and support sections

---
 ims-education.html       | 192 +++++++++++++++++++--------------------
 wp-includes/css/page.css |  17 +++-
 2 files changed, 106 insertions(+), 103 deletions(-)

diff --git a/ims-education.html b/ims-education.html
index 75aaf810..d4b18d25 100644
--- a/ims-education.html
+++ b/ims-education.html
@@ -694,120 +694,114 @@ <h1>IMS courses</h1>
 			</section>
 
 			<!-- =========================== FAQ =========================== -->
-			<div class="gray-bg">
-				<section id="faq-section"class="zs-section pure-g">
-					<!-- Header -->
-					<div class="pure-u-1 pure-u-md-5-24 faq-title">
-						<h2 id="faq">Frequently asked questions</h2>
+			<section id="faq" class="gray-bg pure-g">
+				<!-- Header -->
+				<div class="pure-u-1 pure-u-md-5-24 faq-title">
+					<h2 id="faq">Frequently asked questions</h2>
+				</div>
+				<!-- Contents -->
+				<div class="pure-u-sm-1 pure-u-md-18-24">
+
+					<div class="pure-u-1" style="margin-bottom:25px;">
+						<p>Have questions about IMS courses, or the badge program? Here are 
+							some quick answers that can help you.</p>
 					</div>
-					<!-- Contents -->
-					<div class="pure-u-sm-1 pure-u-md-18-24">
 
-						<div class="pure-u-1" style="margin-bottom:25px;">
-							<p>Have questions about IMS courses, or the badge program? Here are 
-								some quick answers that can help you.</p>
+					<!-- row1 -->
+					<div class="pure-u-1">
+						<div class="pure-u-1 pure-u-md-5-12">
+							<h4 class="faq-q">How do I earn a badge?</h4>
+							<p>Courses that offer badges include one or more exams. 
+								You must pass those exams and complete required activities. 
+								See the "Grading and badge" topic in the course to see the grading policy and how exams are graded.</p>
 						</div>
+						<div class="pure-u-1 pure-u-md-1-12"></div>
 
-						<!-- row1 -->
-						<div class="pure-u-1">
-							<div class="pure-u-1 pure-u-md-5-12">
-								<h4 class="faq-q">How do I earn a badge?</h4>
-								<p>Courses that offer badges include one or more exams. 
-									You must pass those exams and complete required activities. 
-									See the "Grading and badge" topic in the course to see the grading policy and how exams are graded.</p>
-							</div>
-							<div class="pure-u-1 pure-u-md-1-12"></div>
-
-							<div class="pure-u-1 pure-u-md-5-12">
-								<h4 class="faq-q">If I pass the course, when do I get the badge?</h4>
-								<p>Badges are typically issued automatically after you meet the course requirements and grading policy. You should get an email notification of receiving the badge in one to four days.</p>
-							</div>
-						</div>
-						<!-- row2 -->
-						<div class="pure-u-1">
-							<div class="pure-u-1 pure-u-md-5-12">
-								<h4 class="faq-q">Whom do I contact if I have problems with course content?</h4>
-								<p>You can contact the IMS Education team at <a href="mailto:ibmimsom@us.ibm.com">ibmimsom@us.ibm.com</a>.</p>
-							</div>
-							<div class="pure-u-1 pure-u-md-1-12"></div>
-
-							<div class="pure-u-1 pure-u-md-5-12">
-								<h4 class="faq-q">Where can I find more information about digital badges?</h4>
-								<p>For more information about badges, see <a 
-									target="_blank" rel="noopener noreferrer" href="https://www.ibm.com/training/credentials/faq">Frequently asked questions</a> on IBM Training.</p>
-							</div>
+						<div class="pure-u-1 pure-u-md-5-12">
+							<h4 class="faq-q">If I pass the course, when do I get the badge?</h4>
+							<p>Badges are typically issued automatically after you meet the course requirements and grading policy. You should get an email notification of receiving the badge in one to four days.</p>
 						</div>
-						<!-- row3 -->
-						<div class="pure-u-1">
-							<div class="pure-u-1 pure-u-md-5-12">
-								<h4 class="faq-q">Credly Support</h4>
-								<p>For questions related to your Credly badge earner account and 
-									profile, as well as issues related to claiming your badge after receiving a notification,
-									go to <a target="_blank" rel="noopener noreferrer" href="https://support.credly.com/hc/en-us">support.credly.com</a>.</p>
-							</div>
-							<div class="pure-u-1 pure-u-md-1-12"></div>
-
-							<div class="pure-u-1 pure-u-md-5-12">
-								<!-- <p>
-									<b>Where can I find more information about digital badges?</b>
-								</p>
-								<p>For more information about badges, see <a href="https://www.ibm.com/training/P430723G05904L37">Frequently asked questions</a> on IBM Training.</p> -->
-							</div>
+					</div>
+					<!-- row2 -->
+					<div class="pure-u-1">
+						<div class="pure-u-1 pure-u-md-5-12">
+							<h4 class="faq-q">Whom do I contact if I have problems with course content?</h4>
+							<p>You can contact the IMS Education team at <a href="mailto:ibmimsom@us.ibm.com">ibmimsom@us.ibm.com</a>.</p>
 						</div>
+						<div class="pure-u-1 pure-u-md-1-12"></div>
 
+						<div class="pure-u-1 pure-u-md-5-12">
+							<h4 class="faq-q">Where can I find more information about digital badges?</h4>
+							<p>For more information about badges, see <a 
+								target="_blank" rel="noopener noreferrer" href="https://www.ibm.com/training/credentials/faq">Frequently asked questions</a> on IBM Training.</p>
+						</div>
+					</div>
+					<!-- row3 -->
+					<div class="pure-u-1">
+						<div class="pure-u-1 pure-u-md-5-12">
+							<h4 class="faq-q">Credly Support</h4>
+							<p>For questions related to your Credly badge earner account and 
+								profile, as well as issues related to claiming your badge after receiving a notification,
+								go to <a target="_blank" rel="noopener noreferrer" href="https://support.credly.com/hc/en-us">support.credly.com</a>.</p>
+						</div>
+						<div class="pure-u-1 pure-u-md-1-12"></div>
 
+						<div class="pure-u-1 pure-u-md-5-12">
+							<!-- <p>
+								<b>Where can I find more information about digital badges?</b>
+							</p>
+							<p>For more information about badges, see <a href="https://www.ibm.com/training/P430723G05904L37">Frequently asked questions</a> on IBM Training.</p> -->
+						</div>
 					</div>
-			
+
+
+				</div>
 			</section>
-			</div>
 
-			<!-- =========================== Support =========================== -->
-			<div class="zs-gray-section support-sec">
-				<section id="support-section" class="zs-section pure-g">
-					<!-- Header -->
-					<div class="pure-u-1 pure-u-md-5-24">
-						<h2 id="support">Support</h2>
-					</div>
-					<!-- Contents -->
-					<div class="pure-u-sm-1 pure-u-md-18-24">
-						<!-- row1 -->
-						<div class="pure-u-1">
-							<div class="pure-u-1 pure-u-md-5-12">
-								<p>Receiving a badge notification that allows you to accept your badge can take 1 - 2 weeks after you complete the activities required to earn a badge.</p>
-								<p>If you have questions about IBM IMS badges, contact <a href="mailto:ibmimsom@us.ibm.com">ibmimsom@us.ibm.com.</a></p>
-							</div>
-							<div class="pure-u-1 pure-u-md-1-12"></div>
-
-							<div class="pure-u-1 pure-u-md-5-12">
-								<p>For questions related to your badge earner account and profile or issues related to claiming your badge after receiving a notification, go to <a 
-									target="_blank" rel="noopener noreferrer" href="https://support.credly.com/hc/en-us">https://support.credly.com/hc/en-us.</a></p>
-							</div>
+			<section id="support" class="gray-bg-02 pure-g">
+				<!-- Header -->
+				<div class="pure-u-1 pure-u-md-5-24">
+					<h2 id="support">Support</h2>
+				</div>
+				<!-- Contents -->
+				<div class="pure-u-sm-1 pure-u-md-18-24">
+					<!-- row1 -->
+					<div class="pure-u-1">
+						<div class="pure-u-1 pure-u-md-5-12">
+							<p>Receiving a badge notification that allows you to accept your badge can take 1 - 2 weeks after you complete the activities required to earn a badge.</p>
+							<p>If you have questions about IBM IMS badges, contact <a href="mailto:ibmimsom@us.ibm.com">ibmimsom@us.ibm.com.</a></p>
 						</div>
+						<div class="pure-u-1 pure-u-md-1-12"></div>
 
-						<!-- Notice -->
-						<div class="pure-u-1 supp-notice">
-							<p>IBM leverages the services of Credly, a 3rd party data 
-								processor authorized by IBM and located in the United States, to assist in the 
-								administration of the IBM Digital Badge program. In order to issue you an IBM 
-								Digital Badge, your personal information (name, email address, and badge earned) 
-								will be shared with Credly. You will receive an email notification from Credly 
-								with instructions for claiming the badge. Your personal information is used to 
-								issue your badge and for program reporting and operational purposes. IBM may 
-								share the personal information collected with IBM subsidiaries and third parties 
-								globally. It will be handled in a manner consistent with IBM privacy practices. 
-							</p>
-							<p>
-								The IBM Privacy Statement can be viewed here: 
-								<a  target="_blank" rel="noopener noreferrer" href="https://www.ibm.com/privacy/us/en/"> https://www.ibm.com/privacy/us/en/</a>. 
-							</p>
-							<p>
-								IBM employees can view the IBM Internal Privacy Statement here:  
-								<a  target="_blank" rel="noopener noreferrer" href="https://w3.ibm.com/w3publisher/w3-privacy-notice">https://w3.ibm.com/w3publisher/w3-privacy-notice.</a>
-							</p>
+						<div class="pure-u-1 pure-u-md-5-12">
+							<p>For questions related to your badge earner account and profile or issues related to claiming your badge after receiving a notification, go to <a 
+								target="_blank" rel="noopener noreferrer" href="https://support.credly.com/hc/en-us">https://support.credly.com/hc/en-us.</a></p>
 						</div>
 					</div>
-				</section>
-			</div>
+
+					<!-- Notice -->
+					<div class="pure-u-1 supp-notice">
+						<p>IBM leverages the services of Credly, a 3rd party data 
+							processor authorized by IBM and located in the United States, to assist in the 
+							administration of the IBM Digital Badge program. In order to issue you an IBM 
+							Digital Badge, your personal information (name, email address, and badge earned) 
+							will be shared with Credly. You will receive an email notification from Credly 
+							with instructions for claiming the badge. Your personal information is used to 
+							issue your badge and for program reporting and operational purposes. IBM may 
+							share the personal information collected with IBM subsidiaries and third parties 
+							globally. It will be handled in a manner consistent with IBM privacy practices. 
+						</p>
+						<p>
+							The IBM Privacy Statement can be viewed here: 
+							<a  target="_blank" rel="noopener noreferrer" href="https://www.ibm.com/privacy/us/en/"> https://www.ibm.com/privacy/us/en/</a>. 
+						</p>
+						<p>
+							IBM employees can view the IBM Internal Privacy Statement here:  
+							<a  target="_blank" rel="noopener noreferrer" href="https://w3.ibm.com/w3publisher/w3-privacy-notice">https://w3.ibm.com/w3publisher/w3-privacy-notice.</a>
+						</p>
+					</div>
+				</div>
+			</section>
 
 			<!-- =========================== back to top =========================== -->
 			<div>
diff --git a/wp-includes/css/page.css b/wp-includes/css/page.css
index 711fd1ed..c4cfd61d 100644
--- a/wp-includes/css/page.css
+++ b/wp-includes/css/page.css
@@ -6,7 +6,8 @@
   --black: #000;
   --blue: #0f62fe;
     /* Background Color */
-    --bg-light-gray: #f4f4f4;
+    --bg-light-gray-01: #f4f4f4;
+    --bg-light-gray-02: #ececec;
     --bg-dark-gray-01: #1c1c1c;
     --bg-dark-gray-02: #2c2c2c;
     --bg-dark-blue: #003A6D;
@@ -71,13 +72,21 @@
   }
 
 .gray-bg {
-  background-color: var(--bg-light-gray);
+  background-color: var(--bg-light-gray-01);
 }
 
-  .gray-bg h3, .gray-bg h4 {
+.gray-bg-02 {
+  background-color: var(--bg-light-gray-02);
+}
+
+  .gray-bg h3, .gray-bg h4, .gray-bg-02 h3, .gray-bg-02 h4 {
     color: var(--black);
   }
 
+  .gray-bg a, .gray-bg-02 a {
+    color: var(--blue);
+  }
+
 .blue-bg {
   background-color: var(--bg-dark-blue);
   color: var(--white);
@@ -316,7 +325,7 @@
 }
 
 .quote-blk {
-  background-color: var(--bg-light-gray);
+  background-color: var(--bg-light-gray-01);
   margin: 0.2em;
   padding: 2em;
   color: var(--black);

From 261f344add0f8d554c683b8ce27db8b3868f2c05 Mon Sep 17 00:00:00 2001
From: Sarah Miller <hmillersarah@gmail.com>
Date: Mon, 24 Mar 2025 10:02:46 -0400
Subject: [PATCH 10/11] address accessibility checker violations

---
 ims-education.html       |  5 +++--
 wp-includes/css/page.css | 13 +++++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/ims-education.html b/ims-education.html
index d4b18d25..c6182d69 100644
--- a/ims-education.html
+++ b/ims-education.html
@@ -697,7 +697,7 @@ <h1>IMS courses</h1>
 			<section id="faq" class="gray-bg pure-g">
 				<!-- Header -->
 				<div class="pure-u-1 pure-u-md-5-24 faq-title">
-					<h2 id="faq">Frequently asked questions</h2>
+					<h2>Frequently asked questions</h2>
 				</div>
 				<!-- Contents -->
 				<div class="pure-u-sm-1 pure-u-md-18-24">
@@ -758,10 +758,11 @@ <h4 class="faq-q">Credly Support</h4>
 				</div>
 			</section>
 
+			<!-- =========================== Support =========================== -->
 			<section id="support" class="gray-bg-02 pure-g">
 				<!-- Header -->
 				<div class="pure-u-1 pure-u-md-5-24">
-					<h2 id="support">Support</h2>
+					<h2>Support</h2>
 				</div>
 				<!-- Contents -->
 				<div class="pure-u-sm-1 pure-u-md-18-24">
diff --git a/wp-includes/css/page.css b/wp-includes/css/page.css
index c4cfd61d..901e1282 100644
--- a/wp-includes/css/page.css
+++ b/wp-includes/css/page.css
@@ -5,6 +5,7 @@
   --white: #fff;
   --black: #000;
   --blue: #0f62fe;
+  --dark-blue: #0043ce;
     /* Background Color */
     --bg-light-gray-01: #f4f4f4;
     --bg-light-gray-02: #ececec;
@@ -75,16 +76,20 @@
   background-color: var(--bg-light-gray-01);
 }
 
+  .gray-bg a {
+    color: var(--blue);
+  }
+
 .gray-bg-02 {
   background-color: var(--bg-light-gray-02);
 }
 
-  .gray-bg h3, .gray-bg h4, .gray-bg-02 h3, .gray-bg-02 h4 {
-    color: var(--black);
+  .gray-bg-02 a {
+    color: var(--dark-blue);
   }
 
-  .gray-bg a, .gray-bg-02 a {
-    color: var(--blue);
+  .gray-bg h3, .gray-bg h4, .gray-bg-02 h3, .gray-bg-02 h4 {
+    color: var(--black);
   }
 
 .blue-bg {

From fff943b9b2e42deed8025984e6d5599fc07928e7 Mon Sep 17 00:00:00 2001
From: Sarah Miller <hmillersarah@gmail.com>
Date: Mon, 24 Mar 2025 10:11:54 -0400
Subject: [PATCH 11/11] cleanup styling

---
 ims-education.html       |  4 ++--
 wp-includes/css/page.css | 23 +++++++++--------------
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/ims-education.html b/ims-education.html
index c6182d69..56368dc1 100644
--- a/ims-education.html
+++ b/ims-education.html
@@ -694,7 +694,7 @@ <h1>IMS courses</h1>
 			</section>
 
 			<!-- =========================== FAQ =========================== -->
-			<section id="faq" class="gray-bg pure-g">
+			<section id="faq" class="light-gray-bg pure-g">
 				<!-- Header -->
 				<div class="pure-u-1 pure-u-md-5-24 faq-title">
 					<h2>Frequently asked questions</h2>
@@ -759,7 +759,7 @@ <h4 class="faq-q">Credly Support</h4>
 			</section>
 
 			<!-- =========================== Support =========================== -->
-			<section id="support" class="gray-bg-02 pure-g">
+			<section id="support" class="gray-bg pure-g">
 				<!-- Header -->
 				<div class="pure-u-1 pure-u-md-5-24">
 					<h2>Support</h2>
diff --git a/wp-includes/css/page.css b/wp-includes/css/page.css
index 901e1282..c403bd1e 100644
--- a/wp-includes/css/page.css
+++ b/wp-includes/css/page.css
@@ -5,10 +5,9 @@
   --white: #fff;
   --black: #000;
   --blue: #0f62fe;
-  --dark-blue: #0043ce;
     /* Background Color */
-    --bg-light-gray-01: #f4f4f4;
-    --bg-light-gray-02: #ececec;
+    --bg-light-gray: #F9F9F9;
+    --bg-gray: #f4f4f4;
     --bg-dark-gray-01: #1c1c1c;
     --bg-dark-gray-02: #2c2c2c;
     --bg-dark-blue: #003A6D;
@@ -73,22 +72,18 @@
   }
 
 .gray-bg {
-  background-color: var(--bg-light-gray-01);
+  background-color: var(--bg-gray);
 }
 
-  .gray-bg a {
-    color: var(--blue);
-  }
-
-.gray-bg-02 {
-  background-color: var(--bg-light-gray-02);
+.light-gray-bg {
+  background-color: var(--bg-light-gray);
 }
 
-  .gray-bg-02 a {
-    color: var(--dark-blue);
+  .gray-bg a, .light-gray-bg a {
+    color: var(--blue);
   }
 
-  .gray-bg h3, .gray-bg h4, .gray-bg-02 h3, .gray-bg-02 h4 {
+  .gray-bg h3, .gray-bg h4, .light-gray-bg h3, .light-gray-bg h4 {
     color: var(--black);
   }
 
@@ -330,7 +325,7 @@
 }
 
 .quote-blk {
-  background-color: var(--bg-light-gray-01);
+  background-color: var(--bg-gray);
   margin: 0.2em;
   padding: 2em;
   color: var(--black);