web-dev-open · Lilitalop · Mar 2, 2026 · Mar 2, 2026 · Mar 2, 2026
diff --git a/LAB-CSS-LILIANALOPEZ/LICENSE.txt b/LAB-CSS-LILIANALOPEZ/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Liliana Yelitza López de Chaparro (https://codepen.io/Liliana-Yelitza-L-pez-de-Chaparro/pen/gbMJqJo)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/LAB-CSS-LILIANALOPEZ/README.md b/LAB-CSS-LILIANALOPEZ/README.md
@@ -0,0 +1,6 @@
+# Asignación 2 OpenBootCamp
+
+A Pen created on CodePen.
+
+Original URL: [https://codepen.io/Liliana-Yelitza-L-pez-de-Chaparro/pen/gbMJqJo](https://codepen.io/Liliana-Yelitza-L-pez-de-Chaparro/pen/gbMJqJo).
+
diff --git a/LAB-CSS-LILIANALOPEZ/dist/index.html b/LAB-CSS-LILIANALOPEZ/dist/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8">
+    <title>Asignación 2 OpenBootCamp</title>
+    <link rel="stylesheet" href="./style.css">
+
+  </head>
+
+  <body>
+  <div class="header">
+  <h1> LAS MASCOTAS <h/1>
+</div>
+<div class="general-container">
+  <div class="izquierda">
+  <img width= "140px" heigth= "400px"
+ src="https://i.pinimg.com/736x/6f/91/15/6f9115a56239ee7593c0d1eaf663b81f.jpg">
+  </div>
+  <div class="contenido-principal">
+    <p> Las mascotas, o animales de compañía, son seres domesticados que conviven en el hogar brindando compañía, afecto y bienestar emocional, siendo considerados miembros de la familia. Su cuidado implica responsabilidad, incluyendo alimentación, salud veterinaria, espacio y atención para asegurar su calidad de vida y mejorar la salud física y mental de los humanos.</p>
+  </div>
+
+  <div class="derecha">
+    <img width= "150px" heigth= "180px"
+ src="https://i.pinimg.com/736x/60/42/4a/60424a32f004509ec42ee1451f5116eb.jpg">
+  </div >
+  <div class="contenido-secundario"
+   <p>
+     Aspectos clave sobre las mascotas:
+  <li>  Beneficios para la salud: Acariciarlas reduce la ansiedad y mejora la salud cardiovascular.</li>
+  <li>Ayudan a niños con TEA/TDAH, personas mayores y son apoyo terapéutico.</li>
+<li>Responsabilidad: Requieren compromiso a largo plazo (10-15 años o más), cuidados, tiempo, alimentación y atención veterinaria.</li>
+  <li>Tipos comunes: Perros, gatos, peces, pájaros, pequeños roedores (hámsteres), conejos y algunos reptiles.</li>
+  <li>Impacto social: Fomentan la interacción social y mejorando la autoestima y la empatía.</li>
+  </p>
+  </div>
+  <div class="pie-pagina">
+    TE ENSEÑAMOS EL CLUIDADO DE LAS MASCOTAS <a href="https://www.youtube.com/watch?v=zV3wNvNFBZ8" target="_white">Ver video</a
+  </div>
+</div>
+
+  </body>
+
+</html>
diff --git a/LAB-CSS-LILIANALOPEZ/dist/style.css b/LAB-CSS-LILIANALOPEZ/dist/style.css
@@ -0,0 +1,65 @@
+p {
+  color: black;
+}
+
+h1 {
+  color: white;
+}
+
+body {
+  font-family: Comic Sans MS;
+  font-size: 20x;
+  text-align: center;
+  margin: 0;
+  padding: 0;
+}
+
+.header {
+  background: #2A416A;
+  height: 60px;
+  margin-bottom: 10px;
+  min-width: 725px;
+  padding-top: 10px;
+  width: 100%;
+}
+
+.general-container {
+  margin: 0 auto;
+  width: 725px;
+}
+
+.izquierda {
+  background: #EBF5FE;
+  float: left;
+  height: 280px;
+  padding-top: 10px;
+  width: 20%;
+}
+
+.contenido-principal {
+  background: #EBF5FE;
+  float: left;
+  height: 280px;
+  padding-top: 10px;
+  margin: 0 1%;
+  width: 48%;
+}
+
+.derecha {
+  background: #EBF5FE;
+  float: left;
+  height: 280px;
+  padding-top: 10px;
+  width: 30%;
+}
+
+.contenido-secundario {
+  background: #O6AED5;
+}
+
+.pie-pagina {
+  background: #2A416A;
+  color: #fff;
+  clear: both;
+  width: 900px;
+}
diff --git a/LAB-CSS-LILIANALOPEZ/src/index.html b/LAB-CSS-LILIANALOPEZ/src/index.html
@@ -0,0 +1,30 @@
+<div class="header">
+  <h1> LAS MASCOTAS <h/1>
+</div>
+<div class="general-container">
+  <div class="izquierda">
+  <img width= "140px" heigth= "400px"
+ src="https://i.pinimg.com/736x/6f/91/15/6f9115a56239ee7593c0d1eaf663b81f.jpg">
+  </div>
+  <div class="contenido-principal">
+    <p> Las mascotas, o animales de compañía, son seres domesticados que conviven en el hogar brindando compañía, afecto y bienestar emocional, siendo considerados miembros de la familia. Su cuidado implica responsabilidad, incluyendo alimentación, salud veterinaria, espacio y atención para asegurar su calidad de vida y mejorar la salud física y mental de los humanos.</p>
+  </div>
+
+  <div class="derecha">
+    <img width= "150px" heigth= "180px"
+ src="https://i.pinimg.com/736x/60/42/4a/60424a32f004509ec42ee1451f5116eb.jpg">
+  </div >
+  <div class="contenido-secundario"
+   <p>
+     Aspectos clave sobre las mascotas:
+  <li>  Beneficios para la salud: Acariciarlas reduce la ansiedad y mejora la salud cardiovascular.</li>
+  <li>Ayudan a niños con TEA/TDAH, personas mayores y son apoyo terapéutico.</li>
+<li>Responsabilidad: Requieren compromiso a largo plazo (10-15 años o más), cuidados, tiempo, alimentación y atención veterinaria.</li>
+  <li>Tipos comunes: Perros, gatos, peces, pájaros, pequeños roedores (hámsteres), conejos y algunos reptiles.</li>
+  <li>Impacto social: Fomentan la interacción social y mejorando la autoestima y la empatía.</li>
+  </p>
+  </div>
+  <div class="pie-pagina">
+    TE ENSEÑAMOS EL CLUIDADO DE LAS MASCOTAS <a href="https://www.youtube.com/watch?v=zV3wNvNFBZ8" target="_white">Ver video</a
+  </div>
+</div>
diff --git a/LAB-CSS-LILIANALOPEZ/src/style.scss b/LAB-CSS-LILIANALOPEZ/src/style.scss
@@ -0,0 +1,56 @@
+p{
+        color:black
+}
+h1{
+  color: white
+}
+body {
+  font-family: Comic Sans MS;
+  font-size: 20x;
+  text-align: center;  
+  margin: 0;
+  padding: 0;
+}
+.header {
+  background: #2A416A;
+  height: 60px;
+  margin-bottom: 10px;
+  min-width: 725px;
+  padding-top: 10px;
+  width: 100%;
+}
+.general-container {
+  margin: 0 auto;
+  width: 725px;
+}
+.izquierda {
+  background: #EBF5FE;
+  float: left;
+  height: 280px;
+  padding-top: 10px;
+  width: 20%;
+}
+.contenido-principal {
+  background: #EBF5FE;
+  float: left;
+  height: 280px;
+  padding-top: 10px;
+  margin: 0 1%;
+  width: 48%;
+}
+.derecha {
+  background: #EBF5FE;
+  float: left;
+  height: 280px;
+  padding-top: 10px;
+  width: 30%;
+}
+.contenido-secundario{
+  background: #O6AED5
+}
+.pie-pagina {
+  background: #2A416A;
+  color: #fff;
+  clear: both;
+  width: 900px;
+}
diff --git a/tartademanzana/LICENSE.txt b/tartademanzana/LICENSE.txt
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Liliana Yelitza López de Chaparro (https://codepen.io/Liliana-Yelitza-L-pez-de-Chaparro/pen/gbMJqJo)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/tartademanzana/README.md b/tartademanzana/README.md
@@ -0,0 +1,6 @@
+# TartaDeManzana
+
+A Pen created on CodePen.
+
+Original URL: [https://codepen.io/Liliana-Yelitza-L-pez-de-Chaparro/pen/gbMJqJo](https://codepen.io/Liliana-Yelitza-L-pez-de-Chaparro/pen/gbMJqJo).
+
diff --git a/tartademanzana/dist/index.html b/tartademanzana/dist/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8">
+    <title>TartaDeManzana</title>
+    <link rel="stylesheet" href="./style.css">
+
+  </head>
+
+  <body>
+  <!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Asignación página tarta de manzana</title>
+
+  </head>
+  <body>
+    <div class="contenedor">
+      <h1>TARTA DE MANZANA</h1>
+    </div>
+    <div>
+      <blockquote>
+      <p> La tarta de manzana. Historia, origen, día y trucos para que te quede de rechupete. Harina, agua, mantequilla y manzanas. (¡Parece una canción de Mary Poppins!) Son solo cuatro ingredientes, pero ¿no hacen que se os haga la boca agua? Sí, amigos, me refiero a la tarta de manzana.
+
+Sea cual sea su elaboración, porque hay muchas maneras de prepararla, no puedo evitar tener esa sensación. Más allá de confesar mi debilidad por este postre, hoy trataré de contaros un poquito más de él. Empezaré por el principio, su origen.</p> </blockquote>
+      <img style="display: block;-webkit-user-select: none;margin: auto;cursor: zoom-in;background-color: hsl(0, 0%, 90%);transition: background-color 300ms;" src="https://i.pinimg.com/736x/48/85/be/4885bed90f3c5f467f3e0e64b4a8f688.jpg" width="383" height="365">
+      <hr style="width:100%; text-align:left; margin-left:0">
+    </div>
+    <div>
+      <h2>¿Qué ingredientes necesitamos para hacer esta receta de tarta de manzana casera?</h2>
+      <li>1 kg de manzanas golden</li>
+       <li>2 huevos</li>
+ <li>4 cucharadas de maizena y 4 de harina de repostería</li>
+ <li>8 cucharadas de azúcar</li>
+ <li>1 vaso de leche entera</li>
+ <li>1 sobre de levadura</li>
+ <li>El zumo de medio limón</li>
+ <li>Mermelada de albaricoque o melocotón</li>
+ <li>Mantequilla para engrasar el molde</li>
+      <hr style="width:100%; text-align:left; margin-left:0">
+    </div
+
+
+    <div>
+      <h2>Preparación:</h2> 
+       <blockquote><p>Ponemos a precalentar el horno y, mientras, vamos preparando la masa de la tarta:
+En un bol suficientemente hondo picamos o rallamos todas las manzanas, salvo una, que reservaremos para laminarla y cubrir la tarta. Incorporamos al bol los huevos, la leche, el azúcar, la ralladura y el zumo de limón, y batimos hasta que nos quede una mezcla bien fina. A continuación añadimos la maizena y la harina a través de un tamiz o colador, y la levadura. Batimos de nuevo hasta que se integren las harinas y no haya grumos.
+      </p>  </blockquote>
+    </div>
+
+  </body>
+</html>
+
+  </body>
+
+</html>
diff --git a/tartademanzana/dist/style.css b/tartademanzana/dist/style.css
@@ -0,0 +1,18 @@
+p {
+  color: blue;
+  width: "383";
+  height: "365";
+}
+
+h2 {
+  color: blue;
+}
+
+.contenedor {
+  background-image: url("https://i.pinimg.com/1200x/a4/69/b5/a469b53b1f0a1059850cdf5f484d498d.jpg");
+  background-position: center center;
+  background-repead: no-repeat;
+  background-size: cover;
+  height: 400px;
+  color: #fff;
+}
diff --git a/tartademanzana/src/index.html b/tartademanzana/src/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Asignación página tarta de manzana</title>
+
+  </head>
+  <body>
+    <div class="contenedor">
+      <h1>TARTA DE MANZANA</h1>
+    </div>
+    <div>
+      <blockquote>
+      <p> La tarta de manzana. Historia, origen, día y trucos para que te quede de rechupete. Harina, agua, mantequilla y manzanas. (¡Parece una canción de Mary Poppins!) Son solo cuatro ingredientes, pero ¿no hacen que se os haga la boca agua? Sí, amigos, me refiero a la tarta de manzana.
+
+Sea cual sea su elaboración, porque hay muchas maneras de prepararla, no puedo evitar tener esa sensación. Más allá de confesar mi debilidad por este postre, hoy trataré de contaros un poquito más de él. Empezaré por el principio, su origen.</p> </blockquote>
+      <img style="display: block;-webkit-user-select: none;margin: auto;cursor: zoom-in;background-color: hsl(0, 0%, 90%);transition: background-color 300ms;" src="https://i.pinimg.com/736x/48/85/be/4885bed90f3c5f467f3e0e64b4a8f688.jpg" width="383" height="365">
+      <hr style="width:100%; text-align:left; margin-left:0">
+    </div>
+    <div>
+      <h2>¿Qué ingredientes necesitamos para hacer esta receta de tarta de manzana casera?</h2>
+      <li>1 kg de manzanas golden</li>
+       <li>2 huevos</li>
+ <li>4 cucharadas de maizena y 4 de harina de repostería</li>
+ <li>8 cucharadas de azúcar</li>
+ <li>1 vaso de leche entera</li>
+ <li>1 sobre de levadura</li>
+ <li>El zumo de medio limón</li>
+ <li>Mermelada de albaricoque o melocotón</li>
+ <li>Mantequilla para engrasar el molde</li>
+      <hr style="width:100%; text-align:left; margin-left:0">
+    </div
+
+
+    <div>
+      <h2>Preparación:</h2> 
+       <blockquote><p>Ponemos a precalentar el horno y, mientras, vamos preparando la masa de la tarta:
+En un bol suficientemente hondo picamos o rallamos todas las manzanas, salvo una, que reservaremos para laminarla y cubrir la tarta. Incorporamos al bol los huevos, la leche, el azúcar, la ralladura y el zumo de limón, y batimos hasta que nos quede una mezcla bien fina. A continuación añadimos la maizena y la harina a través de un tamiz o colador, y la levadura. Batimos de nuevo hasta que se integren las harinas y no haya grumos.
+      </p>  </blockquote>
+    </div>
+
+  </body>
+</html>