Añadir imágen

He añadido a la plantilla un espacio para poner una imágen mía
This commit is contained in:
T-Royale committed 2025-05-05 22:29:05 +02:00
1 parent b4b474d57c
commit d05577cde0
4 files changed
+43 -27

No files matched your search

+1 -1
View File
@@ -22,5 +22,5 @@ body {
text-align: justify; text-align: justify;
line-height: 150%; line-height: 150%;
padding-left: 3vw; padding-left: 3vw;
padding-right: 6vw; padding-right: 35vw; /*Padding para la imagen*/
} }
+14
View File
@@ -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;
}
+14 -13
View File
@@ -9,6 +9,7 @@
<link rel="stylesheet" href="/Styles/sideBar.css"> <link rel="stylesheet" href="/Styles/sideBar.css">
<link rel="stylesheet" href="/Styles/languageSelector.css"> <link rel="stylesheet" href="/Styles/languageSelector.css">
<link rel="stylesheet" href="/Styles/generic.css"> <link rel="stylesheet" href="/Styles/generic.css">
<link rel="stylesheet" href="/Styles/images.css">
<script src="/Scripts/index.js" defer></script> <script src="/Scripts/index.js" defer></script>
</head> </head>
<body> <body>
@@ -20,26 +21,26 @@
<img src="/Images/English.png" class="flag hidden"> <img src="/Images/English.png" class="flag hidden">
</a> </a>
<div id="contentDivider"></div> <div id="contentDivider"></div>
<!--Texto de prueba--> <div id="imageTeo">Insertar imágen</div>
<div id="texto"> <div id="texto">
<p class="apartado" id="sobreMi">&nbsp;Sobre mí:</p> <p class="apartado" id="sobreMi">&nbsp;Sobre mí:</p>
<p class="puntosSobreMi"> <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>
<p class="apartado" id="techStack">&nbsp;Tecnologías:</p> <p class="apartado" id="techStack">&nbsp;Tecnologías:</p>
<p class="puntosTech"> <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> </p>
<div id="techDescription"> </div>
Prueba1: Este es un lenguaje <div id="techDescription">
</div> Prueba1: Este es un lenguaje
<div id="techIcons"> </div>
<img src="https://skillicons.dev/icons?i=arduino&theme=dark" class="techIcon" id="inoTechIcon"> <div id="techIcons">
<img src="https://skillicons.dev/icons?i=c&theme=dark" class="techIcon" id="cTechIcon"> <img src="https://skillicons.dev/icons?i=arduino&theme=dark" class="techIcon" id="inoTechIcon">
<img src="https://skillicons.dev/icons?i=git&theme=dark" class="techIcon" id="gitTechIcon"> <img src="https://skillicons.dev/icons?i=c&theme=dark" class="techIcon" id="cTechIcon">
<img src="https://skillicons.dev/icons?i=linux&theme=light" class="techIcon" id="linuxTechIcon"> <img src="https://skillicons.dev/icons?i=git&theme=dark" class="techIcon" id="gitTechIcon">
<img src="https://skillicons.dev/icons?i=raspberrypi&theme=light" class="techIcon" id="rpiTechIcon"> <img src="https://skillicons.dev/icons?i=linux&theme=light" class="techIcon" id="linuxTechIcon">
</div> <img src="https://skillicons.dev/icons?i=raspberrypi&theme=light" class="techIcon" id="rpiTechIcon">
</div> </div>
<!--/Texto de prueba/--> <!--/Texto de prueba/-->
<!--Barra lateral--> <!--Barra lateral-->
+14 -13
View File
@@ -9,37 +9,38 @@
<link rel="stylesheet" href="/Styles/sideBar.css"> <link rel="stylesheet" href="/Styles/sideBar.css">
<link rel="stylesheet" href="/Styles/languageSelector.css"> <link rel="stylesheet" href="/Styles/languageSelector.css">
<link rel="stylesheet" href="/Styles/generic.css"> <link rel="stylesheet" href="/Styles/generic.css">
<link rel="stylesheet" href="/Styles/images.css">
<script src="/Scripts/index.js" defer></script> <script src="/Scripts/index.js" defer></script>
</head> </head>
<body> <body>
<div> <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> </div>
<a href="/index.html"> <a href="/index.html">
<img src="/Images/Spanish.png" class="flag hidden"> <img src="/Images/Spanish.png" class="flag hidden">
<img src="/Images/English.png" class="flag shown"> <img src="/Images/English.png" class="flag shown">
</a> </a>
<div id="contentDivider"></div> <div id="contentDivider"></div>
<!--Texto de prueba--> <div id="imageTeo">Insertar imágen</div>
<div id="texto"> <div id="texto">
<p class="apartado" id="sobreMi">&nbsp;About me:</p> <p class="apartado" id="sobreMi">&nbsp;About me:</p>
<p class="puntosSobreMi"> <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>
<p class="apartado" id="techStack">&nbsp;Tech stack:</p> <p class="apartado" id="techStack">&nbsp;Tech stack:</p>
<p class="puntosTech"> <p class="puntosTech">
 Sed hendrerit nisl ut felis fermentum, sit amet facilisis dui luctus.  Sed hendrerit nisl ut felis fermentum, sit amet facilisis dui luctus.
</p> </p>
<div id="techDescription"> </div>
Prueba1: Este es un lenguaje <div id="techDescription">
</div> Prueba1: Este es un lenguaje
<div id="techIcons"> </div>
<img src="https://skillicons.dev/icons?i=arduino&theme=dark" class="techIcon" id="inoTechIcon"> <div id="techIcons">
<img src="https://skillicons.dev/icons?i=c&theme=dark" class="techIcon" id="cTechIcon"> <img src="https://skillicons.dev/icons?i=arduino&theme=dark" class="techIcon" id="inoTechIcon">
<img src="https://skillicons.dev/icons?i=git&theme=dark" class="techIcon" id="gitTechIcon"> <img src="https://skillicons.dev/icons?i=c&theme=dark" class="techIcon" id="cTechIcon">
<img src="https://skillicons.dev/icons?i=linux&theme=light" class="techIcon" id="linuxTechIcon"> <img src="https://skillicons.dev/icons?i=git&theme=dark" class="techIcon" id="gitTechIcon">
<img src="https://skillicons.dev/icons?i=raspberrypi&theme=light" class="techIcon" id="rpiTechIcon"> <img src="https://skillicons.dev/icons?i=linux&theme=light" class="techIcon" id="linuxTechIcon">
</div> <img src="https://skillicons.dev/icons?i=raspberrypi&theme=light" class="techIcon" id="rpiTechIcon">
</div> </div>
<!--/Texto de prueba/--> <!--/Texto de prueba/-->
<!--Barra lateral--> <!--Barra lateral-->