/faq-accordion-card-solution

I learned how to use and style the <details> and <summary> HTML elements.

Primary LanguageSCSS

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

Users should be able to:

  • View the optimal layout depending on their device's screen size
  • See hover states for interactive elements

Screenshot

Links

My process

Built with

  • HTML
  • SCSS
  • Mobile workflow
  • Responsive

What I learned

I learned how to use and style the <details> and <summary> HTML elements and bobbing animation to the floating cube (with drop-shadow).

<details>
  <summary>How many team members can I invite</summary>
  <p>You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.</p>
</details>
@keyframes updown {
    0% {
        filter: drop-shadow(0 15px 15px rgba(0, 0, 0, .3));
        transform: translate(0);
    }
    50% {
        filter: drop-shadow(0 15px 15px rgba(0, 0, 0, .1));
        transform: translateY(-1rem);
    }
    100% {
        filter: drop-shadow(0 15px 15px rgba(0, 0, 0, .3));
        transform: translate(0);
    }
}

Continued development

For future projects I need to focus on using more advanced CSS to create effects.

Useful resources

Author