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 accordion-card

Krishna 195

@krishna-nayak

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


I need help, something is wrong in my code ...plz, check and make it correct.

Community feedback

P
tediko 6,580

@tediko

Posted

Hello, Krishna! 👋

Good effort on this challenge! Everything works good and responds well. Take a look at:

  • Change the alt attributes for the .woman-image, .box, as they don't add any extra context for screen reader users. Since your images are decorative your alt text should be provided empty (alt="") so that they can be ignored by assistive technologies.
  • Your container stretch after .question tab is open on resolutions bigger than 1440px
  • Try not to repeat your HTML code with image for each arrow. Easier way around is to use pseudo element ::before on your .question element. Set it to position: relative and your pseudo element as position: absolute. Put your image using content: url('image.jpg').

Good luck with that, have fun coding! 💪

1

Krishna 195

@krishna-nayak

Posted

@tediko I really appreciate your help, Thank you.

0
shashank 225

@shashankrk46

Posted

https://accord-card.netlify.app/ hi u can go through my code

0

Krishna 195

@krishna-nayak

Posted

https://youtu.be/FboXxLxg8eo watch this video you might find a great idea to solve this such problem.👨🏻‍💻 happy coding.😁

0

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