implemented the new case study section of the home page (#6032)

* implemented the new case study section of the home page * feedback implementation for case study section * border issue fixed
knative · Jul 18, 2024 · 3d8f6b2 · 3d8f6b2
1 parent 3377a60
commit 3d8f6b2
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 26 deletions.
diff --git a/overrides/assets/stylesheets/home.css b/overrides/assets/stylesheets/home.css
@@ -213,7 +213,7 @@ h2.secondary-headline, h3.trusted-by {
 
 /* why serverless container css */
 .why-serverless-container, .trying-it-all-container {
-  background-color: #f3f1f2;
+  background-color: white;
   color: var(--md-primary-fg-color--light);
 }
 
@@ -384,6 +384,8 @@ position: relative;
   color: black;
   display: flex;
   background-color: #f3f1f2;
+  padding: 1rem;
+  cursor: pointer;
 }
 
 .case-studies-container h1 {
@@ -393,8 +395,33 @@ position: relative;
 .case-studies-container .cases-table {
   display: flex;
   justify-content: center;
-  max-width: 90%;
-  margin: auto;
+  max-width: 100%;
+  margin: 1rem;
+  align-items: center;
+}
+
+.case-studies-container .cases-table a {
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.case-studies-container .cases-table .col {
+  background-color: white;
+  padding: 1.5rem;
+  margin: 1rem 0.5rem;
+  border-radius: 0.7rem;
+  width: 25vw;
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  box-sizing: border-box;
+  transition: border 0.3s ease-in-out;
+  border: 2px solid transparent;
+}
+
+.case-studies-container .cases-table .col:hover {
+  border: 2px solid gray;
 }
 
 .case-studies-container .logo {
@@ -403,15 +430,11 @@ position: relative;
   flex-direction: column;
   justify-content: flex-end;
   padding: 0 2em;
-}
-
-.case-studies-container .col {
-  min-width: 38%;
-  max-width: 40%;
+  padding-top: 2rem;
 }
 
 .case-studies-container .logo img {
-  max-width: 110px
+  max-width: 110px;
 }
 
 .case-studies-container .logo .sva {
@@ -421,16 +444,14 @@ position: relative;
 .case-studies-container .normal-text {
   text-align: start;
   padding: 0 2em;
-  color: var(--nav-item-color);
+  color: var(--md-primary-fg-color--dark);
   font-weight: 600;
-  font-style: italic;
-  line-height: 1.1;
-  font-family: serif;
+  line-height: 1.2;
   font-size: .95rem;
 }
 
 .case-studies-container hr {
-  border-bottom: 2px solid #89c487;
+  border-bottom: 2px solid black;
   display: flow-root;
   margin: .4em 5em -4px 2em;
 }

diff --git a/overrides/home.html b/overrides/home.html
@@ -233,8 +233,8 @@ <h1>
         <a href="{{ 'about/case-studies/' | url }}">Case Studies</a>
       </h1>
       <div class="cases-table">
-        <div class="col">
-          <a href="{{ 'about/case-studies/sva/' | url }}">
+        <a href="{{ 'about/case-studies/sva/' | url }}">
+          <div class="col">
             <div class="logo">
               <img class="sva" src="images/case-studies/sva.png" alt="" draggable="false" />
             </div>
@@ -243,10 +243,10 @@ <h1>
               "Knative allowed the team to centralize their system, scale, audit, and 
               even select events while enforcing policies and simplifying the architecture"<br>
             </p>
-          </a>
-        </div>
-        <div class="col">
-          <a href="{{ 'about/case-studies/ibm/' | url }}">
+          </div>
+        </a>
+        <a href="{{ 'about/case-studies/ibm/' | url }}">
+          <div class="col">
             <div class="logo">
               <img class="ibm" src="images/case-studies/ibm.png" alt="IBM logo" draggable="false" width="75" />
             </div>
@@ -255,10 +255,10 @@ <h1>
               "The introduction of the ML training infrastructure using Knative Eventing 
               has enabled us to establish a well-defined operational boundary for the service teams."<br>
             </p>
-          </a>
-        </div>
-        <div class="col">
-          <a href="{{ 'about/case-studies/pnc/' | url }}">
+          </div>
+        </a>
+        <a href="{{ 'about/case-studies/pnc/' | url }}">
+          <div class="col">
             <div class="logo">
               <img class="pnc" src="images/case-studies/pnc_bank.png" alt="" draggable="false" />
             </div>
@@ -267,11 +267,12 @@ <h1>
               "The power of Knative’s eventing and serverless features allows PNC to bridge processes 
               between Apache Kafka and CI/CD toolchain events and achieve this automated state."<br>
             </p>
-          </a>
-        </div>
+          </div>
+        </a>
       </div>
     </div>
   </section>
+
 
   <section class="cncf-notice-container">
     <h3>Knative is a <a href="https://www.cncf.io/">Cloud Native Computing Foundation</a> incubation project</h3>