Pesquise

15 de abr. de 2012

Tela Azul (BSOD) como página 404

Há algum tempo atrás, páginas de erro 404 não eram tão amigáveis. Hoje em dia, é comum ver um erro desse tipo mostrado com uma interface bonitinha, integrada ao tema padrão do site. Enfim, eis o código HTML/CSS para uma página 404 baseada na famosa Tela Azul da Morte do Windows.

404.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>404 - Page not Found!</title>
<link rel="stylesheet" href="404.css" type="text/css" media="all" />
</head>
<body>
<span class="neg">ERROR 404</span>
<div class="text">
The page is missing or never was written. You can wait and<br />
see if it becomes available again, or you can restart your computer.
</div>
<div class="text">
* Send me an e-mail to notify this and try it later.<br />

* Press CTRL+ALT+DEL to restart your computer. You will<br />
   lose unsaved information in any programs that are running.
</div>
Press any link to continue <blink>█</blink>
<div class="menu">
<a href="#">home</a> |
<a href="#" target="_blank">contact</a>
</div>

</body>
</html>

404.css
body {
    background: #0000aa;
    color: #ffffff;
    font-family: Courier New, monospace;
    font-size: 12pt;
    text-align: center;
    margin: 100px;
}

blink {
    color:yellow;
}

.neg {
    background:#fff;
    color:#0000aa;
    padding: 2px 8px;
    font-weight:bold;
}

div.text {
    margin: 30px auto;
    text-align: left;
    width: 600px;
}

a,a:hover {
    color:inherit;
    font:inherit;
}

.menu {
    text-align:center;
    margin-top: 25px;
}


Clique para ampliar

Nenhum comentário:

Postar um comentário