Help with My Product Landing Page

Hi Everyone!

So I have multiple issues that I’ve been trying to solve on my own but need a little bit of help. Keep in mind that I haven’t finished the project yet.

1.) I wasn’t able to add a video using the <video> tag so I used iframe instead.

2.) Under my 3rd section for my products, I can’t get my three columns to align- I tried using CSS Flex and now am trying Grid.

Can you point out any mistakes I’ve made or things I may be misusing?

I really appreciate it!

My code:
https://codepen.io/Elanise_1/pen/rENgBy?editors=1000

here is the project link:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page/

2 Likes

@auriana Good work as a beginner
You can check my ones
https://msnakih.github.io/portfolioone

Thank you!

I really like your page! For a moment I thought it was real :grin:

A problem I have is that each project I make I take to “seriously” and spend unnecessary time on details like producing real page. I’ll have to work on that.

Your page looks beautiful- but it’s clear you’ve spent more time on the structure and how it looks than words- which is the purpose of the project.

Do you have any suggestions on how I can improve it?

Again, thank you very much!

3 Likes

@auriana thank so much
if you are good at css and html just move forward to bootstrap and java script and jquery
concentrate what you are doing . Don’t think too much . try to follow what others are doing

Hi,

Under .product put margin: 0 auto; to align them to the center.

Hope this helps.

1 Like

Thank you! It did align them center :smiley:

1 Like

@auriana Hiciste una página muy linda. Me gustan los colores de esos piedras.

  • Lo que puedes cambinar es en la vista de celular. Mira como el espacio no está
    llena a la anchura de 450px.
  • Creo que puedes envolver la etiqueta de iframe con una de video asi
<video>
  <iframe></iframe>
</video>
  • Y para la foto puedes añadir:
.stone {
  min-width: 350px;
}

Everything you did is very good except for the product tiles.
What’s wrong with them is that they are open to the whole page. I prefer them enclosed in a little ‘box’. Don’t align all of the products centered. lay them side-by-side unless viewed on a phone or tablet.

@brandon_wallace,
Porque hablas en español?

1 Like

@ConnerOw1115 That is a skill I have. I should write in English so that english speakers can understand.

Sorry for the late response, but thank you for your advice! :smiley:

The page layout looks so much better!

I know is still have a bit to work on it, but here is a link to it if you’d like to seethe 98% finished project!
https://codepen.io/Elanise_1/pen/rENgBy

Thanks, Conner for your advice! The video works now :smile: