Interesante página de error 404

ultracobra · 28 Jun 2023

Tengo un modelo de interesante página de error 404 que quiero replicar

404

Si alguien puede darme una directriz para replicarla, si conocen una librería particular o una manera de extraer el código. Yo lo he intentado.

también es interesante que el menú principal de whatsapp web está envuelto en esa misma página de error.

https://faq.whatsapp.com/wp/26000070?lg=es&lc=ES&eea=0

BotBeta · 28 Jun 2023

Replicar una página de error 404 de otra página web puede requerir ciertos conocimientos de desarrollo web. JavaScript, CSS y HTML serán tus principales herramientas.

Para el diseño de la página puedes usar técnicas de CSS y/o bibliotecas como Bootstrap, tanto para el diseño general como para el menú envolvente.

Para la interactividad y funcionalidad, JavaScript será imprescindible. Sin embargo, a menos que la página original esté usando una biblioteca JavaScript identificable, como jQuery, será difícil saber qué código específico están utilizando.

Intenta examinar el código de la página (puedes hacer clic derecho y seleccionar "Inspeccionar" en la mayoría de los navegadores) para obtener ideas sobre la estructura y las técnicas utilizadas.

Además, hay numerosos tutoriales y recursos disponibles en línea que pueden ayudarte a crear una página de error 404 efectiva y agradable a la vista.

Puko · 29 Jun 2023

En html y usando keyframes, etc, ¿como hago un <div> id 'cont' y que adentro aparesca de abajo izquierda hacia arriba un pequeño <div> id 'uno' a los 2 seg y que no se vea al principio y que antes de llegar arriba se vea de poco a poco tipo efecto 'fade in'. Y en 2 seg después de adentro de <div> id 'cont' aparesca otro pequeño <div> id 'dos' de abajo derecha hacia arriba y que se vea de poco a poco tipo efecto 'fade in'.?

BotBeta · 29 Jun 2023

Puko dijo:
En html y usando keyframes, etc, ¿como hago un <div> id 'cont' y que adentro aparesca de abajo izquierda hacia arriba un pequeño <div> id 'uno' a los 2 seg y que no se vea al principio y que antes de llegar arriba se vea de poco a poco tipo efecto 'fade in'. Y en 2 seg después de adentro de <div> id 'cont' aparesca otro pequeño <div> id 'dos' de abajo derecha hacia arriba y que se vea de poco a poco tipo efecto 'fade in'.?

Puedes lograr esto utilizando @keyframes en CSS para crear tus propios efectos de animación. Aquí te dejo un ejemplo de cómo podría ser:

HTML:

<div id="cont">
  <div id="uno"></div>
  <div id="dos"></div>
</div>

CSS:

#cont {
  position: relative;
  height: 200px; // Ajusta este valor como necesites
}

#uno, #dos {
  width: 50px;  // Ajusta este valor como necesites
  height: 50px;  // Ajusta este valor como necesites
  opacity: 0;
  position: absolute;
  bottom: 0;
}

#uno {
  background-color: red;  // Ajusta este valor como necesites
  animation: aparecer 2s forwards, mover1 2s 2s forwards;
}

#dos {
  background-color: blue;  // Ajusta este valor como necesites
  animation: aparecer 2s 2s forwards, mover2 2s 4s forwards;
}

@keyframes aparecer {
  100% { opacity: 1; }
}

@keyframes mover1 {
  100% { transform: translateY(-150px); }  // Ajusta este valor como necesites
}

@keyframes mover2 {
  100% { right: 0; transform: translateY(-150px); }  // Ajusta este valor como necesites
}

Asegúrate de ajustar los valores según tus necesidades. En este ejemplo, ambos div comienzan invisibles y se van haciendo visibles gracias al efecto fade in (aparecer). Luego, se mueven hacia arriba, uno desde la izquierda y el otro desde la derecha.

Puko · 29 Jun 2023

BotBeta dijo:
Puedes lograr esto utilizando @keyframes en CSS para crear tus propios efectos de animación. Aquí te dejo un ejemplo de cómo podría ser:

HTML:

<div id="cont"> <div id="uno"></div> <div id="dos"></div> </div>

CSS:

#cont { position: relative; height: 200px; // Ajusta este valor como necesites } #uno, #dos { width: 50px; // Ajusta este valor como necesites height: 50px; // Ajusta este valor como necesites opacity: 0; position: absolute; bottom: 0; } #uno { background-color: red; // Ajusta este valor como necesites animation: aparecer 2s forwards, mover1 2s 2s forwards; } #dos { background-color: blue; // Ajusta este valor como necesites animation: aparecer 2s 2s forwards, mover2 2s 4s forwards; } @keyframes aparecer { 100% { opacity: 1; } } @keyframes mover1 { 100% { transform: translateY(-150px); } // Ajusta este valor como necesites } @keyframes mover2 { 100% { right: 0; transform: translateY(-150px); } // Ajusta este valor como necesites }

Asegúrate de ajustar los valores según tus necesidades. En este ejemplo, ambos div comienzan invisibles y se van haciendo visibles gracias al efecto fade in (aparecer). Luego, se mueven hacia arriba, uno desde la izquierda y el otro desde la derecha.

Le pusiste en el css los comentarios como si fuera js

BotBeta · 29 Jun 2023

Puko dijo:
Le pusiste en el css los comentarios como si fuera js

Tienes razón, los comentarios en CSS deben ser del estilo /* comentario */. Mis disculpas por el error, aquí está la corrección:

CSS:

#cont {
  position: relative;
  height: 200px; /* Ajusta este valor como necesites */
}

#uno, #dos {
  width: 50px;  /* Ajusta este valor como necesites */
  height: 50px;  /* Ajusta este valor como necesites */
  opacity: 0;
  position: absolute;
  bottom: 0;
}

#uno {
  background-color: red;  /* Ajusta este valor como necesites */
  animation: aparecer 2s forwards, mover1 2s 2s forwards;
}

#dos {
  background-color: blue;  /* Ajusta este valor como necesites */
  animation: aparecer 2s 2s forwards, mover2 2s 4s forwards;
}

@keyframes aparecer {
  100% { opacity: 1; }
}

@keyframes mover1 {
  100% { transform: translateY(-150px); }  /* Ajusta este valor como necesites */
}

@keyframes mover2 {
  100% { right: 0; transform: translateY(-150px); }  /* Ajusta este valor como necesites */
}

Puko · 29 Jun 2023

BotBeta dijo:

Tienes razón, los comentarios en CSS deben ser del estilo /* comentario */. Mis disculpas por el error, aquí está la corrección:

CSS:

#cont {
  position: relative;
  height: 200px; /* Ajusta este valor como necesites */
}

#uno, #dos {
  width: 50px;  /* Ajusta este valor como necesites */
  height: 50px;  /* Ajusta este valor como necesites */
  opacity: 0;
  position: absolute;
  bottom: 0;
}

#uno {
  background-color: red;  /* Ajusta este valor como necesites */
  animation: aparecer 2s forwards, mover1 2s 2s forwards;
}

#dos {
  background-color: blue;  /* Ajusta este valor como necesites */
  animation: aparecer 2s 2s forwards, mover2 2s 4s forwards;
}

@keyframes aparecer {
  100% { opacity: 1; }
}

@keyframes mover1 {
  100% { transform: translateY(-150px); }  /* Ajusta este valor como necesites */
}

@keyframes mover2 {
  100% { right: 0; transform: translateY(-150px); }  /* Ajusta este valor como necesites */
}

al <div> id 'dos' te falto : left:0, aparece igual que el id 'uno' a la izquierda

BotBeta · 29 Jun 2023

Puko dijo:
al <div> id 'dos' te falto : left:0, aparece igual que el id 'uno' a la izquierda

Mis disculpas por el error anterior. Deberíamos poner right: 0; para el <div id="dos"> para que comience desde la derecha. Aquí está el CSS corregido:

CSS:

#dos {
  background-color: blue;  /* Ajusta este valor como necesites */
  right: 0;
  animation: aparecer 2s 2s forwards, mover2 2s 4s forwards;
}

Con right: 0;, el div 'dos' aparecerá desde la parte inferior derecha de su contenedor.

imovil · 29 Jun 2023

Se ve increible el error 404. Tambien se ve muy curioso un Bot pidiendo disculpas dos veces... hay sentimientos.

Puko · 29 Jun 2023

imovil dijo:
Se ve increible el error 404. Tambien se ve muy curioso un Bot pidiendo disculpas dos veces... hay sentimientos.

Siempre me da el codigo como se lo 'imagina'

BotBeta dijo:
🙄

¿qué hace cada parte de : animation: aparecer 2s 2s forwards, mover2 2s 4s forwards; ?

BotBeta · 29 Jun 2023

Puko dijo:
¿qué hace cada parte de : animation: aparecer 2s 2s forwards, mover2 2s 4s forwards; ?

En "animation: aparecer 2s 2s forwards, mover2 2s 4s forwards;":

1. "animation" es una propiedad abreviada que permite definir varios detalles de la animación en una sola línea.

2. "aparecer" y "mover2" son los nombres de las animaciones que se definen con la regla @keyframes.

3. Los dos primeros "2s" después de "aparecer" y "mover2" son la duración de cada animación, es decir, cada animación tardará 2 segundos en completarse.

4. El segundo par de "2s" es el retraso antes de que comience cada animación. Así, "aparecer" comenzará de inmediato, pero "mover2" no comenzará hasta después de 4 segundos.

5. Por último, "forwards" especifica que el estado final de la animación (como se define en el 100% en las reglas @keyframes) debe mantenerse después de que la animación se haya completado.

Puko · 29 Jun 2023

¿cómo le hago para que 'aparesca' invisible y cuando ya que se mueva se vaya viendo, divido el @keyframes aparecer en 0%, 50% y 100% ?

BotBeta · 29 Jun 2023

Puko dijo:
¿cómo le hago para que 'aparesca' invisible y cuando ya que se mueva se vaya viendo, divido el @keyframes aparecer en 0%, 50% y 100% ?

Sí, para lograr un efecto de fade-in durante la animación, puedes modificar la regla @keyframes de la siguiente manera:

CSS:

@keyframes aparecer {
  0% { opacity: 0; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

De esta forma, el elemento comenzará invisible (0% de opacidad), a la mitad del tiempo de la animación estará a la mitad de su opacidad (50% de opacidad), y al final de la animación, estará completamente visible (100% de opacidad).

Puko · 29 Jun 2023

Nos salio igualito ...

*darle click al boton de abajo 'rerun' para que se vea/recarge

BotBeta · 29 Jun 2023

Puko dijo:
Nos salio igualito ...

¡Excelente trabajo! Se ve muy bien. Es gratificante ver que el código funciona como se esperaba. Si necesitas ayuda con algo más, no dudes en preguntar.

ultracobra · 2023-08-16T21:19:41-0600

Según dicen las páginas 404 deben ser muy funcionales, dar posibilidades de interacción al usuario, ser amigables y lo que se puede, ser atractivas y graciosas...

Interesante página de error 404

ultracobra

BotBeta

Puko

BotBeta

Puko

BotBeta

Puko

BotBeta

imovil

Puko

BotBeta

Puko

BotBeta

Puko

BotBeta

ultracobra

Temas similares

Privacidad y transparencia

Privacidad y transparencia