105 lines
5.4 KiB
HTML
105 lines
5.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<style>
|
||
|
|
.sec0 { background-image: url(img/fondos/bg1.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
|
||
|
|
.cuadro_navegacion { background-color: #fff!important; border-radius: 25px; }
|
||
|
|
.cuadro_navegacion .card-header { border: 1px solid #657380; }
|
||
|
|
.btn_ponter { cursor: pointer; position: absolute; }
|
||
|
|
.buttonss0 { left: -69px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
|
||
|
|
.buttonss1 { right: -69px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="section_charge w-100 h-100">
|
||
|
|
<div class="d-none"></div>
|
||
|
|
<section id="sec0" class="sec0 w-100 h-100 pt-5">
|
||
|
|
<div class="container">
|
||
|
|
<div class="row justify-content-center">
|
||
|
|
<div class="col-10 text-center">
|
||
|
|
<p>Antes de iniciar, identifica la funcionalidad de los elementos que encontrarás a lo largo del curso.</p>
|
||
|
|
</div>
|
||
|
|
<div class="col-10 cuadro_navegacion shadow">
|
||
|
|
<div class="row justify-content-center align-items-start">
|
||
|
|
<div class="col-4 mb-2 text-center">
|
||
|
|
<div class="bg-rojo-1 w-100 h-100 p-2">
|
||
|
|
<div class="row h-100">
|
||
|
|
<div class="col-12 mb-2"><img src="img/guia_navegacion/1.png" loading="lazy" alt=""></div>
|
||
|
|
<div class="col-12">
|
||
|
|
Con estos botones podrás regresar o avanzar a un tema específico.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-4 mb-2 text-center">
|
||
|
|
<div class="bg-rojo-1 w-100 h-100 p-2">
|
||
|
|
<div class="row h-100">
|
||
|
|
<div class="col-12 mb-2"><img src="img/guia_navegacion/2.png" loading="lazy" alt=""></div>
|
||
|
|
<div class="col-12">
|
||
|
|
Al dar clic en este botón podrás refrescar la página.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-4 mb-2 text-center">
|
||
|
|
<div class="bg-rojo-1 w-100 h-100 p-2">
|
||
|
|
<div class="row h-100">
|
||
|
|
<div class="col-12 mb-2"><img src="img/guia_navegacion/3.png" loading="lazy" alt=""></div>
|
||
|
|
<div class="col-12">
|
||
|
|
Al dar clic en el botón Menú identificarás el contenido que se abarca dentro del curso.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row justify-content-center align-items-start">
|
||
|
|
<div class="col-4 mb-2 text-center">
|
||
|
|
<div class="bg-rojo-1 w-100 h-100 p-2">
|
||
|
|
<div class="row h-100">
|
||
|
|
<div class="col-12 mb-2"><img src="img/guia_navegacion/4.png" loading="lazy" alt=""></div>
|
||
|
|
<div class="col-12">
|
||
|
|
Con este botón puedes regresar a la pantalla inicial del módulo.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-4 mb-2 text-center">
|
||
|
|
<div class="bg-rojo-1 w-100 h-100 p-2">
|
||
|
|
<div class="row h-100">
|
||
|
|
<div class="col-12 mb-2"><img src="img/guia_navegacion/7.png" loading="lazy" alt=""></div>
|
||
|
|
<div class="col-12">
|
||
|
|
Algunos botones se identificarán por medio de un parpadeo. Da clic en ellos para visualizar su contenido.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
<script>
|
||
|
|
jQuery(document).ready(function($) {
|
||
|
|
instruccion(0);
|
||
|
|
$(".layer-load").show();
|
||
|
|
$('.section_charge').waitForImages({
|
||
|
|
finished: function() {
|
||
|
|
$(".section_charge").css("visibility", "visible");
|
||
|
|
$(".wloader").hide();
|
||
|
|
instruccion(1);
|
||
|
|
|
||
|
|
},
|
||
|
|
each: function(loaded, count, success) {
|
||
|
|
var total = Math.floor((loaded * 100) / count);
|
||
|
|
$(".wloader").show();
|
||
|
|
|
||
|
|
},
|
||
|
|
waitForAll: true
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|