Product Landing Page - Leviathan Wakes

I think I got the hang of flexbox now, maybe I should use grid for my next project.

Here is my product landing page for Leviathan Wakes

Feedback is always welcome.

trying adding height: 100%; to your .item figure{} so that the borders are all the same height, I think you might like it better.

.item figure {
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px;
    width: 100%;
    height: 100%;
    margin: 0;
}
1 Like

Also it looks really good! Nice work.

I have been experimenting with align-item: stretch; and so, but overlooked the obvious. Thanks.

1 Like

Hey there,

great work so far, I like it!

My ideas:

  • the “hard” black borders draw my focus to these elements, but I think this is not what you want them to do
  • when I decrease my window width, the black box gets stuck to the left and the right, I think a small padding or margin would look nicer
  • the books at the bottom are very hard for me to read, because they are very small in width
  • I think the font family of the heading “The BookShop …” doesn’t match the “feeling” of the remaining page, probably because of the “serif” font family of the other content

Keep us posted!

The font I used for the headings in the header doesn’t really fit in well with the rest of the page. I wanted a handwritten font because of the background-image of an old bookshop. If I change the font to something more orderly and modern I should probably also change the background, right?

I assume with the hard black borders that you are referring to the list of related books? That border served a purpose when designing the page, paddings and margins, it could be removed, yes. The font is small, but I wanted six items in row, which would be wrapped one by one to the next row as the window is getting smaller. Possible solutions which would allow me to increase the font-size by 1 or 2px: removing the text and only use title and author, remove 1 book or increase the with of the main container.

What is the black box? Are you referring to the video? On my system (Mac OS and Firefox) that is the only thing that below a certain width that touches the borders of the screen.

Thanks for the feedback.