CAT404 by Fresh FX Design
A 404 page with a cat that follows your visitor's mouse (or finger on a phone).
Full guide with pictures: https://www.freshfx.co/cat.html


WHAT'S IN THIS FOLDER
  404.html   the page your visitors see when a link is broken
  cat404/    the script and the animation frames (keep this folder name)


STEP 1: UPLOAD
Upload 404.html and the cat404 folder to the main (root) folder of your
website, the same folder as your homepage. When it's done, these should open:
  https://yourwebsite.com/404.html
  https://yourwebsite.com/cat404/cat404.js


STEP 2: TELL YOUR HOST TO USE IT

  Netlify, Vercel, GitHub Pages, Cloudflare Pages
    Nothing to do. They use 404.html automatically.

  cPanel / shared hosting (GoDaddy, Bluehost, Namecheap, HostGator...)
    Open the File Manager, find the file called .htaccess in the same folder
    (turn on "Show hidden files" if you can't see it) and add this line:
      ErrorDocument 404 /404.html

  Nginx (your own server)
    Add this inside your site's server { } block, then reload Nginx:
      error_page 404 /404.html;


STEP 3: TEST IT
Visit a link that doesn't exist, like https://yourwebsite.com/meow
You should see the cat, and the address bar should still say /meow.


CHANGE THE WORDS
Open 404.html in any text editor and change the lines that start with data-:
  data-title    the big headline
  data-text     the line under it
  data-button   the button label
  data-home     where the button goes, like / or /shop


ONE THING TO WATCH FOR
Show this page AS your 404 page. Don't REDIRECT broken links to it.
Some sites and plugins send every broken link to a normal page at /404.
That page answers "200 OK", so Google thinks your missing pages are real
pages, which can hurt your search ranking. Every method above does it the
right way. If you use a WordPress redirect plugin, make sure it isn't
redirecting 404s.


WANT YOUR OWN?
We can make the cat do something else for your brand ($95 CAD), or design
a completely new character for you ($295 CAD).
DM us on Instagram @freshfxco or visit https://www.freshfx.co
