Henry

Latest comments

• 

  Bárbara Damasceno•320

  @barbaradamasdev

  Submitted over 2 years ago

  

  Stats preview card component

  3

  40
  

  Henry•340

  @devhnry

  Posted over 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have SOME suggestions about your code that might interest you.

  • As regards your solution giving errors on the accessibility reports. This as a result of not having a Landmark. To solve this issues, add a <main></main> just outside the <div class="content"></div> and this will fix the issue. More on LandMarks

  • To help with the effect on the image, Try adding a <div class="overlay"></div> element just right before the <div class="image" ></div> container or <img> element. Now put both <div class="overlay"></div> container and the <div class="image" ></div> container inside a <div class=image__box ><div> .This will serve as the Parent Element of both . Then add the following styles below... Example

  HTML

  <div class=image__box >
      <div class="overlay"></div>
      <div class="image" > ... </div>
  <div>
  

  CSS

  .image__box{
      position: relative;
  }
  
  .overlay{
       position: absolute;
       top: 0;
       left: 0;
       width: 100%
       height: 100%
       background: ... ;  // Color goes here
  }
  
  .image {
      background-image : url(...) ; // If used a url instead of placing it directly in the HTML
      mix-blend-mode: multiply;
      opacity: 75%;
      object-fit:cover;
  }
  

  • TIP : Check out the <picture></picture> element as this can help with switching between two images based on viewport.

  I hope you find these comments helpfull! 😄 And I was able to answer your questions

  Happy coding!

  1

  Marked as helpful
• 

  Bárbara Damasceno•320

  @barbaradamasdev

  Submitted over 2 years ago

  

  Four card feature section

  2

  30
  

  Henry•340

  @devhnry

  Posted over 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have SOME suggestions about your code that might interest you.

  • Regards naming your CSS Custom properties . It's okay to use the names provided in the style-guide.md .Peronsally, for best practices try using Variable names instead, as this will also be the type of naming conventions you might use in bigger projects or challenges Example --red --cyan , Try --clr-primary-1 --clr-primary-1 .

  • As regards your <div class="content" > </div> .Wrap all your body content inside a <main>...</main> as this solves the accessibility issue in your code.

  .body {
      display:grid;
      place-items:center;
      min-height:100%;
  }
  

  The code above will help with centering the content and providing a much cleaner code

  • As regards the Card-Icon. If you decide to use a Flex or Grid Layout for the Card Design. Adding margin-left: auto to the card-icon should push it to the extreme right. Example

  .card{
      display:grid;
      gap:2rem;
  }
  .card__icon{
      margin-left:auto;
  }
  

  • To solve the issue of the responsive design. Change the media-queries to adjust when the 4 Cards can no longer be visible on a large screen @media (min-width: 1100px){ }.

  • Extra Tip: Check out BEM for better naming of classes and practice using order measurement units such as rem em % as it boosts responsive design

  I hope you these comments useful! 😄 And I was able to answer your questions

  Happy coding!

  1

  Marked as helpful