Design comparison
Solution retrospective
I found putting a color on top of the photo the hardest but was able to fix by wrapping the image in another div and giving that div a background color. I had a hard time making the photo and business card info the same height in desktop. I used grid and set the height and width to 100% and fixed it.
Overall, this was a fun project and was proud that I fixed some problems that I was having.
If anyone has the time to look at my code do you have any advice as a way to come up with the same solution differently? Or by writing shorter code? Thank you.
Community feedback
- @correlucasPosted about 2 years ago
Hello Lisa, congratulations for your solution!
Answering your question:
A quick way to reach the same result or better for the image color is just applying
mix-blend-mode: multiply
and manage the color blend with the opacity values asopacity: 82%
in the img selector or the div you've the photo. Note that this blend effect works only if you import the image as a<picture>
or<img>
to make the color blend with the element under it.Remove all settings you've used to make the color in the effect, like the color and the opacity you've changed, add the purple color to be the background on the container:
@media (min-width: 1280px) .containter { display: grid; grid-template-columns: 1fr 1fr; width: 90%; max-width: 1200px; background-color: hsl(277, 64%, 61%); }
Add the
mix-blend-mode
to the img selector:img { mix-blend-mode: multiply; opacity: 82%; }
Hope this helps, happy coding!
0 - @tiago-jv0Posted about 2 years ago
Hello Lisa, Congrats on solving this challenge !!
I saw you code and here are some recommendations to improve it :
- Inside your h1 tag you used
span
to style the insights word, however, that word is an important one and should be emphasized to the user, a better solution here would be to user thestrong
tag - You used 2 images tag to switch between the mobile and desktop header, i don't need that, in fact, the best way to go about images that switch between device's viewport is to use the
picture
tag, you can see more details about this tag here : Picture Tag - Give a chance to BEM ( Block Element Modifier ) class naming convention, it will improve the readability of your code and give more context about the elements on your markup, you can learn more about it here : BEM Methodology
- You should use landmark elements to improve your site's acessibility like
main
andsection
I hope these tips will help you, keep on coding and you will become a great developer !!
0 - Inside your h1 tag you used
Please log in to post a comment
Log in with GitHubJoin 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