A tribute page for Japan

Hello, guys. I came back to freeCodeCamp platform to stop getting distracted and just work hard. I coded this tribute page. https://codepen.io/edvinasurbasius1/pen/NBBQGq I thought to share it.

As for tribute page specifications itself, I just let my fingers go and haven’t checked them. It requires some tags and so on. I will have to go back and redo it, but anyways, for now this is okay. Developer’s journey is about building things.

Thanks.

A very simple and elegant page and I loved the personal content on it. There is however a problem with it’s responsiveness on smaller mobile screens, due to the nave links exiting it’s container. And also I feel that it would be better to start the passage from below the image than beside it on smaller screen widths (see screen-shot). Barring that I only have praises for the page.

image

1 Like

Thanks for a feedback. I really appreciate. It helps a lot. I already came up with a fix for the first problem:

header {
flex-direction: column;
align-items: center;
}

Items in header will have flex-direction: column; and it will be center. If you know better solution, I would like to hear it :slight_smile:

As for the second one, I also introduced this:

.kyoto {
float: none;
width: 100%;
}

When it’s less than 600 px it goes full width with no float. Also, when it’s less than 600px text-align for body tag is center.

Those were mine fixes. Thanks for help.

1 Like

great job man, looks professional. really good color scheme, well done :blush:

1 Like

Nice job! I like how the nav responds to smaller screen size.

1 Like

The navbar looks much better on smaller screen widths now. Great job! :slightly_smiling_face:

1 Like