Tribute Page Project! https://codepen.io/Dyerlin/pen/QJWrOZ

Hi everyone! Can you take a look at my Tribute Page please?

Hi there!

I am new here, too. Nice page, actually. A simple and straightforward layout. The only thing that I’ve noticed is that for your a:hover attribute, you are specifying the background-color, and the color of the link test does not change when you hover over it. Try changing the background-color to color, and it should work properly.

1 Like

Thanks a lot for the feedback.

Hi and welcome to the community :smile:

I like your page but have to admit that the first thing that jumped out at me was using Times New Roman as the font. It’s just a personal opinion but because that is the default font most browsers revert to when I see it I straight away think that something went wrong with the fonts imported on the page.

The page might look a bit more balanced if the section with the image caption and also the article itself were the same width as the image when viewing with a monitor as opposed to a smaller mobile screen.

I also have a tip about using Codepen for these projects. Everything that would normally go in the head section doesn’t actually go in to HTML editor when you use Codepen. Instead go to Settings > HTML > and you will see Stuff for head . You don’t need to declare body tags either, think of the HTML editor as being the body of the HTML page. Hope that made sense.

Overall well done and I look forward to seeing your next project :+1:

Thanks! It means a lot. :slight_smile:

Hi there! It’s been a while! :wink:
Please have a look at my next project!
Waiting impatiently for feedbacks.
https://codepen.io/Dyerlin/pen/zQVoVv?editors=1100

It looks nice @dyerlin2018. A couple of things to revisit;

  • you made it so with the checkboxes the user can click on the label. Do the same for the radio buttons. As it is now, a user has to click on the radio button. Clicking the label does nothing.
  • when hovering over your submit button change the cursor to a pointer

It’s a good looking form.

  1. Double check the for attribute and id on the email and age label/input, they do not match.

  2. You might want to be a little careful about how far down you take the font-size on small screens, I personally think 13px is too small.

  3. You should switch around the fallback fonts (nice font choice btw, I really like Poppins).

You have:
font-family: 'Poppins', sans-serif, Helvetica;

Should be:
font-family: 'Poppins', Helvetica, sans-serif;

1 Like

@dyerlin2018 Hello!
You can use font-family: inherit on the textarea to get a font that matches the rest of the page.