KSS Style Guide

7 #permalink FAQ - sekcja z pytaniami i odpowiedziami

Toggle example guides Toggle HTML markup

Sekcja FAQ (Frequently Asked Questions)

Powyższy kod to stylizacja i struktura sekcji FAQ (Często Zadawane Pytania).

Styl sekcji FAQ

  1. #faq-section: Główny kontener sekcji FAQ. Jest używany do stylizacji całej sekcji FAQ. Elementy w sekcji są wyśrodkowane wertykalnie i poziomo (display: flex; flex-direction: column; align-items: center;). Ma także wewnętrzny padding 20px i używa czcionki Arial lub bezszeryfowej (font-family: Arial, sans-serif;).

  2. .faq-category h2: Styl dla nagłówków kategorii FAQ. Dodał odstęp na górze (margin-top: 30px;), aby oddzielić je od innych elementów.

  3. .faq-item: Styl dla pojedynczych elementów FAQ. Elementy te mają białe tło (background: var(--white-color);), odstęp na dole wynoszący 10px, oraz zaokrąglone rogi (border-radius: 5px;).

  4. .faq-question: Styl dla pytania w FAQ. Pytania są wyśrodkowane poziomo (text-align: center;), mają szerokość 500px, tło w kolorze #7c4200, biały tekst i zmieniają kształt kursora na dłoni (cursor: pointer;).

  5. .faq-question::marker: Styl markeru (ikonki) przed pytaniem. Marker ma biały kolor (color: #fff;).

  6. .faq-answer: Styl dla odpowiedzi w FAQ. Odpowiedzi mają tło w kolorze #cc6d00, szerokość 500px, padding 15px i zerowy margin.

  7. details[open] .faq-question: Styl dla pytania, które jest otwarte (rozwiniete). Wtedy pod pytaniem jest dodawana linia na dole (border-bottom: 1px solid #ddd;).

  8. details:not([open]) .faq-answer: Styl dla odpowiedzi, która jest ukryta (nie rozwinęła się). Wtedy odpowiedź jest ukrywana (display: none;).

  9. details > summary: Styl dla nagłówka sekcji FAQ (pytania), który jest typem HTML summary. Usuwa kropkę przed nagłówkiem, korzystając z list-style: none;.

  10. details > summary::-webkit-details-marker: Dodatkowy styl do usuwania kropki przed nagłówkiem w przeglądarkach opartych na silniku WebKit, takich jak Safari. Marker jest ukrywany (display: none;).

Struktura HTML sekcji FAQ

Sekcja FAQ zawiera różne pytania i odpowiedzi podzielone na kategorie. Każde pytanie jest zawarte w elemencie <details>, który umożliwia ukrywanie i pokazywanie odpowiedzi po kliknięciu na pytanie. Odpowiedzi są zawarte w elemencie <p class="faq-answer">.

W sekcji HTML znajdują się również przyciski i inne elementy, takie jak przycisk "Potwierdź godzinę !" i kontener do wyświetlania cytatów.

Sekcja FAQ jest organizowana w kategoriach, a każda kategoria ma swoje pytania i odpowiedzi. Każde pytanie jest reprezentowane jako element details, który zawiera nagłówek pytania (summary) oraz odpowiedź (p class="faq-answer").

Ta struktura HTML i style CSS tworzą czytelną i interaktywną sekcję FAQ, która może być łatwo rozwijana i zwijana przez użytkowników, aby uzyskać odpowiedzi na pytania.

Example

Frequently Asked Questions

General Questions

Can I order a product to an address different from my home?

Yes, you can specify an alternative delivery address during the checkout process.

Does your offer include a warranty?

Yes, all our products come with a standard manufacturer's warranty.

Is free shipping available?

Free shipping is available for orders above a certain value.

How can I track my order?

After your order has been shipped, you will receive a tracking number that allows you to track your package online.

Can I change my order after placing it?

Order changes are possible only for a short time after the order is placed.

What payment methods do you accept?

We accept credit cards, bank transfers, and electronic payments.

Can I receive a VAT invoice?

Yes, a VAT invoice will be sent by email or included with your package upon request.

Do you offer technical support?

We offer technical support for all of our products.

Can I place an order over the phone?

Yes, our team is available to take phone orders during business hours.

Are products available in different colors?

Yes, most products are available in multiple colors, which you can select before adding to the cart.

Can I return a product if I don't like it?

Yes, we accept returns within a specified period provided the product has not been used.

Can I cancel my order?

Yes, orders can be canceled if they have not yet been shipped.

How can I update my contact details?

You can update your contact information in the 'My Account' section on our website.

Do you offer discounts for regular customers?

Yes, we have a loyalty program for our returning customers.

Where can I find product reviews?

Customer reviews of the product can be found on the product page under the description.

Markup 
 <main id="faq-section">
        <div id="container" class="container">
            <button style="display: none;" id="button" class="button">Potwierdź godzinę !</button>
        </div>
            <h1>Frequently Asked Questions</h1>
            <section class="faq-category">
                <h2>General Questions</h2>
                <details class="faq-item">
                    <summary class="faq-question">Can I order a product to an address different from my home?</summary>
                    <p class="faq-answer">Yes, you can specify an alternative delivery address during the checkout process.</p>
                </details>
                <details class="faq-item">
                    <summary class="faq-question">Does your offer include a warranty?</summary>
                    <p class="faq-answer">Yes, all our products come with a standard manufacturer's warranty.</p>
                </details>
                <details class="faq-item">
                    <summary class="faq-question">Is free shipping available?</summary>
                    <p class="faq-answer">Free shipping is available for orders above a certain value.</p>
                </details>
                <details class="faq-item">
                    <summary class="faq-question">How can I track my order?</summary>
                    <p class="faq-answer">After your order has been shipped, you will receive a tracking number that allows you to track your package online.</p>
                </details>
                <details class="faq-item">
                    <summary class="faq-question">Can I change my order after placing it?</summary>
                    <p class="faq-answer">Order changes are possible only for a short time after the order is placed.</p>
                </details>
                <details class="faq-item">
                    <summary class="faq-question">What payment methods do you accept?</summary>
                    <p class="faq-answer">We accept credit cards, bank transfers, and electronic payments.</p>
                </details>
                <details class="faq-item">
                    <summary class="faq-question">Can I receive a VAT invoice?</summary>
                    <p class="faq-answer">Yes, a VAT invoice will be sent by email or included with your package upon request.</p>
                </details>
                <details class="faq-item">
                    <summary class="faq-question">Do you offer technical support?</summary>
                    <p class="faq-answer">We offer technical support for all of our products.</p>
                </details>
                <details class="faq-item">
                    <summary class="faq-question">Can I place an order over the phone?</summary>
                    <p class="faq-answer">Yes, our team is available to take phone orders during business hours.</p>
                </details>
                <details class="faq-item">
                    <summary class="faq-question">Are products available in different colors?</summary>
                    <p class="faq-answer">Yes, most products are available in multiple colors, which you can select before adding to the cart.</p>
                </details>
                <details class="faq-item">
                    <summary class="faq-question">Can I return a product if I don't like it?</summary>
                    <p class="faq-answer">Yes, we accept returns within a specified period provided the product has not been used.</p>
                </details>
                <details class="faq-item">
                    <summary class="faq-question">Can I cancel my order?</summary>
                    <p class="faq-answer">Yes, orders can be canceled if they have not yet been shipped.</p>
                </details>
                <details class="faq-item">
                    <summary class="faq-question">How can I update my contact details?</summary>
                    <p class="faq-answer">You can update your contact information in the 'My Account' section on our website.</p>
                </details>
                <details class="faq-item">
                    <summary class="faq-question">Do you offer discounts for regular customers?</summary>
                    <p class="faq-answer">Yes, we have a loyalty program for our returning customers.</p>
                </details>
                <details class="faq-item">
                    <summary class="faq-question">Where can I find product reviews?</summary>
                    <p class="faq-answer">Customer reviews of the product can be found on the product page under the description.</p>
                </details>
            </section>
        </div>
    </main>
Source: styleFaq.css, line 690