home page new design implementation (#6041)

* home page new design implementation

* styling fixes

overrides/assets/stylesheets/home.css

@@ -226,10 +226,17 @@ h2.secondary-headline, h3.trusted-by {
 .trying-it-all-container .normal-text {
   font-weight: 600;
   margin: 0 auto 2rem;
-  max-width: 75%;
   color:var(--nav-item-color);
 }
 
+.why-serverless-container .normal-text-head{
+  color:var(--nav-item-color);
+  width:85%;
+  font-weight: 600;
+  text-align: center;
+  margin: auto;
+}
+
 .why-serverless-container .md-typeset h1,
 .trying-it-all-container .md-typeset h1 {
   margin-bottom: 1rem;
@@ -244,6 +251,7 @@ h2.secondary-headline, h3.trusted-by {
 
 .why-serverless-container .normal-text {
   font-size: .8rem;
+  margin: 10px;
 }
 
 .img-table {
@@ -260,18 +268,31 @@ h2.secondary-headline, h3.trusted-by {
   display: flex;
   flex-direction: column;
   flex: 1;
+  height: 200px;
   max-width: 80%;
   margin-left: auto;
   margin-right: auto;
+  align-items: center;
+  margin-top: 1rem;
 }
 
-.why-serverless-container .md-typeset img {
-  max-width: 120px;
+.img-wrapper {
+  position: relative;
+  width: 120px;
+  height: 120px;
+}
+
+.reason-img img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   transform: scale(1);
   transition: transform 0.25s ease-in-out 0s;
 }
 
-.why-serverless-container .md-typeset img:hover {
+.reason-img img:hover {
   transform: scale(1.15);
 }
 
@@ -286,6 +307,7 @@ h2.secondary-headline, h3.trusted-by {
   margin-left: 1%;
   font-size: .8rem;
   margin-top: -1rem;
+  text-align: center;
 }
 
 .knative-components-container .text-table .normal-text:last-child {
@@ -303,9 +325,15 @@ h2.secondary-headline, h3.trusted-by {
   max-width: 80%;
   margin: auto;
   padding: 0 2.5em;
+  align-items: center;
+  justify-content: center;
 }
 
 /* trying it all container css */
+.trying-it-all-container .reason-img img{
+position: relative;
+}
+
 .trying-it-all-container .reason-img {
   margin: auto;
   height: 130px;
@@ -328,6 +356,7 @@ h2.secondary-headline, h3.trusted-by {
 
 .trying-it-all-container .img-col img {
   height: 130px;
+  width: 100%;
 }
 
 .trying-it-all-container .img-col:last-child img {
@@ -340,7 +369,7 @@ h2.secondary-headline, h3.trusted-by {
   padding: 0.5rem 2em;
   background-color: var(--md-primary-fg-color--dark);
   color: white;
-  margin-top: 1em;
+  margin-top: 5rem;
   border-radius: 0.7rem;
 }
 
@@ -487,6 +516,8 @@ h2.secondary-headline, h3.trusted-by {
 
   .knative-components-container .text-table .normal-text {
     width: 80%;
+    text-align: center;
+
   }
 
   .knative-components-container .text-table .normal-text:first-child {

overrides/home.html

@@ -48,7 +48,7 @@
   <section class="why-serverless-container">
     <div class="md-grid md-typeset">
       <h1>Why serverless containers?</h1>
-      <p class="normal-text">
+      <p class="normal-text-head">
         Serverless refers to running back-end programs and processes in the cloud. Serverless works on an as-used basis,
         meaning that companies only use what they pay for. Knative is a platform-agnostic
         solution for running serverless deployments.
@@ -57,9 +57,11 @@
         <div class="img-row">
           <div class="img-col">
             <div class="reason-img">
-              <img src="images/home-images/blue_simple_abstractions_icon.svg"
-                onmouseover="this.src='images/home-images/dkblue_simple_abstractions_icon.svg'"
-                onmouseout="this.src='images/home-images/blue_simple_abstractions_icon.svg'" alt="" draggable="false">
+              <div class="img-wrapper">
+                <img src="images/home-images/blue_simple_abstractions_icon.svg"
+                  onmouseover="this.src='images/home-images/dkblue_simple_abstractions_icon.svg'"
+                  onmouseout="this.src='images/home-images/blue_simple_abstractions_icon.svg'" alt="" draggable="false">
+              </div>
             </div>
             <div class="reason-text">
               <h2>Simpler Abstractions</h2>
@@ -70,9 +72,11 @@
           </div>
           <div class="img-col">
             <div class="reason-img">
-              <img src="images/home-images/blue_autoscaling_icon.svg"
-                onmouseover="this.src='images/home-images/dkblue_autoscaling_icon.svg'"
-                onmouseout="this.src='images/home-images/blue_autoscaling_icon.svg'" alt="" draggable="false">
+              <div class="img-wrapper">
+                <img src="images/home-images/blue_autoscaling_icon.svg"
+                  onmouseover="this.src='images/home-images/dkblue_autoscaling_icon.svg'"
+                  onmouseout="this.src='images/home-images/blue_autoscaling_icon.svg'" alt="" draggable="false">
+              </div>
             </div>
             <div class="reason-text">
               <h2>Autoscaling</h2>
@@ -83,9 +87,11 @@
           </div>
           <div class="img-col">
             <div class="reason-img">
-              <img src="images/home-images/blue_progressive_rollouts_icon.svg"
-                onmouseover="this.src='images/home-images/dkblue_progressive_rollouts_icon.svg'"
-                onmouseout="this.src='images/home-images/blue_progressive_rollouts_icon.svg'" alt="" draggable="false">
+              <div class="img-wrapper">
+                <img src="images/home-images/blue_progressive_rollouts_icon.svg"
+                  onmouseover="this.src='images/home-images/dkblue_progressive_rollouts_icon.svg'"
+                  onmouseout="this.src='images/home-images/blue_progressive_rollouts_icon.svg'" alt="" draggable="false">
+              </div>
             </div>
             <div class="reason-text">
               <h2>Progressive Rollouts</h2>
@@ -98,9 +104,11 @@
         <div class="img-row">
           <div class="img-col">
             <div class="reason-img">
-              <img src="images/home-images/blue_event_intergrations_icon.svg"
-                onmouseover="this.src='images/home-images/dkblue_event_intergrations_icon.svg'"
-                onmouseout="this.src='images/home-images/blue_event_intergrations_icon.svg'" alt="" draggable="false">
+              <div class="img-wrapper">
+                <img src="images/home-images/blue_event_intergrations_icon.svg"
+                  onmouseover="this.src='images/home-images/dkblue_event_intergrations_icon.svg'"
+                  onmouseout="this.src='images/home-images/blue_event_intergrations_icon.svg'" alt="" draggable="false">
+              </div>
             </div>
             <div class="reason-text">
               <h2>Event Integrations</h2>
@@ -111,9 +119,11 @@
           </div>
           <div class="img-col">
             <div class="reason-img">
-              <img src="images/home-images/blue_handle_events_icon.svg"
-                onmouseover="this.src='images/home-images/dkblue_handle_events_icon.svg'"
-                onmouseout="this.src='images/home-images/blue_handle_events_icon.svg'" alt="" draggable="false">
+              <div class="img-wrapper">
+                <img src="images/home-images/blue_handle_events_icon.svg"
+                  onmouseover="this.src='images/home-images/dkblue_handle_events_icon.svg'"
+                  onmouseout="this.src='images/home-images/blue_handle_events_icon.svg'" alt="" draggable="false">
+              </div>
             </div>
             <div class="reason-text">
               <h2>Handle Events</h2>
@@ -124,9 +134,11 @@
           </div>
           <div class="img-col">
             <div class="reason-img">
-              <img src="images/home-images/blue_plugable_icon.svg"
-                onmouseover="this.src='images/home-images/dkblue_plugable_icon.svg'"
-                onmouseout="this.src='images/home-images/blue_plugable_icon.svg'" alt="" draggable="false">
+              <div class="img-wrapper">
+                <img src="images/home-images/blue_plugable_icon.svg"
+                  onmouseover="this.src='images/home-images/dkblue_plugable_icon.svg'"
+                  onmouseout="this.src='images/home-images/blue_plugable_icon.svg'" alt="" draggable="false">
+              </div>
             </div>
             <div class="reason-text">
               <h2>Plugable</h2>
@@ -139,7 +151,7 @@
       </div>
     </div>
   </section>
-
+  
   <section class="knative-components-container">
     <div class="md-grid md-typeset">
       <h1>Knative Components</h1>