Feedback - Product Landing Page

Project Feedback
#1

Hi all,

Here is my product landing page project. Any feedback would be much appreciated :slight_smile:

Hope your new year is going swimmingly. :+1::+1:

#2

Pretty good! I would

change cursor when mouse hovers on submit button.
fix broken corners of product cards.
Stretch out footer to full width.

#3

Thanks @shimphillip :slight_smile:

#4

  1. I would space out the nav links and vertically center them in the header. Maybe make them a bit bigger and give them some hover style.

  2. Give the #pricing element max-width: 1200px; instead of 50%, then move the max-width: 400px media query breakpoint up to around 680px.

  3. The form is overlapping the features text because it is positioned absolutely. If you want to place an element that is using positioning you should use the top/left/bottom/right properties, not margin. But I don’t really think you need to use position.

#form {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    /* position: absolute; */
    /* margin-top: 5%; */
    /* margin-left: 42.5%; */
    align-items: center;
    padding-top: 70px;
}

After doing that you need to adjust the size of the #submit input a bit so its not so wide.

1 Like
#5

thanks a lot - this is v helpful!

#6

Hi,

When you say ‘top/left/bottom/right properties’ Do you mean padding-top?

#7

Nice work but on the input " Submit Query " add value=“Submit”
It looks like:
help
Sorry for my english :smiley:

#8

No, the properties are literally named top, left, bottom, right. You will mostly use left and top.

Centering using positioning:

.container {
  position: absolute;
  top: 50%; /* 50% from the top */
  left: 50%; /* 50% from the left */
  transform: translate(-50%, -50%); /* center the element box */
}
#9