Submitted about 2 years ago

FAQ Accordion Card

Roxanne•260

@rox-stahl

Preview site View code

This is a solution for...FAQ accordion card

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I thought that I would have issues with the JavaScript, but the images were difficult for me. What can you recommend for me to get the desktop to appear "layered" with the box on the outside of the card?

Thank you in advance for all of your ideas and suggestions!

Community feedback

Ash•50

@Marylu6Posted about 2 years ago

i m no master coder but i found a guy around here that use a <picture> <source srcset="/media/cc0-images/surfer-240-200.jpg" atl="this is what you see first"media="(min-width: 800px)"> <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="this is what you see when you shrink"> and he combine it with this CSS

.hero-images { width: 100%; height: 100%; display: flex; flex-flow: column nowrap; align-items: center; margin-bottom: 7rem; }

.hero { position: absolute; top: -7rem; width: min(80%, 255px); }

.box { display: none; }

this is half of the html

<picture class="box">
  <img src="images/illustration-box-desktop.svg" alt="" aria-hidden="true" />
</picture>



<section class="hero-images">

  <picture class="hero">
    <source media="(max-width: 900px)" srcset="images/illustration-woman-online-mobile.svg" />
    <img src="images/illustration-woman-online-desktop.svg" alt="" aria-hidden="true" />
  </picture>


</section>



<section class="accordion-container">
  <h1>FAQ</h1>

  <div class="accordion">

    <details>
      <summary>
        How many team members can I invite?
        <img src="images/icon-arrow-down.svg" alt="" aria-hidden="true" />
      </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>
    <details>
      <summary>
        What is the maximum file upload size?<img src="images/icon-arrow-down.svg" alt="" aria-hidden="true" />
      </summary>
      <p>
        No more than 2GB. All files in your account must fit your allotted
        storage space.
      </p>
    </details>
    <details>
      <summary>
        How do I reset my password?<img src="images/icon-arrow-down.svg" alt="" aria-hidden="true" />
      </summary>
      <p>
        Click “Forgot password” from the login page or “Change password”
        from your profile page. A reset link will be emailed to you.
      </p>
    </details>
    <details>
      <summary>
        Can I cancel my subscription?<img src="images/icon-arrow-down.svg" alt="" aria-hidden="true" />
      </summary>
      <p>
        Yes! Send us a message and we’ll process your request no questions
        asked.
      </p>
    </details>
    <details>
      <summary>
        Do you provide additional support?<img src="images/icon-arrow-down.svg" alt="" aria-hidden="true" />
      </summary>
      <p>
        Chat and email support is available 24/7. Phone lines are open
        during normal business hours.
      </p>
    </details>
  </div>
</section>

</main> </body>

for the life of me i cant understand how the thing does the cut on the image and now i cant find the guy. By the way i heard in some community of programmers that you can copy paste code and that ok but i dont know why copy paste something that you dont understand fully XD what do you think?

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord