@ecored-sena/base-kit 0.0.1 → 0.0.3

package/dist/downloads/t13/Tarj3.txt

@@ -0,0 +1,123 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    .row.justify-content-center.cursor-pointer
+      .col-md-5.mb-4
+        .nav-holder.align-items-center.px-0
+          figure
+            img(src="@/assets/curso/temas/ejm.png", alt="")
+          .text.p-lg-2.p-3
+            .row.px-3.pt-1.mt-md-4.pt-md-0.mt-lg-3.mt-xl-4
+              .h5.mt-4.mt-lg-0.mb-2 La luz natural
+              p Producida por los rayos de sol.
+      .col-md-5.mb-4
+        .nav-holder.align-items-center.px-0(@mouseover="mostrarIndicador = false")
+          .indicador--hover(v-if="mostrarIndicador")
+          figure
+            img(src="@/assets/curso/temas/ejm.png", alt="")
+          .text.p-lg-2.p-3
+            .row.px-3.pt-1.mt-md-4.pt-md-0.mt-lg-3.mt-xl-4
+              .h5.mt-4.mt-lg-0.mb-2 La luz artificial
+              p Producida por fuentes lumínicas artificiales.  
+
+              
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({
+    mostrarIndicador: true,
+  }),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>
+
+<style lang="sass">
+.cursor-pointer .nav-holder
+  cursor: pointer    
+.nav-holder
+  display: inline-block
+  margin: 10px 5px
+  overflow: hidden
+  position: relative
+  -webkit-transform: translateZ(0)
+  -moz-transform: translateZ(0)
+  transform: translateZ(0)
+
+.nav-holder *, .nav-holder *:before, .nav-holder *:after
+  -webkit-box-sizing: border-box
+  -moz-box-sizing: border-box
+  box-sizing: border-box
+  -webkit-transition: all 0.45s ease
+  -moz-transition: all 0.45s ease
+  transition: all 0.45s ease
+
+.nav-holder:before
+  position: absolute
+  top: 0
+  bottom: 0
+  left: 0
+  right: 0
+  content: ''
+  background: rgb(253,216,53)
+  background: linear-gradient(180deg, rgba(253,216,53,0) 0%, rgba(253,216,53,1) 80%)
+  opacity: 0
+  z-index: 888
+  -webkit-transition: all 0.45s ease
+  -moz-transition: all 0.45s ease
+  -ms-transition: all 0.45s ease
+  transition: all 0.45s ease
+  -webkit-transform: translateY(80%)
+  -moz-transform: translateY(80%)
+  transform: translateY(80%)
+
+.nav-holder:hover:before
+  -webkit-transform: translateY(0)
+  -moz-transform: translateY(0)
+  transform: translateY(0)
+  opacity: 1
+  -webkit-transition-delay: 0.1s
+  -moz-transition-delay: 0.1s
+  transition-delay: 0.1s
+  border-radius: 14px
+
+.nav-holder
+  .text
+    position: absolute
+    top: 100%
+    bottom: 0px
+    left: 0px
+    right: 0px
+    z-index: 999
+    bottom: 0
+    padding: 1em
+  img
+    backface-visibility: hidden
+    max-width: 100%
+    vertical-align: top
+    z-index: 0
+  p
+    margin: 0
+    opacity: 0
+    line-height: 1.2em
+
+.nav-holder .h5
+  margin: 0
+  opacity: 1
+
+.nav-holder:hover
+  .text
+    top: 50%
+  .h5, p
+    opacity: 1
+</style>

package/dist/downloads/t13/Tarj4.txt

@@ -0,0 +1,144 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    .row.justify-content-center(data-aos="fade-down")
+      .col-lg-5.col-md-6.mb-3.mb-md-0
+        .content-card4(@mouseover="mostrarIndicador = false")
+          .indicador--hover(v-if="mostrarIndicador")
+          .content-overlay
+          .btn-numero.btn-bottom-right
+            h3 A
+          img(src="@/assets/curso/temas/ejm.png", alt="") 
+          .tarjeta-details.fadeIn-top.p-1
+            h3 Titulo
+            p Constituyen sus mejores y principales elementos, que les permite cumplir con sus objetivos.
+            p Ejemplos: cuáles son mis ventajas, qué hacemos bien.
+      .col-lg-5.col-md-6.mb-3.mb-md-0
+        .content-card4
+          .content-overlay
+          .btn-numero.btn-bottom-left
+            h3 B
+          img(src="@/assets/curso/temas/ejm.png", alt="") 
+          .tarjeta-details.fadeIn-top.p-1
+            h3.text-right Titulo
+            p Son los aspectos negativos de la organización-proyecto que, si no se superan, podrán afectar el desarrollo del mismo.
+            p Ejemplos: qué podría ser mejorado, qué se está haciendo mal, qué podría ser evitado. 
+    
+
+              
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({
+    mostrarIndicador: true,
+  }),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>
+
+<style lang="sass">
+.cursor-pointer .content-card4
+  cursor: pointer  
+.content-card4
+  position: relative
+  margin: auto
+  height: 440px
+.content-card4 .content-overlay
+  background: #D3D3D3
+  position: absolute
+  left: 0
+  top: 0
+  bottom: 10%
+  right: 0
+  opacity: 0
+  -webkit-transition: all 0.4s ease-in-out 0s
+  -moz-transition: all 0.4s ease-in-out 0s
+  transition: all 0.4s ease-in-out 0s
+.content-card4:hover .content-overlay
+  opacity: 1
+.content-card4:hover .btn-numero h3
+  color: #00104E !important
+  background-color: #FFCA00
+  -webkit-transition: all 0.3s ease-in-out 0s
+  -moz-transition: all 0.3s ease-in-out 0s
+  transition: all 0.3s ease-in-out 0s
+.content-card4 img
+  z-index: 0
+  object-fit: cover
+  object-position: center center
+  height: 90%
+.tarjeta-details
+  position: absolute
+  padding-left: 1em
+  padding-right: 1em
+  width: 90%
+  top: 50%
+  left: 50%
+  opacity: 0
+  -webkit-transform: translate(-50%, -50%)
+  -moz-transform: translate(-50%, -50%)
+  transform: translate(-50%, -50%)
+  -webkit-transition: all 0.3s ease-in-out 0s
+  -moz-transition: all 0.3s ease-in-out 0s
+  transition: all 0.3s ease-in-out 0s
+.tarjeta-details p
+  line-height: 1.3
+.content-card4:hover .tarjeta-details
+  top: 49%
+  opacity: 1
+.fadeIn-top
+  top: 20%
+.btn-numero h3
+  font-size: 35px
+  position: absolute
+  background-color: #2D54FE
+  color: #FFF
+  width: 60px
+  height: 60px
+  text-align: center
+  display: flex
+  flex-direction: column
+  justify-content: center
+  z-index: 9999
+  -webkit-transition: all 0.3s ease-in-out 0s
+  -moz-transition: all 0.3s ease-in-out 0s
+  transition: all 0.3s ease-in-out 0s
+.btn-numero h3:hover
+  color: #00104E !important
+  background-color: #FFCA00
+  -webkit-transition: all 0.3s ease-in-out 0s
+  -moz-transition: all 0.3s ease-in-out 0s
+  transition: all 0.3s ease-in-out 0s
+.btn-numero.btn-bottom-right h3
+  right: 0%
+  bottom: 4%
+.btn-numero.btn-bottom-left h3
+  left: 0%
+  bottom: 4%
+.btn-numero.btn-top-right h3
+  right: 0%
+  top: 0%
+.btn-numero.btn-top-left h3
+  left: 0%
+  top: 0%
+@media screen and (max-width: 640px)
+  .content-card4:hover .tarjeta-details
+    top: 40%;
+  .btn-numero h3
+    left: 41% !important
+  .tarjeta-details 
+    width: 95% !important 
+  .content-card4:hover .tarjeta-details
+    top: 49%  
+</style>

package/dist/downloads/t13/Tarj5.txt

@@ -0,0 +1,70 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    .row.justify-content-center.mb-4
+      .col-lg-4
+        .tarjetas-up__content.p-4.d-flex.align-items-center(@mouseover="mostrarIndicador = false")
+          .indicador--hover(v-if="mostrarIndicador")
+          .tarjetas-up__content__image: img(src='@/assets/curso/temas/ejm.png')
+          .text-center.p-lg-4
+            h5 Tarjeta 1
+            p.mb-0 This is another paragraph. I think it needs to be added that the set of elements tested is not exhaustive in any sense. I have selected those elements for which it can make sense to write user style sheet rules, in my opionion.
+      .col-lg-4
+        .tarjetas-up__content.p-4.d-flex.align-items-center
+          .tarjetas-up__content__image: img(src='@/assets/curso/temas/ejm.png')
+          .text-center.p-lg-4
+            h5 Tarjeta 2
+            p.mb-0 This is another paragraph. I think it needs to be added that the set of elements tested is not exhaustive in any sense. I have selected those elements for which it can make sense to write user style sheet rules, in my opionion.
+      .col-lg-4
+        .tarjetas-up__content.p-4.d-flex.align-items-center
+          .tarjetas-up__content__image: img(src='@/assets/curso/temas/ejm.png')
+          .text-center.p-lg-4
+            h5 Tarjeta 3
+            p.mb-0 This is another paragraph. I think it needs to be added that the set of elements tested is not exhaustive in any sense. I have selected those elements for which it can make sense to write user style sheet rules, in my opionion.
+
+    
+
+              
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({
+    mostrarIndicador: true,
+  }),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>
+
+<style lang="sass">
+.tarjetas-up
+  &__content
+    cursor: pointer
+    position: relative
+    overflow: hidden
+    border-radius: 10px
+    background-color: #fff7e6
+    &:hover
+      .tarjetas-up__content__image
+        top: 0
+    &__image
+      position: absolute
+      width: 100%
+      height: 100%
+      left: 0
+      top: -100%
+      transition: top 0.3s ease-in-out
+      img
+        width: 100%
+        height: 100%
+</style>

package/dist/downloads/t13/Text-Dest.txt

@@ -0,0 +1,55 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    .bg-carrousel.d-flex.justify-content-center.align-items-center.mb-4(@mouseover="mostrarIndicador = false")
+      .indicador--hover(v-if="mostrarIndicador")
+      h2.h1.text-center.text-white Importante
+      .bg-carrousel_content.px-5.py-5.justify-content-center.d-flex.align-items-center
+        .text-center.w-75
+          p.fw-bold.mb-0 This is another paragraph. I think it needs to be added that the set of elements tested is not exhaustive in any sense. I have selected those elements for which it can make sense to write user style sheet rules, in my opionion.
+
+
+              
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({
+    mostrarIndicador: true,
+  }),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>
+
+<style lang="sass">
+.bg-carrousel
+  cursor: pointer
+  position: relative
+  background-image: url('../assets/curso/temas/t13/importante.svg') //Enlace imagen de fondo
+  background-repeat: no-repeat
+  background-size: cover
+  background-position: center
+  width: 100%
+  min-height: 207px
+  overflow: hidden
+  &:hover
+    .bg-carrousel_content
+      left: 0
+  &_content
+    width: 100%
+    background-color: #ffe799
+    transition: left .3s ease-in-out
+    position: absolute
+    height: 100%
+    left: 150%
+</style>

package/dist/downloads/t2/Llamado_accion_infografias.txt

@@ -0,0 +1,34 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    .tarjeta.color-acento-botones.p-4.p-md-5.mb-5
+      .row.justify-content-around.align-items-center
+        .col-8.col-sm-6.col-md-4.mb-4.mb-md-0
+          img(src="@/assets/componentes/ej-01.png")
+
+        .col-md.col-lg-6
+          h3 Título del recurso
+          p.mb-4 There is no right answer. The splendor of the mystery is that you don’t understand. Your rapidograph pens are dried up, the x-acto blades in your bag are rusty, and your mind is dull. Stop clicking your mouse, get messy, go back to the basics and make.
+          
+          a.boton.color-acento-contenido.texto-blanco(:href="obtenerLink('/downloads/prueba.pdf')" target="_blank" type="application/pdf")
+            span Descargar
+            i.fas.fa-file-download
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({}),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>

package/dist/downloads/t3/Infografia_puntos_calientes.txt

@@ -0,0 +1,41 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+  
+    ImagenInfografica.color-primario
+      template(v-slot:imagen)
+        figure
+          img(src='@/assets/template/img-placeholder.svg', alt='Texto que describa la imagen')
+          figcaption Leyenda de la imagen
+
+      .tarjeta.color-acento-botones.p-3(x="20%" y="20%" numero="1")
+        .h5.mb-2 titulo
+        p.mb-0 Lorem ipsum dolor Curabitur vestibulum tortor at blandit congue. Pellentesque vel felis posuere, molestie metus
+
+      .tarjeta.color-acento-botones.p-3(x="50%" y="50%" numero="A")
+        .h5.mb-2 titulo
+        p.mb-0 Lorem ipsum dolor ddasdasd asdasd asdasd a asd sd asdasd sit amet, consectetur adipiscing elit. Curabitur vestibulum tortor at blandit congue. Pellentesque vel felis posuere, molestie metus
+
+      .tarjeta.color-acento-botones.p-3(x="70%" y="70%" numero="B")
+        .h5.mb-2 titulo
+        p.mb-0 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vestibulum tortor at blandit congue. Pellentesque vel felis posuere, molestie metus
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({
+    // variables de vue
+  }),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>

package/dist/downloads/t3/Infografia_ventanas_modales.txt

@@ -0,0 +1,43 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+  
+    ImagenInfograficaB.color-primario
+      template(v-slot:imagen)
+      figure
+          img(src='@/assets/template/img-placeholder.svg', alt='Texto que describa la imagen')
+          figcaption Leyenda de la imagen
+
+      div(x="20%" y="20%" tooltip="tooltip de max 35 caracteres" numero="1")
+      h5 titulo
+      p Lorem ipsum dolor Curabitur vestibulum tortor at blandit congue. Pellentesque vel felis posuere, molestie metus
+      p Lorem ipsum dolor Curabitur vestibulum tortor at blandit congue. Pellentesque vel felis posuere, molestie metus
+      p Lorem ipsum dolor Curabitur vestibulum tortor at blandit congue. Pellentesque vel felis posuere, molestie metus
+
+      div(x="50%" y="50%" tooltip="tooltip de max 35 caracteres")
+      .h5.mb-2 titulo
+      p Lorem ipsum dolor ddasdasd asdasd asdasd a asd sd asdasd sit amet, consectetur adipiscing elit. Curabitur vestibulum tortor at blandit congue. Pellentesque vel felis posuere, molestie metus
+
+      div(x="70%" y="70%" tooltip="tooltip de max 35 caracteres")
+      .h5.mb-2 titulo
+      p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vestibulum tortor at blandit congue. Pellentesque vel felis posuere, molestie metus
+
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({
+    // variables de vue
+  }),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>

package/dist/downloads/t4/Slide_imagenes.txt

@@ -0,0 +1,42 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    SlyderB.mb-5(:datos="datosSlyder")
+            
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({
+    datosSlyder: [
+      {
+        titulo:
+          'Never, never assume that what you have achieved is good enough',
+        texto:
+          'Your rapidograph pens are dried up, the x-acto blades in your bag are rusty, and your mind is dull. Stop clicking your mouse, get messy, go back to the basics and make something original.',
+        imagen: require('@/assets/template/img-placeholder.svg'),
+        // leyendaImagen: 'Leyenda de la imagen',
+      },
+      {
+        titulo:
+          'Never, never assume that what you have achieved is good enough',
+        texto:
+          'Your rapidograph pens are dried up, the x-acto blades in your bag are rusty, and your mind is dull. Stop clicking your mouse, get messy, go back to the basics and make something original.',
+        imagen: require('@/assets/template/img-placeholder.svg'),
+        // leyendaImagen: 'Leyenda de la imagen',
+      },
+    ],
+  }),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>

package/dist/downloads/t4/Slide_navegacion_con_numerales.txt

@@ -0,0 +1,39 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    .tarjeta.tarjeta--gris.p-4
+      PasosB.color-acento-contenido
+        .row(titulo="")
+          .col-md-6.mb-4.mb-md-0
+            p This is another paragraph. I think it needs to be added that the set of elements tested is not exhaustive in any sense. I have selected those elements for which it can make sense to write user style sheet rules, in my opionion.
+          .col-md-6
+            figure
+              img(src='@/assets/template/img-placeholder.svg', alt='Texto que describa la imagen')
+              figcaption Leyenda de la imagen
+
+        .row(titulo="")
+          .col-md-6
+            figure
+              img(src='@/assets/template/img-placeholder.svg', alt='Texto que describa la imagen')
+              figcaption Leyenda de la imagen
+          .col-md-6.mb-4.mb-md-0
+            p This is another paragraph. I think it needs to be added that the set of elements tested is not exhaustive in any sense. I have selected those elements for which it can make sense to write user style sheet rules, in my opionion.
+            
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({}),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>

package/dist/downloads/t4/Slide_navegacion_numero_titulo.txt

@@ -0,0 +1,39 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    .tarjeta.tarjeta--gris.p-4
+      PasosB.color-acento-contenido
+        .row(titulo="Titulo 1")
+          .col-md-6.mb-4.mb-md-0
+            p This is another paragraph. I think it needs to be added that the set of elements tested is not exhaustive in any sense. I have selected those elements for which it can make sense to write user style sheet rules, in my opionion.
+          .col-md-6
+            figure
+              img(src='@/assets/template/img-placeholder.svg', alt='Texto que describa la imagen')
+              figcaption Leyenda de la imagen
+
+        .row(titulo="Titulo 2")
+          .col-md-6
+            figure
+              img(src='@/assets/template/img-placeholder.svg', alt='Texto que describa la imagen')
+              figcaption Leyenda de la imagen
+          .col-md-6.mb-4.mb-md-0
+            p This is another paragraph. I think it needs to be added that the set of elements tested is not exhaustive in any sense. I have selected those elements for which it can make sense to write user style sheet rules, in my opionion.
+            
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({}),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>

package/dist/downloads/t4/Slide_navegacion_simple_a.txt

@@ -0,0 +1,42 @@
+<template lang="pug">
+.curso-main-container.pb-3
+  BannerInterno
+  .container.tarjeta.tarjeta--blanca.p-4.p-md-5
+
+    .tarjeta.tarjeta--azul.p-4.pb-0.mb-4
+      SlyderA.pb-lg-5.pb-3(tipo="a")
+        .row.justify-content-center.align-items-center.my-lg-4.mb-5
+          .col-md-5.mb-4.mb-md-0
+            p This is another paragraph. I think it needs to be added that the set of elements tested is not exhaustive in any sense. I have selected those elements for which it can make sense to write user style sheet rules, in my opionion.
+          .col-md-5
+            figure
+              img(src='@/assets/template/img-placeholder.svg', alt='Texto que describa la imagen')
+              figcaption Leyenda de la imagen
+        .row.justify-content-center.align-items-center.my-lg-4.mb-5
+          .col-md-5
+            figure
+              img(src='@/assets/template/img-placeholder.svg', alt='Texto que describa la imagen')
+              figcaption Leyenda de la imagen
+          .col-md-5.mb-4.mb-md-0
+            p This is another paragraph. I think it needs to be added that the set of elements tested is not exhaustive in any sense. I have selected those elements for which it can make sense to write user style sheet rules, in my opionion. I think it needs to be added that the set of elements tested is not exhaustive in any sense. I have selected those elements for which it can make sense to write user style sheet rules, in my opionion.
+        div
+          figure
+            img(src='@/assets/template/img-placeholder.svg', alt='Texto que describa la imagen')
+            figcaption Leyenda de la imagen`
+            
+</template>
+
+<script>
+export default {
+  components: {},
+  data: () => ({}),
+  mounted() {
+    this.$nextTick(() => {
+      this.$aosRefresh()
+    })
+  },
+  updated() {
+    this.$aosRefresh()
+  },
+}
+</script>