CODE POUR UNE FAQ TOUT FAIT AVEC DU CODE :

PHOTO EMBED

Sun Mar 30 2025 09:25:32 GMT+0000 (Coordinated Universal Time)

Saved by @Etiennette 

  <!-- Ajoute ce code ci-dessous là où tu veux que la FAQ soit -->

    
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FAQ</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <!-- Chargement des icônes Font Awesome -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="faq-container">
    <div class="faq-item">
        <div class="faq-question">Qu'est-ce que Systeme.io? <span class="faq-icon"><i class="fa-solid fa-plus"></i></span></div>
        <div class="faq-answer">
            <p>Systeme.io est une plateforme de marketing en ligne tout-en-un qui permet de créer des tunnels de vente, des pages de capture, des espaces membres et bien plus encore.</p>
        </div>
    </div>

    <div class="faq-item">
        <div class="faq-question">Comment puis-je commencer avec Systeme.io? <span class="faq-icon"><i class="fa-solid fa-plus"></i></span></div>
        <div class="faq-answer">
            <p>Pour commencer avec Systeme.io, vous devez vous inscrire sur leur site web, créer un compte et choisir le plan qui convient le mieux à vos besoins.</p>
        </div>
    </div>

    <div class="faq-item">
        <div class="faq-question">Est-ce que Systeme.io offre un essai gratuit? <span class="faq-icon"><i class="fa-solid fa-plus"></i></span></div>
        <div class="faq-answer">
            <p>Oui, Systeme.io propose un essai gratuit de 14 jours pour vous permettre d'explorer toutes les fonctionnalités de la plateforme avant de vous engager.</p>
        </div>
    </div>

    <!-- Ajoute d'autres questions/réponses selon tes besoins -->

</div>


        
        
        
        
        
         <!-- Ajoute ce code ci-dessous en footer -->


<script>
$(".faq-question").click(function() {
    var container = $(this).parent(".faq-item");
    var answer = container.find(".faq-answer");
    var icon = $(this).find(".faq-icon i");

    // Fermer toutes les autres réponses
    $(".faq-answer").not(answer).slideUp(200).removeClass("scale-in-ver-top");
    $(".faq-icon i").not(icon).removeClass("fa-minus").addClass("fa-plus");

    // Ouvrir ou fermer la réponse actuelle
    answer.slideToggle(200).css("transform-origin", "top").toggleClass("scale-in-ver-top");

    if (icon.hasClass("fa-plus")) {
        icon.removeClass("fa-plus").addClass("fa-minus");
    } else {
        icon.removeClass("fa-minus").addClass("fa-plus");
    }
});
</script>

</body>
</html>

<style>
  
body {
    font-family: Arial, sans-serif;
    background-color: #000; /* Fond noir pour la page */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    color: #fff; /* Couleur de texte blanche par défaut */
}

.faq-container {
    width: 70%;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid #01ffff21; /* Bordure inférieure sombre entre les questions */
    background: rgb(2, 0, 36);
    background: linear-gradient(90deg, #002424 0%, #000000 100%); /* Dégradé léger */
    padding: 20px;
    margin-bottom: 12px; /* Espacement entre chaque question/réponse */
    border-radius: 4px; /* Coins arrondis */
}

.faq-question {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff; /* Couleur principale pour les questions */
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pour aligner le texte à gauche et l'icône à droite */
    position: relative; /* Position relative pour le contour */
}

.faq-icon {
    margin-left: 10px;
}

.faq-answer {
    padding: 10px 25px 10px 25px;
    display: none;
    margin-top: 12px;
    margin-left: 12px;
    color: #ffffff; /* Couleur de texte blanche pour les réponses */
    background-color: #0000006e; /* Fond semi-transparent pour les réponses */
    border-radius: 4px; /* Coins arrondis */
    transform-origin: top; /* Point d'origine pour l'animation de scale */
    border-left: 5px solid #01ffff; /* Contour à gauche de couleur principale */
}

.scale-in-ver-top {
    animation: scale-in-ver-top 0.3s ease;
}

@keyframes scale-in-ver-top {
    0% {
        transform: scaleY(0);
        opacity: 0;
    }
    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

</style>
content_copyCOPY