FAQ Page Design in HTML with Source Code

This HTML & CSS source code helps you to create a responsive FAQ page design for your website. It comes with an accordion-style design, which allows users to view the answers to their questions by clicking on the corresponding questions.

Moreover, you can easily integrate this code into your web/app project for designing engaging and user-friendly FAQ sections.

How to Create FAQ Page Design Using HTML and CSS

1. First of all, load the Font Awesome CSS by adding the following CDN link into the head tag of your HTML document.

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'>

2. Create the basic HTML structure. Include the necessary HTML tags for the main content, sections, and individual FAQ items as follows:

<main>
  <section class="card">
    <!-- cube img -->
    <img src="https://raw.githubusercontent.com/MizAndhre/FAQ-accordion-card/2ff2a02d093554f14d0390a409e825669313a16e/images/illustration-box-desktop.svg" alt="Box" class="card__box" />
    <!-- Images -->
    <div class="card__img">
      <!-- mobile -->
      <img class="card__img-mobile" src="https://raw.githubusercontent.com/MizAndhre/FAQ-accordion-card/2ff2a02d093554f14d0390a409e825669313a16e/images/illustration-woman-online-mobile.svg" alt="Woman online Mobile" />
      <!-- desktop -->
      <img class="card__img-desktop" src="https://raw.githubusercontent.com/MizAndhre/FAQ-accordion-card/2ff2a02d093554f14d0390a409e825669313a16e/images/illustration-woman-online-desktop.svg" alt="Woman online desktop" />
    </div>

    <!-- Text -->
    <div class="card__text">
      <h1>FAQ</h1>

      <div class="accordion">
        <!-- item 1 -->
        <div class="accordion__item">
          <button class="accordion__title">
            How many team members can I invite?
          </button>

          <div class="accordion__collapse collapse">
            <div class="accordion__text">
              <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>
            </div>
          </div>
        </div>
        <!-- item 2 -->
        <div class="accordion__item">
          <button class="accordion__title">
            What is the maximum file upload size?
          </button>

          <div class="accordion__collapse collapse">
            <div class="accordion__text">
              No more than 2GB. All files in your account must fit your
              allotted storage space.
            </div>
          </div>
        </div>
        <!-- item 3 -->
        <div class="accordion__item">
          <button class="accordion__title">
            How do I reset my password?
          </button>

          <div class="accordion__collapse collapse">
            <div class="accordion__text">
              Click “Forgot password” from the login page or “Change
              password” from your profile page. A reset link will be emailed
              to you.
            </div>
          </div>
        </div>
        <!-- item 4 -->
        <div class="accordion__item">
          <button class="accordion__title">
            Can I cancel my subscription?
          </button>

          <div class="accordion__collapse collapse">
            <div class="accordion__text">
              Yes! Send us a message and we’ll process your request no
              questions asked.
            </div>
          </div>
        </div>
        <!-- item 5 -->
        <div class="accordion__item">
          <button class="accordion__title">
            Do you provide additional support?
          </button>

          <div class="accordion__collapse collapse">
            <div class="accordion__text">
              Chat and email support is available 24/7. Phone lines are open
              during normal business hours.
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

<footer>
  <div class="attribution">
    Challenge by
    <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by
    <a href="https://www.frontendmentor.io/profile/MizAndhre" target="_blank">Andhre</a>.

    <div class="icons">
      <a href="https://github.com/MizAndhre" target="_blank" aria-label="Github">
        <i class="fab fa-github"></i>
      </a>
      <a href="https://codepen.io/mizandhre" target="_blank" aria-label="Codepen">
        <i class="fab fa-codepen"></i>
      </a>
    </div>
  </div>
</footer>

3. Now, add styles to enhance the visual appeal of your FAQ page. Customize colors, fonts, and layout according to your preference. The following CSS code includes styles for both mobile and desktop views.

@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap");

:root {
  --textBlue: hsl(238, 29%, 16%);
  --textRed: hsl(14, 88%, 65%);
  --textVeryDarkBlue: hsl(237, 12%, 33%);
  --textDarkBlue: hsl(240, 6%, 50%);
  --gradientViolet: hsl(273, 75%, 66%);
  --gradientBlue: hsl(240, 73%, 65%);
  --dividerGray: hsl(240, 5%, 91%);
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Kumbh Sans", sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  background: linear-gradient(var(--gradientViolet), var(--gradientBlue));
}

main {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  background-color: #fff;
  border-radius: 2.5rem;
  min-width: 33rem;
  max-width: 92rem;
  margin: 0 2.5rem 6rem;
  padding: 0 2.3rem 4.8rem;
  background-image: url("https://raw.githubusercontent.com/MizAndhre/FAQ-accordion-card/2ff2a02d093554f14d0390a409e825669313a16e/images/bg-pattern-mobile.svg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 24rem;
}

.card__box {
  display: none;
}

.card__img {
  position: relative;
}

.card__img-mobile {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-60%);
  display: block;
  width: 100%;
  height: auto;
  max-width: 24rem;
}

.card__img-desktop {
  display: none;
}

.card__text {
  margin-top: 12.9rem;
}

h1 {
  margin: 0;
  padding-bottom: 1.5rem;
  font-size: 3.3rem;
  font-weight: 700;
  text-align: center;
  color: var(--textBlue);
}

.accordion__item {
  border-bottom: 0.1rem solid var(--dividerGray);
}

.accordion__item h2 {
  margin: 0;
}

.accordion__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.45rem 0.5rem;
  border: none;
  background: none;
  font-family: "Kumbh Sans", sans-serif;
  font-size: 1.4rem;
  color: var(--textVeryDarkBlue);
  text-align: left;
  transition: all 300ms ease-in-out;
}

.accordion__title:focus,
.accordion__title:focus-visible {
  z-index: 3;
  outline: solid rgba(255, 146, 113, 0.5);
  box-shadow: 0 0 0.4rem 0.4rem rgba(161, 72, 45, 0.25);
  border-radius: 0.3rem;
}

.accordion__title:hover {
  cursor: pointer;
  color: var(--textRed);
}

.accordion__title::after {
  content: "";
  display: block;
  width: 1rem;
  height: 0.6rem;
  background-image: url("https://raw.githubusercontent.com/MizAndhre/FAQ-accordion-card/2ff2a02d093554f14d0390a409e825669313a16e/images/icon-arrow-down.svg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 300ms ease-in-out;
}

.accordion__text {
  text-align: left;
  padding: 0.5rem 3rem 2.2rem 0.5rem;
  line-height: 1.5;
  color: var(--textDarkBlue);
}

/* JS Classes */
.accordion__title.open {
  font-weight: 700;
  color: var(--textBlue);
}

.accordion__title.open::after {
  transform: rotate(180deg);
}

.accordion__collapse.collapse {
  display: none;
}

.accordion__collapse.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 1s ease;
}

.accordion__collapse.open {
  display: block;
}

/* DESKTOP STYLE */
@media (min-width: 56em) {
  .card {
    position: relative;
    display: flex;
    padding: 6.1rem 9.4rem 8.4rem 0;
    margin: 0;
    background-image: url("https://raw.githubusercontent.com/MizAndhre/FAQ-accordion-card/2ff2a02d093554f14d0390a409e825669313a16e/images/bg-pattern-desktop.svg");
    background-size: 100%;
    /* background-position: -73rem center; */
    background-position: -53rem -28rem;
  }

  .card__box {
    display: block;
    position: absolute;
    z-index: 1;
    top: 57%;
    left: 0;
    transform: translateX(-50%) translateY(-50%);
  }

  .card__img,
  .card__text {
    flex: 1;
  }

  .card__img {
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-right: 9.2rem;
  }

  .card__img-mobile {
    display: none;
  }

  .card__img-desktop {
    display: block;
    max-width: 47.2rem;
    transform: translateX(-8.4rem);
  }

  .card__text {
    margin-top: 0;
  }

  h1 {
    padding-bottom: 2.1rem;
    text-align: left;
  }

  .accordion__title {
    font-size: 1.5rem;
  }

  .accordion__text {
    line-height: 1.4;
    padding: 0.5rem 3rem 2rem 0.5rem;
  }
}

/* FOOTER */
.attribution {
  text-align: center;
  font-size: 1.5rem;
  padding-bottom: 2rem;
  color: var(--dividerGray);
}

.attribution a {
  color: #fff;
  text-decoration: none;
  transition: color 200ms ease-in-out;
  font-weight: 700;
}

.attribution a:hover {
  color: var(--textRed);
}

.icons i {
  margin-top: 1rem;
  font-size: 2.5rem;
  padding-right: 1rem;
}

4. Finally, integrate the JavaScript code to add interactivity to your FAQ page. This code controls the accordion effect, allowing questions to expand and collapse smoothly when clicked.:

const accordionBtns = document.querySelectorAll(".accordion__title");

accordionBtns.forEach((button) => {
  button.addEventListener("click", (event) => {
    let accCollapse = button.nextElementSibling;

    if (!button.classList.contains("collapsing")) {
      // open accordion item
      if (!button.classList.contains("open")) {
        accCollapse.style.display = "block";
        let accHeight = accCollapse.clientHeight;

        setTimeout(() => {
          accCollapse.style.height = accHeight + "px";
          accCollapse.style.display = "";
        }, 1);

        accCollapse.classList = "accordion__collapse collapsing";

        setTimeout(() => {
          accCollapse.classList = "accordion__collapse collapse open";
        }, 300);
      }
      //close accordion item
      else {
        accCollapse.classList = "accordion__collapse collapsing";

        setTimeout(() => {
          accCollapse.style.height = "0px";
        }, 1);

        setTimeout(() => {
          accCollapse.classList = "accordion__collapse collapse";
          accCollapse.style.height = "";
        }, 300);
      }

      button.classList.toggle("open");
    }
  });
});

That’s all! hopefully, you have successfully created the FAQ Page Design using this HTML & CSS Source Code. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.