souidi/SAE15_2022
souidi/SAE15_2022
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Ajout de la FAQ

Browse Source
This commit is contained in:
Romain JOURNEAU 2023-01-05 16:14:34 +01:00
parent aee3325163
commit cbfafa3e74
3 changed files with 100 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
assets/css/faq.css Normal file
View File

@ -0,0 +1,51 @@
h1 {
text-align: center;
}
h2 {
text-align: center;
font-size: medium;
}
.faq {
margin: 0 auto;
width: 500px;
}
.faq ul {
padding: 0;
list-style-type: none;
}
.faq ul li {
background: #f1f1f1;
padding: 10px 0;
margin-bottom: 10px;
position: relative;
}
.question {
font-size: 18px;
color: #47a3da;
text-decoration: none;
display: block;
padding: 0 0 0 20px;
position: relative;
}
.question:hover {
color: #000;
}
.question.active {
color: #000;
}
.faq ul li p {
display: none;
font-size: 14px;
color: #2f2f2f;
line-height: 24px;
padding: 10px 20px;
}

15
assets/js/faq.js Normal file
View File

@ -0,0 +1,15 @@
let faqLink = document.querySelectorAll('.question');
faqLink.forEach(function(link) {
link.addEventListener('click', function() {
let faqCont = this.nextElementSibling;
if (faqCont.style.display === 'block') {
faqCont.style.display = 'none';
this.classList.remove('active');
} else {
faqCont.style.display = 'block';
this.classList.add('active');
}
});
});

35
faq/index.html
View File

@ -5,6 +5,7 @@
<title>Elite Solar</title>
<link rel="stylesheet" href="../assets/css/style.css">
<link rel="stylesheet" href="../assets/css/header.css">
<link rel="stylesheet" href="../assets/css/faq.css">
<script type="text/javascript" src="../assets/js/header.js"></script>
</head>
<body>
@ -19,5 +20,37 @@
<li class="active"><a href="../faq">FAQ</a></li>
</ul>
</header>
<h1>FAQ</h1>
<h2>Voici les questions fréquentes de nos clients :</h2>
<div class="faq">
<ul>
<li>
<a class="question" href="#">Quel sont vos partenaires ?</a>
<p>Nous travaillons avec Apple, Samsung, Huawei.</p>
</li>
<li>
<a class="question" href="#">Quand est-ce que le produit est livré ?</a>
<p>Cela vas dépendre de ce que veux le client et comment adapter la technolgie à l'écran.Nous vous invitons à nous <a href="../contact">contacter</a></p>
</li>
<li>
<a class="question" href="#">A qui est destiné votre produit ?</a>
<p>Notre produit est principalement destiné aux entrerpises créant des smartphones.</p>
</li>
<li>
<a class="question" href="#">Pourquoi ce nom ?</a>
<p>...</p>
</li>
<li>
<a class="question" href="#">Est-ce que le produit est garanti ?</a>
<p>Oui, le produit est garanti 2 ans.</p>
</li>
<li>
<a class="question" href="#">Allez-vous travailler avec d'autres grand partenaires dans les années futures ?</a>
<p>Oui, nous sommes en contact avec Microsoft et Xiaomi</p>
</li>
</ul>
</div>
<script type="text/javascript" src="../assets/js/faq.js"></script>
</body>
</html>
</html>