FAQs-project/index.html at main · manigharehgozli/FAQs-project · 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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./output.css" />
  </head>
  <body>
    <div class="background w-screen h-screen overflow-hidden relative">
      <img
        src="/images/background-pattern-desktop.svg"
        alt=""
        class="w-screen background-image"
      />

      <div
        class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-md md:max-w-[35rem]"
      >
        <div
          class="bg-white shadow-md rounded-xl w-full h-auto md:h-[30rem] overflow-y-auto"
        >
          <div class="p-6 md:p-8 w-full min-h-[auto] md:min-h-[30rem]">
            <div class="flex items-center gap-4 mb-6 md:mb-8">
              <img
                src="/images/icon-star.svg"
                alt="star"
                class="size-7 md:w-8 md:h-8"
              />
              <h1 class="text-3xl md:text-[40px] font-bold">FAQs</h1>
            </div>

            <div class="space-y-4 md:space-y-6">
              <div class="flex justify-between items-start gap-1">
                <h4
                  class="font-semibold text-left flex-1 hover:text-purple-600 cursor-pointer section-title text-base md:text-lg"
                >
                  What is Frontend Mentor, and how will it help me?
                </h4>
                <img
                  src="/images/icon-minus.svg"
                  alt="close button"
                  class="size-6 shrink-0 cursor-pointer button-icon"
                />
              </div>
              <div class="section-description">
                <p class="leading-relaxed text-sm md:text-base">
                  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="pb-2">
                <div class="flex justify-between items-start gap-1">
                  <h4
                    class="font-semibold text-left flex-1 hover:text-purple-600 cursor-pointer section-title text-base md:text-lg"
                  >
                    Is Frontend Mentor free?
                  </h4>
                  <img
                    src="/images/icon-plus.svg"
                    alt="open button"
                    class="size-6 shrink-0 cursor-pointer button-icon"
                  />
                </div>
                <div class="mt-1 hidden section-description">
                  <p class="leading-relaxed text-sm md:text-base">
                    Yes — Most of its coding challenges are available without
                    paying, but some premium challenges and extra features
                    require a Pro subscription.
                  </p>
                </div>
              </div>

              <div class="pb-2">
                <div class="flex justify-between items-start gap-1">
                  <h4
                    class="font-semibold text-left flex-1 hover:text-purple-600 cursor-pointer section-title text-base md:text-lg"
                  >
                    Can I use Frontend Mentor projects in my portfolio?
                  </h4>
                  <img
                    src="/images/icon-plus.svg"
                    alt="open button"
                    class="size-6 shrink-0 cursor-pointer button-icon"
                  />
                </div>
                <div class="mt-1 hidden section-description">
                  <p class="leading-relaxed text-sm md:text-base">
                    Yes — you can use Frontend Mentor projects in your
                    portfolio. The official Frontend Mentor FAQ says you're
                    welcome to include anything you build from their challenges.
                  </p>
                </div>
              </div>

              <div class="pb-2">
                <div class="flex justify-between items-start gap-1">
                  <h4
                    class="font-semibold text-left flex-1 hover:text-purple-600 cursor-pointer section-title text-base md:text-lg"
                  >
                    How can I get help if I'm stuck on a challenge?
                  </h4>
                  <img
                    src="/images/icon-plus.svg"
                    alt="open button"
                    class="size-6 shrink-0 cursor-pointer button-icon"
                  />
                </div>
                <div class="mt-1 hidden section-description">
                  <p class="leading-relaxed text-sm md:text-base">
                    If you're stuck on a Frontend Mentor challenge, the official
                    way to get help is by asking in their Discord community
                    where thousands of developers can answer questions.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="/src/script.js"></script>
  </body>
</html>