<!DOCTYPE html>
<html>
<head>
<title>SABER 2022</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/style.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="assets/js/script.js" defer></script>
</head>
<body>
<header class="pt-12 mb-0 flex flex-col items-center justify-center h-[80vh] bg-black sticky sm:top-[calc(-80vh+60px)] top-[calc(-80vh+110px)] z-10">
<svg class="absolute top-0 left-0 w-full h-full bg-fundo box-shadow-fundo opacity-50">
<rect width="1" height="1" fill="url(#background)" />
<lineargradient id="background">
<stop offset="0%" style="stop-color: rgb(5, 141, 89); stop-opacity: 0.5" />
<stop offset="50%" style="stop-color: rgb(103, 38, 255); stop-opacity: 0.8" />
<stop offset="100%" style="stop-color: rgb(14, 2, 29); stop-opacity: 0.8" />
</lineargradient>
<linearGradient id="vertex" x1="0%" y1="0%" x2="100%" y2="0%">
<stop
offset="0%"
style="stop-color: rgb(103, 38, 255); stop-opacity: 0.8"
/>
<stop
offset="100%"
style="stop-color: rgb(0, 185, 117); stop-opacity: 0.8"
/>
</linearGradient>
<g stroke-width="0.00125"></g>
</svg>
<div class="w-full z-10 flex flex-col items-center justify-center px-5 text-center">
<h1
class="glitch items-center flex mb-4 text-4xl font-bold text-white md:text-5xl"
>
<span>
<img
fill-rule="evenodd"
class="w-28 pr-2 fill-black-500"
src="assets/img/s.svg"
alt="S"
/>
</span>
<span
style="z-index: 5"
class="text-9xl font-light stacker-font text-transparent bg-clip-text bg-gradient-to-r from-purple-500 to-green-200"
>ABER</span
>
</h1>
<p style="z-index: 5" class="mb-8 text-lg text-white md:text-xl">
<span
class="stacker-font text-5xl font-light text-transparent bg-clip-text bg-white"
>
SEMANA ABERTA DE INFORMÁTICA
</span>
</p>
</div>
<nav
class="pt-1 pb-2 z-10 sticky top-0 flex h-[5vh] items-center justify-center bg-fixed bg-center bg-cover text-sm font-medium text-center text-gray-500 dark:text-gray-400 flex-wrap"
>
<a
href="#oquee"
class="z-20 borda-colorida inline-block py-3 px-4 text-white rounded-lg active"
aria-current="page"
>
O que é
</a>
<a
href="#atividades"
class="inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
>Atividades</a
>
<a
href="#maratonas"
class="inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
>Maratonas</a
>
<a
href="#programacao"
class="inline-block py-3 px-4 rounded-lg hover:text-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"
>Programação Preliminar</a
>
</nav>
</header>
<img
style="z-index: -99; position: absolute; left: 0"
src="assets/img/circuit.svg"
></img>
<section class="container px-5 py-5 mt-20 mx-auto text-xl max-w-5xl" id="oquee">
<div class="w-full mb-8 lg:w-1/2">
<h1 class="mb-2 text-2xl font-medium text-gray-900 title-font">
O que é
</h1>
<div class="h-1 w-20 bg-blue-500 rounded"></div>
</div>
<div class="flex flex-wrap w-full mb-20">
<p class="w-full leading-relaxed text-gray-500">
A SABER (Semana Aberta de Informática) é um evento organizado pelos alunos de Ciência da Computação e Informática Biomédica da Universidade Federal do Paraná (UFPR).
</p>
<p class="w-full leading-relaxed text-gray-500">
É um espaço para discussões, debates e para a troca de experiências - incentivar a ciência produzida na universidade! Esse processo enriquece o conhecimento passado em sala de aula e fortalece nossos alunos na busca pela formação.
</p>
<p class="w-full leading-relaxed text-gray-500">
A SABER 2022 mistura várias palestras sobre carreira, debates sobre politica estudantil e democratização da informação, e várias oficinas de programação focadas em várias áreas diferentes da computação. Além disso, nesta edição teremos duas maratonas de programação: A tradicional feita presencialmente e a de Alto Desempenho que será feita online onde o objetivo é utilizar todos os recursos computacionais da forma mais eficiente possível para obter mais velocidade! Nestas competições, as equipes serão de até 3 pessoas.
</p>
</div>
</section>
<section class="container px-5 py-5 mx-auto text-xl max-w-5xl" id="atividades">
<div class="w-full mb-8 lg:w-1/2">
<h1 class="mb-2 text-2xl font-medium text-gray-900 title-font">
Atividades
</h1>
<div class="h-1 w-20 bg-blue-500 rounded"></div>
</div>
<div class="flex flex-wrap -m-4 justify-center">
<div class="p-4 lg:w-1/3">
<div class="h-full bg-gray-100 bg-opacity-75 px-8 pt-16 pb-8 rounded-lg flex flex-col overflow-hidden text-center relative">
<h2 class="tracking-widest text-xs uppercase title-font font-medium text-gray-400 mb-1">Palestra</h2>
<h1 class="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">
Segurança em Redes de Internet das Coisas
</h1>
<div class="flex-1"></div>
<p class="leading-relaxed">Carlos Pedroso</p>
<p class="leading-relaxed text-sm mb-3">Mestrando do NR2</p>
<img class="h-104 object-cover aspect-square object-center" src="assets/img/palestrantes/carlos-pedroso.jpg"></img>
</div>
</div>
<div class="p-4 lg:w-1/3">
<div class="h-full bg-gray-100 bg-opacity-75 px-8 pt-16 pb-8 rounded-lg flex flex-col overflow-hidden text-center relative">
<h2 class="tracking-widest text-xs uppercase title-font font-medium text-gray-400 mb-1">Oficina</h2>
<h1 class="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">
Introdução à Programação de Embarcados com Arduino
</h1>
<div class="flex-1"></div>
<p class="leading-relaxed">Eduardo Todt</p>
<p class="leading-relaxed text-sm mb-3">Professor do DINF</p>
<img class="h-104 object-cover aspect-square object-center" src="assets/img/palestrantes/eduardo-todt.jpg"></img>
</div>
</div>
<div class="p-4 lg:w-1/3">
<div class="h-full bg-gray-100 bg-opacity-75 px-8 pt-16 pb-8 rounded-lg flex flex-col overflow-hidden text-center relative">
<h2 class="tracking-widest text-xs uppercase title-font font-medium text-gray-400 mb-1">Palestra</h2>
<h1 class="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">
Empregando Estruturas de Redes Oportunistas em Ambientes Urbanos Externos para Apoiar Pessoas em Situação Emergencial de Saúde
</h1>
<div class="flex-1"></div>
<p class="leading-relaxed">Agnaldo de Souza Batista</p>
<p class="leading-relaxed text-sm mb-3">Doutorando do NR2</p>
<img class="h-104 object-cover aspect-square object-center" src="assets/img/palestrantes/agnaldo-batista.jpg"></img>
</div>
</div>
<div class="p-4 lg:w-1/3">
<div class="h-full bg-gray-100 bg-opacity-75 px-8 pt-16 pb-8 rounded-lg flex flex-col overflow-hidden text-center relative">
<h2 class="tracking-widest text-xs uppercase title-font font-medium text-gray-400 mb-1">Oficina</h2>
<h1 class="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">
Técnicas de Programação Competitiva
</h1>
<div class="flex-1"></div>
<p class="leading-relaxed">
Fernando Kiotheka
</p>
<p class="leading-relaxed text-sm mb-3">Mestrando do LarSiS</p>
<img class="h-104 object-cover aspect-square object-center" src="assets/img/palestrantes/fernando-kiotheka.jpg"></img>
</div>
</div>
<div class="p-4 lg:w-1/3">
<div class="h-full bg-gray-100 bg-opacity-75 px-8 pt-16 pb-8 rounded-lg flex flex-col overflow-hidden text-center relative">
<h2 class="tracking-widest text-xs uppercase title-font font-medium text-gray-400 mb-1">Palestra</h2>
<h1 class="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">
Meninas++
</h1>
<div class="flex-1"></div>
<p class="leading-relaxed">Rachel Carlos Duque Reis</p>
<p class="leading-relaxed text-sm mb-3">Professora do DINF</p>
<img class="h-104 object-cover aspect-square object-center" src="assets/img/palestrantes/rachel-reis.jpg"></img>
</div>
</div>
<div class="p-4 lg:w-1/3">
<div class="h-full bg-gray-100 bg-opacity-75 px-8 pt-16 pb-8 rounded-lg flex flex-col overflow-hidden text-center relative">
<h2 class="tracking-widest text-xs uppercase title-font font-medium text-gray-400 mb-1">Palestra</h2>
<h1 class="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">Carreiras Além do Desenvolvimento</h1>
<div class="flex-1"></div>
<p class="leading-relaxed">Lara Clink</p>
<p class="leading-relaxed text-sm mb-3">DevOps da Voxy, Graduada</p>
<img class="h-104 object-cover aspect-square object-center" src="assets/img/palestrantes/lara-clink.jpg"></img>
</div>
</div>
<div class="p-4 lg:w-1/3">
<div class="h-full bg-gray-100 bg-opacity-75 px-8 pt-16 pb-8 rounded-lg flex flex-col overflow-hidden text-center relative">
<h2 class="tracking-widest text-xs uppercase title-font font-medium text-gray-400 mb-1">Oficina</h2>
<h1 class="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">
Paralelização usando OpenMP e OpenACC em CPU e GPU
</h1>
<div class="flex-1"></div>
<p class="leading-relaxed">Odair Mario Dutkin Jr</p>
<p class="leading-relaxed text-sm mb-3">Mestrando do LarSiS</p>
<img class="h-104 object-cover aspect-square object-center" src="assets/img/palestrantes/odair-dutkin.jpg"></img>
</div>
</div>
<div class="p-4 lg:w-1/3">
<div class="h-full bg-gray-100 bg-opacity-75 px-8 pt-16 pb-8 rounded-lg flex flex-col overflow-hidden text-center relative">
<h2 class="tracking-widest text-xs uppercase title-font font-medium text-gray-400 mb-1">Oficina</h2>
<h1 class="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">
Introdução à Vue.js
</h1>
<div class="flex-1"></div>
<p class="leading-relaxed">Bryan Fellipe Santos da Costa</p>
<p class="leading-relaxed text-sm mb-3">Graduando</p>
<div class="h-104 object-cover aspect-square object-center"></div>
</div>
</div>
<div class="p-4 lg:w-1/3">
<div class="h-full bg-gray-100 bg-opacity-75 px-8 pt-16 pb-8 rounded-lg flex flex-col overflow-hidden text-center relative">
<h2 class="tracking-widest text-xs uppercase title-font font-medium text-gray-400 mb-1">Oficina</h2>
<h1 class="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">
Oficina de Pixel Art
</h1>
<div class="flex-1"></div>
<p class="leading-relaxed">Victor "Crowno" Moura</p>
<p class="leading-relaxed text-sm mb-3">Diretor de Arte do Terraria/Re-Logic</p>
<img class="h-104 object-cover aspect-square object-center" src="assets/img/palestrantes/victor-moura.jpg"></img>
</div>
</div>
<div class="p-4 lg:w-1/3">
<div class="h-full bg-gray-100 bg-opacity-75 px-8 pt-16 pb-8 rounded-lg flex flex-col overflow-hidden text-center relative">
<h2 class="tracking-widest text-xs uppercase title-font font-medium text-gray-400 mb-1">Palestra</h2>
<h1 class="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">
Carreiras na Computação
</h1>
<div class="flex-1"></div>
<p class="leading-relaxed">Mario Souto <br>"Dev Soutinho"</p>
<p class="leading-relaxed text-sm mb-3">YouTuber</p>
<img class="h-104 object-cover aspect-square object-center" src="assets/img/palestrantes/mario-souto.jpg"></img>
</div>
</div>
<div class="p-4 lg:w-1/3">
<div class="h-full bg-gray-100 bg-opacity-75 px-8 pt-16 pb-8 rounded-lg flex flex-col overflow-hidden text-center relative">
<h2 class="tracking-widest text-xs uppercase title-font font-medium text-gray-400 mb-1">Roda de Conversa</h2>
<h1 class="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">
Conversa sobre a Batalha do Politécnico
</h1>
<div class="flex-1"></div>
<p class="leading-relaxed text-sm mb-3">
No dia 12 de maio de 1968, o Centro Politécnico foi palco de uma combativa manifestação estudantil contra o fim da gratuidade do Ensino Superior público que almejou ser implantado pelo Ministro da Educação do Golpe Militar de 1964 e então reitor da UFPR, Flávio Suplicy de Lacerda.
</p>
<img class="h-104 object-cover aspect-square object-center" src="assets/img/batalha-politecnico.jpg"></img>
</div>
</div>
<div class="p-4 lg:w-1/3">
<div class="h-full bg-gray-100 bg-opacity-75 px-8 pt-16 pb-8 rounded-lg flex flex-col coverflow-hidden text-center relative">
<h2 class="tracking-widest text-xs uppercase title-font font-medium text-gray-400 mb-1">Roda de Conversa</h2>
<h1 class="title-font sm:text-2xl text-xl font-medium text-gray-900 mb-3">
Cine Debate: O Menino da Internet
</h1>
<div class="flex-1"></div>
<p class="leading-relaxed text-sm mb-3">
A história do ativista de internet e pioneiro de programação Aaron Swartz a partir de sua adolescencia, seu envolvimento com o RSS, a fundação do Reddit, e seu crescente interesse na defesa política relacionada a Cultura Livre. O filme ainda explora sua prisão, as táticas da acusação a fundamentar seus supostos crimes.
</p>
<img class="h-104 w-104 object-fill" src="assets/img/internet-own-boy.jpg"></img>
</div>
</div>
</div>
</section>
<section class="container px-5 py-5 mx-auto text-xl max-w-5xl" id="maratonas">
<div class="w-full mb-8 lg:w-1/2">
<h1 class="mb-2 text-2xl font-medium text-gray-900 title-font">
Maratonas
</h1>
<div class="h-1 w-20 bg-blue-500 rounded"></div>
</div>
<div class="flex flex-wrap w-full mb-20">
<p class="w-full leading-relaxed text-gray-500">
Nesta edição, teremos duas maratonas:
</p>
<p class="w-full leading-relaxed text-gray-500">
A primeira é tradicional, estilo ICPC, feita de forma presencial.
Os times de até três pessoas serão formados um pouco antes ou durante
a realização da prova. Nesta prova, o objetivo é codificar
programas para resolver problemas computacionais propostos. Os times
que resolverem mais problemas em 5h, com desempate sendo a penalidade,
ganham a competição.
</p>
<p class="w-full leading-relaxed text-gray-500">
A segunda maratona é de alto desempenho. Inspirada pela maratona
de programação paralela, nesta maratona o seu objetivo é obter
a maior soma de speedups possível. Cada problema computacional proposto
possui um código-fonte que deve ser otimizado e/ou paralelizado. O speedup
é dado pela proporção de tempo de execução do código sequencial sobre o
código otimizado. Os times também são formados de até 3 pessoas porém
esta prova será realizada de maneira online, sendo aceitas submissões
durante as 30h da sua duração.
</p>
</div>
</section>
<section class="container px-5 py-5 mx-auto text-xl max-w-5xl" id="programacao">
<div class="w-full mb-8 lg:w-1/2">
<h1 class="mb-2 text-2xl font-medium text-gray-900 title-font">
Programação Preliminar (sujeito a mudanças)
</h1>
<div class="h-1 w-20 bg-blue-500 rounded"></div>
</div>
<div class="py-5">
<h3 class="text-xl">Quarta-feira (30/11)</h3>
<div class="flex p-2 flex-wrap">
<div class="flex items-center">
<div class="m-1 bg-green-200 w-5 h-5"></div>
<span class="p-1">Palestra</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-blue-200 w-5 h-5"></div>
<span class="p-1">Oficina</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-yellow-200 w-5 h-5"></div>
<span class="p-1">Roda de Conversa</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-pink-200 w-5 h-5"></div>
<span class="p-1">Alimentação</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-purple-200 w-5 h-5"></div>
<span class="p-1">Maratona</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-orange-200 w-5 h-5"></div>
<span class="p-1">Copa</span>
</div>
</div>
<div class="grade w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2">
<div class="bg-white text-center font-bold">Horário</div>
<div class="bg-white text-center font-bold">Hall DINF</div>
<div class="bg-white text-center font-bold">Auditório DINF</div>
<div class="bg-white text-center font-bold">Lab 1-2</div>
<div class="bg-white text-center font-bold">CAAD</div>
<div class="bg-white text-center col-start-1">09h30</div>
<div class="bg-white col-start-3 bg-green-200 text-center flex justify-center items-center row-span-3">
Segurança em Redes IoT
</div>
<div class="bg-white text-center col-start-1">10h00</div>
<div class="bg-white text-center col-start-1">10h30</div>
<div class="bg-white text-center col-start-1">11h00</div>
<div class="bg-white text-center col-start-1">11h30</div>
<div class="bg-white col-span-3 row-span-4 bg-pink-200 text-center flex justify-center items-center">
Almoço
</div>
<div class="bg-white text-center col-start-1">12h00</div>
<div class="bg-white text-center col-start-1">12h30</div>
<div class="bg-white text-center col-start-1">13h00</div>
<div class="bg-white text-center col-start-1">13h30</div>
<div class="col-start-4 flex justify-center items-center text-center bg-blue-200 row-span-4">
Técnicas de Programação Competitiva
</div>
<div class="bg-white text-center col-start-1">14h00</div>
<div class="col-start-3 flex justify-center items-center text-center bg-green-200 row-span-3">
Empregando Estruturas de Redes Oportunistas em Ambientes Urbanos Externos para Apoiar Pessoas em Situação Emergencial de Saúde
</div>
<div class="bg-white text-center col-start-1">14h30</div>
<div class="bg-white text-center col-start-1">15h00</div>
<div class="col-start-2 flex justify-center items-center text-center bg-pink-200 row-span-2">
Coffee Break
</div>
<div class="bg-white text-center col-start-1">15h30</div>
<div class="bg-white text-center col-start-1">16h00</div>
<div class="col-start-3 flex justify-center items-center text-center bg-yellow-200 row-span-2">
Conversa sobre a Batalha do Politécnico
</div>
<div class="bg-white text-center col-start-1">16h30</div>
<div class="bg-white text-center col-start-1">17h00</div>
<div class="col-start-3 flex justify-center items-center text-center bg-yellow-200 row-span-4">
Cine Debate: O Menino da Internet
</div>
<div class="bg-white text-center col-start-1">17h30</div>
<div class="bg-white text-center col-start-1">18h00</div>
<div class="bg-white text-center col-start-1">18h30</div>
</div>
</div>
<div class="py-5">
<h3 class="text-xl">Quinta-feira (01/12)</h3>
<div class="flex p-2 flex-wrap">
<div class="flex items-center">
<div class="m-1 bg-green-200 w-5 h-5"></div>
<span class="p-1">Palestra</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-blue-200 w-5 h-5"></div>
<span class="p-1">Oficina</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-yellow-200 w-5 h-5"></div>
<span class="p-1">Roda de Conversa</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-pink-200 w-5 h-5"></div>
<span class="p-1">Alimentação</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-purple-200 w-5 h-5"></div>
<span class="p-1">Maratona</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-orange-200 w-5 h-5"></div>
<span class="p-1">Copa</span>
</div>
</div>
<div class="grade w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2">
<div class="bg-white text-center font-bold">Horário</div>
<div class="bg-white text-center font-bold">Hall DINF</div>
<div class="bg-white text-center font-bold">Auditório DINF</div>
<div class="bg-white text-center font-bold">Lab 1-2</div>
<div class="bg-white text-center font-bold">CAAD</div>
<div class="bg-white text-center col-start-1">09h30</div>
<div class="bg-white col-start-4 bg-blue-200 text-center flex justify-center items-center row-span-4">
Paralelização usando OpenMP e OpenACC em CPU e GPU
</div>
<div class="bg-white text-center col-start-1">10h00</div>
<div class="bg-white text-center col-start-1">10h30</div>
<div class="bg-white text-center col-start-1">11h00</div>
<div class="bg-white text-center col-start-1">11h30</div>
<div class="bg-white col-span-3 row-span-4 bg-pink-200 text-center flex justify-center items-center">
Almoço
</div>
<div class="bg-white text-center col-start-1">12h00</div>
<div class="bg-white text-center col-start-1">12h30</div>
<div class="bg-white text-center col-start-1">13h00</div>
<div class="bg-white text-center col-start-1">13h30</div>
<div class="col-start-3 flex justify-center items-center text-center bg-green-200 row-span-3">
Meninas++
</div>
<div class="bg-white text-center col-start-1">14h00</div>
<div class="bg-white text-center col-start-1">14h30</div>
<div class="bg-white text-center col-start-1">15h00</div>
<div class="col-start-2 flex justify-center items-center text-center bg-pink-200 row-span-2">
Coffee Break
</div>
<div class="bg-white text-center col-start-1">15h30</div>
<div class="bg-white text-center col-start-1">16h00</div>
<div class="col-start-4 flex justify-center items-center text-center bg-blue-200 row-span-4">
Introdução à Programação de Embarcados com Arduino
</div>
<div class="bg-white text-center col-start-1">16h30</div>
<div class="bg-white text-center col-start-1">17h00</div>
<div class="bg-white text-center col-start-1">17h30</div>
<div class="col-start-3 flex justify-center items-center text-center bg-green-200 row-span-3">
Carreiras Além do Desenvolvimento com Lara Clink
</div>
<div class="bg-white text-center col-start-1">18h00</div>
<div class="bg-white text-center col-start-1">18h30</div>
</div>
</div>
<div class="py-5">
<h3 class="text-xl">Sexta-feira (02/12)</h3>
<div class="flex p-2 flex-wrap">
<div class="flex items-center">
<div class="m-1 bg-green-200 w-5 h-5"></div>
<span class="p-1">Palestra</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-blue-200 w-5 h-5"></div>
<span class="p-1">Oficina</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-yellow-200 w-5 h-5"></div>
<span class="p-1">Roda de Conversa</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-pink-200 w-5 h-5"></div>
<span class="p-1">Alimentação</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-purple-200 w-5 h-5"></div>
<span class="p-1">Maratona</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-orange-200 w-5 h-5"></div>
<span class="p-1">Copa</span>
</div>
</div>
<div class="grade w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2">
<div class="bg-white text-center font-bold">Horário</div>
<div class="bg-white text-center font-bold">Hall DINF</div>
<div class="bg-white text-center font-bold">Auditório DINF</div>
<div class="bg-white text-center font-bold">Lab 1-2</div>
<div class="bg-white text-center font-bold">CAAD</div>
<div class="bg-white text-center col-start-1">09h30</div>
<div class="bg-white col-start-4 bg-blue-200 text-center flex justify-center items-center row-span-4">
Introdução à Vue.js
</div>
<div class="bg-white text-center col-start-1">10h00</div>
<div class="bg-white text-center col-start-1">10h30</div>
<div class="bg-white text-center col-start-1">11h00</div>
<div class="bg-white text-center col-start-1">11h30</div>
<div class="bg-white col-span-3 row-span-4 bg-pink-200 text-center flex justify-center items-center">
Almoço
</div>
<div class="bg-white text-center col-start-1">12h00</div>
<div class="bg-white text-center col-start-1">12h30</div>
<div class="bg-white text-center col-start-1">13h00</div>
<div class="bg-white text-center col-start-1">13h30</div>
<div class="col-start-4 flex justify-center items-center text-center bg-purple-200 row-[span_10]">
Maratona de Programação
</div>
<div class="bg-white text-center col-start-1">14h00</div>
<div class="bg-white text-center col-start-1">14h30</div>
<div class="bg-white text-center col-start-1">15h00</div>
<div class="col-start-2 flex justify-center items-center text-center bg-pink-200 row-span-2">
Coffee Break
</div>
<div class="bg-white text-center col-start-1">15h30</div>
<div class="bg-white text-center col-start-1">16h00</div>
<div class="col-start-5 flex justify-center items-center text-center bg-orange-200 row-span-5">
Brasil x Sérvia
</div>
<div class="bg-white text-center col-start-1">16h30</div>
<div class="bg-white text-center col-start-1">17h00</div>
<div class="bg-white text-center col-start-1">17h30</div>
<div class="bg-white text-center col-start-1">18h00</div>
<div class="bg-white text-center col-start-1">18h30</div>
</div>
</div>
<div class="py-5">
<h3 class="text-xl">Sábado (03/12)</h3>
<div class="flex p-2 flex-wrap">
<div class="flex items-center">
<div class="m-1 bg-green-200 w-5 h-5"></div>
<span class="p-1">Palestra</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-blue-200 w-5 h-5"></div>
<span class="p-1">Oficina</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-yellow-200 w-5 h-5"></div>
<span class="p-1">Roda de Conversa</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-pink-200 w-5 h-5"></div>
<span class="p-1">Alimentação</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-purple-200 w-5 h-5"></div>
<span class="p-1">Maratona</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-orange-200 w-5 h-5"></div>
<span class="p-1">Copa</span>
</div>
</div>
<div class="grade w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2" style="grid-template-columns: 5rem 1fr 1fr">
<div class="bg-white text-center font-bold">Horário</div>
<div class="bg-white text-center font-bold">Maratona</div>
<div class="bg-white text-center font-bold">Sala Virtual</div>
<div class="bg-white text-center col-start-1">00h00</div>
<div class="bg-white text-center col-start-1">09h30</div>
<div class="bg-white text-center col-start-1">10h00</div>
<div class="bg-white text-center col-start-1">10h30</div>
<div class="bg-white text-center col-start-1">11h00</div>
<div class="bg-white text-center col-start-1">11h30</div>
<div class="bg-white text-center col-start-1">12h00</div>
<div class="bg-white text-center col-start-1">12h30</div>
<div class="bg-white text-center col-start-1">13h00</div>
<div class="bg-white text-center col-start-1">13h30</div>
<div class="col-start-2 flex justify-center items-center text-center bg-purple-200 row-[span_12]">
Maratona de Alto Desempenho
</div>
<div class="bg-white text-center col-start-1">14h00</div>
<div class="col-start-3 flex justify-center items-center text-center bg-blue-200 row-span-4">
Oficina de Pixel Art
</div>
<div class="bg-white text-center col-start-1">14h30</div>
<div class="bg-white text-center col-start-1">15h00</div>
<div class="bg-white text-center col-start-1">15h30</div>
<div class="bg-white text-center col-start-1">16h00</div>
<div class="bg-white text-center col-start-1">16h30</div>
<div class="bg-white text-center col-start-1">17h00</div>
<div class="bg-white text-center col-start-1">17h30</div>
<div class="bg-white text-center col-start-1">18h00</div>
<div class="bg-white text-center col-start-1">18h30</div>
<div class="bg-white text-center col-start-1">19h00</div>
</div>
</div>
<div class="py-5">
<h3 class="text-xl">Domingo (04/12)</h3>
<div class="flex p-2 flex-wrap">
<div class="flex items-center">
<div class="m-1 bg-green-200 w-5 h-5"></div>
<span class="p-1">Palestra</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-blue-200 w-5 h-5"></div>
<span class="p-1">Oficina</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-yellow-200 w-5 h-5"></div>
<span class="p-1">Roda de Conversa</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-pink-200 w-5 h-5"></div>
<span class="p-1">Alimentação</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-purple-200 w-5 h-5"></div>
<span class="p-1">Maratona</span>
</div>
<div class="flex items-center">
<div class="m-1 bg-orange-200 w-5 h-5"></div>
<span class="p-1">Copa</span>
</div>
</div>
<div class="grade w-full grid gap-0.5 bg-gray-400 border border-gray-500 border-2" style="grid-template-columns: 5rem 1fr 1fr">
<div class="bg-white text-center font-bold">Horário</div>
<div class="bg-white text-center font-bold">Maratona</div>
<div class="bg-white text-center font-bold">Sala Virtual</div>
<div class="bg-white text-center col-start-1">00h00</div>
<div class="col-start-2 flex justify-center items-center text-center bg-purple-200 row-[span_20]">
Maratona de Alto Desempenho
</div>
<div class="bg-white text-center col-start-1">09h30</div>
<div class="bg-white text-center col-start-1">10h00</div>
<div class="bg-white text-center col-start-1">10h30</div>
<div class="bg-white text-center col-start-1">11h00</div>
<div class="bg-white text-center col-start-1">11h30</div>
<div class="bg-white text-center col-start-1">12h00</div>
<div class="bg-white text-center col-start-1">12h30</div>
<div class="bg-white text-center col-start-1">13h00</div>
<div class="bg-white text-center col-start-1">13h30</div>
<div class="bg-white text-center col-start-1">14h00</div>
<div class="bg-white text-center col-start-1">14h30</div>
<div class="bg-white text-center col-start-1">15h00</div>
<div class="bg-white text-center col-start-1">15h30</div>
<div class="bg-white text-center col-start-1">16h00</div>
<div class="bg-white text-center col-start-1">16h30</div>
<div class="bg-white text-center col-start-1">17h00</div>
<div class="col-start-3 flex justify-center items-center text-center bg-green-200 row-span-2">
Carreiras na Computação com Dev Soutinho
</div>
<div class="bg-white text-center col-start-1">17h30</div>
<div class="bg-white text-center col-start-1">18h00</div>
<div class="bg-white text-center col-start-1">18h30</div>
<div class="bg-white text-center col-start-1">19h00</div>
</div>
</div>
</section>
</body>
</html>