Ajout de la FAQ
This commit is contained in:
parent
aee3325163
commit
cbfafa3e74
51
assets/css/faq.css
Normal file
51
assets/css/faq.css
Normal 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
15
assets/js/faq.js
Normal 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');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
@ -5,6 +5,7 @@
|
|||||||
<title>Elite Solar</title>
|
<title>Elite Solar</title>
|
||||||
<link rel="stylesheet" href="../assets/css/style.css">
|
<link rel="stylesheet" href="../assets/css/style.css">
|
||||||
<link rel="stylesheet" href="../assets/css/header.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>
|
<script type="text/javascript" src="../assets/js/header.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@ -19,5 +20,37 @@
|
|||||||
<li class="active"><a href="../faq">FAQ</a></li>
|
<li class="active"><a href="../faq">FAQ</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</header>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
Loading…
Reference in New Issue
Block a user