Scribd
Upload
5 views2 pages

Casopractico

Uploaded by

Cristhian Paolo Moreno Silva
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views2 pages

Casopractico

Uploaded by

Cristhian Paolo Moreno Silva
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulario de Registro</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
}
.custom-form {
max-width: 500px;
margin: 50px auto;
padding: 30px;
background-color: #ffffff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.custom-form h2 {
margin-bottom: 20px;
font-size: 24px;
font-weight: bold;
color: #343a40;
text-align: center;
}
.custom-form label {
font-weight: 600;
color: #495057;
}
.custom-form .form-control, .custom-form .form-select {
border-radius: 8px;
}
.custom-form .btn-primary {
background-color: #007bff;
border: none;
border-radius: 8px;
padding: 10px 15px;
font-size: 16px;
transition: background-color 0.3s ease;
}
.custom-form .btn-primary:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="custom-form">
<h2>Formulario de Registro</h2>
<form>
<!-- Campo de Nombre -->
<div class="mb-4">
<label for="nombre" class="form-label">Nombre</label>
<input type="text" class="form-control" id="nombre"
placeholder="Ingresa tu nombre">
</div>
<!-- Campo de Email -->
<div class="mb-4">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email"
placeholder="Ingresa tu email">
</div>

<!-- Selección de Género -->


<div class="mb-4">
<label for="genero" class="form-label">Género</label>
<select class="form-select" id="genero">
<option selected disabled>Selecciona tu género</option>
<option value="masculino">Masculino</option>
<option value="femenino">Femenino</option>
<option value="otro">Otro</option>
</select>
</div>

<!-- Botón de Envío -->


<div class="d-grid">
<button type="submit" class="btn btn-primary">Enviar</button>
</div>
</form>
</div>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>

You might also like