This is a solution to the FAQ accordion card challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
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
- Live Site URL: https://my-faq-accordion.netlify.app)
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Media-queries
- How to use CSS pseudos and selectors more efficiently
- Using input state checked
To see how you can add code snippets, see below:
<h1>Some HTML code I'm proud of</h1>
input:checked ~ .hidden-div{
display: block;
margin-top: 10px;
}
- Website - Chibuzor Nwachukwu
- Frontend Mentor - (https://www.frontendmentor.io/profile/chibuzordev)