Stats Preview Card Component

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • The only heading in this component is the “Get insights that help your business grow” everything else will be wrapped in a paragraph element.

  • The statistics at the bottom **are a list **, so it should be built using an unordered List element.

  More Info:📚

  MDN <ul>: The Unordered List element

  • The images 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.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • To get the image to look like the FEM example, you are going to want to use the mix-blend-mode along with the multiply value and include a opacity with the value of 0.8.

  Code:

  img {
    opacity: 0.8;
    mix-blend-mode: multiply;
  }
  

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding!🎄🎁

  Marked as helpful

  1

  ---

  

  Luke Ramljak•180

  @lukeramljakPosted almost 2 years ago

  @vcarames I really appreciate that feedback, thank you!

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @lukeramljak

  I am glad that I was able to help out!

  Keep it up!

  0

  

  Luke Ramljak•180

  @lukeramljakPosted almost 2 years ago

  @vcarames I'd love if you could please check out the updated code, as I've updated it per your feedback. Very glad I could remove the annoying overlay - it now looks better. The spacing/sizing I can see are still off, and I should probably spend more time looking at it.

  Your code looks great. I like the use of multiple media queries spanning across multiple screen sizes, as well as the use of clamp for the font sizes. Very responsive, very nice.

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @lukeramljak

  Code looks a lot better!

  I would add an in between layout to make the transition from mobile to desktop layout. Since the image gets cut off during certain breakpoints (can’t tell where exactly since I’m viewing in my cellphone). Definitely play around with the layout.

  Thank you!

  1
• 

  👾 Ekaterine Mitagvaria 👾•7,600

  @catherineisonlinePosted almost 2 years ago

  Hey, for the image, I did something like this, I hope that helps:

  <div class="image-container">
  img class="main-image" src="images/image-header-mobile.jpg" alt="">
  </div>
  
  .image-container {
    display: inherit;
    position: relative;
    width: 100%;
    border-radius: 0 10px 10px 0;
    background-color: hsl(277, 64%, 61%);
  }
  .main-image {
    width: 100%;
    height: 100%;
    position: relative;
    background-size: cover;
    border-radius: 0 10px 10px 0;
    mix-blend-mode: multiply;
    opacity: 0.75;
  }
  
  

  IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🤩

  0