404 page is empty about portio-hugo HOT 9 CLOSED

Here is my implementation. It's brutal but works.

{{ define "main"}}
<div class="spacer"><br>&nbsp;<br>&nbsp;<br>&nbsp;<br>&nbsp;<br></div>
      <div>
        <h2 style="text-align:center;">Oops, Page Not Found!</h2>
<center><img src="images/404.svg" alt="404" width="404px" align="center" style="align:center;text-align:center;"></center>
<br>
        <h2 style="text-align:center;">
            <a href="{{ "/" | relURL }}">Go Back Home</a>
        </h2>
      </div>
{{ end }}

The image is from Undraw Illustrations, change it as you wish otherwise go to their website undraw.co and download it. I'll work on a better one later. Works on mobile too!

from portio-hugo.

Many thanks!

from portio-hugo.

Because 404 page not found.
I mean, we don't have any design for 404 page. That's why It's blank.

from portio-hugo.

ok I see, but is it possible to have at least the navbar, a text saying "404 page not found" and the footer?

from portio-hugo.

Yes, you can do that by

{{ define "main" }}
"404 page not found"
{{ end }}

from portio-hugo.

thanks.

It's better, but the text is not appearing as on the other pages:

Any idea on how to improve it? sorry my knowledge in coding is quite basic.

from portio-hugo.

It's better, but the text is not appearing as on the other pages:

You need add some css and little bit of Html.

{{ define "main" }}
<section>
  <div class="container">
    <div class="row">
      <div class="col-12 text-center">
        <h1>
          404 page not found
        </h1>
      </div>
    </div>
  </div>
</section>
{{ end }}

Try this.

from portio-hugo.

a little bit better :

But the title is above the navbar

from portio-hugo.

I'm really sorry mate,
I can't help you here, you have to learn some CSS SCSS and little bit of HTML.
Try,

{{ define "main" }}
<section>
  <div class="container">
    <div class="row">
      <div class="col-12 text-center">
        <h1 style="margin: 100px, 0px;">
          404 page not found
        </h1>
      </div>
    </div>
  </div>
</section>
{{ end }}

This code may break on mobile.

from portio-hugo.