modif faq

This commit is contained in:
Romain JOURNEAU 2023-01-10 15:27:42 +01:00
parent 259ad9b92e
commit 7a2cafd6e7
3 changed files with 31 additions and 71 deletions

View File

@ -2,55 +2,5 @@ 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 a{
padding-right: 20px;
padding-left: 20px;
}
.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;
}

View File

@ -16,3 +16,19 @@ body {
box-sizing: inherit;
font-family: system-ui;
}
main {
padding: 0 3.75rem;
}
@media screen and (max-width: 700px){
main {
padding: 0 1.875rem;
}
}
@media screen and (max-width: 575px) {
main {
padding: 0 .625rem;
}
}

View File

@ -24,36 +24,30 @@
</header>
<main>
<h1>FAQ</h1>
<h2>Voici les questions fréquentes de nos clients :</h2>
<p>Voici les questions fréquentes de nos clients :<p>
<div class="faq">
<ul>
<li>
<a class="question" href="#">Quel sont vos partenaires ?</a>
<h2>Quel sont vos partenaires ?</h2>
<p>Nous travaillons avec Apple, Samsung, Huawei.</p>
</li>
<li>
<a class="question" href="#">Quand est-ce que le produit est livré ?</a>
<h2>Quand est-ce que le produit est livré ?</h2>
<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>
<h2>A qui est destiné votre produit ?</h2>
<p>Notre produit est principalement destiné aux entrerpises créant des smartphones.</p>
</li>
<li>
<a class="question" href="#">Pourquoi ce nom ?</a>
<h2>Pourquoi ce nom ?</h2>
<p>Notre entreprise se nomme Elite Solar, la première partie (Elite) fait référence à nos ingénieurs délite ayant réussi à miniaturiser et à
rendre totalement invisible les cellules photovoltaïques à lœil nu pour les utilisateurs de notre technologie, la seconde partie (Solar),
quant à elle,correspond à la source dénergie principale des cellules photovoltaïques.</p>
</li>
<li>
<a class="question" href="#">Est-ce que le produit est garanti ?</a>
<h2>Est-ce que le produit est garanti ?</h2>
<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>
<h2>Allez-vous travailler avec d'autres grand partenaires dans les années futures ?</h2>
<p>Oui, nous sommes en contact avec Microsoft et Xiaomi</p>
</li>
</ul>
</div>
<script src="../assets/js/faq.js"></script>
</main>