Error 404 animado

Posteado el 24. Nov, 2010 por tuto in HTML y CSS

PASO 1
Creamos una carpeta nueva llamada 404 dentro de la cual vamos a crear una carpeta llamada imágenes donde vamos a aguardar las imágenes que vamos a utilizar para nuestro tutorial.

PASO 2
Abrimos Adobe Dreamweaver y creamos un documento HTML en blanco.

PASO 3
Debajo de la etiqueta vamos a copiar el siguiente código html4strict.

Code block

<link rel="stylesheet" type="text/css" href="css/estilo.css" />
<script src="js/html5.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/script.js"></script>

PASO 4
Con el comando Ctrl + S guardamos nuestro documento con el nombre 404.html

PASO 5
Vamos al menú File – New y creamos un archivo nuevo CSS.

PASO 6
Dentro del documento CSS copiamos el siguiente código css.

Code block

*{
	margin:0;
	padding:0;
}
 
body{
	background:url('../imagenes/bg.png') no-repeat center center #1d1d1d;
	color:#eee;
	font-family:Corbel,Arial,Helvetica,sans-serif;
	font-size:13px;
}
 
#rocket{
	width:275px;
	height:375px;
	background:url('../imagenes/rocket.png') no-repeat;
	position:relative;
	margin-top: 30px;
	margin-right: auto;
	margin-bottom: 50px;
	margin-left: auto;
}
 
.steam1,
.steam2{
	position:absolute;
	bottom:78px;
	left:50px;
	width:80px;
	height:80px;
	background:url('../imagenes/steam.png') no-repeat;
	opacity:0.8;
}
 
.steam2{
 
	background-position:left bottom;
}
 
hgroup{
 
	display:block;
	margin:0 auto;
	width:850px;
	font-family:'Century Gothic',Calibri,'Myriad Pro',Arial,Helvetica,sans-serif;
	text-align:center;
}
 
h1{
	color:#76D7FB;
	font-size:60px;
	text-shadow:3px 3px 0 #3D606D;
	white-space:nowrap;
}
 
h2{
	color:#9FE3FC;
	font-size:18px;
	font-weight:normal;
	padding:25px 0;
}
 
p.createdBy{
	font-size:15px;
	font-weight:normal;
	margin:50px;
	text-align:center;
	text-shadow:none;
}
 
a, a:visited {
	text-decoration:none;
	outline:none;
	border-bottom:1px dotted #97cae6;
	color:#97cae6;
}
 
a:hover{
	border-bottom:1px dashed transparent;
}

PASO 7
Con el comando Ctrl + S guardamos nuestro documento dentro de la carpeta CSS con el nombre estilo.css

PASO 8
Regresamos a nuestro documento HTML y dentro de las etiquetas copiamos el siguiente código html4strict.

Code block

<div id="rocket"></div>
 
<hgroup>
    <h1>Pagina no encontrada</h1>
    <h2>No encontramos lo que buscaba</h2>
</hgroup>
 
<p class="createdBy"><a href="http://tutorialesenlaweb.com">Regresar a tutoriales en la web »</a></p>