diff --git a/Website About/NEW/images/404.css b/Website About/NEW/images/404.css new file mode 100644 index 0000000..e2dcde5 --- /dev/null +++ b/Website About/NEW/images/404.css @@ -0,0 +1,167 @@ +@import url('stylebase.css'); + +body { + font-family: Arial, sans-serif; + background-image: url('../images/Gato-Comeu-Pagina-HTML.png'); + background-repeat: repeat; + background-size: 500px; + background-position: center; + background-attachment: fixed; + background-color: var(--background-color); + position: relative; +} + +body::before { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient( + to bottom, + rgba(0, 0, 0, 0.7), + rgba(0, 0, 0, 0.5) + ); + z-index: -1; +} + +main { + text-align: center; + padding: 50px 20px; + max-width: 800px; + margin: 0 auto; + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; + z-index: 1; + background: rgba(0, 0, 0, 0.3); + border-radius: 20px; + backdrop-filter: blur(5px); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); +} + +img { + max-width: 100%; + height: auto; + margin-bottom: 30px; + border-radius: 10px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); + filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5)); +} + +h1 { + font-family: Arial, sans-serif; + font-size: 4rem; + margin-bottom: 10px; + color: #ffffff; + font-weight: bold; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); +} + +h2 { + font-family: Arial, sans-serif; + font-size: 2rem; + margin-bottom: 15px; + color: #ffffff; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); +} + +strong { + font-family: Arial, sans-serif; + display: block; + font-size: 1.3rem; + margin-bottom: 15px; + color: #ffffff; + text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); +} + +p { + font-family: Arial, sans-serif; + font-size: 1.2rem; + margin-bottom: 30px; + line-height: 1.6; + color: #ffffff; + max-width: 600px; + text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); +} + +.btn-voltar { + font-family: Arial, sans-serif; + display: inline-flex; + align-items: center; + gap: 10px; + padding: 15px 30px; + background: linear-gradient(145deg, #ffffff, #e6e6e6); + color: #000000; + text-decoration: none; + border-radius: 50px; + transition: all 0.3s ease; + font-size: 1.2rem; + border: none; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); + position: relative; + overflow: hidden; + font-weight: bold; +} + +.btn-voltar::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.4), + transparent + ); + transition: 0.5s; +} + +.btn-voltar:hover { + transform: translateY(-3px); + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); + background: linear-gradient(145deg, #ffffff, #cccccc); +} + +.btn-voltar:hover::before { + left: 100%; +} + +.btn-voltar i { + font-size: 1.3rem; + transition: transform 0.3s ease; +} + +.btn-voltar:hover i { + transform: scale(1.2); +} + +@media (max-width: 768px) { + body { + background-size: 300px; + } + + h1 { + font-size: 3rem; + } + + h2 { + font-size: 1.5rem; + } + + p { + font-size: 1.1rem; + padding: 0 20px; + } + + .btn-voltar { + padding: 10px 20px; + } +} \ No newline at end of file