diff --git a/config.json b/config.json index b288cb4..f9a1064 100644 --- a/config.json +++ b/config.json @@ -3,6 +3,7 @@ "branchDescription": "Somos un grupo de estudiantes apasionados por el saber. Nuestro objetivo es fomentar el conocimiento técnico, la colaboración y la innovación.", "socialNetworks": { "instagram": "https://www.instagram.com/ieee.estl/", - "linkedin": "https://www.linkedin.com/company/ieee-estl" + "linkedin": "https://www.linkedin.com/company/ieee-estl", + "github": "https://github.com/IEEE-ESTl/IEEE-ESTl-Student-Web-Hub" } } \ No newline at end of file diff --git a/public/Inicio/undraw_programming_re_kg9v.svg b/public/Inicio/undraw_programming_re_kg9v.svg new file mode 100644 index 0000000..930ba86 --- /dev/null +++ b/public/Inicio/undraw_programming_re_kg9v.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/Inicio/undraw_welcome_cats_thqn.svg b/public/Inicio/undraw_welcome_cats_thqn.svg new file mode 100644 index 0000000..c5527ab --- /dev/null +++ b/public/Inicio/undraw_welcome_cats_thqn.svg @@ -0,0 +1 @@ +welcome_cats \ No newline at end of file diff --git a/src/components/Carousel.astro b/src/components/Carousel.astro index 631fa2e..dc78dbd 100644 --- a/src/components/Carousel.astro +++ b/src/components/Carousel.astro @@ -57,7 +57,7 @@ const Logos = [branchLogo, ieeeLogo, csocietyLogo, uaehLogo, estlLogo]; article { display: flex; width: 200%; - margin-top: 60px; + margin-top: 100px; animation: carouselMove 50s linear infinite; } @@ -85,6 +85,17 @@ const Logos = [branchLogo, ieeeLogo, csocietyLogo, uaehLogo, estlLogo]; width: 300px; } + @media (max-width: 1030px) { + article { + animation: carouselMove 30s linear infinite; + margin-top: 50px; + + & img { + width: 200px; + } + } + } + @keyframes carouselMove { 0% { transform: translateX(0); diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 04914cd..396582a 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -44,4 +44,4 @@ const FAQ = [ )) } - + \ No newline at end of file diff --git a/src/components/Header.astro b/src/components/Header.astro index bd82166..c6f906a 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -6,26 +6,25 @@ import "./cssInicio/variables.css"; import branchLogo from "/public/Inicio/ieeelogo1.png"; -import imageMosaic from "/public/Inicio/1.png"; -import imageMosaic2 from "/public/Inicio/2.png"; -import imageMosaic3 from "/public/Inicio/3.jpg"; - import config from "../../config.json"; import InstagramIcon from "./icons/Instagram.astro"; import LinkedInIcon from "./icons/LinkedIn.astro"; -import Carousel from "./Carousel.astro"; +import GitHubIcon from "./icons/GitHub.astro"; --- \ No newline at end of file diff --git a/src/components/Inicio.astro b/src/components/Inicio.astro index 930b087..150c448 100644 --- a/src/components/Inicio.astro +++ b/src/components/Inicio.astro @@ -4,17 +4,12 @@ import "./cssInicio/fondo.css"; import "./cssInicio/navInicio.css"; import "./cssInicio/variables.css"; -import branchLogo from "/public/Inicio/ieeelogo1.png"; - import imageMosaic from "/public/Inicio/1.png"; import imageMosaic2 from "/public/Inicio/2.png"; import imageMosaic3 from "/public/Inicio/3.jpg"; import config from "../../config.json"; -import InstagramIcon from "./icons/Instagram.astro"; -import LinkedInIcon from "./icons/LinkedIn.astro"; - import Carousel from "./Carousel.astro"; --- @@ -23,7 +18,7 @@ import Carousel from "./Carousel.astro";
-

{"Bienvenido a " + config.branchName}

+

{config.branchName}

{" "} {config.branchDescription}{" "} @@ -46,4 +41,4 @@ import Carousel from "./Carousel.astro";

-
+ \ No newline at end of file diff --git a/src/components/Soon.tsx b/src/components/Soon.tsx index 17f9e98..0b85064 100644 --- a/src/components/Soon.tsx +++ b/src/components/Soon.tsx @@ -4,72 +4,54 @@ import "swiper/css/effect-coverflow"; import "swiper/css/pagination"; import "./cssSoon/soon.css"; import { EffectCoverflow, Pagination } from "swiper/modules"; -import cw from "../../public/SoonEvents/cw.jpeg"; -import w1 from "../../public/SoonEvents/weekend1.jpeg"; -import w2 from "../../public/SoonEvents/weekend2.jpeg"; -import w3 from "../../public/SoonEvents/weekend3.jpeg"; -import w4 from "../../public/SoonEvents/weekend4.jpeg"; -import w5 from "../../public/SoonEvents/weekend5.jpeg"; -import w6 from "../../public/SoonEvents/weekend6.jpeg"; -import w7 from "../../public/SoonEvents/weekend7.jpeg"; + +import comingSoon from "/public/Inicio/undraw_programming_re_kg9v.svg"; type Card = { src: string; }; -const card: Card[] = [ - { - src: cw.src, - }, - { - src: w1.src, - }, - { - src: w2.src, - }, - { - src: w3.src, - }, - { - src: w4.src, - }, - { - src: w5.src, - }, - { - src: w6.src, - }, - { - src: w7.src, - }, -]; +const card: Card[] = []; export default function App() { return ( <> + {" "} - - {card.map((Card, index) => ( - - - - ))} - + {card.length === 0 && ( +
+ +

Proximamente...

+
+ )} + + {card.length !== 0 && ( + + {card.map((Card, index) => ( + + + + ))} + + )} + ); } diff --git a/src/components/Titulos.astro b/src/components/Titulos.astro index 0ea09bd..2b3b7f9 100644 --- a/src/components/Titulos.astro +++ b/src/components/Titulos.astro @@ -23,6 +23,17 @@ const { titulo } = Astro.props padding-left: 1rem; } + + @media screen and (max-width:1030px) + { + .titulo + { + font-size: 50px; + } + } + + + .underline { margin-left: 2rem; diff --git a/src/components/Unete.astro b/src/components/Unete.astro index e6e7103..ac28ca3 100644 --- a/src/components/Unete.astro +++ b/src/components/Unete.astro @@ -1,32 +1,51 @@ --- import "./cssUnete/Unete.css" + +import welcome from "/public/Inicio/undraw_welcome_cats_thqn.svg" ---
-

1 Potencia -

tus habilidades

-

Uniendote al comité podrás desarrollar tus habilidades

-

-
-

Potencia 2 -

tus habilidades

-

Uniendote al comité podrás desarrollar tus habilidades

+

1 {" "} Mejora +

tu carrera

+

Estableciendo contactos con expertos técnicos

+
-

3 Potencia -

tus habilidades

-

Uniendote al comité podrás desarrollar tus habilidades

-

+

2 {" "} Aprende +

de los mejores

+

Conferencias y talleres de expertos en el área

+ +

+
-

Potencia 4 -

tus habilidades

-

Uniendote al comité podrás desarrollar tus habilidades

-

+

3 {" "} Conoce +

a tu comunidad

+

Conoce a otros estudiantes y profesionales de tu área

+ +
+ + welcome + Unirse - Saber más +

+ + + \ No newline at end of file diff --git a/src/components/cssEvents/Events.css b/src/components/cssEvents/Events.css index 314df12..9dcdf19 100644 --- a/src/components/cssEvents/Events.css +++ b/src/components/cssEvents/Events.css @@ -62,9 +62,23 @@ img { margin: 0 0 16px; } +@media (max-width: 1030px) { + .container { + flex-direction: column; + gap: 0; + } + + + + .events { + display: none; + } + +} + .span-events { color: rgb(75, 75, 75); - font-size: 2.8rem; + font-size: 4rem; font-weight: 700; text-transform: uppercase; display: block; @@ -88,6 +102,7 @@ img { } @keyframes a { + 0%, 16.667%, 100% { @@ -101,6 +116,7 @@ img { } @keyframes a2 { + 0%, 100% { opacity: 0; @@ -118,6 +134,7 @@ img { } @keyframes a3 { + 0%, 50%, 100% { @@ -128,4 +145,4 @@ img { 83.333% { opacity: 1; } -} +} \ No newline at end of file diff --git a/src/components/cssInicio/contenedorBienvenida.css b/src/components/cssInicio/contenedorBienvenida.css index c64bcbd..cd7720a 100644 --- a/src/components/cssInicio/contenedorBienvenida.css +++ b/src/components/cssInicio/contenedorBienvenida.css @@ -4,13 +4,20 @@ padding: 0; scroll-behavior: smooth; } + .contenedorBienvenida { - margin-top: 15vh; display: flex; flex-direction: row; font-family: "Cousine", monospace; } +@media (max-width: 1030px) { + .contenedorBienvenida { + flex-direction: column; + margin-top: 4vh; + } +} + h1 { margin: 10px; } @@ -18,10 +25,9 @@ h1 { .textobienvenida { width: 45%; padding: 35px; - padding-top: 13vh; padding-left: 6vw; - color: black; - font-size: 1.9rem; + color: #0371A4; + font-size: 3rem; } .textobienvenida p { @@ -29,21 +35,58 @@ h1 { text-align: justify; color: black; margin-bottom: 10px; - font-size: 1.2rem; - line-height: 1.5; - font-family: "Cousine", monospace; - font-weight: 400; - letter-spacing: 0.5px; - color: black; + font-size: 1.2rem; +} + - +@media (max-width: 1330px) { + .textobienvenida { + width: auto; + font-size: 2.4rem; + } + .textobienvenida p { + padding-left: 3px; + text-align: justify; + color: black; + margin-bottom: 10px; + font-size: 1.2rem; + line-height: 1.5; + font-family: "Cousine", monospace; + font-weight: 300; + letter-spacing: 0.5px; + color: black; + font-size: 1rem; + padding-right: 50px; + } +} + +@media (max-width: 1030px) { + .textobienvenida { + padding-top: 0px; + } +} + +@media (max-width: 668px) { + + .textobienvenida { + padding: 0px; + padding-left: 4px; + padding-right: 4px; + font-size: 1.5rem; + } + + .textobienvenida p { + font-size: .8rem; + padding-left: 4px; + padding-right: 4px; + } } .imagenesbienvenida { @@ -58,13 +101,19 @@ h1 { align-items: center; } +@media (max-width: 1030px) { + .imagenesbienvenida { + display: none; + } +} + .logotiposBienvenida { - background-color: transparent; } .divContactar { margin-left: 30px; + margin-top: 20px; } .Contactar1, @@ -82,6 +131,16 @@ h1 { font-size: 1.2rem; } +@media (max-width: 1030px) { + + .Contactar1, + .Contactar2 { + padding-left: 10px; + padding-right: 10px; + font-size: .9rem; + } +} + .Contactar1 { background-color: var(--azulfuerte); color: white; @@ -130,7 +189,8 @@ h1 { margin-left: 22px; } + a { text-decoration: none; color: black; -} +} \ No newline at end of file diff --git a/src/components/cssInicio/fondo.css b/src/components/cssInicio/fondo.css index 485f175..575102c 100644 --- a/src/components/cssInicio/fondo.css +++ b/src/components/cssInicio/fondo.css @@ -5,7 +5,6 @@ body { .containerInicio { margin: 0; padding: 0; - height: 100vh; width: 100vw; position: relative; display: flex; @@ -13,59 +12,11 @@ body { justify-content: center; } -.esferaAzul { - z-index: 1; - width: 30.5vw; - height: 30.5vw; - border-radius: 50%; - background-image: linear-gradient(to left bottom, var(--azuldebil), var(--azuldebil), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul)); - animation: vibrateEsfera 3s linear infinite both; - box-shadow: 0 0 20px white, 0 0 20px var(--azul); -} - -.esferaAzul.ubicacionEsfera { - position: absolute; - top: 15vh; - right:8vw; -} .filtroInicio { width: 100%; - height: 100vh; background: #fff; - background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.07), rgba(183, 191, 206, 0.3)); - backdrop-filter: var(--backdrop-filter); border-radius: 0px; z-index: 10; - border: 1px solid #827d8a; padding: 6px; -} - -@keyframes vibrateEsfera { - 0% { - transform: translate(0); - } - - 20% { - transform: translate(9px, -9px); - background-image: linear-gradient(to left bottom, var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul)); - } - - 40% { - transform: translate(9px, 9px); - background-image: linear-gradient(to left bottom, var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul)); - } - - 60% { - transform: translate(-9px, -9px); - background-image: linear-gradient(to left bottom, var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul), var(--azul)); - } - - 80% { - transform: translate(-9px, 9px); - } - - 100% { - transform: translate(0); - } -} +} \ No newline at end of file diff --git a/src/components/cssInicio/navInicio.css b/src/components/cssInicio/navInicio.css index f32fd94..c7d31fd 100644 --- a/src/components/cssInicio/navInicio.css +++ b/src/components/cssInicio/navInicio.css @@ -2,6 +2,7 @@ width: 145px; left: 0; position: absolute; + margin-left: 50px; } .menuInicio { @@ -16,7 +17,7 @@ height: 100px; width: 100%; - z-index: 1000; + z-index: 50; background-color: white; @@ -24,10 +25,83 @@ text-decoration: none; color: black; - font-size: 20px; + font-size: 22px; + } + + & a:hover { + color: #035B98; + } + + & .socialNetwoks { + font-size: 38px; + } + + & .socialNetwoks:hover { + color: black; + } +} + +@media (max-width: 1030px) { + .menuInicio { + height: 70px; + } + + .logoIEEE { + width: 100px; + } + + & .menuInicio a { + font-size: 18px; + } + + & .menuInicio .socialNetwoks { + font-size: 30px; + } +} + +@media (max-width: 920px) { + .menuInicio { + height: 60px; + } + + .logoIEEE { + width: 80px; + } + + & .menuInicio a { + font-size: 16px; + } + + & .menuInicio .socialNetwoks { + font-size: 26px; } } +@media (max-width: 800px) { + .menuInicio { + height: 50px; + } + + .logoIEEE { + width: 70px; + } + + & .menuInicio a { + font-size: 14px; + } + + & .menuInicio .socialNetwoks { + font-size: 22px; + } +} + +@media (max-width: 700px) { + .navInicio{ + display: none; + } +} + + .menuInicio .botonNav { font-weight: bolder; letter-spacing: 0.5px; diff --git a/src/components/cssSoon/soon.css b/src/components/cssSoon/soon.css index 417890f..aa33f6d 100644 --- a/src/components/cssSoon/soon.css +++ b/src/components/cssSoon/soon.css @@ -12,7 +12,18 @@ height: 500px; } +@media (max-width: 1030px) { + .swiper.mySwiper1 { + height: 400px; + } + + .swiper.mySwiper1 .swiper-slide { + width: 300px; + height: 300px; + } +} + .swiper.mySwiper1 .swiper-slide img { display: block; width: 100%; -} +} \ No newline at end of file diff --git a/src/components/cssUnete/Unete.css b/src/components/cssUnete/Unete.css index cea7dbb..8193522 100644 --- a/src/components/cssUnete/Unete.css +++ b/src/components/cssUnete/Unete.css @@ -52,10 +52,10 @@ .botones { display: flex; - padding-top: 5rem; - padding-bottom: 1rem; + + justify-content: center; - gap: 9rem; + } .links { @@ -67,7 +67,22 @@ border-radius: 10px; text-align: center; color: #ffff; - padding-top: 15px; + padding: 8px; + + font-size: 20px; + font-weight: bold; + text-transform: uppercase; + transition: 0.4s; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + gap: 5px; + text-decoration: none; + color: #ffff; + font-size: 20px; + } .links:hover { diff --git a/src/components/icons/GitHub.astro b/src/components/icons/GitHub.astro new file mode 100644 index 0000000..d883282 --- /dev/null +++ b/src/components/icons/GitHub.astro @@ -0,0 +1,6 @@ + +--- +const props = Astro.props +--- + + diff --git a/src/pages/index.astro b/src/pages/index.astro index c728af2..fd9bd51 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -21,9 +21,7 @@ import Titulos from "../components/Titulos.astro";

Nos esforzamos por ofrecer una amplia gama de actividades diseñadas para enriquecer la experiencia educativa de nuestros miembros, así como para - fomentar el crecimiento profesional y personal. Desde conferencias técnicas - hasta talleres prácticos, pasando por competiciones emocionantes y - actividades sociales, hay algo para todos en nuestra comunidad. + fomentar el crecimiento profesional y personal.

@@ -36,17 +34,55 @@ import Titulos from "../components/Titulos.astro"; - - - -