Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

FAQ page

Sevich-Kah 130

@Sevich-Kah

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Any suggestions for the backgroung?

Community feedback

@atmahana

Posted

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 helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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