I’ve gotta say, after taking a couple of months focusing on improving my JavaScript, the styling for this one was a challenge for me. It’s given me a bit of a reminder that I need to keep practicing or I’ll lose what I’ve learnt haha.
Here is my random quote machine anyways, made with Bootstrap 4, jQuery and “Quotes on Design” API. I haven’t used Bootstrap in a while as I’ve been trying to stick to CSS grid, so my HTML/Bootstrap class structure might be a bit of a mess. Feedback would be much appreciated on anything I could change. One main concern is that my text isn’t contrasting enough to make it accessible.
The text color of author and background color of quote are too similar that readability is hard. So are the text colors in your credit sections and the colors of the background picture. Consider changing colors to give them more contrasts.
Looks great at present. Maybe add an slide or fade animation so the quotes don’t just disappear. Also, make the links styled differently than the rest of the text so people know it’s a link.
@b3u and @shimphillip Thank you very much for your feedback. I have now altered the background of the quote box to a darker color and made the text white. It contrasts a bit more but will keep working on it. I have text-decorated the links to underlined and will add an animation shortly.