# Frontend Mentor - FAQ accordion card solution This is a solution to the [FAQ accordion card challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/faq-accordion-card-XlyjD0Oam). Frontend Mentor challenges help you improve your coding skills by building realistic projects. ### The challenge 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 ### Links - Solution URL: [Add solution URL here](https://your-solution-url.com) - Live Site URL: [Add live site URL here](https://your-live-site-url.com) ## My process Set up html and css with the information from the style guide. Wrote the html elements and the grid layout for the mobile design. Tried to build the accordion with heading elements and buttons to achieve accessibility, but after more research I found

and

are a better solution (see link below). Spent many hours trying to make the svg responsive, because I wasn't satisfied with the jump from the smaller mobile-svg for 375px wide screens to the larger desktop-svg for 1440px wide screens. And finally got both SVGs for desktop design to behave responsive. 🤗🤩💪 I learned sooo much again! I guess I was not supposed to do that but it was worth it! ### Built with - Semantic HTML5 markup - CSS custom properties - CSS Grid - Mobile-first workflow ### What I learned HTML/CSS only accordion with

and

. Should be accessible. Make SVG responsive, crop SVG (viewBox), drop-shadow for SVGs, multiple ways to embed a SVG. ### Useful resources Accordion: https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/ Shadows for SVG: https://css-tricks.com/adding-shadows-to-svg-icons-with-css-and-svg-filters/ SVG viewBox: https://www.youtube.com/watch?v=TBYJ2V1jAlA&ab_channel=KevinPowellKevinPowellBest%C3%A4tigt ## Author - Frontend Mentor - [@ellienndea](https://www.frontendmentor.io/profile/yourusername) - Twitter - [@ellienndea](https://www.twitter.com/yourusername) ## Acknowledgments CSS-tricks.com is a great ressource! Kevin Powell is really good at explaining css stuff and he has many helpful and interesting tutorials! Grace Snow tipped me into the right direction to get the 2nd desktop SVG to become responsive! Thank you! 🥰 # faq-accordion-card-main