#

<div class="header">
  <div class="inner">
    <img src="/static/images/icons/icons-thin-cms.svg" alt="Solodev Logo">
    <div>
      <h1 style="color: #222;">CMS</h1>
      <p style="padding-left: 2rem; margin-bottom: 0; color: #222;">Build websites with hybrid headless features.</p>
    </div>
  </div>
</div>

From enterprise-grade to open source, build amazing sites and apps with the right CMS and deploy in the cloud with Solodev.

<div class="row" style="margin-top: 2.5rem;">
  <div class="col">
    <div class="card text-center">
      <img src="/static/images/solodev-logo.png" alt="Solodev CMS Logo">
      <h3>Solodev CMS</h3>
      <p class="content">Create powerful, secure, and scalable experiences with Solodev CMS</p>
      <p style="margin-bottom: 10px;"><a href="/quickstart/cms/solodev-cms/" class="no-link">INSTALL</a></p>
    </div>
  </div>
  <div class="col">
    <div class="card text-center">
      <img src="/static/images/logos/wordpress-logo.jpg" alt="WordPress Logo">
      <h3>WordPress</h3>
      <p class="content">Build custom blogs and websites with themes, templates, and widgets</p>
      <p style="margin-bottom: 10px;"><a href="/quickstart/cms/wordpress" class="no-link">INSTALL</a></p>
    </div>
  </div>
  <div class="col">
    <div class="card text-center">
      <img src="/static/images/logos/drupal-pro.png" alt="Drupal Logo">
      <h3>Drupal</h3>
      <p class="content">Build simple or complex websites and apps with a leading open source CMS.</p>
      <p style="margin-bottom: 10px;"><a href="/quickstart/cms/drupal" class="no-link">INSTALL</a></p>
    </div>
  </div>
  <div class="col">
    <div class="card text-center">
      <img src="/static/images/logos/cdn.png" alt="CDN Logo">
      <h3>CDN</h3>
      <p class="content">Protect websites and apps with CDN</p>
      <p style="margin-bottom: 10px;"><a href="/quickstart/cms/cdn" 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>