| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Fametro - Centro Universitário</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| |
| .dropdown:hover .dropdown-menu { |
| display: block; |
| } |
| |
| .accessibility-menu { |
| transition: all 0.3s ease; |
| max-height: 0; |
| overflow: hidden; |
| } |
| |
| .accessibility-menu.open { |
| max-height: 500px; |
| } |
| |
| .carousel-item { |
| transition: opacity 1s ease-in-out; |
| opacity: 0; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| } |
| |
| .carousel-item.active { |
| opacity: 1; |
| position: relative; |
| } |
| |
| .modal { |
| transition: all 0.3s ease; |
| opacity: 0; |
| visibility: hidden; |
| } |
| |
| .modal.open { |
| opacity: 1; |
| visibility: visible; |
| } |
| </style> |
| </head> |
| <body class="font-sans text-gray-800"> |
| |
| <div class="bg-blue-900 text-white py-2 px-4 text-sm"> |
| <div class="container mx-auto flex justify-between items-center"> |
| <a href="#content" class="underline">Ir para o conteúdo</a> |
| <button onclick="toggleAccessibilityMenu()" class="flex items-center gap-1"> |
| <i class="fas fa-universal-access"></i> |
| Ferramentas de acessibilidade |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="accessibilityMenu" class="accessibility-menu bg-blue-800 text-white px-4 py-3"> |
| <div class="container mx-auto grid grid-cols-2 md:grid-cols-4 gap-4"> |
| <a href="#" class="flex items-center gap-2 hover:underline"><i class="fas fa-text-height"></i> Aumentar texto</a> |
| <a href="#" class="flex items-center gap-2 hover:underline"><i class="fas fa-text-width"></i> Diminuir texto</a> |
| <a href="#" class="flex items-center gap-2 hover:underline"><i class="fas fa-moon"></i> Escala de cinza</a> |
| <a href="#" class="flex items-center gap-2 hover:underline"><i class="fas fa-adjust"></i> Alto contraste</a> |
| <a href="#" class="flex items-center gap-2 hover:underline"><i class="fas fa-adjust rotate-180"></i> Contraste negativo</a> |
| <a href="#" class="flex items-center gap-2 hover:underline"><i class="fas fa-sun"></i> Fundo claro</a> |
| <a href="#" class="flex items-center gap-2 hover:underline"><i class="fas fa-underline"></i> Links sublinhados</a> |
| <a href="#" class="flex items-center gap-2 hover:underline"><i class="fas fa-font"></i> Fonte legível</a> |
| <a href="#" class="flex items-center gap-2 hover:underline"><i class="fas fa-redo"></i> Redefinir</a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-yellow-500 text-black p-2 text-sm text-center"> |
| Conteúdo acessível em Libras usando o VLibras Widget com opções dos Avatares Ícaro, Hosana ou Guga. |
| <img src="https://vlibras.gov.br/app//assets/access_icon.svg" alt="Ícone VLibras" class="inline-block h-5 ml-2"> |
| </div> |
| |
| |
| <header class="bg-white shadow-md sticky top-0 z-50"> |
| <div class="container mx-auto px-4"> |
| |
| <div class="flex justify-between items-center py-2 border-b"> |
| <div class="flex items-center space-x-4"> |
| <a href="#" class="text-blue-900 font-bold text-sm">SEJA POLO PARCEIRO</a> |
| <div class="dropdown relative"> |
| <button class="text-blue-900 font-bold text-sm flex items-center"> |
| PESQUISA <i class="fas fa-chevron-down ml-1 text-xs"></i> |
| </button> |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded mt-2 py-2 w-64 z-50"> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">Comunidade IC</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">CONCIFA</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">GPEDI</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">Ligas Acadêmicas</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">Ligas Atléticas</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">Produzir & Publicar</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">PROMICT</a> |
| </div> |
| </div> |
| |
| <div class="dropdown relative"> |
| <button class="text-blue-900 font-bold text-sm flex items-center"> |
| EXTENSÃO <i class="fas fa-chevron-down ml-1 text-xs"></i> |
| </button> |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded mt-2 py-2 w-64 z-50"> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">GPEDI</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">ODS</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">PAPEERI</a> |
| </div> |
| </div> |
| |
| <div class="dropdown relative"> |
| <button class="text-blue-900 font-bold text-sm flex items-center"> |
| SERVIÇOS <i class="fas fa-chevron-down ml-1 text-xs"></i> |
| </button> |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded mt-2 py-2 w-64 z-50"> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">Biblioteca</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">Central do Aluno</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">Clínicas Fametro</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">Empremetro</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">Estacionamento</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">Idiomas</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">Intercâmbio</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">Núcleo De Práticas Jurídicas</a> |
| </div> |
| </div> |
| |
| <div class="dropdown relative"> |
| <button class="text-blue-900 font-bold text-sm flex items-center"> |
| PORTAL <i class="fas fa-chevron-down ml-1 text-xs"></i> |
| </button> |
| <div class="dropdown-menu absolute hidden bg-white shadow-lg rounded mt-2 py-2 w-64 z-50"> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">Portal do Egresso</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">Aluno</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">Portal Digital</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">Professor</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">Colaborador</a> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex items-center space-x-4"> |
| <button id="searchToggle" class="text-blue-900"> |
| <i class="fas fa-search"></i> |
| </button> |
| <a href="#" class="bg-blue-900 text-white px-4 py-1 rounded-md text-sm font-bold hover:bg-blue-800 transition"> |
| MATRICULE-SE! |
| </a> |
| </div> |
| </div> |
| |
| |
| <div id="searchBar" class="hidden py-2 border-b"> |
| <div class="relative"> |
| <input type="text" placeholder="Pesquisar..." class="w-full border border-gray-300 rounded-md py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
| </div> |
| </div> |
| |
| |
| <nav class="flex justify-between items-center py-4"> |
| <a href="/" class="flex items-center"> |
| <img src="https://62ad35b797.nxcli.net/wp-content/uploads/2022/02/Logo600.png" alt="Fametro Logo" class="h-12"> |
| </a> |
| |
| <div class="hidden lg:flex items-center space-x-6"> |
| <div class="dropdown relative group"> |
| <a href="#" class="font-bold text-blue-900 group-hover:text-blue-700 flex items-center"> |
| SOBRE <span class="text-blue-600 ml-1">A FAMETRO</span> |
| </a> |
| <div class="dropdown-menu absolute hidden group-hover:block bg-white shadow-lg rounded mt-0 py-2 w-64 z-50"> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">Histórico</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">Missão, Visão e Valores</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">Estrutura</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">Corpo Docente</a> |
| </div> |
| </div> |
| |
| <a href="#" class="font-bold text-blue-900 hover:text-blue-700"> |
| ENSINO <span class="text-blue-600">PRESENCIAL</span> |
| </a> |
| |
| <a href="#" class="font-bold text-blue-900 hover:text-blue-700"> |
| ENSINO <span class="text-blue-600">À DISTÂNCIA E SEMI-PRESENCIAL</span> |
| </a> |
| |
| <a href="#" class="font-bold text-blue-900 hover:text-blue-700"> |
| <span class="text-blue-600">MEDICINA</span> |
| </a> |
| |
| <div class="dropdown relative group"> |
| <a href="#" class="font-bold text-blue-900 group-hover:text-blue-700 flex items-center"> |
| <span class="text-blue-600">PÓS-GRADUAÇÃO</span> |
| </a> |
| <div class="dropdown-menu absolute hidden group-hover:block bg-white shadow-lg rounded mt-0 py-2 w-64 z-50"> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">PÓS-GRADUAÇÃO PRESENCIAL</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">PÓS-GRADUAÇÃO AO VIVO</a> |
| <a href="#" class="block px-4 py-2 hover:bg-blue-50">PÓS-GRADUAÇÃO EAD</a> |
| </div> |
| </div> |
| |
| <a href="#" class="font-bold text-blue-900 hover:text-blue-700"> |
| <span class="text-blue-600">CURSOS LIVRES</span> |
| </a> |
| </div> |
| |
| <button id="mobileMenuToggle" class="lg:hidden text-blue-900 text-2xl"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </nav> |
| </div> |
| </header> |
|
|
| |
| <div id="mobileMenu" class="fixed inset-0 bg-white z-50 overflow-y-auto hidden lg:hidden"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <img src="https://62ad35b797.nxcli.net/wp-content/uploads/2022/02/Logo600.png" alt="Fametro Logo" class="h-10"> |
| <button id="mobileMenuClose" class="text-2xl text-gray-600"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="space-y-2"> |
| <div class="border-b py-2"> |
| <a href="#" class="block font-bold text-lg py-2">SEJA FAMETRO</a> |
| </div> |
| |
| <div class="border-b py-2"> |
| <a href="#" class="block font-bold text-lg py-2">SOBRE A FAMETRO</a> |
| </div> |
| |
| <div class="border-b py-2"> |
| <a href="#" class="block font-bold text-lg py-2">ENSINO PRESENCIAL</a> |
| </div> |
| |
| <div class="border-b py-2"> |
| <a href="#" class="block font-bold text-lg py-2">ENSINO À DISTÂNCIA E SEMI</a> |
| </div> |
| |
| <div class="border-b py-2"> |
| <a href="#" class="block font-bold text-lg py-2">MEDICINA</a> |
| </div> |
| |
| <div class="border-b py-2"> |
| <button class="flex justify-between items-center w-full font-bold text-lg py-2" onclick="toggleSubmenu('posSubmenu')"> |
| PÓS-GRADUAÇÃO E MBA <i class="fas fa-chevron-down"></i> |
| </button> |
| <div id="posSubmenu" class="hidden pl-4 mt-2 space-y-2"> |
| <a href="#" class="block">PÓS-GRADUAÇÃO PRESENCIAL</a> |
| <a href="#" class="block">PÓS-GRADUAÇÃO AO VIVO</a> |
| <a href="#" class="block">PÓS-GRADUAÇÃO EAD</a> |
| </div> |
| </div> |
| |
| <div class="border-b py-2"> |
| <a href="#" class="block font-bold text-lg py-2">CURSOS LIVRES</a> |
| </div> |
| |
| <div class="border-b py-2"> |
| <button class="flex justify-between items-center w-full font-bold text-lg py-2" onclick="toggleSubmenu('portalSubmenu')"> |
| PORTAL <i class="fas fa-chevron-down"></i> |
| </button> |
| <div id="portalSubmenu" class="hidden pl-4 mt-2 space-y-2"> |
| <a href="#" class="block">ALUNO</a> |
| <a href="#" class="block">PORTAL DIGITAL</a> |
| <a href="#" class="block">PROFESSOR</a> |
| <a href="#" class="block">COLABORADOR</a> |
| </div> |
| </div> |
| |
| <div class="border-b py-2"> |
| <button class="flex justify-between items-center w-full font-bold text-lg py-2" onclick="toggleSubmenu('servicosSubmenu')"> |
| SERVIÇOS <i class="fas fa-chevron-down"></i> |
| </button> |
| <div id="servicosSubmenu" class="hidden pl-4 mt-2 space-y-2"> |
| <a href="#" class="block">BIBLIOTECA</a> |
| <a href="#" class="block">CENTRAL DO ALUNO</a> |
| <a href="#" class="block">CLÍNICAS FAMETRO</a> |
| <a href="#" class="block">EMPREMETRO</a> |
| <a href="#" class="block">ESTACIONAMENTO</a> |
| <a href="#" class="block">IDIOMAS</a> |
| <a href="#" class="block">INTERCÂMBIO</a> |
| <a href="#" class="block">NÚCLEO DE PRÁTICAS JURÍDICAS</a> |
| </div> |
| </div> |
| |
| <div class="border-b py-2"> |
| <a href="#" class="block font-bold text-lg py-2">PESQUISA & EXTENSÃO</a> |
| </div> |
| |
| <div class="border-b py-2"> |
| <a href="#" class="block font-bold text-lg py-2">SEJA PARCEIRO</a> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <main id="content"> |
| |
| <div class="relative overflow-hidden"> |
| <div class="carousel-container h-[500px] md:h-[600px] relative"> |
| <div class="carousel-item active"> |
| <div class="absolute inset-0 bg-gradient-to-r from-blue-900/80 to-transparent z-10"></div> |
| <img src="https://fametro.edu.br/wp-content/uploads/2025/04/VESTIBULAR-FAMETRO-25.2-site-mobile.webp" alt="Vestibular Fametro" class="w-full h-full object-cover"> |
| <div class="absolute bottom-0 left-0 p-8 z-20 text-white max-w-lg"> |
| <h2 class="text-3xl md:text-5xl font-bold mb-4">Vestibular 25.2</h2> |
| <p class="text-lg mb-6">Garanta sua vaga para o segundo semestre de 2025!</p> |
| <a href="#" class="bg-yellow-500 hover:bg-yellow-600 text-blue-900 font-bold py-3 px-6 rounded-md inline-block transition duration-300"> |
| Clique aqui |
| </a> |
| </div> |
| </div> |
| |
| <div class="carousel-item"> |
| <div class="absolute inset-0 bg-gradient-to-r from-blue-900/80 to-transparent z-10"></div> |
| <img src="https://fametro.edu.br/wp-content/uploads/2025/01/14.01.2025.1-FAMETRO-Top-Of-Mind-Action-2025-SITE-FAMETRO-MOBILE_.png" alt="Fametro Top of Mind" class="w-full h-full object-cover"> |
| <div class="absolute bottom-0 left-0 p-8 z-20 text-white max-w-lg"> |
| <h2 class="text-3xl md:text-5xl font-bold mb-4">Top of Mind 2025</h2> |
| <p class="text-lg mb-6">Fametro novamente a escolha número um dos manauaras no ensino superior!</p> |
| <a href="#" class="bg-yellow-500 hover:bg-yellow-600 text-blue-900 font-bold py-3 px-6 rounded-md inline-block transition duration-300"> |
| Saiba mais |
| </a> |
| </div> |
| </div> |
| |
| <div class="carousel-item"> |
| <div class="absolute inset-0 bg-gradient-to-r from-blue-900/80 to-transparent z-10"></div> |
| <img src="https://fametro.edu.br/wp-content/uploads/2025/05/FMT-Banner-Vestibular-EAD-mobile.webp" alt="Vestibular EAD" class="w-full h-full object-cover"> |
| <div class="absolute bottom-0 left-0 p-8 z-20 text-white max-w-lg"> |
| <h2 class="text-3xl md:text-5xl font-bold mb-4">Vestibular EAD</h2> |
| <p class="text-lg mb-6">Estude onde e quando quiser com a qualidade Fametro!</p> |
| <a href="#" class="bg-yellow-500 hover:bg-yellow-600 text-blue-900 font-bold py-3 px-6 rounded-md inline-block transition duration-300"> |
| Clique aqui |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| <button id="prevBtn" class="absolute left-4 top-1/2 -translate-y-1/2 bg-black/30 text-white p-3 rounded-full z-20 hover:bg-black/50 transition"> |
| <i class="fas fa-chevron-left"></i> |
| </button> |
| <button id="nextBtn" class="absolute right-4 top-1/2 -translate-y-1/2 bg-black/30 text-white p-3 rounded-full z-20 hover:bg-black/50 transition"> |
| <i class="fas fa-chevron-right"></i> |
| </button> |
| |
| <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2 z-20"> |
| <button class="carousel-indicator w-3 h-3 rounded-full bg-white/50 hover:bg-white transition" data-index="0"></button> |
| <button class="carousel-indicator w-3 h-3 rounded-full bg-white/50 hover:bg-white transition" data-index="1"></button> |
| <button class="carousel-indicator w-3 h-3 rounded-full bg-white/50 hover:bg-white transition" data-index="2"></button> |
| </div> |
| </div> |
| |
| |
| <section class="bg-blue-900 text-white py-12"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">PREPARE-SE PARA DESCOBRIR A FAMETRO</h2> |
| <a href="#" class="bg-yellow-500 hover:bg-yellow-600 text-blue-900 font-bold py-4 px-8 rounded-md inline-block text-lg transition duration-300"> |
| SEJA FAMETRO > |
| </a> |
| </div> |
| </section> |
| |
| |
| <section class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-blue-900">Escolha a Modalidade</h2> |
| |
| <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300"> |
| <div class="bg-blue-800 text-white text-center py-4"> |
| <h3 class="text-xl font-bold">Ensino</h3> |
| <p class="text-yellow-300 font-bold">Presencial</p> |
| </div> |
| <div class="p-6"> |
| <ul class="space-y-3 mb-6"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <a href="#" class="hover:text-blue-700">Vestibular Online</a> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <a href="#" class="hover:text-blue-700">Cursos</a> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <a href="#" class="hover:text-blue-700">Calendário Acadêmico</a> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <a href="#" class="hover:text-blue-700">Resultado</a> |
| </li> |
| </ul> |
| <a href="#" class="block text-center bg-blue-700 hover:bg-blue-800 text-white py-2 px-4 rounded-md transition duration-300"> |
| SAIBA MAIS > |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300"> |
| <div class="bg-blue-800 text-white text-center py-4"> |
| <h3 class="text-xl font-bold">Ensino</h3> |
| <p class="text-yellow-300 font-bold">Semi-Presencial e EAD</p> |
| </div> |
| <div class="p-6"> |
| <ul class="space-y-3 mb-6"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <a href="#" class="hover:text-blue-700">Vestibular Online</a> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <a href="#" class="hover:text-blue-700">Cursos</a> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <a href="#" class="hover:text-blue-700">Calendário Acadêmico</a> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <a href="#" class="hover:text-blue-700">Resultado</a> |
| </li> |
| </ul> |
| <a href="#" class="block text-center bg-blue-700 hover:bg-blue-800 text-white py-2 px-4 rounded-md transition duration-300"> |
| SAIBA MAIS > |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition duration-300"> |
| <div class="bg-blue-800 text-white text-center py-4"> |
| <h3 class="text-xl font-bold">Faculdade de</h3> |
| <p class="text-yellow-300 font-bold">Medicina</p> |
| </div> |
| <div class="p-6"> |
| <ul class="space-y-3 mb-6"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <a href="#" class="hover:text-blue-700">Vestibular de Medicina</a> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <a href="#" class="hover:text-blue-700">Sobre o Curso</a> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <a href="#" class="hover:text-blue-700">Calendário Acadêmico</a> |
| </li> |
| </ul> |
| <a href="#" class="block text-center bg-blue-700 hover:bg-blue-800 text-white py-2 px-4 rounded-md transition duration-300"> |
| SAIBA MAIS > |
| </a> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gradient-to-b from-blue-800 to-blue-900 rounded-lg shadow-md overflow-hidden text-white p-6 flex flex-col justify-center"> |
| <h3 class="text-2xl font-bold mb-4">Seja Fametro</h3> |
| <ul class="space-y-3 mb-6"> |
| <li><a href="#" class="hover:text-yellow-300 block">Vestibular Online</a></li> |
| <li><a href="#" class="hover:text-yellow-300 block">ENEM</a></li> |
| <li><a href="#" class="hover:text-yellow-300 block">Transferência</a></li> |
| <li><a href="#" class="hover:text-yellow-300 block">Portador de Diploma</a></li> |
| <li><a href="#" class="hover:text-yellow-300 block">Pós-Graduação Presencial</a></li> |
| <li><a href="#" class="hover:text-yellow-300 block">Pós-Graduação ao Vivo</a></li> |
| <li><a href="#" class="hover:text-yellow-300 block">Pós-Graduação EaD</a></li> |
| <li><a href="#" class="hover:text-yellow-300 block">Idiomas</a></li> |
| <li><a href="#" class="hover:text-yellow-300 block">Matricule-se</a></li> |
| <li><a href="#" class="hover:text-yellow-300 block">Financiamento – PRAVALER</a></li> |
| <li><a href="#" class="hover:text-yellow-300 block">RESULTADO VESTIBULAR</a></li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-blue-900">Nossos Canais</h2> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="bg-gray-50 p-6 rounded-lg shadow-md"> |
| <div class="flex items-center mb-4"> |
| <i class="fab fa-youtube text-red-600 text-3xl mr-3"></i> |
| <h3 class="text-xl font-bold text-blue-900">Nosso Youtube</h3> |
| </div> |
| <div class="aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg overflow-hidden"> |
| |
| <div class="w-full h-full flex items-center justify-center bg-gray-300 text-gray-500"> |
| <i class="fab fa-youtube text-5xl"></i> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-6 rounded-lg shadow-md"> |
| <div class="flex items-center mb-4"> |
| <i class="fas fa-blog text-blue-500 text-3xl mr-3"></i> |
| <h3 class="text-xl font-bold text-blue-900">Blog Fametro</h3> |
| </div> |
| <div class="aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg overflow-hidden mb-4"> |
| <img src="https://fametro.edu.br/wp-content/uploads/2024/09/PHOTO-2024-09-26-15-31-29-1024x1024.jpg" alt="Blog Fametro" class="w-full h-full object-cover"> |
| </div> |
| <a href="#" class="block text-center bg-blue-700 hover:bg-blue-800 text-white py-2 px-4 rounded-md transition duration-300 mt-4"> |
| VISITAR BLOG > |
| </a> |
| </div> |
| |
| |
| <div class="bg-gray-50 p-6 rounded-lg shadow-md"> |
| <div class="flex items-center mb-4"> |
| <i class="fas fa-hashtag text-blue-400 text-3xl mr-3"></i> |
| <h3 class="text-xl font-bold text-blue-900">Nossas Redes Sociais</h3> |
| </div> |
| <div class="grid grid-cols-2 gap-4"> |
| <a href="#" class="bg-[#3b5998] hover:bg-[#2d4373] text-white py-3 px-4 rounded-md flex items-center justify-center transition duration-300"> |
| <i class="fab fa-facebook-f mr-2"></i> Facebook |
| </a> |
| <a href="#" class="bg-gradient-to-r from-[#405de6] via-[#5851db] to-[#fd1d1d] hover:from-[#4a5dec] hover:via-[#6559e0] hover:to-[#fd2525] text-white py-3 px-4 rounded-md flex items-center justify-center transition duration-300"> |
| <i class="fab fa-instagram mr-2"></i> Instagram |
| </a> |
| <a href="#" class="bg-[#0077b5] hover:bg-[#006097] text-white py-3 px-4 rounded-md flex items-center justify-center transition duration-300"> |
| <i class="fab fa-linkedin-in mr-2"></i> Linkedin |
| </a> |
| <a href="#" class="bg-[#ff0000] hover:bg-[#cc0000] text-white py-3 px-4 rounded-md flex items-center justify-center transition duration-300"> |
| <i class="fab fa-youtube mr-2"></i> Youtube |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="py-12 bg-gray-100"> |
| <div class="container mx-auto px-4"> |
| <div class="grid md:grid-cols-4 gap-8"> |
| <div> |
| <h3 class="font-bold text-lg text-blue-900 mb-4">Blog Fametro</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-700 hover:text-blue-700">Perguntas Frequentes</a></li> |
| <li><a href="#" class="text-gray-700 hover:text-blue-700">CPA</a></li> |
| <li> |
| <button onclick="toggleAccordion('ensinoAccordion')" class="flex justify-between items-center w-full text-gray-700 hover:text-blue-700"> |
| Ensino <i class="fas fa-chevron-down text-xs"></i> |
| </button> |
| <ul id="ensinoAccordion" class="hidden pl-4 mt-2 space-y-2"> |
| <li><a href="#" class="text-gray-700 hover:text-blue-700">Calendário Acadêmico</a></li> |
| <li><a href="#" class="text-gray-700 hover:text-blue-700">Documentos Institucionais</a></li> |
| </ul> |
| </li> |
| <li><a href="#" class="text-gray-700 hover:text-blue-700">Galeria</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="font-bold text-lg text-blue-900 mb-4">Institucional</h3> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-700 hover:text-blue-700">Editais</a></li> |
| <li><a href="#" class="text-gray-700 hover:text-blue-700">Fale Conosco</a></li> |
| <li><a href="#" class="text-gray-700 hover:text-blue-700">Ouvidoria</a></li> |
| <li><a href="#" class="text-gray-700 hover:text-blue-700">Políticas de Privacidade</a></li> |
| <li><a href="#" class="text-gray-700 hover:text-blue-700">Termos e Condições</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h3 class="font-bold text-lg text-blue-900 mb-4">Nossos polos e unidades</h3> |
| <div class="grid grid-cols-1 gap-2"> |
| <a href="#" class="text-sm text-gray-700 hover:text-blue-700">Polo Benjamin Constant - AM</a> |
| <a href="#" class="text-sm text-gray-700 hover:text-blue-700">Polo Itapiranga - AM</a> |
| <a href="#" class="text-sm text-gray-700 hover:text-blue-700">Polo Humaitá - AM</a> |
| <a href="#" class="text-sm text-gray-700 hover:text-blue-700">Polo Anori - AM</a> |
| <a href="#" class="text-sm text-gray-700 hover:text-blue-700">Polo São Paulo de Olivença - AM</a> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="font-bold text-lg text-blue-900 mb-4">Selos de Segurança</h3> |
| <div class="flex flex-wrap gap-4"> |
| <a href="#" class="block"> |
| <img src="https://fametro.edu.br/wp-content/uploads/2022/06/google.svg" alt="Google Safe Browsing" class="h-12"> |
| </a> |
| <a href="#" class="block"> |
| <img src="https://fametro.edu.br/wp-content/uploads/2022/06/mec-ceuni-208x300-1.png" alt="Selo E-MEC" class="h-12"> |
| </a> |
| </div> |
| <div class="mt-4"> |
| <img src="https://fametro.edu.br/wp-content/uploads/2023/02/2023.1-fametro-qr-code-mec-site-mobile.png" alt="QR Code MEC" class="h-24"> |
| <p class="text-xs text-gray-600 mt-2">Verifique nossa validação no MEC</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="bg-blue-900 text-white py-8"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-4 md:mb-0"> |
| <p class="text-sm">© 2025 Centro Universitário Fametro | CNPJ 03.817.341/0001-42 | Todos os direitos reservados</p> |
| </div> |
| |
| <div class="flex space-x-4"> |
| <a href="#" class="hover:text-yellow-300 transition"> |
| <i class="fab fa-facebook-f text-xl"></i> |
| </a> |
| <a href="#" class="hover:text-yellow-300 transition"> |
| <i class="fab fa-instagram text-xl"></i> |
| </a> |
| <a href="#" class="hover:text-yellow-300 transition"> |
| <i class="fab fa-youtube text-xl"></i> |
| </a> |
| <a href="#" class="hover:text-yellow-300 transition"> |
| <i class="fab fa-linkedin-in text-xl"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <a href="#" class="fixed bottom-6 right-6 bg-green-500 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-lg hover:bg-green-600 transition z-40"> |
| <i class="fab fa-whatsapp text-2xl"></i> |
| </a> |
|
|
| <script> |
| |
| function toggleAccessibilityMenu() { |
| const menu = document.getElementById('accessibilityMenu'); |
| menu.classList.toggle('open'); |
| } |
| |
| |
| const mobileMenuToggle = document.getElementById('mobileMenuToggle'); |
| const mobileMenuClose = document.getElementById('mobileMenuClose'); |
| const mobileMenu = document.getElementById('mobileMenu'); |
| |
| mobileMenuToggle.addEventListener('click', () => { |
| mobileMenu.classList.remove('hidden'); |
| document.body.style.overflow = 'hidden'; |
| }); |
| |
| mobileMenuClose.addEventListener('click', () => { |
| mobileMenu.classList.add('hidden'); |
| document.body.style.overflow = ''; |
| }); |
| |
| |
| const searchToggle = document.getElementById('searchToggle'); |
| const searchBar = document.getElementById('searchBar'); |
| |
| searchToggle.addEventListener('click', () => { |
| searchBar.classList.toggle('hidden'); |
| }); |
| |
| |
| function toggleSubmenu(id) { |
| const submenu = document.getElementById(id); |
| submenu.classList.toggle('hidden'); |
| } |
| |
| |
| function toggleAccordion(id) { |
| const accordion = document.getElementById(id); |
| accordion.classList.toggle('hidden'); |
| } |
| |
| |
| let currentSlide = 0; |
| const slides = document.querySelectorAll('.carousel-item'); |
| const indicators = document.querySelectorAll('.carousel-indicator'); |
| |
| function showSlide(index) { |
| slides.forEach((slide, i) => { |
| slide.classList.toggle('active', i === index); |
| }); |
| |
| indicators.forEach((indicator, i) => { |
| indicator.classList.toggle('bg-white', i === index); |
| indicator.classList.toggle('bg-white/50', i !== index); |
| }); |
| |
| currentSlide = index; |
| } |
| |
| document.getElementById('nextBtn').addEventListener('click', () => { |
| currentSlide = (currentSlide + 1) % slides.length; |
| showSlide(currentSlide); |
| }); |
| |
| document.getElementById('prevBtn').addEventListener('click', () => { |
| currentSlide = (currentSlide - 1 + slides.length) % slides.length; |
| showSlide(currentSlide); |
| }); |
| |
| indicators.forEach(indicator => { |
| indicator.addEventListener('click', () => { |
| const index = parseInt(indicator.getAttribute('data-index')); |
| showSlide(index); |
| }); |
| }); |
| |
| |
| let carouselInterval = setInterval(() => { |
| currentSlide = (currentSlide + 1) % slides.length; |
| showSlide(currentSlide); |
| }, 5000); |
| |
| |
| const carouselContainer = document.querySelector('.carousel-container'); |
| carouselContainer.addEventListener('mouseenter', () => { |
| clearInterval(carouselInterval); |
| }); |
| |
| carouselContainer.addEventListener('mouseleave', () => { |
| carouselInterval = setInterval(() => { |
| currentSlide = (currentSlide + 1) % slides.length; |
| showSlide(currentSlide); |
| }, 5000); |
| }); |
| |
| |
| showSlide(0); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=devmiro/fametro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
