Fix 404 page styling and add responsive media queries

sanika palav · sanika palav · commit 2e319c24385b · 2026-02-06T22:25:36.000+05:30
diff --git a/DISCOVER/404.html b/DISCOVER/404.html
@@ -12,21 +12,22 @@
     }
     body {
       height: 100vh;
-      background: linear-gradient(135deg, black, #e4f0ff);
+     background: linear-gradient(135deg, #eef2ff, #f8fafc);
       display: flex;
       align-items: center;
       justify-content: center;
       font-family: 'Segoe UI', sans-serif;
       overflow: hidden;
       position: relative;
+    
     }
 
     .light-blur {
       position: absolute;
       width: 500px;
       height: 500px;
-      background: radial-gradient(circle at center, transparent);
-      border-radius: 50%;
+    background: radial-gradient(circle, rgba(99,102,241,0.35), transparent 70%);
+    border-radius: 50%;
       filter: blur(80px);
       top: 20%;
       left: 10%;
@@ -40,44 +41,48 @@
     }
 
     .glass-card {
-      background: rgba(255, 255, 255, 0.25);
-      backdrop-filter: blur(12px);
-      -webkit-backdrop-filter: blur(12px);
+    /* background-color: #444;*/
+     background: rgba(31, 41, 55, 0.9);
+         backdrop-filter: blur(5px);
+      -webkit-backdrop-filter: blur(5px);
       padding: 2.5rem 3rem;
       border-radius: 20px;
       border: 1px solid rgba(255, 255, 255, 0.3);
       max-width: 500px;
       text-align: center;
       z-index: 1;
-      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+      box-shadow: 0 10px 30px rgba(192, 91, 91, 0.1);
     }
 
     h1 {
       font-size: 2.5em;
-      color: rgb(52, 51, 51);
+      color: rgb(255, 250, 250);
       margin-bottom: 0.5rem;
+      line-height:1.5;
     }
 
     p {
       font-size: 1.1em;
-      color: rgb(52, 51, 51);
+      color: rgb(255, 247, 247);
       margin-bottom: 1.4rem;
+      line-height: 1.5;
     }
 
     a {
       display: inline-block;
       margin: 0.4rem;
       padding: 0.6rem 1rem;
-      border-radius: 8px;
+      border-radius: 12px;
       text-decoration: none;
-      background: #d0bfff;
-      color: #1f1f1f;
+      background: #86efac; 
+      color: #064e3b;
       font-weight: 600;
       transition: background 0.3s ease;
     }
 
     a:hover {
-      background: #c1aaff;
+      background: #9eaba2;
+      color: rgb(255, 255, 255);
     }
 
     select {
@@ -86,22 +91,53 @@
       border-radius: 6px;
       border: 1px solid #ccc;
       font-size: 1em;
-      background: #fff;
+      
+      background: #2f3a47;  /* Darker background matching the card */
+  color: #fff;
     }
+    select option
+    {
+      background: #2f3a47;
+  color: #fff;
+    }
+
+    @media (max-width: 600px) {
+  body {
+    padding: 1rem;
+  }
+  .glass-card {
+    max-width: 90%;
+    padding: 1.5rem;
+    border-radius: 12px;
+  }
+  h1 {
+    font-size: 1.8em;
+  }
+  p {
+    font-size: 1em;
+  }
+  a {
+    padding: 0.5rem 0.8rem;
+    font-size: 0.9em;
+  }
+  select {
+    width: 100%;
+  }
+}
   </style>
 </head>
 <body>
   <div class="light-blur"></div>
   <div class="glass-card">
-    <h1 id="title">404 - Page Not Found</h1>
+    <h1 id="title">Oops! We can’t find that page</h1>
     <p id="message">This page might’ve wandered off or was never here at all.</p>
     <p id="suggestion">Maybe it was deleted, renamed, or never existed in the first place.</p>
     <p><strong id="what-do">What can you do?</strong></p>
     <a href="./intro.html" id="home">⬅️ Back to Home</a>
     <a href="https://github.com/numfocus/DISCOVER-Cookbook/issues" id="report">🐞 Report the Issue</a>
 
     <div>
-      <label for="language-switcher" style="display:block; margin-top:1.5rem; color:#444;">🌐 Switch Language:</label>
+      <label for="language-switcher" style="display:block; margin-top:1.5rem; color:#fffbfb;"> 🌐 Switch Language</label>
       <select id="language-switcher">
         <option value="en">English</option>
         <option value="es">Español</option>
@@ -114,7 +150,7 @@ <h1 id="title">404 - Page Not Found</h1>
   <script>
     const translations = {
       en: {
-        title: "404 - Page Not Found",
+        title: "Oops! We can’t find that page",
         message: "This page might’ve wandered off or was never here at all.",
         suggestion: "Maybe it was deleted, renamed, or never existed in the first place.",
         whatDo: "What can you do?",
@@ -123,7 +159,7 @@ <h1 id="title">404 - Page Not Found</h1>
         footer: "If you think this is an error, let us know by creating an issue."
       },
       es: {
-        title: "404 - Página no encontrada",
+        title: "No se pudo encontrar la página",
         message: "Esta página se ha perdido o nunca existió.",
         suggestion: "Tal vez fue eliminada, renombrada o nunca existió.",
         whatDo: "¿Qué puedes hacer?",
