Skip to content
OverviewSolutions
25
Comments
3
SuperSet1607
@mohit1607

All comments

  • SuperSet1607•310
    @mohit1607Posted over 2 years ago

    Hi Gavin You got it almost perfect. I assume you are working with Laptop so, you from your side done well, you can use an extension called Perfect-pixel to imitate the design as same, @ApplePieGiraffe recommended it to me. And You can use font-size in "rems" instead of "px" followed by declaring a font-size percentage. Default font-size is 16 px so you alter set that and use it in "rems". Another minor things I noticed are html issues that You did'nt used heading in sections, I will not go into details but you can see your accessibility reports and improve them. I think for UI, you did a great job.

    1
  • ApplePieGiraffe•30,545
    @ApplePieGiraffeSubmitted over 2 years ago

    Hey, everybody! 👋

    This was a fun challenge in which I learned how to use and style the <details> and <summary> HTML elements.

    I also added a bobbing animation to the floating cube (with a small touch from the drop-shadow CSS function) and animated the linear-gradient background with this helpful tool.

    I'm quite happy with the result! 😊

    Any feedback on both the design and code is welcome and appreciated! 😃

    Happy coding! 😁

    EDIT: For some reason, the details marker on each of the FAQs is showing up in the screenshot (even though I set their display to none) but they're gone on the actual page, as far as I can tell.

    Pure CSS FAQ Accordion Card With Sweet CSS Animations

    19
    SuperSet1607•310
    @mohit1607Posted over 2 years ago

    hi @ApplePieGiraffe your work with sass is amazing but I have one question in mind that how do you exactly have idea about the perfect size like mention design ? Cuz when I try I only declare the % of size of 100% of the font size and then use them as rem but kind of never achieving the same results as metion design. Please help I will appreciate.

    1
  • SuperSet1607•310
    @mohit1607Posted over 2 years ago

    Hi D. Jaime Blockton great work. It's amazing that you made the card almost same as mentioned. I want to bring your attention also to the html and accessibility issues. The report is telling that you have 9 accessibility issues. One of them is including the content in <main></main> tag and another is including alternet text in image tag. i.e like that <img src="./anything" alt="imgaeName" > . That's it . You are awesome keep doing the exclellent work.

    Marked as helpful
    0