faq-accordion/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
  <link rel="stylesheet" href="styles/main.css">
  <script src="scripts/index.js" defer></script>
  <title>Frontend Mentor | FAQ accordion</title>

</head>
<body>

  <main>
  <img src="./assets/images/background-pattern-desktop.svg" alt="Background Image" class="background-image">
    <article class="faq-container">
      <header class="main-header">
        <img src="./assets/images/icon-star.svg" alt="Violet star icon"><h1>FAQs</h1>
      </header>
      <section class="faq-section">
        <header tabindex="0">
          <h2>What is Frontend Mentor, and how will it help me?</h2>
          <img src="./assets/images/icon-minus.svg" alt="a toggle button" class="toggle_answer" id="q1">
        </header>
        <p class="answer visible">
          Frontend Mentor offers realistic coding challenges to help developers improve their
          frontend coding skills with projects in HTML, CSS, and JavaScript. It's suitable for
          all levels and ideal for portfolio building.
        </p>
      </section>
      <hr class="separator">
      <section class="faq-section">
        <header tabindex="0">
          <h2>Is Frontend Mentor free?</h2>
          <img src="./assets/images/icon-plus.svg" alt="a toggle button" class="toggle_answer">
        </header>
        <p class="answer">Yes, Frontend Mentor offers both free and premium coding challenges, with the free
          option providing access to a range of projects suitable for all skill levels.
        </p>
      </section>
      <hr class="separator">
      <section class="faq-section">
        <header tabindex="0">
          <h2>Can I use Frontend Mentor projects in my portfolio?</h2>
          <img src="./assets/images/icon-plus.svg" alt="a toggle button" class="toggle_answer">
        </header>
        <p class="answer">Yes, you can use projects completed on Frontend Mentor in your portfolio.
          It's an excellent way to showcase your skills to potential employers!
        </p>
      </section>
      <hr class="separator">
      <section class="faq-section">
        <header tabindex="0">
          <h2>How can I get help if I'm stuck on a Frontend Mentor challenge?</h2>
          <img src="./assets/images/icon-plus.svg" alt="a toggle button" class="toggle_answer" id="q5">
        </header>
        <p class="answer">
          The best place to get help is inside Frontend Mentor's Discord community. There's a help
          channel where you can ask questions and seek support from other community members.
        </p>
      </section>

    </article>
    
  </main>
  <footer class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" rel="noopener noreferrer">Frontend Mentor</a>. 
    Coded by <a href="https://www.linkedin.com/in/olasokolek/" target="_blank" rel="noopener noreferrer">Ola Sokołek</a>.
  </footer>
</body>
</html>