mf-maintenance-popup.html

mf-maintenance-popup.html

<div class="modal fade" tabindex="-1" role="dialog" id="maintenance-popup">
  <div class="card-popup">
    <header class="card-popup__header">
      <b class="card-popup__header__title">Aviso</b>
      <button type="button" data-toggle="modal" data-target="#maintenance-popup">
        <i class="fas fa-times"></i>          
      </button>
    </header>
    <section class="card-popup__section">
      <h3 class="card-popup__section__heading">
        <span>A</span> <b>Área do cliente</b> <span>está em manutenção.</span>
      </h3>
      <p class="card-popup__section__paragraph">
        <span>Para informações, entre em contato conosco:</span><br>
        <b>(85) 3261-9080 / (85) 99937-0211</b>
      </p>
    </section>
  </div>
</div><!-- /.modal -->

<script>
  $('#maintenance-popup').modal('show');
</script>

<style>
  .card-popup {
    z-index: 999;
    background: #00000040;
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-transform: uppercase;
  }
  .card-popup__header {
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 35px;
    background: #29166f;
    color: white;
    width: 40%;
    margin: 0 auto;
    border-bottom: 1px solid white;
  }
  .card-popup__header__title {
    font-size: 20px;
    text-transform: uppercase;
  }
  .card-popup__section {
    padding: 100px 0;
    text-align: center;
    background: #29166f;
    color: white !important;
    width: 40%;
    margin: 0 auto;
  }
  .card-popup__section__heading {
    font-size: 27px;
  }
  .card-popup__section__heading span {
    font-size: 27px;
    font-weight: 400;
  }
  .card-popup__section__paragraph{
    font-size: 17px;
    font-weight: 400;
    color: white !important;
  }
</style>