#

<div class="header">
  <div class="inner">
    <img src="/static/images/icons/solodev-developer-icons-thin-mobile.svg" alt="Mobile Icon">
    <div>
      <h1 style="color: #222;">Mobile</h1>
      <p style="padding-left: 2rem; margin-bottom: 0; color: #222;">Manage your mobile apps and listings with a cloud-based solution or scale your enterprise strategy with a turnkey service for publishing to the app stores.</p>
    </div>
  </div>
</div>

<div class="row" style="margin-top: 2.5rem;">
  <div class="col">
    <div class="card text-center">
      <img src="/static/images/logos/apple-logo.png" alt="App Store Logo">
      <h3>App Store</h3>
      <p class="content">Expert support for your iOS app and Apple App store listing</p>
      <p style="margin-bottom: 10px;"><a href="/quickstart/mobile/app-store/" class="no-link">INSTALL</a></p>
    </div>
  </div>
  <div class="col">
    <div class="card text-center">
      <img src="/static/images/logos/google-play.png" alt="Google Play Logo">
      <h3>Google Play</h3>
      <p class="content">Get help with your Android app and Google Play store listing</p>
      <p style="margin-bottom: 10px;"><a href="/quickstart/mobile/google-play/" 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>