From 66bd4f8cd30856912fbb12c1895dc57e0d7fa1ed Mon Sep 17 00:00:00 2001
From: Agustin Lautaro Moneta <46840139@terciariourquiza.edu.ar>
Date: Fri, 24 Apr 2026 16:01:03 -0300
Subject: [PATCH] Se agrego el formulario y se le dio estilo con el archivo
 agregado styles.css

---
 index.html |  47 +++++++++++++++++++
 styles.css | 129 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 176 insertions(+)
 create mode 100644 styles.css
diff --git a/index.html b/index.html
index 25c776c..509f3f7 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
     <title>Fluxio | Cloud Gaming</title>
 </head>
 <body>
@@ -34,6 +35,52 @@
                 </tr>
             </table>
         </section>
+        <section id="seccionFormulario" style="display: none;">
+            <hr>
+            <h3>Formulario de Suscripción</h3>
+            <form action="#">
+                <div>
+                    <label for="nombre">Nombre:</label>
+                    <input type="text" id="nombre" required placeholder="Tu nombre">
+                </div>
+                <div>
+                    <label for="apellido">Apellido:</label>
+                    <input type="text" id="apellido" required placeholder="Tu apellido">
+                </div>
+                <div class="grupo-radio">
+                    <label>Elegí tu plan:</label>
+                    <input type="radio" name="plan" value="1" id="radio1" checked> 
+                    <label for="radio1" style="display: inline;">Plan Básico</label>
+                    <input type="radio" name="plan" value="2" id="radio2" style="margin-left: 15px;"> 
+                    <label for="radio2" style="display: inline;">Plan Premium</label>
+                </div>
+                <div>
+                    <label for="email">Email:</label>
+                    <input type="email" id="email" required placeholder="ejemplo@correo.com">
+                </div>
+                <div>
+                    <label for="cuotas">Cantidad de cuotas:</label>
+                    <input type="number" id="cuotas" min="1" value="1">
+                </div>
+                <div>
+                    <label for="provincia">Provincia:</label>
+                    <select id="provincia">
+                        <option value="s">Santa Fe</option>
+                        <option value="e">Entre Ríos</option>
+                        <option value="c">Córdoba</option>
+                    </select>
+                </div>
+                <div class="grupo-checkbox">
+                    <input type="checkbox" id="estudiante">
+                    <label for="estudiante" style="display: inline;">¿Sos estudiante?</label>
+                </div>
+                <div>
+                    <label for="mensaje">Comentarios adicionales:</label>
+                    <textarea id="mensaje" rows="4" placeholder="Escribí acá..."></textarea>
+                </div>
+                <button type="submit">Enviar Registro</button>
+            </form>
+        </section>
     </main>
     <footer>
         <p>&copy; 2026 Fluxio Cloud Gaming - Rosario, Santa Fe.</p>
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..c747fed
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,129 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+body {
+    background-color: #f4f7f9;
+    color: #333;
+    line-height: 1.6;
+}
+header {
+    background-color: #1a1a2e;
+    color: #fff;
+    padding: 1rem 5%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+}
+.logo {
+    width: 50px;
+    height: auto;
+    vertical-align: middle;
+}
+header h1 {
+    font-size: 1.5rem;
+    display: inline-block;
+}
+nav ul {
+    list-style: none;
+    display: flex;
+    align-items: center;
+}
+nav ul li {
+    margin-left: 20px;
+}
+nav ul li a {
+    color: #fff;
+    text-decoration: none;
+    font-weight: 500;
+}
+#Suscripcion {
+    background-color: #00d2ff;
+    color: #1a1a2e;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-weight: bold;
+    transition: background 0.3s;
+}
+#Suscripcion:hover {
+    background-color: #0099cc;
+}
+main {
+    max-width: 900px;
+    margin: 40px auto;
+    padding: 20px;
+    background: #fff;
+    border-radius: 8px;
+    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
+}
+h2, h3 {
+    color: #1a1a2e;
+    margin-bottom: 15px;
+}
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 20px 0;
+}
+table th, table td {
+    text-align: left;
+    padding: 12px;
+    border-bottom: 1px solid #ddd;
+}
+table th {
+    background-color: #f8f9fa;
+    color: #1a1a2e;
+}
+#seccionFormulario {
+    margin-top: 30px;
+    padding-top: 20px;
+    border-top: 2px solid #eee;
+}
+form div {
+    margin-bottom: 15px;
+}
+label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: 600;
+}
+input[type="text"],
+input[type="email"],
+input[type="number"],
+select,
+textarea {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 1rem;
+}
+input[type="radio"],
+input[type="checkbox"] {
+    margin-right: 8px;
+}
+button[type="submit"] {
+    background-color: #28a745;
+    color: white;
+    border: none;
+    padding: 12px;
+    width: 100%;
+    border-radius: 4px;
+    font-size: 1.1rem;
+    cursor: pointer;
+    font-weight: bold;
+}
+button[type="submit"]:hover {
+    background-color: #218838;
+}
+footer {
+    text-align: center;
+    padding: 20px;
+    color: #777;
+    font-size: 0.9rem;
+}
\ No newline at end of file
