what we do section

by kontrach

HTML

<section id="what-we-do">
  <h2>WE ARE DOING OUR BEST FOR YOUR CONVENIENCE</h2>
  <ul>
    <li class="do-item">
      <div class="header-we-do">
        <h3>CAREFUL EMPLOYEES</h3>
      </div>
      <div class="do-item-text">
        <p>We carefully examine and interview every caregiver to offer professional and compassionate help with the
          highest safety of our clients.
        </p>
      </div>
      <div id="logo-nurse" class="img-container">
        <img src="img/nurse.png" alt="logo">
      </div>
    </li>
    <li class="do-item">
      <div class="header-we-do">
        <h3>EASY TO START</h3>
      </div>
      <div class="do-item-text">
        <p>Stay in touch with your assistant and get the real-time and detailed information about all conditions 
          and state of health of your loved ones.</p>
      </div>
      <div id="logo-phone" class="img-container">
        <img src="img/phone.png" alt="logo">
      </div>
    <li class="do-item">
      <div class="header-we-do">
        <h3>DEDICATED SUPPORT</h3>
      </div>
      <div class="do-item-text">
        <p>Along with the 24\7 support our clients are provided with their personal Care Manager who always 
          helps with scheduling of medical or non-medical activities and home services.</p>
      </div>
      <div id="logo-support" class="img-container">
        <img src="img/support.png" alt="logo">
      </div>
    <li class="do-item">
      <div class="header-we-do">
        <h3>FLEXIBLE SCHEDULING</h3>
      </div>
      <div class="do-item-text">
        <p>Schedule care by the hour and pay by the hour. We do not offer long-term care contacts.</p>
      </div>
      <div id="logo-schedule" class="img-container">
        <img src="img/schedule.png" alt="logo">
      </div>
    </li>
  </ul>
</section>

CSS

#what-we-do h2{
    text-align: center;
    color:#229bbf;
    font-size: 2em;
  }

  #what-we-do ul{
    display: flex;
    justify-content: space-around
  }

  .do-item{
    /* adjust colors later */
    border: 1px solid lightgray;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    flex: 0 1 300px;
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .do-item-text{
    text-align: center;
    color: gray;
    padding: 15px;
    font-size: 14px;
  }
  .header-we-do{
    width: 100%;
    box-sizing: border-box;
    padding: 15px 10px;
    text-align: center;
  }

  #what-we-do .img-container{
    margin: 15px 0;
  }

  @media (max-width: 1100px) {
    #what-we-do ul{
      flex-wrap: wrap;
    }

    .do-item{
      margin: 20px 40px;
    }
  }