Stylish FAQs Template In HTML CSS

Stylish FAQs Template In HTML CSS
Code Snippet: FAQ Simple Template
Author: Sübhánkár Jáná
Published: January 28, 2024
Last Updated: February 3, 2024
Downloads: 58
License: MIT
Edit Code online: CodeHim
Read More

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 care@farminii.com 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 care@farminii.com 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 ;care@farminii.com&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 care@farminii.com&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.

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...