neo4j.html

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Love Data Day UFF 2026 — Neo4j</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,sans-serif;background:#f4f8fb;color:#112033;overflow-x:hidden}
.bg{position:fixed;inset:0;background:
radial-gradient(circle at 20% 20%,rgba(0,208,132,.10),transparent 35%),radial-gradient(circle at 80% 75%,rgba(0,140,255,.10),transparent 35%),#f4f8fb;z-index:-3}
.grid{position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:55px 55px;z-index:-2}
.container{width:min(1200px,92%);margin:auto}
.top{padding:22px 0;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.08)}
.logos{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.ic{height:120px;filter:drop-shadow(0 10px 25px rgba(255,255,255,.15))}
.neo{height:70px}
.hero{padding:90px 0;text-align:center}
.badge{display:inline-block;padding:10px 18px;border-radius:999px;background:#00d084;color:#07111f;font-weight:800}
h1{font-size:clamp(2.3rem,6vw,5rem);margin:28px 0;line-height:1.05}
.green{color:#00e995}
.subtitle{max-width:900px;margin:auto;color:#42566d;font-size:1.15rem;line-height:1.9}
.buttons{margin-top:40px;display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.btn{padding:16px 30px;border-radius:16px;text-decoration:none;font-weight:700}
.p{background:#00d084;color:#07111f}
.s{border:1px solid rgba(255,255,255,.2);color:#fff}
section{padding:70px 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.card,.panel{background:rgba(255,255,255,.75);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.08);border-radius:26px}
.card{padding:28px}
.card h3{color:#00e995;margin-bottom:12px}
.card p{line-height:1.8;color:#42566d}
.title{text-align:center;font-size:2rem;margin-bottom:45px}
.panel{padding:50px}
.neoWrap{display:grid;grid-template-columns:300px 1fr;gap:45px;align-items:center}
.neoBig{width:100%;max-width:260px}
.footer{text-align:center;padding:40px;color:#52657d}
.org{margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
@media(max-width:900px){.neoWrap{grid-template-columns:1fr;text-align:center}.ic{height:90px}.neo{height:55px}}
</style>
</head>
<body>
<div class="bg"></div><div class="grid"></div>
<div class="top">
<div class="container logos">
<img class="ic" style="background:white;padding:12px;border-radius:18px" src="https://www.pgc.uff.br/wp-content/uploads/2019/09/Logo-Instituto-de-Computacao-1.png">
<img class="neo" style="background:white;padding:10px 14px;border-radius:18px" src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Neo4j-logo2024color.png">
</div></div>

<header class="hero container">
<div class="badge">LOVE DATA DAY • UFF • 12/06/2026</div>
<h1>Uma Introdução ao <span class="green">Neo4j</span><br>o principal banco NoSQL orientado a grafos do mundo</h1>
<p class="subtitle">Evento presencial no Instituto de Computação da UFF com participação da Neo4j, explorando Graph Databases, modelagem de dados, relacionamentos complexos e aplicações reais.</p>
<div class="buttons">
<a class="btn p" href="https://forms.gle/Fm4RNZMifpAxarab8" target="_blank">Inscreva‑se</a>
<a class="btn s" style="background:#00d084;color:#07111f;border:none" href="#info">Ver informações</a>
</div>
</header>

<section id="info" class="container">
<h2 class="title">Informações do Evento</h2>
<div class="cards">
<div class="card"><h3>📅 Data & Horário</h3><p>12 de junho de 2026<br>14:00 às 17:00</p></div>
<div class="card"><h3>📍 Local</h3><p>Instituto de Computação — UFF<br>Rua Passo da Pátria 156<br>Bloco R — Laboratório 302<br>Niterói — RJ</p></div>
<div class="card"><h3>📝 Inscrições</h3><p>Google Forms.<br>Vagas limitadas conforme a capacidade da sala.</p></div>
<div class="card"><h3>🎯 Tema</h3><p>Introdução prática ao Neo4j e fundamentos dos bancos orientados a grafos.</p></div>
</div>
</section>

<section class="container">
<div class="panel">
<div class="neoWrap">
<div><img class="neoBig" src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Neo4j-logo2024color.png"></div>
<div>
<h2 style="font-size:2rem;margin-bottom:20px">Sobre o Neo4j</h2>
<p style="line-height:1.9;color:#42566d">O Neo4j é reconhecido mundialmente como o principal banco de dados NoSQL orientado a grafos. Sua abordagem baseada em nós, propriedades e relacionamentos permite representar estruturas complexas de maneira natural, eficiente e escalável.</p>

</div>
</div>
</div>
</section>


<section class="container">
<h2 class="title">Organização Local</h2>
<div class="cards">
<div class="card" style="text-align:center">
<img src="https://danielcmo.github.io/arquivos/Daniel.jpeg" style="width:160px;height:160px;border-radius:50%;object-fit:cover;margin-bottom:18px;border:4px solid #00d084">
<h3>Prof. Daniel de Oliveira</h3>
<p>Professor do Instituto de Computação — UFF.</p>
<p><a href="https://www.ic.uff.br/~danielcmo" target="_blank" style="color:#00a96e;font-weight:700;text-decoration:none">Visitar página →</a></p>
</div>

<div class="card" style="text-align:center">
<img src="https://i1.rgstatic.net/ii/profile.image/667082437955597-1536056255719_Q512/Marcos-Bedo.jpg" style="width:160px;height:160px;border-radius:50%;object-fit:cover;margin-bottom:18px;border:4px solid #00d084">
<h3>Prof. Marcos Bedo</h3>
<p>Professor do Instituto de Computação — UFF.</p>
<p><a href="https://www.professores.uff.br/marcosbedo/" target="_blank" style="color:#00a96e;font-weight:700;text-decoration:none">Visitar página →</a></p>
</div>
</div>
</section>

<div class="footer">Love Data Day • Universidade Federal Fluminense • 2026</div>
</body>
</html>