A Pen by Adriel Santos on CodePen.
Created
October 18, 2025 19:10
-
-
Save adrielcruz9966-a11y/bf44401be64d4ed6d9d02ae63d324ec5 to your computer and use it in GitHub Desktop.
Untitled
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Landing Simples — CodePen</title> | |
| <meta name="description" content="Pequeno site/landing para colocar no CodePen. HTML, CSS e JS prontos." /> | |
| <style> | |
| :root{ | |
| --bg:#0f1724; | |
| --card:#0b1220; | |
| --accent:linear-gradient(90deg,#7c3aed,#06b6d4); | |
| --glass: rgba(255,255,255,0.04); | |
| --muted:#9aa4b2; | |
| } | |
| *{box-sizing:border-box} | |
| html,body{height:100%;margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;color:#e6eef6;background:radial-gradient(circle at 10% 10%, rgba(12,20,34,0.6), transparent 10%), var(--bg);} | |
| .wrap{min-height:100vh;display:grid;grid-template-columns:1fr;align-items:center;justify-items:center;padding:40px} | |
| .card{width:100%;max-width:980px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:16px;padding:28px;box-shadow:0 8px 30px rgba(2,6,23,0.7);backdrop-filter: blur(6px);display:grid;grid-template-columns:1fr 340px;gap:24px} | |
| header{display:flex;gap:12px;align-items:center} | |
| .logo{width:52px;height:52px;border-radius:12px;background:var(--glass);display:grid;place-items:center;font-weight:700;color:#fff;font-size:20px} | |
| h1{margin:0;font-size:26px} | |
| p.lead{margin:8px 0 0;color:var(--muted)} | |
| .features{display:flex;flex-direction:column;gap:12px;margin-top:18px} | |
| .feature{background:rgba(255,255,255,0.02);padding:12px;border-radius:10px;display:flex;gap:12px;align-items:center} | |
| .feature .dot{width:44px;height:44px;border-radius:8px;display:grid;place-items:center;background:var(--accent);font-weight:700} | |
| .cta{display:flex;gap:12px;margin-top:18px} | |
| .btn{padding:10px 16px;border-radius:10px;border:0;cursor:pointer;font-weight:600} | |
| .btn-primary{background-image:var(--accent);color:#061323} | |
| .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)} | |
| .preview{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:18px} | |
| .preview .mock{height:260px;border-radius:10px;background:linear-gradient(180deg,#061220, #071424);display:flex;flex-direction:column} | |
| .mock .top{display:flex;gap:10px;padding:12px;align-items:center} | |
| .dot{width:10px;height:10px;border-radius:20px;background:#ff6b6b} | |
| .mock .content{flex:1;padding:14px;display:flex;flex-direction:column;gap:8px} | |
| .mock h3{margin:0} | |
| .muted{color:var(--muted);font-size:14px} | |
| footer{margin-top:18px;color:var(--muted);font-size:13px} | |
| /* responsive */ | |
| @media (max-width:880px){ | |
| .card{grid-template-columns:1fr;} | |
| .preview .mock{height:200px} | |
| } | |
| /* small animation */ | |
| .float{animation:float 6s ease-in-out infinite} | |
| @keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}} | |
| </style> | |
| </head> | |
| <body> | |
| <main class="wrap"> | |
| <article class="card"> | |
| <div> | |
| <header> | |
| <div class="logo">CP</div> | |
| <div> | |
| <h1>Landing moderna — pronta para o CodePen</h1> | |
| <p class="lead">Site curto, responsivo e divertido — copie para o seu CodePen e personalize.</p> | |
| </div> | |
| </header> | |
| <div class="features"> | |
| <div class="feature"> | |
| <div class="dot">1</div> | |
| <div> | |
| <strong>Design responsivo</strong> | |
| <div class="muted">Funciona bem em celular, tablet e desktop.</div> | |
| </div> | |
| </div> | |
| <div class="feature"> | |
| <div class="dot">2</div> | |
| <div> | |
| <strong>Fácil de editar</strong> | |
| <div class="muted">HTML, CSS e JS juntos — ideal para CodePen.</div> | |
| </div> | |
| </div> | |
| <div class="feature"> | |
| <div class="dot">3</div> | |
| <div> | |
| <strong>Interação simples</strong> | |
| <div class="muted">Inclui animação e botões com efeitos.</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="cta"> | |
| <button class="btn btn-primary" id="actionPrimary">Ver demo</button> | |
| <button class="btn btn-ghost" id="actionCopy">Copiar HTML</button> | |
| </div> | |
| <footer> | |
| Dica: no CodePen cole o conteúdo todo no painel HTML (ou divida CSS/JS se preferir). | |
| </footer> | |
| </div> | |
| <aside class="preview"> | |
| <div class="mock float" id="mock"> | |
| <div class="top"> | |
| <div style="display:flex;gap:6px;align-items:center"> | |
| <span class="dot"></span> | |
| <span class="dot" style="background:#ffd166"></span> | |
| <span class="dot" style="background:#06d6a0"></span> | |
| </div> | |
| <div style="margin-left:auto;font-size:13px;color:var(--muted)">Preview</div> | |
| </div> | |
| <div class="content"> | |
| <h3 id="mockTitle">Título do seu projeto</h3> | |
| <div class="muted" id="mockDesc">Uma descrição curta e chamativa para quem visitar a sua página no CodePen.</div> | |
| <div style="display:flex;gap:8px;margin-top:auto"> | |
| <button class="btn btn-primary" onclick="ctaClicked()">Ação</button> | |
| <button class="btn btn-ghost" onclick="moreInfo()">Mais informações</button> | |
| </div> | |
| </div> | |
| </div> | |
| </aside> | |
| </article> | |
| </main> | |
| <script> | |
| // Funções simples para demo — sinta-se livre para apagar e modificar | |
| function ctaClicked(){ | |
| const t = document.getElementById('mockTitle'); | |
| t.textContent = 'Obrigado!'; | |
| setTimeout(()=> t.textContent = 'Título do seu projeto', 1400); | |
| } | |
| function moreInfo(){ | |
| const d = document.getElementById('mockDesc'); | |
| d.textContent = 'Edite esse texto no HTML ou abra o painel CSS para mudar as cores.'; | |
| } | |
| document.getElementById('actionPrimary').addEventListener('click', ()=>{ | |
| document.getElementById('mock').scrollIntoView({behavior:'smooth', block:'center'}); | |
| ctaClicked(); | |
| }); | |
| document.getElementById('actionCopy').addEventListener('click', ()=>{ | |
| // Copia o HTML inteiro (útil para colar no CodePen) | |
| const html = `<!doctype html>\n<html lang="pt-BR">\n <head>... (copie o arquivo original do CodePen)</head>\n <body>...`; | |
| navigator.clipboard?.writeText(html).then(()=>{ | |
| alert('HTML de exemplo copiado para a área de transferência. Abra o CodePen e cole no painel HTML.'); | |
| }, ()=>{ alert('Não foi possível copiar automaticamente. Selecione e copie manualmente.')}); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
.