Stats preview card component card

Community feedback

• 

  Atul kumar•200

  @AtulKumar0001Posted about 2 years ago

  To make your image exactly match the design preview, set the opacity to 0.75.

  .right-card img {

  opacity: 0.75;

  }

  and you can also use this to center your .container:-

  body {

  display: flex;
  
  justify-content: center;
  
  align-items: center;
  
  min-height: 100vh;
  
  width:100%;
  

  }

  .container{

  background-color:hsl(244, 38%, 16%);
  
  width:65%;
  
  margin:0 auto;  //To center your div from left and right
  
  display:grid;
  
  border-radius:5px;
  
  overflow:hidden;
  
  grid-template-columns: 1fr 1fr;
  

  }

  Marked as helpful

  0
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi,

  *Congrats on the first attempt you did good just a couple of small thing you can add the following media query:

  @media (768px) {
  .container {
      flex-direction: column-reverse;
      margin: 2rem;
      text-align: center;
  }
  
  .left-card {
      max-width: 100%;
      max-height: none;
  }
  
  .footer-words {
      flex-direction: column;
  }
  }
  

  You will almost always use flex-direction: column to stack content. One more thing on desktop remove the margin-top: 150px and add the following for the body:

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

  this is to center the card on the page and can be used for other challenges as well.

  Marked as helpful

  0
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hi again Murray =) Congratulations on completing this challenge!

  You’ve done really good work here putting everything together, I’ve some suggestions to improve the design:

  1.Improve the card overall look adding the rounded borders to the component and also the image using border-radius: 15px

  • Add rounded borders to the left side of the image with border-radius: 15px 0px 0px 15px;
  • Then do the same thing for the component but in the opposite borders border-radius: 0px 15px 15px 0px;

  2.To make your hero image have the same look and the color purple overlay, you need to use mix-blend-mode using the multiply one.The mix-blend-mode CSS property sites how an element's content should blend with the content of the element's parent and the element's background.

  Here’s how you can add this to your img selector: `img { mix-blend-mode: multiply; opacity: 84%;}

  ✌️ I hope this helps you and happy coding!

  0
• 

  Ahmed Kamel•1,190

  @hmadamkPosted about 2 years ago

  great solution a couple of notes about accessibility

  1. you must add an alt text to your image because screen reader will read that to blind people and if its not there it will read the src of the image which can be bothering for users, if your image is for decorating-perpose use an empty alt like so alt=""
  2. wrap your card inside of a main tag so it become more sematic and accessible
  3. add an h1 to your page add to the top of the page then do

  h1{
    position:absolute
   top:-100vmax;
  }
  

  this helps people with screen readers to better understand what is the point of you page and it's visually hidden so a win win

  0