h4ckx0r/webSostenible
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mejora gráfica de la web
All checks were successful
Verificar versión, Compilar y Desplegar / check-version (push) Successful in 12s
Details
Verificar versión, Compilar y Desplegar / build (push) Successful in 34s
Details
Verificar versión, Compilar y Desplegar / deploy (push) Successful in 11s
Details

Browse Source
This commit is contained in:
Natanael Gómez Ortiz
2024-11-06 21:52:44 +01:00
parent 57dde5551e
commit 871b916f7c
4 changed files with 61 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/pages/index.astro
View File

@@ -84,44 +84,41 @@ const animateOnScroll = `
</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-seedling", title: "Vida de Ecosistemas Terrestres", description: "Proteger, restaurar y promover el uso sostenible de los ecosistemas terrestres." },
{ icon: "fa-hands-holding-circle", title: "Reducción de Desigualdades", description: "Reducir la desigualdad en y entre los países." },
{ icon: "fa-graduation-cap", title: "Educación de Calidad", description: "Garantizar una educación inclusiva, equitativa y de calidad." },
{ icon: "fa-industry", title: "Industria, Innovación e Infraestructura", description: "Construir infraestructuras resilientes, promover la industrialización inclusiva y sostenible." }
].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="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">
<div class="container">
<h2 class="text-center mb-5 animate-on-scroll">Nuestro Impacto</h2>
<div class="row text-center">
<div class="row justify-content-center text-center">
{
[
{ number: "1M+", description: "Personas impactadas" },
{ number: "500K", description: "Árboles plantados" },
{ number: "100+", description: "Proyectos completados" },
{ number: "50+", description: "Países involucrados" }
].map((impact, index) => (
{ number: "100+", 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>
@@ -131,24 +128,6 @@ const animateOnScroll = `
</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">
<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">
<div class="container">
<h2 class="text-center mb-5 animate-on-scroll pt-1">Posts Recientes</h2>