Tribute Page -- Carl Sagan

Hey guys, finally finished my tribute page! Took me a long time, I’d say 40 hours at least. Would appreciate some feedback :slight_smile:

Netlify: https://artempetrov.netlify.com/
Codepen: https://codepen.io/ArtemPetrov/full/LvRyqL
The canvas piece I made for this page: https://codepen.io/ArtemPetrov/pen/Nozmjx

2 Likes

Very impressive, I’ll certainly look into your code to learn how you did the layout.

The only thing that I’ll recommend is that on large screens the space is kind of wasted by having two columns in such a small space, consider that the comfortable line length for an adult is around 75 characters per line…which is understandable if you cannot do it on mobile, but not on a wide screen.

2 Likes

Thank you for your feedback! Fair point about the content width, it does look kind of narrow. I wanted to show multiple columns on big screens because it looks fancier that way, particularly when user sees them change from one to two, but I’ll definitely experiment with giving content more room.

Update: Alright, I made the cards (and whole container) a bit wider so they fit more characters per line. Not quite 75, but more than before. Also added min-width to them so they wrap if container gets too narrow relative to viewport width.

I dig the creative shapes. It is a breath of fresh air compared to the boring rectangles that I use on my websites.
You can make the square images take up 100% width of the columns. I think it may look better?

Thanks! :slight_smile: I was trying to evoke associations with Carl Sagan’s ship from his Cosmos series. And yes, perhaps making square image take up both columns would be better. It would become quite huge, but it would have the benefit of getting rid of annoying white space in the introduction block (that block would also be made to take up both columns. Will try it out.

That’s a beautiful page! Much better than mine.

Wow i’m impressed impressed by your page!!!

Looks great! Really only one minor criticism, styling wise: your ::selection styling makes selected text very hard to read. Consider also setting the selection’s text color to white or a very light color.

You can use this super-useful tool to check if your text contrast is high enough:
https://webaim.org/resources/contrastchecker/

Thanks guys!
@lionel-rowe Great suggestion. Will change color to white once I get home.

1 Like