<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Taller de Arte Universitario</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
margin: 0;
padding: 20px;
}

.container {
max-width: 600px;
margin: 0 auto;
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
border: 2px solid #4a90e2;
}

.header {
text-align: center;
margin-bottom: 30px;
color: #2c3e50;
}

h1 {
color: #e74c3c;
margin-bottom: 10px;
}

h2 {
color: #3498db;
font-size: 18px;
}

.form-section {
background-color: #f8f9fa;
margin-bottom: 10px;
padding: 20px;
border-radius: 8px;
}

.section-title {
color: #2c3e50;
margin-bottom: 15px;
font-size: 16px;
}

.form-group {
margin-bottom: 15px;
}

label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #34495e;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
width: 100%;
padding: 8px;
border: 1px solid #bdc3c7;
border-radius: 4px;
font-size: 14px;
}

.radio-group,
.checkbox-group {
margin-top: 10px;
}

.radio-option,
.checkbox-option {
display: inline-block;
margin-right: 20px;
margin-bottom: 8px;
}

.radio-option input,
.checkbox-option input {
width: auto;
margin-right: 5px;
}

.button-group {
text-align: center;
margin-top: 25px;
}

button {
padding: 12px 25px;
margin: 0 10px;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
}

.btn-submit {
background-color: #27ae60;
color: white;
}

.btn-reset {
background-color: #e74c3c;
color: white;
}



</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Taller de Arte Universitario</h1>
<h2>Inscripción 2024</h2>
</div>

<form action="#" method="post">
<div class="form-section">
<div class="section-title">Información Personal</div>

<div class="form-group">
<label for="nombre">Nombre completo *</label>
<input type="text" id="nombre" name="nombre" required maxlength="50" placeholder="Ingrese su nombre completo">
</div>

<div class="form-group">
<label for="email">Correo electrónico *</label>
<input type="email" id="email" name="email" required placeholder="[email protected]">
</div>

<div class="form-group">
<label for="telefono">Teléfono *</label>
<input type="tel" id="telefono" name="telefono" required pattern="[0-9]{10}" placeholder="10 dígitos sin espacios">
</div>

<div class="form-group">
<label for="edad">Edad *</label>
<input type="number" id="edad" name="edad" required min="18" max="65" placeholder="Entre 18 y 65 años">
</div>
</div>

<div class="form-section">
<div class="section-title">Información del Taller</div>

<div class="form-group">
<label>Tipo de taller *</label>
<div class="radio-group">
<label class="radio-option">
<input type="radio" name="taller" value="pintura" required> Pintura
</label>
<label class="radio-option">
<input type="radio" name="taller" value="escultura"> Escultura
</label>
<label class="radio-option">
<input type="radio" name="taller" value="dibujo"> Dibujo
</label>
<label class="radio-option">
<input type="radio" name="taller" value="fotografia"> Fotografía
</label>
</div>
</div>

<div class="form-group">
<label for="nivel">Nivel *</label>
<select id="nivel" name="nivel" required>
<option value="">Seleccione su nivel</option>
<option value="principiante">Principiante</option>
<option value="intermedio">Intermedio</option>
<option value="avanzado">Avanzado</option>
</select>
</div>

<div class="form-group">
<label for="horario">Horario preferido *</label>
<select id="horario" name="horario" required>
<option value="">Seleccione horario</option>
<option value="mañana">Mañana (8:00 - 12:00)</option>
<option value="tarde">Tarde (14:00 - 18:00)</option>
<option value="noche">Noche (18:00 - 22:00)</option>
</select>
</div>

<div class="form-group">
<label for="fecha">Fecha de inicio *</label>
<input type="date" id="fecha" name="fecha" required>
</div>
</div>

<div class="form-section">
<div class="section-title">Materiales</div>

<div class="form-group">
<label>Materiales que posee</label>
<div class="checkbox-group">
<label class="checkbox-option">
<input type="checkbox" name="materiales" value="pinceles"> Pinceles
</label>
<label class="checkbox-option">
<input type="checkbox" name="materiales" value="lienzos"> Lienzos
</label>
<label class="checkbox-option">
<input type="checkbox" name="materiales" value="acrilicos"> Acrílicos
</label>
<label class="checkbox-option">
<input type="checkbox" name="materiales" value="oles"> Óleos
</label>
<label class="checkbox-option">
<input type="checkbox" name="materiales" value="carboncillo"> Carboncillo
</label>
<label class="checkbox-option">
<input type="checkbox" name="materiales" value="camara"> Cámara
</label>
</div>
</div>

<div class="form-group">
<label>¿Necesita kit de materiales? *</label>
<div class="radio-group">
<label class="radio-option">
<input type="radio" name="kit" value="si" required> Sí
</label>
<label class="radio-option">
<input type="radio" name="kit" value="no"> No
</label>
</div>
</div>
</div>

<div class="form-section">
<div class="section-title">Información Adicional</div>

<div class="form-group">
<label for="experiencia">Experiencia previa</label>
<textarea id="experiencia" name="experiencia" maxlength="100" placeholder="Máximo 100 caracteres"></textarea>
</div>

<div class="form-group">
<label for="alergias">Alergias o condiciones especiales</label>
<input type="text" id="alergias" name="alergias" maxlength="30" placeholder="Máximo 30 caracteres">
</div>
</div>

<div class="button-group">
<button type="submit" class="btn-submit">Inscribirse</button>
<button type="reset" class="btn-reset">Limpiar formulario</button>
</div>
</form>
</div>
</body>
</html>