-
Notifications
You must be signed in to change notification settings - Fork 1
/
style.css
182 lines (157 loc) · 5.92 KB
/
style.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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
/* Importa a fonte Chakra Petch do Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
/* Estiliza o corpo da página */
body {
font-family: "Chakra Petch", sans-serif; /* Define a fonte padrão */
background-image: url(imagens/strangerthings.jpg);
background-size: cover;
background-position: center;
display: flex; /* Usa Flexbox para layout */
flex-direction: column; /* Alinha os itens na vertical */
align-items: center; /* Centraliza os itens horizontalmente */
justify-content: center; /* Centraliza os itens verticalmente */
height: 100vh; /* Preenche a altura total da viewport */
margin: 0; /* Remove a margem padrão */
padding: 0; /* Remove o padding padrão */
}
/* Estiliza os títulos h1 */
h1 {
font-size: 2.5rem; /* Tamanho da fonte */
color: #ebf1f1; /* Cor do texto */
text-align: center; /* Alinha o texto ao centro */
letter-spacing: 0.4rem; /* Espaçamento entre letras */
}
/* Estiliza as seções da página */
section {
display: flex; /* Usa Flexbox para layout */
flex-direction: column; /* Alinha os itens na vertical */
align-items: normal; /* Centraliza os itens horizontalmente */
margin-bottom: 3rem; /* Espaçamento abaixo de cada seção */
}
/* Estiliza os inputs dentro das seções */
section input {
width: 30rem; /* Largura dos inputs */
border: none; /* Remove a borda padrão */
padding: 1rem; /* Espaçamento interno */
border-radius: 1.5rem; /* Borda arredondada */
margin-bottom: 1rem; /* Espaçamento abaixo dos inputs */
color: #45474b; /* Cor do texto */
font-size: 1rem; /* Tamanho da fonte */
box-sizing: border-box; /* Inclui padding e border na largura total */
}
/* Estiliza os botões dentro das seções */
section button {
padding: 0.8rem 1.2rem; /* Espaçamento interno do botão */
border: none; /* Remove a borda padrão */
border-radius: 1.5rem; /* Borda arredondada */
background-color: #30475e; /* Cor de fundo do botão */
color: #f5f7f8; /* Cor do texto do botão */
font-size: 1rem; /* Tamanho da fonte */
cursor: pointer; /* Muda o cursor para indicar que é clicável */
}
/* Adiciona efeito hover ao botão de pesquisa */
section button:hover {
background-color: #30475e; /* Muda a cor de fundo ao passar o mouse */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra mais intensa */
}
/* Estiliza a caixa de resultados da pesquisa */
.resultados-pesquisa {
width: 60rem; /* Largura máxima da caixa de resultados */
height: 46vh; /* Altura máxima da caixa de resultados */
overflow-y: auto; /* Adiciona rolagem vertical se necessário */
margin-top: 1rem; /* Espaçamento acima da caixa de resultados */
padding: 1rem; /* Espaçamento interno */
border-radius: 0.6rem; /* Borda arredondada */
}
/* Estiliza cada item de resultado */
.item-resultado {
background: #ffffff; /* Cor de fundo dos itens */
border-radius: 0.6rem; /* Borda arredondada */
padding: 1rem; /* Espaçamento interno */
margin-bottom: 1rem; /* Espaçamento abaixo dos itens */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra leve */
}
/* Estiliza os títulos dentro dos itens de resultado */
.item-resultado h2 {
font-size: 1.5rem; /* Tamanho da fonte */
color: #222831; /* Cor do texto */
}
/* Estiliza os links dentro dos itens de resultado */
.item-resultado a {
text-decoration: none; /* Remove o sublinhado padrão dos links */
color: #30475e; /* Cor do texto dos links */
}
.item-resultado img {
float: left;
margin-right: 10px;
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 5px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease-in-out;
}
.item-resultado img:hover {
transform: scale(1.1);
}
/* Estiliza os links quando são passados o mouse sobre */
.item-resultado a:hover {
text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
}
/* Estiliza a descrição meta dentro dos itens de resultado */
.descricao-meta {
color: #45474b; /* Cor do texto */
margin: 0.5rem 0; /* Margem acima e abaixo */
}
/* Estiliza o rodapé da página */
footer {
background-color: #f5f7f8; /* Cor de fundo do rodapé */
color: #45474b; /* Cor do texto */
text-align: center; /* Alinha o texto ao centro */
padding: 0; /* Espaçamento interno */
width: 100%; /* Largura total da página */
position: absolute; /* Posiciona o rodapé */
bottom: 0; /* Alinha ao fundo da página */
font-size: 1rem; /* Tamanho da fonte */
}
@media (max-width: 768px) {
h1 {
font-size: 2rem; /* Tamanho da fonte em telas menores */
letter-spacing: 0.2rem; /* Espaçamento entre letras em telas menores */
}
section input {
width: 25rem; /* Largura dos inputs em telas menores */
padding: 0.8rem; /* Espaçamento interno em telas menores */
}
.resultados-pesquisa {
width: 40rem; /* Largura da caixa de resultados em telas menores */
height: 40vh; /* Altura da caixa de resultados em telas menores */
}
.item-resultado h2 {
font-size: 1.3rem; /* Tamanho da fonte dos títulos em telas menores */
}
}
/* Responsividade para celulares */
@media (max-width: 480px) {
h1 {
font-size: 1.8rem; /* Tamanho da fonte em telas pequenas */
letter-spacing: 0.1rem; /* Espaçamento entre letras em telas pequenas */
}
section input {
width: 17rem; /* Largura total dos inputs em telas pequenas */
}
section button {
padding: 0.6rem 1rem; /* Espaçamento interno do botão em telas pequenas */
font-size: 0.9rem; /* Tamanho da fonte do botão em telas pequenas */
}
.resultados-pesquisa {
width: 90%; /* Largura da caixa de resultados em telas pequenas */
height: 50vh; /* Altura da caixa de resultados em telas pequenas */
}
.item-resultado h2 {
font-size: 1.1rem; /* Tamanho da fonte dos títulos em telas pequenas */
}
footer {
font-size: 0.9rem; /* Tamanho da fonte do rodapé em telas pequenas */
}
}