Tribute Page- Not finished but almost there!

Hello to the awesome community of freeCodeCamp,

This is my tribute page project. This is my first ever project on here so I’m still learning. I would really appreciate if you guys can give me any sort of feedback, suggestions and pointers that will help me improve my project as well as my skills. My code is a bit messy (sorry about that but I’m trying to fix it). Any and all kind of constructive feedback is appreciated. :grinning:

Here’s the link to it: https://codepen.io/LBJ2300/full/Kbybyy

Issues that I’m trying to fix are :thinking::sweat::

  1. The heading layout doesn’t look that nice. Also, I can’t change the font style of the header for some reason.
  2. I want to align the buttons at the top with the heading but struggling with it.
  3. I want to have a black background for the whole page except for the section of the quote where I want a different colour.
  4. The caption is very close to the image and I’m trying to move it a bit.

Thank you all for your help. I love this community :+1::clap:

1 Like

I’m on my phone, so I can’t switch to see the detail of your css.

I will look at it tomorrow if I ever wake up.

I was up until 4:30 a.m. and then up at 9:30 am and just got off work, so I won’t fall asleep any time soon.

I am learning, so I might not be much help. But I’ll try.

I like that you did a tribute page on Albert Einstein. I never knew that he gave a daughter up for adoption. That’s very sad.

Thank you and no problem. You taking your time to read my post and reply is as amazing as a feedback(might not make sense as English is not my first language):sweat_smile: I’m also trying to finish this so I can move onto the next project but since my university started last week, I haven’t been able to work on this as much as I want to.

Hi LBJ2300,

I think I can offer some suggestions that might help you (keep in mind I’m still a beginner myself!).

  1. Try adding some padding to the bottom of your header element. I would suggest playing with this in the Chrome dev tools using the inspector (press Cmd-Option-I on your keyboard), as you can then find a value that will create a satisfying result and then go and update your code (I hope that makes sense).

  2. Are you wanting the Timeline and Main links to be on the left side of the page rather than right?

  3. To add a different background colour just for the quote you need to select your div with an id of quote in your css and then chose whatever colour you like best (again the Chrome dev tools are great for this as there is a colour picker built in):

  4. Again, padding is your friend here. You could either add padding to the bottom of your image with padding-bottom or to the top of your div with an id of quote.

Sorry if the above doesn’t work or if it’s too basic for what you’re trying to achieve but hopefully it’ll be helpful!

All the best for your coding journey!

Simon

Also, you can create a class in css for the caption and set the line height to give you more space under your photo.

I want the Timeline and the Main to be on the right side but horizontally aligned with the Title. Thank you for your feedback. I’ll definitely try out your suggestions and let you know how it goes!:+1:

Yeah true. I’ll try that out and let you know! Thank you for your feedback :+1: