Project - Tribute Page [feedback]


This is my first project, please review it!
It is a tribute page for Pink Floyd.
Thank you

  1. Make the h1 bigger.

  2. Give the tribute-info a max-width to limit the line length.

  3. Increase the font size and line-height on the paragraphs (maybe 18px for the font-size and 1.6 for the line-hight).

  4. Make the images the same height. You can use object-fit: cover and a fixed height on the images. You will likely also want to set a max-width on them. I’d also set justify-items: center; on the #artists-container grid element. You may have to move the first media query up just a bit to avoid the images from cropping too much (caused by object-fit: cover).

All in all, I think you did very well. Good job, keep it up.

Hi! First of all, I love your choice of the topic :smiling_face_with_three_hearts:

The page itself looks great, I really don’t have any major critiques on it. It’s clean, simple, responsive. Your code looks clean too. So, overall really great job :smiley: A couple of minor comments:

  • Stylistically, I’m a tiny bit bothered by the images not being the same height, so I would maybe crop them before uploading them on the page so that they’re all equally tall. Again, not a big deal, this is just a style thing and I’m probably too much of a perfectionist :sweat_smile:
  • In CodePen, you usually put only the content that goes inside the body element into the HTML panel. So, no need for DOCTYPE declaration, meta info, etc. If you want to put some of these tags inside the head element, click on the little settings button on the left where it says ‘HTML’, and then you’ll see 'Stuff for <head>’ at the bottom, so you can insert your meta info there.

Hope this helps and, again, great job! :blush:

Thanks for feedback @lasjorg and @kristina_v!
I made the changes you asked, please check is everything OK now!

Yeah, the images look much better and I can see that you’ve moved meta info to 'Stuff for <head>’ (you still don’t need the <!DOCTYPE html> declaration or the <html> and <body> tags, but you get the idea now so nice work). :smiley:

I removed html and body tags from project.
Thank you for feedback!

1 Like

Good topic! Well done! Makes me want to hear them again.