The Random Quote Machine Project

The Random Quote Machine Project
0

#1

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


#2

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


#3

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;
}

#4

Thanks alot @elisecode247


#5

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


#6

@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?


#7

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">

#8

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


#9

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


#10

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


#11

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


#12

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


#13

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


#14

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


#15

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).


#16

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


#17

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.


#18

@RandellDawson I just did that