MirrorMirror
/
PairDrop
mirror of https://github.com/schlagmichdoch/PairDrop.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update 404.css

This commit is contained in:
ErikrafT 2025-05-06 19:38:46 -03:00 committed by GitHub
parent b6594975c5
commit 7fe6b4b288
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 65 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
Website About/NEW/css/404.css
View File

@ -1,7 +1,7 @@
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
background-image: url('/images/Gato-Comeu-Pagina-HTML.png'); background-image: url('/images/Gato-Comeu-Pagina-HTML.png');
background-size: contain; background-size: cover;
background-position: center center; background-position: center center;
background-attachment: fixed; background-attachment: fixed;
background-color: var(--background-color); background-color: var(--background-color);
@ -27,8 +27,8 @@ body::before {
main { main {
text-align: center; text-align: center;
padding: 50px 20px; padding: 40px 16px;
max-width: 800px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
@ -37,74 +37,82 @@ main {
align-items: center; align-items: center;
position: relative; position: relative;
z-index: 1; z-index: 1;
background: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.45);
border-radius: 20px; border-radius: 18px;
backdrop-filter: blur(5px); backdrop-filter: blur(4px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
} }
img { .img-container {
max-width: 100%; width: 100%;
height: auto; max-width: 500px;
margin-bottom: 30px; aspect-ratio: 16 / 9;
margin-bottom: 24px;
border-radius: 10px; border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); overflow: hidden;
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5)); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
}
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 10px;
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.4));
} }
h1 { h1 {
font-family: Arial, sans-serif; font-size: 5rem; /* Aumenta o tamanho do texto 404 */
font-size: 4rem; margin-bottom: 8px;
margin-bottom: 10px; color: #fff;
color: #ffffff;
font-weight: bold; font-weight: bold;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
} }
h2 { h2 {
font-family: Arial, sans-serif; font-size: 1.5rem;
font-size: 2rem; margin-bottom: 12px;
margin-bottom: 15px; color: #fff;
color: #ffffff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
} }
strong { strong {
font-family: Arial, sans-serif;
display: block; display: block;
font-size: 1.3rem; font-size: 1.1rem;
margin-bottom: 15px; margin-bottom: 12px;
color: #ffffff; color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
} }
p { p {
font-family: Arial, sans-serif; font-size: 1.1rem;
font-size: 1.2rem; margin-bottom: 24px;
margin-bottom: 30px; line-height: 1.5;
line-height: 1.6; color: #fff;
color: #ffffff; max-width: 480px;
max-width: 600px;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
} }
.btn-voltar { .btn-voltar {
font-family: Arial, sans-serif;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
padding: 15px 30px; padding: 12px 26px;
background: linear-gradient(145deg, #ffffff, #e6e6e6); background: linear-gradient(145deg, #ffffff, #e6e6e6);
color: #000000; color: #000;
text-decoration: none; text-decoration: none;
border-radius: 50px; border-radius: 50px;
transition: all 0.3s ease; transition: all 0.3s ease;
font-size: 1.2rem; font-size: 1.1rem;
border: none; border: none;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
font-weight: bold;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
font-weight: bold;
} }
.btn-voltar::before { .btn-voltar::before {
@ -114,18 +122,13 @@ p {
left: -100%; left: -100%;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient( background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent
);
transition: 0.5s; transition: 0.5s;
} }
.btn-voltar:hover { .btn-voltar:hover {
transform: translateY(-3px); transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
background: linear-gradient(145deg, #ffffff, #cccccc); background: linear-gradient(145deg, #ffffff, #cccccc);
} }
@ -134,33 +137,35 @@ p {
} }
.btn-voltar i { .btn-voltar i {
font-size: 1.3rem; font-size: 1.2rem;
transition: transform 0.3s ease; transition: transform 0.3s ease;
} }
.btn-voltar:hover i { .btn-voltar:hover i {
transform: scale(1.2); transform: scale(1.15);
} }
@media (max-width: 768px) { @media (max-width: 600px) {
body { main {
background-size: 300px; padding: 18px 4px;
max-width: 98vw;
border-radius: 10px;
}
.img-container {
max-width: 98vw;
aspect-ratio: 16 / 10;
} }
h1 { h1 {
font-size: 3rem; font-size: 2.2rem;
} }
h2 { h2 {
font-size: 1.5rem;
}
p {
font-size: 1.1rem; font-size: 1.1rem;
padding: 0 20px;
} }
p, strong {
font-size: 0.98rem;
}
.btn-voltar { .btn-voltar {
padding: 10px 20px; padding: 10px 16px;
font-size: 1rem;
} }
} }