Responsive Landing Page using Flex

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  To the center the main on the page using flexbox or grid instead of margin:

  • USING FLEXBOX: add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body

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

  • USING GRID: min-height:100vh; display: grid place-items: center to the body

  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Give .image a background-color of soft violet and the img a width and height of 100%, mix-blend-mode: multiply, object-fit: cover and opacity:0.8.

  .image{
  background-color: hsl();
  }
  img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  opacity: 0.8;
  }
  

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  0
• 

  Shashikant•430

  @shashikantdev3Posted over 1 year ago

  Hello there 👋. Good job on completing the challenge! Here are some suggestions regarding your code that may be of interest to you.

  You can achieve that soft purple tint on the image using background blend mode. Below is the link for a tutorial in which Kevin explain it, you may want to watch it.

  CSS Blending Modes - By Kevin Powell

  I hope you find my comment useful 😄 Nevertheless, the solution you submitted is great!

  🎉Happy coding

  0