++++
<style>
  * {
    box-sizing: border-box;
  }

  body {
    font-family: Arial, Helvetica, sans-serif;
  }

  .card {
    cursor: pointer;
    padding: 16px;
    text-align: left;
    color: #000;
  }

  .card:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    padding: 16px;
    text-align: left;
  }

  #guide a.no-text-decoration:hover {
    text-decoration: none!important;
  }

  .icon {
    width: 24px;
    height: 24px;
    background-position: bottom;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .ul-col-1 {
    columns: 1;
    -webkit-columns: 1;
    -moz-columns: 1;
  }

  @media (min-width:769px) {
    .ul-col-md-2 {
      columns: 2;
      -webkit-columns: 2;
      -moz-columns: 2;
    }
  }
  #guide h3.gtk {
  margin-top: 0;
}

.mb-4, .my-4 {
  margin-bottom: 0!important;
}
</style>

<div class="legalnotice"></div>

<div class="row my-4">
  <div class="col-md-6 col-12">
    <p></p>
    <h2>Bring your data to life</h2>
    <p>
      Kibana is a user interface that lets you visualize your Elasticsearch data and navigate the Elastic Stack.
      Take this tutorial for the basics of visualizing data.
    </p>
    <p>
      <a href="get-started.html">
        <button class="btn btn-primary">Create a visualization</button>
      </a>
    </p>
    <p>
      <a class="inline-block mr-3" href="https://www.elastic.co/guide/en/kibana/8.8/whats-new.html">What's new</a>
      <a class="inline-block mr-3" href="https://www.elastic.co/guide/en/kibana/8.8/release-notes.html">Release notes</a>
      <a class="inline-block mr-3" href="install.html">Install</a>
    </p>
  </div>
  <div class="col-md-6 col-12">
    <img class="w-100" src="https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt9068c0f145771649/633b72121434a77dfebf7301/kibana.png" />
  </div>
</div>

<h3 class="gtk">Get to know Kibana</h3>

<div class="my-5">
  <div class="d-flex align-items-center mb-3">
    <h4 class="mt-3">
      <span class="inline-block float-left icon mr-2" style="background-image: url('https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt4608a3aa29a0ed9c/637e67358db6e810ab77c1e8/kibana-logo.png');"></span>
      Get started
    </h4>
  </div>
  <ul class="ul-col-md-2 ul-col-1">
    <li>
      <a href="introduction.html">What is Kibana?</a>
    </li>
    <li>
      <a href="get-started.html">How to use Kibana</a>
    </li>
    <li>
      <a href="kibana-concepts-analysts.html">Understand Kibana concepts</a>
    </li>
    <li>
      <a href="connect-to-elasticsearch.html">Add data to Kibana</a>
    </li>
  </ul>
</div>

<div class="my-5">
  <div class="d-flex align-items-center mb-3">
    <h4 class="mt-3">
      <span class="inline-block float-left icon mr-2" style="background-image: url('https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltaab09880054ab560/634d9d7ac96b72418f47af78/icon-upgrade-assistant-32-color.png');"></span>
      Install and upgrade
    </h4>
  </div>
  <ul class="ul-col-md-2 ul-col-1">
    <li>
      <a href="install.html">Install</a>
    </li>
    <li>
      <a href="settings.html">Configure settings</a>
    </li>
    <li>
      <a href="upgrade.html">Prepare for an upgrade</a>
    </li>
    <li>
      <a href="managing-licenses.html">Update your license</a>
  </ul>
</div>

<div class="my-5">
  <div class="d-flex align-items-center mb-3">
    <h4 class="mt-3">
      <span class="inline-block float-left icon mr-2" style="background-image: url('https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt339897734cf6f1a5/634d9d7aad35ab2389acb5f8/icon-visualizer-32-color.png');"></span>
      Discover, visualize, and share
    </h4>
  </div>
  <ul class="ul-col-md-2 ul-col-1">
    <li>
      <a href="discover.html">Discover what's in your data</a>
    </li>
    <li>
      <a href="dashboard.html">Build charts and dashboards</a>
    </li>
    <li>
      <a href="maps.html">Map geographic data</a>
    </li>
    <li>
      <a href="canvas.html">Design presentations</a>
    </li>
    <li>
      <a href="xpack-graph.html">Graph patterns and relationships</a>
    </li>
    <li>
      <a href="xpack-ml.html">Model, predict, and detect behavior</a>
    </li>
    <li>
      <a href="reporting-getting-started.html">Generate and share reports</a>
    </li>

    <li>
      <a href="alerting-getting-started.html">Alert and take action</a>
    </li>

    <li>
      <a href="kuery-query.html">Use Kibana Query Language</a>
    </li>
    <li>
      <a href="data-views.html">Learn about data views</a>
    </li>
  </ul>
</div>


<div class="my-5">
  <div class="d-flex align-items-center mb-3">
    <h4 class="mt-3">
      <span class="inline-block float-left icon mr-2" style="background-image: url('https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt9d2fce38d6c4314f/634d9d7abbff0b3fd98e0e73/icon-management-32-color.png');"></span>
      Manage and secure
    </h4>
  </div>
  <ul class="ul-col-md-2 ul-col-1">
    <li>
      <a href="management.html">Manage data and indices</a>
    </li>
    <li>
      <a href="tutorial-secure-access-to-kibana.html">Configure access and security</a>
    </li>
    <li>
      <a href="xpack-monitoring.html">Monitor the Elastic Stack</a>
    </li>
    <li>
      <a href="advanced-options.html">Customize Kibana</a>
    </li>
    <li>
      <a href="cases.html">Investigate cases</a>
    </li>
    <li>
      <a href="kibana-troubleshooting.html">Troubleshoot</a>
    </li>
  </ul>
</div>

<div class="my-5">
  <div class="d-flex align-items-center mb-3">
    <h4 class="mt-3">
      <span class="inline-block float-left icon mr-2" style="background-image: url('https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltf6be06b964edf05e/634d9d7ab3f39b38fccfd0b4/icon-spaces-32-color.png');"></span>
      Get organized
    </h4>
  </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="managing-tags.html">Quickly find apps and objects</a>
    </li>
    <li>
      <a href="managing-saved-objects.html">Manage the objects you saved</a>
    </li>
  </ul>
</div>

<div class="my-5">
  <div class="d-flex align-items-center mb-3">
    <h4 class="mt-3">
      <span class="inline-block float-left icon mr-2" style="background-image: url('https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blte10aca67249f6bcb/634d9d7a6245b53fdaedc06b/icon-dev-tools-32-color.png');"></span>
      Tools, APIs, and Dev docs
    </h4>
  </div>
  <ul class="ul-col-md-2 ul-col-1">
    <li>
      <a href="console-kibana.html">Console</a>
    </li>
    <li>
      <a href="console-kibana.html">Search profiler</a>
    </li>
    <li>
      <a href="api.html">REST APIs</a>
    </li>
    <li>
      <a href="development.html">Developer docs</a>
    </li>
  </ul>
</div>

<h3>Explore by Elastic solution</h3>

<div class="row my-4">
  <div class="col-md-4 col-12 mb-2">
    <a class="no-text-decoration" href="https://www.elastic.co/guide/en/enterprise-search/current/start.html">
      <div class="card h-100">
        <h4 class="mt-3">
          <span class="inline-block float-left icon mr-2" style="background-image: url('https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt11200907c1c033aa/634d9da119d8652169cf9b2b/enterprise-search-logo-color-32px.png');"></span>
          Enterprise Search
        </h4>
        <p>Create search experiences for your content, wherever it lives.</p>
      </div>
    </a>
  </div>
  <div class="col-md-4 col-12 mb-2">
    <a class="no-text-decoration" href="https://www.elastic.co/guide/en/starting-with-the-elasticsearch-platform-and-its-solutions/current/getting-started-observability.html">
      <div class="card h-100">
        <h4 class="mt-3">
          <span class="inline-block float-left icon mr-2" style="background-image: url('https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/bltaa08b370a00bbecc/634d9da14e565f1cdce27f7c/observability-logo-color-32px.png');"></span>
          Observability
        </h4>
        <p>Learn how to monitor logs, metrics, and traces.</p>
      </div>
    </a>
  </div>
  <div class="col-md-4 col-12 mb-2">
    <a class="no-text-decoration" href="https://www.elastic.co/guide/en/security/current/es-overview.html">
      <div class="card h-100">
        <h4 class="mt-3">
          <span class="inline-block float-left icon mr-2" style="background-image: url('https://images.contentstack.io/v3/assets/bltefdd0b53724fa2ce/blt5e0e0ad9a13e6b8c/634d9da18473831f96bbdf1e/security-logo-color-32px.png');"></span>
          Security
        </h4>
        <p>Learn how to defend against threats across your environment.</p>
      </div>
    </a>
  </div>
</div>

<script>
window.addEventListener("DOMContentLoaded", (event) => {
  const left_col = document.getElementById("left_col")
  left_col.classList.remove('col-0')
  left_col.classList.add("col-12", "col-md-4", "col-lg-3", "h-almost-full-md", "sticky-top-md")
  const right_col = document.getElementById("right_col")
  right_col.classList.add('d-none')
  const middle_col = document.getElementById("middle_col")
  middle_col.classList.remove("col-lg-7")
  middle_col.classList.add("col-lg-9", "col-md-8")
  const toc = middle_col.getElementsByClassName("toc")[0]
  toc.remove()
  left_col.appendChild(toc);
});
</script>
++++