Proyectos (DIA 1 - 13)

Realizados gracias al curso "JAVASCRIPT TOTAL"
2026-08-15 02:50:10 +00:00 · 2026-01-30 19:16:11 -05:00
commit 03a7ef3253
67 changed files with 2204 additions and 0 deletions
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+    <head>
+        <title>Mi Biografia</title>
+        <link rel="stylesheet" href="misEstilos.css">
+    </head>
+    <body>
+        <div class="centrar-texto">
+            <h1>Cristian Cruz</h1>
+            <h2>Mi biografía</h2>
+            <br>
+            <h3 id="subtitulo">Adultez</h3>
+        </div>
+        <img class="foto"
+        src="fotos/familia.jpg"
+        alt="Fede Garay ahora"
+        align="left">
+        <p>Estaba decidido, iba a ser psicólogo. Sin dudarlo estudié y me recibí. Al mismo tiempo estudiaba Artes Plásticas, porque como dije, me gustaba mucho dibujar, pero eso se fue perdiendo.
+            <br><br>
+            El mismo año en que me recibí de psicólogo me casé con mi actual esposa Natacha y tuvimos a nuestra primera hermosa hija, Milena. A los 3 años llegó la divina Juana, y la familia ya estaba completa.
+            <br><br>
+            Al mismo tiempo aparecieron las computadoras en mi vida, las que me volvieron loco. Cada nuevo adelanto me asombraba como a un niño, y aún me sigo sintiendo así. A lo largo de toda mi carrera profesional nunca dejé de fascinarme: programación, ofimática, videojuegos, diseño gráfico… todo me atrapaba con pasión.
+            <br><br>
+            Trabajé durante 20 años como psicólogo clínico, pero algo me decía que eso no era todo. Necesitaba ayudar de un modo distinto, llegar a más personas, tocar más vidas. Así fue que apareció Udemy, trayendo la oportunidad de monetizar mis hobbies, enseñando al mundo las habilidades que aprendí jugando. Hoy soy instructor full time, y me considero libre, porque trabajo donde quiero y cuando quiero, y recibo el amor de más de 150.000 estudiantes de todos los puntos del mundo, que cada tanto me dicen cosas como <span class="texto-negrita texto-cursiva">"Fede, gracias a tu curso conseguí un trabajo mejor"</span>, y te juro que nada me puede hacer más feliz.
+            <br><br>
+        </p>
+
+            <div class="menu">
+                <a href="index.html">Inicio</a>
+                
+                <a href="infancia.html">Infancia</a>
+                
+            </div>
+    </body>
+</html>
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+    <head>
+        <title>Mi Biografia</title>
+        <link rel="stylesheet" href="misEstilos.css">
+    </head>
+    <body>
+        <div class="centrar-texto">
+            <h1>Cristian Cruz</h1>
+            <h2>Mi biografía</h2>
+            <br>
+            <h3 id="subtitulo">Presentación</h3>
+        </div>
+        <img class="foto"
+        src="fotos/Camilo.jpeg"
+        alt="Foto de perfil de Cris"
+        align="left">
+        <p>Si vas a leer mi historia, prefiero que me digas Cris. No creo que haya nada especial en mi como para escribir una biografía, pero creo que siempre vale la pena repasar el camino que hemos hecho, celebrar a las personas que nos han acompañado, y valorar lo bueno y lo malo que nos ha sucedido.
+            <br><br>
+            Por lo pronto, estos son mis datos duros:
+            <br>
+            
+            <span class="texto-negrita">Nombre:</span> Cristian Camilo Cruz<br>
+            <span class="texto-negrita">Fecha de Nacimiento:</span> 09/03/2005<br>
+            <span class="texto-negrita">Hermanos:</span> Emily, Juan y Ariana<br>
+            <span class="texto-negrita">Perro:</span> Rufus
+            
+            <div class="menu">
+                <a href="infancia.html">Infancia</a>
+                <a href="adultez.html">Adultez</a>
+            </div>
+    </body>
+</html>
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+    <head>
+        <title>Mi Biografia</title>
+        <link rel="stylesheet" href="misEstilos.css">
+    </head>
+    <body>
+        <div class="centrar-texto">
+            <h1>Federico Garay</h1>
+            <h2>Mi biografía</h2>
+            <br>
+            <h3 id="subtitulo">Infancia</h3>
+        </div>
+        <img class="foto"
+        src="fotos/prehistoria.jpg"
+        alt="Fede Garay siendo niño"
+        align="left">
+        <p>
+            Me recuerdo a mi mismo como un morochito tan flaco que me decían que no alcanzaba ni a proyectar sombra. Era bastante tímido pero los que me conocían de cerca decían que era muy gracioso. Creo que desde entonces siento mucho placer cada vez que hago reír a alguien.
+            <br><br>
+            Yo era el mayor de los hijos, y me la pasaba jugando/peleando con mis hermanas hasta que muchos años después llegó mi hermano menor, quien se convirtió de inmediato en mi juguete favorito.
+            <br><br>
+            Si de algo estoy seguro es de que nunca supe jugar bien al futbol. Era tan desastroso que cuando se armaban los equipos en el barrio, todos peleaban por no tenerme con ellos. Por suerte en lo que siempre fui muy bueno fue en reírme de mi mismo, y supongo que ese fue un gran aspecto que me ayudó a desarrollar una personalidad fuerte.
+        </p>
+
+            <div class="menu">
+                <a href="index.html">Inicio</a>
+                <a href="adultez.html">Adultez</a>
+            </div>
+    </body>
+</html>
@@ -0,0 +1,113 @@
+body {
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    min-height: 100vh;
+    color: white;
+}
+
+body::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url(fotos/fondo.jpg);
+    background-size: cover;
+    background-position: center;
+    filter: blur(4px);
+    z-index: -1;
+}
+
+h1 {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-weight: bolder;
+}
+
+p {
+    font-size: 15px;
+    background-color: beige;
+    color: black;
+    padding: 15px 20px;
+    text-align: justify;
+    border-radius: 10px;
+}
+
+.centrar-texto {
+    text-align: center;
+}
+
+.foto {
+    border: 3px;
+    border-style: solid;
+    border-color: beige;
+    border-radius: 10px;
+    margin-right: 20px;
+    padding: 5px;
+    margin-bottom: 10px;
+    width: 194px;
+    height: auto;
+}
+
+.texto-negrita {
+    font-weight: bold;
+}
+
+.texto-cursiva {
+    font-style: italic;
+}
+
+.menu {
+    text-align: center;
+    margin-top: 25px;
+}
+
+.menu a {
+    display: inline-block;
+    background-color: rgba(0, 0, 0, 0.6);
+    color: white;
+    text-decoration: none;
+    padding: 10px 18px;
+    margin: 0 15px;
+    border-radius: 8px;
+    font-size: 18px;
+    padding: 12px 22px;
+    font-weight: bold;
+    text-shadow: 1px 1px 3px black;
+}
+
+.menu a[href]{
+    color: white;
+    text-decoration: none;
+}
+
+.menu a:hover {
+    color: black;
+    background-color: beige;
+}
+
+h1 {
+    letter-spacing: 2px;
+}
+
+h2 {
+    opacity: 0.9;
+}
+
+h1, h2, h3, #subtitulo {
+    color: white;
+    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
+}
+
+#subtitulo {
+    font-style: italic;
+    text-decoration: underline;
+}
+
+#subtitulo::first-letter {
+    font-size: x-large;
+    font-style: italic;
+    font-weight: bold;
+}