Finishing touches on Random Quote Machine

1

Hi everyone, after a full day of work I’ve managed to put together a Random Quote machine I’m quite happy with - https://codepen.io/Stigant/full/KNJgWP/. I just have a small issues I cannot seem to iron out, whenever I press on the new quote button, the colour changes. I think this is bootstraps doing, but I cannot seem to stop it from happening. I’ve tried googling the issue but nothing I could find works. Has anyone got any ideas? Or perhaps just more general feedback on my project?

Thanks,
Liam :slight_smile:

2

Are you talking about how the text changes color when you hover or click? You can throw in this rule so the text remains white.

.button:hover,
.button:focus {
  color: white;
}
1 Like
3

I really like the format! I did notice, however, that the heading seems to re-render every time you get a new quote. I would try to keep the heading static. Also, against some of the backgrounds, the quote text gets a little harder to read.

1 Like
4

Oops, I was using .button:active:focus… Thanks very much. :smile:

5

Thanks very much :slight_smile: I’ve upped the opacity on the quote box which should make reading easier. I wanted to keep the header static but couldn’t work out how to do it. I had to use a div to get the background image to animate properly, $(‘html’).animate doesn’t seem to work, and then couldn’t find a way of putting the heading inside the div and still keep it static.

6

No problem! If you are animating that entire background div, I would suggest taking the heading outside of this div and putting it inside its own div that you can call title or something along those lines. As it is now, the heading is a child of the background div, so anything applied to it will affect the heading also.

7

When I do that the div with the background image shrinks so the heading appears above the photo, which I don’t really like. Is there a way to have the divs overlap? If not I could always just remove the heading completely.

8

Turns out such things are indeed possible. Heading is now static :). Thanks for the suggestion.