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

Imagen de los 17 objetivos añadida e imagnes de impacto

Browse Source
This commit is contained in:
Lucas Curiel
2024-10-14 23:25:04 +02:00
parent 36e9991c31
commit f713857f9c
9 changed files with 26 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/pages/index.astro
View File

@@ -80,9 +80,9 @@ const animateOnScroll = `
</div>
<div class="col-md-6 animate-on-scroll">
<div
class="bg-secondary text-white p-5 text-center"
class=" text-white p-5 text-center"
>
<p>Aquí iría una imagen de los 17 ODS</p>
<img src="../../public/imgs/17Objetivos.png" alt="" class="img-thumbnail .img-fluid">
</div>
</div>
</div>
@@ -155,15 +155,20 @@ const animateOnScroll = `
</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">
<p>Imagen de impacto {num}</p>
</div>
</div>
))
[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>
</div>
</section>
@@ -291,4 +296,12 @@ const animateOnScroll = `
height: 40px;
margin-right: 10px;
}
.img-fit{
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px;
}
</style>