Compare commits
2 Commits
a178e8e885
...
ff1f0352a3
| Author | SHA1 | Date | |
|---|---|---|---|
| ff1f0352a3 | |||
| 66f357cc5a |
@@ -4,7 +4,7 @@
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-6 text-center text-md-start">
|
<div class="col-md-6 text-center text-md-start">
|
||||||
<p>
|
<p>
|
||||||
© 2024 Ecobjetivos. Todos los derechos
|
© 2025 Ecobjetivos. Todos los derechos
|
||||||
reservados.
|
reservados.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -24,225 +24,381 @@ const animateOnScroll = `
|
|||||||
---
|
---
|
||||||
|
|
||||||
<html lang="es">
|
<html lang="es">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta name="generator" content={Astro.generator} />
|
<meta name="generator" content={Astro.generator} />
|
||||||
<link rel="sitemap" href="/sitemap-index.xml" />
|
<link rel="sitemap" href="/sitemap-index.xml" />
|
||||||
<!-- Google tag (gtag.js) -->
|
<!-- Google tag (gtag.js) -->
|
||||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1JT18RF3R4"></script>
|
<script
|
||||||
<meta name="google-site-verification" content="aI_AQpT-EgmaU7QL0oOm4UJ4YbwJ5SBcp2rE30le7nk" />
|
async
|
||||||
<script>
|
src="https://www.googletagmanager.com/gtag/js?id=G-1JT18RF3R4"
|
||||||
window.dataLayer = window.dataLayer || [];
|
></script>
|
||||||
function gtag() {
|
<meta
|
||||||
dataLayer.push(arguments);
|
name="google-site-verification"
|
||||||
}
|
content="aI_AQpT-EgmaU7QL0oOm4UJ4YbwJ5SBcp2rE30le7nk"
|
||||||
gtag("js", new Date());
|
/>
|
||||||
gtag("config", "G-1JT18RF3R4");
|
<script>
|
||||||
</script>
|
window.dataLayer = window.dataLayer || [];
|
||||||
<meta name="description" content="Tu fuente de información sobre sostenibilidad y los Objetivos de Desarrollo Sostenible (ODS). Descubre cómo contribuir a un futuro más sostenible." />
|
function gtag() {
|
||||||
<link rel="icon" type="image/png" href="logo.png" />
|
dataLayer.push(arguments);
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
|
}
|
||||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
|
gtag("js", new Date());
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
|
gtag("config", "G-1JT18RF3R4");
|
||||||
<title>Ecobjetivos | Tu web de desarrollo Sostenible</title>
|
</script>
|
||||||
</head>
|
<meta
|
||||||
<body>
|
name="description"
|
||||||
<Navbar />
|
content="Tu fuente de información sobre sostenibilidad y los Objetivos de Desarrollo Sostenible (ODS). Descubre cómo contribuir a un futuro más sostenible."
|
||||||
<header class="header-bg text-white">
|
/>
|
||||||
<img src={"/imgs/bosqueverde.png"} alt="Bosque Verde" class="video-bg" />
|
<link rel="icon" type="image/png" href="logo.png" />
|
||||||
<video autoplay muted loop class="video-bg">
|
<link
|
||||||
<source src="/imgs/bosqueverde.mp4" type="video/mp4" />
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
||||||
Tu navegador no soporta la reproducción de videos.
|
rel="stylesheet"
|
||||||
</video>
|
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
|
||||||
|
/>
|
||||||
|
<title>Ecobjetivos | Tu web de desarrollo Sostenible</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<Navbar />
|
||||||
|
<header class="header-bg text-white">
|
||||||
|
<img
|
||||||
|
src={"/imgs/bosqueverde.png"}
|
||||||
|
alt="Bosque Verde"
|
||||||
|
class="video-bg"
|
||||||
|
/>
|
||||||
|
<video autoplay muted loop class="video-bg">
|
||||||
|
<source src="/imgs/bosqueverde.mp4" type="video/mp4" />
|
||||||
|
Tu navegador no soporta la reproducción de videos.
|
||||||
|
</video>
|
||||||
|
|
||||||
<div class="container text-center">
|
<div class="container text-center">
|
||||||
<h1 class="display-1 mb-4 animate__animated animate__fadeInDown londrina-sketch-regular">
|
<h1
|
||||||
Ecobjetivos: Sostenibilidad y Desarrollo
|
class="display-1 mb-4 animate__animated animate__fadeInDown londrina-sketch-regular"
|
||||||
</h1>
|
>
|
||||||
<p class="lead mb-5 animate__animated animate__fadeInUp animate__delay-1s">
|
Ecobjetivos: Sostenibilidad y Desarrollo
|
||||||
Construyendo juntos un futuro más verde y equitativo
|
</h1>
|
||||||
</p>
|
<p
|
||||||
<a href="#intro" class="btn btn-lg btn-outline-light animate__animated animate__zoomIn animate__delay-2s">Descubre más</a>
|
class="lead mb-5 animate__animated animate__fadeInUp animate__delay-1s"
|
||||||
</div>
|
>
|
||||||
</header>
|
Construyendo juntos un futuro más verde y equitativo
|
||||||
|
</p>
|
||||||
<main>
|
<a
|
||||||
<section id="intro" class="py-5 bg-light">
|
href="#intro"
|
||||||
<div class="container">
|
class="btn btn-lg btn-outline-light animate__animated animate__zoomIn animate__delay-2s"
|
||||||
<div class="row align-items-center">
|
>Descubre más</a
|
||||||
<div class="col-md-6 animate-on-scroll">
|
>
|
||||||
<h2 class="display-4 mb-4">¿Qué son los ODS?</h2>
|
|
||||||
<p class="lead">
|
|
||||||
Los Objetivos de Desarrollo Sostenible (ODS) son un llamado universal a la acción para erradicar la pobreza, proteger el planeta y garantizar que todas las personas gocen de paz y prosperidad para 2030. Estos objetivos buscan promover un desarrollo que asegure la sostenibilidad de nuestros recursos y ecosistemas para las futuras generaciones.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6 animate-on-scroll">
|
|
||||||
<div class="text-white p-5 text-center">
|
|
||||||
<Image src="/imgs/17Objetivos.png" alt="Los 17 Objetivos de Desarrollo Sostenible de la ONU" class="img-thumbnail .img-fluid" width="730" height="450" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</header>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<section id="objetivos" class="py-5">
|
|
||||||
<div class="container">
|
|
||||||
<h2 class="text-center mb-5 animate-on-scroll">Nuestros Objetivos Principales</h2>
|
|
||||||
<div class="row">
|
|
||||||
{
|
|
||||||
[
|
|
||||||
{ icon: "fa-chalkboard-teacher", title: "Educación en ODS", description: "Enseñar a la comunidad formas de vida sostenibles que cumplan con los Objetivos de Desarrollo Sostenible." },
|
|
||||||
{ icon: "fa-lightbulb", title: "Concienciación Energética", description: "Promover el uso eficiente de la energía en el hogar y el trabajo." },
|
|
||||||
{ icon: "fa-handshake", title: "Colaboración Comunitaria", description: "Fomentar la colaboración con organizaciones locales para proyectos sostenibles." },
|
|
||||||
{ icon: "fa-recycle", title: "Promoción del Reciclaje", description: "Incentivar la separación de residuos y el reciclaje en la comunidad para reducir el impacto ambiental." }
|
|
||||||
].map((obj, index) => (
|
|
||||||
<div class="col-md-6 col-lg-3 mb-4 animate-on-scroll">
|
|
||||||
<div class="card h-100 text-center">
|
|
||||||
<div class="card-body">
|
|
||||||
<i class={`fa-solid ${obj.icon} fa-3x mb-3 text-primary`} />
|
|
||||||
<h5 class="card-title">{obj.title}</h5>
|
|
||||||
<p class="card-text">{obj.description}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="impact" class="py-5 bg-success text-white">
|
<main>
|
||||||
<div class="container">
|
<section id="intro" class="py-5 bg-light">
|
||||||
<h2 class="text-center mb-5 animate-on-scroll">Nuestro Impacto</h2>
|
<div class="container">
|
||||||
<div class="row justify-content-center text-center">
|
<div class="row align-items-center">
|
||||||
{
|
<div class="col-md-6 animate-on-scroll">
|
||||||
[
|
<h2 class="display-4 mb-4">¿Qué son los ODS?</h2>
|
||||||
{ number: "500+", description: "Personas a las que hemos concienciado." },
|
<p class="lead">
|
||||||
{ number: "5+", description: "Proyectos creados para fomentar la sostenibilidad." }
|
Los Objetivos de Desarrollo Sostenible (ODS) son
|
||||||
].map((impact, index) => (
|
un llamado universal a la acción para erradicar
|
||||||
<div class="col-md-3 mb-4 animate-on-scroll">
|
la pobreza, proteger el planeta y garantizar que
|
||||||
<h3 class="display-4 fw-bold">{impact.number}</h3>
|
todas las personas gocen de paz y prosperidad
|
||||||
<p class="lead">{impact.description}</p>
|
para 2030. Estos objetivos buscan promover un
|
||||||
</div>
|
desarrollo que asegure la sostenibilidad de
|
||||||
))
|
nuestros recursos y ecosistemas para las futuras
|
||||||
}
|
generaciones.
|
||||||
</div>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
<div class="col-md-6 animate-on-scroll">
|
||||||
<section id="posts" class="py-5 bg-light">
|
<div class="text-white p-5 text-center">
|
||||||
<div class="container">
|
<Image
|
||||||
<h2 class="text-center mb-5 animate-on-scroll pt-1">Posts Recientes</h2>
|
src="/imgs/17Objetivos.png"
|
||||||
<ListadoPostsHorizontal />
|
alt="Los 17 Objetivos de Desarrollo Sostenible de la ONU"
|
||||||
</div>
|
class="img-thumbnail .img-fluid"
|
||||||
</section>
|
width="730"
|
||||||
|
height="450"
|
||||||
<section id="proyectos" class="py-5">
|
/>
|
||||||
<div class="container">
|
</div>
|
||||||
<h2 class="text-center mb-5 animate-on-scroll pt-2">Nuestros Proyectos</h2>
|
</div>
|
||||||
<div class="row">
|
</div>
|
||||||
{
|
|
||||||
[
|
|
||||||
{ title: "Proyecto Verde", description: "Iniciativa para reforestar áreas urbanas y rurales." },
|
|
||||||
{ title: "Educación para Todos", description: "Programa de educación inclusiva en comunidades desfavorecidas." },
|
|
||||||
{ title: "Energía Limpia", description: "Desarrollo de tecnologías para energías renovables." },
|
|
||||||
{ title: "Agua Limpia", description: "Proyectos para mejorar el acceso al agua potable." }
|
|
||||||
].map((project, index) => (
|
|
||||||
<div class="col-md-6 mb-4 animate-on-scroll">
|
|
||||||
<div class="card">
|
|
||||||
<div class="card-body">
|
|
||||||
<h5 class="card-title" aria-label="Proyecto">{project.title}</h5>
|
|
||||||
<p class="card-text">{project.description}</p>
|
|
||||||
<a href="#" class="btn disabled btn-success">Ver detalles</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
))
|
<section id="objetivos" class="py-5">
|
||||||
}
|
<div class="container">
|
||||||
</div>
|
<h2 class="text-center mb-5 animate-on-scroll">
|
||||||
</div>
|
Nuestros Objetivos Principales
|
||||||
</section>
|
</h2>
|
||||||
|
<div class="row">
|
||||||
|
{
|
||||||
|
[
|
||||||
|
{
|
||||||
|
icon: "fa-chalkboard-teacher",
|
||||||
|
title: "Educación en ODS",
|
||||||
|
description:
|
||||||
|
"Enseñar a la comunidad formas de vida sostenibles que cumplan con los Objetivos de Desarrollo Sostenible.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "fa-lightbulb",
|
||||||
|
title: "Concienciación Energética",
|
||||||
|
description:
|
||||||
|
"Promover el uso eficiente de la energía en el hogar y el trabajo.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "fa-handshake",
|
||||||
|
title: "Colaboración Comunitaria",
|
||||||
|
description:
|
||||||
|
"Fomentar la colaboración con organizaciones locales para proyectos sostenibles.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "fa-recycle",
|
||||||
|
title: "Promoción del Reciclaje",
|
||||||
|
description:
|
||||||
|
"Incentivar la separación de residuos y el reciclaje en la comunidad para reducir el impacto ambiental.",
|
||||||
|
},
|
||||||
|
].map((obj, index) => (
|
||||||
|
<div class="col-md-6 col-lg-3 mb-4 animate-on-scroll">
|
||||||
|
<div class="card h-100 text-center">
|
||||||
|
<div class="card-body">
|
||||||
|
<i
|
||||||
|
class={`fa-solid ${obj.icon} fa-3x mb-3 text-primary`}
|
||||||
|
/>
|
||||||
|
<h5 class="card-title">
|
||||||
|
{obj.title}
|
||||||
|
</h5>
|
||||||
|
<p class="card-text">
|
||||||
|
{obj.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section id="cta" class="py-5 bg-primary text-white text-center">
|
<section id="impact" class="py-5 bg-success text-white">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2 class="display-4 mb-4 animate-on-scroll">¡Únete al Cambio!</h2>
|
<h2 class="text-center mb-5 animate-on-scroll">
|
||||||
<p class="lead mb-5 animate-on-scroll">Juntos podemos crear un impacto duradero. Descubre cómo puedes contribuir a los ODS.</p>
|
Nuestro Impacto
|
||||||
<a href="/participa" class="btn btn-lg btn-light animate-on-scroll">¡Participa ahora!</a>
|
</h2>
|
||||||
</div>
|
<div class="row justify-content-center text-center">
|
||||||
</section>
|
{
|
||||||
</main>
|
[
|
||||||
|
{
|
||||||
|
number: "500+",
|
||||||
|
description:
|
||||||
|
"Personas a las que hemos concienciado.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
number: "5+",
|
||||||
|
description:
|
||||||
|
"Proyectos creados para fomentar la sostenibilidad.",
|
||||||
|
},
|
||||||
|
].map((impact, index) => (
|
||||||
|
<div class="col-md-3 mb-4 animate-on-scroll">
|
||||||
|
<h3 class="display-4 fw-bold">
|
||||||
|
{impact.number}
|
||||||
|
</h3>
|
||||||
|
<p class="lead">{impact.description}</p>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="posts" class="py-5 bg-light">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center mb-5 animate-on-scroll pt-1">
|
||||||
|
Posts Recientes
|
||||||
|
</h2>
|
||||||
|
<ListadoPostsHorizontal />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="proyectos" class="py-5">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center mb-5 animate-on-scroll pt-2">
|
||||||
|
Nuestros Proyectos Destacados
|
||||||
|
</h2>
|
||||||
|
<div class="row">
|
||||||
|
{
|
||||||
|
[
|
||||||
|
{
|
||||||
|
title: "Reforestación Urbana",
|
||||||
|
description:
|
||||||
|
"Hemos plantado más de 200 árboles en zonas urbanas para mejorar la calidad del aire y crear espacios verdes.",
|
||||||
|
image: "/imgs/reforestacion.jpg",
|
||||||
|
link: "/proyectos/reforestacion",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Talleres ODS en Escuelas",
|
||||||
|
description:
|
||||||
|
"Programa educativo que ha llegado a 15 escuelas enseñando los ODS a más de 500 estudiantes.",
|
||||||
|
image: "/imgs/talleres-escuelas.jpg",
|
||||||
|
link: "/proyectos/talleres-ods",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Podcast EcoVoces",
|
||||||
|
description:
|
||||||
|
"Serie de episodios que explora los 17 ODS con expertos en sostenibilidad y activistas locales.",
|
||||||
|
image: "/imgs/podcast-ods.jpg",
|
||||||
|
link: "/podcast",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Campaña Agua Limpia",
|
||||||
|
description:
|
||||||
|
"Iniciativa para instalar sistemas de filtración en comunidades con acceso limitado a agua potable.",
|
||||||
|
image: "/imgs/agua-limpia.jpg",
|
||||||
|
link: "/proyectos/agua-limpia",
|
||||||
|
},
|
||||||
|
].map((project, index) => (
|
||||||
|
<div class="col-md-6 mb-4 animate-on-scroll">
|
||||||
|
<div class="card h-100">
|
||||||
|
<div class="row g-0">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<img
|
||||||
|
src={project.image}
|
||||||
|
class="img-fluid rounded-start h-100 object-fit-cover"
|
||||||
|
alt={project.title}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-8">
|
||||||
|
<div class="card-body d-flex flex-column h-100">
|
||||||
|
<h5
|
||||||
|
class="card-title"
|
||||||
|
aria-label="Proyecto"
|
||||||
|
>
|
||||||
|
{project.title}
|
||||||
|
</h5>
|
||||||
|
<p class="card-text flex-grow-1">
|
||||||
|
{project.description}
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href={project.link}
|
||||||
|
class="btn btn-success mt-auto"
|
||||||
|
>
|
||||||
|
Ver detalles
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<Footer />
|
<section id="cta" class="py-5 bg-primary text-white text-center">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="display-4 mb-4 animate-on-scroll">
|
||||||
|
¡Únete al Cambio!
|
||||||
|
</h2>
|
||||||
|
<p class="lead mb-5 animate-on-scroll">
|
||||||
|
Juntos podemos crear un impacto duradero. Descubre cómo
|
||||||
|
puedes contribuir a los ODS.
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="/participa"
|
||||||
|
class="btn btn-lg btn-light animate-on-scroll"
|
||||||
|
>¡Participa ahora!</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
|
<Footer />
|
||||||
<script set:html={animateOnScroll} />
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
||||||
<style is:global>
|
<script
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital@0;1&display=swap");
|
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap");
|
></script>
|
||||||
|
<script set:html={animateOnScroll} />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6, p, a {
|
<style is:global>
|
||||||
font-family: "Inter Tight", sans-serif !important;
|
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital@0;1&display=swap");
|
||||||
font-optical-sizing: auto;
|
@import url("https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap");
|
||||||
font-weight: 400 !important;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
.londrina-sketch-regular {
|
|
||||||
font-family: "Londrina Sketch", sans-serif !important;
|
|
||||||
font-weight: 400;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style>
|
|
||||||
.header-bg {
|
|
||||||
background-color: #4caf50;
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.animate-on-scroll {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
.navbar-brand img {
|
|
||||||
height: 40px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-fit {
|
h1,
|
||||||
width: 100%;
|
h2,
|
||||||
height: 200px;
|
h3,
|
||||||
object-fit: cover;
|
h4,
|
||||||
border-radius: 8px;
|
h5,
|
||||||
}
|
h6,
|
||||||
|
p,
|
||||||
|
a {
|
||||||
|
font-family: "Inter Tight", sans-serif !important;
|
||||||
|
font-optical-sizing: auto;
|
||||||
|
font-weight: 400 !important;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
.londrina-sketch-regular {
|
||||||
|
font-family: "Londrina Sketch", sans-serif !important;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
.header-bg {
|
||||||
|
background-color: #4caf50;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.animate-on-scroll {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
.navbar-brand img {
|
||||||
|
height: 40px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
header {
|
.img-fit {
|
||||||
position: relative;
|
width: 100%;
|
||||||
overflow: hidden;
|
height: 200px;
|
||||||
}
|
object-fit: cover;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
.video-bg {
|
header {
|
||||||
position: absolute;
|
position: relative;
|
||||||
}
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.video-bg {
|
||||||
position: relative;
|
position: absolute;
|
||||||
z-index: 1;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.btn-outline-light:hover {
|
.container {
|
||||||
background-color: #ffffff;
|
position: relative;
|
||||||
color: #4caf50;
|
z-index: 1;
|
||||||
transition: background-color 0.3s ease, color 0.3s ease;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
.btn-outline-light:hover {
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
background-color: #ffffff;
|
||||||
background: #ffffff;
|
color: #4caf50;
|
||||||
}
|
transition:
|
||||||
.card:hover {
|
background-color 0.3s ease,
|
||||||
transform: translateY(-5px);
|
color 0.3s ease;
|
||||||
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
|
}
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
|
.card {
|
||||||
|
transition:
|
||||||
|
transform 0.3s ease,
|
||||||
|
box-shadow 0.3s ease;
|
||||||
|
background: #ffffff;
|
||||||
|
}
|
||||||
|
.card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
354
src/pages/proyectos/podcast.astro
Normal file
354
src/pages/proyectos/podcast.astro
Normal file
@@ -0,0 +1,354 @@
|
|||||||
|
---
|
||||||
|
// Podcast page
|
||||||
|
import Footer from "../../components/Footer.astro";
|
||||||
|
import Navbar from "../../components/Navbar.astro";
|
||||||
|
import { Image } from "astro:assets";
|
||||||
|
|
||||||
|
const animateOnScroll = `
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
const observer = new IntersectionObserver((entries) => {
|
||||||
|
entries.forEach(entry => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
entry.target.classList.add('animate__animated', 'animate__fadeIn');
|
||||||
|
entry.target.style.visibility = 'visible';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll('.animate-on-scroll').forEach(el => {
|
||||||
|
observer.observe(el);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
`;
|
||||||
|
|
||||||
|
// Lista de episodios del podcast
|
||||||
|
const episodes = [
|
||||||
|
{
|
||||||
|
title: "Sostenibilidad ¿Qué es?",
|
||||||
|
description:
|
||||||
|
"En este episodio comenzaremos dando forma a este tema que nos engloba tanto en nuestro día a día. Sabemos lo que es la sostenibilidad y de que trata ?, pues aquí nuestro protagonistas nos hablarán de ello, que haces que no los estás escuchando ya?¡¡CORREEEEE!!",
|
||||||
|
spotifyLink: "https://open.spotify.com/episode/218xJHgfhDBPAtr1qELCMa?si=FpuHWjR4TEegn0dDJLnO1w",
|
||||||
|
duration: "10:17",
|
||||||
|
date: "10 de diciembre de 2024",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Criterios ASG",
|
||||||
|
description:
|
||||||
|
"🎙️ Bienvenidos a Arreglamos el Mundo, el podcast donde exploramos ideas, soluciones y reflexiones para construir un futuro más sostenible y justo. 🌎 En este episodio, nos sumergimos en los criterios ASG: ambiental, social y de gobernanza. ¿Qué significan? ¿Cómo están transformando el mundo de los negocios, las inversiones y nuestras vidas? Acompáñanos mientras desglosamos cómo estas herramientas nos acercan a un mundo mejor. ¡Comencemos a arreglar el mundo, un criterio a la vez! 🌱✨",
|
||||||
|
spotifyLink: "https://open.spotify.com/episode/6dqCt8UAukJ8xD0lJnLZgp?si=2BDei-9IQqSVNyvXAYZj_Q",
|
||||||
|
duration: "14:11",
|
||||||
|
date: "10 de diciembre de 2024",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Economía Verde y Circular",
|
||||||
|
description:
|
||||||
|
"En este episodio, exploramos la Economía Verde y Circular: ¿Cómo podemos producir y consumir de manera sostenible? Hablamos sobre innovación, reciclaje, energías renovables y nuevos modelos de negocio que buscan equilibrar desarrollo y medioambiente. ¡Únete a la conversación y descubramos juntos soluciones para un futuro más verde! 🌍♻️",
|
||||||
|
spotifyLink: "https://open.spotify.com/episode/35E5Po2iiG5Fs2GsVfeCr7?si=THRxtld4QwCj1SmUvLT_TQ",
|
||||||
|
duration: "20:57",
|
||||||
|
date: "4 de marzo de 2025",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
---
|
||||||
|
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="generator" content={Astro.generator} />
|
||||||
|
<script
|
||||||
|
async
|
||||||
|
src="https://www.googletagmanager.com/gtag/js?id=G-1JT18RF3R4"
|
||||||
|
></script>
|
||||||
|
<meta
|
||||||
|
name="google-site-verification"
|
||||||
|
content="aI_AQpT-EgmaU7QL0oOm4UJ4YbwJ5SBcp2rE30le7nk"
|
||||||
|
/>
|
||||||
|
<script>
|
||||||
|
window.dataLayer = window.dataLayer || [];
|
||||||
|
function gtag() {
|
||||||
|
dataLayer.push(arguments);
|
||||||
|
}
|
||||||
|
gtag("js", new Date());
|
||||||
|
gtag("config", "G-1JT18RF3R4");
|
||||||
|
</script>
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Podcast Arreglamos el Mundo? - Podcast dinámico y entretenido
|
||||||
|
que aborda los desafíos y soluciones relacionadas
|
||||||
|
con la Sostenibilidad. "
|
||||||
|
/>
|
||||||
|
<link rel="icon" type="image/png" href="/logo.png" />
|
||||||
|
<link
|
||||||
|
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
|
||||||
|
/>
|
||||||
|
<title>Arreglamos el Mundo? | Ecobjetivos</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<Navbar />
|
||||||
|
|
||||||
|
<header class="podcast-header text-white py-5 mt-5">
|
||||||
|
<div class="container text-center">
|
||||||
|
<h1
|
||||||
|
class="display-3 mb-4 animate__animated animate__fadeInDown"
|
||||||
|
>
|
||||||
|
Arreglamos el Mundo?
|
||||||
|
</h1>
|
||||||
|
<p
|
||||||
|
class="lead mb-4 animate__animated animate__fadeInUp animate__delay-1s"
|
||||||
|
>
|
||||||
|
Podcast que aborda los desafíos sobre la Sostenibilidad.
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
class="d-flex justify-content-center gap-3 animate__animated animate__zoomIn animate__delay-1s"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="https://open.spotify.com/show/2snFzgOSnk1AVH4gx6HGG1?si=e8c250c65f534d72"
|
||||||
|
target="_blank"
|
||||||
|
class="btn btn-success btn-lg"
|
||||||
|
>
|
||||||
|
<i class="fab fa-spotify me-2"></i> Escuchar en Spotify
|
||||||
|
</a>
|
||||||
|
<!-- <a
|
||||||
|
href="https://podcasts.apple.com/podcast/example"
|
||||||
|
target="_blank"
|
||||||
|
class="btn btn-outline-light btn-lg"
|
||||||
|
>
|
||||||
|
<i class="fab fa-apple me-2"></i> Apple Podcasts
|
||||||
|
</a> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="py-5">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row align-items-center">
|
||||||
|
<div class="col-lg-6 animate-on-scroll">
|
||||||
|
<h2 class="display-5 mb-4">Sobre el Podcast</h2>
|
||||||
|
<p class="lead">
|
||||||
|
<strong>Arreglamos el Mundo</strong> es un Podcast dinámico y entretenido
|
||||||
|
que aborda los desafíos y soluciones relacionadas
|
||||||
|
con la Sostenibilidad.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Liderado por Rafa, el carismático
|
||||||
|
presentador, y Vicente, el productor y segundo presentador,
|
||||||
|
cada episodio se convierte en un espacio de debate
|
||||||
|
y aprendizaje. Junto a ellos, los expertos invitados
|
||||||
|
María Jesús y Rubén comparten conocimientos, experiencias
|
||||||
|
y perspectivas para inspirar a los oyentes a tomar
|
||||||
|
acción por un planeta más sostenible. Con conversaciones
|
||||||
|
cercanas, datos relevantes y un toque de humor, este
|
||||||
|
equipo busca, literalmente, arreglar el mundo. 🌍✨
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-lg-6 animate-on-scroll">
|
||||||
|
<iframe
|
||||||
|
style="border-radius:12px"
|
||||||
|
src="https://open.spotify.com/embed/show/2snFzgOSnk1AVH4gx6HGG1?utm_source=generator"
|
||||||
|
width="100%"
|
||||||
|
height="352"
|
||||||
|
frameBorder="0"
|
||||||
|
allowfullscreen=""
|
||||||
|
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
|
||||||
|
loading="lazy"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="py-5 bg-light">
|
||||||
|
<div class="container">
|
||||||
|
<h2 class="text-center mb-5 animate-on-scroll">
|
||||||
|
Episodios Destacados
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="row g-4">
|
||||||
|
{
|
||||||
|
episodes.map((episode, index) => (
|
||||||
|
<div class="col-md-6 animate-on-scroll">
|
||||||
|
<div class="card h-100 border-0 shadow-sm">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="d-flex justify-content-between mb-2">
|
||||||
|
<span class="badge bg-success" style="padding-top: 6px;">
|
||||||
|
{episode.date}
|
||||||
|
</span>
|
||||||
|
<span class="text-muted">
|
||||||
|
<i class="far fa-clock me-1" />
|
||||||
|
{episode.duration}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h3 class="h5 card-title">
|
||||||
|
{episode.title}
|
||||||
|
</h3>
|
||||||
|
<p class="card-text">
|
||||||
|
{episode.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="card-footer bg-white border-0">
|
||||||
|
<a
|
||||||
|
href={episode.spotifyLink}
|
||||||
|
target="_blank"
|
||||||
|
class="btn btn-outline-success w-100"
|
||||||
|
>
|
||||||
|
<i class="fab fa-spotify me-2" />{" "}
|
||||||
|
Escuchar episodio
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="py-5">
|
||||||
|
<div class="container">
|
||||||
|
<div class="row">
|
||||||
|
<div
|
||||||
|
class="col-lg-8 mx-auto text-center animate-on-scroll"
|
||||||
|
>
|
||||||
|
<h2 class="mb-4">¿Por qué escuchar Arreglamos el Mundo?</h2>
|
||||||
|
<div class="row g-4 mt-3">
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="p-3 bg-light rounded-3 h-100">
|
||||||
|
<i
|
||||||
|
class="fas fa-graduation-cap text-success fa-2x mb-3"
|
||||||
|
></i>
|
||||||
|
<h3 class="h5">Educación</h3>
|
||||||
|
<p class="mb-0">
|
||||||
|
Aprende sobre los ODS de forma clara
|
||||||
|
y amena con expertos en cada tema.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="p-3 bg-light rounded-3 h-100">
|
||||||
|
<i
|
||||||
|
class="fas fa-lightbulb text-success fa-2x mb-3"
|
||||||
|
></i>
|
||||||
|
<h3 class="h5">Inspiración</h3>
|
||||||
|
<p class="mb-0">
|
||||||
|
Descubre historias de proyectos
|
||||||
|
exitosos que están generando cambios
|
||||||
|
reales.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4">
|
||||||
|
<div class="p-3 bg-light rounded-3 h-100">
|
||||||
|
<i
|
||||||
|
class="fas fa-hands-helping text-success fa-2x mb-3"
|
||||||
|
></i>
|
||||||
|
<h3 class="h5">Acción</h3>
|
||||||
|
<p class="mb-0">
|
||||||
|
Cada episodio incluye consejos
|
||||||
|
prácticos que puedes implementar en
|
||||||
|
tu día a día.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="py-5 bg-success text-white">
|
||||||
|
<div class="container text-center">
|
||||||
|
<h2 class="mb-4 animate-on-scroll">
|
||||||
|
¿Tienes sugerencias para futuros episodios?
|
||||||
|
</h2>
|
||||||
|
<p class="lead mb-4 animate-on-scroll">
|
||||||
|
Nos encantaría conocer qué temas te interesan
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="/contacto"
|
||||||
|
class="btn btn-light btn-lg animate-on-scroll"
|
||||||
|
>
|
||||||
|
<i class="fas fa-envelope me-2"></i> Enviar sugerencia
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
|
||||||
|
<script
|
||||||
|
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
|
||||||
|
></script>
|
||||||
|
<script set:html={animateOnScroll} />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<style is:global>
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital@0;1&display=swap");
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap");
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
p,
|
||||||
|
a {
|
||||||
|
font-family: "Inter Tight", sans-serif !important;
|
||||||
|
font-optical-sizing: auto;
|
||||||
|
font-weight: 400 !important;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
.londrina-sketch-regular {
|
||||||
|
font-family: "Londrina Sketch", sans-serif !important;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.podcast-header {
|
||||||
|
background-color: #1db954; /* Color verde de Spotify */
|
||||||
|
background-image: linear-gradient(45deg, #1db954, #219653);
|
||||||
|
padding: 6rem 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.podcast-header::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url("/imgs/podcast-pattern.png");
|
||||||
|
opacity: 0.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-on-scroll {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.episode-card {
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.episode-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.object-fit-cover {
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user