FAQ Page Design in HTML with Source Code

FAQ Page Design in Html with Source Code
Code Snippet:Frontend Mentor: FAQ Accordion Card
Author: Andhre
Published: November 10, 2023
Last Updated: November 10, 2023
Downloads: 319
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X