HTML e CSS \u2014 Do Zero a Layouts Responsivos<\/title>\r\n <meta name=\"description\" content=\"Aprenda HTML e CSS do zero. Estruture p\u00e1ginas, crie estilos modernos, domine Flexbox e Grid, e construa uma landing page completa para o portf\u00f3lio.\" \/>\r\n <meta name=\"color-scheme\" content=\"light dark\" \/>\r\n\r\n \r\n <meta property=\"og:title\" content=\"HTML e CSS \u2014 Do Zero a Layouts Responsivos\" \/>\r\n <meta property=\"og:description\" content=\"Ebook pr\u00e1tico: fundamentos de HTML e CSS, responsividade com Flexbox\/Grid e projeto final completo.\" \/>\r\n <meta property=\"og:type\" content=\"product\" \/>\r\n <meta property=\"og:image\" content=\"http:\/\/uniqon.com.br\/wp-content\/uploads\/2025\/08\/capa-html-css.png\" \/>\r\n\r\n \r\n <script type=\"application\/ld+json\">\r\n {\r\n \"@context\":\"https:\/\/schema.org\",\r\n \"@type\":\"Product\",\r\n \"name\":\"HTML e CSS\",\r\n \"image\":[\"http:\/\/uniqon.com.br\/wp-content\/uploads\/2025\/08\/capa-html-css.png\"],\r\n \"description\":\"Ebook pr\u00e1tico para aprender HTML e CSS do zero ao responsivo com Flexbox e Grid. Inclui projeto final.\",\r\n \"brand\":{\"@type\":\"Brand\",\"name\":\"Uniqon\"},\r\n \"offers\":{\r\n \"@type\":\"Offer\",\r\n \"price\":\"49.90\",\r\n \"priceCurrency\":\"BRL\",\r\n \"availability\":\"https:\/\/schema.org\/InStock\",\r\n \"url\":\"https:\/\/uniqon.com.br\/index.php\/html-css\/\"\r\n },\r\n \"aggregateRating\":{\"@type\":\"AggregateRating\",\"ratingValue\":\"4.8\",\"reviewCount\":\"168\"}\r\n }\r\n <\/script>\r\n\r\n <style>\r\n :root{\r\n --bg:#0b1020; --text:#e8ecf1; --muted:#b7c2d0;\r\n --brand:#5aa9ff; --brand2:#7ad7ff; --accent:#00e3a5;\r\n --card:#111735; --line:#243067;\r\n }\r\n *{box-sizing:border-box}\r\n html,body{margin:0}\r\n body{\r\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, \"Helvetica Neue\", Arial, \"Noto Sans\";\r\n background:\r\n radial-gradient(1200px 600px at 10% -10%, #163366 0%, transparent 60%) no-repeat,\r\n radial-gradient(900px 500px at 90% 0%, #1a2a66 0%, transparent 55%) no-repeat,\r\n linear-gradient(180deg, var(--bg) 0%, #0b0f1a 100%);\r\n color: var(--text); line-height:1.6;\r\n }\r\n a{color:inherit}\r\n\r\n .container{max-width:1100px; margin:0 auto; padding: 1rem clamp(1rem,4vw,2rem) 2.5rem;}\r\n\r\n \/* HERO *\/\r\n .hero{ padding: clamp(2rem,5vw,4rem) 0 1rem; text-align:center; }\r\n .badge{display:inline-block; padding:.25rem .6rem; border:1px solid var(--line); border-radius:999px; color:#cdd8ff; font-size:.85rem}\r\n .hero h1{font-size: clamp(2rem,4.5vw,3.25rem); margin:.6rem 0 .3rem}\r\n .hero p.lead{color:var(--muted); max-width:70ch; margin:.25rem auto 1rem}\r\n .hero-cta{display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:1rem}\r\n .btn{\r\n display:inline-block; padding:.9rem 1.1rem; font-weight:800; text-decoration:none; border-radius:12px; border:1px solid transparent;\r\n box-shadow: 0 10px 30px rgba(0,0,0,.25);\r\n }\r\n .btn.primary{background: linear-gradient(135deg, var(--brand), var(--brand2)); color:#08122a}\r\n .btn.ghost{background: transparent; border-color: var(--line); color:#dfe7ff}\r\n .hero img.cover{ width:min(100%,920px); border-radius:16px; margin:1rem auto 0; display:block; border:1px solid var(--line) }\r\n\r\n \/* SE\u00c7\u00d5ES *\/\r\n section{padding: clamp(1.5rem,4vw,2.5rem) 0; border-top:1px solid #162056;}\r\n h2{margin:0 0 .5rem; font-size: clamp(1.4rem,3.5vw,2rem)}\r\n .muted{color:var(--muted)}\r\n .grid{display:grid; gap: clamp(1rem,2vw,1.4rem); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));}\r\n .card{background: linear-gradient(180deg, var(--card), #0f1634); border:1px solid var(--line); border-radius:14px; padding:1rem}\r\n .check{list-style:none; padding:0; margin:.6rem 0 0}\r\n .check li{margin:.4rem 0; padding-left:1.65rem; position:relative}\r\n .check li::before{content:\"\u2713\"; position:absolute; left:.2rem; top:.05rem; font-weight:900; color:var(--accent)}\r\n .warn{background:#19224a; border:1px dashed #2f3a7c; color:#f8f9ff; padding:.65rem .8rem; border-radius:10px}\r\n\r\n \/* PRE\u00c7O *\/\r\n .pricing{ display:grid; grid-template-columns: 1fr; gap:1rem; max-width:880px; margin:0 auto; }\r\n .price-card{border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,#0f1738,#0d1330); padding:1.25rem}\r\n .price{font-size:2.2rem; font-weight:900}\r\n .small{font-size:.92rem; color:#cbd7ff}\r\n\r\n \/* STICKY BAR *\/\r\n .sticky{\r\n position: sticky; bottom:0; z-index:50; background: #0c1333d9; backdrop-filter: blur(6px);\r\n border-top:1px solid var(--line); padding:.7rem .8rem; display:flex; gap:.75rem; justify-content:center; align-items:center;\r\n flex-wrap:wrap;\r\n }\r\n\r\n \/* FAQ *\/\r\n details{border:1px solid var(--line); border-radius:12px; padding:.8rem 1rem; background:#0e1534}\r\n details + details{margin-top:.6rem}\r\n summary{cursor:pointer; font-weight:700}\r\n summary::-webkit-details-marker{display:none}\r\n\r\n footer{padding:2rem 0 3rem; text-align:center; color:var(--muted)}\r\n @media (prefers-reduced-motion: reduce){*{transition:none !important; animation:none !important}}\r\n\r\n \/* === POP-UP PROMOCIONAL (Pack HTML\/CSS + JS + PHP) === *\/\r\n .popup-overlay{\r\n position:fixed; inset:0; background:rgba(0,0,0,.7);\r\n display:flex; justify-content:center; align-items:center;\r\n visibility:hidden; opacity:0; transition:.3s ease;\r\n z-index:9999;\r\n }\r\n .popup-overlay.active{visibility:visible; opacity:1;}\r\n .popup-box{\r\n background:#111735; color:#fff; padding:2rem; border-radius:14px;\r\n max-width:420px; width:92%; text-align:center; position:relative;\r\n border:2px solid var(--brand); box-shadow:0 0 24px rgba(0,0,0,.45);\r\n }\r\n .popup-box h2{margin:.2rem 0 .4rem; font-size:1.6rem}\r\n .popup-box p{margin:.4rem 0}\r\n .popup-box .preco{margin:.8rem 0; font-size:1.15rem}\r\n .popup-box .old{text-decoration:line-through; color:#cbd5e1; margin-right:.4rem}\r\n .popup-box .new{color:var(--accent); font-weight:800; font-size:1.45rem}\r\n .btn-oferta{\r\n display:inline-block; margin-top:.8rem; padding:.8rem 1.1rem;\r\n background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#08122a;\r\n font-weight:800; border-radius:10px; text-decoration:none; transition:.2s;\r\n box-shadow:0 10px 28px rgba(255,209,102,.35);\r\n }\r\n .btn-oferta:hover{transform:translateY(-2px)}\r\n .popup-close{\r\n position:absolute; top:.45rem; right:.6rem; background:none; border:none;\r\n color:#fff; font-size:1.6rem; cursor:pointer; line-height:1;\r\n }\r\n .popup-mini{ color:#a8b3d1; font-size:.85rem; margin-top:.5rem }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <header class=\"hero container\">\r\n <span class=\"badge\">Ebook completo \u2022 Front-end<\/span>\r\n <h1>HTML e CSS <span class=\"muted\">\u2014 do zero a layouts responsivos<\/span><\/h1>\r\n <p class=\"lead\">Aprenda a <strong>estruturar p\u00e1ginas<\/strong> com HTML e a <strong>estiliz\u00e1-las<\/strong> com CSS moderno. Domine <strong>Box Model<\/strong>, <strong>Flexbox<\/strong> e <strong>CSS Grid<\/strong> e finalize com uma <strong>landing page profissional<\/strong> para o seu portf\u00f3lio.<\/p>\r\n <div class=\"hero-cta\">\r\n <a class=\"btn primary\" href=\"https:\/\/pay.kiwify.com.br\/XqShHlj\" target=\"_blank\" rel=\"noopener\">Quero come\u00e7ar agora<\/a>\r\n <a class=\"btn ghost\" href=\"#conteudo\">Ver conte\u00fado<\/a>\r\n <\/div>\r\n <a href=\"https:\/\/pay.kiwify.com.br\/XqShHlj\" target=\"_blank\" rel=\"noopener\">\r\n <img decoding=\"async\" class=\"cover\" src=\"http:\/\/uniqon.com.br\/wp-content\/uploads\/2025\/08\/ChatGPT-Image-31-de-ago.-de-2025-22_25_29.png\" alt=\"Capa do ebook HTML e CSS\" \/>\r\n <\/a>\r\n <p class=\"muted\" style=\"margin-top:.6rem\">Acesso imediato \u2022 Atualiza\u00e7\u00f5es gratuitas \u2022 Garantia incondicional de 7 dias<\/p>\r\n <\/header>\r\n\r\n \r\n <section class=\"container\" id=\"beneficios\">\r\n <h2>Por que este ebook funciona?<\/h2>\r\n <div class=\"grid\">\r\n <article class=\"card\">\r\n <h3>Fundamentos s\u00f3lidos<\/h3>\r\n <p>Voc\u00ea aprende a base certa de HTML sem\u00e2ntico e CSS moderno para evoluir com seguran\u00e7a.<\/p>\r\n <\/article>\r\n <article class=\"card\">\r\n <h3>Responsividade de verdade<\/h3>\r\n <p>Pratique <strong>Flexbox<\/strong> e <strong>Grid<\/strong> criando layouts que se adaptam a qualquer tela.<\/p>\r\n <\/article>\r\n <article class=\"card\">\r\n <h3>Projeto final<\/h3>\r\n <p>Construa uma <strong>landing page<\/strong> completa e publique \u2014 perfeita para portf\u00f3lio.<\/p>\r\n <\/article>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"container\" id=\"conteudo\">\r\n <h2>O que voc\u00ea vai aprender<\/h2>\r\n <div class=\"grid\">\r\n <div class=\"card\">\r\n <h3>Cap. 1 \u2014 Introdu\u00e7\u00e3o e sem\u00e2ntica<\/h3>\r\n <ul class=\"check\">\r\n <li>Como a web funciona<\/li>\r\n <li>Estrutura de um documento HTML<\/li>\r\n <li>Tags sem\u00e2nticas (header, main, section, article, footer)<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3>Cap. 2 \u2014 Conte\u00fado e m\u00eddia<\/h3>\r\n <ul class=\"check\">\r\n <li>Textos, links e imagens<\/li>\r\n <li>Listas, tabelas<\/li>\r\n <li>Formul\u00e1rios (inputs, labels, acessibilidade)<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3>Cap. 3 \u2014 CSS essencial<\/h3>\r\n <ul class=\"check\">\r\n <li>Seletores, especificidade e cascata<\/li>\r\n <li>Cores, fontes, espa\u00e7amentos<\/li>\r\n <li>Box Model, borders e shadows<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3>Cap. 4 \u2014 Layouts modernos<\/h3>\r\n <ul class=\"check\">\r\n <li>Flexbox na pr\u00e1tica<\/li>\r\n <li>CSS Grid (grid-template, areas)<\/li>\r\n <li>Responsividade com media queries<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3>Cap. 5 \u2014 Estilo avan\u00e7ado<\/h3>\r\n <ul class=\"check\">\r\n <li>Pseudo-classes e pseudo-elementos<\/li>\r\n <li>Transi\u00e7\u00f5es e anima\u00e7\u00f5es<\/li>\r\n <li>Dark mode e vari\u00e1veis CSS<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3>Cap. 6 \u2014 Projeto final<\/h3>\r\n <ul class=\"check\">\r\n <li>Landing page responsiva do zero<\/li>\r\n <li>Boas pr\u00e1ticas de acessibilidade<\/li>\r\n <li>Checklist de performance e publica\u00e7\u00e3o<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <p class=\"warn\" style=\"margin-top:1rem\">B\u00f4nus: kit de componentes (cards, bot\u00f5es, grid) + checklist de acessibilidade + guia de tipografia.<\/p>\r\n <\/section>\r\n\r\n \r\n <section class=\"container\" id=\"autor\">\r\n <h2>Quem escreveu<\/h2>\r\n <div class=\"grid\">\r\n <div class=\"card\">\r\n <h3>Seu Nome<\/h3>\r\n <p>Front-end dev focado em interfaces acess\u00edveis e responsivas. Ajudo iniciantes a sair do zero com HTML e CSS.<\/p>\r\n <ul class=\"check\">\r\n <li>Experi\u00eancia real em projetos web<\/li>\r\n <li>Did\u00e1tica direta e objetiva<\/li>\r\n <li>Suporte por e-mail (plano Plus \u2014 opcional)<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3>Para quem \u00e9<\/h3>\r\n <ul class=\"check\">\r\n <li>Iniciantes em front-end<\/li>\r\n <li>Quem j\u00e1 sabe HTML b\u00e1sico e quer responsividade<\/li>\r\n <li>Designers migrando para c\u00f3digo<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"container\" id=\"depoimentos\">\r\n <h2>O que os alunos dizem<\/h2>\r\n <div class=\"grid\">\r\n <blockquote class=\"card\">\u201cConsegui fazer minha primeira landing page responsiva em dois dias.\u201d \u2014 <strong>Camila R.<\/strong><\/blockquote>\r\n <blockquote class=\"card\">\u201cA parte de Grid mudou meu jogo no layout. Did\u00e1tica excelente.\u201d \u2014 <strong>Rafael L.<\/strong><\/blockquote>\r\n <blockquote class=\"card\">\u201cRepleto de exemplos pr\u00e1ticos e um projeto final muito \u00fatil.\u201d \u2014 <strong>Daniela M.<\/strong><\/blockquote>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"container\" id=\"oferta\">\r\n <h2>Invista hoje e comece agora<\/h2>\r\n <div class=\"pricing\">\r\n <div class=\"price-card\">\r\n <p class=\"small\">Ebook completo + atualiza\u00e7\u00f5es<\/p>\r\n <div class=\"price\">R$ 19,90<\/div>\r\n <ul class=\"check\">\r\n <li>Acesso imediato (PDF\/EPUB)<\/li>\r\n <li>Projeto final guiado<\/li>\r\n <li>Kit de componentes + checklist<\/li>\r\n <li>7 dias de garantia incondicional<\/li>\r\n <\/ul>\r\n <div style=\"display:flex; gap:.6rem; margin-top:1rem\">\r\n <a class=\"btn primary\" style=\"flex:1; text-align:center\" href=\"https:\/\/pay.kiwify.com.br\/XqShHlj\" target=\"_blank\" rel=\"noopener\">Comprar agora<\/a>\r\n <a class=\"btn ghost\" style=\"flex:1; text-align:center\" href=\"#faq\">Tirar d\u00favidas<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <p class=\"muted\" style=\"text-align:center; margin-top:.6rem\">Pagamento seguro. Aceitamos cart\u00e3o, Pix e boleto.<\/p>\r\n <\/section>\r\n\r\n \r\n <section class=\"container\" id=\"faq\">\r\n <h2>Perguntas frequentes<\/h2>\r\n <details open>\r\n <summary>Como recebo o ebook?<\/summary>\r\n <p>Ap\u00f3s a compra, o acesso \u00e9 liberado automaticamente por e-mail. Voc\u00ea poder\u00e1 baixar em PDF (e EPUB opcional).<\/p>\r\n <\/details>\r\n <details>\r\n <summary>Preciso saber programa\u00e7\u00e3o antes?<\/summary>\r\n <p>N\u00e3o. O ebook come\u00e7a do zero em HTML e CSS e evolui at\u00e9 layouts responsivos.<\/p>\r\n <\/details>\r\n <details>\r\n <summary>Tem garantia?<\/summary>\r\n <p>Sim. Voc\u00ea tem <strong>7 dias<\/strong> para pedir reembolso completo, sem burocracia.<\/p>\r\n <\/details>\r\n <details>\r\n <summary>Recebo atualiza\u00e7\u00f5es?<\/summary>\r\n <p>Sim. Todas as atualiza\u00e7\u00f5es futuras do ebook s\u00e3o inclu\u00eddas sem custo adicional.<\/p>\r\n <\/details>\r\n <\/section>\r\n\r\n <div id=\"popup-pack\" class=\"popup-overlay\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"popup-title\" aria-describedby=\"popup-desc\">\r\n <div class=\"popup-box\">\r\n <button class=\"popup-close\" aria-label=\"Fechar oferta\" onclick=\"fecharPopup()\">\u00d7<\/button>\r\n <h2 id=\"popup-title\">\ud83c\udf89 Oferta Especial<\/h2>\r\n <p id=\"popup-desc\">Leve o <strong>Pack Completo<\/strong> (HTML\/CSS POR R$ 19,90 +\r\n JAVASCRIPIT POR R$ 19,90 +\r\n PHP POR R$ 19,90)<\/p>\r\n <p class=\"preco\">de <span class=\"old\">R$ 59,70<\/span> por <span class=\"new\">R$ 39,80<\/span><\/p>\r\n <a class=\"btn-oferta\" id=\"cta-pack\" href=\"https:\/\/kiwify.app\/iQyPekm\" target=\"_blank\" rel=\"noopener\">Aproveitar agora<\/a>\r\n <p class=\"popup-mini\">Oferta por tempo limitado \u2022 Abre em nova aba<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"sticky\">\r\n <strong>HTML e CSS<\/strong> \u2014 comece a construir hoje.\r\n <a class=\"btn primary\" href=\"https:\/\/pay.kiwify.com.br\/XqShHlj\" target=\"_blank\" rel=\"noopener\">Garantir minha c\u00f3pia<\/a>\r\n <\/div>\r\n\r\n <footer class=\"container\">\r\n \u00a9 <span id=\"year\"><\/span> Uniqon. Todos os direitos reservados.\r\n <\/footer>\r\n\r\n <script>\r\n \/\/ Ano\r\n document.getElementById('year').textContent = new Date().getFullYear();\r\n\r\n \/\/ Rolagem suave para \u00e2ncoras\r\n document.querySelectorAll('a[href^=\"#\"]').forEach(a=>{\r\n a.addEventListener('click', e=>{\r\n const id=a.getAttribute('href'); const target=document.querySelector(id);\r\n if(!target) return;\r\n e.preventDefault(); target.scrollIntoView({behavior:'smooth', block:'start'});\r\n });\r\n });\r\n\r\n \/\/ ===== POP-UP L\u00d3GICA =====\r\n const popup = document.getElementById('popup-pack');\r\n const ctaPack = document.getElementById('cta-pack');\r\n let popupShown = false; \/\/ para gatilhos passivos (6s, scroll, exit)\r\n let pendingRedirectUrl = null; \/\/ URL do bot\u00e3o de compra clicado\r\n let clickTimer = null; \/\/ timer de fallback ap\u00f3s clique (8s)\r\n\r\n function abrirPopup(triggerUrl=null, viaClique=false){\r\n \/\/ se veio de clique em compra, guardo a URL de destino\r\n if (viaClique) {\r\n pendingRedirectUrl = triggerUrl;\r\n \/\/ fallback: se n\u00e3o clicarem no CTA do popup em 8s, vai para o checkout original\r\n clearTimeout(clickTimer);\r\n clickTimer = setTimeout(()=>redirecionarCheckoutOriginal(), 8000);\r\n } else {\r\n \/\/ gatilho passivo (tempo\/scroll\/exit) n\u00e3o deve redirecionar automaticamente\r\n pendingRedirectUrl = null;\r\n }\r\n\r\n popup.classList.add('active');\r\n if (!viaClique) popupShown = true; \/\/ evita abrir de novo pelos gatilhos passivos\r\n }\r\n\r\n function fecharPopup(){\r\n popup.classList.remove('active');\r\n clearTimeout(clickTimer);\r\n \/\/ se foi aberto a partir de clique (pendingRedirectUrl setada), vai para checkout original\r\n if (pendingRedirectUrl) redirecionarCheckoutOriginal();\r\n }\r\n\r\n function redirecionarCheckoutOriginal(){\r\n if (pendingRedirectUrl){\r\n const url = pendingRedirectUrl;\r\n pendingRedirectUrl = null;\r\n window.open(url, '_blank');\r\n }\r\n popup.classList.remove('active');\r\n clearTimeout(clickTimer);\r\n }\r\n\r\n \/\/ Gatilhos passivos: 6s, scroll 60%, exit-intent\r\n window.addEventListener('load', ()=> { setTimeout(()=>{ if(!popupShown) abrirPopup(null, false); }, 10000); });\r\n window.addEventListener('scroll', ()=>{\r\n if (!popupShown) {\r\n const scrollPos = window.scrollY + window.innerHeight;\r\n const docHeight = document.body.scrollHeight;\r\n if (scrollPos >= docHeight * 0.6) abrirPopup(null, false);\r\n }\r\n });\r\n document.addEventListener('mouseleave', (e)=>{ if (!popupShown && e.clientY <= 0) abrirPopup(null, false); });\r\n\r\n \/\/ Fechar popup ao clicar fora\r\n popup.addEventListener('click', (e)=>{ if(e.target === popup) fecharPopup(); });\r\n\r\n \/\/ Fechar com ESC\r\n document.addEventListener('keydown', (e)=>{ if(e.key === 'Escape' && popup.classList.contains('active')) fecharPopup(); });\r\n\r\n \/\/ Clique no CTA do pack: cancela fallback e vai ao pack\r\n ctaPack.addEventListener('click', ()=>{\r\n clearTimeout(clickTimer);\r\n \/\/ mant\u00e9m a aba do pack; popup fecha sem redirecionar para original\r\n pendingRedirectUrl = null;\r\n popup.classList.remove('active');\r\n });\r\n\r\n \/\/ === Interceptar bot\u00f5es de compra ===\r\n \/\/ Pegamos todos os CTAs que levam ao checkout\/detalhe de compra\r\n const seletorCompras = [\r\n 'a[href^=\"https:\/\/pay.kiwify.com.br\/\"]',\r\n 'a[href*=\"uniqon.com.br\/index.php\/javascript-moderno\/\"]'\r\n ].join(',');\r\n\r\n document.querySelectorAll(seletorCompras).forEach(btn=>{\r\n btn.addEventListener('click', (e)=>{\r\n \/\/ Se o clique veio do pr\u00f3prio bot\u00e3o do pack (dentro do popup), deixamos seguir\r\n if (btn.closest('#popup-pack')) return;\r\n \/\/ Intercepta e abre popup; guarda o destino original para fallback\r\n e.preventDefault();\r\n abrirPopup(btn.href, true);\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>HTML e CSS \u2014 Do Zero a Layouts Responsivos Ebook completo \u2022 Front-end HTML e CSS \u2014 do zero a layouts responsivos Aprenda a estruturar p\u00e1ginas com HTML e a estiliz\u00e1-las com CSS moderno. Domine Box Model, Flexbox e CSS Grid e finalize com uma landing page profissional para o seu portf\u00f3lio. Quero come\u00e7ar agora […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-396","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/uniqon.com.br\/index.php\/wp-json\/wp\/v2\/pages\/396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uniqon.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/uniqon.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/uniqon.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uniqon.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=396"}],"version-history":[{"count":29,"href":"https:\/\/uniqon.com.br\/index.php\/wp-json\/wp\/v2\/pages\/396\/revisions"}],"predecessor-version":[{"id":559,"href":"https:\/\/uniqon.com.br\/index.php\/wp-json\/wp\/v2\/pages\/396\/revisions\/559"}],"wp:attachment":[{"href":"https:\/\/uniqon.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n\r\n HTML e CSS \u2014 Do Zero a Layouts Responsivos<\/title>\r\n <meta name=\"description\" content=\"Aprenda HTML e CSS do zero. Estruture p\u00e1ginas, crie estilos modernos, domine Flexbox e Grid, e construa uma landing page completa para o portf\u00f3lio.\" \/>\r\n <meta name=\"color-scheme\" content=\"light dark\" \/>\r\n\r\n \r\n <meta property=\"og:title\" content=\"HTML e CSS \u2014 Do Zero a Layouts Responsivos\" \/>\r\n <meta property=\"og:description\" content=\"Ebook pr\u00e1tico: fundamentos de HTML e CSS, responsividade com Flexbox\/Grid e projeto final completo.\" \/>\r\n <meta property=\"og:type\" content=\"product\" \/>\r\n <meta property=\"og:image\" content=\"http:\/\/uniqon.com.br\/wp-content\/uploads\/2025\/08\/capa-html-css.png\" \/>\r\n\r\n \r\n <script type=\"application\/ld+json\">\r\n {\r\n \"@context\":\"https:\/\/schema.org\",\r\n \"@type\":\"Product\",\r\n \"name\":\"HTML e CSS\",\r\n \"image\":[\"http:\/\/uniqon.com.br\/wp-content\/uploads\/2025\/08\/capa-html-css.png\"],\r\n \"description\":\"Ebook pr\u00e1tico para aprender HTML e CSS do zero ao responsivo com Flexbox e Grid. Inclui projeto final.\",\r\n \"brand\":{\"@type\":\"Brand\",\"name\":\"Uniqon\"},\r\n \"offers\":{\r\n \"@type\":\"Offer\",\r\n \"price\":\"49.90\",\r\n \"priceCurrency\":\"BRL\",\r\n \"availability\":\"https:\/\/schema.org\/InStock\",\r\n \"url\":\"https:\/\/uniqon.com.br\/index.php\/html-css\/\"\r\n },\r\n \"aggregateRating\":{\"@type\":\"AggregateRating\",\"ratingValue\":\"4.8\",\"reviewCount\":\"168\"}\r\n }\r\n <\/script>\r\n\r\n <style>\r\n :root{\r\n --bg:#0b1020; --text:#e8ecf1; --muted:#b7c2d0;\r\n --brand:#5aa9ff; --brand2:#7ad7ff; --accent:#00e3a5;\r\n --card:#111735; --line:#243067;\r\n }\r\n *{box-sizing:border-box}\r\n html,body{margin:0}\r\n body{\r\n font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, \"Helvetica Neue\", Arial, \"Noto Sans\";\r\n background:\r\n radial-gradient(1200px 600px at 10% -10%, #163366 0%, transparent 60%) no-repeat,\r\n radial-gradient(900px 500px at 90% 0%, #1a2a66 0%, transparent 55%) no-repeat,\r\n linear-gradient(180deg, var(--bg) 0%, #0b0f1a 100%);\r\n color: var(--text); line-height:1.6;\r\n }\r\n a{color:inherit}\r\n\r\n .container{max-width:1100px; margin:0 auto; padding: 1rem clamp(1rem,4vw,2rem) 2.5rem;}\r\n\r\n \/* HERO *\/\r\n .hero{ padding: clamp(2rem,5vw,4rem) 0 1rem; text-align:center; }\r\n .badge{display:inline-block; padding:.25rem .6rem; border:1px solid var(--line); border-radius:999px; color:#cdd8ff; font-size:.85rem}\r\n .hero h1{font-size: clamp(2rem,4.5vw,3.25rem); margin:.6rem 0 .3rem}\r\n .hero p.lead{color:var(--muted); max-width:70ch; margin:.25rem auto 1rem}\r\n .hero-cta{display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:1rem}\r\n .btn{\r\n display:inline-block; padding:.9rem 1.1rem; font-weight:800; text-decoration:none; border-radius:12px; border:1px solid transparent;\r\n box-shadow: 0 10px 30px rgba(0,0,0,.25);\r\n }\r\n .btn.primary{background: linear-gradient(135deg, var(--brand), var(--brand2)); color:#08122a}\r\n .btn.ghost{background: transparent; border-color: var(--line); color:#dfe7ff}\r\n .hero img.cover{ width:min(100%,920px); border-radius:16px; margin:1rem auto 0; display:block; border:1px solid var(--line) }\r\n\r\n \/* SE\u00c7\u00d5ES *\/\r\n section{padding: clamp(1.5rem,4vw,2.5rem) 0; border-top:1px solid #162056;}\r\n h2{margin:0 0 .5rem; font-size: clamp(1.4rem,3.5vw,2rem)}\r\n .muted{color:var(--muted)}\r\n .grid{display:grid; gap: clamp(1rem,2vw,1.4rem); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));}\r\n .card{background: linear-gradient(180deg, var(--card), #0f1634); border:1px solid var(--line); border-radius:14px; padding:1rem}\r\n .check{list-style:none; padding:0; margin:.6rem 0 0}\r\n .check li{margin:.4rem 0; padding-left:1.65rem; position:relative}\r\n .check li::before{content:\"\u2713\"; position:absolute; left:.2rem; top:.05rem; font-weight:900; color:var(--accent)}\r\n .warn{background:#19224a; border:1px dashed #2f3a7c; color:#f8f9ff; padding:.65rem .8rem; border-radius:10px}\r\n\r\n \/* PRE\u00c7O *\/\r\n .pricing{ display:grid; grid-template-columns: 1fr; gap:1rem; max-width:880px; margin:0 auto; }\r\n .price-card{border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,#0f1738,#0d1330); padding:1.25rem}\r\n .price{font-size:2.2rem; font-weight:900}\r\n .small{font-size:.92rem; color:#cbd7ff}\r\n\r\n \/* STICKY BAR *\/\r\n .sticky{\r\n position: sticky; bottom:0; z-index:50; background: #0c1333d9; backdrop-filter: blur(6px);\r\n border-top:1px solid var(--line); padding:.7rem .8rem; display:flex; gap:.75rem; justify-content:center; align-items:center;\r\n flex-wrap:wrap;\r\n }\r\n\r\n \/* FAQ *\/\r\n details{border:1px solid var(--line); border-radius:12px; padding:.8rem 1rem; background:#0e1534}\r\n details + details{margin-top:.6rem}\r\n summary{cursor:pointer; font-weight:700}\r\n summary::-webkit-details-marker{display:none}\r\n\r\n footer{padding:2rem 0 3rem; text-align:center; color:var(--muted)}\r\n @media (prefers-reduced-motion: reduce){*{transition:none !important; animation:none !important}}\r\n\r\n \/* === POP-UP PROMOCIONAL (Pack HTML\/CSS + JS + PHP) === *\/\r\n .popup-overlay{\r\n position:fixed; inset:0; background:rgba(0,0,0,.7);\r\n display:flex; justify-content:center; align-items:center;\r\n visibility:hidden; opacity:0; transition:.3s ease;\r\n z-index:9999;\r\n }\r\n .popup-overlay.active{visibility:visible; opacity:1;}\r\n .popup-box{\r\n background:#111735; color:#fff; padding:2rem; border-radius:14px;\r\n max-width:420px; width:92%; text-align:center; position:relative;\r\n border:2px solid var(--brand); box-shadow:0 0 24px rgba(0,0,0,.45);\r\n }\r\n .popup-box h2{margin:.2rem 0 .4rem; font-size:1.6rem}\r\n .popup-box p{margin:.4rem 0}\r\n .popup-box .preco{margin:.8rem 0; font-size:1.15rem}\r\n .popup-box .old{text-decoration:line-through; color:#cbd5e1; margin-right:.4rem}\r\n .popup-box .new{color:var(--accent); font-weight:800; font-size:1.45rem}\r\n .btn-oferta{\r\n display:inline-block; margin-top:.8rem; padding:.8rem 1.1rem;\r\n background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#08122a;\r\n font-weight:800; border-radius:10px; text-decoration:none; transition:.2s;\r\n box-shadow:0 10px 28px rgba(255,209,102,.35);\r\n }\r\n .btn-oferta:hover{transform:translateY(-2px)}\r\n .popup-close{\r\n position:absolute; top:.45rem; right:.6rem; background:none; border:none;\r\n color:#fff; font-size:1.6rem; cursor:pointer; line-height:1;\r\n }\r\n .popup-mini{ color:#a8b3d1; font-size:.85rem; margin-top:.5rem }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <header class=\"hero container\">\r\n <span class=\"badge\">Ebook completo \u2022 Front-end<\/span>\r\n <h1>HTML e CSS <span class=\"muted\">\u2014 do zero a layouts responsivos<\/span><\/h1>\r\n <p class=\"lead\">Aprenda a <strong>estruturar p\u00e1ginas<\/strong> com HTML e a <strong>estiliz\u00e1-las<\/strong> com CSS moderno. Domine <strong>Box Model<\/strong>, <strong>Flexbox<\/strong> e <strong>CSS Grid<\/strong> e finalize com uma <strong>landing page profissional<\/strong> para o seu portf\u00f3lio.<\/p>\r\n <div class=\"hero-cta\">\r\n <a class=\"btn primary\" href=\"https:\/\/pay.kiwify.com.br\/XqShHlj\" target=\"_blank\" rel=\"noopener\">Quero come\u00e7ar agora<\/a>\r\n <a class=\"btn ghost\" href=\"#conteudo\">Ver conte\u00fado<\/a>\r\n <\/div>\r\n <a href=\"https:\/\/pay.kiwify.com.br\/XqShHlj\" target=\"_blank\" rel=\"noopener\">\r\n <img decoding=\"async\" class=\"cover\" src=\"http:\/\/uniqon.com.br\/wp-content\/uploads\/2025\/08\/ChatGPT-Image-31-de-ago.-de-2025-22_25_29.png\" alt=\"Capa do ebook HTML e CSS\" \/>\r\n <\/a>\r\n <p class=\"muted\" style=\"margin-top:.6rem\">Acesso imediato \u2022 Atualiza\u00e7\u00f5es gratuitas \u2022 Garantia incondicional de 7 dias<\/p>\r\n <\/header>\r\n\r\n \r\n <section class=\"container\" id=\"beneficios\">\r\n <h2>Por que este ebook funciona?<\/h2>\r\n <div class=\"grid\">\r\n <article class=\"card\">\r\n <h3>Fundamentos s\u00f3lidos<\/h3>\r\n <p>Voc\u00ea aprende a base certa de HTML sem\u00e2ntico e CSS moderno para evoluir com seguran\u00e7a.<\/p>\r\n <\/article>\r\n <article class=\"card\">\r\n <h3>Responsividade de verdade<\/h3>\r\n <p>Pratique <strong>Flexbox<\/strong> e <strong>Grid<\/strong> criando layouts que se adaptam a qualquer tela.<\/p>\r\n <\/article>\r\n <article class=\"card\">\r\n <h3>Projeto final<\/h3>\r\n <p>Construa uma <strong>landing page<\/strong> completa e publique \u2014 perfeita para portf\u00f3lio.<\/p>\r\n <\/article>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"container\" id=\"conteudo\">\r\n <h2>O que voc\u00ea vai aprender<\/h2>\r\n <div class=\"grid\">\r\n <div class=\"card\">\r\n <h3>Cap. 1 \u2014 Introdu\u00e7\u00e3o e sem\u00e2ntica<\/h3>\r\n <ul class=\"check\">\r\n <li>Como a web funciona<\/li>\r\n <li>Estrutura de um documento HTML<\/li>\r\n <li>Tags sem\u00e2nticas (header, main, section, article, footer)<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3>Cap. 2 \u2014 Conte\u00fado e m\u00eddia<\/h3>\r\n <ul class=\"check\">\r\n <li>Textos, links e imagens<\/li>\r\n <li>Listas, tabelas<\/li>\r\n <li>Formul\u00e1rios (inputs, labels, acessibilidade)<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3>Cap. 3 \u2014 CSS essencial<\/h3>\r\n <ul class=\"check\">\r\n <li>Seletores, especificidade e cascata<\/li>\r\n <li>Cores, fontes, espa\u00e7amentos<\/li>\r\n <li>Box Model, borders e shadows<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3>Cap. 4 \u2014 Layouts modernos<\/h3>\r\n <ul class=\"check\">\r\n <li>Flexbox na pr\u00e1tica<\/li>\r\n <li>CSS Grid (grid-template, areas)<\/li>\r\n <li>Responsividade com media queries<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3>Cap. 5 \u2014 Estilo avan\u00e7ado<\/h3>\r\n <ul class=\"check\">\r\n <li>Pseudo-classes e pseudo-elementos<\/li>\r\n <li>Transi\u00e7\u00f5es e anima\u00e7\u00f5es<\/li>\r\n <li>Dark mode e vari\u00e1veis CSS<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3>Cap. 6 \u2014 Projeto final<\/h3>\r\n <ul class=\"check\">\r\n <li>Landing page responsiva do zero<\/li>\r\n <li>Boas pr\u00e1ticas de acessibilidade<\/li>\r\n <li>Checklist de performance e publica\u00e7\u00e3o<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <p class=\"warn\" style=\"margin-top:1rem\">B\u00f4nus: kit de componentes (cards, bot\u00f5es, grid) + checklist de acessibilidade + guia de tipografia.<\/p>\r\n <\/section>\r\n\r\n \r\n <section class=\"container\" id=\"autor\">\r\n <h2>Quem escreveu<\/h2>\r\n <div class=\"grid\">\r\n <div class=\"card\">\r\n <h3>Seu Nome<\/h3>\r\n <p>Front-end dev focado em interfaces acess\u00edveis e responsivas. Ajudo iniciantes a sair do zero com HTML e CSS.<\/p>\r\n <ul class=\"check\">\r\n <li>Experi\u00eancia real em projetos web<\/li>\r\n <li>Did\u00e1tica direta e objetiva<\/li>\r\n <li>Suporte por e-mail (plano Plus \u2014 opcional)<\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"card\">\r\n <h3>Para quem \u00e9<\/h3>\r\n <ul class=\"check\">\r\n <li>Iniciantes em front-end<\/li>\r\n <li>Quem j\u00e1 sabe HTML b\u00e1sico e quer responsividade<\/li>\r\n <li>Designers migrando para c\u00f3digo<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"container\" id=\"depoimentos\">\r\n <h2>O que os alunos dizem<\/h2>\r\n <div class=\"grid\">\r\n <blockquote class=\"card\">\u201cConsegui fazer minha primeira landing page responsiva em dois dias.\u201d \u2014 <strong>Camila R.<\/strong><\/blockquote>\r\n <blockquote class=\"card\">\u201cA parte de Grid mudou meu jogo no layout. Did\u00e1tica excelente.\u201d \u2014 <strong>Rafael L.<\/strong><\/blockquote>\r\n <blockquote class=\"card\">\u201cRepleto de exemplos pr\u00e1ticos e um projeto final muito \u00fatil.\u201d \u2014 <strong>Daniela M.<\/strong><\/blockquote>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"container\" id=\"oferta\">\r\n <h2>Invista hoje e comece agora<\/h2>\r\n <div class=\"pricing\">\r\n <div class=\"price-card\">\r\n <p class=\"small\">Ebook completo + atualiza\u00e7\u00f5es<\/p>\r\n <div class=\"price\">R$ 19,90<\/div>\r\n <ul class=\"check\">\r\n <li>Acesso imediato (PDF\/EPUB)<\/li>\r\n <li>Projeto final guiado<\/li>\r\n <li>Kit de componentes + checklist<\/li>\r\n <li>7 dias de garantia incondicional<\/li>\r\n <\/ul>\r\n <div style=\"display:flex; gap:.6rem; margin-top:1rem\">\r\n <a class=\"btn primary\" style=\"flex:1; text-align:center\" href=\"https:\/\/pay.kiwify.com.br\/XqShHlj\" target=\"_blank\" rel=\"noopener\">Comprar agora<\/a>\r\n <a class=\"btn ghost\" style=\"flex:1; text-align:center\" href=\"#faq\">Tirar d\u00favidas<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <p class=\"muted\" style=\"text-align:center; margin-top:.6rem\">Pagamento seguro. Aceitamos cart\u00e3o, Pix e boleto.<\/p>\r\n <\/section>\r\n\r\n \r\n <section class=\"container\" id=\"faq\">\r\n <h2>Perguntas frequentes<\/h2>\r\n <details open>\r\n <summary>Como recebo o ebook?<\/summary>\r\n <p>Ap\u00f3s a compra, o acesso \u00e9 liberado automaticamente por e-mail. Voc\u00ea poder\u00e1 baixar em PDF (e EPUB opcional).<\/p>\r\n <\/details>\r\n <details>\r\n <summary>Preciso saber programa\u00e7\u00e3o antes?<\/summary>\r\n <p>N\u00e3o. O ebook come\u00e7a do zero em HTML e CSS e evolui at\u00e9 layouts responsivos.<\/p>\r\n <\/details>\r\n <details>\r\n <summary>Tem garantia?<\/summary>\r\n <p>Sim. Voc\u00ea tem <strong>7 dias<\/strong> para pedir reembolso completo, sem burocracia.<\/p>\r\n <\/details>\r\n <details>\r\n <summary>Recebo atualiza\u00e7\u00f5es?<\/summary>\r\n <p>Sim. Todas as atualiza\u00e7\u00f5es futuras do ebook s\u00e3o inclu\u00eddas sem custo adicional.<\/p>\r\n <\/details>\r\n <\/section>\r\n\r\n <div id=\"popup-pack\" class=\"popup-overlay\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"popup-title\" aria-describedby=\"popup-desc\">\r\n <div class=\"popup-box\">\r\n <button class=\"popup-close\" aria-label=\"Fechar oferta\" onclick=\"fecharPopup()\">\u00d7<\/button>\r\n <h2 id=\"popup-title\">\ud83c\udf89 Oferta Especial<\/h2>\r\n <p id=\"popup-desc\">Leve o <strong>Pack Completo<\/strong> (HTML\/CSS POR R$ 19,90 +\r\n JAVASCRIPIT POR R$ 19,90 +\r\n PHP POR R$ 19,90)<\/p>\r\n <p class=\"preco\">de <span class=\"old\">R$ 59,70<\/span> por <span class=\"new\">R$ 39,80<\/span><\/p>\r\n <a class=\"btn-oferta\" id=\"cta-pack\" href=\"https:\/\/kiwify.app\/iQyPekm\" target=\"_blank\" rel=\"noopener\">Aproveitar agora<\/a>\r\n <p class=\"popup-mini\">Oferta por tempo limitado \u2022 Abre em nova aba<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"sticky\">\r\n <strong>HTML e CSS<\/strong> \u2014 comece a construir hoje.\r\n <a class=\"btn primary\" href=\"https:\/\/pay.kiwify.com.br\/XqShHlj\" target=\"_blank\" rel=\"noopener\">Garantir minha c\u00f3pia<\/a>\r\n <\/div>\r\n\r\n <footer class=\"container\">\r\n \u00a9 <span id=\"year\"><\/span> Uniqon. Todos os direitos reservados.\r\n <\/footer>\r\n\r\n <script>\r\n \/\/ Ano\r\n document.getElementById('year').textContent = new Date().getFullYear();\r\n\r\n \/\/ Rolagem suave para \u00e2ncoras\r\n document.querySelectorAll('a[href^=\"#\"]').forEach(a=>{\r\n a.addEventListener('click', e=>{\r\n const id=a.getAttribute('href'); const target=document.querySelector(id);\r\n if(!target) return;\r\n e.preventDefault(); target.scrollIntoView({behavior:'smooth', block:'start'});\r\n });\r\n });\r\n\r\n \/\/ ===== POP-UP L\u00d3GICA =====\r\n const popup = document.getElementById('popup-pack');\r\n const ctaPack = document.getElementById('cta-pack');\r\n let popupShown = false; \/\/ para gatilhos passivos (6s, scroll, exit)\r\n let pendingRedirectUrl = null; \/\/ URL do bot\u00e3o de compra clicado\r\n let clickTimer = null; \/\/ timer de fallback ap\u00f3s clique (8s)\r\n\r\n function abrirPopup(triggerUrl=null, viaClique=false){\r\n \/\/ se veio de clique em compra, guardo a URL de destino\r\n if (viaClique) {\r\n pendingRedirectUrl = triggerUrl;\r\n \/\/ fallback: se n\u00e3o clicarem no CTA do popup em 8s, vai para o checkout original\r\n clearTimeout(clickTimer);\r\n clickTimer = setTimeout(()=>redirecionarCheckoutOriginal(), 8000);\r\n } else {\r\n \/\/ gatilho passivo (tempo\/scroll\/exit) n\u00e3o deve redirecionar automaticamente\r\n pendingRedirectUrl = null;\r\n }\r\n\r\n popup.classList.add('active');\r\n if (!viaClique) popupShown = true; \/\/ evita abrir de novo pelos gatilhos passivos\r\n }\r\n\r\n function fecharPopup(){\r\n popup.classList.remove('active');\r\n clearTimeout(clickTimer);\r\n \/\/ se foi aberto a partir de clique (pendingRedirectUrl setada), vai para checkout original\r\n if (pendingRedirectUrl) redirecionarCheckoutOriginal();\r\n }\r\n\r\n function redirecionarCheckoutOriginal(){\r\n if (pendingRedirectUrl){\r\n const url = pendingRedirectUrl;\r\n pendingRedirectUrl = null;\r\n window.open(url, '_blank');\r\n }\r\n popup.classList.remove('active');\r\n clearTimeout(clickTimer);\r\n }\r\n\r\n \/\/ Gatilhos passivos: 6s, scroll 60%, exit-intent\r\n window.addEventListener('load', ()=> { setTimeout(()=>{ if(!popupShown) abrirPopup(null, false); }, 10000); });\r\n window.addEventListener('scroll', ()=>{\r\n if (!popupShown) {\r\n const scrollPos = window.scrollY + window.innerHeight;\r\n const docHeight = document.body.scrollHeight;\r\n if (scrollPos >= docHeight * 0.6) abrirPopup(null, false);\r\n }\r\n });\r\n document.addEventListener('mouseleave', (e)=>{ if (!popupShown && e.clientY <= 0) abrirPopup(null, false); });\r\n\r\n \/\/ Fechar popup ao clicar fora\r\n popup.addEventListener('click', (e)=>{ if(e.target === popup) fecharPopup(); });\r\n\r\n \/\/ Fechar com ESC\r\n document.addEventListener('keydown', (e)=>{ if(e.key === 'Escape' && popup.classList.contains('active')) fecharPopup(); });\r\n\r\n \/\/ Clique no CTA do pack: cancela fallback e vai ao pack\r\n ctaPack.addEventListener('click', ()=>{\r\n clearTimeout(clickTimer);\r\n \/\/ mant\u00e9m a aba do pack; popup fecha sem redirecionar para original\r\n pendingRedirectUrl = null;\r\n popup.classList.remove('active');\r\n });\r\n\r\n \/\/ === Interceptar bot\u00f5es de compra ===\r\n \/\/ Pegamos todos os CTAs que levam ao checkout\/detalhe de compra\r\n const seletorCompras = [\r\n 'a[href^=\"https:\/\/pay.kiwify.com.br\/\"]',\r\n 'a[href*=\"uniqon.com.br\/index.php\/javascript-moderno\/\"]'\r\n ].join(',');\r\n\r\n document.querySelectorAll(seletorCompras).forEach(btn=>{\r\n btn.addEventListener('click', (e)=>{\r\n \/\/ Se o clique veio do pr\u00f3prio bot\u00e3o do pack (dentro do popup), deixamos seguir\r\n if (btn.closest('#popup-pack')) return;\r\n \/\/ Intercepta e abre popup; guarda o destino original para fallback\r\n e.preventDefault();\r\n abrirPopup(btn.href, true);\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>HTML e CSS \u2014 Do Zero a Layouts Responsivos Ebook completo \u2022 Front-end HTML e CSS \u2014 do zero a layouts responsivos Aprenda a estruturar p\u00e1ginas com HTML e a estiliz\u00e1-las com CSS moderno. Domine Box Model, Flexbox e CSS Grid e finalize com uma landing page profissional para o seu portf\u00f3lio. Quero come\u00e7ar agora […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-396","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/uniqon.com.br\/index.php\/wp-json\/wp\/v2\/pages\/396","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uniqon.com.br\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/uniqon.com.br\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/uniqon.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uniqon.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=396"}],"version-history":[{"count":29,"href":"https:\/\/uniqon.com.br\/index.php\/wp-json\/wp\/v2\/pages\/396\/revisions"}],"predecessor-version":[{"id":559,"href":"https:\/\/uniqon.com.br\/index.php\/wp-json\/wp\/v2\/pages\/396\/revisions\/559"}],"wp:attachment":[{"href":"https:\/\/uniqon.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=396"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}