Merge branch 'main' of https://git.h4ckdata.es/h4ckx0r/webSostenible
This commit is contained in:
@@ -11,7 +11,7 @@ const posts = await Astro.glob("../pages/posts/*.mdx");
|
|||||||
<h5 class="card-title">
|
<h5 class="card-title">
|
||||||
{post.frontmatter.titulo}
|
{post.frontmatter.titulo}
|
||||||
</h5>
|
</h5>
|
||||||
<p class="card-text">
|
<p class="card-text post-content">
|
||||||
{post.frontmatter.descripcion}
|
{post.frontmatter.descripcion}
|
||||||
...
|
...
|
||||||
</p>
|
</p>
|
||||||
@@ -23,4 +23,15 @@ const posts = await Astro.glob("../pages/posts/*.mdx");
|
|||||||
</div>
|
</div>
|
||||||
))
|
))
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.post-content {
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
-webkit-line-clamp: 4; /* Limita a 4 líneas */
|
||||||
|
line-height: 1.5; /* Ajusta según el diseño */
|
||||||
|
max-height: calc(1.5em * 4); /* Calcula la altura máxima */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -24,317 +24,245 @@ 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
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1JT18RF3R4"></script>
|
||||||
async
|
<script>
|
||||||
src="https://www.googletagmanager.com/gtag/js?id=G-1JT18RF3R4"
|
window.dataLayer = window.dataLayer || [];
|
||||||
></script>
|
function gtag() {
|
||||||
<script>
|
dataLayer.push(arguments);
|
||||||
window.dataLayer = window.dataLayer || [];
|
}
|
||||||
function gtag() {
|
gtag("js", new Date());
|
||||||
dataLayer.push(arguments);
|
gtag("config", "G-1JT18RF3R4");
|
||||||
}
|
</script>
|
||||||
gtag("js", new Date());
|
<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>
|
||||||
|
|
||||||
gtag("config", "G-1JT18RF3R4");
|
<div class="container text-center">
|
||||||
</script>
|
<h1 class="display-1 mb-4 animate__animated animate__fadeInDown londrina-sketch-regular">
|
||||||
<meta
|
Ecobjetivos: Sostenibilidad y Desarrollo
|
||||||
name="description"
|
</h1>
|
||||||
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."
|
<p class="lead mb-5 animate__animated animate__fadeInUp animate__delay-1s">
|
||||||
/>
|
Construyendo juntos un futuro más verde y equitativo
|
||||||
<link rel="icon" type="image/png" href="logo.png" />
|
</p>
|
||||||
<link
|
<a href="#intro" class="btn btn-lg btn-outline-light animate__animated animate__zoomIn animate__delay-2s">Descubre más</a>
|
||||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
</div>
|
||||||
rel="stylesheet"
|
</header>
|
||||||
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">
|
<main>
|
||||||
<h1
|
<section id="intro" class="py-5 bg-light">
|
||||||
class="display-1 mb-4 animate__animated animate__fadeInDown londrina-sketch-regular"
|
<div class="container">
|
||||||
>
|
<div class="row align-items-center">
|
||||||
Ecobjetivos: Sostenibilidad y Desarrollo
|
<div class="col-md-6 animate-on-scroll">
|
||||||
</h1>
|
<h2 class="display-4 mb-4">¿Qué son los ODS?</h2>
|
||||||
<p
|
<p class="lead">
|
||||||
class="lead mb-5 animate__animated animate__fadeInUp animate__delay-1s"
|
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>
|
||||||
Construyendo juntos un futuro más verde y equitativo
|
</div>
|
||||||
</p>
|
<div class="col-md-6 animate-on-scroll">
|
||||||
<a
|
<div class="text-white p-5 text-center">
|
||||||
href="#intro"
|
<Image src="/imgs/17Objetivos.png" alt="Los 17 Objetivos de Desarrollo Sostenible de la ONU" class="img-thumbnail .img-fluid" width="730" height="450" />
|
||||||
class="btn btn-lg btn-outline-light animate__animated animate__zoomIn animate__delay-2s"
|
</div>
|
||||||
>Descubre más</a
|
</div>
|
||||||
>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</section>
|
||||||
|
|
||||||
<main>
|
<section id="objetivos" class="py-5">
|
||||||
<section id="intro" class="py-5 bg-light">
|
<div class="container">
|
||||||
<div class="container">
|
<h2 class="text-center mb-5 animate-on-scroll">Nuestros Objetivos Principales</h2>
|
||||||
<div class="row align-items-center">
|
<div class="row">
|
||||||
<div class="col-md-6 animate-on-scroll">
|
{
|
||||||
<h2 class="display-4 mb-4">¿Qué son los ODS?</h2>
|
[
|
||||||
<p class="lead">
|
{ icon: "fa-seedling", title: "Vida de Ecosistemas Terrestres", description: "Proteger, restaurar y promover el uso sostenible de los ecosistemas terrestres." },
|
||||||
Los Objetivos de Desarrollo Sostenible (ODS) son
|
{ icon: "fa-hands-holding-circle", title: "Reducción de Desigualdades", description: "Reducir la desigualdad en y entre los países." },
|
||||||
un llamado universal a la acción para erradicar
|
{ icon: "fa-graduation-cap", title: "Educación de Calidad", description: "Garantizar una educación inclusiva, equitativa y de calidad." },
|
||||||
la pobreza, proteger el planeta y garantizar que
|
{ icon: "fa-industry", title: "Industria, Innovación e Infraestructura", description: "Construir infraestructuras resilientes, promover la industrialización inclusiva y sostenible." }
|
||||||
todas las personas gocen de paz y prosperidad
|
].map((obj, index) => (
|
||||||
para 2030. Estos objetivos buscan promover un
|
<div class="col-md-6 col-lg-3 mb-4 animate-on-scroll">
|
||||||
desarrollo que asegure la sostenibilidad de
|
<div class="card h-100 text-center">
|
||||||
nuestros recursos y ecosistemas para las futuras
|
<div class="card-body">
|
||||||
generaciones.
|
<i class={`fa-solid ${obj.icon} fa-3x mb-3 text-primary`} />
|
||||||
</p>
|
<h5 class="card-title">{obj.title}</h5>
|
||||||
</div>
|
<p class="card-text">{obj.description}</p>
|
||||||
<div class="col-md-6 animate-on-scroll">
|
</div>
|
||||||
<div class="text-white p-5 text-center">
|
</div>
|
||||||
<Image
|
</div>
|
||||||
src="/imgs/17Objetivos.png"
|
))
|
||||||
alt="Los 17 Objetivos de Desarrollo Sostenible de la ONU"
|
}
|
||||||
class="img-thumbnail .img-fluid"
|
</div>
|
||||||
width="730"
|
</div>
|
||||||
height="450"
|
</section>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="objetivos" class="py-5">
|
<section id="impact" class="py-5 bg-success text-white">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2 class="text-center mb-5 animate-on-scroll">
|
<h2 class="text-center mb-5 animate-on-scroll">Nuestro Impacto</h2>
|
||||||
Nuestros Objetivos Principales
|
<div class="row text-center">
|
||||||
</h2>
|
{
|
||||||
<div class="row">
|
[
|
||||||
{
|
{ number: "1M+", description: "Personas impactadas" },
|
||||||
[
|
{ number: "500K", description: "Árboles plantados" },
|
||||||
"fa-seedling",
|
{ number: "100+", description: "Proyectos completados" },
|
||||||
"fa-hands-holding-circle",
|
{ number: "50+", description: "Países involucrados" }
|
||||||
"fa-graduation-cap",
|
].map((impact, index) => (
|
||||||
"fa-industry",
|
<div class="col-md-3 mb-4 animate-on-scroll">
|
||||||
].map((icon, index) => (
|
<h3 class="display-4 fw-bold">{impact.number}</h3>
|
||||||
<div class="col-md-6 col-lg-3 mb-4 animate-on-scroll">
|
<p class="lead">{impact.description}</p>
|
||||||
<div class="card h-100 text-center">
|
</div>
|
||||||
<div class="card-body">
|
))
|
||||||
<i
|
}
|
||||||
class={`fa-solid ${icon} fa-3x mb-3 text-primary`}
|
</div>
|
||||||
/>
|
</div>
|
||||||
<h5 class="card-title">
|
</section>
|
||||||
Objetivo {index + 1}
|
|
||||||
</h5>
|
|
||||||
<p class="card-text">
|
|
||||||
Descripción del objetivo{" "}
|
|
||||||
{index + 1}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="impact" class="py-5 bg-success text-white">
|
<section id="gallery" class="py-5">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2 class="text-center mb-5 animate-on-scroll">
|
<h2 class="text-center mb-5 animate-on-scroll">Galería de Impacto</h2>
|
||||||
Nuestro Impacto
|
<div class="row g-4">
|
||||||
</h2>
|
{
|
||||||
<div class="row text-center">
|
[1, 2, 3, 4, 5, 6].map((num) => (
|
||||||
{
|
<div class="col-md-4 animate-on-scroll">
|
||||||
["1M+", "500K", "100+", "50+"].map(
|
<div class="bg-light p-4 text-center">
|
||||||
(number, index) => (
|
<Image src={`/imgs/imgimp${num}.jpg`} alt={`Imagen de impacto ${num}`} class="img-fluid img-fit" width="10" height="10" />
|
||||||
<div class="col-md-3 mb-4 animate-on-scroll">
|
</div>
|
||||||
<h3 class="display-4 fw-bold">
|
</div>
|
||||||
{number}
|
))
|
||||||
</h3>
|
}
|
||||||
<p class="lead">
|
</div>
|
||||||
Estadística {index + 1}
|
</div>
|
||||||
</p>
|
</section>
|
||||||
</div>
|
|
||||||
),
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="gallery" class="py-5">
|
<section id="posts" class="py-5 bg-light">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2 class="text-center mb-5 animate-on-scroll">
|
<h2 class="text-center mb-5 animate-on-scroll pt-1">Posts Recientes</h2>
|
||||||
Galería de Impacto
|
<ListadoPostsHorizontal />
|
||||||
</h2>
|
</div>
|
||||||
<div class="row g-4">
|
</section>
|
||||||
{
|
|
||||||
[1, 2, 3, 4, 5, 6].map((num) => (
|
|
||||||
<div class="col-md-4 animate-on-scroll">
|
|
||||||
<div class="bg-light p-4 text-center">
|
|
||||||
<Image
|
|
||||||
src={`/imgs/imgimp${num}.jpg`}
|
|
||||||
alt={`Imagen de impacto ${num}`}
|
|
||||||
class="img-fluid img-fit"
|
|
||||||
width="10"
|
|
||||||
height="10"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section id="posts" class="py-5 bg-light">
|
<section id="proyectos" class="py-5">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2 class="text-center mb-5 animate-on-scroll pt-1">
|
<h2 class="text-center mb-5 animate-on-scroll pt-2">Nuestros Proyectos</h2>
|
||||||
Posts Recientes
|
<div class="row">
|
||||||
</h2>
|
{
|
||||||
<ListadoPostsHorizontal />
|
[
|
||||||
</div>
|
{ title: "Proyecto Verde", description: "Iniciativa para reforestar áreas urbanas y rurales." },
|
||||||
</section>
|
{ 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 btn-success">Ver detalles</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section id="proyectos" class="py-5">
|
<section id="cta" class="py-5 bg-primary text-white text-center">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2 class="text-center mb-5 animate-on-scroll pt-2">
|
<h2 class="display-4 mb-4 animate-on-scroll">¡Únete al Cambio!</h2>
|
||||||
Nuestros Proyectos
|
<p class="lead mb-5 animate-on-scroll">Juntos podemos crear un impacto duradero. Descubre cómo puedes contribuir a los ODS.</p>
|
||||||
</h2>
|
<a href="/participa" class="btn btn-lg btn-light animate-on-scroll">¡Participa ahora!</a>
|
||||||
<div class="row">
|
</div>
|
||||||
{
|
</section>
|
||||||
[1, 2, 3, 4].map((num) => (
|
</main>
|
||||||
<div class="col-md-6 mb-4 animate-on-scroll">
|
|
||||||
<div class="card">
|
<Footer />
|
||||||
<div class="card-body">
|
|
||||||
<h5
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
class="card-title"
|
<script set:html={animateOnScroll} />
|
||||||
aria-label="Proyecto"
|
</body>
|
||||||
>
|
</html>
|
||||||
Proyecto {num}
|
|
||||||
</h5>
|
<style is:global>
|
||||||
<p class="card-text">
|
|
||||||
Descripción del proyecto {num} y
|
|
||||||
su impacto en los ODS.
|
|
||||||
</p>
|
|
||||||
<a href="#" class="btn btn-success">
|
|
||||||
Ver detalles
|
|
||||||
</a>
|
|
||||||
</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="#" class="btn btn-lg btn-light animate-on-scroll"
|
|
||||||
>¡Participa ahora!</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=Inter+Tight:ital@0;1&display=swap");
|
||||||
@import url("https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap");
|
@import url("https://fonts.googleapis.com/css2?family=Londrina+Sketch&display=swap");
|
||||||
|
|
||||||
h1,
|
h1, h2, h3, h4, h5, h6, p, a {
|
||||||
h2,
|
font-family: "Inter Tight", sans-serif !important;
|
||||||
h3,
|
font-optical-sizing: auto;
|
||||||
h4,
|
font-weight: 400 !important;
|
||||||
h5,
|
font-style: normal;
|
||||||
h6,
|
|
||||||
p,
|
|
||||||
a {
|
|
||||||
font-family: "Inter Tight", sans-serif !important;
|
|
||||||
font-optical-sizing: auto;
|
|
||||||
font-weight: 400 !important;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
}
|
||||||
.londrina-sketch-regular {
|
.londrina-sketch-regular {
|
||||||
font-family: "Londrina Sketch", sans-serif !important;
|
font-family: "Londrina Sketch", sans-serif !important;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style>
|
<style>
|
||||||
.header-bg {
|
.header-bg {
|
||||||
background-color: #4caf50;
|
background-color: #4caf50;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.animate-on-scroll {
|
.animate-on-scroll {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
.navbar-brand img {
|
.navbar-brand img {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-fit {
|
.img-fit {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-bg {
|
.video-bg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
</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 .5rem 1rem rgba(0,0,0,.15)!important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
114
src/pages/participa.astro
Normal file
114
src/pages/participa.astro
Normal file
@@ -0,0 +1,114 @@
|
|||||||
|
---
|
||||||
|
// Importar componentes existentes
|
||||||
|
import Navbar from "../components/Navbar.astro";
|
||||||
|
import Footer from "../components/Footer.astro";
|
||||||
|
|
||||||
|
// Lista ampliada de mensajes sobre sostenibilidad
|
||||||
|
const mensajes = [
|
||||||
|
"¡Únete al cambio! 🌍 Cada acción cuenta para un futuro sostenible.",
|
||||||
|
"La sostenibilidad comienza contigo. Comparte y actúa hoy. 🌱",
|
||||||
|
"Pequeños pasos, grandes cambios. Contribuye a un mundo mejor. 🌿",
|
||||||
|
"La Tierra es nuestro hogar. Protejámosla juntos. 🌎",
|
||||||
|
"Actúa localmente, impacta globalmente. Sé parte del cambio. 🌐",
|
||||||
|
"Cada gota cuenta. Conserva el agua y protege el futuro. 💧",
|
||||||
|
"La energía renovable es el camino hacia un mañana más limpio. ⚡",
|
||||||
|
"Reciclar es más que una acción, es un compromiso. ♻️",
|
||||||
|
"El cambio climático es real. Actúa ahora, no mañana. 🌡️",
|
||||||
|
"La biodiversidad es vida. Presérvala. 🐾",
|
||||||
|
"Compra local, apoya a tu comunidad y reduce tu huella de carbono. 🛒",
|
||||||
|
"La educación es clave para un desarrollo sostenible. 📚",
|
||||||
|
"La naturaleza no necesita a las personas, las personas necesitan a la naturaleza. 🌳",
|
||||||
|
"Invierte en nuestro planeta. Es el único hogar que tenemos. 🏡",
|
||||||
|
"El futuro es verde. Haz tu parte para que así sea. 🌿"
|
||||||
|
];
|
||||||
|
|
||||||
|
// Función para obtener un mensaje aleatorio
|
||||||
|
function obtenerMensajeAleatorio() {
|
||||||
|
return mensajes[Math.floor(Math.random() * mensajes.length)];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Mensaje inicial
|
||||||
|
let mensajeActual = obtenerMensajeAleatorio();
|
||||||
|
const urlSitio = Astro.site; // Reemplaza con la URL de tu sitio
|
||||||
|
---
|
||||||
|
|
||||||
|
<html lang="es">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Participa Ahora | Ecobjetivos</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
|
||||||
|
<style>
|
||||||
|
body, html {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
flex: 1;
|
||||||
|
padding-top: 60px; /* Ajusta el padding superior para separar del navbar */
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<Navbar />
|
||||||
|
|
||||||
|
<div class="container py-5">
|
||||||
|
<h1 class="text-center mb-4 mt-4">¡Participa Ahora!</h1>
|
||||||
|
<p class="lead text-center mb-5">Descubre cómo puedes contribuir a un futuro sostenible y comparte el mensaje.</p>
|
||||||
|
|
||||||
|
<div class="text-center mb-4">
|
||||||
|
<blockquote class="blockquote">
|
||||||
|
<p id="mensaje" class="mb-0">{mensajeActual}</p>
|
||||||
|
</blockquote>
|
||||||
|
<button class="btn btn-primary mt-3" id="nuevoMensaje">
|
||||||
|
Obtener otro mensaje
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center">
|
||||||
|
<h3>Comparte en tus redes sociales:</h3>
|
||||||
|
<a href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(mensajeActual + " " + urlSitio)}`} target="_blank" class="btn btn-info m-2">
|
||||||
|
<i class="fab fa-twitter"></i> Twitter
|
||||||
|
</a>
|
||||||
|
<a href={`https://www.facebook.com/sharer/sharer.php?u=${urlSitio}"e=${encodeURIComponent(mensajeActual)}`} target="_blank" class="btn btn-primary m-2">
|
||||||
|
<i class="fab fa-facebook"></i> Facebook
|
||||||
|
</a>
|
||||||
|
<a href={`https://www.linkedin.com/shareArticle?mini=true&url=${urlSitio}&title=Ecobjetivos&summary=${encodeURIComponent(mensajeActual)}`} target="_blank" class="btn btn-secondary m-2">
|
||||||
|
<i class="fab fa-linkedin"></i> LinkedIn
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('nuevoMensaje').addEventListener('click', () => {
|
||||||
|
const mensajes = [
|
||||||
|
"¡Únete al cambio! 🌍 Cada acción cuenta para un futuro sostenible.",
|
||||||
|
"La sostenibilidad comienza contigo. Comparte y actúa hoy. 🌱",
|
||||||
|
"Pequeños pasos, grandes cambios. Contribuye a un mundo mejor. 🌿",
|
||||||
|
"La Tierra es nuestro hogar. Protejámosla juntos. 🌎",
|
||||||
|
"Actúa localmente, impacta globalmente. Sé parte del cambio. 🌐",
|
||||||
|
"Cada gota cuenta. Conserva el agua y protege el futuro. 💧",
|
||||||
|
"La energía renovable es el camino hacia un mañana más limpio. ⚡",
|
||||||
|
"Reciclar es más que una acción, es un compromiso. ♻️",
|
||||||
|
"El cambio climático es real. Actúa ahora, no mañana. 🌡️",
|
||||||
|
"La biodiversidad es vida. Presérvala. 🐾",
|
||||||
|
"Compra local, apoya a tu comunidad y reduce tu huella de carbono. 🛒",
|
||||||
|
"La educación es clave para un desarrollo sostenible. 📚",
|
||||||
|
"La naturaleza no necesita a las personas, las personas necesitan a la naturaleza. 🌳",
|
||||||
|
"Invierte en nuestro planeta. Es el único hogar que tenemos. 🏡",
|
||||||
|
"El futuro es verde. Haz tu parte para que así sea. 🌿"
|
||||||
|
];
|
||||||
|
const mensajeActual = mensajes[Math.floor(Math.random() * mensajes.length)];
|
||||||
|
document.getElementById('mensaje').textContent = mensajeActual;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user