Stylish FAQs Template In HTML CSS

This HTML CSS template helps you to create stylish FAQ sections on your website. Each question is uniquely numbered for easy reference. The gradient background adds a touch of sophistication to question titles. The template allows you to effortlessly manage and present information, making it helpful for users seeking quick answers. With intuitive styling and easy navigation, this template offers a user-friendly solution for presenting FAQs.

How to Create Stylish FAQs Template in HTML CSS

1. First of all, copy the following HTML code. Locate the <div class="faq"> section. Each <div class="faq-q"> represents a question and its corresponding answer. Replace the placeholder questions and answers with your own content. Maintain the structure for consistency.

<div class="faq">
  <div class="faq-q">
    <span>
      <b>Can I change my billing address?</b>
    </span>
    <p>
      Yes you can, provided your order has not been shipped. Mail us at [email protected] to change your order information. Please note that after your order is shipped you cannot change any details on your order.
    </p>
  </div>
  <div class="faq-q">
    <span>
      <b>Can I change my order information?</b>
    </span>
    <p>
      Mail us at [email protected] to change your order information. Please note that after your order is shipped you cannot change any details on your order.
    </p>
  </div>
  <div class="faq-q">
    <span>
      <b>Can I change the delivery address?</b>
    </span>
    <p>
      Mail us at ;[email protected]&amp; to change your order information. Please note that after your order is shipped you cannot change any details on your order.
    </p>
  </div>
  <div class="faq-q">
    <span>
      <b>Can I customize the product?</b>
    </span>
    <p>
      You can email us a care@farminii. and your order will be placed as per your choice. Please mention preferable colors, sizes, finish and other details.
    </p>
  </div>
  <div class="faq-q">
    <span>
      <b>Can I get a discount Coupon?</b>
    </span>
    <p>
      If you have received any discount Coupon on your email, you may use the same. You also have access to the Sale Section on the Website. Apart from that, there are no discount Offers currently available.
    </p>
  </div>
  <div class="faq-q">
    <span>
      <b>Can I place an Order over the Phone?</b>
    </span>
    <p>
      
    </p>
  </div>
  <div class="faq-q">
    <span>
      <b>Can I change my order information?</b>
    </span>
    <p>
      Yes, you can place the orders on the phone. We are available from 9.30 AM to 6.00 PM (Mon - Sat).
    </p>
  </div>
  <div class="faq-q">
    <span>
      <b>Guidelines For Writing Product Reviews</b>
    </span>
    <ul>
      <li>Product reviews on <b>FARMINII</b> are an optimum way to help fellow customers decide what to buy, and what to avoid. Here are tips to writing product reviews:
      </li>
      <li>
        It's always better to review a product you have used
      </li>
      <li>
        Provide a relevant, unbiased product overview. List all the pros and cons of the product. Make sure you write a review that stays consistent even after years
      </li>
      <li>
        Provide facts to back up your opinion.
      </li>
      <li>
        Do not provide inaccurate information. If you're not sure, research.
      </li>
      <li>
        Be creative but stay on topic.
      </li>
      <li>
        A quick edit and spell check will give you credibility. Also, break reviews into small pointers.
      </li>
    </ul>
  </div>
  <div class="faq-q">
    <span>
      <b>How can I add more products to my order?</b>
    </span>
    <p>
      Mail us at [email protected]&amp; to add more products to your order before your order is shipped.
    </p>
  </div>
  <div class="faq-q">
    <span>
      <b>How can I get the discount Coupons?</b>
    </span>
    <p>
      If you are a new customer, you can register on our website and avail discount on your first order with us.
    </p>
   </div>
  <div class="faq-q">
    <span>
      <b>How do I make a Bank Transfer?</b>
    </span>
    <p>
      Bank Transfer is one of the Payment Options available. Below are the details of the Bank where you can make a Transfer.
    </p>
    <ul type="none" style="font-size:16px; font-weight:bold;">
        <li><i>Account Name</i> :</li>
        <li><i>Bank Name</i> :</li>
        <li><i>Account No.</i> :</li>
        <li><i>IFSC Code</i> :</li>
        <li><i>Branch</i> :</li>
        <li><i>MICR Code</i> :</li>
     </ul>
   </div>
</div>

2. If you wish to modify the template’s styling, navigate to the CSS code. Customize the font family, width, and other style-related properties under the .faq and .faq-q classes.

.faq {
  font-family: Helvetica;
  width: 90%;
  margin: 0 0 0 5%;
}

.faq-q {
  border-top: 2px dashed;
  border-color: #3c9814 #b7d524 #6bbc48 #e5e61e !important;
  margin:0; padding: 30px;
  counter-increment: section;
  position: relative;
}

.faq-q span{
  font-size: 22px;
    background: linear-gradient(to right, #e5e61e, #b7d524, #6bbc48, #3c9814);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.faq-q:nth-child(even):before {
  content: counter(section);
  right: 100%; 
  margin-right: -20px;
  position: absolute;
  border-radius: 50%;
  padding: 10px;
  height: 20px;
  width: 20px;
  background: linear-gradient(to left, #e5e61e, #b7d524, #6bbc48, #3c9814) !important;
  text-align:center;
  color: #000;
  font-size: 110%;
}

.faq-q:nth-child(odd):before {
  content: counter(section);
  left: 100%; 
  margin-left: -20px;
  position: absolute;
  border-radius: 50%;
  padding: 10px;
  height: 20px;
  width: 20px;
  background: linear-gradient(to right, #e5e61e, #b7d524, #6bbc48, #3c9814) !important;
  text-align:center;
  color: #000;
  font-size: 110%;
}



.faq-q:nth-child(even) {
  border-left: 2px dashed;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  margin-right: 30px; 
  padding-right: 0;
}

.faq-q:nth-child(odd) {
  border-right: 2px dashed;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  margin-left: 30px; 
  padding-left: 0;
}
.faq-q:first-child {
  border-top: 0;
  border-top-right-radius:0;
  border-top-left-radius:0;
}

.faq-q:last-child {
  border-bottom-right-radius:0;
  border-bottom-left-radius:0;
}

To add more questions, copy and paste the <div class="faq-q"> section and modify the content accordingly. To remove a question, simply delete the corresponding <div>.

Open the HTML file in a web browser to preview your Stylish FAQs Template. Verify that the layout and styling meet your expectations. Make adjustments as needed.

That’s all! hopefully, you have successfully integrated this stylish HTML & CSS FAQs template into your project. 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.