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

Cambio en las imágenes para mejorar el rendimiento

Browse Source
This commit is contained in:
Natanael Gómez Ortiz
2024-10-15 19:51:55 +02:00
parent 16cf39a088
commit 030bb68000
1 changed files with 26 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/pages/index.astro
View File

@@ -2,6 +2,7 @@
// Component Imports
import ListadoPostsHorizontal from "../components/ListadoPostsHorizontal.astro";
import Navbar from "../components/Navbar.astro";
import { Image } from "astro:assets";
const animateOnScroll = `
document.addEventListener('DOMContentLoaded', () => {
@@ -80,10 +81,14 @@ const animateOnScroll = `
</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 class="text-white p-5 text-center">
<Image
src="/imgs/17Objetivos.png"
alt=""
class="img-thumbnail .img-fluid"
width="730"
height="450"
/>
</div>
</div>
</div>
@@ -156,20 +161,21 @@ 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">
<img
src={`../../public/imgs/imgimp${num}.jpg`}
alt={`Imagen de impacto ${num}`}
class="img-fluid img-fit"
/>
</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">
<Image
src={`/imgs/imgimp${num}.jpg`}
alt={`Imagen de impacto ${num}`}
class="img-fluid img-fit"
width="10"
height="10"
/>
</div>
</div>
))
}
</div>
</div>
</div>
</section>
@@ -193,7 +199,7 @@ const animateOnScroll = `
<div class="col-md-6 mb-4 animate-on-scroll">
<div class="card">
<div class="card-body">
<h5 class="card-title">
<h5 class="card-title" aria-label="Proyecto">
Proyecto {num}
</h5>
<p class="card-text">
@@ -265,7 +271,7 @@ const animateOnScroll = `
<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,
@@ -300,11 +306,10 @@ const animateOnScroll = `
margin-right: 10px;
}
.img-fit{
.img-fit {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px;
}
</style>