<!DOCTYPE html>
<html lang="en">
	<head>
		<%- include("./partials/head.ejs") %>
		<title>sebmandal</title>
	</head>
	<body class="container-md">
		<%- include("./partials/nav.ejs") %>
		<div class="row">
			<!-- 404 error page -->

			<!-- Illustration on computer view -->
			<div class="col-md-6 d-md-block d-none">
				<img
					class="w-100"
					src="/img/illustration/undraw_road_sign_mfpo.svg"
					alt="lost_illustration"
					height="500"
				/>
			</div>

			<!-- Innter text -->
			<div
				class="
					col-md-6
					lost-text-container
					d-flex
					align-items-center
					justify-content-center
				"
			>
				<div class="text-center text-md-start">
					<h1>Are you lost?</h1>
					<br class="d-md-block d-none" />
					<a href="/" class="link text-reset link-unstyled"
						>Head back to the home page by pressing this text</a
					>
				</div>
			</div>

			<!-- Illustration on mobile view -->
			<div class="col-md-6 d-md-none">
				<img
					class="w-100"
					src="/img/illustration/undraw_road_sign_mfpo.svg"
					alt="lost_illustration"
					height="500"
				/>
			</div>
		</div>

		<hr />

		<%- include("./partials/footer.ejs") %>
	</body>
</html>
