Training page in the top nav (#19214)
* Create new page and add to top nav Signed-off-by: Celeste Horgan <celeste@cncf.io> * The basics Signed-off-by: Celeste Horgan <celeste@cncf.io> * A bit of inline css Signed-off-by: Celeste Horgan <celeste@cncf.io> * Fix CSS Signed-off-by: Celeste Horgan <celeste@cncf.io> * Fix link + Add to bottom row Signed-off-by: Celeste Horgan <celeste@cncf.io> * Address feedback in PR * Address feedback from elsewhere * Fix button alignment * Add training partners * Simplify css * Apply suggestions from review Co-Authored-By: Zach Corleissen <zacharysarah@users.noreply.github.com> * Fix landscape + text block widths Co-authored-by: Zach Corleissen <zacharysarah@users.noreply.github.com>pull/19475/head
Kubernetes Prow Robot
GitHub
parent
2f2c924292
commit
67c0fb987e
|
|
@ -107,7 +107,7 @@ $video-section-height: 550px
|
|||
padding-right: 10px
|
||||
|
||||
#home
|
||||
section, header, footer
|
||||
section, header
|
||||
.main-section
|
||||
max-width: 1000px
|
||||
|
||||
|
|
@ -178,16 +178,18 @@ $video-section-height: 550px
|
|||
nav
|
||||
overflow: hidden
|
||||
margin-bottom: 20px
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
|
||||
a
|
||||
width: 16.65%
|
||||
width: auto
|
||||
float: left
|
||||
font-size: 24px
|
||||
font-weight: 300
|
||||
white-space: nowrap
|
||||
|
||||
.social
|
||||
padding: 0 30px
|
||||
padding: 0
|
||||
max-width: 1200px
|
||||
|
||||
div
|
||||
|
|
|
|||
|
|
@ -222,9 +222,8 @@ $feature-box-div-width: 45%
|
|||
footer
|
||||
nav
|
||||
text-align: center
|
||||
|
||||
a
|
||||
width: 30%
|
||||
width: auto
|
||||
padding: 0 20px
|
||||
|
||||
.social
|
||||
|
|
|
|||
|
|
@ -0,0 +1,108 @@
|
|||
---
|
||||
title: Training
|
||||
bigheader: Kubernetes Training and Certification
|
||||
abstract: Training programs, certifications, and partners.
|
||||
layout: basic
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="main-section padded">
|
||||
<center>
|
||||
<h2>Take a free course on edX</h2>
|
||||
</center>
|
||||
<div class="col-container">
|
||||
<div class="col-nav">
|
||||
<center>
|
||||
<h5>
|
||||
<b>Introduction to Kubernetes <br> </b>
|
||||
</h5>
|
||||
<p>Want to learn Kubernetes? Get an in-depth primer on this powerful system for managing containerized applications.</p>
|
||||
<br>
|
||||
<a href="https://www.edx.org/course/introduction-to-kubernetes" target="_blank" class="button">Go to Course</a>
|
||||
</center>
|
||||
</div>
|
||||
<div class="col-nav">
|
||||
<center>
|
||||
<h5>
|
||||
<b>Introduction to Cloud Infrastructure Technologies</b>
|
||||
</h5>
|
||||
<p>Learn the fundamentals of building and managing cloud technologies directly from The Linux Foundation, the leader in open source.</p>
|
||||
<br>
|
||||
<a href="https://www.edx.org/course/introduction-to-cloud-infrastructure-technologies" target="_blank" class="button">Go to Course</a>
|
||||
</center>
|
||||
</div>
|
||||
<div class="col-nav">
|
||||
<center>
|
||||
<h5>
|
||||
<b>Introduction to Linux</b>
|
||||
</h5>
|
||||
<p>Never learned Linux? Want a refresh? Develop a good working knowledge of Linux using both the graphical interface and command line across the major Linux distribution families.</p>
|
||||
<br>
|
||||
<a href="https://www.edx.org/course/introduction-to-linux" target="_blank" class="button">Go to Course</a>
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="padded lighter-gray-bg">
|
||||
<div class="main-section two-thirds-centered">
|
||||
<center>
|
||||
<h2>Learn with the Linux Foundation</h2>
|
||||
<p>The Linux Foundation offers instructor-led and self-paced courses for all aspects of the Kuberenetes application development and operations lifecycle.</p>
|
||||
<br><br>
|
||||
<a href="https://training.linuxfoundation.org/training/course-catalog/?_sft_technology=kubernetes" target="_blank" class="button">See Courses</a>
|
||||
</center>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<div class="main-section padded">
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="padded lighter-gray-bg">
|
||||
<div class="main-section two-thirds-centered">
|
||||
<center>
|
||||
<h2>Kubernetes Training Partners</h2>
|
||||
<p>Our network of Kubernetes Training Partners provide training services for Kubernetes and cloud native projects.</p>
|
||||
</center>
|
||||
</div>
|
||||
<div class="main-section landscape-section">
|
||||
<iframe src="https://landscape.cncf.io/category=kubernetes-training-partner&format=logo-mode&grouping=category&embed=yes" frameborder="0" id="landscape" scrolling="no"></iframe>
|
||||
<script src="https://landscape.cncf.io/iframeResizer.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -25,6 +25,9 @@
|
|||
{{- if eq .Params.class "gridPage" }}
|
||||
<link rel="stylesheet" href="{{ "css/gridpage.css" | relURL }}">
|
||||
{{- end }}
|
||||
{{- if eq .Params.class "training" }}
|
||||
<link rel="stylesheet" href="{{ "css/training.css" | relURL }}">
|
||||
{{- end }}
|
||||
{{- with .Params.css }}
|
||||
{{- $extraCss := split . "," }}
|
||||
{{- range $extraCss }}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="light-text main-section">
|
||||
<nav>
|
||||
{{ with site.GetPage "page" "docs/tutorials/stateless-application/hello-minikube" }}<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>{{ end }}
|
||||
{{ $sections := slice "docs/home" "blog" "partners" "community" "case-studies" }}
|
||||
{{ $sections := slice "docs/home" "blog" "training" "partners" "community" "case-studies" }}
|
||||
{{ range $sections }}
|
||||
{{ with site.GetPage "section" . }}<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>{{ end }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
<div class="nav-buttons" data-auto-burger="primary">
|
||||
<ul class="global-nav">
|
||||
{{ $sections := slice "docs" "blog" "partners" "community" "case-studies" }}
|
||||
{{ $sections := slice "docs" "blog" "training" "partners" "community" "case-studies" }}
|
||||
{{ range $sections }}
|
||||
{{ with site.GetPage "section" . }}<li><a href="{{ .RelPermalink }}"{{ if eq .Section $.Section }} class="active"{{ end}}>{{ .LinkTitle }}</a></li>{{ end }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
|
||||
.gridPage p {
|
||||
color: rgb(26,26,26) !important;
|
||||
color: rgb(26,26,26);
|
||||
margin-left: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
font-weight: 300 !important;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,105 @@
|
|||
#hero {
|
||||
text-align: left;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.section {
|
||||
clear: both;
|
||||
padding: 0px;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.col {
|
||||
display: block;
|
||||
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 */
|
||||
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 */
|
||||
width: 18%;
|
||||
background-color: #f9f9f9;
|
||||
padding: 20px;
|
||||
border: 5px solid white;
|
||||
}
|
||||
|
||||
|
||||
/* GO FULL WIDTH AT LESS THAN 480 PIXELS */
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.col { margin: 1% 0 1% 0%;}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 650px) {
|
||||
.col-nav {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.button{
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
font-family: "Roboto", sans-serif;
|
||||
margin: 1em 0;
|
||||
display: inline-block;
|
||||
border-radius: 6px;
|
||||
padding: 0 20px;
|
||||
line-height: 40px;
|
||||
color: #ffffff;
|
||||
font-size: 16px;
|
||||
background-color: #3371e3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.white-text {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.padded {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.blue-bg {
|
||||
background-color: #3371e3;
|
||||
}
|
||||
|
||||
.lighter-gray-bg {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.two-thirds-centered {
|
||||
width: 66%;
|
||||
max-width: 950px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.landscape-section {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 1200px;
|
||||
}
|
||||
|
||||
#landscape {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
overflow: hidden;
|
||||
width: 1200px;
|
||||
}
|
||||
Loading…
Reference in New Issue