Merge pull request #9 from IEEE-ESTl/footer

Add: Footer

src/components/Footer.astro

@@ -0,0 +1,78 @@
+---
+import "./cssFooter/footer.css"
+---
+
+<div class="container-header">
+  <h2 class="header-footer">Preguntas frecuentes</h2>
+</div>
+<hr />
+<section class="footer-container">
+  <details class="styled">
+    <summary>¿Qué es IEEE?</summary>
+    <div>
+      <p>
+        IEEE, que significa "Institute of Electrical and Electronics Engineers"
+        (Instituto de Ingenieros Eléctricos y Electrónicos), es una organización
+        profesional internacional dedicada al avance de la tecnología en
+        diversas áreas, como la ingeniería eléctrica, la electrónica, las
+        telecomunicaciones, la informática y áreas relacionadas. La rama
+        estudiantil de IEEE en nuestra universidad es una subdivisión local de
+        esta organización, compuesta por estudiantes interesados en estas
+        disciplinas.
+      </p>
+    </div>
+  </details>
+
+  <details class="styled">
+    <summary
+      >¿Qué hace la rama estudiantil de IEEE en nuestra universidad?</summary
+    >
+    <div>
+      <p>
+        Permite traer diferentes tipos de actividades dentro de la universidad,
+        así como oportunidades de crecer dentro del áre de investigación. Así
+        mismo te da beneficios pertenecer a la rama estudiantil dando peso
+        curricular.
+      </p>
+    </div>
+  </details>
+
+  <details class="styled">
+    <summary>¿Cuáles son los beneficios de unirse a IEEE?</summary>
+    <div>
+      <p>
+        <ul>
+          <li>Participar en actividades dentro del instituto.</li>
+          <li>Descuentos para los eventos creados por el IEEE.</li>
+          <li>Newsletter con noticias dentro del área.</li>
+          <li>Correo con dominio del instituto.</li>
+          <li>
+            Reconocimiento y publicaciones dentro de la revista del instituto.
+          </li>
+        </ul>
+      </p>
+    </div>
+  </details>
+
+  <details class="styled">
+    <summary
+      >¿Qué tipo de actividades realiza la rama estudiantil de IEEE?</summary
+    >
+    <div>
+      <p>¡Talleres, conferencias, eventos y más!</p>
+    </div>
+  </details>
+
+  <details class="styled">
+    <summary
+      >¿Cómo puedo participar en eventos y conferencias organizados por IEEE?
+    </summary>
+    <div>
+      <p>
+        Dentro de este sitio web te puedes enterar de los eventos y conferencias
+        antes que nadie.No olvides seguirnos en nuestras redes sociales donde se
+        dan detalles y fechas sobre cualquier evento
+      </p>
+    </div>
+  </details>
+</section>

src/components/cssFooter/footer.css

@@ -0,0 +1,55 @@
+.header-footer{
+    color: #035B98;
+    text-align: center;
+    text-decoration: underline #035B98 solid;
+}
+
+.footer-container{
+    max-width: 70%;
+    max-height: 70%;
+    border: #035B98 3px solid;
+    border-radius: 1.5em;
+    margin: auto;
+}
+
+a{
+    text-decoration: underline;
+}
+
+details > summary {
+    list-style-type: '⮕';
+}
+
+details[open] > summary {
+    list-style-type: '⬇';
+}
+
+details.styled{
+    color: black;
+    font-size: 18px;
+    padding:0.7em 6em;
+    border: 1px solid #808080;
+    border-radius: 1em;
+    margin: 1em;
+    transition: all 0.4s ease-in-out;
+    max-height: 4em;
+    overflow: hidden;
+}
+
+details[open].styled {
+	background-color: rgba(0,0,0,0.1);
+	max-height: 500px;
+}
+
+details.styled summary{
+    outline: none;
+    cursor: pointer;
+}
+
+details[open].styled summary{
+    padding-bottom: 1em;
+}
+
+li{
+    list-style: none;
+}

src/pages/index.astro

@@ -2,6 +2,7 @@
 import Layout from "../layouts/Layout.astro";
 import Events from "../components/Events.tsx";
 import Unete from "../components/Unete.astro";
+import Footer from "../components/Footer.astro";
 import "../components/cssInicio/variables.css";
 import "../components/cssInicio/fondo.css";
 import "../components/cssInicio/navInicio.css";
@@ -59,5 +60,6 @@ import "../components/cssInicio/contenedorBienvenida.css";
     </div>
     <Events client:load />
     <Unete />
+    <Footer/>
   </main>
 </Layout>