Stats preview card component using HTML, CSS, Flexbox

Community feedback

• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello Alvin, great job with the solution it looks responsive and the layout is great, congratulations!

  If you don't mind, I would like to give you some suggestions.

  • I think that using an html is a better approach, for accesibility and for semantic purpouse, use background image when they really are background images. If you are struggling getting the effect with an html image, just think on wrapping it on a <div> and use that background color on the div to get the desired effect.

  • You should try getting your solution centered without using height: 120vh is moving your section to the bottom, instead of that, remove it and just use flexbox on the body to get everything center like this:

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

  Setting the body to a min-height: 100vh is the best way to get the desired effect on this type of challenges!

  Hope my feedback helps you, if you have any questions don't hesitate to ask, great work!

  Marked as helpful

  1

  ---

  

  Alvin•140

  @alvyynmPosted about 2 years ago

  @DavidMorgade Thank you so much.

  1. I was able to get the overlay effect using your guidance. It made it so easy! You can have a look 👉 https://codepen.io/alvyynm/full/BarXZMX
  2. Centering has been a bit challenging, so I have been using a .parent-container just for that. Thanks for the suggestion; I'll fix it.

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Alvin, congratulations for your new solution!

  Answering your question:Look that for SEO and search engine reasons isn’t a better practice import this product image with CSS (background-image) since this will make harder to the image be found. You can manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device (phone / computer) Here’s a guide about how to use picture: https://www.w3schools.com/tags/tag_picture.asp

  To make the overlay effect exact as the challenge design you can take a shortcut and instead of using a long code you can do it by aplying mix-blend-mode and managing the opacity to blend the colors:

  .image-container {
      width: 100%;
      height: 200px;
      background: linear-gradient(rgba(99, 18, 150, 0.6), rgba(99, 18, 150, 0.6)), url(../images/image-header-mobile.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      border-radius: 0.7rem 0.7rem 0 0;
      margin-bottom: 1.1rem;
  }
  

  Instead of this code just use (in this case you need the image inserted in the html as img or picture to make it work.

  img {
  mix-blend-mode: multiply;
  opacity: 75%;}
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Alvin•140

  @alvyynmPosted about 2 years ago

  @correlucas Hey Lucas, thank you!

  1
• 

  Neil Kanakia•300

  @neilk17Posted about 2 years ago

  Good work Alvin and nice display pic!

  One suggestion: On your parent-container, Instead of having height: 120vh; You could simply added a margin: 30vh auto; Since you have a height greater than 100% it isn't sized perfectly but the rest looks good!

  About the image background I was not sure what the best way to implement that was either but your solution is looking good!

  0

  ---

  

  Alvin•140

  @alvyynmPosted about 2 years ago

  @neilk17 Thank you. I have been having issues with aligning my .parent-container.

  0