The Random Quote Machine Project

So guys I just finished up on this first intermediate project about to make a random quote. Kindly tell me what you think, I’ll really appreciate feedback. Here’s the link


thanks

Good job! I don’t see any obvious mistakes.

1 Like

Because you specified a width of 600px for the hr element, when the screen width gets smaller than 600px, a horizontal scroll bar appears at the bottom. You can fix that with:

hr{
  max-width: 600px;
  border-bottom: 1px solid white;
}

Also, instead of repeating the background image, why not have it fill the entire body?

body{
  background-image: url("https://farm4.staticflickr.com/3923/14933962596_d298cf0045_b.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}
1 Like

Thanks alot @elisecode247

Nice. Thanks for that @RandellDawson and for always being here to help. I really appreciate that

@RandellDawson
About the height what does the ‘vh’ mean?
And also am having abit of a problem trying to call the font-awesome on the two buttons. For some reason the twitter and quote icons aren’t working. Also the bootstrap class btn btn is not working. What could be the issues?

You can read about vh and other units here.

When using Codepen, everything between the <head> and </head> tags (exclusive), should instead be put in the Stuff for heading section of the HTML settings. Also, you should specify a type=“text/css” for each of the css links. All of the following should be taken out of the HTML code section. You can also get rid of the <html>, </html>, <body>, </body>, <head>, and </head> tags, because Codepen takes care of adding them for you behind the scences.

    <meta charset="utf-8">
    <title>Random Quote Machine</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Oleo+Script" rel="stylesheet" type="text/css">

@RandellDawson Thanks, I’ve done that just now but I still don’t know why it’s not working

I just checked your Codepen you linked to above and do not see the changes I suggested.

Yes I used the links you provided above. Am supposed to use which changes?

Did you create a new pen, because I do not see any of the changes I suggested above in the following pen?

I just added the changes kindly check and tell me what could be the issue

Can you please post a link to the Codepen where you have made all of these changes? I am not seeing anything different.

Here it is https://codepen.io/Sammiles400/pen/PQdGPK

I get a 404 error (Page Does Not Exist) when I click on that link. Update the original Codepen which I can get to (https://codepen.io/Sammiles400/pen/bLKQer).

It keeps bringing the 404 error. check out my profile https://codepen.io/Sammiles400 then fork the Random quote machine project to see the code changes
Open the one with the most views. It’s the one that I’ve updated

OK, I checked it out. But you still have not moved the links out of the html code section and into the Stuff for head section of the HTML settings as I told you in the reply (see above). Click the little gear and you will see HTML settings.

@RandellDawson I just did that