My personal website is currently made in Symfony. Yeah, I know, not the best thing for this purpose, but I started it a few years ago, when I was younger and carelessler…
A few days ago, I decided I wanted to refactor my website and create a whole new one, using a static site generator. Ended up deciding on Hugo, btw.
As the old one was a bit, well, clunky, I wanted the new one to be online ASAP as possible. But I needed a banner that said “hey, I’m still working on it, be careful”. Well, I don’t really needed it, but it’s cool nevertheless.
My objective was to emulate a kind of “caution” tape, the yellow and black one that reminds you of roadworks. Making a stripes background wasn’t difficult, thanks to tools like stripesgenerator.com, but the most important thing of all is adding a little tilt, simulating the falling tape.
This could be accomplished thanks to the transform: rotate() CSS property.
It ended up being something like this:
See the Pen Untitled by David Davó (@daviddavo) on CodePen.
What do you think? Pretty neat, huh? If you have any comments on it, share your modifications!.