{% extends "layouts/main.html" %}
{% block title %} Page Not Found {% endblock %}
{% block content %}

<section class="full-height bg-color">
    <div class="column-div">

        <div class="half-width xsm-padding-y md-padding-y">
            <a href="https://myte.samdoghor.com" target="_blank">
                <div class="brand-logo-center logo-anim hide-md">
                    <img src="/static/img/myte_logo.svg" alt="Myte Logo" class="brand-logo" />
                </div>
            </a>
            <div class="img-holder-md-center">
                <img src="/static/img/around_the_globe.svg" alt="" class="img-holder-md" />
            </div>
            <div class="text-black text-center">
                <span> Image Attribution: </span><a href="https://storyset.com/people" target="_blank"
                    class="text-black">People
                    illustrations by
                    Storyset</a>
            </div>
        </div>

        <div class="half-width xsm-padding-y bg-color-white full-height md-padding-y">
            <a href="https://myte.samdoghor.com" target="_blank">
                <div class="brand-logo-center logo-anim hide-sm">
                    <img src="/static/img/myte_logo.svg" alt="Myte Logo" class="brand-logo" />
                </div>
            </a>
            <div class="md-padding-x text-center">
                <div class="sm-padding-y text-white">
                    <h1> 404 </h1>
                    <h2>
                        Page 📑 Not Found.
                    </h2>
                </div>
                <div class="sm-padding-y text-white button">
                    <a href="/"> Go back home </a>
                </div>
                <div class="small-text text-white">
                    <div class="content">
                        <p class="end"> Thank you for using Myte 👌🏾 </p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

{% endblock %}