Communauté NOSiAkademia - Akademia
Communauté NOSiAkademia
Chaque stagiaire qui passe par notre programme laisse sa marque ici. De nombreux anciens de la NOSiAkademia ont connu un succès notable sur le marché national et international.
Soyez aussi un stagiaire réussi et rejoignez cette communauté de professionnels qui transforment le paysage national et international.
Une erreur s'est produite lors du traitement du modèle.
The following has evaluated to null or missing:
==> docXml.selectSingleNode("/root/dynamic-element[@name='${fieldName}']/dynamic-content[@language-id='${locale}']") [in template "20096#20121#196721" at line 51, column 27]
----
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: #assign fieldElement = docXml.selectS... [in template "20096#20121#196721" in function "getFieldText" at line 51, column 5]
----
1<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
2<#if entries?has_content>
3 <div class="container testemunho card-caroucel-container justify-content-center pt-5">
4 <#list entries as entry>
5 <#assign
6 docXml = saxReaderUtil.read(entry.getAssetRenderer().getArticle().getContent())
7 siteId = themeDisplay.getSiteGroupId()
8 imageUUID = getImageUUID(docXml)
9 name = getFieldText(docXml, 'Text57481720' ,locale)
10 cargo = getFieldText(docXml, 'Text99501005' ,locale)
11 desc = getFieldText(docXml, 'RichText71489926' ,locale)
12 videoUIID = getVideoUrl(docXml)
13 viewURL = getViewURL(entry, assetLinkBehavior)
14 lblVermais = (locale=="en_GB")?string("read more", (locale=="fr_FR")?string("en savoir plus", "ler mais"))
15 />
16 <div class="card my-comunity-card">
17 <div class="wrap">
18 <img src="/documents/${siteId}/${imageUUID}" class="morph" alt="${entry.getTitle(locale)}"/>
19 </div>
20 <div class="fix"></div>
21 <div class="card-body">
22 <h5 class="card-title name">${name}</h5>
23 <p class="card-text cargo">${cargo}</p>
24 <div class="card-text description">${desc}</div>
25 <div class="text-center buttom-container">
26 <span class="mais">
27 <a class="card-link mt-3 ler-mais" role="button" aria-pressed="true">
28 ${lblVermais}
29 </a>
30 <img src="/documents/d/akademia/arrow-forward" class="arrow-ler-mais" alt="...">
31 </span>
32 <!-- <button class="card-link mt-3 ver-video" role="button" aria-pressed="true">
33 <a data-video="/documents/${siteId}/${videoUIID}" type="button" class="text-video" style="color:#fff;">ver video</a>
34 <img src="/documents/d/akademia/vector" class="icone-video" alt="Icone" />
35 </button> -->
36 </div>
37 </div>
38 </div>
39 </#list>
40 </div>
41</#if>
42
43<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
44
45<#function getImageUUID(docXml)>
46 <#assign imageJSONString=docXml.selectSingleNode("/root/dynamic-element[@name='Image24167455']/dynamic-content").getText() />
47 <#return jsonFactoryUtil.createJSONObject(imageJSONString).getString("uuid") />
48</#function>
49
50<#function getFieldText(docXml, fieldName ,locale)>
51 <#assign fieldElement=docXml.selectSingleNode("/root/dynamic-element[@name='${fieldName}']/dynamic-content[@language-id='${locale}']") />
52 <#return fieldElement.getText() />
53</#function>
54
55<#function getViewURL(entry, assetLinkBehavior )>
56 <#assign assetRenderer=entry.getAssetRenderer() />
57 <#assign viewURL=assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse, entry) />
58 <#if assetLinkBehavior !="showFullContent">
59 <#assign viewURL=assetRenderer.getURLViewInContext(renderRequest, renderResponse, viewURL) />
60 </#if>
61 <#return viewURL />
62</#function>
63
64<#function getVideoUrl(docXml)>
65 <#assign videoJSONString=docXml.selectSingleNode("/root/dynamic-element[@name='DocumentLibrary11676229']/dynamic-content").getText() />
66 <#return jsonFactoryUtil.createJSONObject(videoJSONString).getString("uuid") />
67</#function>
68
69<style>
70/******comunidade *****/
71
72 .comunidade{
73 font-family: Poppins;
74 }
75 .comunidade .card .noLink{
76 color: unset;
77 text-decoration: none !important;
78 }
79 .fix{
80 display:flex;
81 width: 144px;
82 height: 142px;
83 justify-self: center;
84 object-fit: cover;
85 margin-top: -60px;
86 }
87 .icon-card-comunnidade {
88 width: 144px;
89 height: 142px;
90 justify-self: center;
91 object-fit: cover;
92 margin-top: -60px;
93 }
94
95 .comunidade .card .card-title.name{
96 color: #000;
97 font-family: Poppins;
98 font-size: 15px;
99 font-style: normal;
100 font-weight: 700;
101 line-height: 30px;
102 overflow:hidden;
103 display: -webkit-box;
104 -webkit-line-clamp: 1;
105 -webkit-box-orient: vertical;
106 text-overflow: ellipsis;
107 }
108
109 .comunidade .card .cargo{
110 font-family: Poppins;
111 font-size: 12px;
112 font-style: normal;
113 font-weight: 300;
114 line-height: 15px;
115 min-height:30px;
116 overflow:hidden;
117 display: -webkit-box;
118 -webkit-line-clamp: 2;
119 -webkit-box-orient: vertical;
120 text-overflow: ellipsis;
121 }
122 .comunidade .card .description{
123 max-height: 90px;
124 min-height: 90px;
125 margin-bottom: 0px;
126 text-align: justify;
127 font-family: Poppins;
128 font-size: 11px;
129 font-style: normal;
130 font-weight: 400;
131 line-height: 170%;
132 letter-spacing: 0.22px;
133 overflow: hidden;
134 justify-content: flex-end;
135 display: flex;
136 display: -webkit-box;
137 -webkit-line-clamp: 5;
138 -webkit-box-orient: vertical;
139 text-overflow: ellipsis;
140 }
141
142 .comunidade .card .ler-mais {
143 cursor:pointer;
144 border-radius: 20px;
145 color: #F86858 !important;
146 background-color: white;
147 border: none;
148 text-align: center;
149 font-family: Maven Pro;
150 font-size: 13.6px;
151 font-style: normal;
152 font-weight: 500;
153 line-height: 165%; /* 22.44px */
154 letter-spacing: 0.4px;
155 }
156
157 .comunidade .card .ver-video {
158 width: 80px;
159 height: 24px;
160 text-align:center;
161 border: none;
162 font-size: 12px;
163 color: #fff;
164 border-radius: 15.714px;
165 background: #5BACAD;
166 z-index:1;
167 font-family: Maven Pro;
168 font-size: 8.905px;
169 font-style: normal;
170 font-weight: 500;
171 line-height: 165%;
172 letter-spacing: 0.262px;
173 }
174 .comunidade .card .text-video {
175 text-decoration:none;
176 color: #fff !important;
177 font-family: Maven Pro;
178 font-size: 8.905px;
179 font-style: normal;
180 font-weight: 500;
181 line-height: 165%;
182 letter-spacing: 0.262px;
183 }
184 .comunidade .card .buttom-container{
185 padding-top:0px;
186 margin-top: 18px;
187 }
188
189 .titulo-comunidade{
190 position:relative;
191 display:flex;
192 flex-direction:column;
193 }
194 .titulo-comunidade .titulo{
195 color: #414141;
196 font-family: Poppins;
197 font-size: 30.088px;
198 font-style: normal;
199 font-weight: 500;
200 line-height: 44px;
201 }
202
203 .titulo-comunidade .titulo strong{
204 font-family: Poppins;
205 font-size: 33.699px;
206 font-style: normal;
207 font-weight: 700;
208 line-height: 44px
209 }
210 .titulo-comunidade .desc{
211 color: #414141;
212 font-family: Poppins;
213 font-size: 17.466px;
214 font-style: normal;
215 font-weight: 400;
216 line-height: 150%;
217 margin-top: -15px;
218 }
219
220 .comunidade .my-comunity-card {
221 background-color: #fff;
222 border-color: transparent;
223 border-style: none;
224 box-shadow:none !important;
225 -webkit-transition: 0.4s ease-out;
226 transition: 0.4s ease-out
227 }
228 .comunidade .my-comunity-card .ler-mais:hover{
229 text-decoration:underline;
230 }
231
232 .comunidade .my-comunity-card .ver-video:hover .text-video{
233 text-decoration:underline;
234 }
235 .comunidade .my-comunity-card:hover .arrow-ler-mais{
236 animation: arrow-slice-comunity 1s ease-in-out infinite;
237 }
238
239 .comunidade .my-comunity-card:hover .icone-video{
240 animation: video-play 1s ease-in-out infinite;
241 margin-left: 4px;
242 }
243
244 @keyframes arrow-slice-comunity {
245 0%,100% {
246 transform: translate(0, 0);
247 }
248 50% {
249 transform: translate(3px, 0);
250 }
251 }
252
253 @keyframes video-play {
254 0%,100% {
255 transform: scale(1.1);
256 }
257 50% {
258 transform: scale(1.4);
259 }
260 }
261 .comunidade .my-comunity-card:hover{
262 cursor:pointer;
263 -webkit-transform: translateY(-15px);
264 transform: translateY(-15px);
265 box-shadow:0px 4px 12px rgb(0 0 0 / 8%)!important;
266 }
267
268 .card-caroucel-container .slick-slide{
269 width: 322px;
270 height: 361px;
271 flex-shrink: 0;
272 }
273
274 .card-caroucel-container .slick-slide.slick-active.slick-center{
275 z-index:2;
276 }
277 .comunidade .arrow{
278 align-self: center;
279 background-color: #feb21c;
280 width: 3.5rem;
281 height: 3px;
282 font-family: Poppins;
283 }
284
285 /* slick*/
286 .card-caroucel-container .slick-list.draggable{
287 padding-bottom: 60px !important;
288 padding-top: 87px !important;
289 padding-right: 0px !important;
290 padding-left: 0px !important;
291 }
292
293 .card-caroucel-container .slick-list.draggable .slick-track{
294 display: flex;
295 gap: 4rem;
296 }
297
298 .card-caroucel-container .slick-dots li {
299 color:rgba(196, 196, 196, 1) !important;
300 }
301
302 .card-caroucel-container .slick-dots {
303 position: relative;
304 bottom: 10px; /* Adjust the positioning as needed */
305 list-style: none;
306 display: flex;
307 justify-content: center;
308 align-items: center;
309 margin: 0;
310 padding: 0;
311 }
312
313 .card-caroucel-container .slick-dots li {
314 flex: 0 0 56px;
315 height: 4px;
316 background: rgba(196, 196, 196, 1);
317 border-radius: 5px;
318 margin: 0 5px;
319 cursor: pointer;
320 transition: background 0.3s ease;
321 }
322
323 .card-caroucel-container .slick-dots li button:before{
324 display:none;
325 }
326
327 .card-caroucel-container .slick-dots li.slick-active {
328 background: #f48914;
329 }
330
331 .card-caroucel-container .slick-dots li.slick-active {
332 color:#f48914!important;
333 }
334
335 .card-caroucel-container .slick-dots li button {
336 font-size: 0;
337 line-height: 0;
338 display: block;
339 width: 20px;
340 height: 20px;
341 padding: 5px;
342 cursor: pointer;
343 color: transparent;
344 border: 0;
345 outline: none;
346 background: transparent;
347 }
348
349 .card-caroucel-container .slick-slide img {
350 display:inline;
351 }
352
353 .card-caroucel-container .slick-dots {
354 /*position: absolute;*/
355 bottom: 10px;
356 list-style: none;
357 display: flex;
358 justify-content: center;
359 align-items: center;
360 margin: 0;
361 padding: 0;
362 }
363
364 .card-caroucel-container .slick-dots li {
365 flex: 0 0 56px;
366 height: 4px;
367 background: rgba(196, 196, 196, 1);
368 border-radius: 5px;
369 margin: 0 5px;
370 cursor: pointer;
371 transition: background 0.3s ease;
372 }
373
374 .card-caroucel-container .slick-dots li.slick-active {
375 background:rgba(244, 137, 20, 1);
376 }
377
378 /*.card-caroucel-container .slick-dots li:nth-child(n+4) {
379 display:none;
380 }*/
381 /**losange card **/
382 .my-comunity-card .wrap {
383 -webkit-transform: rotate(-45deg);
384 -moz-transform: rotate(-45deg);
385 transform: rotate(-45deg);
386 float: left;
387 border: transparent;
388 overflow: hidden;
389 transition: all 0.3s ease .3s;
390 border-radius: 20px;
391 position: absolute;
392 top: -14%;
393 left: 17%;
394 }
395
396 .my-comunity-card .morph {
397 -webkit-transform: rotate(45deg) scale(1.3);
398 -moz-transform: rotate(45deg) scale(1.3);
399 transform: rotate(45deg) scale(1.3);
400 float: left;
401 -webkit-backface-visibility: hidden;
402 -moz-backface-visibility: hidden;
403 backface-visibility: hidden;
404 width:100%;
405 height:100%;
406 max-width: 100px;
407 max-height:100px;
408 flex-shrink: 0;
409
410 }
411 @media (max-width: 575.98px){
412 .card-caroucel-container .slick-list.draggable{
413 padding: 60px 60px;
414 }
415 .titulo-comunidade .titulo{
416 font-size: 20px;
417 }
418 .titulo-comunidade .titulo strong{
419 font-size: 20px;
420 }
421 .titulo-comunidade .desc{
422 font-size: 13px;
423 }
424 .card-caroucel-container .slick-dots li{
425 max-width:fit-content;
426
427 }
428 }
429 @media (max-width: 992.98px){
430 .card-caroucel-container .slick-list.draggable .slick-track {
431 gap: 1rem;
432 }
433 }
434</style>
435
436<script>
437
438 $('.testemunho').slick({
439 dots: true,
440 centerMode: true,
441 autoplay: true,
442 centerPadding: '60px',
443 initialSlide: 2,
444 slidesToShow: 2,
445 arrows: false,
446 infinite: true,
447 variableWidth: true,
448 speed: 300,
449 responsive: [{
450 breakpoint: 1024,
451 settings: {
452 slidesToShow: 2,
453 centerMode: true,
454 centerPadding: '40px',
455 slidesToScroll: 2,
456 }
457 },
458 {
459 breakpoint: 600,
460 settings: {
461 slidesToShow: 2,
462 centerMode: true,
463 centerPadding: '40px',
464 slidesToScroll: 2
465 }
466 },
467 {
468 breakpoint: 480,
469 settings: {
470 slidesToShow: 1,
471 centerMode: true,
472 centerPadding: '40px',
473 slidesToScroll: 1
474 }
475 }
476 ]
477 });
478 $('.card-caroucel-container').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
479 var isDesktop = window.innerWidth > 768;
480 if (isDesktop && slick.slideCount === 3) {
481 // Check if the nextSlide is not equal to 1
482 // Remove the slick-center class from the currently centered slide
483 /*slick.$slides.eq(currentSlide).removeClass('slick-center');*/
484 // Add the slick-center class to the desired slide (slide 1)
485 slick.$slides.eq(1).addClass('slick-center');
486 }
487 });
488</script>
Une erreur s'est produite lors du traitement du modèle.
The following has evaluated to null or missing:
==> docXml.selectSingleNode("/root/dynamic-element[@name='${fieldName}']/dynamic-content[@language-id='${locale}']") [in template "20096#20121#203526" at line 51, column 27]
----
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: #assign fieldElement = docXml.selectS... [in template "20096#20121#203526" in function "getFieldText" at line 51, column 5]
----
1<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
2<#if entries?has_content>
3 <div class="container estagiario card-caroucel-container justify-content-center pt-5">
4 <#list entries as entry>
5 <#assign
6 docXml = saxReaderUtil.read(entry.getAssetRenderer().getArticle().getContent())
7 siteId = themeDisplay.getSiteGroupId()
8 imageUUID = getImageUUID(docXml)
9 name = getFieldText(docXml, 'Text57481720' ,locale)
10 cargo = getFieldText(docXml, 'Text99501005' ,locale)
11 desc = getFieldText(docXml, 'RichText71489926' ,locale)
12 videoUIID = getVideoUrl(docXml)
13 viewURL = getViewURL(entry, assetLinkBehavior)
14 lblVermais = (locale=="en_GB")?string("read more", (locale=="fr_FR")?string("en savoir plus", "ler mais"))
15 />
16 <div class="card my-comunity-card">
17 <div class="wrap">
18 <img src="/documents/${siteId}/${imageUUID}" class="morph" alt="${entry.getTitle(locale)}"/>
19 </div>
20 <div class="fix"></div>
21 <div class="card-body">
22 <h5 class="card-title name">${name}</h5>
23 <p class="card-text cargo">${cargo}</p>
24 <div class="card-text description">${desc}</div>
25 <div class="text-center buttom-container">
26 <span class="mais">
27 <a class="card-link mt-3 ler-mais" role="button" aria-pressed="true">
28 ${lblVermais}
29 </a>
30 <img src="/documents/d/akademia/arrow-forward" class="arrow-ler-mais" alt="...">
31 </span>
32 <!-- <button class="card-link mt-3 ver-video" role="button" aria-pressed="true">
33 <a data-video="/documents/${siteId}/${videoUIID}" type="button" class="text-video" style="color:#fff;">ver video</a>
34 <img src="/documents/d/akademia/vector" class="icone-video" alt="Icone" />
35 </button> -->
36 </div>
37 </div>
38 </div>
39 </#list>
40 </div>
41</#if>
42
43<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
44
45<#function getImageUUID(docXml)>
46 <#assign imageJSONString=docXml.selectSingleNode("/root/dynamic-element[@name='Image24167455']/dynamic-content").getText() />
47 <#return jsonFactoryUtil.createJSONObject(imageJSONString).getString("uuid") />
48</#function>
49
50<#function getFieldText(docXml, fieldName ,locale)>
51 <#assign fieldElement=docXml.selectSingleNode("/root/dynamic-element[@name='${fieldName}']/dynamic-content[@language-id='${locale}']") />
52 <#return fieldElement.getText() />
53</#function>
54
55<#function getViewURL(entry, assetLinkBehavior )>
56 <#assign assetRenderer=entry.getAssetRenderer() />
57 <#assign viewURL=assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse, entry) />
58 <#if assetLinkBehavior !="showFullContent">
59 <#assign viewURL=assetRenderer.getURLViewInContext(renderRequest, renderResponse, viewURL) />
60 </#if>
61 <#return viewURL />
62</#function>
63
64<#function getVideoUrl(docXml)>
65 <#assign videoJSONString=docXml.selectSingleNode("/root/dynamic-element[@name='DocumentLibrary11676229']/dynamic-content").getText() />
66 <#return jsonFactoryUtil.createJSONObject(videoJSONString).getString("uuid") />
67</#function>
68
69<style>
70/******comunidade *****/
71
72 .comunidade{
73 font-family: Poppins;
74 }
75 .comunidade .card .noLink{
76 color: unset;
77 text-decoration: none !important;
78 }
79 .fix{
80 display:flex;
81 width: 144px;
82 height: 142px;
83 justify-self: center;
84 object-fit: cover;
85 margin-top: -60px;
86 }
87 .icon-card-comunnidade {
88 width: 144px;
89 height: 142px;
90 justify-self: center;
91 object-fit: cover;
92 margin-top: -60px;
93 }
94
95 .comunidade .card .card-title.name{
96 color: #000;
97 font-family: Poppins;
98 font-size: 15px;
99 font-style: normal;
100 font-weight: 700;
101 line-height: 30px;
102 overflow:hidden;
103 display: -webkit-box;
104 -webkit-line-clamp: 1;
105 -webkit-box-orient: vertical;
106 text-overflow: ellipsis;
107 }
108
109 .comunidade .card .cargo{
110 font-family: Poppins;
111 font-size: 12px;
112 font-style: normal;
113 font-weight: 300;
114 line-height: 15px;
115 min-height:30px;
116 overflow:hidden;
117 display: -webkit-box;
118 -webkit-line-clamp: 2;
119 -webkit-box-orient: vertical;
120 text-overflow: ellipsis;
121 }
122 .comunidade .card .description{
123 max-height: 90px;
124 min-height: 90px;
125 margin-bottom: 0px;
126 text-align: justify;
127 font-family: Poppins;
128 font-size: 11px;
129 font-style: normal;
130 font-weight: 400;
131 line-height: 170%;
132 letter-spacing: 0.22px;
133 overflow: hidden;
134 justify-content: flex-end;
135 display: flex;
136 display: -webkit-box;
137 -webkit-line-clamp: 5;
138 -webkit-box-orient: vertical;
139 text-overflow: ellipsis;
140 }
141
142 .comunidade .card .ler-mais {
143 cursor:pointer;
144 border-radius: 20px;
145 color: #F86858 !important;
146 background-color: white;
147 border: none;
148 text-align: center;
149 font-family: Maven Pro;
150 font-size: 13.6px;
151 font-style: normal;
152 font-weight: 500;
153 line-height: 165%; /* 22.44px */
154 letter-spacing: 0.4px;
155 }
156
157 .comunidade .card .ver-video {
158 width: 80px;
159 height: 24px;
160 text-align:center;
161 border: none;
162 font-size: 12px;
163 color: #fff;
164 border-radius: 15.714px;
165 background: #5BACAD;
166 z-index:1;
167 font-family: Maven Pro;
168 font-size: 8.905px;
169 font-style: normal;
170 font-weight: 500;
171 line-height: 165%;
172 letter-spacing: 0.262px;
173 }
174 .comunidade .card .text-video {
175 text-decoration:none;
176 color: #fff !important;
177 font-family: Maven Pro;
178 font-size: 8.905px;
179 font-style: normal;
180 font-weight: 500;
181 line-height: 165%;
182 letter-spacing: 0.262px;
183 }
184 .comunidade .card .buttom-container{
185 padding-top:0px;
186 margin-top: 18px;
187 }
188
189 .titulo-comunidade{
190 position:relative;
191 display:flex;
192 flex-direction:column;
193 }
194 .titulo-comunidade .titulo{
195 color: #414141;
196 font-family: Poppins;
197 font-size: 30.088px;
198 font-style: normal;
199 font-weight: 500;
200 line-height: 44px;
201 }
202
203 .titulo-comunidade .titulo strong{
204 font-family: Poppins;
205 font-size: 33.699px;
206 font-style: normal;
207 font-weight: 700;
208 line-height: 44px
209 }
210 .titulo-comunidade .desc{
211 color: #414141;
212 font-family: Poppins;
213 font-size: 17.466px;
214 font-style: normal;
215 font-weight: 400;
216 line-height: 150%;
217 margin-top: -15px;
218 }
219
220 .comunidade .my-comunity-card {
221 background-color: #fff;
222 border-color: transparent;
223 border-style: none;
224 box-shadow:none !important;
225 -webkit-transition: 0.4s ease-out;
226 transition: 0.4s ease-out
227 }
228 .comunidade .my-comunity-card .ler-mais:hover{
229 text-decoration:underline;
230 }
231
232 .comunidade .my-comunity-card .ver-video:hover .text-video{
233 text-decoration:underline;
234 }
235 .comunidade .my-comunity-card:hover .arrow-ler-mais{
236 animation: arrow-slice-comunity 1s ease-in-out infinite;
237 }
238
239 .comunidade .my-comunity-card:hover .icone-video{
240 animation: video-play 1s ease-in-out infinite;
241 margin-left: 4px;
242 }
243
244 @keyframes arrow-slice-comunity {
245 0%,100% {
246 transform: translate(0, 0);
247 }
248 50% {
249 transform: translate(3px, 0);
250 }
251 }
252
253 @keyframes video-play {
254 0%,100% {
255 transform: scale(1.1);
256 }
257 50% {
258 transform: scale(1.4);
259 }
260 }
261 .comunidade .my-comunity-card:hover{
262 cursor:pointer;
263 -webkit-transform: translateY(-15px);
264 transform: translateY(-15px);
265 box-shadow:0px 4px 12px rgb(0 0 0 / 8%)!important;
266 }
267
268 .card-caroucel-container .slick-slide{
269 width: 322px;
270 height: 361px;
271 flex-shrink: 0;
272 }
273
274 .card-caroucel-container .slick-slide.slick-active.slick-center{
275 z-index:2;
276 }
277 .comunidade .arrow{
278 align-self: center;
279 background-color: #feb21c;
280 width: 3.5rem;
281 height: 3px;
282 font-family: Poppins;
283 }
284
285 /* slick*/
286 .card-caroucel-container .slick-list.draggable{
287 padding-bottom: 60px !important;
288 padding-top: 87px !important;
289 padding-right: 0px !important;
290 padding-left: 0px !important;
291 }
292
293 .card-caroucel-container .slick-list.draggable .slick-track{
294 display: flex;
295 gap: 4rem;
296 }
297
298 .card-caroucel-container .slick-dots li {
299 color:rgba(196, 196, 196, 1) !important;
300 }
301
302 .card-caroucel-container .slick-dots {
303 position: relative;
304 bottom: 10px; /* Adjust the positioning as needed */
305 list-style: none;
306 display: flex;
307 justify-content: center;
308 align-items: center;
309 margin: 0;
310 padding: 0;
311 }
312
313 .card-caroucel-container .slick-dots li {
314 flex: 0 0 56px;
315 height: 4px;
316 background: rgba(196, 196, 196, 1);
317 border-radius: 5px;
318 margin: 0 5px;
319 cursor: pointer;
320 transition: background 0.3s ease;
321 }
322
323 .card-caroucel-container .slick-dots li button:before{
324 display:none;
325 }
326
327 .card-caroucel-container .slick-dots li.slick-active {
328 background: #f48914;
329 }
330
331 .card-caroucel-container .slick-dots li.slick-active {
332 color:#f48914!important;
333 }
334
335 .card-caroucel-container .slick-dots li button {
336 font-size: 0;
337 line-height: 0;
338 display: block;
339 width: 20px;
340 height: 20px;
341 padding: 5px;
342 cursor: pointer;
343 color: transparent;
344 border: 0;
345 outline: none;
346 background: transparent;
347 }
348
349 .card-caroucel-container .slick-slide img {
350 display:inline;
351 }
352
353 .card-caroucel-container .slick-dots {
354 /*position: absolute;*/
355 bottom: 10px;
356 list-style: none;
357 display: flex;
358 justify-content: center;
359 align-items: center;
360 margin: 0;
361 padding: 0;
362 }
363
364 .card-caroucel-container .slick-dots li {
365 flex: 0 0 56px;
366 height: 4px;
367 background: rgba(196, 196, 196, 1);
368 border-radius: 5px;
369 margin: 0 5px;
370 cursor: pointer;
371 transition: background 0.3s ease;
372 }
373
374 .card-caroucel-container .slick-dots li.slick-active {
375 background:rgba(244, 137, 20, 1);
376 }
377
378 /*.card-caroucel-container .slick-dots li:nth-child(n+4) {
379 display:none;
380 }*/
381 /**losange card **/
382 .my-comunity-card .wrap {
383 -webkit-transform: rotate(-45deg);
384 -moz-transform: rotate(-45deg);
385 transform: rotate(-45deg);
386 float: left;
387 border: transparent;
388 overflow: hidden;
389 transition: all 0.3s ease .3s;
390 border-radius: 20px;
391 position: absolute;
392 top: -14%;
393 left: 17%;
394 }
395
396 .my-comunity-card .morph {
397 -webkit-transform: rotate(45deg) scale(1.3);
398 -moz-transform: rotate(45deg) scale(1.3);
399 transform: rotate(45deg) scale(1.3);
400 float: left;
401 -webkit-backface-visibility: hidden;
402 -moz-backface-visibility: hidden;
403 backface-visibility: hidden;
404 width:100%;
405 height:100%;
406 max-width: 100px;
407 max-height:100px;
408 flex-shrink: 0;
409
410 }
411 @media (max-width: 575.98px){
412 .card-caroucel-container .slick-list.draggable{
413 padding: 60px 60px;
414 }
415 .titulo-comunidade .titulo{
416 font-size: 20px;
417 }
418 .titulo-comunidade .titulo strong{
419 font-size: 20px;
420 }
421 .titulo-comunidade .desc{
422 font-size: 13px;
423 }
424 }
425 @media (max-width: 992.98px){
426 .card-caroucel-container .slick-list.draggable .slick-track {
427 gap: 1rem;
428 }
429 }
430</style>
431
432<script>
433
434 $('.estagiario').slick({
435 dots: true,
436 centerMode: true,
437 autoplay: true,
438 centerPadding: '60px',
439 initialSlide: 2,
440 slidesToShow: 2,
441 arrows: false,
442 infinite: true,
443 variableWidth: true,
444 speed: 300,
445 responsive: [{
446 breakpoint: 1024,
447 settings: {
448 slidesToShow: 2,
449 centerMode: true,
450 centerPadding: '40px',
451 slidesToScroll: 2,
452 }
453 },
454 {
455 breakpoint: 600,
456 settings: {
457 slidesToShow: 2,
458 centerMode: true,
459 centerPadding: '40px',
460 slidesToScroll: 2
461 }
462 },
463 {
464 breakpoint: 480,
465 settings: {
466 slidesToShow: 1,
467 centerMode: true,
468 centerPadding: '40px',
469 slidesToScroll: 1
470 }
471 }
472 ]
473 });
474 $('.card-caroucel-container').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
475 var isDesktop = window.innerWidth > 768;
476 if (isDesktop && slick.slideCount === 3) {
477 // Check if the nextSlide is not equal to 1
478 // Remove the slick-center class from the currently centered slide
479 /*slick.$slides.eq(currentSlide).removeClass('slick-center');*/
480 // Add the slick-center class to the desired slide (slide 1)
481 slick.$slides.eq(1).addClass('slick-center');
482 }
483 });
484</script>