Product Landing page with animations & transitions - feedback welcome :)

Hi folks,
I’ve just done my product landing page: https://codepen.io/leebut/full/zgoNbW
I thought I’d play around with some animations and transitions.

I’ve linked directly to image sources from their respective websites, so some of the cat stuff doesn’t resize so well, and I think for mobile, I should change the aspect ratio to fit the ‘Open’ wording in properly.

Love it! Great job :heart:

1 Like

It looks great but hasn’t fully passed the test: 5. When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.’

1 Like

Yes, thank you mbassador. That’s because the home link simply returns to the page origin. I’ve added a ‘top’ anchor for the ‘Home’ button. It should pass now.

As I worked through the challenge, I wondered how much value some of the tests have, as they sometimes only require applying an ID to an element, which could contain nothing at all, which isn’t much of a design or functional aspect, although I did use empty divs for the page anchors. I think the one that holds the most weight is the form requirement. However, I can see their merit as a sort of outline to help learners structure their work.

Thank you RadDevDad. That’s encouraging.

I have been wondering about this as well: As I worked through the challenge, I wondered how much value some of the tests have, as they sometimes only require applying an ID to an element, which could contain nothing at all, which isn’t much of a design or functional aspect.

But you’re right. They do help us structure our work.