links to the training page and yum video (#396)

bitovi · Sep 8, 2023 · ba5d7c5 · ba5d7c5
1 parent e892665
commit ba5d7c5
Show file tree

Hide file tree

Showing 2 changed files with 102 additions and 4 deletions.
diff --git a/src/program-management-with-jira/program-management.md b/src/program-management-with-jira/program-management.md
@@ -6,6 +6,34 @@ with Jira.
 
 @body
 
+
+<div class="ads-red-border-300">
+<a href="https://www.bitovi.com/events/program-management-webinar">
+<div>Upcoming Event</div>
+<div>
+On Thursday, September 28 at 10AM CT, attend a free 4-hour overview 
+of the techniques in this training. <br/>
+<span>Register here.</span>
+</div>
+<img src="../static/img/program-management-with-jira/home/training-thumbnail.png"/>
+</a>
+<a href="https://www.youtube.com/watch?v=ipW1I74cDGo">
+<div>Real World Results</div>
+<div>
+See how these techniques have been used in the real world to manage
+huge teams for products millions of people use daily.
+<span>Click here to watch.</span>
+</div>
+<img src="../static/img/program-management-with-jira/home/case-study-thumb.png"/>
+</a>
+</div>
+
+
+
+
+
+
+
 ## Purpose
 
 In this training, you will learn how to <span class="color-blue bold">build</span>, 
@@ -19,9 +47,9 @@ In this training, you will learn how to <span class="color-blue bold">build</spa
 - <span class="color-teal bold">Accurate</span> - How to use improved modeling of estimates to create more accurate plans.
 - <span class="color-gray bold">Multi-team</span> - How to build plans that coordinates the work items for multiple product teams at a program level.
 
-This training will leave you with a decent understanding of Jira too. However, the ultimate goal of this training is to teach you how to create actionable plans.
+This training will leave you with a solid understanding of Jira too. However, the ultimate goal of this training is to teach you how to create <span class="color-red bold italic">actionable</span> plans.
 
-## Actionable Plans
+## <span class="color-red bold">Actionable</span> Plans
 
 > Know the future so that you can change it.
 > 

diff --git a/static/styles/content.less b/static/styles/content.less
@@ -1,3 +1,4 @@
+/* Colors */
 .color-blue {
     color: #0747a6;
 }
@@ -18,7 +19,7 @@
 }
 
 .color-red {
-    color: #bf2600;
+    color: #cb3036;
     font-weight: bold;
 }
 
@@ -27,6 +28,20 @@
 
 }
 
+/* spacing */
+
+
+/* spacing and color */
+.drop-shadow-center-blue {
+    filter: drop-shadow(0px 0px 5px #356fd1);
+}
+.drop-shadow-center-black {
+    box-shadow: 0px 0px 5px black;
+}
+
+
+/* font decorations */
+
 .bold {
     font-weight: bold;
 }
@@ -44,7 +59,7 @@
     min-width: 400px; 
     width: 100%; 
     max-width: 800px;
-    box-shadow: 0px 0px 5px black;
+    .drop-shadow-center-black();
 }
 .content-400-1080 {
     min-width: 400px; 
@@ -65,4 +80,59 @@
     display: block;
     width: 100%;
     aspect-ratio: 16/9;
+}
+
+.block {
+    display: block;
+}
+
+.border-4-rounded-red-with-drop-shadow {
+    border-radius: 8px;
+    border: 4px solid #cb3036;
+    .drop-shadow-center-blue();
+}
+
+.a-as-p {
+    text-decoration: none;
+    color: black;
+    display: block;
+}
+
+.w-300 {
+    width: 300px;
+}
+
+.bg-white {
+    background-color: white;
+}
+
+
+
+/* Combined Helpers */
+.ads-red-border-300 {
+    display: flex; gap: 20px;
+
+    > a {
+        .border-4-rounded-red-with-drop-shadow();
+        .block();
+        .a-as-p();
+        .bg-white();
+        .w-300();
+        > div:first-of-type {
+            font-size: 18px; 
+            font-weight: bold;  
+            padding: 4px;
+        }
+    }
+    div {
+        padding-left:4px;
+        padding-right: 4px;
+    }
+    span {
+        color: #356fd1; text-decoration: underline
+    }
+    img {
+        width: 292px;
+        .block();
+    }
 }