Frontend Mentor - FAQ accordion card solution

This is a solution to the FAQ accordion card challenge on Frontend Mentor.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Mobile-first workflow

What I learned

• During this project I learned more about the 'before' and 'after' pseudo-elements and how to use them to stylize the images in the FAQ card.

  ::before { } 
  
  ::after { }

• Another great feature I learned was developing the show/hide functionality of the accordion using only CSS [input=radio]

  <div>
    <input id="item1" type="radio">
    <label for="item1">Label Name</label>
    <div>
        <p>Message</p>
    </div>
  </div>

That's it for this project. Thanks for taking a peek. Bye!

- Caio Luna