Prueba_tarjeta_Giro - Vida Universitaria
En esta semana institucional buscamos sensibilizar a la Comunidad Educativa Javeriana sobre la importancia del cuidado de sí mismo, de los demás y del ambiente, como aporte a la consolidación de una Universidad que promueve la salud y el bienestar.
Diana Marcela Becerra Bohórquez
modificado hace 9 días
Se ha producido un error al procesar la plantilla.
The following has evaluated to null or missing: ==> Imagenl2k0.getAttribute("alt") [in template "20102#20129#14906717" at line 6, column 21] ---- Tip: If the failing expression is known to legally refer to something that's sometimes null or missing, either specify a default value like myOptionalVar!myDefault, or use <#if myOptionalVar??>when-present<#else>when-missing</#if>. (These only cover the last step of the expression; to cover the whole expression, use parenthesis: (myOptionalVar.foo)!myDefault, (myOptionalVar.foo)?? ---- ---- FTL stack trace ("~" means nesting-related): - Failed at: ${Imagenl2k0.getAttribute("alt")} [in template "20102#20129#14906717" at line 6, column 19] ----
1<div class="card-vr-card-${randomNamespace}">
2 <div class="card-inner-vr-card-${randomNamespace}">
3 <!-- Cara A -->
4 <div class="card-front-vr-card-${randomNamespace}" id="card-front-vr-card">
5 <div class="content-vr-card-${randomNamespace}" id="content-vr-card">
6 <img alt="${Imagenl2k0.getAttribute("alt")}" data-fileentryid="${Imagenl2k0.getAttribute("fileEntryId")}" src="${Imagenl2k0.getData()}" />
7 <h4 class="title-vr-card-${randomNamespace}">${Titulo.getData()}</h4>
8 </div>
9 </div>
10 <!-- Cara B -->
11 <div class="card-back-vr-card-${randomNamespace}">
12 <div class="content-vr-card-${randomNamespace}">
13 <p class="lead-vr-card-${randomNamespace}">${Lead.getData()}</p>
14 <img alt="${Imagenl2k0.getAttribute("alt")}" data-fileentryid="${Imagenl2k0.getAttribute("fileEntryId")}" src="${Imagenl2k0.getData()}" />
15 </div>
16 </div>
17 </div>
18</div>
19<style>
20/* Contenedor de la tarjeta */
21.card-vr-card-${randomNamespace} {
22 width: 300px;
23 height: 300px;
24 perspective: 1000px;
25 display: flex;
26 justify-content: center;
27 margin: 0 auto;
28 margin-top:30px;
29}
30
31/* Contenedor interno para animación */
32.card-inner-vr-card-${randomNamespace} {
33 width: 100%;
34 height: 100%;
35 position: relative;
36 transform-style: preserve-3d;
37 transform: rotateY(0deg);
38 transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
39}
40
41.card-vr-card-${randomNamespace}:hover .card-inner-vr-card-${randomNamespace} {
42 transform: rotateY(180deg);
43}
44
45/* Cara de la tarjeta */
46.card-front-vr-card-${randomNamespace},
47.card-back-vr-card-${randomNamespace} {
48 width: 100%;
49 height: 100%;
50 position: absolute;
51 backface-visibility: hidden;
52 border-radius: 10px;
53 overflow: hidden;
54 display: flex;
55 justify-content: center;
56 align-items: center;
57 flex-direction: column;
58 background: ${Color11.getData()};
59 background: linear-gradient(135deg, ${Color11.getData()} 0%, ${Color2.getData()} 100%);
60 color: white;
61 text-align: center;
62 padding: 15px;
63}
64
65/* Cara posterior girada */
66.card-back-vr-card-${randomNamespace} {
67 background: ${Color2.getData()}; /* Color del lado B */
68 transform: rotateY(180deg);
69}
70
71/* Estilo del icono */
72.icon-vr-card-${randomNamespace} {
73 width: 50px;
74 height: 50px;
75 margin-bottom: 10px;
76}
77
78/* Título de la cara A */
79.title-vr-card-${randomNamespace} {
80 font-family: 'Bebas Neue', sans-serif!important;
81 font-size: 2rem;
82 margin: 0;
83 padding: 0 10px;
84}
85.title-vr-card-${randomNamespace} p {
86 font-family: 'Bebas Neue', sans-serif!important;
87 font-size: 2rem;
88 margin: 0;
89 padding: 0 10px;
90 line-height: 1.1;
91 margin-top: 20px;
92}
93
94/* Texto del lado B */
95.lead-vr-card-${randomNamespace} {
96 font-family: 'Montserrat', sans-serif;
97 font-size: 1rem;
98 margin-bottom: 10px;
99 padding: 0 10px;
100}
101</style>