From d05577cde0fe1dcf223be72abee800eace44cb90 Mon Sep 17 00:00:00 2001
From: T-Royale <141929186+T-Royale@users.noreply.github.com>
Date: Mon, 5 May 2025 22:29:05 +0200
Subject: [PATCH] =?UTF-8?q?A=C3=B1adir=20im=C3=A1gen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

He añadido a la plantilla un espacio para poner una imágen mía
---
 Styles/generic.css |  2 +-
 Styles/images.css  | 14 ++++++++++++++
 index.html         | 27 ++++++++++++++-------------
 index_en.html      | 27 ++++++++++++++-------------
 4 files changed, 43 insertions(+), 27 deletions(-)
 create mode 100644 Styles/images.css

diff --git a/Styles/generic.css b/Styles/generic.css
index 2401e19..da445da 100644
--- a/Styles/generic.css
+++ b/Styles/generic.css
@@ -22,5 +22,5 @@ body {
 	text-align: justify;
 	line-height: 150%;
 	padding-left: 3vw;
-	padding-right: 6vw;
+	padding-right: 35vw; /*Padding para la imagen*/
 }
\ No newline at end of file
diff --git a/Styles/images.css b/Styles/images.css
new file mode 100644
index 0000000..eb49243
--- /dev/null
+++ b/Styles/images.css
@@ -0,0 +1,14 @@
+#imageTeo {
+    position: absolute;
+    left: 70vw;
+    top: 20vh;
+    width: 20vw;
+    height: 40vh;
+    /*"Insertar Imágen"*/
+    background-color:dimgrey;
+    justify-content: center;
+    display: flex;
+    justify-self: center;
+    align-items: center;
+    font-size: 5vw;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index b8afda0..218dce1 100644
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@
 	<link rel="stylesheet" href="/Styles/sideBar.css">
 	<link rel="stylesheet" href="/Styles/languageSelector.css">
 	<link rel="stylesheet" href="/Styles/generic.css">
+	<link rel="stylesheet" href="/Styles/images.css">
 	<script src="/Scripts/index.js" defer></script>
 </head>
 <body>
@@ -20,26 +21,26 @@
 		<img src="/Images/English.png" class="flag hidden">
 	</a>
 	<div id="contentDivider"></div>
-	<!--Texto de prueba-->
+	<div id="imageTeo">Insertar imágen</div>
 	<div id="texto">
 		<p class="apartado" id="sobreMi"> &nbsp;Sobre mí:</p>
 		<p class="puntosSobreMi">
-			 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci eu ante volutpat suscipit. Quisque vestibulum, leo nec cursus aliquet, velit magna varius nisi, a tincidunt mi ligula id lorem. Morbi aliquet nulla sit amet urna gravida, et tincidunt ante viverra. Fusce sed orci a metus convallis ullamcorper.
+			 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci eu ante volutpat suscipit.
 		</p>
 		<p class="apartado" id="techStack"> &nbsp;Tecnologías:</p>
 		<p class="puntosTech">
-			 Sed hendrerit nisl ut felis fermentum, sit amet facilisis dui luctus.
+			 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci eu ante volutpat suscipit.
 		</p>
-		<div id="techDescription">
-			Prueba1: Este es un lenguaje
-		</div>
-		<div id="techIcons">
-			<img src="https://skillicons.dev/icons?i=arduino&theme=dark" class="techIcon" id="inoTechIcon">
-			<img src="https://skillicons.dev/icons?i=c&theme=dark" class="techIcon" id="cTechIcon">
-			<img src="https://skillicons.dev/icons?i=git&theme=dark" class="techIcon" id="gitTechIcon">
-			<img src="https://skillicons.dev/icons?i=linux&theme=light" class="techIcon" id="linuxTechIcon">
-			<img src="https://skillicons.dev/icons?i=raspberrypi&theme=light" class="techIcon" id="rpiTechIcon">
-		</div>
+	</div>
+	<div id="techDescription">
+		Prueba1: Este es un lenguaje
+	</div>
+	<div id="techIcons">
+		<img src="https://skillicons.dev/icons?i=arduino&theme=dark" class="techIcon" id="inoTechIcon">
+		<img src="https://skillicons.dev/icons?i=c&theme=dark" class="techIcon" id="cTechIcon">
+		<img src="https://skillicons.dev/icons?i=git&theme=dark" class="techIcon" id="gitTechIcon">
+		<img src="https://skillicons.dev/icons?i=linux&theme=light" class="techIcon" id="linuxTechIcon">
+		<img src="https://skillicons.dev/icons?i=raspberrypi&theme=light" class="techIcon" id="rpiTechIcon">
 	</div>
 	<!--/Texto de prueba/-->
 	<!--Barra lateral-->
diff --git a/index_en.html b/index_en.html
index bd7d0ad..444437a 100644
--- a/index_en.html
+++ b/index_en.html
@@ -9,37 +9,38 @@
 	<link rel="stylesheet" href="/Styles/sideBar.css">
 	<link rel="stylesheet" href="/Styles/languageSelector.css">
 	<link rel="stylesheet" href="/Styles/generic.css">
+	<link rel="stylesheet" href="/Styles/images.css">
 	<script src="/Scripts/index.js" defer></script>
 </head>
 <body>
 	<div>
-		<h1 class="title">Hi, I'm Teo!&nbsp;<span id="hi">󱠢 &nbsp;</span></h1>
+		<h1 class="title">Hi, my name is Teo!&nbsp;<span id="hi">󱠢 &nbsp;</span></h1>
 	</div>
 	<a href="/index.html">
 		<img src="/Images/Spanish.png" class="flag hidden">
 		<img src="/Images/English.png" class="flag shown">
 	</a>
 	<div id="contentDivider"></div>
-	<!--Texto de prueba-->
+	<div id="imageTeo">Insertar imágen</div>
 	<div id="texto">
 		<p class="apartado" id="sobreMi"> &nbsp;About me:</p>
 		<p class="puntosSobreMi">
-			 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci eu ante volutpat suscipit. Quisque vestibulum, leo nec cursus aliquet, velit magna varius nisi, a tincidunt mi ligula id lorem. Morbi aliquet nulla sit amet urna gravida, et tincidunt ante viverra. Fusce sed orci a metus convallis ullamcorper.
+			 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet orci eu ante volutpat suscipit.
 		</p>
 		<p class="apartado" id="techStack"> &nbsp;Tech stack:</p>
 		<p class="puntosTech">
 			 Sed hendrerit nisl ut felis fermentum, sit amet facilisis dui luctus.
 		</p>
-		<div id="techDescription">
-			Prueba1: Este es un lenguaje
-		</div>
-		<div id="techIcons">
-			<img src="https://skillicons.dev/icons?i=arduino&theme=dark" class="techIcon" id="inoTechIcon">
-			<img src="https://skillicons.dev/icons?i=c&theme=dark" class="techIcon" id="cTechIcon">
-			<img src="https://skillicons.dev/icons?i=git&theme=dark" class="techIcon" id="gitTechIcon">
-			<img src="https://skillicons.dev/icons?i=linux&theme=light" class="techIcon" id="linuxTechIcon">
-			<img src="https://skillicons.dev/icons?i=raspberrypi&theme=light" class="techIcon" id="rpiTechIcon">
-		</div>
+	</div>
+	<div id="techDescription">
+		Prueba1: Este es un lenguaje
+	</div>
+	<div id="techIcons">
+		<img src="https://skillicons.dev/icons?i=arduino&theme=dark" class="techIcon" id="inoTechIcon">
+		<img src="https://skillicons.dev/icons?i=c&theme=dark" class="techIcon" id="cTechIcon">
+		<img src="https://skillicons.dev/icons?i=git&theme=dark" class="techIcon" id="gitTechIcon">
+		<img src="https://skillicons.dev/icons?i=linux&theme=light" class="techIcon" id="linuxTechIcon">
+		<img src="https://skillicons.dev/icons?i=raspberrypi&theme=light" class="techIcon" id="rpiTechIcon">
 	</div>
 	<!--/Texto de prueba/-->
 	<!--Barra lateral-->