Skip to content

Commit f99f026

Browse files
lauraataide8lauraataide8
authored
Update style.css
1 parent cee726a commit f99f026

1 file changed

Lines changed: 120 additions & 23 deletions

File tree

‎style.css‎

Lines changed: 120 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -85,16 +85,16 @@ body {
8585
animation: floatAnimation 6s ease-in-out infinite;
8686
}
8787

88-
/* --- SEÇÃO SOBRE MIM --- */
88+
/* --- SEÇÃO SOBRE MIM (TAMANHOS AJUSTADOS POR VOCÊ) --- */
8989
.conteudo-secundario { padding: 100px 0; border-top: 1px solid var(--cor-separador); }
90-
.conteudo-secundario-titulo { font-family: var(--fonte-titulos); font-size: 2.5em; color: var(--cor-destaque); text-align: center; margin-bottom: 50px; }
91-
.sobre-texto { column-count: 2; column-gap: 50px; max-width: 1100px; margin: 0 auto; text-align: justify; line-height: 1.9; font-size: 1.15rem; }
90+
.conteudo-secundario-titulo { font-family: var(--fonte-titulos); font-size: 3.0em; color: var(--cor-destaque); text-align: center; margin-bottom: 50px; }
91+
.sobre-texto { column-count: 2; column-gap: 50px; max-width: 1100px; margin: 0 auto; text-align: justify; line-height: 1.9; font-size: 1.60rem; }
9292

93-
/* --- PROJETOS (PADRONIZADOS) --- */
93+
/* --- PROJETOS --- */
9494
.projeto-card {
9595
background: var(--cor-card);
9696
padding: 25px;
97-
border-radius: 12px;
97+
border-radius: 13px;
9898
border: 1px solid var(--cor-separador);
9999
height: 100%;
100100
display: flex;
@@ -104,7 +104,7 @@ body {
104104
.projeto-imagem-wrapper { width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 8px; margin-bottom: 15px; }
105105
.projeto-imagem-wrapper img { width: 100%; height: 100%; object-fit: cover; }
106106
.projeto-card h4 { color: var(--cor-texto-forte); margin-bottom: 10px; }
107-
.projeto-card p { flex-grow: 1; margin-bottom: 25px; font-size: 0.95rem; }
107+
.projeto-card p { flex-grow: 1; margin-bottom: 25px; font-size: 1rem; }
108108

109109
.github-btn {
110110
color: var(--cor-destaque);
@@ -117,7 +117,7 @@ body {
117117
}
118118
.github-btn:hover { background: var(--cor-destaque); color: var(--cor-fundo-inicio); box-shadow: 0 0 15px var(--cor-destaque); }
119119

120-
/* --- TECH STACK (ALINHADO E MAIOR) --- */
120+
/* --- TECH STACK --- */
121121
.habilidades-lista {
122122
display: grid;
123123
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
@@ -146,24 +146,121 @@ body {
146146
.habilidades-lista i { font-size: 3em; color: var(--cor-destaque-secundario); }
147147
.habilidades-lista li:hover i { color: var(--cor-fundo-inicio); }
148148

149-
/* --- RODAPÉ REESTRUTURADO --- */
150-
.rodape { padding: 80px 5% 40px; background: var(--cor-fundo-fim); border-top: 2px solid var(--cor-destaque); overflow: hidden; }
151-
.rodape-conteudo { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 60px; max-width: 1200px; margin: 0 auto 60px; }
152-
.rodape-info { flex: 1; min-width: 320px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 25px; }
153-
.titulo-animado { font-family: var(--fonte-titulos); font-size: 2.8em; display: table; background: linear-gradient(-45deg, var(--cor-destaque), var(--cor-destaque-secundario), #a855f7, var(--cor-destaque)); background-size: 400% 400%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradientAnimation 10s ease infinite; }
154-
.rodape-contato-badges { display: flex; flex-wrap: wrap; gap: 15px; }
155-
.badge-contato { display: flex; align-items: center; gap: 10px; background: var(--cor-card); padding: 12px 20px; border-radius: 50px; color: var(--cor-texto); border: 1px solid var(--cor-separador); transition: 0.3s; font-weight: 600; }
149+
/* --- RODAPÉ (REESTRUTURADO VIA CSS) --- */
150+
.rodape {
151+
padding: 80px 5% 40px;
152+
background: var(--cor-fundo-fim);
153+
border-top: 2px solid var(--cor-destaque);
154+
overflow: hidden;
155+
}
156+
157+
.rodape-conteudo {
158+
display: flex;
159+
flex-direction: row-reverse; /* Inverte a posição: Portal vai para esquerda */
160+
justify-content: space-between;
161+
align-items: center;
162+
flex-wrap: wrap;
163+
gap: 60px;
164+
max-width: 1200px;
165+
margin: 0 auto 60px;
166+
}
167+
168+
/* Alinhamento dos textos para a DIREITA */
169+
.rodape-info {
170+
flex: 1;
171+
min-width: 320px;
172+
display: flex;
173+
flex-direction: column;
174+
align-items: flex-end; /* Alinha o conteúdo na direita */
175+
text-align: right; /* Alinha o texto na direita */
176+
gap: 25px;
177+
}
178+
179+
.rodape-contato-badges {
180+
display: flex;
181+
flex-wrap: wrap;
182+
gap: 15px;
183+
justify-content: flex-end; /* Badges na direita */
184+
}
185+
186+
.badge-contato {
187+
display: flex;
188+
align-items: center;
189+
gap: 10px;
190+
background: var(--cor-card);
191+
padding: 12px 20px;
192+
border-radius: 50px;
193+
color: var(--cor-texto);
194+
border: 1px solid var(--cor-separador);
195+
transition: 0.3s;
196+
font-weight: 600;
197+
}
156198
.badge-contato:hover { background: var(--cor-destaque); color: var(--cor-fundo-inicio); transform: translateY(-3px); }
157199

158-
/* --- PORTAL RICK & MORTY --- */
159-
.rodape-portal-container { display: flex; justify-content: center; align-items: center; padding-right: 50px; }
160-
.portal-wrapper { display: flex; flex-direction: column; align-items: center; gap: 15px; transition: 0.3s; }
161-
.portal { width: 150px; height: 150px; position: relative; display: flex; justify-content: center; align-items: center; filter: drop-shadow(0 0 15px var(--cor-destaque)); }
162-
.portal-efeito { position: absolute; width: 100%; height: 100%; background: radial-gradient(circle, var(--cor-destaque) 10%, #4ade80 40%, transparent 70%); border-radius: 50% 40% 60% 30% / 40% 50% 40% 60%; animation: portal-girar 3s linear infinite; opacity: 0.8; }
163-
.portal-nucleo { position: absolute; width: 70%; height: 70%; background: repeating-conic-gradient(from 0deg, #1a1a1a 0deg 20deg, var(--cor-destaque) 20deg 40deg); border-radius: 50%; mix-blend-mode: overlay; animation: portal-pulso 2s ease-in-out infinite; }
164-
.portal-legenda { font-family: var(--fonte-titulos); color: var(--cor-destaque); font-size: 0.85rem; letter-spacing: 2px; font-weight: bold; text-shadow: 0 0 5px var(--cor-destaque); }
200+
/* --- PORTAL RICK & MORTY (MAIOR E NA ESQUERDA) --- */
201+
.rodape-portal-container {
202+
display: flex;
203+
justify-content: center;
204+
align-items: center;
205+
}
206+
207+
.portal-wrapper {
208+
display: flex;
209+
flex-direction: column;
210+
align-items: center;
211+
gap: 15px;
212+
transition: 0.3s;
213+
}
214+
215+
.portal {
216+
width: 210px; /* Portal maior como solicitado */
217+
height: 210px;
218+
position: relative;
219+
display: flex;
220+
justify-content: center;
221+
align-items: center;
222+
filter: drop-shadow(0 0 20px var(--cor-destaque));
223+
}
224+
225+
.portal-efeito {
226+
position: absolute;
227+
width: 100%;
228+
height: 100%;
229+
background: radial-gradient(circle, var(--cor-destaque) 10%, #4ade80 40%, transparent 70%);
230+
border-radius: 50% 40% 60% 30% / 40% 50% 40% 60%;
231+
animation: portal-girar 3s linear infinite;
232+
opacity: 0.8;
233+
}
234+
235+
.portal-nucleo {
236+
position: absolute;
237+
width: 70%;
238+
height: 70%;
239+
background: repeating-conic-gradient(from 0deg, #1a1a1a 0deg 20deg, var(--cor-destaque) 20deg 40deg);
240+
border-radius: 50%;
241+
mix-blend-mode: overlay;
242+
animation: portal-pulso 2s ease-in-out infinite;
243+
}
244+
245+
.portal-legenda {
246+
font-family: var(--fonte-titulos);
247+
color: var(--cor-destaque);
248+
font-size: 1rem;
249+
letter-spacing: 2px;
250+
font-weight: bold;
251+
text-shadow: 0 0 5px var(--cor-destaque);
252+
}
253+
165254
.portal-wrapper:hover { transform: scale(1.1); }
166255

256+
/* COPYRIGHT CENTRALIZADO NO MEIO */
257+
.rodape-copyright {
258+
text-align: center;
259+
width: 100%;
260+
border-top: 1px solid var(--cor-separador);
261+
padding-top: 30px;
262+
}
263+
167264
/* --- ANIMAÇÕES --- */
168265
@keyframes portal-girar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
169266
@keyframes portal-pulso { 0%, 100% { transform: scale(0.9); } 50% { transform: scale(1.1); } }
@@ -185,10 +282,10 @@ body {
185282
/* --- MEDIA QUERIES --- */
186283
@media (max-width: 992px) {
187284
.conteudo-principal { flex-direction: column-reverse; text-align: center; }
188-
.sobre-texto { column-count: 1; text-align: center; }
285+
.sobre-texto { column-count: 1; text-align: center; font-size: 1.3rem; }
189286
.rodape-conteudo { flex-direction: column; text-align: center; align-items: center; }
190287
.rodape-info { align-items: center; text-align: center; }
191-
.rodape-portal-container { padding-right: 0; }
288+
.rodape-contato-badges { justify-content: center; }
192289
}
193290
@media (max-width: 480px) {
194291
.habilidades-lista { grid-template-columns: 1fr 1fr; }

0 commit comments

Comments
 (0)