Used Grid Box and Flex

Community feedback

• 

  Zeynal Mardanli•180

  @Lshiroc

  Posted over 3 years ago

  Hi👋, I just took a quick look to your project. I suggest you:

  • put .img to the right side
  • to erase the extra space under the image you should give display: block; to you img tag
  • for better alignment you should give:

  .hero {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  and erase the min-height: 100vh; from body tag. You can give margin-top and margin-bottom to your hero for mobile design (about 15px-30px). In addition, you should put your .attribution div into main or footer tag.

  Keep coding 🙂☕!

  11

  Marked as helpful
• 

  teamie•470

  @tea-scripts

  Posted over 3 years ago

  Great Job completing the challenge. Some advice:

  • You can try using grid lines or grid-template-areas to have the image in the desired location.
  • Taking a look at the "insights" you'd agree the color of the text and the linear-gradient for the image are pretty much the same so you can use the same color for both and just work on the opacity.
  • Took a look at your mobile view and your image seemed to have some kind of border-bottom, you might want to look into that.
  • You should try to move this block <div class="attribution"> into the main also this would get rid of the landmark accessibility issues.
  • Good job having your global properties set up and reusing them when needed. Overall, you're doing a great job. Keep pushing mate!

  11

  Marked as helpful