#

<div class="header">
  <div class="inner">
    <img src="/static/images/icons/icons-thin-cloud.svg" alt="Cloud Icon">
    <div>
      <h1 style="color: #222;">Cloud</h1>
      <p style="padding-left: 2rem; margin-bottom: 0; color: #222;">Deploy with containers and serverless on AWS.</p>
    </div>
  </div>
</div>

Secure, scalable, and home to the most advanced services, from AI to IoT. Build your future in the cloud with the leading ecosystem for innovation: Amazon Web Services.

<div class="row" style="margin-top: 2.5rem;">
  <div class="col">
    <div class="card text-center">
      <img src="/static/images/logos/aws-logo.jpg" alt="AWS Logo">
      <h3>AWS</h3>
      <p class="content">Host and scale your apps on the world's most powerful cloud platform.</p>
      <p style="margin-bottom: 10px;"><a href="/quickstart/cloud/aws" class="no-link">INSTALL</a></p>
    </div>
  </div>
  <div class="col">
    <div class="card text-center">
      <img src="/static/images/logos/serverless-keycloak.png" alt="Keycloak Logo">
      <h3>Keycloak</h3>
      <p class="content">Identity and access management solution for authentication and authorization services.</p>
      <p style="margin-bottom: 10px;"><a href="/quickstart/cloud/keycloak" class="no-link">INSTALL</a></p>
    </div>
  </div>
  <div class="col">
    <div class="card text-center">
      <img src="/static/images/logos/kubernetes-pro-logo.jpg" alt="Kubernetes Logo">
      <h3>Kubernetes</h3>
      <p class="content">Deploy websites and apps in containers at scale with Kubernetes and AWS.</p>
      <p style="margin-bottom: 10px;"><a href="/quickstart/cloud/kubernetes" class="no-link">INSTALL</a></p>
    </div>
  </div>
  <div class="col">
    <div class="card text-center">
      <img src="/static/images/logos/datadog-logo.png" alt="Datadog Logo">
      <h3>Datadog</h3>
      <p class="content">Monitor cloud-scale apps, databases, containers and more with SaaS analytics.</p>
      <p style="margin-bottom: 10px;"><a href="/quickstart/cloud/datadog" class="no-link">INSTALL</a></p>
    </div>
  </div>
  <div class="col">
    <div class="card text-center">
      <img src="/static/images/logos/ses-logo.png" alt="SES Logo">
      <h3>SES</h3>
      <p class="content">Flexible, scalable, and cost-effective email service.</p>
      <p style="margin-bottom: 10px;"><a href="/quickstart/cloud/ses" class="no-link">INSTALL</a></p>
    </div>
  </div>
</div>

<style>
  /* Cards */
  .card {
    border: 1px solid #dee2e6;
    box-shadow: 0 1px 15px rgba(0, 0, 0, .15);
    height: 100%;
    box-sizing: content-box;
    padding: 1.5rem;
  }
  .card h3 {
    margin-top: 2rem;
    font-size: 1.4rem;
  }
  .card a {
    margin-top: .7rem;
    padding: .5rem 2.5rem;
    font-size: .9rem;
    border-radius: 25px;
    background-color: #0488ce;
    color: #fff!important;
  }
  .card img {
    height: 80px;
  }
  .card.card-color {
    border-radius: 35px;
    background-color: #0488ce;
    color: #fff;
  }
  .card.card-color h3 {
    color: #fff;
  }
  .card.card-color a {
    border: 1.5px solid #fff;
    background-color: #fff;
    color: #0488ce!important;
  }
  .card.card-color a:hover {
    color: #0488ce!important;
  }
  .card p.content {
    height: 100px;
    font-size: .9rem;
  }
  /* Headers */
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 1.5rem;
    margin-bottom: 2rem;
    background-color: #eef6ff;
  }
  .header .inner {
    display: flex;
    align-items: center;
    justify-content: start;
  }
  .header img {
    width: 80px;
  }
  .header h1 {
    margin-left: 0;
    font-size: 2rem;
    margin-bottom: 0.25rem;
  }
  .header p {
    padding-left: 2rem;
    margin-bottom: 0;
  }
</style>