API tools faq
paste
jotazetaec

Untitled

jotazetaec
Oct 13th, 2025
222
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 9.46 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="es">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Taller de Arte Universitario</title>
  6.     <style>
  7.         body {
  8.             font-family: Arial, sans-serif;
  9.             background-color: #f0f8ff;
  10.             margin: 0;
  11.             padding: 20px;
  12.         }
  13.        
  14.         .container {
  15.             max-width: 600px;
  16.             margin: 0 auto;
  17.             background-color: #ffffff;
  18.             padding: 20px;
  19.             border-radius: 10px;
  20.             border: 2px solid #4a90e2;
  21.         }
  22.        
  23.         .header {
  24.             text-align: center;
  25.             margin-bottom: 30px;
  26.             color: #2c3e50;
  27.         }
  28.        
  29.         h1 {
  30.             color: #e74c3c;
  31.             margin-bottom: 10px;
  32.         }
  33.        
  34.         h2 {
  35.             color: #3498db;
  36.             font-size: 18px;
  37.         }
  38.        
  39.         .form-section {
  40.             background-color: #f8f9fa;
  41.             margin-bottom: 10px;
  42.             padding: 20px;
  43.             border-radius: 8px;
  44.         }
  45.        
  46.         .section-title {
  47.             color: #2c3e50;
  48.             margin-bottom: 15px;
  49.             font-size: 16px;
  50.         }
  51.        
  52.         .form-group {
  53.             margin-bottom: 15px;
  54.         }
  55.        
  56.         label {
  57.             display: block;
  58.             margin-bottom: 5px;
  59.             font-weight: bold;
  60.             color: #34495e;
  61.         }
  62.        
  63.         input[type="text"],
  64.         input[type="email"],
  65.         input[type="tel"],
  66.         input[type="number"],
  67.         input[type="date"],
  68.         select,
  69.         textarea {
  70.             width: 100%;
  71.             padding: 8px;
  72.             border: 1px solid #bdc3c7;
  73.             border-radius: 4px;
  74.             font-size: 14px;
  75.         }
  76.        
  77.         .radio-group,
  78.         .checkbox-group {
  79.             margin-top: 10px;
  80.         }
  81.        
  82.         .radio-option,
  83.         .checkbox-option {
  84.             display: inline-block;
  85.             margin-right: 20px;
  86.             margin-bottom: 8px;
  87.         }
  88.        
  89.         .radio-option input,
  90.         .checkbox-option input {
  91.             width: auto;
  92.             margin-right: 5px;
  93.         }
  94.        
  95.         .button-group {
  96.             text-align: center;
  97.             margin-top: 25px;
  98.         }
  99.        
  100.         button {
  101.             padding: 12px 25px;
  102.             margin: 0 10px;
  103.             border: none;
  104.             border-radius: 5px;
  105.             font-size: 16px;
  106.             cursor: pointer;
  107.         }
  108.        
  109.         .btn-submit {
  110.             background-color: #27ae60;
  111.             color: white;
  112.         }
  113.        
  114.         .btn-reset {
  115.             background-color: #e74c3c;
  116.             color: white;
  117.         }
  118.        
  119.  
  120.  
  121.     </style>
  122. </head>
  123. <body>
  124.     <div class="container">
  125.         <div class="header">
  126.             <h1>Taller de Arte Universitario</h1>
  127.             <h2>Inscripción 2024</h2>
  128.         </div>
  129.        
  130.         <form action="#" method="post">
  131.             <div class="form-section">
  132.                 <div class="section-title">Información Personal</div>
  133.                
  134.                 <div class="form-group">
  135.                     <label for="nombre">Nombre completo *</label>
  136.                     <input type="text" id="nombre" name="nombre" required maxlength="50" placeholder="Ingrese su nombre completo">
  137.                 </div>
  138.                
  139.                 <div class="form-group">
  140.                     <label for="email">Correo electrónico *</label>
  141.                     <input type="email" id="email" name="email" required placeholder="[email protected]">
  142.                 </div>
  143.                
  144.                 <div class="form-group">
  145.                     <label for="telefono">Teléfono *</label>
  146.                     <input type="tel" id="telefono" name="telefono" required pattern="[0-9]{10}" placeholder="10 dígitos sin espacios">
  147.                 </div>
  148.                
  149.                 <div class="form-group">
  150.                     <label for="edad">Edad *</label>
  151.                     <input type="number" id="edad" name="edad" required min="18" max="65" placeholder="Entre 18 y 65 años">
  152.                 </div>
  153.             </div>
  154.            
  155.             <div class="form-section">
  156.                 <div class="section-title">Información del Taller</div>
  157.                
  158.                 <div class="form-group">
  159.                     <label>Tipo de taller *</label>
  160.                     <div class="radio-group">
  161.                         <label class="radio-option">
  162.                             <input type="radio" name="taller" value="pintura" required> Pintura
  163.                         </label>
  164.                         <label class="radio-option">
  165.                             <input type="radio" name="taller" value="escultura"> Escultura
  166.                         </label>
  167.                         <label class="radio-option">
  168.                             <input type="radio" name="taller" value="dibujo"> Dibujo
  169.                         </label>
  170.                         <label class="radio-option">
  171.                             <input type="radio" name="taller" value="fotografia"> Fotografía
  172.                         </label>
  173.                     </div>
  174.                 </div>
  175.                
  176.                 <div class="form-group">
  177.                     <label for="nivel">Nivel *</label>
  178.                     <select id="nivel" name="nivel" required>
  179.                         <option value="">Seleccione su nivel</option>
  180.                         <option value="principiante">Principiante</option>
  181.                         <option value="intermedio">Intermedio</option>
  182.                         <option value="avanzado">Avanzado</option>
  183.                     </select>
  184.                 </div>
  185.                
  186.                 <div class="form-group">
  187.                     <label for="horario">Horario preferido *</label>
  188.                     <select id="horario" name="horario" required>
  189.                         <option value="">Seleccione horario</option>
  190.                         <option value="mañana">Mañana (8:00 - 12:00)</option>
  191.                         <option value="tarde">Tarde (14:00 - 18:00)</option>
  192.                         <option value="noche">Noche (18:00 - 22:00)</option>
  193.                     </select>
  194.                 </div>
  195.                
  196.                 <div class="form-group">
  197.                     <label for="fecha">Fecha de inicio *</label>
  198.                     <input type="date" id="fecha" name="fecha" required>
  199.                 </div>
  200.             </div>
  201.            
  202.             <div class="form-section">
  203.                 <div class="section-title">Materiales</div>
  204.                
  205.                 <div class="form-group">
  206.                     <label>Materiales que posee</label>
  207.                     <div class="checkbox-group">
  208.                         <label class="checkbox-option">
  209.                             <input type="checkbox" name="materiales" value="pinceles"> Pinceles
  210.                         </label>
  211.                         <label class="checkbox-option">
  212.                             <input type="checkbox" name="materiales" value="lienzos"> Lienzos
  213.                         </label>
  214.                         <label class="checkbox-option">
  215.                             <input type="checkbox" name="materiales" value="acrilicos"> Acrílicos
  216.                         </label>
  217.                         <label class="checkbox-option">
  218.                             <input type="checkbox" name="materiales" value="oles"> Óleos
  219.                         </label>
  220.                         <label class="checkbox-option">
  221.                             <input type="checkbox" name="materiales" value="carboncillo"> Carboncillo
  222.                         </label>
  223.                         <label class="checkbox-option">
  224.                             <input type="checkbox" name="materiales" value="camara"> Cámara
  225.                         </label>
  226.                     </div>
  227.                 </div>
  228.                
  229.                 <div class="form-group">
  230.                     <label>¿Necesita kit de materiales? *</label>
  231.                     <div class="radio-group">
  232.                         <label class="radio-option">
  233.                             <input type="radio" name="kit" value="si" required> Sí
  234.                         </label>
  235.                         <label class="radio-option">
  236.                             <input type="radio" name="kit" value="no"> No
  237.                         </label>
  238.                     </div>
  239.                 </div>
  240.             </div>
  241.            
  242.             <div class="form-section">
  243.                 <div class="section-title">Información Adicional</div>
  244.                
  245.                 <div class="form-group">
  246.                     <label for="experiencia">Experiencia previa</label>
  247.                     <textarea id="experiencia" name="experiencia" maxlength="100" placeholder="Máximo 100 caracteres"></textarea>
  248.                 </div>
  249.                
  250.                 <div class="form-group">
  251.                     <label for="alergias">Alergias o condiciones especiales</label>
  252.                     <input type="text" id="alergias" name="alergias" maxlength="30" placeholder="Máximo 30 caracteres">
  253.                 </div>
  254.             </div>
  255.            
  256.             <div class="button-group">
  257.                 <button type="submit" class="btn-submit">Inscribirse</button>
  258.                 <button type="reset" class="btn-reset">Limpiar formulario</button>
  259.             </div>
  260.         </form>
  261.     </div>
  262. </body>
  263. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!