Responsive preview card using html & css

Community feedback

• 

  Hyron•5,870

  @hyrongennike

  Posted over 2 years ago

  to answer your first question you can add the following to add the overlay just remember to use the correct shade of purple.

  .photo {
      position: relative;
  }
  
  .photo::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      background: purple;
      width: 100%;
      height: 100%;
      opacity: 80%;
      mix-blend-mode: multiply;
  }
  

  you can remove the width and height on the image and add the following.

  img {
      width: 100%;
  }
  

  Also add the following there's a lot work that still needs to be done but this should send you in the right direction.

  body {
      background-color: hsl(233, 47%, 7%);
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  
  .flex-container {
      max-width: 1024px;
  }
  

  00

  Marked as helpful
• 

  Hyron•5,870

  @hyrongennike

  Posted over 2 years ago

  Hi @DrStranger1,

  Good job on your first attempt of the challenge

  If you mean using a table for layout then it's a big no. That used to be a thing in past and it's not responsive. Also there's no reason to use it as you have flexbox and grid which makes this easier. below is a link to learn flexbox in a fun way.

  https://flexboxfroggy.com/

  This is if you want to learn CSS grid. https://cssgridgarden.com/

  You can also remove the margin on the .flex-container to center the card.

  Don't rush your learning process and in the process pick up bad practices

  There are a lot of tutorial on YouTube, if you click on resource in the menu there are tutorials take your time to learn.

  00

  Marked as helpful