update banner

Author: hmillersarah

index.html

@@ -87,23 +87,17 @@
     <main id="content" class="main-content">
 
       <!-- =========================== Banner =========================== -->
-       <section class="blue-bg banner">
-        <img src="wp-content/Icon_02_IMS GoldPage.svg" alt="">
-        <p><a href="https://early-access.ibm.com/software/support/trial/cst/welcomepage.wss?siteId=2047&tabId=5718&w=1" target="_blank" rel="noopener noreferrer">New! IBM IMS Z Trial →</a> </p> 
-        <p><a href="https://forms.office.com/r/GVb90wUSXf" target="_blank" rel="noopener noreferrer">IMS modernization survey →</a> </p> 
+       <section class="blue-bg home-banner">
+        <div>
+          <img src="wp-content/Icon_02_IMS GoldPage.svg" alt="">
+          <a href="https://early-access.ibm.com/software/support/trial/cst/welcomepage.wss?siteId=2047&tabId=5718&w=1" target="_blank" rel="noopener noreferrer">New! IBM IMS Z Trial →</a>
+        </div>
+        <div>
+          <img src="wp-content/Icon_02_IMS GoldPage.svg" alt="">
+          <a href="https://forms.office.com/r/GVb90wUSXf" target="_blank" rel="noopener noreferrer">IMS modernization survey →</a> 
+        </div>
        </section>
 
-      <!-- Banner notification - Two Items -->
-      <div class="banner-notification pure-g">
-        <span class="pure-u-1">  
-          <div class="banner-container">
-            <img src="wp-content/Icon_02_IMS GoldPage.svg" alt="Blog">
-            <p class="banner-text-left"><a href="https://early-access.ibm.com/software/support/trial/cst/welcomepage.wss?siteId=2047&tabId=5718&w=1" target="_blank" rel="noopener noreferrer">New! IBM IMS Z Trial →</a> </p> 
-            <p class="banner-text-right"><a href="https://forms.office.com/r/GVb90wUSXf" target="_blank" rel="noopener noreferrer">IMS modernization survey →</a> </p> 
-          </div>
-        </span>
-      </div>
-
       <!-- - Update the Advocacy content block in the Engage section on the homepage -->
 
       <!-- Welcome banner -->

wp-includes/css/page.css

@@ -404,13 +404,37 @@ h6 {
 
 /* Banner */
 /* -------------------------------------------------------- */
-.banner {
+.home-banner-g {
+  padding: 1em;
+}
+
+.home-banner {
   display: flex;
   flex-flow: row wrap;
+  align-items: center;
+  padding: 2em 2em;
+  background-color: #0072c3;
 }
 
-.banner:last-child {
-  flex-grow: 1;
+.home-banner div {
+  display: flex;
+  align-items: center;
+  gap: 1em;
+}
+
+.home-banner > div:first-of-type {
+  margin-right: auto;
+}
+
+
+.home-banner img {
+  filter: invert(100%);
+}
+
+.home-banner a {
+  color: var(--white);
+  font-weight: bold;
+  font-size: var(--plex-18);
 }
 
 /* Custom styling */