Skip to content

Commit 7cd9f8f

Browse files
paulatalimpaulatalim
committed
merge branchs
2 parents 73c3f2b + cc80b4a commit 7cd9f8f

File tree

2 files changed

+240
-17
lines changed

2 files changed

+240
-17
lines changed

‎css/style.css‎

Lines changed: 213 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -434,6 +434,20 @@ body {
434434
padding: 15px 10%;
435435
}
436436

437+
.plataformas-title {
438+
display: flex;
439+
align-items: center;
440+
}
441+
442+
.plataformas-title h1 {
443+
font-size: 3em;
444+
}
445+
446+
#plataforma-carousel {
447+
display: flex;
448+
align-items: center;
449+
}
450+
437451
.plataforma-slide {
438452
display: flex;
439453
flex-direction: row;
@@ -442,6 +456,172 @@ body {
442456
flex-wrap: wrap;
443457
}
444458

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+
445625
.plataforma-area-card {
446626
padding: 20px;
447627
height: 400px;
@@ -485,11 +665,10 @@ body {
485665
top: 30%;
486666
color: white;
487667
font-size: 20pt;
488-
}
668+
} */
489669

490670
/*** PUBLISHER ***/
491671
.publisher {
492-
background: rgb(124,0,247);
493672
background: linear-gradient(0deg, rgba(124,0,247,1) 0%, rgba(139,0,204,1) 100%);
494673
color: #fff;
495674
width: 100%;
@@ -498,6 +677,20 @@ body {
498677
padding: 15px 10%;
499678
}
500679

680+
.publisher-title {
681+
display: flex;
682+
align-items: center;
683+
}
684+
685+
.publisher-title h1 {
686+
font-size: 3em;
687+
}
688+
689+
#publisher-carousel {
690+
display: flex;
691+
align-items: center;
692+
}
693+
501694
.publisher-slide {
502695
display: flex;
503696
flex-direction: row;
@@ -720,18 +913,10 @@ footer p {
720913
font-size: 35pt;
721914
}
722915

723-
/* PLATAFORMA */
724-
.plataforma-area-card {
725-
height: 200px;
726-
}
727-
728916
/* PUBLISHERS */
729917
.publisher {
730918
min-height: 960px;
731919
}
732-
.publisher-area-card {
733-
height: 200px;
734-
}
735920
}
736921

737922
@media screen and (max-width: 800px) {
@@ -761,7 +946,7 @@ footer p {
761946

762947
.card {
763948
background-position-y: 75%;
764-
}
949+
}
765950
}
766951

767952
@media screen and (max-width: 576px) {
@@ -773,10 +958,27 @@ footer p {
773958
/* PLATAFORMA */
774959
.plataformas {
775960
height: auto;
961+
padding-bottom: 200px;
962+
}
963+
964+
.plataformas-title {
965+
justify-content: center;
966+
}
967+
968+
.plataforma-area-card {
969+
height: 200px;
776970
}
777971

778972
/* PUBLISHER */
779973
.publisher {
780974
height: auto;
781975
}
976+
977+
.publisher-title {
978+
justify-content: center;
979+
}
980+
981+
.publisher-area-card {
982+
height: 200px;
983+
}
782984
}

‎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)