Please check My Project Landing Page and suggest me how to improve my code

codepen link: https://codepen.io/Yag/pen/GeJVrj

I think your navigation menu would benefit from this article


On smaller screens the font gets a bit too small

but your code looks good, it is clear and concise. I like your overall design

1 Like

Looks pretty good, nice job.

  1. Remove the max-width from the header. Or if you don’t want the page to be full-width then wrap everything inside the same wrapper with a max-width and center everything inside it.

  2. The header takes up a lot of vertical space on the 700px breakpoint. If you make the logo a bit smaller at that breakpoint it won’t be as bad. Say 40px/40px for the logo.

  3. The video is not responsive, try searching for responsive video to get some help.

  4. I would space out the price items a bit more and make them bigger, give them more width and some more padding.

  5. Try this for the footer. First give the footer even padding on all side, like 20px. That way the icon scale on hover doesn’t cause an overflow. Then move the transition to the li. Now fix the hover selector by removing the space between the :hover and the li, like this li:hover (and not like this li :hover).

CSS for the above:

footer {
  display: flex;
  justify-content: space-between;
  background-color: #574452;
  /* padding-top: 10px; */
  /* padding-left: 10px; */
  padding: 20px;
  color: #f0eae7;
}

footer ul li {
  padding: 10px;
  transition: transform 0.5s;
}

footer ul li:hover {
    transform: scale(1.5);
}
1 Like