Looking Feedback- Product Landing Page

Hi,
Looking feedback for the third task, product landing page.
here’s the link,
https://itsjustmygit.github.io/fcc_LandingPage_Repo/

Your page looks good @ItsjustMe. Some things to revisit;

  • Don’t use in-line styling. Keep all your styling external.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens. The video is not responsive and falls out of its container.

It’s not a bad design, I like it. As said the responsiveness needs a little love. Some of it is just moving breakpoints up a bit (e.g. the cards grid).

FYI, If you want to have multiple transforms you have to chain them.

This is what you have on your card buttons hover:

transform: scale(1.2);
transform: translateY(-5px);

It should be:

transform: scale(1.2) translateY(-5px);

I would suggest you add transition to the hover effects.

Here is also an example of how you can do responsive videos (don’t use aspect-ratio as it’s not well supported yet).
https://codepen.io/lasjorg/pen/mdObZbR

1 Like

I’ll try to correct those issues.
Thank you for the reply.:slightly_smiling_face:

1 Like

I’ll address those issues, before moving on to next project. Thank you for your reply. :slightly_smiling_face:

HI,
I corrected the code to make the frame adjust using media queries.
I tried using ‘em’ , ‘rem’, ‘vw’ values, but wasn’t able to resize them properly, so i used the ‘px’ value, it seems to be working.
Please take a look again,
https://itsjustmygit.github.io/fcc_LandingPage_Repo/

I was wondering if there was a workaround to resize the frame using relative sizing values?