Change the background on 404.html

ali-moss-24 · ali-moss-24 · commit b70ca03b3602 · 2024-11-17T17:16:36.000Z
diff --git a/404.html b/404.html
@@ -10,20 +10,14 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css" rel="stylesheet">
     <!-- Left out CSS stylesheet link as 404.css stylesheet is linked below -->
-    <link rel="stylesheet" href="assets/css/404.css">
+    <link rel="stylesheet" href="assets/css/style.css">
     <title>Access Granted | 404 - Page Not Found </title>
 
 </head>
 <body class="relative">
     <a href="#main-content" class="skip-link">Skip to main content</a>
-
-    <header class="fixed-top">
-      <nav class="navbar navbar-expand-lg">
-        <div class="container">
-        <a class="navbar-brand" href="index.html">
-          <img src="assets/images/logo.webp" alt="Access Granted Logo" width="30" height="30"
-          class="d-inline-block align-top">
-          Access Granted
+    
+    
         </a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"
           aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -90,7 +84,7 @@ <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Accessibility Set
         <div class="dropdown-item">
           <div class="form-check form-switch form-switch-lg d-flex align-items-center">
             <input class="form-check-input theme-switch" type="checkbox" id="themeSwitch1" aria-label="Theme switch">
-            <label class="form-check-label ms-2" for="themeSwitch1">Turn on High Contrast</label>
+            <label class="form-check-label ms-2" for="themeSwitch1">Turn on High Contrast Mode</label>
           </div>
         </div>
       </li>
@@ -128,9 +122,9 @@ <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Accessibility Set
     <main id="main-content" class="container my-5 error-background">
         <div class="row justify-content-center">
             <div class="col-md-8 text-center">
-                <h1 class="display-1">404</h1>
-                <h2 class="mb-4">Oops! Access NOT Granted</h2>
-                <p class="lead mb-5">We couldn't find the page you're looking for. It might have been moved or doesn't exist.</p>
+                <h1 class="display-1" style="font-weight: bold;">404</h1>
+                <h2 class="mb-4"><strong>Oops! Access NOT Granted</strong></h2>
+                <p class="lead mb-5"><strong>We couldn't find the page you're looking for. It might have been moved or doesn't exist.</strong></p>
                 <a href="index.html" class="btn btn-primary btn-lg">Return to Home</a>
 
             </div>
@@ -141,25 +135,10 @@ <h2 class="mb-4">Oops! Access NOT Granted</h2>
       <div class="container footerdiv">
         <div class="row">
         <div class="col-md-4">
-          <h5>Social</h5>
-          <ul class="list-unstyled">
-          <li><a href="https://github.com/VCGithubCode/access-granted" class="text-muted" target="_blank"
-            rel="noopener" aria-label="Visit our github repository page(Opens in a new tab)" aria-hidden="true"><i
-              class="fa-brands fa-github"></i> Github</a></li>
-          <li><a href="https://app.slack.com/client/T0L30B202/C080JB3ETHU" class="text-muted" target="_blank"
-            rel="noopener" aria-label="Visit our Slack channel(Opens in a new tab)" aria-hidden="true"><i
-              class="fa-brands fa-slack"></i> Slack</a></li>
-          </ul>
+          
         </div>
         <div class="col-md-4">
-          <h5>Site Map</h5>
-          <ul class="list-unstyled">
-          <li><a href="index.html" class="text-muted">Home</a></li>
-          <li><a href="about.html" class="text-muted">About</a></li>
-          <li><a href="resources.html" class="text-muted">Resources</a></li>
-          <li><a href="contact.html" class="text-muted">Contact</a></li>
-          <li><a href="accessibility-guide.html" class="text-muted">Accessibility guide</a></li>
-          </ul>
+         
         </div>
         </div>
         <p class="float-end mb-1">
@@ -168,7 +147,7 @@ <h5>Site Map</h5>
         <p class="mb-1">&copy; 2024 Access Granted Project</p>
       </div>
       </footer>
-
+  
     <svg class="svg-filter">
       <defs>
         <filter id="deuteranopia-filter">
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -547,6 +547,26 @@ nav li {
   text-align: center;
 }
 
+
+/* Error-background */
+.error-background {
+  background-image: url(../images/person-with-glasses1.jpg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  padding: 50px;
+  border-radius: 15px;
+
+}
+
+.error-container {
+  border: 1px solid #000000;
+  border-radius: 12px;
+  padding: 1em; 
+  font-weight: 900;
+  
+}
+
 /* Responsiveness */
 @media (max-width: 576px) {
   .flip-card {
diff --git a/assets/images/person-with-glasses1.jpg b/assets/images/person-with-glasses1.jpg
