Ruta 404 con animaciones

Clase 6 de 35 • Curso de Desarrollo Web con Svelte y Sapper

Eric Gomez

student•

_error.svelte

<script>
	export let status;
	export let error;

	const dev = process.env.NODE_ENV === 'development';
</script>

<style>

	.Error404 {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.Error404-image figure {
		margin: 0;
		padding: 0;
		text-align: right;
	}

	.Error404-image img {
		width: 250px;
		margin: 2em 0 0 0;
		transform: translateY(0px);
		animation: float 8s ease-in-out infinite;
	}

	@keyframes float {
		0% {
			transform: translateY(0px);
		}
		50% {
			transform: translateY(-40px);
		}
		100% {
			transform: translateY(0px);
		}
	}

	h1, p {
		margin: 0 auto;
	}

	h1 {
		font-size: 2.8em;
		font-weight: 700;
		margin: 0 0 0.5em 0;
	}

	p {
		margin: 1em auto;
	}

	@media (min-width: 480px) {
		h1 {
			font-size: 4em;
		}
	}
</style>

<svelte:head>
	<title>{status}</title>
</svelte:head>

<div class="Error404">
	<div class="Error404-message">
		<h2>{status}</h2>

		<p>{error.message}</p>

		{#if dev && error.stack}
			<pre>{error.stack}</pre>
		{/if}

	</div>
	<div class="Error404-image">
		<figure>
			<img src="" alt="error 404">
		</figure>
	</div>
</div>