{"id":788,"date":"2018-08-13T16:37:26","date_gmt":"2018-08-13T19:37:26","guid":{"rendered":"https:\/\/programathor.com.br\/blog\/?p=788"},"modified":"2021-07-08T16:04:54","modified_gmt":"2021-07-08T19:04:54","slug":"top-5-landing-pages","status":"publish","type":"post","link":"https:\/\/programathor.com.br\/blog\/top-5-landing-pages\/","title":{"rendered":"Top 5 landing pages no Codpen.io"},"content":{"rendered":"

Muitos podem achar que o desing n\u00e3o \u00e9 importante e acabam deixando este ponto de lado para se dedicar totalmente \u00e0s funcionalidades. De fato \u00e9 essencial possuir um site funcional, que proporcione uma \u00f3tima experi\u00eancia para os usu\u00e1rios, por\u00e9m, uma p\u00e1gina com um desing atrativo e bem elaborado, podem garantir muitas vendas. Para te ajudar neste aspecto, n\u00f3s separamos um top 5 landing pages do codepen.io para voc\u00ea dar uma olhada.<\/p>\n

<\/p>\n

ScrollSpy<\/a><\/h2>\n

\"scrollspy\"<\/p>\n

Linguagens: HTLM | CSS | JAVASCRIPT<\/p>\n

ScrollSpy.js destaca a posi\u00e7\u00e3o da p\u00e1gina aplicando uma classe ‘ativa’ ao link Navega\u00e7\u00e3o dentro de um componente de navega\u00e7\u00e3o do Bootstrap. Ele faz isso monitorando o elemento #target do link de navega\u00e7\u00e3o dentro da janela, esperando que ele atinja uma determinada posi\u00e7\u00e3o ‘Y’, geralmente zero.<\/p>\n

Este exemplo demonstra alguns recursos avan\u00e7ados adicionais, incluindo rolagem animada, eventos de foco e como compensar com uma barra de navega\u00e7\u00e3o fixa.<\/p>\n

Parallax<\/a><\/h2>\n

\"\"<\/p>\n

Linguagens: HTML | CSS<\/p>\n

Uma mistura de grandes imagens com textos explicativos! Esta landing \u00e9 recomendada para servi\u00e7os que requerem uma aten\u00e7\u00e3o especial \u00e0 fotos e imagens e ao mesmo tempo uma defini\u00e7\u00e3o completa sobre as op\u00e7\u00f5es.<\/p>\n

Split<\/a><\/h2>\n

\"top<\/p>\n

Linguagens: HTML | CSS | JAVASCRIPT<\/p>\n

Uma maneira elegante e divertida de apresentar dois servi\u00e7os principais e ao mesmo tempo distintos. A aten\u00e7\u00e3o toda ser\u00e1 destinada as duas op\u00e7\u00f5es, gerando uma certa curiosidade.<\/p>\n

Netflix<\/a><\/h2>\n

\"\"<\/p>\n

Linguagens: HTML | CSS | JAVASCRIPT<\/p>\n

N\u00e3o tem muito segredo! Trate-se de uma landing page muito pr\u00f3xima ao do Netflix.<\/p>\n

Aproveite =)<\/p>\n

App Landing<\/a><\/h2>\n

\"top<\/p>\n

Linguagens: HTML | CSS | JAVASCRIPT<\/p>\n

Esta landing \u00e9 divertida e colorida, priorizando a leveza em rela\u00e7\u00e3o \u00e0 um desing mais moderno. O criador trabalhou principalmente com elementos JS que trazem vida a p\u00e1gina.<\/p>\n

Compartilhe suas ideias para landing pages favoritas atrav\u00e9s dos coment\u00e1rios e nos ajude a enriquecer a comunidade!<\/p>\n

\"top<\/p>\n

\n

Consiga um emprego!<\/strong><\/h3>\n

Se voc\u00ea \u00e9 um programador e est\u00e1 buscando novas oportunidades profissionais, acesse a ProgramaThor<\/a>, uma startup focada no recrutamento de desenvolvedores. Para se candidatar \u00e0s vagas e receber notifica\u00e7\u00f5es em casos de matching, basta de cadastrar e completar seu perfil corretamente.<\/p>\n

VAGAS PARA PROGRAMADORES<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Muitos podem achar que o desing n\u00e3o \u00e9 importante e acabam deixando este ponto de lado para se dedicar totalmente \u00e0s funcionalidades. De fato \u00e9 essencial possuir um site funcional, que proporcione uma \u00f3tima experi\u00eancia para os usu\u00e1rios, por\u00e9m, uma p\u00e1gina com um desing atrativo e bem elaborado, podem garantir muitas vendas. Para te ajudar […]<\/p>\n","protected":false},"author":3,"featured_media":800,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,1],"tags":[45,20,51,38,11],"yoast_head":"\nTop 5 landing pages do Codepen - Blog da ProgramaThor<\/title>\n<meta name=\"description\" content=\"O desing da sua p\u00e1gina \u00e9 essencial.Para te ajudar neste aspecto, n\u00f3s separamos um top 5 landing pages do codepen.io para voc\u00ea dar uma olhada.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/programathor.com.br\/blog\/top-5-landing-pages\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Top 5 landing pages do Codepen - Blog da ProgramaThor\" \/>\n<meta property=\"og:description\" content=\"O desing da sua p\u00e1gina \u00e9 essencial.Para te ajudar neste aspecto, n\u00f3s separamos um top 5 landing pages do codepen.io para voc\u00ea dar uma olhada.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/programathor.com.br\/blog\/top-5-landing-pages\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog ProgramaThor\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ProgramaThorBr\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/pedro.lucinio.94\" \/>\n<meta property=\"article:published_time\" content=\"2018-08-13T19:37:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-08T19:04:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/programathor.com.br\/blog\/wp-content\/uploads\/2018\/08\/top-5-landings-pages.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"840\" \/>\n\t<meta property=\"og:image:height\" content=\"430\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Pedro Lucinio\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@pedrolucinio27\" \/>\n<meta name=\"twitter:site\" content=\"@ProgramaThor\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pedro Lucinio\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Top 5 landing pages do Codepen - Blog da ProgramaThor","description":"O desing da sua p\u00e1gina \u00e9 essencial.Para te ajudar neste aspecto, n\u00f3s separamos um top 5 landing pages do codepen.io para voc\u00ea dar uma olhada.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/programathor.com.br\/blog\/top-5-landing-pages\/","og_locale":"pt_PT","og_type":"article","og_title":"Top 5 landing pages do Codepen - Blog da ProgramaThor","og_description":"O desing da sua p\u00e1gina \u00e9 essencial.Para te ajudar neste aspecto, n\u00f3s separamos um top 5 landing pages do codepen.io para voc\u00ea dar uma olhada.","og_url":"https:\/\/programathor.com.br\/blog\/top-5-landing-pages\/","og_site_name":"Blog ProgramaThor","article_publisher":"https:\/\/www.facebook.com\/ProgramaThorBr\/","article_author":"https:\/\/www.facebook.com\/pedro.lucinio.94","article_published_time":"2018-08-13T19:37:26+00:00","article_modified_time":"2021-07-08T19:04:54+00:00","og_image":[{"width":840,"height":430,"url":"https:\/\/programathor.com.br\/blog\/wp-content\/uploads\/2018\/08\/top-5-landings-pages.jpg","type":"image\/jpeg"}],"author":"Pedro Lucinio","twitter_card":"summary_large_image","twitter_creator":"@pedrolucinio27","twitter_site":"@ProgramaThor","twitter_misc":{"Escrito por":"Pedro Lucinio","Tempo estimado de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/programathor.com.br\/blog\/top-5-landing-pages\/","url":"https:\/\/programathor.com.br\/blog\/top-5-landing-pages\/","name":"Top 5 landing pages do Codepen - Blog da ProgramaThor","isPartOf":{"@id":"https:\/\/programathor.com.br\/blog\/#website"},"datePublished":"2018-08-13T19:37:26+00:00","dateModified":"2021-07-08T19:04:54+00:00","author":{"@id":"https:\/\/programathor.com.br\/blog\/#\/schema\/person\/0d0da03131226876dd51a85cdbe26458"},"description":"O desing da sua p\u00e1gina \u00e9 essencial.Para te ajudar neste aspecto, n\u00f3s separamos um top 5 landing pages do codepen.io para voc\u00ea dar uma olhada.","breadcrumb":{"@id":"https:\/\/programathor.com.br\/blog\/top-5-landing-pages\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/programathor.com.br\/blog\/top-5-landing-pages\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/programathor.com.br\/blog\/top-5-landing-pages\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/programathor.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Top","item":"https:\/\/programathor.com.br\/blog\/category\/top\/"},{"@type":"ListItem","position":3,"name":"Top 5 landing pages no Codpen.io"}]},{"@type":"WebSite","@id":"https:\/\/programathor.com.br\/blog\/#website","url":"https:\/\/programathor.com.br\/blog\/","name":"Blog ProgramaThor","description":"A plataforma de recrutamento para programadores pensada por programadores. Entenda melhor o mundo da programa\u00e7\u00e3o, a cria\u00e7\u00e3o de uma vaga eficiente, dicas de entrevista, as linguagens do momento, o mercado de desenvolvimento e muito mais!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/programathor.com.br\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-PT"},{"@type":"Person","@id":"https:\/\/programathor.com.br\/blog\/#\/schema\/person\/0d0da03131226876dd51a85cdbe26458","name":"Pedro Lucinio","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/programathor.com.br\/blog\/#\/schema\/person\/image\/","url":"https:\/\/programathor.com.br\/blog\/wp-content\/litespeed\/avatar\/c57a1d2b28234277049c88e675e47e45.jpg?ver=1780843675","contentUrl":"https:\/\/programathor.com.br\/blog\/wp-content\/litespeed\/avatar\/c57a1d2b28234277049c88e675e47e45.jpg?ver=1780843675","caption":"Pedro Lucinio"},"description":"Apaixonado por tecnologia e entusiasta da literatura !","sameAs":["http:\/\/www.programathor.com.br","https:\/\/www.facebook.com\/pedro.lucinio.94","https:\/\/twitter.com\/pedrolucinio27"],"url":"https:\/\/programathor.com.br\/blog\/author\/pedro\/"}]}},"_links":{"self":[{"href":"https:\/\/programathor.com.br\/blog\/wp-json\/wp\/v2\/posts\/788"}],"collection":[{"href":"https:\/\/programathor.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programathor.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programathor.com.br\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/programathor.com.br\/blog\/wp-json\/wp\/v2\/comments?post=788"}],"version-history":[{"count":7,"href":"https:\/\/programathor.com.br\/blog\/wp-json\/wp\/v2\/posts\/788\/revisions"}],"predecessor-version":[{"id":3202,"href":"https:\/\/programathor.com.br\/blog\/wp-json\/wp\/v2\/posts\/788\/revisions\/3202"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/programathor.com.br\/blog\/wp-json\/wp\/v2\/media\/800"}],"wp:attachment":[{"href":"https:\/\/programathor.com.br\/blog\/wp-json\/wp\/v2\/media?parent=788"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programathor.com.br\/blog\/wp-json\/wp\/v2\/categories?post=788"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programathor.com.br\/blog\/wp-json\/wp\/v2\/tags?post=788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}