Skip to content

Commit 38093ea

Browse files
k8s-ci-robotk8s-ci-robot
authored
Merge pull request #19692 from celestehorgan/add-logos-training
Add CKA/CKAD logos to Training Page
2 parents 02afab2 + 43f5d01 commit 38093ea

File tree

4 files changed

+138
-33
lines changed

4 files changed

+138
-33
lines changed

‎content/en/training/_index.html

Lines changed: 37 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,22 @@
77
class: training
88
---
99

10-
<div class="padded blue-bg">
11-
<div class="main-section two-thirds-centered white-text">
12-
<center>
13-
<h2>Build your cloud native career</h2>
14-
<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>
15-
</center>
10+
<section class="call-to-action">
11+
<div class="main-section">
12+
<div class="call-to-action" id="cta-certification">
13+
<div class="logo-certification cta-image cta-image-before" id="logo-cka">
14+
<img src="/images/training/kubernetes-cka-white.svg"/>
15+
</div>
16+
<div class="logo-certification cta-image cta-image-after" id="logo-ckad">
17+
<img src="/images/training/kubernetes-ckad-white.svg"/>
18+
</div>
19+
<div class="cta-text">
20+
<h2>Build your cloud native career</h2>
21+
<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>
22+
</div>
23+
</div>
1624
</div>
17-
</div>
25+
</section>
1826

1927
<section>
2028
<div class="main-section padded">
@@ -60,7 +68,7 @@ <h5>
6068
<center>
6169
<h2>Learn with the Linux Foundation</h2>
6270
<p>The Linux Foundation offers instructor-led and self-paced courses for all aspects of the Kubernetes application development and operations lifecycle.</p>
63-
<br><br>
71+
<br/><br/>
6472
<a href="https://training.linuxfoundation.org/training/course-catalog/?_sft_technology=kubernetes" target="_blank" class="button">See Courses</a>
6573
</center>
6674
</div>
@@ -71,25 +79,27 @@ <h2>Learn with the Linux Foundation</h2>
7179
<center>
7280
<h2>Get Kubernetes Certified</h2>
7381
</center>
74-
<div class="col-nav">
75-
<center>
76-
<h5>
77-
<b>Certified Kubernetes Application Developer (CKAD)</b>
78-
</h5>
79-
<p>The Certified Kubernetes Application Developer exam certifies that users can design, build, configure, and expose cloud native applications for Kubernetes.</p>
80-
<br>
81-
<a href="https://training.linuxfoundation.org/certification/certified-kubernetes-application-developer-ckad/" target="_blank" class="button">Go to Certification</a>
82-
</center>
83-
</div>
84-
<div class="col-nav">
85-
<center>
86-
<h5>
87-
<b>Certified Kubernetes Administrator (CKA)</b>
88-
</h5>
89-
<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>
90-
<br>
91-
<a href="https://training.linuxfoundation.org/certification/certified-kubernetes-administrator-cka/" target="_blank" class="button">Go to Certification</a>
92-
</center>
82+
<div class="col-container">
83+
<div class="col-nav">
84+
<center>
85+
<h5>
86+
<b>Certified Kubernetes Application Developer (CKAD)</b>
87+
</h5>
88+
<p>The Certified Kubernetes Application Developer exam certifies that users can design, build, configure, and expose cloud native applications for Kubernetes.</p>
89+
<br>
90+
<a href="https://training.linuxfoundation.org/certification/certified-kubernetes-application-developer-ckad/" target="_blank" class="button">Go to Certification</a>
91+
</center>
92+
</div>
93+
<div class="col-nav">
94+
<center>
95+
<h5>
96+
<b>Certified Kubernetes Administrator (CKA)</b>
97+
</h5>
98+
<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>
99+
<br>
100+
<a href=https://training.linuxfoundation.org/certification/certified-kubernetes-administrator-cka/" target="_blank" class="button">Go to Certification</a>
101+
</center>
102+
</div>
93103
</div>
94104
</div>
95105
</section>

‎static/css/training.css

Lines changed: 85 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,42 +7,121 @@
77
clear: both;
88
padding: 0px;
99
margin-bottom: 2em;
10+
width: 100%;
1011
}
1112

12-
.col {
13+
section.call-to-action {
14+
color: #ffffff;
15+
background-color: #3371e3;
16+
}
17+
18+
section.call-to-action .main-section {
19+
max-width: initial;
20+
}
21+
22+
section.call-to-action .main-section > div.call-to-action {
23+
display: flex;
24+
flex-direction: row;
25+
flex-wrap: wrap;
26+
flex-basis: auto;
27+
justify-content: center;
28+
align-items: center;
29+
margin: initial;
30+
padding-top: 5rem;
31+
padding-bottom: 5rem;
32+
}
33+
34+
section.call-to-action .main-section > div.call-to-action > div {
35+
order: 1;
36+
padding: 20px;
37+
}
38+
39+
section.call-to-action .main-section .cta-text {
40+
text-align: center;
41+
flex: 1 1 auto;
42+
max-width: 50vw;
43+
}
44+
45+
/* if max() and min() are available, use them */
46+
section.call-to-action .main-section .cta-text {
47+
min-width: min(20em, 50vw);
48+
max-width: min(1000px, 50vw);
49+
}
50+
51+
section.call-to-action .main-section .cta-image.cta-image-before {
52+
order: 0
53+
}
54+
55+
section.call-to-action .main-section .cta-image.cta-image-after {
56+
order: 2
57+
}
58+
59+
section.call-to-action .main-section .cta-image > img {
1360
display: block;
14-
float:left;
61+
width: 150px;
62+
margin: auto;
63+
}
64+
65+
.col {
66+
display: flex;
67+
flex-direction: row;
68+
float: left;
1569
margin: 1% 0 1% 1.6%;
16-
background-color: #f9f9f9;
1770
}
71+
1872
.col:first-child { margin-left: 0; }
1973

2074
.col-container {
21-
display: table; /* Make the container element behave like a table */
75+
display: flex; /* Make the container element behave like a table */
76+
flex-direction: row;
2277
width: 100%; /* Set full-width to expand the whole page */
2378
padding-bottom: 30px;
2479
}
2580

2681
.col-nav {
27-
display: table-cell; /* Make elements inside the container behave like table cells */
82+
display: flex;
83+
flex-grow: 1;
2884
width: 18%;
2985
background-color: #f9f9f9;
3086
padding: 20px;
3187
border: 5px solid white;
3288
}
3389

3490

91+
@media only screen and (max-width: 840px) {
92+
section.call-to-action .main-section .cta-image.cta-image-before, section.call-to-action .main-section .cta-image.cta-image-after {
93+
order: 0;
94+
}
95+
section.call-to-action .main-section .cta-image > img {
96+
margin: 0;
97+
}
98+
section.call-to-action .main-section .cta-image > img {
99+
width: 7rem;
100+
}
101+
section.call-to-action .main-section > div.call-to-action > div {
102+
padding: 0 2rem 0 2rem;
103+
}
104+
section.call-to-action .main-section .cta-text {
105+
flex: 2 0 75vw;
106+
max-width: initial;
107+
padding: 5vw 0 0 0;
108+
}
109+
}
110+
111+
35112
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
36113

37114
@media only screen and (max-width: 480px) {
38115
.col { margin: 1% 0 1% 0%;}
116+
.col-container { flex-direction: column; }
39117
}
40118

41119
@media only screen and (max-width: 650px) {
42120
.col-nav {
43121
display: block;
44122
width: 100%;
45123
}
124+
.col-container { flex-direction: column; }
46125
}
47126

48127
.button{
@@ -102,4 +181,4 @@ h5 {
102181
visibility: visible;
103182
overflow: hidden;
104183
width: 1200px;
105-
}
184+
}

‎static/images/training/kubernetes-cka-white.svg

Lines changed: 7 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)