Card component using HTML and CSS Flex

Community feedback

• 

  Manmohan Singh•100

  @Manmohan7Posted over 3 years ago

  Hi Pranjal

  Regarding the color of the image, you can mix-blend-mode (reference).

  Few key points -

  1. Indent your code properly, helps you and others to understand it better.

  2. Colors used in the challenges are mentioned in style-guide.md file

  3. There are 2 readme files with the starter code. Readme.md is for understanding the project while readme-template.md is the template that can be edited and published on github with the project. I encourage you to read those files.

  Cheers!

  Marked as helpful

  1
• 

  Siddhesh Kamble•330

  @Sk7867Posted over 3 years ago

  Make image purple by wrapping overlay inside image, like this:

  <div class="card image">
        <div class="overlay"></div>
  </div>
  
  .image {
      background: url(images/image-header-desktop.jpg) no-repeat center/cover;
      min-width: 50%;
      border-radius: 0 10px 10px 0;
  
  background-color: hsla(277, 64%, 61%, 0.6);
      height: 400px;
      border-radius: 0 10px 10px 0;
  

  By setting image through CSS you can change images using media queries. The above .image class is for laptop view. for mobile view:

  background: url(images/image-header-mobile.jpg) no-repeat center/cover;
      height: 400px;
      border-radius: 10px 10px 0 0;
  }
  

  This way you won't have to give two <img> instead use one and change background: url().

  Also don't use body as your container, instead have separate <div class="container"> inside body.

  I hope this helps you, Happy Coding! 😄

  Marked as helpful

  1