HTTP_404.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'HTTP_404.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> > <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="${pageContext.request.contextPath }/static/css/bootstrap.min.css"> <script src="${pageContext.request.contextPath }/static/js/jquery-1.11.2.min.js"></script> <script src="${pageContext.request.contextPath }/static/js/bootstrap.min.js"></script> <link href="${pageContext.request.contextPath }/static/css/error.css" rel="stylesheet" type="text/css" /> </head> <body class="page-404-full-page"> <div class="row-fluid"> <div class="span12 page-404"> <div class="number">404</div> <div class="details"> <h3>Opps, You're lost.</h3> <p> We can not find the page you're looking for.<br /> <a href="./">Return home</a> </p> </div> </div> </div> </body> </html>
HTTP_500.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'HTTP_500.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="${pageContext.request.contextPath }/static/css/bootstrap.min.css"> <script src="${pageContext.request.contextPath }/static/js/jquery-1.11.2.min.js"></script> <script src="${pageContext.request.contextPath }/static/js/bootstrap.min.js"></script> <link href="${pageContext.request.contextPath }/static/css/error.css" rel="stylesheet" type="text/css" /> </head> <body> <body class="page-500-full-page"> <div class="row-fluid"> <div class="span12 page-500"> <div class=" number">500</div> <div class=" details"> <h3>Opps, Something went wrong.</h3> <p> We are fixing it!<br /> Please come back in a while.<br /> <a href="./">Return home</a> </p> </div> </div> </div> </body> </html>
error.css
/*** Error Pages ***/ /* 404 page option #1 */ .page-404 { text-align: center; } .page-404 .number { display: inline-block; letter-spacing: -10px; margin-top: 0px; line-height: 128px; font-size: 158px; font-weight: 300; color: #7bbbd6; text-align: right; } .page-404 .details { margin-left: 40px; display: inline-block; padding-top: 0px; text-align: left; } /* 500 page option #1 */ .page-500 { text-align: center; } .page-500 .number { display: inline-block; letter-spacing: -10px; line-height: 128px; font-size: 158px; font-weight: 300; color: #ec8c8c; text-align: right; } .page-500 .details { margin-left: 40px; display: inline-block; text-align: left; } /* 404 page option #2*/ .page-404-full-page { padding: 20px; background-color: #fafafa !important; } .page-404-full-page .details input { background-color: #ffffff; } .page-404-full-page .page-404 { margin-top: 100px; } /* 500 page option #2*/ .page-500-full-page { padding: 20px; background-color: #fafafa !important; } .page-500-full-page .details input { background-color: #ffffff; } .page-500-full-page .page-500 { margin-top: 100px; } /* 404 page option #3*/ .page-404-3 { background: #000 !important ; } .page-404-3 .page-inner img { right: 0; bottom: 0; z-index: -1; position: absolute; } .page-404-3 .error-404 { color: #fff; text-align: left; padding: 70px 20px 0; } .page-404-3 h1 { color: #fff; font-size: 130px; line-height: 160px; } .page-404-3 h2 { color: #fff; font-size: 30px; margin-bottom: 30px; } .page-404-3 p { color: #fff; font-size: 16px; } @media (max- 480px) { .page-404 .number, .page-500 .number, .page-404 .details, .page-500 .details { text-align: center; margin-left: 0px; } .page-404-full-page .page-404 { margin-top: 30px; } .page-404-3 .error-404 { text-align: left; padding-top: 10px; } .page-404-3 .page-inner img { right: 0; bottom: 0; z-index: -1; position: fixed; } }