Need some help and a lot of opinions (landing page design)

Imagine working all past 2 days and when you finish it Freecodecamp tells you that you have a mistake … that’s what happened to me
I was working on the landing page project the first day I made a design in my head for one of my favorite books so I made a wireframe in a paper of how It would look like
I start choosing colors fonts and take some Inspirations from some design platforms … then I start working on it.
the final result was great and I’m soo proud of it.

today I pushed it to a GitHub repo and when I want to copy it to codepen I found that I need to add an img to the header and I did but It still giving me the error
What I need
well this is the link on

I need help to fix that error in codepen + any tips/feedback/opinions about the UX/UI, the colors, the fonts, the layouts, the typos anything that could improve this … of course, you can fork, clone edited and send a pull request in GitHub to help me make changes in the repo too
and Thank you

sorry English is not my native language so :confused: sorry about typos

Seems that you can’t use a base64 encoded image for it (the test looks to be expecting a URL with protocol). You can convert it to an image and use a host for it or find some other image online you can link to.

The page looks good, I don’t really have much to add to it.

  1. When the page stacks, add some margin between the book image and the intro text.

  2. Add some scroll-padding to make the links land correctly.

html {
  scroll-padding-top: 80px;
  1. Maybe add a mobile menu instead of just removing the nav links.

  2. Nitpick, make the vertical spacing for the video and buy options h3 elements the same.

Great job keep it up!

1 Like

It’s the first time i see that property :dizzy_face:
I’ll read more about it

I want to avoid js in this project and doing a good slider menu with pure css is a lot of pain :face_with_thermometer: that’s why i decided to remove it all …
Thanks for your time :purple_heart:

It’s very handy.

I get that but it isn’t great UX to just remove the navigation. Did you try stacking the header content? I’m sure you can create something usable that doesn’t look too bad but still allow the use of the nav links. Even if it doesn’t look amazing, I would still prioritize usability.

1 Like

I’ll find a solution for that asap

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.