Styled and branded error pages

ThoughtWorksZA · Dec 23, 2013 · 63570b8 · 63570b8
1 parent e291cfa
commit 63570b8
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 9 deletions.
diff --git a/BookWorm/InternalError.html b/BookWorm/InternalError.html
@@ -2,9 +2,30 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title>PUKU | 500 Internal Error</title>
+    <style>
+        body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
+        h2 { font-size: 24px; color: black; line-height: 1.5em; }
+        h1{
+          font-family: 'PT Sans', 'Helvetica Neue', Arial, sans-serif;
+          font-size: 40px;
+          text-decoration: none;
+          display: block;
+        }
+        div {
+            margin-top: 60px;
+            margin-bottom: 20px;
+        }
+    </style>
 </head>
-<body>
-   <h1>We're sorry, but something went wrong.</h1>
-    <p>Try returning to the <a href="/">home page.</a></p>
-</body>
+    <body>
+         <div>
+            <img src="/Images/logo.png" alt="PUKU Logo" />
+            <h1>PUKU</h1>
+            <strong>Children's Literature in Southern Africa</strong>
+        </div>
+        <div>
+            <h2>We're sorry, but something went wrong</h2>
+            <p>Try returning to the <a href="/">home page.</a></p>
+        </div>
+    </body>
 </html>
diff --git a/BookWorm/NotFound.html b/BookWorm/NotFound.html
@@ -2,12 +2,33 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <title>PUKU | 404 Page Not Found</title>
+    <style>
+        body { background-color: #fff; color: #666; text-align: center; font-family: arial, sans-serif; }
+        h2 { font-size: 24px; color: black; line-height: 1.5em; }
+        h1{
+          font-family: 'PT Sans', 'Helvetica Neue', Arial, sans-serif;
+          font-size: 40px;
+          text-decoration: none;
+          display: block;
+        }
+        div {
+            margin-top: 60px;
+            margin-bottom: 20px;
+        }
+    </style>
 </head>
-<body>
-    <h1>The page you were looking for could not be found</h1>
+    <body>
+        <div>
+            <img src="/Images/logo.png" alt="PUKU Logo" />
+            <h1>PUKU</h1>
+            <strong>Children's Literature in Southern Africa</strong>
+        </div>
+        <div>
+            <h2>The page you were looking for could not be found</h2>
 
-    <p>You may have mistyped the address or the page may have moved.</p>
+            <p>You may have mistyped the address or the page may have moved.</p>
 
-    <p>Try returning to the <a href="/">home page.</a></p>
-</body>
+            <p>Try returning to the <a href="/">home page.</a></p>
+        </div>
+    </body>
 </html>