Landing Page - Feedback please

I Built This
1

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

2

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.

3

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?

4

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

5

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

Thanks for the suggestion.

6

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?
:slight_smile:

7

@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.

8

Hi!

@ConnerOw1115, move the navbar to the side to make it vertical? :thinking:…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! :smile:

9

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

landing_page
landing_page1911×620 94.1 KB

10
  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;
}
  1. 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;
}
  1. 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;
}

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

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

11

Gracias!

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

12

@lasjorg :scream:

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

13

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;
}

landing_page
landing_page1242×884 117 KB

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

14

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,

15

I don’t see any focus styles :frowning_face:. 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.

16

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:

18%20AM
18%20AM838×1162 89.8 KB

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

36%20AM
36%20AM660×694 62.4 KB

17

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 :nauseated_face:”, 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,

18

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

19

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