commit 03a7ef3253eba1c66de6d66b1253d34b60c755a8
Author: Cris <159848549+CristianCruz0309@users.noreply.github.com>
Date: Fri Jan 30 19:16:11 2026 -0500
Proyectos (DIA 1 - 13)
Realizados gracias al curso "JAVASCRIPT TOTAL"
diff --git a/proyecto-dia-1/Camilo.jpeg b/proyecto-dia-1/Camilo.jpeg
new file mode 100644
index 0000000..9de3e28
Binary files /dev/null and b/proyecto-dia-1/Camilo.jpeg differ
diff --git a/proyecto-dia-1/Familia.jpg b/proyecto-dia-1/Familia.jpg
new file mode 100644
index 0000000..b15a8a7
Binary files /dev/null and b/proyecto-dia-1/Familia.jpg differ
diff --git a/proyecto-dia-1/familia.html b/proyecto-dia-1/familia.html
new file mode 100644
index 0000000..f02dd02
--- /dev/null
+++ b/proyecto-dia-1/familia.html
@@ -0,0 +1,13 @@
+
+
+
+ Página 2
+
+
+ Bienvenido
+ Volver
+
+
\ No newline at end of file
diff --git a/proyecto-dia-1/index.html b/proyecto-dia-1/index.html
new file mode 100644
index 0000000..867268c
--- /dev/null
+++ b/proyecto-dia-1/index.html
@@ -0,0 +1,45 @@
+
+
+
+ Mi biografía
+
+
+
+
+
+ Cristian Cruz
+ Mi biografía
+
+
+
+
+ Presentación
+
+
+ Cristian Cruz nació el 9 de marzo de 2005 en Cali, Colombia. Desde pequeño mostró
+ interés por la tecnología y el aprendizaje constante, lo que lo llevó a desarrollar
+ habilidades en distintas áreas académicas y creativas. A lo largo de su formación
+ se destacó por su responsabilidad, curiosidad y capacidad para trabajar en equipo.
+
+
+
+ Actualmente se dedica a fortalecer sus conocimientos y a explorar nuevas oportunidades
+ de crecimiento personal y profesional. En su tiempo libre disfruta escuchar música,
+ aprender cosas nuevas y compartir tiempo con sus amigos y familia. Cris se caracteriza
+ por ser una persona perseverante, con metas claras y una actitud positiva frente a
+ los desafíos.
+
+
+
+
+
+
+ Ingresa a este enlace para aprender más
+
+
+
+
diff --git a/proyecto-dia-1/prehistoria.jpg b/proyecto-dia-1/prehistoria.jpg
new file mode 100644
index 0000000..4458687
Binary files /dev/null and b/proyecto-dia-1/prehistoria.jpg differ
diff --git a/proyecto-dia-10/index.html b/proyecto-dia-10/index.html
new file mode 100644
index 0000000..6f01326
--- /dev/null
+++ b/proyecto-dia-10/index.html
@@ -0,0 +1,17 @@
+
+
+
+ Veterinaria
+ Veterinaria Animalito´s
+
+ Mostrar Animales
+
+
+
+
\ No newline at end of file
diff --git a/proyecto-dia-10/script.js b/proyecto-dia-10/script.js
new file mode 100644
index 0000000..a4d9173
--- /dev/null
+++ b/proyecto-dia-10/script.js
@@ -0,0 +1,62 @@
+class Animal {
+ constructor(nombre, peso, edad) {
+ this.nombre = nombre;
+ this.peso = peso;
+ this.edad = edad;
+ }
+
+ informacion() {
+ return `${this.nombre} - ${this.peso} kg. - ${this.edad} años.`
+ }
+}
+
+class Perro extends Animal {
+ constructor(nombre, peso, edad, raza) {
+ super(nombre, edad, peso);
+ this.raza = raza;
+ }
+
+ informacion() {
+ return `${this.nombre} - ${this.peso} kg. - ${this.edad} años. - ${this.raza}`
+ }
+}
+
+class Gato extends Animal {
+ constructor(nombre, peso, edad, sexo) {
+ super(nombre, edad, peso);
+ this.sexo = sexo;
+ }
+
+ informacion() {
+ return `${this.nombre} - ${this.peso} kg. - ${this.edad} años. - ${this.sexo}`
+ }
+}
+
+class Conejo extends Animal {
+ constructor(nombre, peso, edad, color) {
+ super(nombre, edad, peso);
+ this.color = color;
+ }
+
+ informacion() {
+ return `${this.nombre} - ${this.peso} kg. - ${this.edad} años. - ${this.color}`
+ }
+}
+
+let perro1 = new Perro('Simba', 11, 4, 'Shih Tzu');
+let gato1 = new Gato('Ringo', 4, 6, 'Macho');
+let conejo1 = new Conejo('Dumbo', 2, 3,'Blanco');
+let animales = [perro1, gato1, conejo1];
+
+function mostrarAnimales() {
+ let lista = document.getElementById('listaAnimales');
+
+
+ lista.innerHTML = '';
+
+ for(let animal of animales) {
+ let item = document.createElement('li');
+ item.innerText = animal.informacion();
+ lista.appendChild(item);
+ }
+}
\ No newline at end of file
diff --git a/proyecto-dia-10/styles.css b/proyecto-dia-10/styles.css
new file mode 100644
index 0000000..b82e78f
--- /dev/null
+++ b/proyecto-dia-10/styles.css
@@ -0,0 +1,38 @@
+h1 {
+ font-family: 'Courier New', Courier, monospace;
+ color: brown;
+ text-shadow: 2px 2px 4px #ff1c1c;
+ font-size: 40px;
+ text-align: center;
+}
+
+button {
+ background-color: #7b3015;
+ border: none;
+ color: white;
+ padding: 15px 32px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ margin: 4px 2px;
+ cursor: pointer;
+ border-radius: 5px;
+}
+
+ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+li {
+ background-color: #f1f1f1;
+ padding: 10px;
+ border-bottom: 1px solid #ccc;
+ text-align: center;
+}
+
+.textoCentrado {
+ text-align: center;
+}
\ No newline at end of file
diff --git a/proyecto-dia-11/imagenes/BANCOLOMBIA.png b/proyecto-dia-11/imagenes/BANCOLOMBIA.png
new file mode 100644
index 0000000..7ba9429
Binary files /dev/null and b/proyecto-dia-11/imagenes/BANCOLOMBIA.png differ
diff --git a/proyecto-dia-11/imagenes/col.png b/proyecto-dia-11/imagenes/col.png
new file mode 100644
index 0000000..ca8f8ba
Binary files /dev/null and b/proyecto-dia-11/imagenes/col.png differ
diff --git a/proyecto-dia-11/imagenes/eeuu.png b/proyecto-dia-11/imagenes/eeuu.png
new file mode 100644
index 0000000..e561776
Binary files /dev/null and b/proyecto-dia-11/imagenes/eeuu.png differ
diff --git a/proyecto-dia-11/imagenes/euro.png b/proyecto-dia-11/imagenes/euro.png
new file mode 100644
index 0000000..057784e
Binary files /dev/null and b/proyecto-dia-11/imagenes/euro.png differ
diff --git a/proyecto-dia-11/imagenes/logo.webp b/proyecto-dia-11/imagenes/logo.webp
new file mode 100644
index 0000000..5c5cc8d
Binary files /dev/null and b/proyecto-dia-11/imagenes/logo.webp differ
diff --git a/proyecto-dia-11/index.html b/proyecto-dia-11/index.html
new file mode 100644
index 0000000..f484778
--- /dev/null
+++ b/proyecto-dia-11/index.html
@@ -0,0 +1,57 @@
+
+
+
+ Resumen Cuenta Bancaria
+
+
+
+
+
+
+
+
+
+
+
+ Número cuenta:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ CBU:
+
+
+ Abierta:
+
+
+
+
Buscador de Peliculas y Series
+
+
Buscador
+
+
+ Seleccione una opción:
+
+ Peliculas
+ Series
+
+
+
+ Buscar
+
+
+
Escribe algo para buscar ";
+
+ input.value = "";
+
+ let evento = new CustomEvent("cambioModo");
+ selector.dispatchEvent(evento);
+}
+
+function mensajeModo() {
+ alert("El archivo de busqueda ahora es " + selector.value);
+}
+
+function verificarInput() {
+ input.value = input.value.replace(/[^a-zA-Z ]/g, "");
+}
+
+function buscar() {
+ lista.innerHTML = "";
+
+ if (input.value.trim() === "") {
+ lista.innerHTML = "Escribe algo para buscar ";
+ return;
+ }
+
+ fetch(archivo)
+ .then(res => res.json())
+ .then(data => {
+
+ let encontrados = 0;
+
+ for (let item of data.data) {
+ console.log(item);
+
+ if (item.nombre.includes(input.value.toUpperCase())) {
+
+ encontrados++;
+
+ let li = document.createElement("li");
+ li.textContent = item.nombre;
+
+ let p = document.createElement("p");
+ p.textContent = item.sinopsis;
+
+ let img = document.createElement("img");
+ img.src = item.imagen;
+ img.alt = item.nombre;
+ img.style.width = "200px";
+ img.style.marginTop = "10px";
+ img.style.borderRadius = "8px";
+
+ li.appendChild(p);
+ li.appendChild(img);
+ lista.appendChild(li);
+ }
+ }
+
+ if (encontrados === 0) {
+ lista.innerHTML = "No se encontraron resultados ";
+ }
+ });
+}
diff --git a/proyecto-dia-12/series.json b/proyecto-dia-12/series.json
new file mode 100644
index 0000000..d955d01
--- /dev/null
+++ b/proyecto-dia-12/series.json
@@ -0,0 +1,15 @@
+{
+ "data":
+ [
+ { "nombre": "FALLOUT", "sinopsis": "Narra la historia de la Easy Company, un batallón estadounidense del regimiento 506 de paracaidistas, que luchó en Europa durante la II Guerra Mundial.",
+ "imagen": "Portadas/FALLOUT.jpg"},
+ { "nombre": "HALO", "sinopsis": "Halo narra un conflicto épico del siglo XXVI entre la humanidad y una amenaza alienígena conocida como el Covenant. Halo entrelazará historias personales profundas con acción, aventura y una visión del futuro ricamente imaginada.",
+ "imagen": "Portadas/HALO.jpg"},
+ { "nombre": "THE WALKING DEAD", "sinopsis": "Basado en la historieta escrita por Robert Kirkman, este drama crudo describe las vidas de un grupo de sobrevivientes que está siempre en movimiento en busca de un hogar seguro durante las semanas y meses de un apocalipsis zombi.",
+ "imagen": "Portadas/Walking_Dead.jpg"},
+ { "nombre": "STRANGER THINGS", "sinopsis": "Cuando un niño desaparece, sus amigos, la familia y la policía se ven envueltos en una serie de eventos misteriosos al tratar de encontrarlo. Mientras tanto, una niña con habilidades especiales aparece en la ciudad.",
+ "imagen": "Portadas/Stranger_Things.jpg"},
+ { "nombre": "THE SIMPSONS", "sinopsis": "La comedia de dibujos animados se centra en una familia que vive en la ciudad de Springfield. La cabeza de la familia Simpson es Homero, quien no es un hombre de familia típico, obrero de una planta nuclear, él hace lo mejor para poder liderar a su familia, pero frecuentemente se da cuenta que son ellos los que lo mandan.",
+ "imagen": "Portadas/SIMPSON.jpg"}
+ ]
+}
\ No newline at end of file
diff --git a/proyecto-dia-12/styles.css b/proyecto-dia-12/styles.css
new file mode 100644
index 0000000..2c33d31
--- /dev/null
+++ b/proyecto-dia-12/styles.css
@@ -0,0 +1,154 @@
+body {
+ text-align: center;
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ background: radial-gradient(
+ circle at top,
+ #1f2933 0%,
+ #0f172a 40%,
+ #020617 100%
+ );
+ color: #ff3a3a;
+ min-height: 100vh;
+}
+
+
+.contenedor {
+ max-width: 900px;
+ margin: 60px auto;
+ padding: 40px;
+ border-radius: 20px;
+ background: rgba(15, 23, 42, 0.75);
+ backdrop-filter: blur(12px);
+ box-shadow:
+ 0 20px 50px rgba(0,0,0,0.6),
+ inset 0 1px 0 rgba(255,255,255,0.05);
+}
+
+
+h1 {
+ font-weight: 800;
+ font-size: 3rem;
+ letter-spacing: 2px;
+ text-transform: uppercase;
+ color: #ff4b4b; /* un rojo vibrante */
+ text-shadow:
+ 2px 2px 8px rgba(0, 0, 0, 0.6),
+ 0 0 10px rgba(255, 75, 75, 0.5); /* efecto de brillo suave */
+ animation: fadeUp 1s ease forwards;
+ margin-bottom: 20px;
+}
+
+
+
+input, select {
+ width: 65%;
+ height: 38px;
+ padding: 6px 12px;
+ font-size: 15px;
+ background: #020617;
+ color: #e5e7eb;
+ border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+input::placeholder {
+ color: #9ca3af;
+}
+
+
+button {
+ background: linear-gradient(135deg, #c52222, #a31616);
+ border: none;
+ padding: 12px 22px;
+ border-radius: 10px;
+ color: white;
+ font-weight: 600;
+ cursor: pointer;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 5px 30px rgba(197, 34, 34, 0.4);
+}
+
+ul {
+ list-style: none;
+ padding: 0;
+}
+
+li {
+ list-style: none;
+ background: #ffffff;
+ border-radius: 18px;
+ margin: 30px auto;
+ padding: 25px;
+ max-width: 420px;
+ transition: transform 0.35s ease, box-shadow 0.35s ease;
+}
+
+li img {
+ display: block;
+ margin: 15px auto 0;
+ max-width: 220px;
+ border-radius: 14px;
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.635);
+ transition: transform 0.4s ease;
+}
+
+li p {
+ opacity: 0;
+ max-height: 0;
+ overflow: hidden;
+ font-style: italic;
+ color: #6a2121;
+ margin-top: 10px;
+ line-height: 1.4;
+ text-align: justify;
+ transform: translateY(-6px);
+ transition:
+ opacity 0.4s ease,
+ max-height 0.4s ease,
+ transform 0.4s ease;
+}
+
+li:hover img {
+ transform: scale(1.05);
+}
+
+li:hover p, li:hover img {
+ display: block;
+ opacity: 1;
+}
+
+li:hover p {
+ opacity: 1;
+ max-height: 200px;
+ transform: translateY(0);
+}
+
+li:hover {
+ transform: translateY(-6px) scale(1.02);
+ box-shadow: 0 5px 30px rgba(255, 0, 0, 0.695);
+}
+
+.bloque {
+ margin: 20px auto;
+ max-width: 500px;
+}
+
+.bloque-busqueda {
+ display: flex;
+ justify-content: center;
+ gap: 8px;
+}
+
+@keyframes fadeUp {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
diff --git a/proyecto-dia-13/index.html b/proyecto-dia-13/index.html
new file mode 100644
index 0000000..a1b5b68
--- /dev/null
+++ b/proyecto-dia-13/index.html
@@ -0,0 +1,25 @@
+
+
+
+ Cotizaciones Online
+
+
+
+
+
+
Mi Biografia
+
+
Cristian Cruz
+ Mi biografía
+ Adultez
+
+ 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.
+ "Fede, gracias a tu curso conseguí un trabajo mejor" , y te juro que nada me puede hacer más feliz.
+
+
+
+
+ 
+ 
+
+ 
+ 
+
+ 
+
+ 
+
+ 
+