Skip to content

Commit cc80b4a

Browse files
paulatalimpaulatalim
committed
melhora dos cards plataforma
1 parent bd744c6 commit cc80b4a

File tree

2 files changed

+194
-8
lines changed

2 files changed

+194
-8
lines changed

‎css/style.css‎

Lines changed: 167 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -456,6 +456,172 @@ body {
456456
flex-wrap: wrap;
457457
}
458458

459+
.plataforma-area-card {
460+
height: 400px;
461+
}
462+
463+
.plataforma-card-frontside {
464+
width: 100%;
465+
height: 100%;
466+
}
467+
468+
.plataforma-card-frontside-conteudo {
469+
background-size: cover;
470+
background-repeat: no-repeat;
471+
background-position-x: center;
472+
background-position-y: center;
473+
474+
height: 100%;
475+
width: 100%;
476+
477+
padding: 0 25px;
478+
border: none;
479+
border-radius: 20px;
480+
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.342);
481+
482+
display: flex;
483+
align-items: center;
484+
}
485+
486+
#plataforma-titulo-frontside {
487+
position: relative;
488+
top: 30%;
489+
color: white;
490+
font-size: 20pt;
491+
}
492+
493+
/* Plataforma card backside */
494+
.plataforma-card-backside {
495+
background-repeat: no-repeat;
496+
background-position: center;
497+
background-size: cover;
498+
499+
height: 100%;
500+
width: 100%;
501+
padding: 0;
502+
border: none;
503+
border-radius: 20px;
504+
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.342);
505+
}
506+
507+
.plataforma-card-backside-content {
508+
background-color: rgba(170, 120, 193, 0.5);
509+
backdrop-filter: blur(2px);
510+
height: 100%;
511+
padding: 30px 25px;
512+
border-radius: 20px;
513+
514+
display: flex;
515+
flex-direction: column;
516+
justify-content: space-between;
517+
/* gap:60px; */
518+
519+
color: #fff;
520+
}
521+
522+
#plataforma-titulo-backside {
523+
color: rgb(255, 255, 255);
524+
font-size: 20pt;
525+
}
526+
527+
.plataforma-card-backside-jogos h3 {
528+
font-size: 16pt;
529+
}
530+
531+
#plataforma-card-backside-topicos {
532+
padding-left: 20px;
533+
}
534+
535+
/* Animacao card plataforma */
536+
.image-flip:hover .backside,
537+
.image-flip.hover .backside {
538+
-webkit-transform: rotateY(0deg);
539+
-moz-transform: rotateY(0deg);
540+
-o-transform: rotateY(0deg);
541+
-ms-transform: rotateY(0deg);
542+
transform: rotateY(0deg);
543+
}
544+
545+
.image-flip:hover .frontside,
546+
.image-flip.hover .frontside {
547+
-webkit-transform: rotateY(180deg);
548+
-moz-transform: rotateY(180deg);
549+
-o-transform: rotateY(180deg);
550+
transform: rotateY(180deg);
551+
}
552+
553+
.mainflip {
554+
-webkit-transition: 1s;
555+
-webkit-transform-style: preserve-3d;
556+
-ms-transition: 1s;
557+
-moz-transition: 1s;
558+
-moz-transform: perspective(1000px);
559+
-moz-transform-style: preserve-3d;
560+
-ms-transform-style: preserve-3d;
561+
transition: 1s;
562+
transform-style: preserve-3d;
563+
position: relative;
564+
}
565+
566+
.frontside {
567+
position: relative;
568+
-webkit-transform: rotateY(0deg);
569+
-ms-transform: rotateY(0deg);
570+
z-index: 2;
571+
}
572+
573+
.backside {
574+
position: absolute;
575+
top: 0;
576+
left: 0;
577+
width: 100%;
578+
-webkit-transform: rotateY(-180deg);
579+
-moz-transform: rotateY(-180deg);
580+
-o-transform: rotateY(-180deg);
581+
-ms-transform: rotateY(-180deg);
582+
transform: rotateY(-180deg);
583+
}
584+
585+
.frontside,
586+
.backside {
587+
-webkit-backface-visibility: hidden;
588+
-moz-backface-visibility: hidden;
589+
-ms-backface-visibility: hidden;
590+
backface-visibility: hidden;
591+
-webkit-transition: 1s;
592+
-webkit-transform-style: preserve-3d;
593+
-moz-transition: 1s;
594+
-moz-transform-style: preserve-3d;
595+
-o-transition: 1s;
596+
-o-transform-style: preserve-3d;
597+
-ms-transition: 1s;
598+
-ms-transform-style: preserve-3d;
599+
transition: 1s;
600+
transform-style: preserve-3d;
601+
}
602+
603+
.frontside .card,
604+
.backside .card {
605+
border: none;
606+
padding: 20px 0px;
607+
height: 400px;
608+
background-color: transparent;
609+
box-shadow: none;
610+
}
611+
612+
#plataforma-carousel .carousel-control-prev,
613+
#plataforma-carousel .carousel-control-next {
614+
width: 5% !important;
615+
}
616+
617+
/* .plataforma-slide {
618+
display: flex;
619+
flex-direction: row;
620+
align-items: center;
621+
justify-content: space-around;
622+
flex-wrap: wrap;
623+
}
624+
459625
.plataforma-area-card {
460626
padding: 20px;
461627
height: 400px;
@@ -499,11 +665,10 @@ body {
499665
top: 30%;
500666
color: white;
501667
font-size: 20pt;
502-
}
668+
} */
503669

504670
/*** PUBLISHER ***/
505671
.publisher {
506-
background: rgb(124,0,247);
507672
background: linear-gradient(0deg, rgba(124,0,247,1) 0%, rgba(139,0,204,1) 100%);
508673
color: #fff;
509674
width: 100%;

‎js/sketch_homepage.js‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -321,15 +321,36 @@ function exibir_plataformas (data) {
321321
break;
322322
}
323323

324-
str += `<div class="col-12 col-sm-6 col-md-6 col-lg-3 plataforma-area-card">
325-
<div class="plataforma-card">
326-
<div class="plataforma-card-conteudo" style="background-image: url(${jogo.image_background});">
327-
<div class="plataforma-card-titulo">
328-
<h2 id="plataforma-titulo">${jogo.name}</h2>
324+
let background = `background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,1) 70%, rgba(0,0,0,1) 100%), url(${jogo.image_background});`;
325+
326+
str += ` <div class="col-12 col-sm-6 col-md-6 col-lg-3"> <div class=" plataforma-area-card">
327+
<div class="image-flip" >
328+
<div class="mainflip flip-0">
329+
<div class="frontside">
330+
<div class="card">
331+
<div class="plataforma-card-frontside">
332+
<div class="plataforma-card-frontside-conteudo" style="${background}">
333+
<h2 id="plataforma-titulo-frontside">${jogo.name}</h2>
334+
</div>
329335
</div>
330336
</div>
331337
</div>
332-
</div>`
338+
339+
<div class="backside">
340+
<div class="card">
341+
<div class="plataforma-card-backside" style="${background}">
342+
<div class="plataforma-card-backside-content">
343+
<h2 id="plataforma-titulo-backside">${jogo.name}</h2>
344+
<div class="plataforma-card-backside-jogos">
345+
<h3>Alguns jogos</h3>
346+
<ul id="plataforma-card-backside-topicos">`
347+
348+
for (let k = 0; k < 3 && k < jogo.games.length; k++) {
349+
str+=`<li>${jogo.games[k].name}</li>`
350+
}
351+
352+
str+= `</ul></div></div></div></div></div></div></div></div></div>`
353+
333354
index++;
334355
}
335356

0 commit comments

Comments
 (0)