Merge branch 'main' of https://git.h4ckdata.es/h4ckx0r/webSostenible

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

src/pages/index.astro

@@ -81,9 +81,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>
@@ -156,15 +156,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>
 
@@ -294,4 +299,12 @@ const animateOnScroll = `
 		height: 40px;
 		margin-right: 10px;
 	}
+
+	.img-fit{
+		width: 100%;
+		height: 200px;
+		object-fit: cover;
+		border-radius: 8px;
+	}
+
 </style>