-
Notifications
You must be signed in to change notification settings - Fork 0
/
styles.css
154 lines (126 loc) · 2.66 KB
/
styles.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
/* Zerando/resetando os espaçamentos padrões do navergaor: */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
/* Trabalhando o fundo */
body {
background-image: url(./assets/bg1.jpg);
background-position: top center;
background-size: 580px auto;
background-repeat: no-repeat;
background-color: #000000;
}
body * {
font-family: 'Inter', sans-serif;
line-height: 160%;
}
header {
margin-top: 32px;
height: 120px;
}
header div {
width: 120px;
margin: auto;
background-image: linear-gradient(90deg, #9572FC 0%, #43E7AD 50.52%, #E2D45C 100%);
border-radius: 50%;
display: flex;
padding: 4px;
transition: transform .3s;
}
header div:hover {
transform: scale(1.1);
}
header img {
width: 100%;
border-radius: 50%;
}
main {
max-width: 580px;
width: 90%;
margin: 32px auto;
display: grid;
gap: 24px;
}
section {
color: white; /* cor das letras */
background-image: linear-gradient(90deg, #9572FC 0%, #43E7AD 50.52%, #E2D45C 100%);
padding-top: 4px;
border-radius: 10px;
}
section div {
background-color: #2a2634;
padding: 32px;
padding-top: 24px;
border-radius: 8px;
}
section h2 {
font-weight: 900; /* padrão do navegador, pode até retirar */
font-size: 24px; /* padrão do navegador, pode até retirar */
letter-spacing: -0.47px;
}
section p {
font-weight: 400; /* padrão do navegador, pode até retirar */
font-size: 16px; /* padrão do navegador, pode até retirar */
letter-spacing: -0.18px;
color: #A1A1AA;
}
section ul {
display: flex; /* para que os li fiquem um ao lado da outra, pois por padrão são block */
flex-wrap: wrap;
gap: 16px; /* gap só funciona se tiver o display flex*/
margin-top: 24px;
transition: transforme .3s;
}
section ul li:hover {
transform: scale(1.1);
}
.games-list img {
width: 90px;
border-radius: 8px;
}
.chanel-list img {
border: 1px solid #443E54;
border-radius: 50%;
width: 70px;
}
/* animation */
header div {
animation: fromTop .7s 0.2s backwards;
}
@keyframes fromTop {
from{
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
main section {
animation: fromLeft .7s backwards;
}
main section:nth-child(1) {
animation-delay: 0;
}
main section:nth-child(2) {
animation-delay: .3s;
}
main section:nth-child(3) {
animation-delay: .6s;
}
@keyframes fromLeft {
from{
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}