Landing page using SASS and mobile first workflow

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one again. Layout in desktop looks nice, it is responsive and the mobile state looks great.

  Some suggestions would be:

  • You are missing this base styling:

  html {
    box-sizing: border-box;
    font-size: 100%;
  }
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  

  This way, handling an element's size will be lot easier because of the box-sizing: border-box.

  • I wouldn't really include the hero-section on the header since that is a component of the main for every page there is.
  • Use only huddle as the alt for the website-logo. Use only the website's name for the alt.
  • The try it free background-color is grey-ish unlike the design, you might want to lighten that one up.
  • I don't really know if the hero-section image is decorative or not. if there were some like images of the huddle logo in there, it could be an image for the app but right now it doesn't really look like anything and just a vector. Could be hidden though.
  • The box-shadows blur and spread value for each for the next section could be toned up so that the shadow won't look like a line.
  • cta background-color not the same as well, it should be white.

  FOOTER

  • Don't hide the img, again website-logo is one of the meaningful images on a site, so use proper alt on it.
  • I would use ul on the 3 information below the website-logo since those are your website's "list" of contact information I guess.

  Just those only and the rest looks great. Again, awesome work on this one.

  Marked as helpful

  0

  ---

  

  Joaquin•410

  @JoadevyPosted about 3 years ago

  @pikamart Thanks again bro! I'll considerate your tips when I'll have time to check it. About the hero-section on the header I agree with that but I didn't know a way to put the background pattern in all of the landing (the landing includes header and hero) so I put hero into the header but I know that isn't correct. Do you know something to suggest in this case? I feel I've issues handling the patterns imgs.

  1

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @Joadevy Great,

  For that background, what I would do is that, the header that contains the website-logo and the try-it-free will be using position absolute and stays at the top of the body.

  Then the main or the hero-section of the main will have that background-image set. This way, the header won't affect the layout since it is being absolute on the top. and yes, it is fine to absolute or fixed the header at the top but not absolute the main or a very large container :>

  Marked as helpful

  0

  

  Joaquin•410

  @JoadevyPosted about 3 years ago

  @pikamart Great, It sounds good, I'll try with it, ty!

  Edit: work completed, tips taken, now everything looks good.

  1