faq-accordion/index.html at main · DalaScript/faq-accordion · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!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">

  <title>FAQ accordion | Frontend Mentor</title>
  <link rel="stylesheet" href="./assets/styles/styles.css">
</head>

<body>
  <main>
    <picture>
      <source media="(min-width: 648px)" srcset="./assets/images/background-pattern-desktop.svg">
      <img class="bg-img" src="./assets/images/background-pattern-mobile.svg" alt="background pattern for desktop">
    </picture>
    <article class="faq-card">
      <section class="faq-card__title-container">
        <img class="faq-card__logo" src="./assets/images/icon-star.svg" alt="star icon">
        <p class="faq-card__title">FAQs</p>
      </section>
      <section class="faq-card__content">
        <div class="faq-card__group">
          <button class="faq-card__btn">
            What is Frontend Mentor, and how will it help me?<img class="faq-card__icon" src="./assets/images/icon-minus.svg" alt="plus icon">
          </button>
          <p class="faq-card__answer faq-card__answer--active">
            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>
        </div>
        <div class="faq-card__line"></div>
        <div class="faq-card__group">
          <button class="faq-card__btn">
            Is Frontend Mentor free?<img class="faq-card__icon" src="./assets/images/icon-plus.svg" alt="plus icon">
          </button>
          <p class="faq-card__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>
        </div>
        <div class="faq-card__line"></div>
        <div class="faq-card__group">
          <button class="faq-card__btn">
            Can I use Frontend Mentor projects in my portfolio?<img class="faq-card__icon" src="./assets/images/icon-plus.svg" alt="plus icon">
          </button>
          <p class="faq-card__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>
        </div>
        <div class="faq-card__line"></div>
        <div class="faq-card__group">
          <button class="faq-card__btn">
            How can I get help if I'm stuck on a challenge?<img class="faq-card__icon" src="./assets/images/icon-plus.svg"
              alt="plus icon">
          </button>
          <p class="faq-card__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>
        </div>
      </section>
    </article>
  </main>
  <script src="./assets/script/script.js"></script>
</body>

</html>