template, inicio del curso
This commit is contained in:
@@ -0,0 +1,54 @@
|
||||
<style>
|
||||
.btn-comenzar {
|
||||
border-radius: 20px;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
<div 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-12 px-0'>
|
||||
<div class='row'>
|
||||
<div class="col-11 px-0">
|
||||
<div class="d-inline-block position-relative">
|
||||
<img src="img/01.0.webp" class="img-fluid">
|
||||
<div class="position-absolute h-100 top-0 start-0" style="width: 65%;">
|
||||
<div class="row justify-content-center align-items-center h-100">
|
||||
<div class="col-7">
|
||||
<div class="position-relative d-inline-block animate__animated animate__bounceInDown">
|
||||
<h1 class="text-white fw-bold">Guía de entrenamiento para el paciente en Diálisis Peritoneal <strong
|
||||
class="text-secondary">>>></strong></h1>
|
||||
<hr class="border border-1 border-verde-claro hr-style mx-auto my-0 mb-3">
|
||||
</div>
|
||||
<p class="text-white animate__animated animate__lightSpeedInLeft">Nuestra misión: Salvar y sostener vidas</p>
|
||||
<div class="position-relative w-100 animate__animated animate__zoomIn animate__delay-1s">
|
||||
<div class="btn-comenzar bg-white d-inline-block px-3 py-2 text-center animate__animated animate__pulse animate__infinite">
|
||||
<h5 class="text-verde-oscuro fw-bold mb-0">Comenzar</h5>
|
||||
</div>
|
||||
</div>
|
||||
</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();
|
||||
$(this).removeClass('animate__animated animate__pulse animate__infinite');
|
||||
CourseNav.soundClick();
|
||||
CourseNav.setSlideVisited();
|
||||
CourseNav.nextSlide();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,80 @@
|
||||
<style>
|
||||
.fake {
|
||||
background-image: url(img/bg00.jpg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.bul0 {
|
||||
list-style-type: none;
|
||||
list-style-image: url(img/bul0.png);
|
||||
}
|
||||
|
||||
ul.bul0>li {
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
</style>
|
||||
<div 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-12'>
|
||||
<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">Contenidos</h2>
|
||||
<hr class="border border-2 border-verde-oscuro hr-style my-0 mb-3 opacity-100">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<div class="row justify-content-center align-items-center">
|
||||
<div class="col-6">
|
||||
<ul class="bul0 text-verde-oscuro fw-bold">
|
||||
<li>Vivir con enfermedad renal </li>
|
||||
<li>Inicio en la terapia de diálisis peritoneal </li>
|
||||
<li>Acceso peritoneal y sus cuidados </li>
|
||||
<li>Terapia segura en casa </li>
|
||||
<li>Autocuidado </li>
|
||||
<li>Manejo de medicamentos y terapia dialítica</li>
|
||||
<li>Entrega domiciliaria </li>
|
||||
<li>Actuación ante incidencias </li>
|
||||
<li>Procedimientos</li>
|
||||
<li>Alarmas</li>
|
||||
<li>Despedida</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 text-center animate__animated animate__zoomIn">
|
||||
<img src="img/02.0.png" class="img-fluid">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function () {
|
||||
"use strict";
|
||||
$('.wrap-course-content').addClass('fake');
|
||||
gsap.fromTo(".bul0 li",
|
||||
// Estado INICIAL (from)
|
||||
{
|
||||
opacity: 0,
|
||||
y: 90
|
||||
},
|
||||
// Estado FINAL (to)
|
||||
{
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
duration: 1,
|
||||
stagger: 0.2,
|
||||
ease: "power3.out",
|
||||
onComplete: function() {
|
||||
CourseNav.setSlideVisited();
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,106 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user