Responsive Landing Page using Flex

Solution retrospective
Hello everyone! I hope I did this right?!
I was wondering if there was a more concise way of achieving that soft purple tint on the image (I used a z-index)?
I appreciate all feedback!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Hassiai
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
- @shashikantdev3
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
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord