Skip to content

feat: create landing page and versioning (page are not visible, its simple versioning) #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
trandreluis merged 1 commit into from
Sep 25, 2025
Merged

feat: create landing page and versioning (page are not visible, its simple versioning) #8

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
131 changes: 131 additions & 0 deletions teste-site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>SEMITI 2025 — Minicurso Ngrok</title>
<meta name="description" content="Landing animada em HTML+CSS para SEMITI 2025 e minicurso de Ngrok (IFPB)." />
<style>
* { box-sizing: border-box; }
html, body { height: 100%; }
:root{
--bg-0:#090d1a; --bg-1:#0e1330; --bg-2:#0a0f25;
--text:#eaf2ff; --muted:#b8c6e3; --glass: rgba(255,255,255,.06);
--accent:#7c3aed; --accent2:#22d3ee; --border:rgba(255,255,255,.1);
}
body{ margin:0; color:var(--text); font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial; background: var(--bg-0); overflow-x:hidden; }

.bg{ position:fixed; inset:0; z-index:-3; background:
radial-gradient(1200px 800px at 20% 10%, rgba(124,58,237,.25), transparent 55%),
radial-gradient(1000px 600px at 80% 90%, rgba(34,211,238,.18), transparent 60%),
linear-gradient(160deg, var(--bg-0) 0%, var(--bg-1) 40%, var(--bg-2) 100%);
}
.bg-anim{ position:fixed; inset:-10%; z-index:-2; opacity:.35; background:conic-gradient(from 0deg, rgba(124,58,237,.25), rgba(34,211,238,.25), rgba(59,130,246,.25), rgba(244,114,182,.25), rgba(124,58,237,.25)); animation:spin 18s linear infinite; mask: radial-gradient(circle at center, black 40%, transparent 70%);}
@keyframes spin { to{ transform: rotate(360deg); } }

.particles{ position:fixed; inset:0; pointer-events:none; z-index:-1; }
.particles span{ position:absolute; width:6px; height:6px; border-radius:50%; background:radial-gradient(circle, #fff, #a5b4fc 70%, transparent 72%); opacity:.8; filter: drop-shadow(0 0 6px #a5b4fc); animation:float 14s linear infinite; }
@keyframes float{ 0%{ transform:translateY(0); opacity:.25;} 50%{ transform:translateY(-20vh) translateX(2vw); opacity:.8;} 100%{ transform:translateY(-40vh) translateX(-1vw); opacity:.25;} }

.wrap{ min-height:100%; display:grid; place-items:center; padding: clamp(24px, 6vmin, 52px); }
.card{ width:min(1100px, 100%); background:linear-gradient(180deg, var(--glass), rgba(255,255,255,.03)); border:1px solid var(--border); border-radius:28px; padding: clamp(20px, 5vmin, 48px); box-shadow: 0 20px 60px rgba(0,0,0,.45), inset 0 0 40px rgba(124,58,237,.05); backdrop-filter: blur(8px); }

h1{ margin: 14px 0 6px; font-size: clamp(28px, 6vw, 56px); line-height:1.06; font-weight:900; background: linear-gradient(92deg, #fff 0%, #c7d2fe 30%, #a5b4fc 60%, #f0abfc 85%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead{ color:#cbd5e1; font-size: clamp(16px, 2.4vw, 20px); margin:0 0 18px; }

.hero{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(18px,4vw,40px); align-items:center; }

.art{ position:relative; min-height:320px; display:grid; place-items:center; isolation:isolate; }
.glow-orb{ position:absolute; width:420px; height:420px; border-radius:50%; background: radial-gradient(circle at 50% 40%, rgba(34,211,238,.25), rgba(124,58,237,.12) 40%, transparent 60%); filter: blur(18px); z-index:-1; animation:pulse 6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.05);} }
.rocket{ width: clamp(160px, 24vw, 240px); filter: drop-shadow(0 18px 30px rgba(34,211,238,.35)); animation: liftoff 3.8s ease-in-out infinite; }
@keyframes liftoff { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} }
.fire{ transform-origin: 50% 0%; animation: flame .18s ease-in-out infinite; }
@keyframes flame { 0%{ transform: scaleY(.9);} 50%{ transform: scaleY(1.1);} 100%{ transform: scaleY(.95);} }
.smoke{ position:absolute; bottom:42px; width:220px; height:220px; display:grid; place-items:end center; filter: blur(.2px); }
.puff{ width:22px; height:22px; border-radius:50%; background: radial-gradient(circle, rgba(255,255,255,.9), rgba(200,210,255,.2)); animation: drift 2.8s ease-in infinite; opacity:.85; }
.puff:nth-child(2){ width:16px; height:16px; animation-delay:.35s; opacity:.7; }
.puff:nth-child(3){ width:26px; height:26px; animation-delay:.7s; opacity:.65; }
@keyframes drift { 0%{ transform: translateY(0) scale(.9);} 60%{ transform: translateY(-40px) translateX(-6px) scale(1.15);} 100%{ transform: translateY(-80px) translateX(6px) scale(1.05); opacity:0; } }

.links{ display:flex; flex-direction:column; gap:12px; margin-top:10px; }
.contact-link{ display:flex; align-items:center; gap:8px; text-decoration:none; font-weight:600; padding:10px 14px; border-radius:10px; color:#e5e7eb; background:rgba(255,255,255,.05); transition: background .2s ease; }
.contact-link:hover{ background:rgba(255,255,255,.12); }
.contact-link svg{ width:20px; height:20px; }

footer{ margin-top:22px; color:#8aa1c4; font-size:.9rem; }
</style>
</head>
<body>
<div class="bg" aria-hidden="true"></div>
<div class="bg-anim" aria-hidden="true"></div>
<div class="particles" aria-hidden="true">
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
</div>

<main class="wrap">
<section class="card">
<h1>Bem-vindo ao SEMITI 2025<br/>e ao minicurso de Ngrok!</h1>
<p class="lead">Levando seu servidor local à internet: a magia do ngrok.</p>

<div class="hero">
<div>
<div class="links">
<a class="contact-link" href="https://github.com/trandreluis" target="_blank" rel="noopener">
<!-- GitHub logo oficial -->
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 .5C5.73.5.5 5.73.5 12c0 5.1 3.29 9.41 7.86 10.95.58.11.79-.25.79-.56v-2.17c-3.2.7-3.87-1.54-3.87-1.54-.53-1.34-1.29-1.7-1.29-1.7-1.05-.72.08-.71.08-.71 1.16.08 1.77 1.19 1.77 1.19 1.04 1.77 2.73 1.26 3.4.96.1-.76.41-1.26.74-1.55-2.55-.29-5.23-1.28-5.23-5.7 0-1.26.45-2.3 1.18-3.11-.12-.29-.51-1.45.11-3.02 0 0 .96-.31 3.15 1.18a10.9 10.9 0 0 1 5.73 0c2.19-1.49 3.15-1.18 3.15-1.18.62 1.57.23 2.73.11 3.02.74.81 1.18 1.85 1.18 3.11 0 4.43-2.68 5.4-5.24 5.68.42.36.8 1.08.8 2.18v3.24c0 .31.21.68.8.56A10.52 10.52 0 0 0 23.5 12c0-6.27-5.23-11.5-11.5-11.5Z"/></svg>
github.com/trandreluis
</a>
<a class="contact-link" href="mailto:tr.andreluis@gmail.com">
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M12 12.713l11.985-9.713H0L12 12.713zM12 14.587L0 4.874v14.253h24V4.874L12 14.587z"/></svg>
tr.andreluis@gmail.com
</a>
<a class="contact-link" href="https://linkedin.com/in/trandreluis" target="_blank" rel="noopener">
<!-- LinkedIn logo oficial -->
<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M19 0H5C2.24 0 0 2.24 0 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5V5c0-2.76-2.24-5-5-5zM7.09 20.45H3.54V9h3.55v11.45zM5.32 7.59c-1.14 0-2.06-.93-2.06-2.07 0-1.15.92-2.07 2.06-2.07 1.14 0 2.07.92 2.07 2.07 0 1.14-.93 2.07-2.07 2.07zM20.46 20.45h-3.54v-5.6c0-1.34-.03-3.06-1.87-3.06-1.87 0-2.15 1.46-2.15 2.96v5.7h-3.55V9h3.41v1.56h.05c.47-.89 1.62-1.82 3.34-1.82 3.57 0 4.23 2.35 4.23 5.4v6.31z"/></svg>
linkedin.com/in/trandreluis
</a>
</div>
</div>

<div class="art">
<div class="glow-orb" aria-hidden="true"></div>
<svg class="rocket" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<defs>
<linearGradient id="ship" x1="0" x2="1">
<stop offset="0%" stop-color="#22d3ee"/>
<stop offset="100%" stop-color="#7c3aed"/>
</linearGradient>
<linearGradient id="fin" x1="0" x2="1">
<stop offset="0%" stop-color="#a78bfa"/>
<stop offset="100%" stop-color="#f0abfc"/>
</linearGradient>
<linearGradient id="flame" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="#fff59d"/>
<stop offset="100%" stop-color="#ff7043"/>
</linearGradient>
</defs>
<path d="M128 16c22 18 44 64 44 94 0 44-28 82-44 82s-44-38-44-82c0-30 22-76 44-94z" fill="url(#ship)"/>
<circle cx="128" cy="88" r="18" fill="#0b1020" stroke="#e0e7ff" stroke-width="6"/>
<path d="M84 150c-14 8-34 18-44 22 6-16 16-36 26-48l18-12c0 14 2 28 0 38z" fill="url(#fin)"/>
<path d="M172 150c14 8 34 18 44 22-6-16-16-36-26-48l-18-12c0 14-2 28 0 38z" fill="url(#fin)"/>
<g class="fire">
<path d="M120 196c0 18 8 28 8 44 0-10 8-18 8-44 0-14-8-22-16 0z" fill="url(#flame)"/>
</g>
</svg>
<div class="smoke" aria-hidden="true">
<div class="puff"></div>
<div class="puff"></div>
<div class="puff"></div>
</div>
</div>
</div>

<footer>
Acesse com <kbd>Tab</kbd> • Respeita <em>prefers-reduced-motion</em>
</footer>
</section>
</main>
</body>
</html>