Файловый менеджер - Редактировать - /home/adiggxhn/public_html/somos.html
Ðазад
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <meta content="width=device-width, initial-scale=1.0" name="viewport" /> <title>ADIG-SN - Sobre Nosotros y Alianzas</title> <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;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": "#003366", "secondary": "#28a745", "turquoise": "#00CED1", "metallic": "#9ca3af", "metallic-light": "#E5E7EB", "background-light": "#f3f4f6", "background-dark": "#111827", }, fontFamily: { "display": ["Manrope", "sans-serif"] }, borderRadius: { "DEFAULT": "0.5rem", "lg": "1rem", "xl": "1.5rem", "2xl": "2rem", "3xl": "3rem", "full": "9999px" }, boxShadow: { 'soft': '0 10px 40px -10px rgba(0,0,0,0.08)', 'glow': '0 0 20px rgba(0, 206, 209, 0.3)', } }, }, } </script> <style type="text/tailwindcss"> @layer utilities { .text-shadow-sm { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .text-shadow-lg { text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); } } </style> </head> <body class="bg-background-light dark:bg-background-dark text-slate-800 dark:text-slate-100 font-display antialiased selection:bg-turquoise selection:text-white"> <div class="relative flex h-auto min-h-screen w-full flex-col overflow-x-hidden"> <header class="sticky top-0 z-50 flex items-center justify-between whitespace-nowrap border-b border-slate-200/50 bg-white/90 dark:bg-slate-900/90 backdrop-blur-md dark:border-slate-800 px-6 py-4 lg:px-10 shadow-sm 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 items-center"> <nav class="flex items-center gap-8"> <a class="text-slate-600 dark:text-slate-300 text-sm font-semibold hover:text-turquoise transition-colors relative group" href="index.html"> Inicio <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-turquoise transition-all group-hover:w-full"></span> </a> <a class="text-slate-600 dark:text-slate-300 text-sm font-semibold text-turquoise relative group" href="somos.html"> Nosotros <span class="absolute -bottom-1 left-0 w-full h-0.5 bg-turquoise transition-all"></span> </a> <a class="text-slate-600 dark:text-slate-300 text-sm font-semibold hover:text-turquoise transition-colors relative group" href="esccuelas.html"> Escuela <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-turquoise transition-all group-hover:w-full"></span> </a> <a class="text-slate-600 dark:text-slate-300 text-sm font-semibold hover:text-turquoise transition-colors relative group" href="programas.html"> Programas <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-turquoise transition-all group-hover:w-full"></span> </a> <a class="text-slate-600 dark:text-slate-300 text-sm font-semibold hover:text-turquoise transition-colors relative group" href="donaciones.html"> Donaciones <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-turquoise transition-all group-hover:w-full"></span> </a> <a class="text-slate-600 dark:text-slate-300 text-sm font-semibold hover:text-turquoise transition-colors relative group" href="actividades.html"> Noticias <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-turquoise transition-all group-hover:w-full"></span> </a> <a class="text-slate-600 dark:text-slate-300 text-sm font-semibold hover:text-turquoise transition-colors relative group" href="contacto.html"> Contacto <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-turquoise transition-all group-hover:w-full"></span> </a> </nav> <a href="https://adig-v2.vercel.app/login" target="_blank" rel="noopener noreferrer" class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-11 px-8 bg-primary hover:bg-blue-800 transition-all hover:shadow-lg hover:shadow-primary/30 text-white text-sm font-bold tracking-wide transform active:scale-95"> <span class="truncate">Plataforma</span> </a> </div> <button class="lg:hidden text-slate-900 dark:text-white p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800"> <span class="material-symbols-outlined">menu</span> </button> </header> <main class="flex-grow flex flex-col"> <section class="relative flex min-h-[600px] flex-col justify-center overflow-hidden bg-slate-900 py-24 px-4 lg:py-32"> <div class="absolute inset-0 z-0"> <img alt="Diverse group of Guatemalans smiling in a community setting" class="h-full w-full object-cover opacity-40" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC-P1Ohu3onxHKtb2bX80REickds3X4b8XsC6dYcL42Rzcb4HSgIkDnCy6E5sPJjyPjYckiiuk8sqvPOeD7jIPYdyBXgoJWXrvm9hDpoo0PhnP_9Ar-JOpL_IPYJO8vnk3BzKG9HO68uB6klvVoiKz9oaxnNQWTqp9o40C3V1S5VaGK7tFGu4UvSdy8HyOJl5jSrniMgxhPr2O5rPKxLBLOgq3Bj51Y3v_f6lynxU2YDojn13v6x1lceeEPFFn335MeVDQTvhP_GF4" /> <div class="absolute inset-0 bg-gradient-to-r from-primary/90 via-primary/60 to-transparent mix-blend-multiply"> </div> <div class="absolute inset-0 bg-gradient-to-t from-slate-900 via-transparent to-transparent"></div> </div> <div class="relative z-10 mx-auto max-w-7xl w-full px-4 lg:px-8"> <div class="max-w-4xl flex flex-col gap-6"> <div class="animate-fade-in-up"> <span class="inline-flex items-center gap-2 rounded-full bg-white/10 px-4 py-2 text-sm font-bold text-turquoise ring-1 ring-inset ring-turquoise/30 backdrop-blur-md shadow-glow"> <span class="material-symbols-outlined text-lg animate-pulse">history_edu</span> Historia y Filosofía </span> </div> <h1 class="text-white text-5xl lg:text-7xl font-black leading-[1.1] tracking-tight drop-shadow-sm"> Más de 20 Años <span class="text-transparent bg-clip-text bg-gradient-to-r from-turquoise via-white to-metallic-light">Transformando Vidas</span> </h1> <p class="text-slate-100 text-xl lg:text-2xl font-medium leading-relaxed max-w-3xl border-l-4 border-turquoise pl-6 bg-primary/20 backdrop-blur-sm py-4 rounded-r-xl"> Nuestra filosofía se basa en crear oportunidades donde otros no llegan, impulsando el desarrollo humano integral. </p> </div> </div> </section> <section class="py-24 bg-white dark:bg-background-dark px-4 relative"> <div class="mx-auto max-w-7xl px-4 lg:px-8"> <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 -mt-32 relative z-20"> <div class="bg-white dark:bg-slate-800 rounded-[2.5rem] p-10 shadow-xl border border-slate-100 dark:border-slate-700 flex flex-col gap-6 hover:translate-y-[-10px] transition-transform duration-300"> <div class="size-20 rounded-2xl bg-primary/5 flex items-center justify-center text-primary dark:text-turquoise"> <span class="material-symbols-outlined text-5xl">diamond</span> </div> <h3 class="text-3xl font-bold text-slate-900 dark:text-white">Valores</h3> <p class="text-slate-600 dark:text-slate-300 leading-relaxed text-lg"> La integridad, la solidaridad y el respeto son los pilares que sostienen cada una de nuestras acciones, guiando nuestro camino hacia una sociedad más justa. </p> <div class="mt-auto h-2 w-full bg-gradient-to-r from-primary to-blue-400 rounded-full"> </div> </div> <div class="bg-primary dark:bg-slate-700 rounded-[2.5rem] p-10 shadow-xl border border-primary/50 flex flex-col gap-6 hover:translate-y-[-10px] transition-transform duration-300 text-white transform scale-105 lg:scale-110 z-10"> <div class="size-20 rounded-2xl bg-white/10 flex items-center justify-center text-turquoise shadow-glow"> <span class="material-symbols-outlined text-5xl">handshake</span> </div> <h3 class="text-3xl font-bold text-white">Compromiso</h3> <p class="text-blue-100 leading-relaxed text-lg"> Nuestro compromiso es inquebrantable con las comunidades vulnerables. No solo brindamos ayuda, construimos puentes hacia un futuro sostenible y digno. </p> <div class="mt-auto h-2 w-full bg-gradient-to-r from-turquoise to-white rounded-full"></div> </div> <div class="bg-white dark:bg-slate-800 rounded-[2.5rem] p-10 shadow-xl border border-slate-100 dark:border-slate-700 flex flex-col gap-6 hover:translate-y-[-10px] transition-transform duration-300"> <div class="size-20 rounded-2xl bg-secondary/5 flex items-center justify-center text-secondary"> <span class="material-symbols-outlined text-5xl">show_chart</span> </div> <h3 class="text-3xl font-bold text-slate-900 dark:text-white">Impacto</h3> <p class="text-slate-600 dark:text-slate-300 leading-relaxed text-lg"> Medimos nuestro éxito en vidas transformadas. Cada programa educativo y de salud es una semilla que germina en bienestar para toda Guatemala. </p> <div class="mt-auto h-2 w-full bg-gradient-to-r from-secondary to-green-400 rounded-full"> </div> </div> </div> </div> </section> <section class="py-24 bg-background-light dark:bg-slate-900 px-4 overflow-hidden relative"> <div class="absolute top-0 right-0 w-full h-full bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-slate-200/50 via-transparent to-transparent dark:from-slate-800/30"> </div> <div class="mx-auto max-w-7xl px-4 lg:px-8 relative z-10"> <div class="text-center max-w-3xl mx-auto mb-20"> <span class="text-sm font-extrabold tracking-widest text-metallic uppercase mb-2 block">Nuestra Trayectoria</span> <h2 class="text-primary dark:text-white text-4xl lg:text-5xl font-black mb-6">Un Legado de Servicio</h2> <p class="text-slate-600 dark:text-slate-300 text-lg"> Desde nuestros inicios humildes hasta convertirnos en un referente de desarrollo social, esta es nuestra historia. </p> </div> <div class="relative"> <div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-slate-200 dark:bg-slate-700 hidden lg:block rounded-full"> </div> <div class="space-y-12 lg:space-y-24"> <div class="flex flex-col lg:flex-row items-center justify-center gap-8 lg:gap-16"> <div class="w-full lg:w-5/12 order-2 lg:order-1 flex justify-end"> <div class="bg-white dark:bg-slate-800 p-8 rounded-[2rem] shadow-soft border border-slate-200 dark:border-slate-700 relative w-full lg:max-w-md group hover:border-turquoise/50 transition-colors duration-300"> <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-br from-metallic-light/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity rounded-[2rem] pointer-events-none"> </div> <div class="flex items-center gap-4 mb-4"> <span class="text-5xl font-black text-metallic/20 dark:text-slate-600">2003</span> <div class="h-px flex-grow bg-slate-200 dark:bg-slate-600"></div> </div> <h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-3">El Comienzo </h3> <p class="text-slate-600 dark:text-slate-400"> Fundación de ADIG-SN con el propósito de llevar salud básica a comunidades rurales olvidadas, iniciando con jornadas médicas móviles. </p> </div> </div> <div class="w-10 h-10 rounded-full bg-turquoise border-4 border-white dark:border-slate-900 shadow-glow z-10 hidden lg:block order-1 lg:order-2"> </div> <div class="w-full lg:w-5/12 order-1 lg:order-3"> <div class="rounded-[2rem] overflow-hidden h-64 shadow-md bg-slate-200"> <img alt="Early days foundation photo" class="w-full h-full object-cover opacity-80 grayscale hover:grayscale-0 transition-all duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB97v1VDugmkL4GUkciy_xyvMzRHW1bB_1O71UX2011IQZkUkBC_yT4idiZXgTqWFpSO8bI1V1Ov5q8hkGYAZ3NoMyUIneneGRrHBtwxzUH8UIXq9nDqFF857CRd0SZmm_CNfKSvm46G_rhtWd_smw_W87zOcRV-ELzAj72EDklH2n5Z0LV-xKjsSoc_WhWWvJwl6IaE4Su_LFvSLuQOjo8jOHQwlZ3rTMz4QblNOxIFrTiYx6L3CoiJuY4iXszgjIkgzmZ20DZ3bQ" /> </div> </div> </div> <div class="flex flex-col lg:flex-row items-center justify-center gap-8 lg:gap-16"> <div class="w-full lg:w-5/12 order-1 flex justify-end"> <div class="rounded-[2rem] overflow-hidden h-64 shadow-md bg-slate-200"> <img alt="Education program launch" class="w-full h-full object-cover opacity-80 grayscale hover:grayscale-0 transition-all duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDuIZFQXX2Be_HVwGb9BeSVAaj4P2MVgBuVp4Sn7hGHI2Qs2ayyDSBEOTHIzAtA-7jVE0VGuQI-hJbl9Qhs8lHluMr18cB7XvUmGuWCGPgSL_D8V6H7xiSzBITbHuayTS5RceB-cvyLrRay3UKxGGPgk1WRC7szKXomNDSr08u0lOCpuy0-KteUJCQIrsqg71eftOdkXUbKhAFY8oO-H4TEKXk4ByQUfcSY1v_Kc3hJw5LmcAgwZvjYPejCMlswP3m8wBM45_j8KqY" /> </div> </div> <div class="w-10 h-10 rounded-full bg-primary border-4 border-white dark:border-slate-900 shadow-xl z-10 hidden lg:block order-2"> </div> <div class="w-full lg:w-5/12 order-2 lg:order-3 flex justify-start"> <div class="bg-gradient-to-br from-slate-100 to-white dark:from-slate-800 dark:to-slate-900 p-8 rounded-[2rem] shadow-soft border border-slate-200 dark:border-slate-700 relative w-full lg:max-w-md group hover:border-primary/50 transition-colors duration-300"> <div class="flex items-center gap-4 mb-4"> <span class="text-5xl font-black text-metallic/20 dark:text-slate-600">2010</span> <div class="h-px flex-grow bg-slate-200 dark:bg-slate-600"></div> </div> <h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-3">Nace la Educación</h3> <p class="text-slate-600 dark:text-slate-400"> Inauguración de la Escuela de Auxiliares de Enfermería, entendiendo que la educación es la herramienta más poderosa para el cambio sostenible. </p> </div> </div> </div> <div class="flex flex-col lg:flex-row items-center justify-center gap-8 lg:gap-16"> <div class="w-full lg:w-5/12 order-2 lg:order-1 flex justify-end"> <div class="bg-white dark:bg-slate-800 p-8 rounded-[2rem] shadow-soft border border-slate-200 dark:border-slate-700 relative w-full lg:max-w-md group hover:border-secondary/50 transition-colors duration-300"> <div class="flex items-center gap-4 mb-4"> <span class="text-5xl font-black text-metallic/20 dark:text-slate-600">2023</span> <div class="h-px flex-grow bg-slate-200 dark:bg-slate-600"></div> </div> <h3 class="text-2xl font-bold text-slate-900 dark:text-white mb-3">Expansión Integral</h3> <p class="text-slate-600 dark:text-slate-400"> Consolidación de programas para el adulto mayor y niñez vulnerable, alcanzando a más de 5,000 beneficiarios anuales en 8 departamentos. </p> </div> </div> <div class="w-10 h-10 rounded-full bg-secondary border-4 border-white dark:border-slate-900 shadow-glow z-10 hidden lg:block order-1 lg:order-2"> </div> <div class="w-full lg:w-5/12 order-1 lg:order-3"> <div class="rounded-[2rem] overflow-hidden h-64 shadow-md bg-slate-200"> <img alt="Current impact photo" class="w-full h-full object-cover opacity-80 grayscale hover:grayscale-0 transition-all duration-500" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDSab3wLeJaLqYRSr9w6qrLFjYcxJfaN2O0dZJgDQdKazfjs1s_GHqCuUZsSOzeqjJx3kwjfvddhVWbj8vf6I_YBzNY96hm_t-TFTCU8Om6Y8AV1Yii7vBy8esV0EZZG4e9jfGq_Xw1wvu9ouFH1lswMDoVZeV9IelCI0Mo_zccHu0QOQdRLfhAzP5zVyWregR_zF4r5BbvASoMOv1pbwcigTLsglkv_ksRXJRTHh_PsaV7f4Zi6ZadpMwHJgTHqDkBon14hM9EEY4" /> </div> </div> </div> </div> </div> </div> </section> <section class="relative py-24 px-4 overflow-hidden bg-slate-900"> <div class="absolute inset-0 z-0"> <img alt="Corporate alliance meeting" class="h-full w-full object-cover opacity-10 mix-blend-overlay" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDBKDqCVtsZZVBLxMGSt9O1xXJse6w7W64f7hILXqX9X54s_QL8ey6k6l2fuOJL67_r32rW0XJnQOgkhuQeOg8nYPKvgGLMLTxAFamRR4QATLNG-Y6BNI7Ow_srCZUMYMWtQt61HQ8Er6TL8nCPdJkNQfySDyEV9AXmjxhOgAz18PAFcoshd8ZAUF3GwYFd3qXWxfB6fDjr-0ZQEhDJz9sgWonUl-Edv-34X-zK7u76GvHbRYAlItXZO8HLQ0p19P1YZ8lTOUqjMNE" /> <div class="absolute inset-0 bg-gradient-to-b from-slate-900 via-primary/90 to-slate-900"></div> </div> <div class="relative z-10 mx-auto max-w-7xl px-4 lg:px-8"> <div class="bg-white/5 backdrop-blur-xl border border-white/10 rounded-[3rem] p-8 lg:p-16 flex flex-col lg:flex-row gap-12 items-center shadow-2xl overflow-hidden"> <div class="flex-1 space-y-8"> <div> <span class="inline-flex items-center gap-2 text-turquoise font-extrabold tracking-wider text-sm uppercase mb-3"> <span class="h-px w-8 bg-turquoise"></span> Responsabilidad Social Empresarial </span> <h2 class="text-4xl lg:text-5xl font-black text-white mb-6 leading-tight"> Alianza por el <span class="text-turquoise">Bienestar</span> </h2> <p class="text-slate-300 text-lg leading-relaxed"> Invitamos a empresas e instituciones visionarias a unirse a nuestra causa. Su apoyo mediante la donación de recursos clave es fundamental para expandir nuestro alcance y salvar vidas. </p> </div> <div class="space-y-4"> <h4 class="text-white font-bold text-xl mb-4">¿Cómo puede colaborar su empresa?</h4> <ul class="grid grid-cols-1 md:grid-cols-2 gap-4"> <li class="flex items-center gap-3 text-slate-200 bg-white/5 p-3 rounded-xl border border-white/5 hover:bg-white/10 transition-colors"> <span class="material-symbols-outlined text-turquoise">medical_services</span> Donación de equipo médico </li> <li class="flex items-center gap-3 text-slate-200 bg-white/5 p-3 rounded-xl border border-white/5 hover:bg-white/10 transition-colors"> <span class="material-symbols-outlined text-turquoise">inventory_2</span> Insumos de primera necesidad </li> <li class="flex items-center gap-3 text-slate-200 bg-white/5 p-3 rounded-xl border border-white/5 hover:bg-white/10 transition-colors"> <span class="material-symbols-outlined text-turquoise">local_shipping</span> Recursos logísticos </li> <li class="flex items-center gap-3 text-slate-200 bg-white/5 p-3 rounded-xl border border-white/5 hover:bg-white/10 transition-colors"> <span class="material-symbols-outlined text-turquoise">school</span> Becas de estudio </li> </ul> </div> <div class="pt-4"> <button class="w-full sm:w-auto rounded-full h-16 px-10 bg-turquoise hover:bg-cyan-300 text-primary text-lg font-bold shadow-glow hover:shadow-[0_0_40px_rgba(0,206,209,0.5)] transition-all transform hover:-translate-y-1 flex items-center justify-center gap-2 group"> Contáctanos para Alianzas Corporativas <span class="material-symbols-outlined group-hover:translate-x-1 transition-transform">arrow_forward</span> </button> </div> </div> <div class="flex-1 w-full lg:w-auto flex justify-center lg:justify-end"> <div class="relative w-full max-w-md aspect-square"> <div class="absolute inset-0 bg-gradient-to-tr from-primary to-turquoise rounded-[2.5rem] rotate-6 opacity-30 blur-2xl"> </div> <div class="relative h-full w-full bg-slate-800 rounded-[2.5rem] border border-slate-700 overflow-hidden shadow-2xl flex flex-col"> <div class="h-1/2 bg-slate-700 relative"> <img alt="Partnership shake hands" class="w-full h-full object-cover opacity-80 mix-blend-overlay" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDGlRg95Bj98mU4RexjvA0jdF7b5PEl_ZKEJdOPV0_ld4WaBTuthCSL8VkX5EwByi1YmaZ2G_Jz8-ZxeO7BqqzcNFQrisTSOssIvLfXqNQMy-DtK9KpsRRfjHOCTvi5U3k-OAJd62Ara4ZOFa3YBpgISS2tal45SOyopB2tjv9Af3542u1huTCPb1IUiAf--zsL1SrqyZPFoIuvmivlE9xwy2wPMwVlARQmXnTP-HzQhFzCvvQV63ubSzJH_Jtu6AtRkmUvhlCPfBM" /> <div class="absolute inset-0 flex items-center justify-center"> <span class="material-symbols-outlined text-6xl text-white/80">corporate_fare</span> </div> </div> <div class="h-1/2 p-8 flex flex-col justify-center bg-slate-800"> <div class="flex items-center gap-2 mb-4"> <span class="text-turquoise font-bold text-sm tracking-wider uppercase">Beneficios Fiscales</span> </div> <h3 class="text-white text-2xl font-bold mb-2">Deduce Impuestos</h3> <p class="text-slate-400 text-sm"> Todas las donaciones corporativas a ADIG-SN son 100% deducibles de impuestos. Entregamos recibos autorizados por la SAT. </p> </div> </div> </div> </div> </div> </div> </section> </main> <footer class="bg-slate-900 text-slate-300 py-20 px-4 border-t border-slate-800 relative overflow-hidden"> <div class="absolute top-0 right-0 w-96 h-96 bg-primary/20 rounded-full blur-[100px] pointer-events-none -translate-y-1/2 translate-x-1/2"> </div> <div class="mx-auto max-w-7xl px-4 lg:px-8 relative z-10"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 lg:gap-16 mb-16"> <div class="flex flex-col gap-6"> <div class="flex items-center mb-6"> <img src="logo_adig_blanco.png" alt="ADIG-SN Logo" class="h-16 w-auto object-contain" /> </div> <p class="text-sm leading-relaxed text-slate-400 font-medium"> Asociación para el Desarrollo Integral de Guatemala. Formando profesionales, transformando comunidades con innovación y compromiso. </p> <div class="flex gap-4 mt-2"> <a class="size-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:bg-primary hover:text-white transition-all transform hover:-translate-y-1" href="#"><span class="sr-only">Facebook</span> <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"> <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"> </path> </svg> </a> <a class="size-10 rounded-full bg-slate-800 flex items-center justify-center text-slate-400 hover:bg-secondary hover:text-white transition-all transform hover:-translate-y-1" href="#"><span class="sr-only">Instagram</span> <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"> <path clip-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772 4.902 4.902 0 011.772-1.153c.636-.247 1.363-.416 2.427-.465C9.673 2.013 10.03 2 12.48 2h-.165zm0 1.962h.03c2.551 0 2.862.009 3.882.056.904.041 1.399.191 1.728.32.435.168.749.37 1.08.702.333.33.535.644.703 1.08.128.33.279.824.32 1.728.047 1.02.056 1.33.056 3.992v.043c0 2.662-.009 2.972-.056 3.992-.041.904-.191 1.399-.32 1.728a3.037 3.037 0 01-.703 1.08 3.037 3.037 0 01-1.08.703c-.33.128-.824.279-1.728.32-1.02.047-1.33.056-3.992.056h-.043c-2.662 0-2.972-.009-3.992-.056-.904-.041-1.399-.191-1.728-.32a3.037 3.037 0 01-1.08-.703 3.037 3.037 0 01-.703-1.08c-.128-.33-.279-.824-.32-1.728-.047-1.02-.056-1.33-.056-3.992v-.043c0-2.662.009-2.972.056-3.992.041-.904.191-1.399.32-1.728.168-.435.37-.749.702-1.08.33-.333.644-.535 1.08-.703.33-.128.824-.279 1.728-.32 1.02-.047 1.33-.056 3.992-.056zM12.46 7.087a4.912 4.912 0 100 9.825 4.912 4.912 0 000-9.825zm0 1.962a2.95 2.95 0 110 5.9 2.95 2.95 0 010-5.9zM18.667 4.991a1.306 1.306 0 10.001 2.612 1.306 1.306 0 00-.001-2.612z" fill-rule="evenodd"></path> </svg> </a> </div> </div> <div> <h3 class="text-white font-bold text-lg mb-6">Navegación</h3> <ul class="flex flex-col gap-3 text-sm font-medium"> <li><a class="hover:text-turquoise transition-colors flex items-center gap-2 group" href="index.html"><span class="w-1.5 h-1.5 rounded-full bg-slate-600 group-hover:bg-turquoise transition-colors"></span>Inicio</a> </li> <li><a class="hover:text-turquoise transition-colors flex items-center gap-2 group" href="somos.html"><span class="w-1.5 h-1.5 rounded-full bg-slate-600 group-hover:bg-turquoise transition-colors"></span>Sobre Nosotros</a></li> <li><a class="hover:text-turquoise transition-colors flex items-center gap-2 group" href="esccuelas.html"><span class="w-1.5 h-1.5 rounded-full bg-slate-600 group-hover:bg-turquoise transition-colors"></span>Escuela de Enfermería</a></li> <li><a class="hover:text-turquoise transition-colors flex items-center gap-2 group" href="programas.html"><span class="w-1.5 h-1.5 rounded-full bg-slate-600 group-hover:bg-turquoise transition-colors"></span>Programas Sociales</a></li> <li><a class="hover:text-turquoise transition-colors flex items-center gap-2 group" href="actividades.html"><span class="w-1.5 h-1.5 rounded-full bg-slate-600 group-hover:bg-turquoise transition-colors"></span>Noticias</a> </li> <li><a class="hover:text-turquoise transition-colors flex items-center gap-2 group" href="donaciones.html"><span class="w-1.5 h-1.5 rounded-full bg-slate-600 group-hover:bg-turquoise transition-colors"></span>Donaciones</a> </li> </ul> </div> <div> <h3 class="text-white font-bold text-lg mb-6">Contacto</h3> <ul class="flex flex-col gap-4 text-sm"> <li class="flex items-start gap-4"> <span class="material-symbols-outlined text-turquoise text-xl mt-0.5">location_on</span> <span class="text-slate-400">6ta Avenida 12-34, Zona 1<br />Guatemala</span> </li> <li class="flex items-center gap-4"> <span class="material-symbols-outlined text-turquoise text-xl">call</span> <span class="text-slate-400 hover:text-white transition-colors cursor-pointer">+502 2222-3333</span> </li> <li class="flex items-center gap-4"> <span class="material-symbols-outlined text-turquoise text-xl">mail</span> <span class="text-slate-400 hover:text-white transition-colors cursor-pointer">info@adig-sn.org</span> </li> </ul> </div> <div> <h3 class="text-white font-bold text-lg mb-6">Boletín Informativo</h3> <p class="text-sm text-slate-400 mb-4">Suscríbete para recibir noticias sobre nuestros programas y cursos.</p> <form class="flex flex-col gap-3" id="newsletter-form"> <div class="relative"> <input class="rounded-lg h-12 px-4 bg-slate-800 border-none text-white text-sm placeholder:text-slate-500 focus:ring-2 focus:ring-turquoise w-full" placeholder="Tu correo electrónico" type="email" name="email" required /> </div> <button class="rounded-lg h-12 px-4 bg-primary hover:bg-blue-700 text-white font-bold text-sm transition-colors border border-slate-700 shadow-lg shadow-black/20" type="submit">Suscribirse</button> </form> </div> </div> <div class="border-t border-slate-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-slate-500"> <p>© 2024 ADIG-SN. Todos los derechos reservados.</p> <div class="flex gap-8"> <a class="hover:text-turquoise transition-colors" href="#">Política de Privacidad</a> <a class="hover:text-turquoise transition-colors" href="#">Términos de Uso</a> </div> </div> </div> </footer> </div> <script src="files/form-handler.js"></script> </body> </html>
| ver. 1.1 | |
.
| PHP 8.4.20 | Ð“ÐµÐ½ÐµÑ€Ð°Ñ†Ð¸Ñ Ñтраницы: 0 |
proxy
|
phpinfo
|
ÐаÑтройка