Manual_Vantive/contenido/03.html

<style>
  .fake {
    background-image: url(img/bg01.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
  }

  .fake1 {
    background-image: url(img/bg02.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
  }

  .btn-comenzar {
    border-radius: 20px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    cursor: pointer;
  }
</style>
<div id="inicio" class='page-sco py-2 py-md-0 h-100'>
  <div class='container h-100'>
    <div class='row justify-content-center align-items-center h-100'>
      <div class='col-11'>
        <div class='row justify-content-center'>
          <div class="col-12 text-center animate__animated animate__bounceInDown">
            <div class="position-relative d-inline-block">
              <h2 class="text-primary mb-1 fw-bold">Vivir con enfermedad renal</h2>
              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
            </div>
          </div>
          <div class="col-12">
            <div class="row justify-content-center align-items-center">
              <div class="col-6 text-center animate__animated animate__zoomIn">
                <img src="img/03.0.png" class="img-fluid">
              </div>
              <div class="col-6">
                <div class="card bg-white border-0 rounded-3 p-0 bx-shadow">
                  <div class="p-3 pb-0 position-relative mb-3 w-100 animate__animated animate__flipInX">
                    <p class="mb-0">Cada año, <strong class="text-lila-claro">miles de personas desarrollan enfermedad crónica de los riñones. </strong>Como líder internacional
                      en el desarrollo de soluciones terapéuticas, Vantive ha desarrollado esta guía para que usted y su familia tengan
                      <strong class="text-lila-claro">orientación y acompañamiento </strong>durante este proceso de aprendizaje y adaptación.</p>
                  </div>
                  <div class="position-relative w-100 bg-verde-claro px-3 py-2 mb-3 animate__animated animate__flipInX animate__delay-1s">
                    <p class="mb-0 text-verde-oscuro fw-bold">Para comenzar, pongamos a prueba sus conocimientos sobre la enfermedad crónica de los riñones.</p>
                  </div>
                  <div class="position-relative w-100 text-center animate__animated animate__zoomIn animate__delay-2s">
                    <div class="btn-comenzar bg-primary d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
                      <h5 class="text-white fw-bold mb-0">COMENZAR ACTIVIDAD</h5>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div id="desarrollo" class='page-sco py-2 py-md-0 h-100' style="display: none;">
  <div class='container h-100'>
    <div class='row justify-content-center align-items-center h-100'>
      <div class='col-12'>
        <div class='row justify-content-center'>
          <div class="col-11 text-center">
            <div class="position-relative d-inline-block">
              <h2 class="text-primary mb-1 fw-bold">Vivir con enfermedad renal</h2>
              <hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
            </div>
          </div>
          <div class="col-12 px-0">
            <div class="card bg-verde-claro border-0 rounded-0 bx-shadow py-2 px-3">
              <div class="row justify-content-center">
                <div class="col-10">
                  <div class="d-flex flex-row justify-content-center align-items-center gap-3">
                    <img src="img/book0.png" class="img-fluid">
                    <p class="mb-0"><strong>Instrucciones:</strong> Lea cada pregunta y conteste correctamente para ayudar al paciente a llegar a la unidad de diálisis.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(function () {
    "use strict";
    $('.wrap-course-content').addClass('fake');

    $('.btn-comenzar').click(function (e) {
      e.preventDefault();
      CourseNav.soundClick();
      $('.wrap-course-content').addClass('fake1').removeClass('fake');
      $('#inicio').hide();
      $('#desarrollo').show();
    });
  });
</script>