case studies

_includes/case-study-styles.html

@@ -1,7 +1,7 @@
 <style>
-	/*#caseStudies body.fixed {*/
-		/*padding-bottom: 201px;*/
-	/*}*/
+	#caseStudyTitle {
+		margin-top: 1em !important;
+	}
 	
 	#caseStudies p {
 		color: rgb(26,26,26) !important;
@@ -14,6 +14,10 @@
 		padding: 0;
 	}
 
+	#caseStudies #mainContent .content {
+		padding-top: 0;
+	}
+
 	#caseStudies main {
 		max-width: 1100px !important;
 	}
@@ -21,13 +25,22 @@
 	#caseStudies .content {
 		position: relative;
 		margin: 0 auto 50px;
-		max-width: 96%;
+		max-width: 90%;
+	}
+
+	#caseStudies .content p {
+		line-height: 24px !important;
 	}
 
 	#caseStudies .content h3 {
 		padding: 0 !important;
 	}
 	
+	#caseStudies #hero h5 {
+		padding-left: 20px;
+		margin: 0;
+	}
+	
 	.case-studies {
 		position: relative;
 		display: flex;
@@ -40,7 +53,7 @@
 		position: relative;
 		width: 50%;
 		padding: 0 40px 0 242px;
-		margin-bottom: 100px;
+		margin-bottom: 60px;
 		min-height: 152px;
 	}
 	
@@ -72,21 +85,32 @@
 	
 	#caseStudies #video main {
 		position: relative;
-		max-width: 1100px;
+		max-width: 900px !important;
 		height: 100%;
 		display: flex;
-		justify-content: space-between;
+		justify-content: center;
 		align-items: center;
 		padding: 50px 20px;
 	}
 
+	#caseStudies #video main > div {
+		width: 50%;
+	}
+
+	#caseStudies #video main #zulilyLogo {
+		width: 100px;
+	}
+
 	#caseStudies #video main img {
 		max-width: 100%;
 	}
 
 	#caseStudies #video h3 {
-		max-width: 60%;
-		margin: 1em 0;
+		font-size: 32px;
+		font-weight: 300;
+		line-height: 38px;
+		max-width: 80%;
+		margin: 0 0 1em 0;
 	}
 
 	#caseStudies #video p {
@@ -151,7 +175,7 @@
 	
 	#caseStudies .feature {
 		position: relative;
-		padding: 20px 0 20px 220px;
+		padding: 20px 0 20px 242px;
 	}
 	
 	#caseStudies .feature img {
@@ -201,6 +225,11 @@
 		margin-bottom: 0.5em;
 	}
 	
+	#caseStudies .feature p.quote {
+		font-size: 20px;
+		line-height: 28px !important;
+	}
+	
 	@media screen and (max-width: 1024px){
 		.case-study {
 			padding: 0 10%;
@@ -209,7 +238,6 @@
 
 		.case-study img {
 			position: relative;
-			width: 100%;
 		}
 
 		.case-study p.quote {
@@ -223,13 +251,16 @@
 
 	@media screen and (max-width: 900px){
 		#caseStudies #video main {
-			flex-wrap: wrap;
-			justify-content: center;
+			flex-direction: column;
+			align-items: center;
 		}
 
-		#caseStudies #video main > * {
-			width: 100%;
-			text-align: center;
+		#caseStudies #video main > div {
+			width: 400px;
+		}
+
+		#caseStudies #video main > div + div {
+			margin-top: 30px;
 		}
 
 		#caseStudies #video h3 {
@@ -241,20 +272,39 @@
 		.case-study {
 			width: 100%;
 		}
-	}
 
-	@media screen and (max-width: 480px){
+		.case-study:nth-child(3) {
+			margin-bottom: 60px;
+		}
+
+		.case-study img {
+			left: 50%;
+			transform: translateX(-50%);
+		}
+
 		#caseStudies .feature {
 			margin-top: 50px;
 			padding: 180px 0 0;
 		}
-		
+
 		#caseStudies .feature img {
 			top: 0;
 			left: 50%;
 			transform: translateX(-50%);
 		}
-		
+	}
+
+	@media screen and (max-width: 480px){
+		#caseStudies #hero {
+			padding-right: 20px;
+			padding-left: 20px;
+		}
+
+		#caseStudies #video main > div {
+			width: 80%;
+			min-width: 280px;
+		}
+
 		.bullet {
 			width: 100%;
 		}

case-studies/index.html

@@ -8,23 +8,23 @@ title: Case Studies
 
 <section id="hero" class="light-text">
 	<h1>Kubernetes User Case Studies</h1>
+	<h5>A collection of users running Kubernetes in production.</h5>
 </section>
 
 <section id="mainContent">
 	<main>
 		<div class="content">
-			<h3>Featured User Case Studies</h3>
 			<div class="case-studies">
 				<div class="case-study">
 					<img src="/images/case_studies/pearson.png" alt="Pearson">
 					<p class="quote">“We chose Kubernetes because of its flexibility, ease of management and the way it improves our engineers’ productivity.”</p>
-					<p class="attrib">— Chris Jackson, Director for Cloud Product Engineering, Pearson</p>
+					<!--<p class="attrib">— Chris Jackson, Director for Cloud Product Engineering, Pearson</p>-->
 					<a href="./pearson/">Read about Pearson</a>
 				</div>
 				<div class="case-study">
 					<img src="/images/case_studies/wikimedia.png" alt="Wikimedia">
 					<p class="quote">“With Kubernetes, we’re simplifying our environment and making it easier for developers to build the tools that make wikis run better.”</p>
-					<p class="attrib">— Yuvi Panda, Operations Engineer, Wikimedia Foundation</p>
+					<!--<p class="attrib">— Yuvi Panda, Operations Engineer, Wikimedia Foundation</p>-->
 					<a href="./wikimedia/">Read about Wikimedia</a>
 				</div>
 				<div class="case-study">
@@ -44,12 +44,18 @@ title: Case Studies
 
 <section id="video">
 	<main>
+		<!--<div>-->
+			<!--<h3>“I don’t want to deploy software the old way ever again”</h3>-->
+			<!--<p class="attrib">— Dylan Carney, Lead Software Engineer, Zulily</p>-->
+			<!--<img src="/images/case_studies/zulily.png" id="zulilyLogo" alt="zulily">-->
+		<!--</div>-->
+		<!--<div><button onclick="kub.showVideo()"><img src="/images/case_studies/video_thumb.jpg" alt="Zulily video"><h6>Kubernetes at zulily</h6></button></div>-->
 		<div>
-			<img src="/images/case_studies/zulily.png" alt="zulily">
-			<h3>“I don’t want to deploy software the old way ever again”</h3>
-			<p class="attrib">— Dylan Carney, Lead Software Engineer, Zulily</p>
+			<h3>SAP</h3>
+			<p class="attrib" style="font-style: normal">SAP's OpenStack, running on Kubernetes in production</p>
+			<img src="/images/case_studies/sap_small.png" id="zulilyLogo" alt="SAP">
 		</div>
-		<div><button onclick="kub.showVideo()"><img src="/images/case_studies/video_thumb.jpg" alt="Zulily video"><h6>Kubernetes at zulily</h6></button></div>
+		<div><button onclick="kub.showVideo()"><img src="/images/case_studies/video_thumb.jpg" alt="SAP video"><h6>Kubernetes at SAP</h6></button></div>
 	</main>
 </section>
 
@@ -70,7 +76,12 @@ title: Case Studies
 			<a target="_blank" href="http://superuser.openstack.org/articles/how-ancestry-com-s-open-source-strategy-combines-kubernetes-and-openstack"><img src="/images/case_studies/ancestry.png" alt="Ancestry.com"></a>
 			<a target="_blank" href="https://cloud.google.com/customers/ccp-games/"><img src="/images/case_studies/ccp.png" alt="CCP Games"></a>
 			<a target="_blank" href="https://www.openstack.org/videos/video/running-kubernetes-on-openstack-at-liveperson"><img src="/images/case_studies/liveperson.png" alt="LivePerson"></a>
-			<a target="_blank" href="http://techblog.yahoo.co.jp/infrastructure/os_n_k8s/"><img src="/images/case_studies/yahoojapan.png" alt="Yahoo! Japan"></a>
+			<a target="_blank" href="http://techblog.yahoo.co.jp/infrastructure/os_n_k8s/"><img src="/images/case_studies/yahooJapan_logo.png" alt="Yahoo! Japan"></a>
+			<a target="_blank" href="https://blog.box.com/blog/kubernetes-box-microservices-maximum-velocity/"><img src="/images/case_studies/box_logo.png" alt="Box"></a>
+			<a href="./wikimedia/"><img src="/images/case_studies/wikimedia_logo.png" alt="Wikimedia"></a>
+			<a href="./pearson/"><img src="/images/case_studies/pearson_logo.png" alt="Pearson"></a>
+			<a target="_blank" href="#" onclick="event.preventDefault(); kub.showVideo()"><img src="/images/case_studies/zulily_logo.png" alt="zulily"></a>
+			<a target="_blank" href="http://www.nextplatform.com/2015/11/12/inside-ebays-shift-to-kubernetes-and-containers-atop-openstack/"><img src="/images/case_studies/ebay_logo.png" alt="Ebay"></a>
 			<a target="_blank" href="https://docs.google.com/a/google.com/forms/d/e/1FAIpQLScuI7Ye3VQHQTwBASrgkjQDSS5TP0g3AXfFhwSM9YpHgxRKFA/viewform" class="tell-your-story"><img src="/images/case_studies/story.png" alt="Tell your story"></a>
 		</div>
 	</main>
@@ -78,7 +89,8 @@ title: Case Studies
 
 
 <div id="videoPlayer">
-	<iframe data-url="https://www.youtube.com/watch?v=B0_5Nms8sD0" frameborder="0" allowfullscreen></iframe>
+	<!--<iframe data-url="https://www.youtube.com/watch?v=B0_5Nms8sD0" frameborder="0" allowfullscreen></iframe>-->
+	<iframe data-url="https://youtu.be/4gyeixJLabo" frameborder="0" allowfullscreen></iframe>
 	<button id="closeButton"></button>
 </div>
 {% include footer.html %}

case-studies/pearson.html

@@ -13,12 +13,12 @@ title: Pearson Case Study
 <section id="mainContent">
 	<main>
 		<div class="content">
-			<h3>Using Kubernetes to reinvent the world’s largest educational company</h3>
+			<h3 id="caseStudyTitle">Using Kubernetes to reinvent the world’s largest educational company</h3>
 			<p>
 				Pearson, the world’s education company, serving 75 million learners worldwide, set a goal to more than double that number to 200 million by 2025. A key part of this growth is in digital learning experiences, and that  requires an infrastructure platform that is able to scale quickly and deliver products to market faster. So Pearson’s Cloud Technology team chose Kubernetes to help build a platform to meet the business requirements.			</p>
 			<div class="feature">
 				<img src="/images/case_studies/pearson.png" alt="Pearson">
-				<p>
+				<p class="quote">
 					“To transform our infrastructure, we had to think beyond simply enabling automated provisioning, we realized we had to build a platform that would allow Pearson developers to build manage and deploy applications in a completely different way. We chose Kubernetes because of its flexibility, ease of management and the way it would improve our engineers’ productivity.”				</p>
 				<p class="attrib">— Chris Jackson, Director for Cloud Product Engineering, Pearson</p>
 			</div>

case-studies/wikimedia.html

@@ -13,13 +13,13 @@ title: Wikimedia Case Study
 <section id="mainContent">
 	<main>
 		<div class="content">
-			<h3>Using Kubernetes to Build Tools to Improve the World's Wikis</h3>
+			<h3 id="caseStudyTitle">Using Kubernetes to Build Tools to Improve the World's Wikis</h3>
 			<p>
 				The non-profit Wikimedia Foundation operates some of the largest collaboratively edited reference projects in the world, including Wikipedia. To help users maintain and use wikis, it runs Wikimedia Tool Labs, a hosting environment for community developers working on tools and bots to help editors and other volunteers do their work, including reducing vandalism. The community around Wikimedia Tool Labs began forming nearly 10 years ago.
 			</p>
 			<div class="feature">
 				<img src="/images/case_studies/wikimedia.png" alt="Wikimedia">
-				<p>
+				<p class="quote">
 					“Wikimedia Tool Labs is vital for making sure wikis all around the world work as well as they possibly can. Because it’s grown organically for almost 10 years, it has become an extremely challenging environment and difficult to maintain. It’s like a big ball of mud — you really can’t see through it. With Kubernetes, we’re simplifying the environment and making it easier for developers to build the tools that make wikis run better.”
 				</p>
 				<p class="attrib">— Yuvi Panda, operations engineer at Wikimedia Foundation and Wikimedia Tool Labs</p>