layouts/404.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <title>Page Not Found</title>
        <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
        {{ $options := (dict "targetPath" "css/404.css" "outputStyle" "compressed" "enableSourceMap" true) }}
        {{ $style := resources.Get "sass/404.scss" | resources.ToCSS $options }}
        <link rel="stylesheet" href="{{ $style.RelPermalink }}">
    </head>

    <body>
        <img src="/images/logo/logo-inv.svg" class="logo" alt="Pulumi">

        <div class="anim1">
            <img src="/images/docs/404/beam1.svg" class="beam1">
        </div>
        <div class="anim2">
            <img src="/images/docs/404/beam2.svg" class="beam2">
        </div>
        <div class="anim3">
            <img src="/images/docs/404/beam3.svg" class="beam3">
        </div>
        <div class="anim4">
            <img src="/images/docs/404/beam4.svg" class="beam4">
        </div>

        <div class="anim4">
            <img src="/images/docs/404/cloud4.svg" class="cloud4">
        </div>
        <div class="anim2">
            <img src="/images/docs/404/cloud2.svg" class="cloud2">
        </div>
        <div class="anim3">
            <img src="/images/docs/404/cloud3.svg" class="cloud3">
        </div>
        <div class="anim1">
            <img src="/images/docs/404/cloud1.svg" class="cloud1">
        </div>

        <div id="clouds-and-beams">
            <h1 class="no-anchor">404</h1>
            <h2 class="no-anchor">Sorry, the page you're looking for could not be found.</h2>
            <p>Please try visiting our <a class="link" href="/">homepage</a> instead.</p>
        </div>
    </body>
</html>