bootstrapFAQ/index.html at main · Emprinnos/bootstrapFAQ · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Accordion</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
  </head>
  <body>


    <main class="vh-100 bg-light d-flex align-items-center">

                           <!-- El contenedor de la categorias -->
      <section id="principal" class="h-75 container-sm mx-auto bg-light" style ="max-width: 800px;">

        <h1 class="fs-5 text-primary text-center py-3">¿En qué le podemos ayudar?</h1>


        <!-- La primera categoria -->
        <div class="accordion" id="accordionExample">


          <div class="accordion-item my-4">
            <h2 class="accordion-header" id="headingOne">
              <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                <i class="bi bi-truck-flatbed"></i>
                <span class="px-3 text-info">Envios</span>
              </button>
            </h2>
            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
              <div class="accordion-body">
                    <h2 class="fs-6 fw-semibold">1. ¿Dónde está mi pedido?</h2>
                    <div class="my-2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, odit.</div>
                    <h2 class="fs-6 fw-semibold">2. ¿Cúando llegará mi pedido?</h2>
                    <div class="my-2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, odit.</div>
                    <h2 class="fs-6 fw-semibold">3. ¿Qué hacer si no llega mi pedido?</h2>
                    <div class="my-2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, odit.</div>
                    <h2 class="fs-6 fw-semibold">4. ¿Cómo sigo el envio?</h2>
                    <div class="my-2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, odit.</div>
                    <h2 class="fs-6 fw-semibold">5. ¿Cúanto tiempo se demora el envio?</h2>
                    <div class="my-2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, odit.</div>
              </div>
            </div>
          </div>

        <!-- La segunda Categoria  -->

        <div class="accordion-item my-4">
          <h2 class="accordion-header" id="headingTwo">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              <i class="bi bi-credit-card"></i>
              <span class="px-3 text-info" >Pagos</span>
            </button>
          </h2>
          <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              <h2 class="fs-6 fw-semibold">1. ¿Dónde está mi pedido?</h2>
              <div class="my-2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, odit.</div>
              <h2 class="fs-6 fw-semibold">2. ¿Cúando llegará mi pedido?</h2>
              <div class="my-2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, odit.</div>
              <h2 class="fs-6 fw-semibold">3. ¿Qué hacer si no llega mi pedido?</h2>
              <div class="my-2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, odit.</div>
              <h2 class="fs-6 fw-semibold">4. ¿Cómo sigo el envio?</h2>
              <div class="my-2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, odit.</div>
              <h2 class="fs-6 fw-semibold">5. ¿Cúanto tiempo se demora el envio?</h2>
              <div class="my-2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, odit.</div>
            </div>
          </div>
        </div>

          <!-- La tercera categoria  -->

        <div class="accordion-item my-4">
          <h2 class="accordion-header" id="headingThree">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">

              <i class="bi bi-arrow-return-left"></i>
              <span class="px-3 text-info">Devoluciones</span>
            </button>
          </h2>
          <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              <h2 class="fs-6 fw-semibold">1. ¿Dónde está mi pedido?</h2>
              <div class="my-2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, odit.</div>
              <h2 class="fs-6 fw-semibold">2. ¿Cúando llegará mi pedido?</h2>
              <div class="my-2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, odit.</div>
              <h2 class="fs-6 fw-semibold">3. ¿Qué hacer si no llega mi pedido?</h2>
              <div class="my-2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, odit.</div>
              <h2 class="fs-6 fw-semibold">4. ¿Cómo sigo el envio?</h2>
              <div class="my-2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, odit.</div>
              <h2 class="fs-6 fw-semibold">5. ¿Cúanto tiempo se demora el envio?</h2>
              <div class="my-2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, odit.</div>
            </div>
          </div>
        </div>

        <!-- La cuarta categoria  -->

        <div class="accordion-item">
          <h2 class="accordion-header" id="heading4">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseThree">
              <i class="bi bi-percent"></i>
               <span class="px-3 text-info">Promociones</span>
            </button>
          </h2>
          <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="heading4" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              <h2 class="fs-6 fw-semibold">1. ¿Dónde está mi pedido?</h2>
              <div class="my-2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, odit.</div>
              <h2 class="fs-6 fw-semibold">2. ¿Cúando llegará mi pedido?</h2>
              <div class="my-2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, odit.</div>
              <h2 class="fs-6 fw-semibold">3. ¿Qué hacer si no llega mi pedido?</h2>
              <div class="my-2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, odit.</div>
              <h2 class="fs-6 fw-semibold">4. ¿Cómo sigo el envio?</h2>
              <div class="my-2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, odit.</div>
              <h2 class="fs-6 fw-semibold">5. ¿Cúanto tiempo se demora el envio?</h2>
              <div class="my-2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsa, odit.</div>
            </div>
          </div>
        </div>


      </div>


        </section>

        </main>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>