From 43f5d0124a9f7249ced3e2ba1ec2681032ca56cc Mon Sep 17 00:00:00 2001 From: Celeste Horgan Date: Thu, 2 Apr 2020 12:24:18 -0700 Subject: [PATCH] Add logos to training page Signed-off-by: Celeste Horgan --- content/en/training/_index.html | 64 +++++++------ static/css/training.css | 91 +++++++++++++++++-- .../images/training/kubernetes-cka-white.svg | 7 ++ .../images/training/kubernetes-ckad-white.svg | 9 ++ 4 files changed, 138 insertions(+), 33 deletions(-) create mode 100644 static/images/training/kubernetes-cka-white.svg create mode 100644 static/images/training/kubernetes-ckad-white.svg 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 @@ + + + + + + + + +