A minimal 404 page built with Sass ✌️

In need for a gorgeous and minimal 404-page, with two different color palettes, triggered by a page load? If the answer is yes, then THIS is the page for you.🤓

When designing this 404-page I wanted to do so by creating the visuals with as much CSS as possible. Which meant no images and no unnecessary hover effects made in JavaScript. I wanted to keep it simple and not over design or over code anything. Next up is a small guide, where I go through all parts of the project. Enjoy!

The color palettes

I had two reasons for creating two different color palettes triggered by a page load:

1) The hype with Sass
Since I am a Sass-beginner I just wanted try it out in a smaller project first. I wanted understand the structure and logic using this new Sass(y) way of writing CSS. It turned out that Sass really was useful when wanting to add or change color palettes. Which was perfect my 404-page.

2) The element of surprise
Who doesn’t like small and thoughtful surprises when they visit a website!? Hopefully a user/visitor doesn’t come across too many 404 pages, in their browsing experience, but if they do, then it should be pretty and colorful 😉 and maybe changing color on page load?

The gradients

A few weeks ago I found this awesome web page, uigradients with all kinds of different gradients. Which inspired me to use gradients in my next project myself. I used one warm gradient and a cold one, seen below.

$gradientWarm:linear-gradient(to left, #f5abab, #f170b7);
$gradientCold:linear-gradient(to right, #82a8e0, #da6bbd);

The animated buttons

Now the buttons were a bit tricky. Normally I would used a background-color to set the color when hovering, but this time around I had to define my gradient with a background-image instead, in order for it to work. Exactly how to create this smooth animation hover, only in CSS, can be found here.

The shape-outside-effect

Is what I like to call this cool feature. Basically you use the ‘shape-outside’ rule + add a margin for text to align along a specific shape, in my case a circle. And it worked beautifully! ✨ At least in Chrome and Safari. In Firefox it just aligns regularly, as a squared shape. However I am very happy with the results in Chrome and Safari, and can already see this rule being used in the future, when supported in more browsers, creating more dynamic web designs. 👍

.circle {
width: 304px;
height: 304px;
text-align: center;
color: $textWhite;
border-radius: 50%;
float: left;
shape-outside: circle() margin-box;
margin: 36px;
}

Conclusion!

Okay, so after finishing my first project in Sass, what do I think? I 😍 it. In fact, now when writing ‘regular’ CSS, I feel as if I am doing it wrong, and keep thinking of how I could have written it better with Sass.😊

Curious to see the actual 404-page? Feel free to check it out on my GitHub pages here 💜 or go straight to the code here.