Error, Success, Warning & Info Messages

Error, success, warning and info messages/alerts made entirely with CSS. These messages should be output to the user to let them know how things are going with their interaction with the site. Also please note that these use Font Awesome.

See the Pen Error, Success, Warning and Info Messages by Alex Dobson (@SufferMyJoy) on CodePen.0

HTML

CSS

If you are already using Font Awesome, then you can delete the first line of this CSS that imports it.

As always thank you for reading and please share it around as much as you can! Please feel free to put any suggestions or ideas for future tutorials in the comments section below.