Skip to content

Commit e7afed6

Browse files
paulatalimpaulatalim
committed
merge branchs
2 parents 013b8be + 2262a0d commit e7afed6

File tree

7 files changed

+354
-221
lines changed

7 files changed

+354
-221
lines changed

‎css/style.css‎

Lines changed: 175 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,44 @@ body {
4141
margin: auto 0;
4242
}
4343

44+
/*** CARREGAMENTO ***/
45+
.subsessao-carregamento {
46+
width: 100vw;
47+
height: 100vh;
48+
49+
display: flex;
50+
justify-content: center;
51+
align-items: center;
52+
}
53+
54+
.jogos .subsessao-carregamento {
55+
display: none;
56+
}
57+
58+
.load {
59+
width: 80px;
60+
height: 80px;
61+
62+
border: 10px solid transparent;
63+
border-radius: 50%;
64+
border-left: 10px solid rgb(223,0,255);
65+
66+
animation-name: loading;
67+
animation-duration: 1.5s;
68+
animation-timing-function: linear;
69+
animation-iteration-count: infinite;
70+
}
71+
72+
@keyframes loading {
73+
from {
74+
transform: rotate(0deg);
75+
}
76+
77+
to {
78+
transform: rotate(360deg);
79+
}
80+
}
81+
4482
/*** DESTAQUES ***/
4583
.destaque {
4684
margin: 0;
@@ -54,10 +92,26 @@ body {
5492
.slide-destaque {
5593
background-repeat: no-repeat;
5694
background-size: cover;
57-
background-position-x: left;
58-
background-position-y: center;
95+
background-position-x: 0%;
96+
background-position-y: 50%;
5997
height: 100vh;
6098
width: 100%;
99+
100+
animation-name: animacao_destaques_banner;
101+
animation-duration: 5s;
102+
animation-iteration-count: infinite;
103+
animation-timing-function: linear;
104+
animation-direction: alternate-reverse;
105+
}
106+
107+
@keyframes animacao_destaques_banner {
108+
from {
109+
background-position-y: 0%;
110+
}
111+
112+
to {
113+
background-position-y: 100%;
114+
}
61115
}
62116

63117
.destaque-filtro-image {
@@ -80,10 +134,15 @@ body {
80134
gap: 50px;
81135
}
82136

83-
#destaque-conteudo-detalhamento {
84-
font-size: 15pt;
137+
.destaque-conteudo {
138+
display: flex;
139+
flex-direction: column;
140+
gap: 40px;
85141
}
86142

143+
#destaque-conteudo-detalhamento {
144+
font-size: 13pt;
145+
}
87146
/*** JOGOS ***/
88147
.jogos, .sobre {
89148
max-width: 1000px;
@@ -359,6 +418,12 @@ body {
359418
outline: none;
360419
}
361420

421+
/*** ONDAS ***/
422+
.ondas {
423+
padding: 0;
424+
margin: 0;
425+
}
426+
362427
/*** PLATAFORMAS ***/
363428
.plataformas {
364429
background: rgb(139,0,204);
@@ -369,14 +434,22 @@ body {
369434
padding: 15px 10%;
370435
}
371436

372-
.plataformas .carousel, .plataformas .carousel .carousel-item {
373-
height: 55vh;
437+
.plataforma-slide {
438+
display: flex;
439+
flex-direction: row;
440+
align-items: center;
441+
justify-content: space-around;
442+
flex-wrap: wrap;
374443
}
375444

376-
.plataforma-slide-card {
377-
margin: auto 10px;
378-
padding: 0 10px;
379-
height: 300px;
445+
.plataforma-area-card {
446+
padding: 20px;
447+
height: 400px;
448+
}
449+
450+
.plataforma-card {
451+
width: 100%;
452+
height: 100%;
380453
}
381454

382455
.plataforma-card-conteudo {
@@ -411,6 +484,7 @@ body {
411484
position: relative;
412485
top: 30%;
413486
color: white;
487+
font-size: 20pt;
414488
}
415489

416490
/*** PUBLISHER ***/
@@ -419,16 +493,90 @@ body {
419493
background: linear-gradient(0deg, rgba(124,0,247,1) 0%, rgba(139,0,204,1) 100%);
420494
color: #fff;
421495
width: 100%;
422-
height: 110vh;
496+
height: 100vh;
423497
margin: 0;
424498
padding: 15px 10%;
425499
}
426500

427-
.publisher-title, #publisher {
428-
height: auto;
501+
.publisher-slide {
502+
display: flex;
503+
flex-direction: row;
504+
align-items: center;
505+
justify-content: space-around;
506+
flex-wrap: wrap;
507+
}
508+
509+
.publisher-area-card {
510+
border: none;
511+
height: 400px;
512+
padding: 20px;
429513
}
430514

431-
.publisher .carousel, .publisher .carousel .carousel-item {
515+
.publisher-card {
516+
background-color: #000;
517+
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.342);
518+
margin: 0;
519+
padding: 0;
520+
border: none;
521+
border-radius: 20px;
522+
height: 100%;
523+
width: 100%;
524+
}
525+
526+
.publisher-card-banner {
527+
background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,1) 100%), url(./exemplo.png);
528+
background-repeat: no-repeat;
529+
background-size: cover;
530+
background-position: center;
531+
532+
border-top-left-radius: 20px;
533+
border-top-right-radius: 20px;
534+
height: 90%;
535+
536+
color:white;
537+
display: flex;
538+
align-items:flex-end;
539+
justify-content: start;
540+
padding: 10px 20px;
541+
542+
transition: height 3s;
543+
}
544+
545+
#publisher-card-title {
546+
font-size: 16pt;
547+
}
548+
549+
.publisher-card-conteudo {
550+
background-color: #000;
551+
color: #fff;
552+
border-bottom-left-radius: 20px;
553+
border-bottom-right-radius:20px;
554+
555+
padding: 0 20px;
556+
height: 0px;
557+
overflow: hidden;
558+
transition: height 3s;
559+
}
560+
561+
.publisher-card:hover .publisher-card-banner {
562+
height: 40%;
563+
}
564+
565+
.publisher-card:hover .publisher-card-conteudo {
566+
padding: 5px 20px;
567+
height: 60%;
568+
}
569+
570+
#publisher-card-conteudo-topicos {
571+
padding-left: 20px;
572+
}
573+
574+
#publisher-carousel .carousel-control-prev,
575+
#publisher-carousel .carousel-control-next {
576+
width: 5% !important;
577+
}
578+
579+
/* .publisher .carousel, .publisher .carousel .carousel-item {
432580
height: 95vh;
433581
}
434582
@@ -488,7 +636,7 @@ body {
488636
489637
#publisher-card-conteudo-topicos {
490638
padding-left: 20px;
491-
}
639+
} */
492640

493641
/*** SOBRE ***/
494642
.sobre {
@@ -538,7 +686,7 @@ footer p {
538686
}
539687

540688
::-webkit-scrollbar {
541-
background-color: rgba(0, 0, 0, 0);
689+
background-color: transparent;
542690
width: 10px;
543691
}
544692

@@ -572,50 +720,18 @@ footer p {
572720
font-size: 35pt;
573721
}
574722

575-
/* PLATAFORMA */
576-
.plataformas .carousel-item .float-left {
577-
margin-top: 10%;
578-
}
579-
580-
.plataforma-slide-card {
723+
/* PLATAFORMA */
724+
.plataforma-area-card {
581725
height: 200px;
582726
}
583727

584728
/* PUBLISHERS */
585729
.publisher {
586-
height: 100vh !important;
587-
}
588-
589-
.plataformas-title, .publisher-title {
590-
display: flex;
591-
align-items: center;
592-
}
593-
594-
.publisher .carousel-item .float-left {
595-
margin-top: 5%;
730+
min-height: 960px;
596731
}
597-
598-
.publisher .carousel, .publisher .carousel .carousel-item {
599-
height: 55vh;
600-
}
601-
602-
.publisher-slide {
603-
height: auto;
604-
padding: 20px;
605-
}
606-
607-
.publisher-card {
608-
background-color: rgba(0, 0, 0, 0);
732+
.publisher-area-card {
609733
height: 200px;
610734
}
611-
612-
.publisher-card-banner {
613-
height: 100%;
614-
}
615-
616-
.publisher-card-conteudo {
617-
display: none;
618-
}
619735
}
620736

621737
@media screen and (max-width: 800px) {
@@ -646,30 +762,21 @@ footer p {
646762
.card {
647763
background-position-y: 75%;
648764
}
649-
650-
.plataformas .carousel-item .float-left, .publisher .carousel-item .float-left {
651-
margin-top: 25% !important;
652-
}
653-
654765
}
655766

656767
@media screen and (max-width: 576px) {
657768
/* JOGOS */
658769
.filtro, .jogos-pesquisar {
659770
display: none;
660771
}
661-
662-
/* PUBLISHER */
663-
.publisher .carousel, .publisher .carousel .carousel-item {
664-
height: 70vh;
665-
}
666772

667-
.publisher .carousel-item .float-left {
668-
margin-top: 0%;
773+
/* PLATAFORMA */
774+
.plataformas {
775+
height: auto;
669776
}
670-
671-
.publisher-card {
672-
background-color: rgba(0, 0, 0, 0);
673-
height: 150px;
777+
778+
/* PUBLISHER */
779+
.publisher {
780+
height: auto;
674781
}
675782
}

‎img/exemplo.png‎

-2.42 KB
Binary file not shown.

0 commit comments

Comments
 (0)