vigilant-octo-potato/index.html at main · MonstersInc-sudo/vigilant-octo-potato · 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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!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>Frontend Mentor | FAQ accordion</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
    <style>
      .attribution {
        font-size: 11px;
        text-align: center;
      }
      .attribution a {
        color: hsl(228, 45%, 44%);
      }
    </style>
  </head>
  <body>
    <script src="script.js"></script>
    <div class="faq-container">
      <div class="faq">
        <img src="./assets/images/icon-star.svg" />
        <h1>FAQs</h1>
      </div>
      <section>
        <div class="accordion-container">
          <div class="accordion-head">
            <h2>What is Frontend Mentor, and how will it help me?</h2>
            <img src="./assets/images/icon-plus.svg" />
            <img src="./assets/images/icon-minus.svg" />
          </div>
          <div class="accordion-content">
            <p>
              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>
          <hr />
        </div>
        <div class="accordion-container">
          <h2>Is Frontend Mentor free?</h2>
          <img src="./assets/images/icon-plus.svg" />
          <img src="./assets/images/icon-minus.svg" />
          <div>
            <p>
              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>
          <hr />
        </div>
        <div class="accordion-container">
          <h2>Can I use Frontend Mentor projects in my portfolio?</h2>
          <img src="./assets/images/icon-plus.svg" />
          <img src="./assets/images/icon-minus.svg" />
          <div>
            <p>
              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>
          <hr />
        </div>
        <div class="accordion-container">
          <h2>
            How can I get help if I'm stuck on a Frontend Mentor challenge?
          </h2>
          <img src="./assets/images/icon-plus.svg" />
          <img src="./assets/images/icon-minus.svg" />
          <div>
            <p>
              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>
        </div>
      </section>
    </div>

    <div class="attribution">
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by <a href="https://nicolaiellis.me/">Nicolai Ellis</a>.
    </div>
  </body>
</html>