Файловый менеджер - Редактировать - /home/adiggxhn/public_html/esccuelas.html
Ðазад
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <meta content="width=device-width, initial-scale=1.0" name="viewport" /> <title>Escuela de Auxiliares de Enfermería - ADIG-SN</title> <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" /> <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> <script id="tailwind-config"> tailwind.config = { darkMode: "class", theme: { extend: { colors: { "primary": "#13ecda", "primary-dark": "#0ebcb0", "background-light": "#f6f8f8", "background-dark": "#102220", "secondary-dark": "#111817", "metallic-gray": "#e2e8f0", "metallic-dark": "#334155", "metallic-light": "#f1f5f9", "hope-green": "#618986", "slate-850": "#1e293b", }, fontFamily: { "display": ["Manrope", "sans-serif"] }, borderRadius: { "DEFAULT": "0.5rem", "lg": "0.75rem", "xl": "1rem", "2xl": "1.5rem", "3xl": "2rem", // Added for 32px request "full": "9999px" }, }, }, } </script> <style> .map-marker { animation: pulse 2s infinite; } @keyframes pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(19, 236, 218, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(19, 236, 218, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(19, 236, 218, 0); } } </style> </head> <body class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 antialiased overflow-x-hidden"> <header class="sticky top-0 z-50 flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#e5e7eb] bg-white/95 backdrop-blur-sm px-6 lg:px-10 py-4 transition-all duration-300"> <div class="flex items-center gap-4"> <a href="index.html" class="flex items-center"> <img src="logo_adig.png" alt="ADIG-SN Logo" class="h-14 w-auto object-contain transition-transform hover:scale-105" /> </a> </div> <div class="hidden lg:flex flex-1 justify-end gap-8"> <nav class="flex items-center gap-9"> <a class="text-[#111817] text-sm font-semibold hover:text-primary transition-colors leading-normal" href="index.html">Inicio</a> <a class="text-[#111817] text-sm font-semibold hover:text-primary transition-colors leading-normal" href="somos.html">Nosotros</a> <a class="text-primary text-sm font-bold leading-normal" href="esccuelas.html">Escuela</a> <a class="text-[#111817] text-sm font-semibold hover:text-primary transition-colors leading-normal" href="donaciones.html">Donaciones</a> <a class="text-[#111817] text-sm font-semibold hover:text-primary transition-colors leading-normal" href="actividades.html">Noticias</a> <a class="text-[#111817] text-sm font-semibold hover:text-primary transition-colors leading-normal" href="contacto.html">Contacto</a> </nav> <button class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-3xl h-11 px-6 bg-primary hover:bg-primary-dark transition-colors text-[#111817] text-sm font-bold leading-normal tracking-[0.015em] shadow-md shadow-primary/20"> <span class="truncate">Inscribirse</span> </button> </div> <div class="lg:hidden"> <span class="material-symbols-outlined text-3xl cursor-pointer">menu</span> </div> </header> <main class="flex flex-col w-full"> <section class="relative w-full py-12 lg:py-24 px-6 lg:px-40 bg-white"> <div class="layout-content-container max-w-[1200px] mx-auto flex flex-col lg:flex-row gap-12 items-center"> <div class="flex flex-col gap-6 lg:w-1/2 z-10"> <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-slate-100 border border-slate-200 w-fit"> <span class="material-symbols-outlined text-primary text-sm">school</span> <span class="text-slate-600 text-xs font-bold uppercase tracking-wider">Inscripciones Abiertas 2024</span> </div> <h1 class="text-4xl lg:text-6xl font-black leading-[1.1] tracking-[-0.033em] text-slate-900"> Escuela de Auxiliares de <span class="text-primary">Enfermería</span> </h1> <p class="text-lg text-slate-600 font-medium max-w-lg"> Tu futuro en salud comienza aquí. Formación integral de calidad con presencia en sedes estratégicas en toda la República de Guatemala. </p> <div class="flex flex-col sm:flex-row gap-4 mt-4"> <a class="flex cursor-pointer items-center justify-center rounded-3xl h-14 px-8 bg-primary hover:bg-primary-dark transition-all text-[#111817] text-base font-bold shadow-lg shadow-primary/30" href="#apply"> Comenzar Ahora </a> <a class="flex cursor-pointer items-center justify-center rounded-3xl h-14 px-8 border-2 border-slate-200 hover:border-primary hover:text-primary text-slate-700 text-base font-bold transition-all bg-transparent" href="#curriculum"> Ver Plan de Estudios </a> </div> <div class="flex items-center gap-4 mt-6 text-sm text-slate-500"> <div class="flex -space-x-3"> <div class="w-10 h-10 rounded-full border-2 border-white bg-slate-200 bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBZwkRfU7dTsC_JQC5ADmUZI_gHIx6tx2-nigrEc8waYtSy33RC6hzDO4BNuRBkISGT4iCsRwl2DjsjNTmb9JRrbWOw7TP8ULUhlnsFXYBZRKECEWQ3n0l4OqDyZxLhl2drAKNbPVVDWVZZ4KU2TQfzHTEFCtTlcjpyxFDiKgPF5sOY8XXwBYIhI33TbuK53bk_Ii_bZuLoEWv2Ohc3XeiyNTN-GNuK0moaalvbd7GEOpLEPkcAlZx5o4jsNFsEh_LPm9G57Bxk9II');"> </div> <div class="w-10 h-10 rounded-full border-2 border-white bg-slate-300 bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuD11SDXc7XpHZHis3ALFjnmy87ngulTpglkUNMCJpPpUa_m0eHCi2-Snd9twkC8-Q1Zaax6qdy0XzmmqJjEoyk-0MiCZY4qxMHv3bU87a5hCvTohN6M99sS33Z2aobpmgRG7vRSO9DUxNsaH-0RBkGsv1tvESrukwdOsOpFniN_MCHRT7NTbHlWjDD1t2whLu3bhXFo8ze4Wvk71JB4I2El3vKlhZdmKA01uBRVnr8DOItMwiYvBeU1Qyrk70i0Qe1OjOjvc_ooF_Q');"> </div> <div class="w-10 h-10 rounded-full border-2 border-white bg-slate-400 bg-cover bg-center" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCyNLgVDja-P6STM3EzIS2RPSwSTGs8gMm3bIDMN67HkTu4FGH81wL1766OH3ZRBcTnUMhGdAiiCUeAbGNzsaeITdBZMS5ira8haf_TpOF7zwOXi4DjEsYoK_2QJGizssFUUyzPZulb_LJ_sKiyAUO4Fr0ylIPUfF0NorBs7NPEFFyRRnV_XKi2lWSSZOVjt5JmN83-zyAPIU_xtCeDcICu7HE3PfZW4qaOqowpyGv092qylGHK63VyxndXVo0zVIBZ4b0--8NsrYs');"> </div> </div> <p class="font-medium">Únete a +500 estudiantes graduados</p> </div> </div> <div class="lg:w-1/2 w-full relative group"> <div class="absolute -inset-2 bg-gradient-to-r from-primary to-slate-300 rounded-3xl blur opacity-20 group-hover:opacity-40 transition duration-1000 group-hover:duration-200"> </div> <div class="relative w-full aspect-[4/3] rounded-3xl overflow-hidden shadow-2xl"> <img alt="Estudiantes de enfermería practicando en un laboratorio clínico moderno" class="w-full h-full object-cover transform transition-transform duration-700 group-hover:scale-105" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB4k4J0FKyRqT9mShdO3m32bdGkSAvYWbOQ63HGvGrk_c66vw5jWLaSgNoHUOfY5zS2LPCkdKYLlBN05F3NoJ9cHY1vFi5Mmrbdi2ljhOGOWabBg7PhR8_j16uEIDnyVexKspCYUJUR7P6vpGbLmHhH_HjrbpvTuqxjTT85OsTkEm07mOzDpq3Y9Qnd260IysqtMWwBnKn46WFLQInHqxer-c8zT5bjP9aVJi2uw0A4ddjvPAJCyS3avKixJQyjBW0IA5GBG1vxH-c" /> <div class="absolute bottom-6 left-6 right-6 bg-white/90 backdrop-blur-md p-5 rounded-2xl shadow-lg border border-white/50"> <div class="flex items-center gap-4"> <div class="bg-primary/20 p-2 rounded-full"> <span class="material-symbols-outlined text-primary-dark text-2xl">verified</span> </div> <div> <p class="font-bold text-base text-[#111817]">Prácticas Supervisadas</p> <p class="text-xs text-slate-500 font-medium">Garantía de aprendizaje real</p> </div> </div> </div> </div> </div> </div> </section> <section class="py-20 px-6 lg:px-40 bg-slate-50" id="curriculum"> <div class="max-w-[1200px] mx-auto"> <div class="text-center mb-16"> <h2 class="text-3xl lg:text-4xl font-black text-[#111817] mb-6 tracking-tight">Plan de Estudios</h2> <p class="text-slate-600 max-w-2xl mx-auto text-lg">Nuestro programa está diseñado para proporcionarte las habilidades teóricas y prácticas más demandadas en el sector salud.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="bg-white rounded-3xl p-8 shadow-sm hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 border border-slate-100 hover:border-primary/30 group relative overflow-hidden"> <div class="absolute top-0 right-0 w-24 h-24 bg-gradient-to-bl from-slate-100 to-transparent rounded-bl-full -mr-4 -mt-4 opacity-50 group-hover:from-primary/10 transition-colors"> </div> <div class="w-14 h-14 rounded-2xl bg-slate-100 group-hover:bg-primary/20 flex items-center justify-center mb-6 text-slate-600 group-hover:text-primary-dark transition-colors"> <span class="material-symbols-outlined text-3xl">menu_book</span> </div> <h3 class="text-xl font-bold text-[#111817] mb-3 group-hover:text-primary-dark transition-colors"> Fundamentos de Enfermería</h3> <p class="text-slate-500 leading-relaxed">Domina las bases esenciales del cuidado del paciente, ética profesional y procedimientos básicos de higiene y confort.</p> </div> <div class="bg-white rounded-3xl p-8 shadow-sm hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 border border-slate-100 hover:border-primary/30 group relative overflow-hidden"> <div class="absolute top-0 right-0 w-24 h-24 bg-gradient-to-bl from-slate-100 to-transparent rounded-bl-full -mr-4 -mt-4 opacity-50 group-hover:from-primary/10 transition-colors"> </div> <div class="w-14 h-14 rounded-2xl bg-slate-100 group-hover:bg-primary/20 flex items-center justify-center mb-6 text-slate-600 group-hover:text-primary-dark transition-colors"> <span class="material-symbols-outlined text-3xl">accessibility_new</span> </div> <h3 class="text-xl font-bold text-[#111817] mb-3 group-hover:text-primary-dark transition-colors"> Anatomía y Fisiología</h3> <p class="text-slate-500 leading-relaxed">Comprende la estructura y funcionamiento del cuerpo humano para identificar patologías y necesidades de salud.</p> </div> <div class="bg-white rounded-3xl p-8 shadow-sm hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 border border-slate-100 hover:border-primary/30 group relative overflow-hidden"> <div class="absolute top-0 right-0 w-24 h-24 bg-gradient-to-bl from-slate-100 to-transparent rounded-bl-full -mr-4 -mt-4 opacity-50 group-hover:from-primary/10 transition-colors"> </div> <div class="w-14 h-14 rounded-2xl bg-slate-100 group-hover:bg-primary/20 flex items-center justify-center mb-6 text-slate-600 group-hover:text-primary-dark transition-colors"> <span class="material-symbols-outlined text-3xl">medication</span> </div> <h3 class="text-xl font-bold text-[#111817] mb-3 group-hover:text-primary-dark transition-colors"> Farmacología</h3> <p class="text-slate-500 leading-relaxed">Aprende sobre la administración segura de medicamentos, dosificación y efectos en el organismo.</p> </div> <div class="bg-white rounded-3xl p-8 shadow-sm hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 border border-slate-100 hover:border-primary/30 group relative overflow-hidden"> <div class="absolute top-0 right-0 w-24 h-24 bg-gradient-to-bl from-slate-100 to-transparent rounded-bl-full -mr-4 -mt-4 opacity-50 group-hover:from-primary/10 transition-colors"> </div> <div class="w-14 h-14 rounded-2xl bg-slate-100 group-hover:bg-primary/20 flex items-center justify-center mb-6 text-slate-600 group-hover:text-primary-dark transition-colors"> <span class="material-symbols-outlined text-3xl">surgical</span> </div> <h3 class="text-xl font-bold text-[#111817] mb-3 group-hover:text-primary-dark transition-colors"> Enfermería Médico-Quirúrgica</h3> <p class="text-slate-500 leading-relaxed">Cuidados pre y post operatorios, asistencia en quirófano y manejo de pacientes críticos.</p> </div> <div class="bg-white rounded-3xl p-8 shadow-sm hover:shadow-xl hover:shadow-primary/10 transition-all duration-300 border border-slate-100 hover:border-primary/30 group relative overflow-hidden"> <div class="absolute top-0 right-0 w-24 h-24 bg-gradient-to-bl from-slate-100 to-transparent rounded-bl-full -mr-4 -mt-4 opacity-50 group-hover:from-primary/10 transition-colors"> </div> <div class="w-14 h-14 rounded-2xl bg-slate-100 group-hover:bg-primary/20 flex items-center justify-center mb-6 text-slate-600 group-hover:text-primary-dark transition-colors"> <span class="material-symbols-outlined text-3xl">child_care</span> </div> <h3 class="text-xl font-bold text-[#111817] mb-3 group-hover:text-primary-dark transition-colors"> Salud Materno-Infantil</h3> <p class="text-slate-500 leading-relaxed">Atención especializada para la madre y el recién nacido, desde el embarazo hasta el puerperio.</p> </div> <div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-3xl p-8 shadow-lg text-white relative overflow-hidden flex flex-col justify-center items-center text-center border border-slate-700"> <div class="absolute top-0 right-0 p-4 opacity-10"> <span class="material-symbols-outlined text-9xl">school</span> </div> <h3 class="text-2xl font-bold mb-3 relative z-10 text-primary">¿Listo para empezar?</h3> <p class="text-slate-300 mb-8 relative z-10">Inscríbete hoy y asegura tu lugar en la próxima cohorte.</p> <a class="relative z-10 inline-flex items-center justify-center px-6 py-3 bg-primary text-[#111817] font-bold rounded-full text-sm hover:bg-white hover:text-primary transition-colors shadow-lg shadow-primary/20" href="#apply"> Solicitar Información </a> </div> </div> </div> </section> <section class="py-16 bg-white border-y border-slate-100"> <div class="max-w-[1000px] mx-auto px-6"> <div class="bg-gradient-to-r from-slate-800 to-slate-900 rounded-3xl p-8 lg:p-14 relative overflow-hidden flex flex-col md:flex-row items-center justify-between gap-10 shadow-2xl"> <div class="absolute inset-0 opacity-20 pointer-events-none" style="background-image: radial-gradient(circle at 10% 50%, #13ecda 0%, transparent 60%);"> </div> <div class="flex flex-col gap-5 relative z-10 md:w-2/3"> <div class="flex items-center gap-3 mb-1"> <span class="material-symbols-outlined text-primary text-2xl">verified_user</span> <span class="text-primary font-bold tracking-wider text-xs uppercase bg-white/10 px-3 py-1 rounded-full backdrop-blur-sm border border-white/10">Certificación Oficial</span> </div> <h3 class="text-white text-3xl lg:text-4xl font-black leading-tight"> Avalado por el <span class="text-transparent bg-clip-text bg-gradient-to-r from-white to-slate-300">MINTRAB</span> </h3> <p class="text-slate-300 text-lg"> Obtén una certificación adicional en <span class="text-primary font-bold">Primeros Auxilios y Atención de Emergencias</span>, aumentando tu competitividad laboral. </p> </div> <div class="relative z-10 md:w-1/3 flex justify-center"> <div class="bg-white/10 backdrop-blur-md p-8 rounded-3xl shadow-xl transform rotate-3 hover:rotate-0 transition-all duration-300 border border-white/20 group"> <div class="flex flex-col items-center justify-center gap-3"> <span class="material-symbols-outlined text-6xl text-white drop-shadow-lg group-hover:scale-110 transition-transform duration-300">policy</span> <span class="text-white font-black text-2xl tracking-tighter drop-shadow-md">MINTRAB</span> <span class="text-[10px] text-primary uppercase text-center leading-tight font-bold tracking-wider">Certificación<br />Garantizada</span> </div> </div> </div> </div> </div> </section> <section class="py-24 px-6 lg:px-40 bg-slate-50 relative overflow-hidden" id="locations"> <div class="max-w-[1200px] mx-auto flex flex-col lg:flex-row gap-16 items-center"> <div class="lg:w-1/2 flex flex-col gap-8"> <h2 class="text-3xl lg:text-4xl font-black text-[#111817]">Sedes en la República de Guatemala</h2> <p class="text-slate-600 text-lg">Acercamos la educación de calidad a tu comunidad. Nuestras instalaciones cuentan con laboratorios equipados y aulas modernas.</p> <ul class="grid grid-cols-1 sm:grid-cols-2 gap-5 mt-2"> <li class="flex items-center gap-4 p-4 bg-white rounded-2xl border border-slate-200 shadow-sm hover:border-primary/50 hover:shadow-md transition-all group"> <span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors">location_on</span> <span class="font-bold text-slate-800">Zona 1, Guatemala</span> </li> <li class="flex items-center gap-4 p-4 bg-white rounded-2xl border border-slate-200 shadow-sm hover:border-primary/50 hover:shadow-md transition-all group"> <span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors">location_on</span> <span class="font-bold text-slate-800">El Fiscal, Palencia</span> </li> <li class="flex items-center gap-4 p-4 bg-white rounded-2xl border border-slate-200 shadow-sm hover:border-primary/50 hover:shadow-md transition-all group"> <span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors">location_on</span> <span class="font-bold text-slate-800">San Juan Sacatepequez</span> </li> <li class="flex items-center gap-4 p-4 bg-white rounded-2xl border border-slate-200 shadow-sm hover:border-primary/50 hover:shadow-md transition-all group"> <span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors">location_on</span> <span class="font-bold text-slate-800">Guastatoya, El Progreso</span> </li> <li class="flex items-center gap-4 p-4 bg-white rounded-2xl border border-slate-200 shadow-sm hover:border-primary/50 hover:shadow-md transition-all group"> <span class="material-symbols-outlined text-slate-400 group-hover:text-primary transition-colors">location_on</span> <span class="font-bold text-slate-800">Senahú, Alta Verapaz</span> </li> </ul> <div class="mt-2 p-5 bg-slate-100 rounded-2xl border border-slate-200 flex gap-4 items-start"> <span class="material-symbols-outlined text-primary-dark mt-0.5">info</span> <p class="text-sm text-slate-600 font-medium">Todas nuestras sedes cumplen con los más altos estándares de bioseguridad y equipamiento médico.</p> </div> </div> <div class="lg:w-1/2 relative h-[450px] w-full flex items-center justify-center"> <div class="relative w-full h-full bg-metallic-light rounded-[2.5rem] overflow-hidden shadow-inner border border-white"> <div class="absolute inset-0 bg-cover bg-center opacity-40 mix-blend-multiply grayscale" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAYluTSndppGrwBmXLArhz85xeEgSxhE6aTYpL5cXyDTjJYITQXl8pqKTkmZvrIp_bUI3yyOLooNI5eAbPu2_eGOeHfaXfusu4mdbzaNDIRjhifTWGDVtPTmfGtl_-_AR2t75ZXsumeqjEWPZOSSNUM66aSzLJA6nnT0skmNLjTCJ6KR2a_Dsr37v_GRP-gNQG3HcfPr25F-XR0JpvyQmSMKoZB2XBRpYnXX8_RAirQ3UWn65StsCPe19lOKY00WIR5clSXlpZEGbU');"> </div> <div class="absolute top-[40%] left-[45%] map-marker w-5 h-5 bg-primary rounded-full border-[3px] border-white shadow-xl cursor-pointer group z-10" title="Zona 1, Guatemala"> <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-3 py-1.5 bg-slate-800 text-white text-xs font-bold rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none shadow-lg"> Zona 1</div> </div> <div class="absolute top-[35%] left-[30%] map-marker w-5 h-5 bg-primary rounded-full border-[3px] border-white shadow-xl cursor-pointer group z-10" title="El Fiscal, Palencia"> <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-3 py-1.5 bg-slate-800 text-white text-xs font-bold rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none shadow-lg"> El Fiscal</div> </div> <div class="absolute top-[60%] left-[40%] map-marker w-5 h-5 bg-primary rounded-full border-[3px] border-white shadow-xl cursor-pointer group z-10" title="San Juan Sacatepequez"> <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-3 py-1.5 bg-slate-800 text-white text-xs font-bold rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none shadow-lg"> San Juan</div> </div> <div class="absolute top-[30%] left-[55%] map-marker w-5 h-5 bg-primary rounded-full border-[3px] border-white shadow-xl cursor-pointer group z-10" title="Guastatoya, El Progreso"> <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-3 py-1.5 bg-slate-800 text-white text-xs font-bold rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none shadow-lg"> Guastatoya</div> </div> <div class="absolute bottom-8 right-8 bg-white/80 backdrop-blur-md px-5 py-3 rounded-2xl shadow-lg border border-white/60 text-sm font-bold text-slate-600 flex items-center gap-2"> <span class="w-2 h-2 rounded-full bg-primary"></span> República de Guatemala </div> </div> </div> </div> </section> <section class="py-24 px-6 lg:px-40 bg-white" id="apply"> <div class="max-w-5xl mx-auto bg-white rounded-[2.5rem] shadow-[0_25px_60px_-15px_rgba(0,0,0,0.1)] border border-slate-100 overflow-hidden flex flex-col md:flex-row"> <div class="md:w-5/12 bg-slate-900 p-12 flex flex-col justify-between text-white relative overflow-hidden"> <div class="absolute top-0 right-0 p-40 bg-primary rounded-full blur-[100px] opacity-15 -mr-20 -mt-20 pointer-events-none"> </div> <div class="absolute bottom-0 left-0 p-32 bg-blue-500 rounded-full blur-[90px] opacity-10 -ml-10 -mb-10 pointer-events-none"> </div> <div class="relative z-10"> <div class="w-12 h-12 bg-white/10 rounded-2xl flex items-center justify-center mb-8 backdrop-blur-sm"> <span class="material-symbols-outlined text-primary text-2xl">edit_document</span> </div> <h3 class="text-3xl font-black mb-4 tracking-tight">Inicia tu Proceso de Admisión</h3> <p class="text-slate-400 text-base mb-10 leading-relaxed">Déjanos tus datos y un asesor académico se pondrá en contacto contigo para guiarte en tu inscripción.</p> <div class="flex flex-col gap-8"> <div class="flex items-start gap-5 group"> <div class="bg-white/5 border border-white/10 p-3 rounded-xl group-hover:bg-primary/20 group-hover:border-primary/30 transition-all"> <span class="material-symbols-outlined text-primary">phone_in_talk</span> </div> <div> <p class="text-xs text-slate-400 font-bold uppercase tracking-wider mb-1">Llámanos </p> <p class="font-bold text-lg">+502 2233-4455</p> </div> </div> <div class="flex items-start gap-5 group"> <div class="bg-white/5 border border-white/10 p-3 rounded-xl group-hover:bg-primary/20 group-hover:border-primary/30 transition-all"> <span class="material-symbols-outlined text-primary">mail</span> </div> <div> <p class="text-xs text-slate-400 font-bold uppercase tracking-wider mb-1">Escríbenos </p> <p class="font-bold text-lg break-all">admisiones@adig-sn.edu.gt</p> </div> </div> </div> </div> <div class="mt-16 relative z-10 pt-8 border-t border-white/10"> <p class="text-xs text-slate-500 font-medium">© 2024 ADIG-SN. Todos los derechos reservados.</p> </div> </div> <div class="md:w-7/12 p-12 bg-white"> <h3 class="text-2xl font-black text-[#111817] mb-8">Solicitud de Cupo</h3> <form class="space-y-6" id="admission-form"> <div class="space-y-2"> <label class="text-sm font-bold text-slate-700 ml-1" for="name">Nombre Completo</label> <input class="w-full h-14 px-5 rounded-2xl bg-slate-50 border border-slate-200 focus:border-primary focus:ring-4 focus:ring-primary/10 outline-none transition-all placeholder:text-slate-400 text-slate-800 font-medium" id="name" placeholder="Ej. Juan Pérez" type="text" name="name" required /> </div> <div class="grid grid-cols-1 sm:grid-cols-2 gap-6"> <div class="space-y-2"> <label class="text-sm font-bold text-slate-700 ml-1" for="email">Correo Electrónico</label> <input class="w-full h-14 px-5 rounded-2xl bg-slate-50 border border-slate-200 focus:border-primary focus:ring-4 focus:ring-primary/10 outline-none transition-all placeholder:text-slate-400 text-slate-800 font-medium" id="email" placeholder="juan@correo.com" type="email" name="email" required /> </div> <div class="space-y-2"> <label class="text-sm font-bold text-slate-700 ml-1" for="phone">Teléfono</label> <input class="w-full h-14 px-5 rounded-2xl bg-slate-50 border border-slate-200 focus:border-primary focus:ring-4 focus:ring-primary/10 outline-none transition-all placeholder:text-slate-400 text-slate-800 font-medium" id="phone" placeholder="+502 0000 0000" type="tel" name="phone" required /> </div> </div> <div class="space-y-2"> <label class="text-sm font-bold text-slate-700 ml-1" for="location">Sede de Preferencia</label> <div class="relative"> <select class="w-full h-14 px-5 rounded-2xl bg-slate-50 border border-slate-200 focus:border-primary focus:ring-4 focus:ring-primary/10 outline-none transition-all text-slate-800 font-medium appearance-none cursor-pointer" id="location" name="location" required> <option disabled="" selected="" value="">Selecciona una sede</option> <option value="zona1">Zona 1, Guatemala</option> <option value="palencia">El Fiscal, Palencia</option> <option value="sanjuan">San Juan Sacatepequez</option> <option value="guastatoya">Guastatoya, El Progreso</option> <option value="senahu">Senahú, Alta Verapaz</option> </select> <div class="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none text-slate-500"> <span class="material-symbols-outlined">expand_more</span> </div> </div> </div> <div class="space-y-2"> <label class="text-sm font-bold text-slate-700 ml-1" for="message">Mensaje (Opcional)</label> <textarea class="w-full p-5 rounded-2xl bg-slate-50 border border-slate-200 focus:border-primary focus:ring-4 focus:ring-primary/10 outline-none transition-all placeholder:text-slate-400 text-slate-800 font-medium resize-none" id="message" placeholder="¿Tienes alguna pregunta específica?" rows="3" name="message"></textarea> </div> <button class="w-full h-14 mt-6 bg-primary hover:bg-primary-dark text-[#111817] text-lg font-bold rounded-2xl shadow-xl shadow-primary/20 hover:shadow-primary/40 transition-all active:scale-[0.98] flex items-center justify-center gap-3" type="submit"> <span>Enviar Solicitud</span> <span class="material-symbols-outlined text-base font-bold">arrow_forward</span> </button> </form> </div> </div> </section> </main> <footer class="bg-slate-900 text-slate-300 py-20 px-6 lg:px-40 border-t border-slate-800 relative overflow-hidden"> <div class="max-w-[1200px] mx-auto grid grid-cols-1 md:grid-cols-4 gap-12 mb-16"> <div class="col-span-1 md:col-span-1 pr-6"> <div class="flex items-center mb-8"> <img src="logo_adig_blanco.png" alt="ADIG-SN Logo" class="h-16 w-auto object-contain" /> </div> <p class="text-slate-500 text-sm leading-relaxed font-medium">Formando profesionales de la salud con ética, excelencia y compromiso social para el desarrollo de Guatemala.</p> </div> <div> <h4 class="font-bold text-[#111817] text-lg mb-6">Accesos Rápidos</h4> <ul class="flex flex-col gap-3 text-sm text-slate-500 font-medium"> <li><a class="hover:text-primary transition-colors flex items-center gap-2" href="index.html"><span class="w-1.5 h-1.5 rounded-full bg-slate-300"></span> Inicio</a></li> <li><a class="hover:text-primary transition-colors flex items-center gap-2" href="somos.html"><span class="w-1.5 h-1.5 rounded-full bg-slate-300"></span> Nosotros</a></li> <li><a class="hover:text-primary transition-colors flex items-center gap-2" href="esccuelas.html"><span class="w-1.5 h-1.5 rounded-full bg-slate-300"></span> Escuela</a></li> <li><a class="hover:text-primary transition-colors flex items-center gap-2" href="programas.html"><span class="w-1.5 h-1.5 rounded-full bg-slate-300"></span> Programas</a></li> <li><a class="hover:text-primary transition-colors flex items-center gap-2" href="actividades.html"><span class="w-1.5 h-1.5 rounded-full bg-slate-300"></span> Noticias</a></li> <li><a class="hover:text-primary transition-colors flex items-center gap-2" href="donaciones.html"><span class="w-1.5 h-1.5 rounded-full bg-slate-300"></span> Donaciones</a></li> </ul> </div> <div> <h4 class="font-bold text-[#111817] text-lg mb-6">Sedes Principales</h4> <ul class="flex flex-col gap-3 text-sm text-slate-500 font-medium"> <li class="flex items-center gap-2"><span class="material-symbols-outlined text-base text-primary">location_on</span> Guatemala (Central)</li> <li class="flex items-center gap-2"><span class="material-symbols-outlined text-base text-slate-300">location_on</span> Quetzaltenango </li> <li class="flex items-center gap-2"><span class="material-symbols-outlined text-base text-slate-300">location_on</span> Escuintla</li> <li class="text-primary font-bold mt-2 hover:underline cursor-pointer">Ver todas las sedes →</li> </ul> </div> <div> <h4 class="font-bold text-[#111817] text-lg mb-6">Síguenos</h4> <div class="flex gap-4"> <a class="w-12 h-12 rounded-2xl bg-slate-50 flex items-center justify-center text-slate-600 hover:bg-primary hover:text-[#111817] transition-all duration-300" href="#"> <span class="font-bold">fb</span> </a> <a class="w-12 h-12 rounded-2xl bg-slate-50 flex items-center justify-center text-slate-600 hover:bg-primary hover:text-[#111817] transition-all duration-300" href="#"> <span class="font-bold">ig</span> </a> <a class="w-12 h-12 rounded-2xl bg-slate-50 flex items-center justify-center text-slate-600 hover:bg-primary hover:text-[#111817] transition-all duration-300" href="#"> <span class="font-bold">in</span> </a> </div> </div> </div> <div class="max-w-[1200px] mx-auto pt-8 border-t border-slate-100 flex flex-col md:flex-row justify-between items-center gap-6"> <p class="text-xs text-slate-400 font-semibold">© 2024 Escuela de Enfermería ADIG-SN. Política de Privacidad.</p> <div class="flex items-center gap-2 text-xs text-slate-400 font-semibold px-4 py-2 bg-slate-50 rounded-full"> <span class="material-symbols-outlined text-base text-green-500">security</span> <span>Sitio Seguro</span> </div> </div> </footer> <script src="files/form-handler.js"></script> </body> </html>
| ver. 1.1 | |
.
| PHP 8.4.20 | Ð“ÐµÐ½ÐµÑ€Ð°Ñ†Ð¸Ñ Ñтраницы: 0 |
proxy
|
phpinfo
|
ÐаÑтройка