Merge pull request apu52#1043 from ANKeshri/feat/faq-for-tindog-website

add faq in tindog website

Projects/Tindog_website/index.html

@@ -31,6 +31,8 @@
           <li class="nav-item"><a class="nav-link" href="#features">Features</a></li>
           <li class="nav-item"><a class="nav-link" href="#pricing">Pricing</a></li>
           <li class="nav-item"><a class="nav-link" href="#cont">Contact</a></li>
+          <li class="nav-item"><a class="nav-link" href="#faq">FAQ</a></li>
+
         </ul>
       </div>
     </nav>
@@ -214,6 +216,7 @@ <h1 class="card-title pricing-card-title">$29<small class="text-body-dark fw-lig
           </div>
         </div>
   </section>
+
   <div id="cont">
   <section id="contact" class="contact-section">
     <div class="container">
@@ -252,6 +255,77 @@ <h3>Our Location</h3>
     </div>
   </section>
 </div>
+  <div class="container text-center py-5">
+    <h1 class="display-4">Frequently Asked Questions</h1>
+  </div>
+</section>
+
+<section id="faq">
+  <div class="container">
+    <div class="accordion" id="accordionExample">
+      <div class="accordion-item">
+        <h2 class="accordion-header" id="headingOne">
+          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
+            aria-expanded="true" aria-controls="collapseOne">
+            What is TinDog?
+          </button>
+        </h2>
+        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
+          data-bs-parent="#accordionExample">
+          <div class="accordion-body">
+            TinDog is a dating app for dogs where you can find new friends and companions for your furry friend. 
+            We aim to connect dogs with similar interests and provide a platform for them to socialize.
+          </div>
+        </div>
+      </div>
+      <div class="accordion-item">
+        <h2 class="accordion-header" id="headingTwo">
+          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"
+            aria-expanded="false" aria-controls="collapseTwo">
+            How do I create a profile?
+          </button>
+        </h2>
+        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
+          data-bs-parent="#accordionExample">
+          <div class="accordion-body">
+            To create a profile, download the TinDog app from the App Store or Google Play, and follow the on-screen instructions 
+            to set up your profile by entering details about your dog and uploading a photo.
+          </div>
+        </div>
+      </div>
+      <div class="accordion-item">
+        <h2 class="accordion-header" id="headingThree">
+          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree"
+            aria-expanded="false" aria-controls="collapseThree">
+            Is TinDog free to use?
+          </button>
+        </h2>
+        <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
+          data-bs-parent="#accordionExample">
+          <div class="accordion-body">
+            TinDog offers both free and premium plans. The free plan allows basic features, while the premium plans offer additional features 
+            and enhanced functionalities. You can choose a plan that suits your needs.
+          </div>
+        </div>
+      </div>
+      <div class="accordion-item">
+        <h2 class="accordion-header" id="headingFour">
+          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour"
+            aria-expanded="false" aria-controls="collapseFour">
+            How can I contact customer support?
+          </button>
+        </h2>
+        <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
+          data-bs-parent="#accordionExample">
+          <div class="accordion-body">
+            For any queries or issues, you can reach out to our customer support team through the "Contact Us" section on our website or 
+            by sending an email to [email protected].
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
 
 
 

Projects/Tindog_website/style.css

@@ -215,6 +215,71 @@ h1 {
   padding-top: 10px;
   border-top: 2px solid #f2cbd0;
 }
+
+/* Container styling */
+#faq {
+  padding: 2rem 0;
+  background-color: #f8f9fa; /* Light background for contrast */
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+/* Header styling */
+#faq .display-4 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #343a40; /* Darker text color */
+  margin-bottom: 2rem;
+}
+
+/* Accordion button styling */
+.accordion-button {
+  background-color: #ffffff; /* White background */
+  color: #343a40; /* Dark text color */
+  border: 1px solid #ced4da; /* Light border */
+  border-radius: 0.25rem; /* Rounded corners */
+  font-size: 1.3rem; /* Slightly larger text */
+  font-weight: 600;
+}
+
+/* Accordion button hover and focus */
+.accordion-button:hover,
+.accordion-button:focus {
+  background-color: #e9ecef; /* Light gray background on hover */
+  color: #495057; /* Slightly lighter text color on hover */
+  box-shadow: none; /* Remove default shadow */
+}
+
+/* Accordion item styling */
+.accordion-item {
+  border: 1px solid #dee2e6; /* Light border around each item */
+  border-radius: 0.25rem; /* Rounded corners */
+  margin-bottom: 0.5rem; /* Space between items */
+}
+
+/* Accordion body styling */
+.accordion-body {
+  font-size: 1rem; /* Standard text size */
+  color: #495057; /* Darker text color */
+  padding: 1rem; /* Padding inside the body */
+}
+
+/* Active item styling */
+.accordion-button:not(.collapsed) {
+  color: #ffffff; /* White text color for active state */
+  background: linear-gradient(300deg, #f4b5b5, #e34159, rgb(197, 76, 76)); /* Bootstrap primary color */
+  border-color: #007bff; /* Match border color to background */
+}
+
+/* Disabled item styling */
+.accordion-button:disabled {
+  opacity: 0.5; /* Semi-transparent for disabled state */
+  cursor: not-allowed; /* Pointer cursor */
+}
+.display-4{
+  color: black;
+  font-weight: 400 !important;
+
 /* Contact Us Section */
 .contact-section {
   padding: 50px 0;
@@ -302,4 +367,5 @@ b, strong {
 #cont{
   margin-top: 1rem;
   margin-bottom: 2rem;
+
 }