Add logos to training page

Signed-off-by: Celeste Horgan <celeste@cncf.io>

content/en/training/_index.html

@@ -7,14 +7,22 @@ cid: training
 class: training
 ---
 
-<div class="padded blue-bg">
-  <div class="main-section two-thirds-centered white-text">
-    <center>
-      <h2>Build your cloud native career</h2>
-      <p>Kubernetes is at the core of the cloud native movement. Training and certifications from the Linux Foundation and our training partners lets you invest in your career, learn Kubernetes, and make your cloud native projects successful.</p>
-    </center>
+<section class="call-to-action">
+  <div class="main-section">
+    <div class="call-to-action" id="cta-certification">
+      <div class="logo-certification cta-image cta-image-before" id="logo-cka">
+        <img src="/images/training/kubernetes-cka-white.svg"/>
+      </div>
+      <div class="logo-certification cta-image cta-image-after" id="logo-ckad">
+        <img src="/images/training/kubernetes-ckad-white.svg"/>
+      </div>
+      <div class="cta-text">
+        <h2>Build your cloud native career</h2>
+        <p>Kubernetes is at the core of the cloud native movement. Training and certifications from the Linux Foundation and our training partners lets you invest in your career, learn Kubernetes, and make your cloud native projects successful.</p>
+      </div>
+    </div>
   </div>
-</div>
+</section>
 
 <section>
   <div class="main-section padded">
@@ -60,7 +68,7 @@ class: training
     <center>
       <h2>Learn with the Linux Foundation</h2>
       <p>The Linux Foundation offers instructor-led and self-paced courses for all aspects of the Kubernetes application development and operations lifecycle.</p>
-      <br><br>
+      <br/><br/>
       <a href="https://training.linuxfoundation.org/training/course-catalog/?_sft_technology=kubernetes" target="_blank" class="button">See Courses</a>
     </center>
   </div>
@@ -71,25 +79,27 @@ class: training
     <center>
         <h2>Get Kubernetes Certified</h2>
     </center>
-    <div class="col-nav">
-      <center>
-        <h5>
-          <b>Certified Kubernetes Application Developer (CKAD)</b>
-        </h5>
-        <p>The Certified Kubernetes Application Developer exam certifies that users can design, build, configure, and expose cloud native applications for Kubernetes.</p>
-        <br>
-        <a href="https://training.linuxfoundation.org/certification/certified-kubernetes-application-developer-ckad/" target="_blank" class="button">Go to Certification</a>
-      </center>
-    </div>
-    <div class="col-nav">
-      <center>
-        <h5>
-          <b>Certified Kubernetes Administrator (CKA)</b>
-        </h5>
-        <p>The Certified Kubernetes Administrator (CKA) program provides assurance that CKAs have the skills, knowledge, and competency to perform the responsibilities of Kubernetes administrators.</p>
-        <br>
-        <a href="https://training.linuxfoundation.org/certification/certified-kubernetes-administrator-cka/" target="_blank" class="button">Go to Certification</a>
-      </center>
+    <div class="col-container">
+      <div class="col-nav">
+        <center>
+          <h5>
+            <b>Certified Kubernetes Application Developer (CKAD)</b>
+          </h5>
+          <p>The Certified Kubernetes Application Developer exam certifies that users can design, build, configure, and expose cloud native applications for Kubernetes.</p>
+          <br>
+          <a href="https://training.linuxfoundation.org/certification/certified-kubernetes-application-developer-ckad/" target="_blank" class="button">Go to Certification</a>
+        </center>
+      </div>
+      <div class="col-nav">
+        <center>
+          <h5>
+            <b>Certified Kubernetes Administrator (CKA)</b>
+          </h5>
+          <p>The Certified Kubernetes Administrator (CKA) program provides assurance that CKAs have the skills, knowledge, and competency to perform the responsibilities of Kubernetes administrators.</p>
+          <br>
+          <a href=https://training.linuxfoundation.org/certification/certified-kubernetes-administrator-cka/" target="_blank" class="button">Go to Certification</a>
+        </center>
+      </div>
     </div>
   </div>
 </section>

static/css/training.css

@@ -7,24 +7,80 @@
   clear: both;
   padding: 0px;
   margin-bottom: 2em;
+  width: 100%;
+}
+
+section.call-to-action {
+  color: #ffffff;
+  background-color: #3371e3;
+}
+
+section.call-to-action .main-section {
+    max-width: initial;
+}
+
+section.call-to-action .main-section > div.call-to-action {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  flex-basis: auto;
+  justify-content: center;
+  align-items: center;
+  margin: initial;
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+}
+
+section.call-to-action .main-section > div.call-to-action > div {
+  order: 1;
+  padding: 20px;
+}
+
+section.call-to-action .main-section .cta-text {
+  text-align: center;
+  flex: 1 1 auto;
+  max-width: 50vw;
+}
+
+/* if max() and min() are available, use them */
+section.call-to-action .main-section .cta-text {
+  min-width: min(20em, 50vw);
+  max-width: min(1000px, 50vw);
+}
+
+section.call-to-action .main-section .cta-image.cta-image-before {
+  order: 0
+}
+
+section.call-to-action .main-section .cta-image.cta-image-after {
+  order: 2
+}
+
+section.call-to-action .main-section .cta-image > img {
+  display: block;
+  width: 150px;
+  margin: auto;
 }
 
 .col {
-  display: block;
-  float:left;
+  display: flex;
+  flex-direction: row;
+  float: left;
   margin: 1% 0 1% 1.6%;
-  background-color: #f9f9f9;
 }
+
 .col:first-child { margin-left: 0; }
 
 .col-container {
-  display: table; /* Make the container element behave like a table */
+  display: flex; /* Make the container element behave like a table */
+  flex-direction: row;
   width: 100%; /* Set full-width to expand the whole page */
   padding-bottom: 30px;
 }
 
 .col-nav {
-  display: table-cell; /* Make elements inside the container behave like table cells */
+  display: flex;
+  flex-grow: 1;
   width: 18%;
   background-color: #f9f9f9;
   padding: 20px;
@@ -32,10 +88,32 @@
 }
 
 
+@media only screen and (max-width: 840px) {
+  section.call-to-action .main-section .cta-image.cta-image-before, section.call-to-action .main-section .cta-image.cta-image-after {
+    order: 0;
+  }
+  section.call-to-action .main-section .cta-image > img {
+    margin: 0;
+  }
+  section.call-to-action .main-section .cta-image > img {
+    width: 7rem;
+  }
+  section.call-to-action .main-section > div.call-to-action > div {
+    padding: 0 2rem 0 2rem;
+  }
+  section.call-to-action .main-section .cta-text {
+    flex: 2 0 75vw;
+    max-width: initial;
+    padding: 5vw 0 0 0;
+  }
+}
+
+
 /*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
 
 @media only screen and (max-width: 480px) {
   .col { margin: 1% 0 1% 0%;}
+  .col-container { flex-direction: column; }
 }
 
 @media only screen and (max-width: 650px) {
@@ -43,6 +121,7 @@
     display: block;
     width: 100%;
   }
+  .col-container { flex-direction: column; }
 }
 
 .button{
@@ -102,4 +181,4 @@ h5 {
   visibility: visible;
   overflow: hidden;
   width: 1200px;
-}
+}