Frontend Mentor - FAQ accordion card solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

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

Screenshot

Links

• Github
• Live

My process

Built with

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

What I learned

I enjoyed the time spent on this project, it was worth it. For this project i decided to use html and css throughout, i could easily understand how to manipulate the card with js but I need to study more to grasp the concepts.

 <div class="fifth">
      <input type="checkbox" name="accordion" id="fifth">
      <div class="question">
        <label for="fifth">
          Do you provide additional support?
        </label>
        <span class="icon">
          <img src="./images/icon-arrow-down.svg" alt="">
        </span>
      </div>

input[type='checkbox']:checked + .question span {
    transform: rotate(180deg);
    transition: transform 0.4s ease-out;
}

Continued development

CSS Position CSS Transform HTML Mark up CSS Responsiveness

Author

• ikennarichard
• @ikennarichard

Acknowledgments

Ill like to thank all my mentors on Frontend Mentor for their inputs, i see myself getting better and its because of the time they took to go through my code and point areas i can improve on. Thank You guys so MUCH!