From d0d6f0feecd9a3059b66516a3e52f389ccc741da Mon Sep 17 00:00:00 2001
From: Colleen McGinnis <colleen.mcginnis@elastic.co>
Date: Mon, 15 Aug 2022 14:09:33 -0500
Subject: [PATCH] html, css updates

use one column on medium screens and smaller

clean up

clean up again
---
 docs/index-custom-title-page.html | 466 +++++++++++++-----------------
 1 file changed, 202 insertions(+), 264 deletions(-)

diff --git a/docs/index-custom-title-page.html b/docs/index-custom-title-page.html
index 6a7f94d6aaedd..00cef2db275be 100644
--- a/docs/index-custom-title-page.html
+++ b/docs/index-custom-title-page.html
@@ -1,284 +1,222 @@
-<div class="legalnotice">
-
-<p>
-<table>
-    <tr>
-      <td>
-        <p>
-          From creating beautiful visualizations to managing the Elastic Stack, learn how Kibana helps
-          you get the most of your data.
-        </p>
-        <p>
-          <a href="https://www.elastic.co/guide/en/kibana/current/get-started.html">
-            <img src="https://i.imgur.com/VkY9gnh.png" , style="width: 120px" />
-          </a>
-        </p>
-        <p><a href="https://www.elastic.co/guide/en/kibana/current/setup.html">Set up</a> |
-          <a href="https://www.elastic.co/videos/training-how-to-series-stack">How-to videos</a> |
-          <a href=https://www.elastic.co/guide/en/kibana/8.3/release-notes-8.3.0.html">Release docs</a>
-        </p>
-
-      </td>
-      <td>
-        <img src="https://i.imgur.com/Xg4tPtJ.png", style="width: 100%" />
-      </td>
-    </tr>
-  </table>
-
-<p>&nbsp;</p>
-
 <style>
-* {
-  box-sizing: border-box;
-}
+  * {
+    box-sizing: border-box;
+  }
+  
+  body {
+    font-family: Arial, Helvetica, sans-serif;
+  }
 
-body {
-  font-family: Arial, Helvetica, sans-serif;
-}
+  .card {
+    cursor: pointer;
+    padding: 16px;
+    text-align: left;
+  }
+  
+  .card:hover {
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    padding: 16px;
+    text-align: left;
+  }
+  
+  .card-description {
+    color: #000;
+  }
 
-/* Float four columns side by side */
-.column {
-  float: left;
-  width: 33%;
-  padding: 0 10px;
-}
+  #guide a.no-text-decoration:hover {
+    text-decoration: none!important;
+  }
 
-/* Remove extra left and right margins, due to padding */
-.row {margin: 0 -5px;}
+  .icon {
+    width: 30px;
+    height: 30px;
+    background-position: bottom;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
 
-/* Clear floats after the columns */
-.row:after {
-  content: "";
-  display: table;
-  clear: both;
-}
+  .section-title {
+    font-size: 22px;
+    margin-left: .5rem;
+    font-weight: 700;
+  }
 
-/* Responsive columns */
-@media screen and (max-width: 600px) {
-  .column {
-    width: 100%;
-    display: block;
-    margin-bottom: 20px;
+  .ul-col-1 {
+    columns: 1;
+    -webkit-columns: 1;
+    -moz-columns: 1;
   }
-}
 
-/* Style the counter cards */
-.card {
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-  padding: 16px;
-  text-align: left;
-}
+  @media (min-width:769px) {
+    .ul-col-md-2 {
+      columns: 2;
+      -webkit-columns: 2;
+      -moz-columns: 2;
+    }
+  }
+  
+  @media screen and (max-width: 600px) {
+    
+  }
 </style>
 
-<div class="row">
-  <div class="column">
-    <div class="card">
-        <a href="https://www.elastic.co/guide/en/kibana/current/dashboard.html">
-          Add search experience</a>
-      <p></p>
-      <p>Create search for your app or website, or workplace content.</p>
-    </div>
+<div class="legalnotice"></div>
+
+<div class="row my-4">
+  <div class="col-md-6 col-12">
+    <p>
+      From creating beautiful visualizations to managing the Elastic Stack,
+      learn how Kibana helps you get the most of your data.
+    </p>
+    <p>
+      <a href="get-started.html">
+        <button class="btn btn-primary">Get started</button>
+      </a>
+    </p>
+    <p>
+      <a class="inline-block mr-3" href="setup.html">Set up</a>
+      <a class="inline-block mr-3" href="https://www.elastic.co/videos/training-how-to-series-stack">How-to videos</a>
+      <a class="inline-block mr-3" href="https://www.elastic.co/guide/en/kibana/8.3/release-notes-8.3.0.html">Release docs</a>
+    </p>
   </div>
-
-  <div class="column">
-    <div class="card">
-        <a href="https://www.elastic.co/guide/en/kibana/current/dashboard.html">
-          Monitor logs & metrics</a>
-      <p></p>
-      <p>Get end-to-end observability into your environment.</p>
-    </div>
+  <div class="col-md-6 col-12">
+    <img class="w-100" src="https://i.imgur.com/Xg4tPtJ.png" />
   </div>
+</div>
 
-  <div class="column">
-    <div class="card">
-        <a href="https://www.elastic.co/guide/en/kibana/current/dashboard.html">
-          Protect against threats</a>
-      <p></p>
-      <p>Protect against threats by unifying security in one place.</p>
-    </div>
+<div class="row my-4">
+  <div class="col-md-4 col-12 mb-2">
+    <a class="no-text-decoration" href="dashboard.html">
+      <div class="card">
+        <p class="font-weight-bold">Add search experience</p>
+        <p class="card-description">Create search for your app or website, or workplace content.</p>
+      </div>
+    </a>
+  </div>
+  <div class="col-md-4 col-12 mb-2">
+    <a class="no-text-decoration" href="dashboard.html">
+      <div class="card">
+        <p class="font-weight-bold">Monitor logs & metrics</p>
+        <p class="card-description">Get end-to-end observability into your environment.</p>
+      </div>
+    </a>
+  </div>
+  <div class="col-md-4 col-12 mb-2">
+    <a class="no-text-decoration" href="dashboard.html">
+      <div class="card">    
+        <p class="font-weight-bold">Protect against threats</p>
+        <p class="card-description">Protect against threats by unifying security in one place.</p>
+      </div>
+    </a>
   </div>
-
 </div>
 
+<div class="my-5">
+  <div class="d-flex align-items-center mb-3">
+    <div class="icon" style="background-image: url('https://i.imgur.com/e8Zu260.png');"></div>
+    <div class="section-title">Explore, visualize, and share</div>
+  </div>
+  <ul class="ul-col-md-2 ul-col-1">
+    <li>
+      <a href="discover.html">Search and gain insight</a>
+    </li>
+    <li>
+      <a href="xpack-graph.html">Graph patterns and relationships</a>
+    </li>
+    <li>
+      <a href="dashboard.html">Build charts and dashboards</a>
+    </li>
+    <li>
+      <a href="reporting-getting-started.html">Generate and share reports</a>
+    </li>
+    <li>
+      <a href="canvas.html">Design presentations</a>
+    </li>
+    <li>
+      <a href="alerting-getting-started.html">Alert and take action</a>
+    </li>
+    <li>
+      <a href="maps.html">Map geographic data</a>
+    </li>
+    <li>
+      <a href="kuery-query.html">Use Kibana Query Language</a>
+    </li>
+    <li>
+      <a href="xpack-ml.html">Model, predict, & detect behavior</a>
+    </li>
+    <li>
+      <a href="data-views.html">Learn about data views</a>
+    </li>
+  </ul>
+</div>
 
-<table style="width: 100%">
-
-  <tr>
-    <th>
-      <h3>
-        <img src="https://i.imgur.com/e8Zu260.png" style="width: 36px" />
-        Explore, visualize, and share
-      </h3>
-    </th>
-    <th>&nbsp;</th>
-  </tr>
-  <tr>
-    <td>
-      <a href="https://www.elastic.co/guide/en/kibana/current/discover.html"
-        >Search and gain insight</a
-      >
-    </td>
-    <td>
-      <a href="https://www.elastic.co/guide/en/kibana/current/xpack-graph.html"
-        >Graph patterns and relationships</a
-      >
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <a href="https://www.elastic.co/guide/en/kibana/current/dashboard.html"
-        >Build charts and dashboards</a
-      >
-    </td>
-    <td>
-      <a href="https://www.elastic.co/guide/en/kibana/8.0/reporting-getting-started.html"
-        >Generate and share reports</a
-      >
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <a href="https://www.elastic.co/guide/en/kibana/current/canvas.html">Design presentations</a>
-    </td>
-    <td>
-      <a href="https://www.elastic.co/guide/en/kibana/current/alerting-getting-started.html"
-        >Alert and take action</a
-      >
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <a href="https://www.elastic.co/guide/en/kibana/current/maps.html">Map geographic data</a>
-    </td>
-    <td>
-      <a href="https://www.elastic.co/guide/en/kibana/current/kuery-query.html"
-        >Use Kibana Query Language</a
-      >
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <a href="https://www.elastic.co/guide/en/kibana/current/xpack-ml.html"
-        >Model, predict, & detect behavior</a
-      >
-    </td>
-    <td>
-      <a href="https://www.elastic.co/guide/en/kibana/current/data-views.html"
-        >Learn about data views</a
-      >
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <h3>
-        <img src="https://i.imgur.com/cI3JRfU.png" style="width: 36px" />
-        Get organized
-      </h3>
-    </td>
-    <td>&nbsp;</td>
-  </tr>
-  <tr>
-    <td>
-      <a href="https://www.elastic.co/guide/en/kibana/current/xpack-spaces.html"
-        >Collect related data in spaces</a
-      >
-    </td>
-    <td>
-      <a href="https://www.elastic.co/guide/en/kibana/current/managing-tags.html"
-        >Quickly find apps and objects</a
-      >
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <a href="https://www.elastic.co/guide/en/kibana/current/managing-saved-objects.html"
-        >Tag the objects you saved</a
-      >
-    </td>
-    <td>&nbsp;</td>
-  </tr>
-  <tr>
-    <td>
-      <h3>
-        <img src="https://i.imgur.com/knrZn5B.png" style="width: 36px" />
-        Manage and secure
-      </h3>
-    </td>
-    <td>&nbsp;</td>
-  </tr>
-  <tr>
-    <td>
-      <a href="https://www.elastic.co/guide/en/kibana/current/management.html"
-        >Manage indices, licenses, & more</a
-      >
-    </td>
-    <td>
-      <a href="https://www.elastic.co/guide/en/kibana/current/advanced-options.html"
-        >Customize Kibana</a
-      >
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <a href="https://www.elastic.co/guide/en/kibana/current/tutorial-secure-access-to-kibana.html"
-        >Configure access & security</a
-      >
-    </td>
-    <td>
-      <a href="https://www.elastic.co/guide/en/kibana/current/kibana-troubleshooting.html">
-        Troubleshoot
-      </a>
-    </td>
-  </tr>
-
-  <tr>
-    <td>
-      <a href="https://www.elastic.co/guide/en/kibana/current/xpack-monitoring.html">
-        Monitor the Elastic Stack
-      </a>
-    </td>
-    <td>
-      <a href="https://www.elastic.co/guide/en/kibana/current/upgrade.html"
-        >Prepare for an upgrade</a
-      >
-    </td>
-  </tr>
+<div class="my-5">
+  <div class="d-flex align-items-center mb-3">
+    <div class="icon" style="background-image: url('https://i.imgur.com/cI3JRfU.png');"></div>
+    <div class="section-title">Get organized</div>
+  </div>
+  <ul class="ul-col-md-2 ul-col-1">
+    <li>
+      <a href="xpack-spaces.html">Collect related data in spaces</a>
+    </li>
+    <li>
+      <a href="xpack-spaces.html">Collect related data in spaces</a>
+    </li>
+    <li>
+      <a href="managing-tags.html">Quickly find apps and objects</a>
+    </li>
+    <li>
+      <a href="managing-saved-objects.html">Tag the objects you saved</a>
+    </li>
+  </ul>
+</div>
 
-  <tr>
-    <td>
-      <h3>
-        <img src="https://i.imgur.com/3OEaSup.png" style="width: 36px" />
-        Tools, APIs, and Dev docs
-      </h3>
-    </td>
-    <td>&nbsp;</td>
-  </tr>
-  <tr>
-    <td>
-      <a href="https://www.elastic.co/guide/en/kibana/current/console-kibana.html"
-        >Console</a
-      >
-    </td>
-    <td>
-      <a href="https://www.elastic.co/guide/en/kibana/current/api.html"
-        >REST APIs</a
-      >
-    </td>
-  </tr>
-  <tr>
-    <td>
-      <a href="https://www.elastic.co/guide/en/kibana/current/console-kibana.html"
-        >Search profiler</a
-      >
-    </td>
-    <td>
-      <a href="https://www.elastic.co/guide/en/kibana/current/development.html">
-        Developer docs
-      </a>
-    </td>
-  </tr>
-</table>
+<div class="my-5">
+  <div class="d-flex align-items-center mb-3">
+    <div class="icon" style="background-image: url('https://i.imgur.com/knrZn5B.png');"></div>
+    <div class="section-title">Manage and secure</div>
+  </div>
+  <ul class="ul-col-md-2 ul-col-1">
+    <li>
+      <a href="management.html">Manage indices, licenses, & more</a>
+    </li>
+    <li>
+      <a href="advanced-options.html">Customize Kibana</a>
+    </li>
+    <li>
+      <a href="tutorial-secure-access-to-kibana.html">Configure access & security</a>
+    </li>
+    <li>
+      <a href="kibana-troubleshooting.html">Troubleshoot</a>
+    </li>
+    <li>
+      <a href="xpack-monitoring.html">Monitor the Elastic Stack</a>
+    </li>
+    <li>
+      <a href="upgrade.html">Prepare for an upgrade</a>
+    </li>
+  </ul>
+</div>
 
-<p>&nbsp;</p>
+<div class="my-5">
+  <div class="d-flex align-items-center mb-3">
+    <div class="icon" style="background-image: url('https://i.imgur.com/3OEaSup.png');"></div>
+    <div class="section-title">Tools, APIs, and Dev docs</div>
+  </div>
+  <ul class="ul-col-md-2 ul-col-1">
+    <li>
+      <a href="console-kibana.html">Console</a>
+    </li>
+    <li>
+      <a href="api.html">REST APIs</a>
+    </li>
+    <li>
+      <a href="console-kibana.html">Search profiler</a>
+    </li>
+    <li>
+      <a href="development.html">Developer docs</a>
+    </li>
+  </ul>
+</div>
 
-<p>For more, view <a href="https://www.elastic.co/guide/index.html">all Elastic docs</a></p>.
+<p class="my-4">For more, view <a href="https://www.elastic.co/guide/index.html">all Elastic docs</a>.</p>