Updates to partner page design to add KCSPs (#5336)

* Updates to partner page design to add KCSPs

* Update index.html

* Update partner-style.css

* Update partner-script.js

* Add files via upload

* Update partner-script.js

* Add files via upload

* Update partner-script.js

_includes/partner-script.js

@@ -1,21 +1,14 @@
 ;(function () {
 	var partners = [
 		{
-			type: 0,
+			type: 2,
 			name: 'CoreOS',
 			logo: 'core_os',
 			link: 'https://tectonic.com/',
 			blurb: 'Tectonic is the enterprise-ready Kubernetes product, by CoreOS. It adds key features to allow you to manage, update, and control clusters in production.'
 		},
 		{
-			type: 0,
-			name: 'Deis',
-			logo: 'deis',
-			link: 'https://deis.com',
-			blurb: 'Deis the creators of Helm, Workflow, and Steward, helps developers and operators build, deploy, manage and scale their applications on top of Kubernetes.'
-		},
-		{
-			type: 0,
+			type: 2,
 			name: 'StackPointCloud',
 			logo: 'stackpoint',
 			link: 'https://stackpoint.io',
@@ -49,13 +42,6 @@
 			link: 'https://www.cockroachlabs.com/blog/running-cockroachdb-on-kubernetes/',
 			blurb: 'CockroachDB is a distributed SQL database whose built-in replication and survivability model pair with Kubernetes to truly make data easy.'
 		},
-		{
-			type: 0,
-			name: 'Skippbox',
-			logo: 'skippbox',
-			link: 'http://www.skippbox.com/tag/products/',
-			blurb: 'Creator of Cabin the first mobile application for Kubernetes, and kompose. Skippbox’s solutions distill all the power of k8s in simple easy to use interfaces.'
-		},
 		{
 			type: 0,
 			name: 'Weave Works',
@@ -134,7 +120,7 @@
 			blurb: 'Deep, automated security for your containers running on Kubernetes.'
 		},
 		{
-			type: 0,
+			type: 2,
 			name: 'Canonical',
 			logo: 'canonical',
 			link: 'https://jujucharms.com/canonical-kubernetes/',
@@ -183,14 +169,14 @@
 			blurb: 'Aporeto makes cloud-native applications secure by default without impacting developer velocity and works at any scale, on any cloud.'
 		},
 		{
-  			type: 0,
+  		type: 2,
  			name: 'Giant Swarm',
  			logo: 'giant_swarm',
  			link: 'https://giantswarm.io',
  			blurb: 'Giant Swarm provides fully-managed Kubernetes Clusters in your location of choice, so you can focus on your product.'
  		},
 		{
- 			type: 0,
+ 			type: 2,
  			name: 'Mirantis',
  			logo: 'mirantis',
  			link: 'https://content.mirantis.com/Containerizing-OpenStack-on-Kubernetes-Video-Landing-Page.html',
@@ -218,42 +204,28 @@
 			blurb: 'ReactiveOps has written automation on best practices for infrastructure as code on GCP & AWS using Kubernetes, helping you build and maintain a world-class infrastructure at a fraction of the price of an internal hire.'
 		},
 		{
-			type: 1,
+			type: 2,
 			name: 'Livewyer',
 			logo: 'livewyer',
 			link: 'https://livewyer.io/services/kubernetes-experts/',
 			blurb: 'Kubernetes experts that on-board applications and empower IT teams to get the most out of containerised technology.'
 		},
 		{
-			type: 1,
-			name: 'Deis',
-			logo: 'deis',
-			link: 'https://deis.com/services/',
-			blurb: 'Deis provides professional services and 24x7 operational support for any Kubernetes cluster managed by our global cluster operations team.'
-		},
-		{
-			type: 1,
-			name: 'StackPointCloud',
-			logo: 'stackpoint',
-			link: 'https://stackpoint.io',
-			blurb: 'StackPointCloud offers a wide range of support plans for managed Kubernetes clusters built through its universal control plane for Kubernetes Anywhere.'
-		},
-		{
-			type: 1,
+			type: 2,
 			name: 'Samsung SDS',
 			logo: 'samsung_sds',
 			link: 'http://www.samsungsdsa.com/cloud-infrastructure_kubernetes',
 			blurb: 'Samsung SDS’s Cloud Native Computing Team offers expert consulting across the range of technical aspects involved in building services targeted at a Kubernetes cluster.'
 		},
 		{
-			type: 1,
+			type: 2,
 			name: 'Container Solutions',
 			logo: 'container_solutions',
 			link: 'http://container-solutions.com/resources/kubernetes/',
 			blurb: 'Container Solutions is a premium software consultancy that focuses on programmable infrastructure, offering our expertise in software development, strategy and operations to help you innovate at speed and scale.'
 		},
 		{
-			type: 1,
+			type: 2,
 			name: 'Jetstack',
 			logo: 'jetstack',
 			link: 'https://www.jetstack.io/',
@@ -288,7 +260,7 @@
  			blurb: 'Spotinst uses a prediction algorithm in the Amazon EC2 Spot allowing k8s clusters to increase performance and lower the infrastructure costs'
   		},
 		{
- 			type: 1,
+ 			type: 2,
  			name: 'inwinSTACK',
  			logo: 'inwinstack',
  			link: 'http://www.inwinstack.com/index.php/en/solutions-en/',
@@ -330,7 +302,7 @@
  			blurb: 'NATS is a simple, secure, and scalable cloud native messaging system.'
   		},
 		{
- 			type: 1,
+ 			type: 2,
  			name: 'RX-M',
  			logo: 'rxm',
  			link: 'http://rx-m.com/training/kubernetes-training/',
@@ -372,7 +344,7 @@
  			blurb: 'Full stack monitoring of containers and microservices orchestrated by Kubernetes. Powered by anomaly detection to find problems faster.'
   		},
 		{
- 			type: 0,
+ 			type: 2,
  			name: 'Supergiant.io',
  			logo: 'supergiant',
  			link: 'https://supergiant.io/blog/supergiant-packing-algorithm-unique-save-money',
@@ -418,7 +390,7 @@
  			name: 'Cobe',
  			logo: 'cobe',
  			link: 'https://cobe.io/product-page/',
- 			blurb: 'Manage Kubernetes clusters with a live, searchable model that captures all relationships and performance data in full visualised context.'
+ 			blurb: 'Manage Kubernetes clusters with a live, searchable model that captures all relationships and performance data in full visualised context.'
   		},
 		{
  			type: 0,
@@ -463,7 +435,7 @@
  			blurb: 'Strong DevOps and Cloud talent working with couple clients on kubernetes and helm implementations. '
   		},
 		{
- 			type: 0,
+ 			type: 2,
  			name: 'Bitnami',
  			logo: 'bitnami',
  			link: 'http://bitnami.com/kubernetes',
@@ -491,7 +463,7 @@
  			blurb: 'Opcito is a software consultancy that uses Kubernetes to help organisations build, architect & deploy highly scalable applications.'
   		},
 		{
- 			type: 0,
+ 			type: 2,
  			name: 'Huawei Technologies Co., Ltd.',
  			logo: 'huawei',
  			link: 'http://developer.huawei.com/ict/en/site-paas',
@@ -533,14 +505,7 @@
 			blurb: 'Fluentd Enterprise brings smart, secure logging to Kubernetes, and brings integrations with backends such as Splunk, Kafka, or AWS S3.'
 			},
 		{
-			type: 0,
-			name: 'IBM',
-			logo: 'IBM',
-			link: 'https://www.ibm.com/cloud-computing/bluemix/containers',
-			blurb: 'IBM Container Service is a managed k8s environment with built-in cluster security and isolation while leveraging services including Watson, IoT, Weather, etc.'
-			},
-		{
-			type: 1,
+			type: 2,
 			name: 'IBM',
 			logo: 'IBM',
 			link: 'https://www.ibm.com/cloud-computing/bluemix/containers',
@@ -566,9 +531,80 @@
 			logo: 'endocode',
 			link: 'https://endocode.com/kubernetes/',
  			blurb: 'Endocode practices and teaches the open source way. Kernel to cluster - Dev to Ops. We offer Kubernetes trainings, services and support.'
-  		}
+			},
+		{
+			type: 2,
+			name: 'Accenture',
+			logo: 'accenture',
+			link: 'https://www.accenture.com/us-en/service-application-containers',
+	 		blurb: 'Architecture, implementation and operation of world-class Kubernetes solutions for cloud-native clients.'
+			},
+		{
+			type: 1,
+			name: 'Biarca',
+			logo: 'biarca',
+			link: 'http://biarca.io/',
+		 	blurb: 'Biarca is a cloud services provider and key focus areas Key areas of focus for Biarca include Cloud Adoption Services, Infrastructure Services, DevOps Services and Application Services. Biarca leverages Kubernetes to deliver containerized solutions.'
+			},
+		{
+			type: 2,
+			name: 'Claranet',
+			logo: 'claranet',
+			link: 'http://www.claranet.co.uk/hosting/google-cloud-platform-consulting-managed-services',
+			blurb: 'Claranet helps people migrate to the cloud and take full advantage of the new world it offers. We consult, design, build and proactively manage the right infrastructure and automation tooling for clients to achieve this.'
+			},
+		{
+			type: 1,
+			name: 'CloudKite',
+			logo: 'cloudkite',
+			link: 'https://cloudkite.io/',
+			blurb: 'CloudKite.io helps companies build and maintain highly automated, resilient, and impressively performing software on Kubernetes.'
+			},
+		{
+			type: 1,
+			name: 'CloudOps',
+			logo: 'CloudOps',
+			link: 'https://www.cloudops.com/services/docker-and-kubernetes-workshops/',
+			blurb: 'CloudOps gets you hands-on with the K8s ecosystem via workshop/lab. Get prod ready K8s in cloud(s) of your choice with our managed services.'
+			},
+		{
+			type: 2,
+			name: 'Ghostcloud',
+			logo: 'ghostcloud',
+			link: 'https://www.ghostcloud.cn/ecos-kubernetes',
+			blurb: 'EcOS is an enterprise-grade PaaS / CaaS based on Docker and Kubernetes, which makes it easier to configure, deploy and manage containerized applications.'
+			},
+		{
+			type: 2,
+			name: 'Contino',
+			logo: 'contino',
+			link: 'https://www.contino.io/',
+			blurb: 'We help enterprise organizations adopt DevOps, containers and cloud computing. Contino is a global consultancy that enables regulated organizations to accelerate innovation through the adoption of modern approaches to software delivery.'
+			},
+		{
+			type: 2,
+			name: 'Heptio',
+			logo: 'heptio',
+			link: 'http://heptio.com',
+			blurb: 'Heptio helps businesses of all sizes get closer to the vibrant Kubernetes community.'
+			},
+		{
+			type: 2,
+			name: 'Booz Allen Hamilton',
+			logo: 'boozallenhamilton',
+			link: 'https://www.boozallen.com/',
+			blurb: 'Booz Allen partners with public and private sector clients to solve their most difficult challenges through a combination of consulting, analytics, mission operations, technology, systems delivery, cybersecurity, engineering, and innovation expertise.'
+			},
+		{
+			type: 0,
+			name: 'Applatix',
+			logo: 'applatix',
+			link: 'https://applatix.com/applatix-product/',
+ 			blurb: 'Applatix helps build and run containerized apps on public cloud using Docker and Kubernetes.'
+	  	}
 	]
 
+	var kcspContainer = document.getElementById('kcspContainer')
 	var isvContainer = document.getElementById('isvContainer')
 	var servContainer = document.getElementById('servContainer')
 
@@ -601,7 +637,15 @@
 		box.appendChild(img)
 		box.appendChild(div)
 
-		var container = obj.type ? servContainer : isvContainer
+		var container;
+    if (obj.type === 0) {
+      container = isvContainer;
+    } else if (obj.type === 1) {
+      container = servContainer;
+    } else if (obj.type === 2) {
+      container = kcspContainer;
+    }
+
 		container.appendChild(box)
 	})
 })();

_includes/partner-style.css

@@ -1,5 +1,65 @@
+/*  SECTIONS  */
+.section {
+	clear: both;
+	padding: 0px;
+	margin-bottom: 2em;
+}
+
+/*  COLUMN SETUP  */
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+	background-color: #f9f9f9;
+}
+.col:first-child { margin-left: 0; }
+
+
+/*  GROUPING  */
+.group:before,
+.group:after {
+	content:"";
+	display:table;
+}
+.group:after {
+	clear:both;
+}
+.group {
+    zoom:1; /* For IE 6/7 */
+}
+
+/*  GRID OF THREE  */
+.span_3_of_3 {
+	width: 32.2%;
+	background-color: #f9f9f9;
+	padding: 20px;
+}
+.span_2_of_3 {
+	width: 32.2%;
+	background-color: #f9f9f9;
+	padding: 20px;
+}
+.span_1_of_3 {
+	width: 32.2%;
+	background-color: #f9f9f9;
+	padding: 20px;
+}
+
+/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
+@media only screen and (max-width: 480px) {
+	.col { margin: 1% 0 1% 0%;}
+	.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }
+}
+
+.button{
+  max-width: 100%;
+	line-height: 14px;
+	padding: 15px;
+ }
+
 h5 {
-	font-size: 18px;
+	font-size: 16px;
 	line-height: 1.5em;
 	margin-bottom: 2em;
 }
@@ -9,7 +69,7 @@ h5 {
 	background-color: #f9f9f9;
 }
 
-#isvContainer, #servContainer {
+#kcspContainer, #isvContainer, #servContainer {
 	position: relative;
 	width: 100%;
 	display: flex;
@@ -21,6 +81,10 @@ h5 {
 	margin-bottom: 80px;
 }
 
+#kcspContainer {
+	margin-bottom: 80px;
+}
+
 .partner-box {
 	position: relative;
 	width: 47%;
@@ -58,7 +122,7 @@ h5 {
 }
 
 @media screen and (max-width: 568px) {
-	#isvContainer, #servContainer {
+	#kcspContainer, #isvContainer, #servContainer {
 		justify-content: center;
 	}
 
@@ -76,7 +140,7 @@ h5 {
 }
 
 @media screen and (max-width: 568px) {
-	#isvContainer, #servContainer {
+	#kcspContainer, #isvContainer, #servContainer {
 		justify-content: center;
 	}