Solution : Live Site URL
Solution submitted at Frontend Mentor - Submission link
This is a solution to the FAQ accordion card challenge on Frontend Mentor
Your challenge is to build out this FAQ accordion card and get it looking as close to the design as possible.
You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
Your users should be able to:
- View the optimal layout for the component depending on their device's screen size
- See hover states for all interactive elements on the page
- Hide/Show the answer to a question when the question is clicked
- Semantic HTML5 markup
- CSS Variables
- CSS Flexbox
- CSS Grid
- JavaScript
Background Manipulation using CSS : CSS has a lot of properties to adjust and manipulate background images, I am yet to figure out all of them properly especially when used together, they feel a little overwhelming.
Image manipulation with responsiveness is still very challenging to me. This challenge required positioning some elements with negative properties which took me more time than it should. I struggled with positioning the background pattern image properly for all screen widths, for the two expected screen sizes it works fine but somewhere in between it does not retain the expected position.
- Final challenge screenshot(s) (desktop and mobile)