Meet Landing Page - sharpening the sword

Community feedback

• 

  Joseph Reyes•440

  @JreyIVPosted 7 months ago

  Hi Arthur, nice job on this challenge!

  Here are a couple of things to consider:

  - For your Hero section:
       - Add a padding to the top
       - Try using grid in order to place the content between the two hero images.
       - Here's what mine looked like:
  

  .hero {
    display: grid;
    column-gap: 1rem;
    overflow: hidden;
    grid-auto-columns: 1fr;
    align-items: center;
    text-align: center;
    justify-content: center;
    grid-template-areas:
      "logo logo"
      "faces1 faces2"
      "textcontent textcontent";
  }
  
  .hero > .logo {
    grid-area: logo;
    justify-self: center;
    width: 119px;
    padding-block: 3rem 3.375rem;
  }
  
  .hero > img:nth-child(2) {
    grid-area: faces1;
  }
  .hero > img:nth-child(3) {
    grid-area: faces2;
  }
  
  .hero-content {
    grid-area: textcontent;
    justify-self: center;
    display: flex;
    flex-direction: column;
    place-items: center;
    text-align: center;
    padding-inline: 1.5rem;
    max-width: 30rem;
    padding-top: 3rem;
  }
  

  • For the body:
    • The to set a max-width for the content that contains text. This way they do not keep spreading out into one line and instead they wrap. This will make it closer to the design.

  - For the footer:
  

    - I don't know why your image is so zoomed in but here's what mine looks like:
  

  footer {
    background-image: linear-gradient(
        hsl(195, 37%, 48%, 0.8),
        hsl(195, 37%, 48%, 0.8)
      ),
      url(./assets/desktop/image-footer.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 428px;
    position: relative;
    margin-top: 11rem;
    padding-top: 5.75rem;
    padding-inline: 1.5rem;
  }
  

  Also consider using custom variables. It will save you time and look cleaner.

  I hope this helps at least a little bit. Again, great job on the challenge and good luck

  0