Merge pull request #1 from patriciacaicedo/Prueba-de-rama

pull request rama
patriciacaicedo · Aug 4, 2024 · 4bddc80 · 4bddc80
2 parents 640cc43 + ff753c5
commit 4bddc80
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
     <link href="styles.css" rel="stylesheet">
 </head>
 <body class="bg-light">
-    <div class="container mt-5">
+    <div class="container-fluid mt-5">
         <div class="row justify-content-center">
             <div class="col-lg-6 col-md-8 col-sm-10">
                 <div class="card bg-primary text-white contrast-card">
@@ -49,11 +49,12 @@ <h2 class="card-title text-center mb-4">Datos Personales</h2>
                                 <div class="invalid-feedback">Debe aceptar las condiciones.</div>
                             </div>
                             <button type="submit" class="btn btn-light w-100" title="Enviar formulario">Enviar</button>
+
                         </form>
                     </div>
                 </div>
                 <button id="toggleContrast" class="btn btn-secondary mt-3" title="Alternar alto contraste">Alto contraste</button>
-            </div>
+        </div>
         </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

diff --git a/styles.css b/styles.css
@@ -1,5 +1,5 @@
 :root {
-    --bs-primary: #5678ad; /* Este es el valor de $blue-400 en Bootstrap 5 */
+    --bs-primary: #2d456e; /* Este es el valor de $blue-400 en Bootstrap 5 */
 }
 
 .bg-primary {
@@ -105,4 +105,54 @@
 .high-contrast .was-validated .form-check-input:valid:checked {
     border-color: #198754;
     background-color: #198754;
+}
+
+/* Estilos base */
+.card {
+    margin-bottom: 20px;
+}
+
+/* Estilos para notebook (lg) */
+@media (min-width: 992px) {
+    .card {
+        padding: 2rem;
+    }
+}
+
+/* Estilos para tablet (md) */
+@media (min-width: 768px) and (max-width: 991.98px) {
+    .card {
+        padding: 1.5rem;
+    }
+}
+
+/* Estilos para celular de 7" (sm) */
+@media (max-width: 767.98px) {
+    .card {
+        padding: 1rem;
+    }
+
+    h2.card-title {
+        font-size: 1.5rem;
+    }
+
+    .form-label {
+        font-size: 0.9rem;
+    }
+
+    .btn {
+        font-size: 0.9rem;
+    }
+}
+
+/* Ajustes adicionales para pantallas muy pequeñas */
+@media (max-width: 575.98px) {
+    .container-fluid {
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+
+    h2.card-title {
+        font-size: 1.3rem;
+    }
 }