Responsive landing page flex-box

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Vanessa, Congratulations on completing this challenge!

  Great code and great solution! I’ve few suggestions for you that you can consider adding to your code:

  Set the opacity around 80% to have a better blend between the purple and the image:

  @media (min-width: 800px)
  .main-img {
      border-top-left-radius: 0;
      border-bottom-right-radius: 1em;
      object-fit: cover;
      opacity: 80%;
      height: 100%;
      max-width: 350px;
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Vanessa•160

  @VanessaAzPosted about 2 years ago

  @correlucas done, thanks :)

  1
• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey @VanessaAz, some suggestions to improve you code:

  • Change the max-width of you component container to 1110px to have the correct width.

  • Delete the <div class="img-container"> the Picture Element is your container.

  • The image serve no other purpose than to be decorative; It adds no value. The Alt Tag should left blank and have an aria-hidden=“true” to hides it from assistive technology.

  • Change the max-width: 350px; to max-width: 100% and add object-fit: cover;

  • Apply the following code to have each side take up the equal amount.

  Code:

  main > * {
          flex-basis: 50%
      }
  

  • The statistics section is a list of statistics, so it should be built using an Unordered List along with a List Items Element.

  • Increase the font-size of the texts and numbers to better match the FEM example.

  Happy Coding! 👻🎃

  0