Tribute Page - A simple tribute page about Harry Potter(Feedback welcome!)

Hello everyone,
I just finished my second assignment at freeCodeCamp.

This time, I chose to pay tribute to one of my favorite novels, Harry Potter, and try to add some RWD to my project.

In the project, you can see the part of the timeline, I want to show some staggered layout, but I always feel that the result can be adjusted better. I tried adding max-width or modifying the width, but it seems similar.

I would appreciate it and hope someone can give me some suggestions for layout, adjustment, accessibility, or any thoughts on this project. Feedback is very welcome. Thank you for taking the time to read this post :heart:.

The project link is here :point_down:
Tribute Page

1 Like

i see HP and I’m sold right away! :slight_smile:
Looks like a solid attempt.
I didn’t understand the different colors in the time-line (I was wondering if you were trying to allude to the colors of the Hogwarts houses, but if so this design point was lost on me).
Also as the site is about an English book, it would be expected to check all spelling/grammar when creating it (there’s some work there).

Can you explain more about what you meant:

Hello @hbar1st,
I want to thank you in advance for sharing your feedback so quickly.

In fact, in the beginning, the different colors mainly wanted to distinguish novels, movies, and side stories, and then I thought of houses, so I used them like this…Can you give some advice on matching colors or how to make them better? I’m so afraid of ruining the project because of my mistakes :sob:.

It sounds like I misspelled something in my content. I would try to find it and fix it. Thanks for reminding me of this important thing.

I wanted to try to render something like this (except when the viewport is small)


but I found when the viewport is large, it still separates (regarding the distance between the two li’s). I’m not sure how to adjust the layout to make it better :cold_sweat:.

Thanks again for watching my project and providing feedback, hope to get your suggestions.

Instead of my advice, why don’t u go straight to the source. Look at this site:

Then use your developer tools in Chrome or firefox to steal the colors you want (copy, not steal). That way you can match the expected thematic content for this well-known book and movie series.

I can’t comment on the layout at this time (but I will let you know if I have thoughts).

1 Like

I think I caught what you mean.

I will refer to the source website to adjust my project (Just reference, definitely not steal), and thank you for taking the time to share so much with me. I will readjust my project to make it better.

don’t worry about copying colors etc. That’s perfectly fine btw.

1 Like