Landing Page - Feedback please

[gasgen]

Hi!

I finish my third project (Landing Page).
To see it, click here

What do you think?

---

I dont know why the full-view of codepen add to my project a wide bar in the bottom…somebody know because it happens? In editor-view this not happen: Editor View.

In debug mode doesn’t happen either: Debug View

[DenizOrsel]

There is something going wrong with the view. The vertical view is super limited and user has to scroll to see small fraction of it.

Other than that I think you are getting there.

[gasgen]

Hi @DenizOrsel,

I don’t know why this happen, I think it’s something of codepen full-view, because when I try it in local the webpage don’t have this bar in the bottom.

Try see it in editor-view: https://codepen.io/gasgen/pen/LvoyMw

Somebody knows why codepen add this bar when I try to see it in Full view?

[DenizOrsel]

It works better now. You may want to animate the scroll event through navigation menu. It would create a smoother feel on navigation.

[gasgen]

Of course, You’re right!
I added a scroll-behaivor: smooth; in my css.

Thanks for the suggestion.

[ConnerOw1115]

Woah!! nice work! that is amazing, except that fixed bar on the to is a little bothering. maybe move it to the side, or make it brighter?

[brandon_wallace]

@gasgen

I suggest not letting the text “Lorem ipsum…” go all the way across the screen. I am viewing your page on a 24 inch wide monitor. I would set a minimum width on the container to keep the text within a certain width.

The page is well made. Good job.

[gasgen]

Hi!

@ConnerOw1115, move the navbar to the side to make it vertical? …I think it would be more bothering…But I gonna try to do it. A brighter color can help…

@brandon_wallace I didn’t noticed it, recently I add a width to the paragraph, can you tell me if you view right the text now?

Thanks!

[brandon_wallace]

Es igual que antes, muy ancho. Aquí ésta una foto.

[lasjorg]

1. You should put a max-width on the paragraphs and center them using auto left/right margin. You also have to make the #contentParagraph a class, you shouldn’t use the same id more than one time per document. The same goes for #buttonBuy, it needs to be a class.

.contentParagraph {
  text-align: justify;
  max-width: 890px;
  margin: 1em auto 1em auto;
}

2. I would not use the universal selector for all those properties, you can do it for the padding, margin, and box-sizing, but the rest I would put on the body.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #0a0a0a;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  color: #0a0a0a;
}

3. Your image is losing its aspect-ratio because of how you are sizing it. Remove the inline styles and give the image 100% width, then set a max-width on the container along with margin: 0 auto;

.image > img {
  display: block;
  width: 100%;
  height: auto;
}

.image{
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
}

4. I would remove the overflow-y: scroll on the hatContent, .whyContent, .howMuchContent grouped selector. It looks bad having horizontal scroll bars on section content.

5. In my opinion, you are overusing text-align: justify, it just doesn’t always work.

[gasgen]

Gracias!

Ahora le cambie el width a un porcentaje menor y le agregue un max-width. ¿Se sigue viendo de esa manera?

[gasgen]

@lasjorg

Thanks for the feedback! I’m going to check all items you mentioned!

[brandon_wallace]

Es mucho trabajo hacer una página web linda ¿sí?
He pasado muchas horas cambiando los colores y la posición de los elementos en
las páginas mías, pero es divertido.

¿Qué tal así? Esto es mi opinión.

#contentParagraph{
  margin-top: 1em;
  margin-bottom: 1em;
  text-align: justify;
  width: 100%;
  max-width: 900px;
  align-self: center;
}

Tu página está bien hecha joven. No hay mucho para cambiar.

[gasgen]

Muchas gracias @brandon_wallace! Realice el cambio que me sugeriste, ahora tengo que seguir puliendo los detalles. Volvere a escribir cuando haya hecho algunos avances!

He pasado muchas horas cambiando los colores y la posición de los elementos en
las páginas mías, pero es divertido.

¡Sí! Es realmente muy apasionante estar realizando cambios y mejorando tanto el código como el diseño. Cuando piensas que ya no hay nada que agregar o quitar, te levantas das una caminata y al volver ¡se te ocurren otras ideas! O te encuentras con feedbacks geniales como los que me hacen en este topic.

Saludos,

[fifn2]

I don’t see any focus styles . Sighted keyboard users might have a hard time using your sight. The color contrast is good, however. I also don’t see alt attributes on the images.

[kiwisquash]

The website looks nice for larger screens. The one thing that stood out to me was the aspect ratio of the handshake image. It looks oddly long.

However, I found some issue on smaller screens.

Take a look at this screenshot:

The nav bar is crammed, and the font size seems way too big in some places. Also, this happens on a smaller screen:

[gasgen]

Hi @fifn2!

You’re right! I forget to place the focus style and the alt atributes. I fixed this oversight.

@kiwisquash, Yes! I think like you, that image has a very rare aspect ratio…is “out of tune ”, I should change it.
About the coins and net drawing, i didn’t notice that. I will fix it.

Thanks a lot for the feedback!

Regards,

[fifn2]

So glad I could help and that your weren’t just neglecting focus styles .

[zozko]

try this:
#webFooter{
text-align: center;
padding: 1em;
width: 100%;
/*height: 4em;*/
}