Stats Preview Card Component, CSS, Flex and Grid

Community feedback

• 

  solitary_coder•1,000

  @kabir-afkPosted about 1 year ago

  Heyyy, good job on completing the challenge, regarding your query , apparently you can do such overlay effects on <div> only . . .so what you can do is wrap your image inside a <div> and use pseudo-classes like ::before and ::after, something like this

  HTML

  <div class="img-desktop">
          <img
            src="images/image-header-desktop.jpg"
            alt="Women talk in a meeting"
            width="450"
            height="355"
          />
        </div>
  

  CSS

  img{
    max-width: 100%; 
    max-height: 100%;
  }
  //when you wrap your img element inside another element like div , it gets easier to control your img dimensions this way, max-width and max-height thenn adhere to the resp dimensions of the container , here div
  
  .img-desktop {
    display: none;
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
    max-width: 450px;
    position: relative; 
  }
  
  .img-desktop::after{
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;
    height: 99%;
    width: 100%;
    background-color:var(--soft_violet);
    opacity: 0.5;
  }
  
  // pseudo class help you with the overlay effect
  

  Also prohibit using width and height attributes inside your html, it'll start hindering with the responsiveness sooner or later.

  It'll also be better if you make container <div> tags , and use appropriate BEM nomenclature if you can in your code , since it'll make your code more readable to others . . .

  Not that its related , but looking at your github profile I'd say that you start doing challenges which require JS, you've done enough HTML-CSS , time to level up, also start working either with CSS-frameworks like Bootstrap or Tailwind-CSS ,or with pre-processors like SASS . . .coz they'll make your life a lot eaiser , otherwise you'd regret later to have spent time on something as vague as css, besides the learning curve steepens when you come to JS , you can learn the best CSS practices while at it . . .what else . . . . keep grinding . . . 💪💪

  Marked as helpful

  0

  ---

  

  v•110

  @ughvopPosted about 1 year ago

  Thank you so much for the code and all the advices, the code works!

  Also appreciate pointing out that I'm living in my comfort zone lol, the next challenge will use a new framework or something @kabir-afk

  0

  

  solitary_coder•1,000

  @kabir-afkPosted about 1 year ago

  @ughvop Happy to help !!! 🥂

  0