Product Landing Page (Barber shop) feedback

Link to codepen here:

Edit: Link to updated version:

I don’t know how to define to width and height of the “Dye Hair” image to be the same as the other 2 pricing images. Other than that I’d appreciate any feedback!

1 Like

I did some changes in the card section. Now they are the same size:

.card img{
  display: block;
  max-width: 100%;
  height: 50%;

  background: #f9f6f7;

#pricing ul{
  list-style: none;

#pricing li{
  margin: 3.5rem;

  font-size: 1.6rem;
  padding: 10%;

.card-content h2{
  color: rgb(220,20,60);
  padding-bottom: 15%;

.card-content h3{
  padding-bottom: 1rem;

  margin-bottom: 1rem;

.card-content p{
  text-align: justify;

  display: flex;
  flex-direction: column;
  height: 600px;
  background: #fff;
  box-shadow: 0 5px 10px 0 rgba(4,10,41,.2);
  box-shadow: 0 5px 10px 0 rgba(4,10,41,.2);
  text-align: center;

You should probably crop the dye hair image and make it shorter because it will look like it was stretched horizontally when all of the images are the same size.

Nice looking page @zukululushikufu. My only feedback is check that a valid email has been entered and give an error if it’s empty when clicking the submit button. You learned how to do this when you did the survey form.

Thanks for the changes! Everything works fine. I even added an object-fit: cover in the images so that it doesn’t get distorted. One thing I don’t understand is why setting a height on the card class affects the width of it.

Thanks for the feedback! I’ll try to look out for this problem more often in the future!

@Roma I know you tell people not to use <br> in their projects but I added a single instance of it right before my email input box. I’ve set it to display: none by default but for smaller screen sizes I set it to display: initial; to keep the submit button and the input box grouped up. Is this an acceptable way to do this or is there a better way to do this using css only?

@zukululushikufu, I usually tell people not to use <br> in the survey form because almost every other line contains <br> and that’s not what the tag is for. It creates accessibility issues.

After saying that, I quickly put together this pen to show that even an address can be coded differently and styled to look just like an address that was made using <br>.

As an aside, this property/value pair (display: none;) is not doing what you think it does. I created this pen that shows the difference between display: none; and visibility: hidden;. Both have to do with how an element will not show on your page. But both are for an element that would be visible on the rendered page. The <br> tag is not a visible element.

Read the article below to see why I always mention it.