FAQs

abhishek001
Jan 25, 2026 6
Live Preview

Live Editor

  <div class="container">
        <h1>Frequently Asked Questions</h1>
        <p class="subtitle">Find answers to common questions about our services</p>

        <div class="accordion">
            <!-- Item 1 -->
            <div class="accordion-item">
                <button class="accordion-header">
                    <span class="accordion-icon">💡</span>
                    <span class="accordion-title">What is your product about?</span>
                    <span class="accordion-arrow">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                    </span>
                </button>
                <div class="accordion-content">
                    <p>Our product is a comprehensive solution designed to help businesses streamline their workflows and increase productivity. We offer cutting-edge features that make your daily tasks easier and more efficient.</p>
                </div>
            </div>

            <!-- Item 2 -->
            <div class="accordion-item">
                <button class="accordion-header">
                    <span class="accordion-icon">💰</span>
                    <span class="accordion-title">How much does it cost?</span>
                    <span class="accordion-arrow">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                    </span>
                </button>
                <div class="accordion-content">
                    <p>We offer flexible pricing plans starting from $9/month for individuals, $29/month for small teams, and custom enterprise solutions. All plans come with a 14-day free trial, no credit card required.</p>
                </div>
            </div>

            <!-- Item 3 -->
            <div class="accordion-item">
                <button class="accordion-header">
                    <span class="accordion-icon">🚀</span>
                    <span class="accordion-title">How do I get started?</span>
                    <span class="accordion-arrow">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                    </span>
                </button>
                <div class="accordion-content">
                    <p>Getting started is simple! Just click the "Sign Up" button, create your account, and you'll be guided through our onboarding process. Our team is available 24/7 to help you set up everything.</p>
                </div>
            </div>

            <!-- Item 4 -->
            <div class="accordion-item">
                <button class="accordion-header">
                    <span class="accordion-icon">🔒</span>
                    <span class="accordion-title">Is my data secure?</span>
                    <span class="accordion-arrow">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                    </span>
                </button>
                <div class="accordion-content">
                    <p>Absolutely! We use industry-standard encryption and security protocols. Your data is stored on secure servers with regular backups, and we're fully compliant with GDPR and other privacy regulations.</p>
                </div>
            </div>

            <!-- Item 5 -->
            <div class="accordion-item">
                <button class="accordion-header">
                    <span class="accordion-icon">🤝</span>
                    <span class="accordion-title">Do you offer customer support?</span>
                    <span class="accordion-arrow">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                    </span>
                </button>
                <div class="accordion-content">
                    <p>Yes! We provide 24/7 customer support via email, live chat, and phone. Our dedicated support team is always ready to help you with any questions or issues you might encounter.</p>
                </div>
            </div>

            <!-- Item 6 -->
            <div class="accordion-item">
                <button class="accordion-header">
                    <span class="accordion-icon">📱</span>
                    <span class="accordion-title">Is there a mobile app?</span>
                    <span class="accordion-arrow">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                            <path d="M5 7.5L10 12.5L15 7.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                    </span>
                </button>
                <div class="accordion-content">
                    <p>Yes, we have native mobile apps for both iOS and Android. You can download them from the App Store or Google Play Store. All your data syncs seamlessly across all devices.</p>
                </div>
            </div>
        </div>
    </div>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 3rem 1rem;
}

.container {
    max-width: 800px;
    margin: 0 auto;
}

h1 {
    text-align: center;
    color: white;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.subtitle {
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    margin-bottom: 3rem;
}

.accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.accordion-item {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.accordion-item:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: white;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 600;
    color: #2d3748;
    transition: all 0.3s ease;
}

.accordion-header:hover {
    background: #f7fafc;
}

.accordion-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.accordion-title {
    flex: 1;
}

.accordion-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #f7fafc;
    border-radius: 50%;
    color: #667eea;
    transition: all 0.3s ease;
}

.accordion-item.active .accordion-arrow {
    transform: rotate(180deg);
    background: #667eea;
    color: white;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.accordion-item.active .accordion-content {
    max-height: 500px;
    padding: 0 1.5rem 1.5rem 1.5rem;
}

.accordion-content p {
    color: #4a5568;
    line-height: 1.7;
    font-size: 1rem;
}

.accordion-item.active .accordion-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    color: #667eea;
}

/* Responsive */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem;
    }

    .subtitle {
        font-size: 1rem;
    }

    .accordion-header {
        padding: 1.25rem;
        font-size: 1rem;
    }

    .accordion-icon {
        font-size: 1.25rem;
    }

    .accordion-content p {
        font-size: 0.95rem;
    }
}
const accordionHeaders = document.querySelectorAll('.accordion-header');

        accordionHeaders.forEach(header => {
            header.addEventListener('click', function() {
                const item = this.parentElement;
                const isActive = item.classList.contains('active');

                // Close all items
                document.querySelectorAll('.accordion-item').forEach(i => {
                    i.classList.remove('active');
                });

                // Open clicked item if it wasn't active
                if (!isActive) {
                    item.classList.add('active');
                }
            });
        });
Categories

FAQs

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
