diff --git a/content/en/training/_index.html b/content/en/training/_index.html index 53922a9879..f2f28f9713 100644 --- a/content/en/training/_index.html +++ b/content/en/training/_index.html @@ -7,14 +7,22 @@ cid: training class: training --- -
-
-
-

Build your cloud native career

-

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.

-
+
+
+
+
+ +
+
+ +
+
+

Build your cloud native career

+

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.

+
+
-
+
@@ -60,7 +68,7 @@ class: training

Learn with the Linux Foundation

The Linux Foundation offers instructor-led and self-paced courses for all aspects of the Kubernetes application development and operations lifecycle.

-

+

See Courses
@@ -71,25 +79,27 @@ class: training

Get Kubernetes Certified

-
-
-
- Certified Kubernetes Application Developer (CKAD) -
-

The Certified Kubernetes Application Developer exam certifies that users can design, build, configure, and expose cloud native applications for Kubernetes.

-
- Go to Certification -
-
-
-
-
- Certified Kubernetes Administrator (CKA) -
-

The Certified Kubernetes Administrator (CKA) program provides assurance that CKAs have the skills, knowledge, and competency to perform the responsibilities of Kubernetes administrators.

-
- Go to Certification -
+
+
+
+
+ Certified Kubernetes Application Developer (CKAD) +
+

The Certified Kubernetes Application Developer exam certifies that users can design, build, configure, and expose cloud native applications for Kubernetes.

+
+ Go to Certification +
+
+
+
+
+ Certified Kubernetes Administrator (CKA) +
+

The Certified Kubernetes Administrator (CKA) program provides assurance that CKAs have the skills, knowledge, and competency to perform the responsibilities of Kubernetes administrators.

+
+ Go to Certification +
+
diff --git a/static/css/training.css b/static/css/training.css index b37d4acccc..2e680be4b9 100644 --- a/static/css/training.css +++ b/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; -} +} \ No newline at end of file diff --git a/static/images/training/kubernetes-cka-white.svg b/static/images/training/kubernetes-cka-white.svg new file mode 100644 index 0000000000..6a1882a77c --- /dev/null +++ b/static/images/training/kubernetes-cka-white.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/static/images/training/kubernetes-ckad-white.svg b/static/images/training/kubernetes-ckad-white.svg new file mode 100644 index 0000000000..09067d8b87 --- /dev/null +++ b/static/images/training/kubernetes-ckad-white.svg @@ -0,0 +1,9 @@ + + + + + + + + +