kubernetes
/
website
mirror of https://github.com/kubernetes/website.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Updated Partner Page Design (#8959) 

* Updated partner page design

* updating conformance section title

* Changing buttons spacing

* fixing spacing
pull/9090/head
Kaitlyn Barnard 2018-06-15 10:12:28 -07:00 committed by k8s-ci-robot
parent 4e9a3590e7
commit 6f0cf009bf
2 changed files with 62 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
content/en/includes/partner-style.css
View File

@ -34,29 +34,19 @@
zoom:1; /* For IE 6/7 */
}
/* GRID OF FIVE */
.span_5_of_5 {
width: 18%;
/* GRID OF THREE */
.span_3_of_3 {
width: 35%;
background-color: #f9f9f9;
padding: 20px;
}
.span_4_of_5 {
width: 18%;
.span_2_of_3 {
width: 35%;
background-color: #f9f9f9;
padding: 20px;
}
.span_3_of_5 {
width: 18%;
background-color: #f9f9f9;
padding: 20px;
}
.span_2_of_5 {
width: 18%;
background-color: #f9f9f9;
padding: 20px;
}
.span_1_of_5 {
width: 18%;
.span_1_of_3 {
width: 35%;
background-color: #f9f9f9;
padding: 20px;
}
@ -64,7 +54,7 @@
.col-container {
display: table; /* Make the container element behave like a table */
width: 100%; /* Set full-width to expand the whole page */
padding-bottom: 80px;
padding-bottom: 30px;
}
.col-nav {
@ -79,7 +69,7 @@
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%;}
.span_4_of_4, .span_3_of_4, .span_2_of_4, .span_1_of_4 { width: 100%; }
.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
}
@media only screen and (max-width: 650px) {
@ -91,8 +81,17 @@
.button{
max-width: 100%;
line-height: 14px;
padding: 15px;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
margin: 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 {

75
content/en/partners/_index.html
View File

@ -10,40 +10,49 @@ cid: partners
<main>
<h5>Kubernetes works with partners to create a strong, vibrant codebase that supports a spectrum of complementary platforms.</h5>
<div class="col-container">
<div class="col-nav"><center><h5><b>Kubernetes Certified Service Providers</b></h5>Vetted service providers with deep experience helping enterprises successfully adopt Kubernetes.<br><br><a href="#kcsp" class="button">See KCSP Partners</a></center></div>
<div class="col-nav"><center><h5><b>Certified Platforms & Distributions</b></h5>Software conformance ensures that every vendor’s version of Kubernetes supports the required APIs.<br><br><a href="#dist" class="button">See Conformance Partners</a></center></div>
<div class="col-nav"><center><h5><b>Kubernetes Training Partners</b></h5>Vetted training providers who have deep experience in cloud native technology training.<br><br><a href="#ktp" class="button">See KTP Partners</a></center></div>
<div class="col-nav"><center><h5><b>Technology Partners</b></h5><br>Integrations and plugins that add features to Kubernetes applications.<br><br><br><br><a href="#technology" class="button">See Technology Partners</a></center></div>
<div class="col-nav"><center><h5><b>Service Partners</b></h5><br>Consulting or management services to help companies implement Kubernetes in commercial applications.<br><br><a href="#service" class="button">See Service Partners</a></center></div>
</div>
<div class="kscp_section">
<h3><a id="kcsp"></a>Kubernetes Certified Service Providers (KCSP)</h3>
<p>The KCSP program is a vetted tier of service providers who have deep experience helping enterprises successfully adopt Kubernetes. KCSP partners offer Kubernetes support, consulting, professional services and training for organizations embarking on their Kubernetes journey. Learn more about the program <b><a href="https://www.cncf.io/certification/kcsp/">here</a></b>.</p>
<p>Interested in becoming a KCSP? Please <b><a href="https://docs.google.com/forms/d/e/1FAIpQLScih8ZxHpqxPDfZgizhGx5ilRlQKV6X9NBFgAkEd3d-6djKuQ/viewform">fill out this form.</a></b></p>
<div id="kcspContainer"></div>
</div>
<div class="dist_section">
<h3><a id="dist"></a>Certified Platforms & Distributions</h3>
<p>This program gives end users the confidence that when they use a Certified Kubernetes product they can rely on a high level of common functionality. It gives Independent Software Vendors (ISVs) confidence that if their customer is using a Certified Kubernetes platform that their software will behave as expected.</p>
<p>Interested in becoming a Certified Certified Platform or Distribution? <b><a href="https://www.cncf.io/certification/software-conformance/">Learn more.</b></a></p>
<div id="distContainer"></div>
</div>
<div class="ktp_section">
<h3><a id="ktp"></a>Kubernetes Training Partners</h3>
<p>Individuals or corporations who are looking for specialized training that maps directly to the Certified Kubernetes Administrator (CKA) and Certified Kubernetes Application Developer (CKAD) exams can choose from a list of KTPs who have passed this rigorous qualification process. Learn more about the program <b><a href="https://www.cncf.io/certification/training/">here</a></b></p>
<p>Interested in becoming a Kubernetes Training Partner? Please <b><a href="https://goo.gl/forms/lwKx3U24oIumFXvM2">fill out this form.</b></a></p>
<div id="ktpContainer"></div>
</div>
<div class="tech_section">
<h3><a id="technology"></a>Technology Partners</h3>
<p>Technology partners offer integrations and plugins that add features to Kubernetes applications.</p>
<div id="isvContainer"></div>
</div>
<div class="service_Section">
<h3><a id="service"></a>Service Partners</h3>
<p>Service Partners offer consulting or management services to help companies implement and use Kubernetes in commercial applications.</p>
<div id="servContainer"></div>
<div class="col-nav"><center><h5><b>Kubernetes Certified Service Providers</b></h5><br>Vetted service providers with deep experience helping enterprises successfully adopt Kubernetes.<br><br><br><button id="defaultIframe" class="button" onClick="updateSrc(this.id)">See KCSP Partners</button></center></div>
<div class="col-nav"><center><h5><b>Certified Kubernetes Distributions, Hosted Platforms, and Installers</b></h5>Software conformance ensures that every vendor’s version of Kubernetes supports the required APIs.<br><br><br><button id="firstIframe" class="button" onClick="updateSrc(this.id)">See Conformance Partners</button></a></center></div>
<div class="col-nav"><center><h5><b>Kubernetes Training Partners</b></h5><br>Vetted training providers who have deep experience in cloud native technology training.<br><br><br><br><button id="secondIframe" class="button" onClick="updateSrc(this.id)">See KTP Partners</button></center></div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript">
var defaultLink = "https://landscape.cncf.io/grouping=landscape&landscape=kubernetes-certified-service-provider&embed=true";
var firstLink = "https://landscape.cncf.io/grouping=landscape&landscape=certified-kubernetes-distribution,certified-kubernetes-hosted,certified-kubernetes-installer&embed=true";
var secondLink = "https://landscape.cncf.io/grouping=landscape&landscape=kubernetes-training-partner&embed=true";
function updateSrc(buttonId) {
if (buttonId == "defaultIframe") {
$("#landscape").attr("src",defaultLink);
}
if (buttonId == "firstIframe") {
$("#landscape").attr("src",firstLink);
}
if (buttonId == "secondIframe") {
$("#landscape").attr("src",secondLink);
}
}
</script>
</head>
<body>
<div id="frameHolder">
<iframe id="landscape" frameBorder="0" scrolling="no" style="width: 1px; min-width: 100%" src="https://landscape.cncf.io/grouping=landscape&landscape=kubernetes-certified-service-provider&embed=true"></iframe>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.0/iframeResizer.js"></script>
<script>
iFrameResize({
log:true,
messageCallback : function(messageData){ // Callback fn when message is received
if (messageData.message.type === 'showModal') {
document.querySelector('body').style.overflow = 'hidden';
}
if (messageData.message.type === 'hideModal') {
document.querySelector('body').style.overflow = 'auto';
}
},
}, '#landscape');
</script>
</div>
</body>
</main>
</section>