Compare commits
2 Commits
a178e8e885
...
ff1f0352a3
| Author | SHA1 | Date | |
|---|---|---|---|
| ff1f0352a3 | |||
| 66f357cc5a |
@@ -4,7 +4,7 @@
|
||||
<div class="row">
|
||||
<div class="col-md-6 text-center text-md-start">
|
||||
<p>
|
||||
© 2024 Ecobjetivos. Todos los derechos
|
||||
© 2025 Ecobjetivos. Todos los derechos
|
||||
reservados.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -24,225 +24,381 @@ const animateOnScroll = `
|
||||
---
|
||||
|
||||
<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} />
|
||||
<link rel="sitemap" href="/sitemap-index.xml" />
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<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="Tu fuente de información sobre sostenibilidad y los Objetivos de Desarrollo Sostenible (ODS). Descubre cómo contribuir a un futuro más sostenible." />
|
||||
<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>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>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<link rel="sitemap" href="/sitemap-index.xml" />
|
||||
<!-- Google tag (gtag.js) -->
|
||||
<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="Tu fuente de información sobre sostenibilidad y los Objetivos de Desarrollo Sostenible (ODS). Descubre cómo contribuir a un futuro más sostenible."
|
||||
/>
|
||||
<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>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">
|
||||
<h1 class="display-1 mb-4 animate__animated animate__fadeInDown londrina-sketch-regular">
|
||||
Ecobjetivos: Sostenibilidad y Desarrollo
|
||||
</h1>
|
||||
<p class="lead mb-5 animate__animated animate__fadeInUp animate__delay-1s">
|
||||
Construyendo juntos un futuro más verde y equitativo
|
||||
</p>
|
||||
<a href="#intro" class="btn btn-lg btn-outline-light animate__animated animate__zoomIn animate__delay-2s">Descubre más</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="intro" class="py-5 bg-light">
|
||||
<div class="container">
|
||||
<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>
|
||||
<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 class="container text-center">
|
||||
<h1
|
||||
class="display-1 mb-4 animate__animated animate__fadeInDown londrina-sketch-regular"
|
||||
>
|
||||
Ecobjetivos: Sostenibilidad y Desarrollo
|
||||
</h1>
|
||||
<p
|
||||
class="lead mb-5 animate__animated animate__fadeInUp animate__delay-1s"
|
||||
>
|
||||
Construyendo juntos un futuro más verde y equitativo
|
||||
</p>
|
||||
<a
|
||||
href="#intro"
|
||||
class="btn btn-lg btn-outline-light animate__animated animate__zoomIn animate__delay-2s"
|
||||
>Descubre más</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</header>
|
||||
|
||||
<section id="impact" class="py-5 bg-success text-white">
|
||||
<div class="container">
|
||||
<h2 class="text-center mb-5 animate-on-scroll">Nuestro Impacto</h2>
|
||||
<div class="row justify-content-center text-center">
|
||||
{
|
||||
[
|
||||
{ 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</h2>
|
||||
<div class="row">
|
||||
{
|
||||
[
|
||||
{ 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>
|
||||
<main>
|
||||
<section id="intro" class="py-5 bg-light">
|
||||
<div class="container">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</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="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>
|
||||
<section id="impact" class="py-5 bg-success text-white">
|
||||
<div class="container">
|
||||
<h2 class="text-center mb-5 animate-on-scroll">
|
||||
Nuestro Impacto
|
||||
</h2>
|
||||
<div class="row justify-content-center text-center">
|
||||
{
|
||||
[
|
||||
{
|
||||
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>
|
||||
<script set:html={animateOnScroll} />
|
||||
</body>
|
||||
</html>
|
||||
<Footer />
|
||||
|
||||
<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");
|
||||
<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>
|
||||
|
||||
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>
|
||||
.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;
|
||||
}
|
||||
<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");
|
||||
|
||||
.img-fit {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
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>
|
||||
.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 {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.img-fit {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.video-bg {
|
||||
position: absolute;
|
||||
}
|
||||
header {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.video-bg {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.btn-outline-light:hover {
|
||||
background-color: #ffffff;
|
||||
color: #4caf50;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.card {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
background: #ffffff;
|
||||
}
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
|
||||
}
|
||||
</style>
|
||||
.btn-outline-light:hover {
|
||||
background-color: #ffffff;
|
||||
color: #4caf50;
|
||||
transition:
|
||||
background-color 0.3s ease,
|
||||
color 0.3s ease;
|
||||
}
|
||||
|
||||
.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