Design comparison
SolutionDesign
Solution retrospective
Any suggestions for the backgroung?
Community feedback
- @atmahanaPosted about 1 year ago
Hi there. Well done on completing the challenge!
I have done the same challenge and I would suggest the following 👇
index.html
<div class="card__image"> <img class="image-main" src=IMG_URL alt="Woman illustration"> <img class="image-box" src=IMG_URL alt="Box illustration"> </div>
styles.css
.card__image { position: relative; } .image-main, image-box { position: absolute; }
and use any of the
top, bottom, left, right
property to adjust the final position of the image.Read more about absolute positioning here and on the docs.
I do also noticed that your solution is not responsive. If you are having trouble in making a responsive layout, you can watch Kevin Powell videos on the topic. He is great at explaining stuffs through video.
Keep up the good work 💪
Marked as helpful1
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