Tribute page: Sister Rosetta Tharpe- Feedback welcome

Tribute page: Sister Rosetta Tharpe- Feedback welcome
0
#1

Hey all, just completed my tribute page for the first responsive web design project.

Codepen here: https://codepen.io/KaylaM91/pen/oRLPbZ

Mainly used Bootstrap and all in all had a good time with this. Feedback welcome.

Thanks and happy coding!

1 Like
#2

@kaylam I think your layout is a bit off. It looks like this

  • I think that you forgot to add the three lines for Bootstrap lines that come right before the closing body tag.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
#3

Hi @kaylam,
I like your page, looks very good. However, revisit your padding. On my laptop with my browser open to a width of 1250px there’s a horizontal scrollbar. On lesser widths the scrollbar shows more and more whitespace on the right side. One big culprit is that <hr> at the bottom.

1 Like
#4

I like the design. Well done.

  1. imgur isn’t the best host to use with Codepen, sometimes the images will load sometimes not.

  2. I would prefer the layout stacking a bit sooner.

  3. I think the font size gets to small, I know why you are doing it but I don’t think it is the right solution to the problem.

  4. The width on .hrFooting and .hrHeading is causing an overflow, change it to width: 100% and max-width: 55rem and 25rem respectively

  5. You will still have a bit of a horizontal overflow, I would just set the html to have overflow-x: hidden;

#5

Thanks for the feedback, it looks like my image hosting needs some work, as none of the images appeared for you. I’ll have to find an alternative to imgur.
Also added my Bootstrap tags back in , they must have been cut off when i copied from my code editor.

#6

Hey thanks for taking the time to look things over. Took your advice and used overflow-x to get rid of that annoying white space on the right, also fixed my <hr> tags. Can I just ask what your go-to for reliable image hosting is? I’d like to get away from imgur but not sure what the best alternative would be. Thanks again!

#7

Sorry for not getting back to you. I don’t really use image hosts, I usually do my stuff locally and then whatever host I use for the web page (like Netlify or GitHub pages etc).

Here is a search for image host on the FCC forum
https://www.freecodecamp.org/forum/search?q=image%20host

#8

Okay! that was pretty cool. I really like the fonts, but the only thing is that the images wouldn’t show.
:frowning: :frowning: :frowning: :cold_face:

#10

Just fixed my image hosting so should be much better now!

#11

Wow! now that the images are fixed, it looks MUCH better now!

#12

Nice!
I have one suggestion now. How about having the corners of the images touch? View image:
thorpe
The picture can take up 50% width and the div with text can take up the other 50%;