diff --git a/app.js b/app.js
index b01556e..3d7d048 100644
--- a/app.js
+++ b/app.js
@@ -3,66 +3,78 @@ let clickCount = 0;
 let currentBackgroundIndex = 0;
 
 // Background color variations
-const backgroundClasses = ['', 'bg-variant-1', 'bg-variant-2', 'bg-variant-3', 'bg-variant-4'];
+const backgroundClasses = [
+  "",
+  "bg-variant-1",
+  "bg-variant-2",
+  "bg-variant-3",
+  "bg-variant-4",
+];
 
 // Function to change background color
 function changeBackgroundColor() {
-    // Increment click counter
-    clickCount++;
-    document.getElementById('clickCounter').textContent = `Clicks: ${clickCount}`;
-    
-    // Remove current background class
-    document.body.className = '';
-    
-    // Cycle through background variations
-    currentBackgroundIndex = (currentBackgroundIndex + 1) % backgroundClasses.length;
-    
-    // Apply new background class
-    if (backgroundClasses[currentBackgroundIndex]) {
-        document.body.classList.add(backgroundClasses[currentBackgroundIndex]);
-    }
-    
-    // Add a fun animation effect
-    document.getElementById('colorButton').style.transform = 'scale(0.95)';
-    setTimeout(() => {
-        document.getElementById('colorButton').style.transform = '';
-    }, 150);
+  // Increment click counter
+  clickCount++;
+  document.getElementById("clickCounter").textContent = `Clicks: ${clickCount}`;
+
+  // Remove current background class
+  document.body.className = "";
+
+  // Cycle through background variations
+  currentBackgroundIndex =
+    (currentBackgroundIndex + 1) % backgroundClasses.length;
+
+  // Apply new background class
+  if (backgroundClasses[currentBackgroundIndex]) {
+    document.body.classList.add(backgroundClasses[currentBackgroundIndex]);
+  }
+
+  // Add a fun animation effect
+  document.getElementById("colorButton").style.transform = "scale(0.95)";
+  setTimeout(() => {
+    document.getElementById("colorButton").style.transform = "";
+  }, 150);
 }
 
 // Welcome message when page loads
-document.addEventListener('DOMContentLoaded', function() {
-    console.log('🎉 Welcome to your first web app!');
-    console.log('💡 Tip: Open the browser developer tools (F12) to see this message and experiment with the console!');
-    
-    // Add some console styling for fun
-    console.log('%c🚀 Ready for development!', 'color: #667eea; font-size: 16px; font-weight: bold;');
-    
-    // Show a brief welcome animation
-    document.body.style.opacity = '0';
-    document.body.style.transition = 'opacity 0.5s ease-in';
-    
-    setTimeout(() => {
-        document.body.style.opacity = '1';
-    }, 100);
+document.addEventListener("DOMContentLoaded", function () {
+  console.log("🎉 Welcome to your first web app!");
+  console.log(
+    "💡 Tip: Open the browser developer tools (F12) to see this message and experiment with the console!",
+  );
+
+  // Add some console styling for fun
+  console.log(
+    "%c🚀 Ready for development!",
+    "color: #667eea; font-size: 16px; font-weight: bold;",
+  );
+
+  // Show a brief welcome animation
+  document.body.style.opacity = "0";
+  document.body.style.transition = "opacity 0.5s ease-in";
+
+  setTimeout(() => {
+    document.body.style.opacity = "1";
+  }, 100);
 });
 
 // Fun keyboard shortcut (press 'c' to change colors)
-document.addEventListener('keydown', function(event) {
-    if (event.key.toLowerCase() === 'c') {
-        changeBackgroundColor();
-    }
+document.addEventListener("keydown", function (event) {
+  if (event.key.toLowerCase() === "c") {
+    changeBackgroundColor();
+  }
 });
 
 // Display current time (updates every second)
 function updateTime() {
-    const now = new Date();
-    const timeString = now.toLocaleTimeString();
-    
-    // Create time display if it doesn't exist
-    if (!document.getElementById('currentTime')) {
-        const timeDisplay = document.createElement('div');
-        timeDisplay.id = 'currentTime';
-        timeDisplay.style.cssText = `
+  const now = new Date();
+  const timeString = now.toLocaleTimeString();
+
+  // Create time display if it doesn't exist
+  if (!document.getElementById("currentTime")) {
+    const timeDisplay = document.createElement("div");
+    timeDisplay.id = "currentTime";
+    timeDisplay.style.cssText = `
             position: fixed;
             top: 10px;
             right: 10px;
@@ -73,10 +85,11 @@ function updateTime() {
             color: #4a5568;
             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
         `;
-        document.body.appendChild(timeDisplay);
-    }
-    
-    document.getElementById('currentTime').textContent = `Current time: ${timeString}`;
+    document.body.appendChild(timeDisplay);
+  }
+
+  document.getElementById("currentTime").textContent =
+    `Current time: ${timeString}`;
 }
 
 // Update time every second
diff --git a/index.html b/index.html
index e3402e9..c9f88d2 100644
--- a/index.html
+++ b/index.html
@@ -1,61 +1,146 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="es">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Client-side web app</title>
-    <link rel="stylesheet" href="styles.css">
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Client-side web app</title>
+  <link rel="stylesheet" href="styles.css">
 </head>
+
 <body>
-    <header>
-        <h1>🎉 Welcome to your web app!</h1>
-        <p>Congratulations on setting up your local development environment!</p>
-    </header>
-
-    <main>
-        <section class="info-card">
-            <h2>What you've accomplished</h2>
-            <ul>
-                <li>✅ Set up a local development environment</li>
-                <li>✅ Installed Node.js dependencies</li>
-                <li>✅ Started a local web server that uses <a href="https://www.npmjs.com/package/http-server" target="_blank"><code>http-server</code></a></li>
-                <li>✅ Previewed a live version of your app</li>
-            </ul>
-        </section>
-
-        <section class="experiment-zone">
-            <h2>Try this!</h2>
-            <p>Make changes to this HTML file or the CSS file and save. Then refresh your browser to see the changes.</p>
-            
-            <div class="interactive-demo">
-                <button id="colorButton" onclick="changeBackgroundColor()">Click me to change background color</button>
-                <p id="clickCounter">Clicks: 0</p>
-            </div>
-        </section>
-
-        <section class="learning-tips">
-            <h2>Next Steps</h2>
-            <div class="tip-grid">
-                <div class="tip">
-                    <h3>🎨 Styling</h3>
-                    <p>Edit <code>styles.css</code> to change how your app looks</p>
-                </div>
-                <div class="tip">
-                    <h3>⚡ Functionality</h3>
-                    <p>Edit <code>app.js</code> to add more interactive features</p>
-                </div>
-                <div class="tip">
-                    <h3>📱 Responsive</h3>
-                    <p>Try resizing your browser window to see responsive design</p>
-                </div>
-            </div>
-        </section>
-    </main>
-
-    <footer>
-        <p>Happy coding! 🚀</p>
-    </footer>
-
-    <script src="app.js"></script>
+  <header>
+    <h1>🎉Bienvenido a tu aplicación Web!👌</h1>
+    <p>Felicitaciones por configurar tu entorno de desarrollo local!</p>
+  </header>
+
+  <main>
+    <section class="pruebas tip">
+      <h2>Secciones</h2>
+      <ul>
+        <li><a href="#uno">What you've accomplished</a></li>
+        <li><a href="#dos">Try this!</a></li>
+        <li><a href="#tres">Next Steps</a></li>
+        <li><a href="#cuatro">Datos personales</a></li>
+        <li><a href=""></a></li>
+        <li><a href=""></a></li>
+        <li><a href=""></a></li>
+
+      </ul>
+    </section><br><br>
+
+    <section class="info-card">
+      <h2 id="uno">What you've accomplished</h2>
+      <ul>
+        <li>✅ Set up a local development environment</li>
+        <li>✅ Installed Node.js dependencies</li>
+        <li>✅ Started a local web server that uses <a class="otra" href="https://www.npmjs.com/package/http-server"
+            target="_blank"><code>http-server</code></a></li>
+        <li>✅ Previewed a live version of your app</li>
+      </ul>
+    </section>
+
+    <section class="experiment-zone">
+      <h2 id="dos">Try this!</h2>
+      <p>Make changes to this HTML file or the CSS file and save. Then refresh your browser to see the changes.</p>
+
+      <div class="interactive-demo">
+        <button id="colorButton" onclick="changeBackgroundColor()">Click me to change background color</button>
+        <p id="clickCounter">Clicks: 0</p>
+      </div>
+    </section>
+
+    <section class="learning-tips">
+      <h2 id="tres">Next Steps</h2>
+      <div class="tip-grid">
+        <div class="tip">
+          <h3>🎨 Styling</h3>
+          <p>Edit <code>styles.css</code> to change how your app looks</p>
+        </div>
+        <div class="tip">
+          <h3>⚡ Functionality</h3>
+          <p>Edit <code>app.js</code> to add more interactive features</p>
+        </div>
+        <div class="tip">
+          <h3>📱 Responsive</h3>
+          <p>Try resizing your browser window to see responsive design</p>
+        </div>
+      </div>
+    </section>
+    <section class="pruebas tip">
+      <h2 id="cuatro">Datos personales</h2>
+      <form action="http://localhost:8080/send?" target="_blank">
+        <label for=""><b>Nombre:</b>
+          <!-- pattern="^[A-Za-zÑñÁáÉéÍíÓóÚú1-0\s]+$"  esta expresión en el pattern (patrón en español) te permite agregar mayúsculas y minúsculas, Eñes y vocales acentuadas, números del 0 al 9  y espacios en blanco( \s)-->
+          <input type="text" name="nombre" required placeholder="<--Escriba su nombre aquí-->" size="30"
+            pattern="^[A-Za-zÑñÁáÉéÍíÓóÚú0-9\s]+$"></label><br>
+        <label for=""><b>Correo electrónico:</b>
+          <input type="email" name="email" title="Debe rellenar este campo" required
+            autocomplete="true"></label><br><br>
+        <label>
+          <input type="radio" name="idioma" value="es" checked>
+          Español
+        </label><br>
+        <label>
+          <input type="radio" name="idioma" value="in">
+          Inglés
+        </label><br>
+        <label>
+          <input type="radio" name="idioma" value="pr">
+          Portugués
+        </label><br>
+        <label>
+          <input type="radio" name="idioma" value="it">
+          Italiano
+        </label><br>
+        <input type="submit" value="confirmar"> <br>
+        <input type="reset" value="denegar">
+
+
+      </form>
+      <br><br>
+      <hr>
+      <h4>Whatssapp</h4><br>
+      <form action="https://api.whatsapp.com/send?" target="_blank">
+
+        <label for=""><b>Teléfono:</b>
+          <input type="tel" name="telef" title="Debe rellenar este campo" required
+            placeholder="--Escriba su número telefónico aquí--" size="30"></label><br><br>
+        <label for=""><b>Texto:</b>
+          <input type="text" name="text" required placeholder="--Escriba texto aquí--" size="30"></label><br><br>
+        <label for="selector"><b>Lenguaje: </b></label><select name="lenguaje" id="selector">
+          <option value="1" selected>Java</option>
+          <option value="2">JavaScript</option>
+          <option value="3">Python</option>
+        </select><br><br>
+        <!-- Para los checkbox y los Radio no es es estrictamente necesario el atributo value ya que al ejecutarse el sistema le pone el valor on que puede ser 1 o true lo cuales son valores positivos.  -->
+        <label>
+          <input type="checkbox" name="terminos" required title="Debe aceptar para continuar">
+          ¿Acepta términos y condiciones?</label><br>
+        <input type="submit" value="confirmar">
+        <input type="reset" value="denegar">
+      </form>
+    </section><br>
+    <section class="pruebas tip">
+      <h4>Formulario de contacto</h4>
+      <form action="http://formsubmit.co/lapzdev@gmail.com" method="post">
+        <input type="text" name="nombre" placeholder="--Escribe tu nombre--" pattern="^[A-Za-zÑñÁáÉéÍíÓóÚú\s]+$"
+          title="Sólo acepta letras y espacios en blanco"><br>
+        <input type="email" name="correo" placeholder="--Escribe tu correo--"
+          pattern="^(\w+[/./-]?){1,}@[a-z]+[/.]\w{2,}$" required title="Formato de correo inválido"><br>
+        <!-- Las textarea no aceptan el atributo pattern pero si aceptan el atributo required.. .-->
+
+        <textarea name="comentarios" id="" cols="30" rows="10"></textarea><br>
+        <input type="submit">
+      </form>
+    </section>
+  </main>
+
+  <footer>
+    <p>Feliz Codificación! 🚀</p>
+  </footer>
+
+  <script src="app.js"></script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/notas-mias.md b/notas-mias.md
new file mode 100644
index 0000000..a86ae0a
--- /dev/null
+++ b/notas-mias.md
@@ -0,0 +1 @@
+Este es un markdown para anotar los cambios efectuados a partir del original
diff --git a/styles.css b/styles.css
index 0e7b964..df5f5fa 100644
--- a/styles.css
+++ b/styles.css
@@ -1,186 +1,209 @@
 /* Reset and base styles */
+html {
+  scroll-behavior: smooth;
+}
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
 
 body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    line-height: 1.6;
-    color: #333;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    min-height: 100vh;
-    transition: background 0.5s ease;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  line-height: 1.6;
+  color: #333;
+  background: linear-gradient(135deg, #667eea 0%, #d52828 100%);
+  min-height: 100vh;
+  transition: background 0.5s ease;
 }
 
 /* Header styles */
 header {
-    text-align: center;
-    padding: 2rem 1rem;
-    background: rgba(255, 255, 255, 0.1);
-    backdrop-filter: blur(10px);
-    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  text-align: center;
+  padding: 2rem 1rem;
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 header h1 {
-    font-size: 2.5rem;
-    color: white;
-    margin-bottom: 0.5rem;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+  font-size: 2.5rem;
+  color: rgb(232, 30, 30);
+  margin-bottom: 0.5rem;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
 }
 
 header p {
-    font-size: 1.2rem;
-    color: rgba(255, 255, 255, 0.9);
+  font-size: 1.2rem;
+  color: rgba(255, 255, 255, 0.9);
 }
 
 /* Main content */
 main {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 2rem 1rem;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem 1rem;
 }
 
 /* Card styles */
-.info-card, .experiment-zone, .learning-tips {
-    background: rgba(255, 255, 255, 0.95);
-    border-radius: 15px;
-    padding: 2rem;
-    margin-bottom: 2rem;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-.info-card h2, .experiment-zone h2, .learning-tips h2 {
-    color: #4a5568;
-    margin-bottom: 1rem;
-    font-size: 1.8rem;
+.info-card,
+.experiment-zone,
+.learning-tips {
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 15px;
+  padding: 2rem;
+  margin-bottom: 2rem;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.info-card,
+.experiment-zone,
+.learning-tips {
+  color: #4a5568;
+  margin-bottom: 1rem;
+  font-size: 1.8rem;
 }
 
 .info-card ul {
-    list-style: none;
-    padding-left: 0;
+  list-style: none;
+  padding-left: 0;
+}
+h2 {
+  color: #667eea;
+  font-size: 30px;
+  font-family: sans-serif;
+  text-shadow: 0.5px 0.5px 0.25rem;
 }
-
 .info-card li {
-    padding: 0.5rem 0;
-    font-size: 1.1rem;
-    color: #2d3748;
+  padding: 0.5rem 0;
+  font-size: 1.1rem;
+  color: #2d3748;
 }
 
 /* Interactive demo */
 .interactive-demo {
-    background: #f7fafc;
-    border-radius: 10px;
-    padding: 1.5rem;
-    margin-top: 1rem;
-    text-align: center;
+  background: #f7fafc;
+  border-radius: 10px;
+  padding: 1.5rem;
+  margin-top: 1rem;
+  text-align: center;
 }
 
 #colorButton {
-    background: linear-gradient(45deg, #667eea, #764ba2);
-    color: white;
-    border: none;
-    padding: 12px 24px;
-    font-size: 1rem;
-    border-radius: 25px;
-    cursor: pointer;
-    transition: all 0.3s ease;
-    margin-bottom: 1rem;
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  font-size: 1rem;
+  border-radius: 25px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-bottom: 1rem;
 }
 
 #colorButton:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
 }
 
 #clickCounter {
-    font-size: 1.2rem;
-    color: #4a5568;
-    font-weight: bold;
+  font-size: 1.2rem;
+  color: #4a5568;
+  font-weight: bold;
 }
 
 /* Tips grid */
 .tip-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 1.5rem;
-    margin-top: 1rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+  margin-top: 1rem;
 }
 
 .tip {
-    background: #f7fafc;
-    padding: 1.5rem;
-    border-radius: 10px;
-    border-left: 4px solid #667eea;
+  background: #f7fafc;
+  padding: 1.5rem;
+  border-radius: 10px;
+  border-left: 4px solid #667eea;
 }
 
 .tip h3 {
-    color: #2d3748;
-    margin-bottom: 0.5rem;
+  color: #2d3748;
+  margin-bottom: 0.5rem;
 }
 
 .tip p {
-    color: #4a5568;
+  color: #4a5568;
+}
+a:not(.otra) {
+  font-size: 20px;
+  text-decoration: none;
+  box-shadow: 2px 2px 0.5rem;
+  background-color: #a8edea;
+}
+ul {
+  list-style-type: none;
 }
-
 code {
-    background: #e2e8f0;
-    padding: 2px 6px;
-    border-radius: 4px;
-    font-family: 'Courier New', monospace;
-    color: #2d3748;
+  background: #e2e8f0;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: "Courier New", monospace;
+  color: #2d3748;
 }
 
 /* Footer */
 footer {
-    text-align: center;
-    padding: 2rem;
-    color: rgba(255, 255, 255, 0.8);
+  text-align: center;
+  padding: 2rem;
+  color: rgba(255, 255, 255, 0.8);
 }
 
 footer p {
-    margin-bottom: 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 /* Responsive design */
 @media (max-width: 768px) {
-    header h1 {
-        font-size: 2rem;
-    }
-    
-    header p {
-        font-size: 1rem;
-    }
-    
-    main {
-        padding: 1rem;
-    }
-    
-    .info-card, .experiment-zone, .learning-tips {
-        padding: 1.5rem;
-    }
-    
-    .tip-grid {
-        grid-template-columns: 1fr;
-    }
+  header h1 {
+    font-size: 2rem;
+  }
+
+  header p {
+    font-size: 1rem;
+  }
+
+  main {
+    padding: 1rem;
+  }
+
+  .info-card,
+  .prueba,
+  .experiment-zone,
+  .learning-tips {
+    padding: 1.5rem;
+  }
+
+  .tip-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 /* Background color variations for the interactive demo */
 .bg-variant-1 {
-    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
+  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
 }
 
 .bg-variant-2 {
-    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
+  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%) !important;
 }
 
 .bg-variant-3 {
-    background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%) !important;
+  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%) !important;
 }
 
 .bg-variant-4 {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
 }