responsive landing page using CSS Flex

Community feedback

• 

  Travolgi 🍕•31,300

  @denielden

  Posted over 3 years ago

  Hi Carlos, good job!

  I had a look at your solution and I have a few suggestions for you:

  • try to use background-blend-mode for image. Look here -> blend mode
  • To center the cards on the page try using Flexbox, it can help you better: give the flexbox and height properties to the body and remove all margin from the .container class.
  • Note: Flexbox aligns to the size of the parent container. You can use the vh measurement for the height... Viewport Height handles the sizing of an element in relation to the height of the browser window.

  In the end the mobile design not work.

  Hope this help ;) And keep it up!

  01

  Marked as helpful
• 

  Mushfiq Rahman•300

  @Ayon95

  Posted over 3 years ago

  You can wrap the image in a <div> and use a ::before pseudo-element to create the image overlay.

  <div class="image-container">
     <img src="" alt="">
  </div>
  

  .image-container {
    position: relative;
  }
  
  .image-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: hsl(274, 100%, 34%);
    opacity: 0.5;
    filter: brightness(80%);
  }
  

  These are the styles that I used to create the purple image overlay.

  02

  Marked as helpful