huddle landing page using grid

Community feedback

• 

  P

  David Rodriguez B.•430

  @davidFreelance19Posted about 2 years ago

  Hello developer! I have seen your code and want to congratulate you for completing this challenge. I'm also bringing you some improvements to your code to improve the design layout a bit (desktop only)

  body{
      width: 100%;
      height: 100vh;
      background-repeat: no-repeat;
      background-size: cover;
      padding: 2rem 1rem;
      align-items: center;
      justify-content: center;
      display: flex;
  }
  .logo{
      margin-top: 0;
      position: absolute;
      top: 0;
      left: 0;
      padding: 3rem;
  }
  .hero-text, .hero-img{
      display: flex;
      justify-content: center;
  }
  .hero-text{
      flex-direction: column;
  }
  .btn{
         width: 35%;
  }
  .icons{
      margin: 0 auto;
      padding-left: -2rem;
      position: absolute;
      right: 0;
      left: 0;
  }
  

  I recommend you study a little more about display flex and display grid, this will help you generate a more organized and maintainable code. Also we don't always have to use margin or padding to make a similar design, believe me that with these two themes you will be able to generate responsive designs and create a pixel perfect!

  David Rodriguez

  Marked as helpful

  2

  ---

  

  Faheem ismail•210

  @faheem4545Posted about 2 years ago

  @davidFreelance19 Thank you bro it is really helpfull for me next time i will take care of these things

  0