Ejercicio CCS 7

📝 Ejercicio 7: Formulario estilizado y alineado

📌 Planteamiento:

Diseña un **formulario simple y moderno** que cumpla con lo siguiente:

• ✅ Fondo claro con **bordes redondeados** en los campos.
• ✅ Campos de **texto y correo electrónico alineados verticalmente**.
• ✅ Un botón de envío con **color llamativo** y efecto hover.
• ✅ Usa la clase .formulario para el contenedor y aplica el CSS allí.

👉 Escribe el **CSS necesario** para estilizar este formulario.

✅ Modelo de solución CSS:

.formulario {
  background-color: #ffffff;
  padding: 20px;
  max-width: 350px;
  margin: 20px auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
}

.formulario label {
  display: block;
  margin: 10px 0 5px;
  color: #333;
}

.formulario input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}

.formulario button {
  width: 100%;
  background-color: #007BFF;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.formulario button:hover {
  background-color: #0056b3;
}
    

🎯 Claves de este ejercicio:

• 📍 Cómo dar un estilo limpio a un formulario sin recargarlo.
• 📍 Uso de label y input con display:block para alineación vertical.
• 📍 Creación de un botón con hover para mejorar la experiencia de usuario.