-
Notifications
You must be signed in to change notification settings - Fork 0
/
styles.css
171 lines (148 loc) · 6.25 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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
/* Define estilos globais para todos os elementos */
* {
margin: 0; /* Remove margens padrão */
padding: 0; /* Remove espaçamento interno padrão */
box-sizing: border-box; /* Inclui bordas e preenchimento no cálculo do tamanho total do elemento */
font-family: "poppins", sans-serif; /* Define a fonte "Poppins" como padrão */
}
/* Estiliza o elemento <html> */
html {
background-color: #e2eaf5; /* Define a cor de fundo da página */
}
/* Estiliza o elemento <body> */
body {
max-width: 1440px; /* Limita a largura máxima da página */
margin-left: auto; /* Centraliza horizontalmente */
margin-right: auto; /* Centraliza horizontalmente */
}
/* Contêiner principal da aplicação */
.app-container {
padding: 40px; /* Espaçamento interno em todos os lados */
display: grid; /* Define um layout em grid */
grid-template-columns: repeat(2, 1fr); /* Cria duas colunas de tamanho igual */
grid-column-gap: 100px; /* Espaçamento de 100px entre as colunas */
}
/* Estiliza o contêiner da barra de navegação */
.navbar-container {
display: flex; /* Layout em flexbox */
align-items: center; /* Alinha verticalmente ao centro */
}
/* Adiciona margem ao lado direito da imagem no navbar */
.navbar-container > img {
margin-right: 20px; /* Espaçamento de 20px à direita da imagem */
}
/*--------------showcase----------------------*/
/* Estiliza o contêiner da vitrine de informações */
.showcase-container {
display: flex; /* Layout em flexbox */
align-items: center; /* Alinha verticalmente ao centro */
justify-content: space-between; /* Espaça os itens igualmente */
padding-left: 40px; /* Espaçamento interno à esquerda */
padding-right: 40px; /* Espaçamento interno à direita */
margin-top: 60px; /* Margem superior de 60px */
}
/* Estiliza o primeiro <h2> dentro do showcase-text */
.showcase-container .showcase-text > h2:first-child {
font-size: 3.125rem; /* Tamanho da fonte */
font-weight: 700; /* Espessura da fonte */
color: #2a394f; /* Cor do texto */
}
/* Estiliza o último <h2> dentro do showcase-text */
.showcase-container .showcase-text > h2:last-child {
font-size: 5.125rem; /* Tamanho maior da fonte */
font-weight: 700; /* Espessura da fonte */
color: #2a394f; /* Cor do texto */
}
/* Estiliza o parágrafo dentro do showcase-text */
.showcase-container .showcase-text > p {
font-weight: 500; /* Espessura da fonte */
margin-bottom: 500; /* Margem inferior */
color: #9aa0ab; /* Cor do texto */
}
/*----Previsão por Hora -------- */
/* Contêiner para a previsão horária do clima */
.hourly-forecast-container {
border-radius: 40px; /* Bordas arredondadas */
padding: 40px; /* Espaçamento interno */
background: linear-gradient(90.28deg, #007dfe 0.22%, #3aa2ff 99.76%); /* Gradiente de fundo */
box-shadow: 0px 30px 50px -19px rgba(1, 126, 254, 0.5); /* Sombra externa */
display: flex; /* Layout em flexbox */
align-items: center; /* Alinha verticalmente ao centro */
justify-content: space-between; /* Espaça os itens igualmente */
}
/* Estiliza cada item de previsão por hora */
.hourly-forecast-container .hour-weather-item {
display: flex; /* Layout em flexbox */
flex-direction: column; /* Alinha itens em coluna */
justify-content: center; /* Centraliza verticalmente */
align-items: center; /* Centraliza horizontalmente */
}
/* Estiliza as imagens dentro dos itens de previsão por hora */
.hourly-forecast-container .hour-weather-item > img {
width: 70px; /* Largura da imagem */
height: 70px; /* Altura da imagem */
margin-bottom: 10px; /* Espaçamento inferior */
}
/* Estiliza o primeiro parágrafo dentro dos itens de previsão por hora */
.hourly-forecast-container .hour-weather-item > p:first-child {
color: #fff; /* Cor do texto branca */
opacity: 75%; /* Transparência do texto */
font-weight: 500; /* Espessura da fonte */
}
/* Estiliza o último parágrafo dentro dos itens de previsão por hora */
.hourly-forecast-container .hour-weather-item > p:last-child {
color: #fff; /* Cor do texto branca */
font-weight: 700; /* Espessura da fonte */
font-size: 2rem; /* Tamanho da fonte */
}
/* -------------Detalhes -------------------------*/
/* Contêiner para detalhes adicionais do clima */
.weather-detail-container {
margin-top: 40px; /* Margem superior */
display: grid; /* Layout em grid */
grid-template-columns: repeat(4, 220px); /* Quatro colunas de 220px cada */
grid-column-gap: 15px; /* Espaçamento entre as colunas */
}
/* Estiliza cada item de detalhe do clima */
.weather-detail-container .wether-detail-item {
background: #fff; /* Fundo branco */
border-radius: 40px; /* Bordas arredondadas */
padding: 30px; /* Espaçamento interno */
display: flex; /* Layout em flexbox */
align-items: center; /* Alinha verticalmente ao centro */
flex-direction: column; /* Alinha itens em coluna */
justify-content: center; /* Centraliza verticalmente */
text-align: center; /* Centraliza o texto */
}
/* Altera o fundo do item de detalhe ao passar o mouse */
.weather-detail-container .wether-detail-item:hover {
background: #e8eff5; /* Cor de fundo ao passar o mouse */
}
/* Estiliza o primeiro parágrafo dentro dos itens de detalhe */
.weather-detail-container .wether-detail-item > p:first-child {
color: #8f8f8f; /* Cor do texto */
}
/* Estiliza o contêiner interno dos itens de detalhe */
.weather-detail-container .wether-detail-item > div {
display: flex; /* Layout em flexbox */
align-items: center; /* Alinha verticalmente ao centro */
}
/* Estiliza o parágrafo dentro do contêiner dos itens de detalhe */
.weather-detail-container .wether-detail-item > div > p {
font-size: 2.5rem; /* Tamanho da fonte */
font-weight: 700; /* Espessura da fonte */
color: #2a394f; /* Cor do texto */
margin-left: 4px; /* Margem à esquerda */
}
/* Estiliza o <span> dentro do parágrafo dos itens de detalhe */
.weather-detail-container .wether-detail-item > div > p > span {
font-size: 0.75rem; /* Tamanho da fonte */
margin-left: -5px; /* Margem à esquerda negativa */
}
/* Estiliza as imagens dentro dos itens de detalhe */
.weather-detail-container .wether-detail-item > div > img {
width: 35px; /* Largura da imagem */
height: 35px; /* Altura da imagem */
}
/*---------------------Previsão Semanal ---------------------------------------*/
/* Contêine