I had lots of fun creating a Product Page. Would love to hear what people think!

product page β†’ https://codepen.io/JordanRenaud/full/GRWoEoG

Looking to engage more with the community on here, so it would be great to hear feedback. Also, what would you have done differently?

Thanks!

1 Like

For the fullpage view its already good ! but you need put some attention on element that overlapping each other when the screen size change, to avoid that i used to make wrapper for each element and also for result neater arrangement :wink:, for example: make div that wrap your h2 element along with your product images, and make product image have their own wrap, right now in your css the product image just spesifically arrange the image individually not as group.

1 Like

Fancy looking.

  1. This class
.fix-margin {
  margin-left: -0.4vw;
  margin-top: -1.1vh;
}

Looks like you just want to remove the default margin on the body instead.

body { 
  margin: 0;
}
  1. For the video you can use object-fit: cover and just make it 100%. Should work.
#video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
  1. You need to make sure the text contrast for the nav links is high enough to overlay the video. One option would be to add a tiny bit of text-shadow to the text.

text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8)

  1. Simply adding flex-wrap: wrap to your flex-container selector would pretty much make them responsive. But you have to change height to min-height on .product-images to allow them to grow taller as needed.
.product-images {
  min-height: 100vh;
}

.flex-container {
  display: flex;
  padding-top: 8vh;
  flex-wrap: wrap;
}
  1. Not sure you have enough content in the contact section to warren height: 80vh, I would lower that.

Good job, keep it up.

1 Like

I think this is awesome but you could style it more!

Your page looks good @jordan.dj.renaud. In addition to some of the previous comments some other things to revisit;

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens. Elements are falling out of the container.

Thanks, I appreciate all the details! I will definitely take a look at all of these.