311 lines
7.8 KiB
Plaintext
311 lines
7.8 KiB
Plaintext
---
|
|
// Component Imports
|
|
import ListadoPostsHorizontal from "../components/ListadoPostsHorizontal.astro";
|
|
import Navbar from "../components/Navbar.astro";
|
|
|
|
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);
|
|
});
|
|
});
|
|
`;
|
|
---
|
|
|
|
<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="icon" type="image/svg+xml" href="favicon.svg" />
|
|
<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</title>
|
|
</head>
|
|
<body>
|
|
<Navbar />
|
|
<header class="header-bg text-white">
|
|
<div class="container text-center">
|
|
<h1
|
|
class="display-1 mb-4 animate__animated animate__fadeInDown londrina-sketch-regular"
|
|
>
|
|
Ecobjetivos
|
|
</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.
|
|
</p>
|
|
</div>
|
|
<div class="col-md-6 animate-on-scroll">
|
|
<div
|
|
class=" text-white p-5 text-center"
|
|
>
|
|
<img src="../../public/imgs/17Objetivos.png" alt="" class="img-thumbnail .img-fluid">
|
|
</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">
|
|
{
|
|
[
|
|
"fa-seedling",
|
|
"fa-hands-holding-circle",
|
|
"fa-graduation-cap",
|
|
"fa-industry",
|
|
].map((icon, 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 ${icon} fa-3x mb-3 text-primary`}
|
|
/>
|
|
<h5 class="card-title">
|
|
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">
|
|
<div class="container">
|
|
<h2 class="text-center mb-5 animate-on-scroll">
|
|
Nuestro Impacto
|
|
</h2>
|
|
<div class="row text-center">
|
|
{
|
|
["1M+", "500K", "100+", "50+"].map(
|
|
(number, index) => (
|
|
<div class="col-md-3 mb-4 animate-on-scroll">
|
|
<h3 class="display-4 fw-bold">
|
|
{number}
|
|
</h3>
|
|
<p class="lead">
|
|
Estadística {index + 1}
|
|
</p>
|
|
</div>
|
|
),
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="gallery" class="py-5">
|
|
<div class="container">
|
|
<h2 class="text-center mb-5 animate-on-scroll">
|
|
Galería de Impacto
|
|
</h2>
|
|
<div class="row g-4">
|
|
{
|
|
[1, 2, 3, 4, 5, 6].map((num) => (
|
|
<div class="col-md-4 animate-on-scroll">
|
|
<div class="bg-light p-4 text-center">
|
|
<img
|
|
src={`../../public/imgs/imgimp${num}.jpg`}
|
|
alt={`Imagen de impacto ${num}`}
|
|
class="img-fluid img-fit"
|
|
/>
|
|
|
|
</div>
|
|
</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">
|
|
{
|
|
[1, 2, 3, 4].map((num) => (
|
|
<div class="col-md-6 mb-4 animate-on-scroll">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">
|
|
Proyecto {num}
|
|
</h5>
|
|
<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 class="bg-dark text-white py-4">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-6 text-center text-md-start">
|
|
<p>
|
|
© 2024 Ecobjetivos. Todos los derechos
|
|
reservados.
|
|
</p>
|
|
</div>
|
|
<div class="col-md-6 text-center text-md-end">
|
|
<a href="#" class="text-white me-2"
|
|
><i class="fab fa-facebook-f"></i></a
|
|
>
|
|
<a href="#" class="text-white me-2"
|
|
><i class="fab fa-twitter"></i></a
|
|
>
|
|
<a href="#" class="text-white me-2"
|
|
><i class="fab fa-instagram"></i></a
|
|
>
|
|
<a href="#" class="text-white"
|
|
><i class="fab fa-linkedin-in"></i></a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
.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{
|
|
width: 100%;
|
|
height: 200px;
|
|
object-fit: cover;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
</style>
|