Mejora gráfica de la web
This commit is contained in:
@@ -6,17 +6,16 @@ const posts = await Astro.glob("../pages/posts/*.mdx");
|
||||
{
|
||||
posts.slice(0, 3).map((post) => (
|
||||
<div class="col-md-4 mb-4 animate-on-scroll">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="card h-100">
|
||||
<div class="card-body d-flex flex-column">
|
||||
<h5 class="card-title">
|
||||
{post.frontmatter.titulo}
|
||||
</h5>
|
||||
<p class="card-text post-content">
|
||||
<p class="card-text post-content flex-grow-1">
|
||||
{post.frontmatter.descripcion}
|
||||
...
|
||||
</p>
|
||||
<a href={post.url} class="btn btn-primary">
|
||||
Leer más
|
||||
<a href={post.url} class="btn btn-success mt-auto">
|
||||
Ver detalles
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -27,11 +26,28 @@ const posts = await Astro.glob("../pages/posts/*.mdx");
|
||||
|
||||
<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>
|
||||
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 */
|
||||
}
|
||||
.card {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
background: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
|
||||
}
|
||||
.btn-success {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.btn-success:hover {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -32,7 +32,7 @@ const { home, posts, proyectos } = Astro.props;
|
||||
<a type="button" class="nav-link btn btn-light" href={posts ? posts : "/posts"}>Posts</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a type="button" class="nav-link btn btn-light" href={proyectos ? proyectos : "#proyectos"}
|
||||
<a type="button" class="nav-link btn btn-light disabled" href={proyectos ? proyectos : "#proyectos"}
|
||||
>Proyectos</a
|
||||
>
|
||||
</li>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user