My random quote generator, "Sticky Quotes"

Code Feedback
1

Hello, everyone, I finished the random quote generator project and named my project “Sticky Quotes.” I would love your feedback on the look and functionality.

The CodePen link: https://codepen.io/KelbyBaca/pen/RMxGmy

I also put it on my Github, so here’s a link to it on Github pages as well. The only difference is the repeating diamond background (I couldn’t get the background to show up on Codepen). Do you think it looks better like that or with just the solid color?
https://kelby-baca.github.io/Sticky-Quotes/

Thanks for your time!

2

I actually prefer the diamond background.
Don’t like the font though… all caps and heavy bold, and it’s hard to read.

Personal/Subjective: A minor/subtle finishing touch is getting rid of the very sharp corners. See for yourself and compare with or without rounded corners.

.sticky {
    // add to your .sticky class
    border-radius: 5px;
}
1 Like
3

Also, if you have a patterned background, you’d want some of the background to show-through your shadows! And not just use a solid shadow color… so I prefer to use an rgba format. Also, a little shadow is enough… subtle design cues is the key.

box-shadow: 0.25rem 0.25rem 0.625rem rgba(100,100,100,0.6);
1 Like
4

Thanks for the feedback! I changed the font to something lighter, Indie Flower from Google Fonts. The lighter shadow and rounded corners on the sticky look better, too!

5

Use the same principle (rounded corners) on your “New Quote” black box.
Use px instead of %.

These are very minor and simple CSS changes, but it does make the end product look more finished in my opinion.

1 Like