Titulos a cada sección con responsive. ajustes de contenidos en los a…

…partados Unete, Soon, Faq y eventos. navbar funcional. secciones Unete y Soon con responsive
IEEE-ESTl · Mar 16, 2024 · 4c6e8cd · 4c6e8cd
1 parent 670d17e
commit 4c6e8cd
Show file tree

Hide file tree

Showing 10 changed files with 94 additions and 100 deletions.
diff --git a/src/components/Events.css b/src/components/Events.css
@@ -7,14 +7,16 @@
   justify-content: center;
   align-items: center;
   margin-top: 50px;
-  gap: 70px;
+  gap: 70px;  
+  padding-top: 3rem;
+  padding-bottom: 3rem;
 }
 
 .events {
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-direction: column;
+  flex-direction: column;  
 }
 
 .events h2 {

diff --git a/src/components/Events.tsx b/src/components/Events.tsx
@@ -36,7 +36,7 @@ import "swiper/css/scrollbar";
 export default function App() {
   return (
     <>
-      <div className="container">
+      <div className="container" id="Eventos">
         <div className="events">
           <h2 className="gray">Conferecias</h2>
           <h2>Tallereres</h2>

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -1,8 +1,8 @@
 ---
 import "./cssFooter/footer.css"
 ---
-
-<div class="container-header">
+<section class="separacion">
+<div class="container-header" id="Faq">
   <h2 class="header-footer">Preguntas frecuentes</h2>
 </div>
 <hr />
@@ -76,3 +76,4 @@ import "./cssFooter/footer.css"
     </div>
   </details>
 </section>
+</section>
diff --git a/src/components/Inicio.astro b/src/components/Inicio.astro
@@ -15,11 +15,11 @@ import "./cssInicio/variables.css"
 						alt="Logo de IEEE"
 					/>
 
-					<button class="botonNav">Inicio</button>
-					<button class="botonNav">Eventos</button>
-					<button class="botonNav">Próximamente</button>
+					<button class="botonNav"><a href="#Inicio">Inicio</a></button>
+					<button class="botonNav"><a href="#Eventos">Eventos</a></button>
+					<button class="botonNav"><a href="#Soon">Próximamente</a></button>
 					<button class="botonNav"><a href="#Unete">Únete</a></button>
-					<button class="botonNav">FAQ</button>
+					<button class="botonNav"><a href="#Faq">FAQ</a></button>
 					<div class="RedesyInicio">
 						<button class="botonNav">Redes</button>
 						<button class="irInicio">Inicio</button>

diff --git a/src/components/Soon.astro b/src/components/Soon.astro
@@ -10,16 +10,8 @@ import w6 from '../../public/SoonEvents/weekend6.jpeg'
 import w7 from '../../public/SoonEvents/weekend7.jpeg'
 ---
 
-<section class="soon">
-  <div class="dd">
-    <div>
-      <h1 class="titulo">Próximamente</h1>
-      <div class="underline"></div>
-    </div>
-    <div class="bt">
-      <a class="linkss" target="_blank" href="https://docs.google.com/forms/d/e/1FAIpQLSct2Q_Do6s-0msDDiMrhkQ8fgI643QsAvOi89RT6-RGoL6gTQ/viewform">Regístrate</a>
-  </div>
-  </div>
+<section class="soon" id="Soon">
+
   <swiper-container class="mySwiper" pagination="true" effect="coverflow" grab-cursor="true" centered-slides="true"
   slides-per-view="auto" coverflow-effect-rotate="50" coverflow-effect-stretch="0" coverflow-effect-depth="100"
   coverflow-effect-modifier="1" coverflow-effect-slide-shadows="true">
@@ -75,46 +67,27 @@ import w7 from '../../public/SoonEvents/weekend7.jpeg'
   background-color: #013d68;
 }
 
-.dd{
-  display: flex;
-  justify-content: space-between;
-  align-items: end;
-  padding-left: 100px;
-  padding-right: 100px;
-}
-
 .soon{
     width: 100%;
     height: auto;
     background-size: cover;
+    padding-top: 3rem;
 }
 
-.titulo {
-  color: #035b98;
-  font-size: 90px;
-  font-family: "Cousine", monospace;
-  text-align: left;
-}
-
-.underline {
-  width: 150px;
-  float: left;
-  border: 10px solid #035b98;
-}
 </style>
 <style>
   swiper-container {
     width: 100%;
-    padding-top: 50px;
-    padding-bottom: 20px;
+    padding-top: 4rem;
+    padding-bottom: 4rem;
   }
 
   swiper-slide {
     background-position: center;
     background-size: cover;
-    width: 500px;
+    width: 400px;
     height: auto;
-    margin-bottom: 40px;
+    margin-bottom: 80px;
   }
 
   swiper-slide img {

diff --git a/src/components/Titulos.astro b/src/components/Titulos.astro
@@ -0,0 +1,45 @@
+---
+interface Props {
+	titulo: string;
+}
+const { titulo } = Astro.props
+---
+<section>
+    <h1 class="titulo">{titulo}</h1>
+    <div class="underline"></div>
+</section>
+
+<style>
+    .titulo {
+        color: #035B98;
+        font-size: 90px;	
+        font-family: "Cousine", monospace;
+        line-height: 1;
+        text-align: right;
+        padding-top: 4rem;
+        padding-bottom: 1rem;	
+        padding-right: 1rem;
+
+    }
+    .underline
+    {
+        margin-right: 2rem;
+        width: 150px;
+        float: right;
+        border: 10px solid #035B98;
+    }
+
+    @media screen and (max-width:800px)
+    {
+    .titulo
+        {
+            text-align: left;
+        }
+    .underline
+        {
+            float: left;
+            position: relative;
+            left: 5%;
+        }
+    }
+</style>
diff --git a/src/components/Unete.astro b/src/components/Unete.astro
@@ -2,16 +2,14 @@
 import "./cssUnete/Unete.css"
 ---
 
-<section class="unete" id="Unete">
-  <h1 class="titulo">Únete</h1>
-  <div class="underline"></div>
+<section class="unete">
 <div class="beneficios">
   <div class="list">
     <h2 class="sub"><span class="tex"><span class="numero">1</span><span class="alterno">  Potencia</span> 
       <h3 class="tex">tus habilidades</h3>
     <p class="desc"> Uniendote al comité podrás desarrollar tus habilidades</p>
   </div>
-  <div class="list right">
+  <div class="list">
     <h2 class="sub"> Potencia <span class="tex"><span class="numero">2</span>
       <h3 class="tex">tus habilidades</h3>
     <p class="desc"> Uniendote al comité podrás desarrollar tus habilidades</p>
@@ -21,14 +19,14 @@ import "./cssUnete/Unete.css"
       <h3 class="tex">tus habilidades</h3>
     <p class="desc"> Uniendote al comité podrás desarrollar tus habilidades</p>
   </div>
-  <div class="list right">
+  <div class="list">
     <h2 class="sub">Potencia <span class="tex"><span class="numero">4</span>
       <h3 class="tex">tus habilidades</h3>
     <p class="desc"> Uniendote al comité podrás desarrollar tus habilidades</p>
   </div>
 </div>
 <div class="botones">
-  <a class="links" href="\-">Unirse</a>
+  <a class="links" href="">Unirse</a>
   <a class="links" href="\-">Saber más</a>
 </div>
 </section>
diff --git a/src/components/cssFooter/footer.css b/src/components/cssFooter/footer.css
@@ -11,7 +11,11 @@
     border-radius: 1.5em;
     margin: auto;
 }
-
+.separacion
+{
+    padding-top: 5rem;
+    padding-bottom: 4rem;
+}
 a{
     text-decoration: underline;
 }

diff --git a/src/components/cssUnete/Unete.css b/src/components/cssUnete/Unete.css
@@ -6,29 +6,12 @@
   height: auto;
   width: auto;
 }
-
-.titulo {
-  color: #035B98;
-  font-size: 90px;	
-  font-family: "Cousine", monospace;
-  line-height: 1;
-  text-align: right;
-  padding-top: 4rem;
-  padding-bottom: 1rem;	
-  padding-right: 1rem;
-
-}
-.underline
-{
-  margin-right: 2rem;
-  width: 150px;
-  float: right;
-  border: 10px solid #035B98;
-}
 .beneficios
 {
-  display: grid;
-    grid-template-columns: repeat(2, 1fr);
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  flex-wrap: wrap;
   padding-top: 30px;
 }
 .alterno
@@ -37,9 +20,8 @@
 }
 .list {
   padding: 3rem;
-  width: 370px;
+  width: 400px;
   height: auto;
-  padding-left:35%;
 }
 .sub
 {
@@ -71,7 +53,7 @@
 {
   display: flex;
   padding-top: 5rem;
-  padding-bottom: 5rem;
+  padding-bottom: 1rem;
   justify-content: center;
   gap: 9rem;
 }
@@ -97,32 +79,9 @@
 
   @media screen and (max-width:800px)
   {
-    .titulo
-    {
-      text-align: left;
-    }
-    .underline
-    {
-      float: left;
-      position: relative;
-      left: 5%;
-    }
-    .beneficios
-    {      
-      display: flex;
-      flex-direction: column;
-    }
-    .list
-    {
-      position: relative;
-      left: -50%;
-      padding: 0rem;
-      padding-top: 4rem;
-    }
     .botones
     {
       position:relative;
-      left: 13%;
       gap: 2rem;
     }
   }

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -9,13 +9,25 @@ import "../components/cssInicio/navInicio.css";
 import "../components/cssInicio/contenedorBienvenida.css";
 import Footer from "../components/Footer.astro";
 import Inicio from "../components/Inicio.astro";
+import Titulos from "../components/Titulos.astro";
 ---
 
 <Layout title="Welcome to StudentWebHub">
     <Inicio />
-    <Events client:load />
-    <Soon/>
+    <Titulos
+      titulo="Evéntos"
+    />
+    <Events />
+    <Titulos 
+      titulo="Próximo"  
+    />
+    <Soon />
+    <Titulos 
+     titulo="Únete" 
+    />
     <Unete />
+    <Titulos 
+      titulo="FAQ"  
+    />
     <Footer/>
-  </main>
 </Layout>