{"id":168,"date":"2019-06-16T15:05:33","date_gmt":"2019-06-16T15:05:33","guid":{"rendered":"https:\/\/alexcgdesign.com\/blog\/?p=168"},"modified":"2019-06-16T15:05:33","modified_gmt":"2019-06-16T15:05:33","slug":"crea-una-landing-page-animada-desde-0-html-css-js","status":"publish","type":"post","link":"https:\/\/alexcgdesign.com\/blog\/crea-una-landing-page-animada-desde-0-html-css-js\/","title":{"rendered":"Crea una LANDING PAGE animada desde 0 [HTML, CSS, JS] \u2714\ufe0f"},"content":{"rendered":"<p>Hey, hola qu\u00e9 tal,esta vez aprenderemos acerca de<strong> hacer una LANDING PAGE animada desde 0, <\/strong>la cual te ayudar\u00e1 a promocionar tu marca, producto o el servicio de tu cliente qu\u00e9 se ver\u00e1 sumamente genial est\u00e1 landing page en tu sitio web, te escribe Jordan Alexander de AlexCG Design y empezamos.<\/p>\n<p>Recuerda que como la mayor\u00eda de nuestros proyectos, en la parte final del BLOG se encuentra el <strong>link para descargar<\/strong> los archivos base del proyecto:\u00a0<strong>Crea una landing page animada desde 0 <\/strong>para que lo puedas implementar ahora mismo en tu proyecto personal o lo uses para practicar.<\/p>\n<p>https:\/\/giphy.com\/gifs\/hVPPNSM3aY9I6YPQP1<\/p>\n<p>Las <strong>landing page<\/strong> son uno de los recursos m\u00e1s utilizados para promocionar productos y servicios digitales, todo esto lo aprenderemos a hacer hoy, adem\u00e1s haremos una\u00a0<strong>landing page <\/strong>con un estilo muy genial y sobre todo moderno<strong>.<\/strong><\/p>\n<h3><b><img decoding=\"async\" class=\"emoji lazyload\" draggable=\"false\" data-src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/26a0.svg\" alt=\"\u26a0\ufe0f\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/><img decoding=\"async\" class=\"emoji lazyload\" draggable=\"false\" data-src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/270b.svg\" alt=\"\u270b\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/>\u00a0Antes de seguir leyendo:\u00a0<\/b>Si no has visto el tutorial de YouTube Crea una landing page animada con HTML\u00a0 y CSS \u00bfQue esperas? Puedes verlo aqu\u00ed abajo: <img decoding=\"async\" class=\"emoji lazyload\" draggable=\"false\" data-src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/1f447.svg\" alt=\"\ud83d\udc47\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/><img decoding=\"async\" class=\"emoji lazyload\" draggable=\"false\" data-src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/1f447.svg\" alt=\"\ud83d\udc47\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/><img decoding=\"async\" class=\"emoji lazyload\" draggable=\"false\" data-src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/1f447.svg\" alt=\"\ud83d\udc47\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/><\/h3>\n<p><iframe title=\"Como crear una PAGINA WEB profesional GRATIS 2024\u2714\ufe0f LANDING PAGE con HTML CSS Y JS\" width=\"1290\" height=\"726\" data-src=\"https:\/\/www.youtube.com\/embed\/Cg1c6sy8Btk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<h3>Recursos usados para crear el proyecto:<\/h3>\n<p><img decoding=\"async\" class=\"emoji lazyload\" draggable=\"false\" data-src=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f4cc.svg\" alt=\"\ud83d\udccc\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/> Freepick:<\/p>\n<p>Un banco de ilustraciones el cual nos ayudar\u00e1 a complementar la landing page, no olvides atribuir al autor si usas las imagenes sin la licencia freemium.<\/p>\n<p><a href=\"https:\/\/www.freepik.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.freepik.com\/<\/a><\/p>\n<p><img decoding=\"async\" class=\"emoji lazyload\" draggable=\"false\" data-src=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f4cc.svg\" alt=\"\ud83d\udccc\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/> Ui-gradients:<\/p>\n<p>Un generador de gradientes, el cu\u00e1l le dar\u00e1 ese estilo tan \u00fanico y novedoso a nuestra pagina.<\/p>\n<p><a href=\"https:\/\/uigradients.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/uigradients.com\/<\/a><\/p>\n<p><img decoding=\"async\" class=\"emoji lazyload\" draggable=\"false\" data-src=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f4cc.svg\" alt=\"\ud83d\udccc\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/> Google fonts:<\/p>\n<p>Google, te proporciona una herramienta donde puedes integrar muchas de tipograf\u00edas en tu web.<\/p>\n<p><a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/fonts.google.com\/<\/a><\/p>\n<p><img decoding=\"async\" class=\"emoji lazyload\" draggable=\"false\" data-src=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f4cc.svg\" alt=\"\ud83d\udccc\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/> Generador SVG WAVE:<\/p>\n<p><a href=\"https:\/\/smooth.ie\/blogs\/news\/svg-wavey-transitions-between-sections\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/smooth.ie\/blogs\/news\/svg-wavey-transitions-between-sections<\/a><\/p>\n<p><img decoding=\"async\" class=\"emoji lazyload\" draggable=\"false\" data-src=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f4cc.svg\" alt=\"\ud83d\udccc\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/> Clip-path maker:<\/p>\n<p>Un generador de Clip-path, el cu\u00e1l nos ayudar\u00e1 a hacer el fabuloso efecto del men\u00fa animado.<\/p>\n<p><a href=\"https:\/\/bennettfeely.com\/clippy\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/bennettfeely.com\/clippy\/<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>No olvides que como la mayor\u00eda de nuestros proyectos, podremos usar la <strong>landing page animada<\/strong><strong>\u00a0<\/strong>ya que<strong>\u00a0<\/strong>est\u00e1 completamente <strong>adaptada a dispositivos m\u00f3viles<\/strong> por lo que cualquier persona puede apreciarlo desde cualquier dispositivo.<\/p>\n<p>Tambi\u00e9n puedes complementer este proyecto con: <a href=\"https:\/\/alexcgdesign.com\/blog\/crea-una-pagina-web-moderna-desde-0\/\" target=\"_blank\" rel=\"noopener noreferrer\">Como crear una pagina web desde 0<\/a><\/p>\n<h3><img decoding=\"async\" class=\"emoji lazyload\" draggable=\"false\" data-src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/1f53b.svg\" alt=\"\ud83d\udd3b\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/>M\u00e1s informaci\u00f3n:<\/h3>\n<p><a href=\"http:\/\/bit.ly\/2J0ptHI\" target=\"_blank\" rel=\"noopener noreferrer\">Inv\u00edtame un caf\u00e9:<img decoding=\"async\" class=\"emoji lazyload\" draggable=\"false\" data-src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/2615.svg\" alt=\"\u2615\ufe0f\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/>\u00a0[Dando click aqu\u00ed]<\/a><\/p>\n<p><a href=\"http:\/\/www.mediafire.com\/file\/dbus9b8bfa1atba\/Landing+Page+AlexCG+Design.zip\" target=\"_blank\" rel=\"noopener noreferrer\">Descarga los archivos base<img decoding=\"async\" class=\"emoji lazyload\" draggable=\"false\" data-src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/1f381.svg\" alt=\"\ud83c\udf81\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" \/>\u00a0[Dando click aqu\u00ed]<\/a><\/p>\n<p>Por \u00faltimo no olvides suscribirte a nuestro canal de Youtube\u00a0<a href=\"https:\/\/www.youtube.com\/alexcgdesign\" target=\"_blank\" rel=\"noopener noreferrer\">AlexCG Design<\/a>\u00a0y tambi\u00e9n seguirnos en todas nuestras redes sociales,\u00a0<b>si te fue de ayuda no olvides compartir el v\u00eddeo y darle like, eso nos ayudar\u00eda much\u00edsimo a seguir dando contenido de valor.<\/b><\/p>\n\n\t<section id=\"yikes-mailchimp-container-1\" class=\"yikes-mailchimp-container yikes-mailchimp-container-1 \">\n\t<h3 class=\"yikes-mailchimp-form-title yikes-mailchimp-form-title-1\">Mantente informado de nuestro contenido<\/h3>\t\t\t<form id=\"mantente-informado-de-nuestro-contenido-1\" class=\"yikes-easy-mc-form yikes-easy-mc-form-1  \" method=\"POST\" data-attr-form-id=\"1\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"yikes-easy-mc-form-1-FNAME\"  class=\"FNAME-label yikes-mailchimp-field-required \">\n\n\t\t\t\t\t\t\t\t\t\t<!-- dictate label visibility -->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"FNAME-label\">\n\t\t\t\t\t\t\t\t\t\t\t\tNombre\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<!-- Description Above -->\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<input id=\"yikes-easy-mc-form-1-FNAME\"  name=\"FNAME\"  placeholder=\"\"  class=\"yikes-easy-mc-text \"  required=\"required\" type=\"text\"  value=\"\">\n\n\t\t\t\t\t\t\t\t\t\t<!-- Description Below -->\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"yikes-easy-mc-form-1-EMAIL\"  class=\"EMAIL-label yikes-mailchimp-field-required \">\n\n\t\t\t\t\t\t\t\t\t\t<!-- dictate label visibility -->\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"EMAIL-label\">\n\t\t\t\t\t\t\t\t\t\t\t\tDirecci\u00f3n de correo electr\u00f3nico\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<!-- Description Above -->\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t<input id=\"yikes-easy-mc-form-1-EMAIL\"  name=\"EMAIL\"  placeholder=\"\"  class=\"yikes-easy-mc-email \"  required=\"required\" type=\"email\"  value=\"\">\n\n\t\t\t\t\t\t\t\t\t\t<!-- Description Below -->\n\t\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t<!-- Honeypot Trap -->\n\t\t\t\t<input type=\"hidden\" name=\"yikes-mailchimp-honeypot\" id=\"yikes-mailchimp-honeypot-1\" value=\"\">\n\n\t\t\t\t<!-- List ID -->\n\t\t\t\t<input type=\"hidden\" name=\"yikes-mailchimp-associated-list-id\" id=\"yikes-mailchimp-associated-list-id-1\" value=\"12407844c8\">\n\n\t\t\t\t<!-- The form that is being submitted! Used to display error\/success messages above the correct form -->\n\t\t\t\t<input type=\"hidden\" name=\"yikes-mailchimp-submitted-form\" id=\"yikes-mailchimp-submitted-form-1\" value=\"1\">\n\n\t\t\t\t<!-- Submit Button -->\n\t\t\t\t<button type=\"submit\" class=\"yikes-easy-mc-submit-button yikes-easy-mc-submit-button-1 btn btn-primary \"> <span class=\"yikes-mailchimp-submit-button-span-text\">Suscribirme<\/span><\/button>\t\t\t\t<!-- Nonce Security Check -->\n\t\t\t\t<input type=\"hidden\" id=\"yikes_easy_mc_new_subscriber_1\" name=\"yikes_easy_mc_new_subscriber\" value=\"8e8324b8a9\">\n\t\t\t\t<input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/blog\/wp-json\/wp\/v2\/posts\/168\" \/>\n\t\t\t<\/form>\n\t\t\t<!-- Mailchimp Form generated by Easy Forms for Mailchimp v6.8.10 (https:\/\/wordpress.org\/plugins\/yikes-inc-easy-mailchimp-extender\/) -->\n\n\t\t\t<\/section>\n\t\n","protected":false},"excerpt":{"rendered":"<p>Hey, hola qu\u00e9 tal,esta vez aprenderemos acerca de hacer una LANDING PAGE animada desde 0, la cual te ayudar\u00e1 a promocionar tu marca, producto o el servicio de tu cliente qu\u00e9 se ver\u00e1 sumamente genial est\u00e1 landing page en tu sitio web, te escribe Jordan Alexander de AlexCG Design y empezamos. Recuerda que como la [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":188,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,5],"tags":[23,25,24,26],"class_list":["post-168","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-tutorial","tag-crea-una-landing-page","tag-css","tag-html","tag-js"],"blocksy_meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Crea una LANDING PAGE animada desde 0 [HTML, CSS, JS] \u2714\ufe0f - AlexCG Design | Blog<\/title>\n<meta name=\"description\" content=\"Aprende a crear una fabolusa landing page para mejorar las ventas en linea, ofrecer productos, y m\u00e1s, CREALA AHORA est\u00e1 fabulosa landing page!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/alexcgdesign.com\/blog\/crea-una-landing-page-animada-desde-0-html-css-js\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Crea una LANDING PAGE animada desde 0 [HTML, CSS, JS] \u2714\ufe0f - AlexCG Design | Blog\" \/>\n<meta property=\"og:description\" content=\"Aprende a crear una fabolusa landing page para mejorar las ventas en linea, ofrecer productos, y m\u00e1s, CREALA AHORA est\u00e1 fabulosa landing page!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/alexcgdesign.com\/blog\/crea-una-landing-page-animada-desde-0-html-css-js\/\" \/>\n<meta property=\"og:site_name\" content=\"AlexCG Design | Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-16T15:05:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2019\/06\/Crea-una-landing-page-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"AlexCG Design\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"AlexCG Design\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/crea-una-landing-page-animada-desde-0-html-css-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/crea-una-landing-page-animada-desde-0-html-css-js\\\/\"},\"author\":{\"name\":\"AlexCG Design\",\"@id\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/#\\\/schema\\\/person\\\/276875e35617d7ad173cc8ca55f6837a\"},\"headline\":\"Crea una LANDING PAGE animada desde 0 [HTML, CSS, JS] \u2714\ufe0f\",\"datePublished\":\"2019-06-16T15:05:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/crea-una-landing-page-animada-desde-0-html-css-js\\\/\"},\"wordCount\":424,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/crea-una-landing-page-animada-desde-0-html-css-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/Crea-una-landing-page-1.png\",\"keywords\":[\"crea una landing page\",\"css\",\"html\",\"js\"],\"articleSection\":[\"Dise\u00f1o web\",\"Tutorial\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/crea-una-landing-page-animada-desde-0-html-css-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/crea-una-landing-page-animada-desde-0-html-css-js\\\/\",\"url\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/crea-una-landing-page-animada-desde-0-html-css-js\\\/\",\"name\":\"Crea una LANDING PAGE animada desde 0 [HTML, CSS, JS] \u2714\ufe0f - AlexCG Design | Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/crea-una-landing-page-animada-desde-0-html-css-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/crea-una-landing-page-animada-desde-0-html-css-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/Crea-una-landing-page-1.png\",\"datePublished\":\"2019-06-16T15:05:33+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/#\\\/schema\\\/person\\\/276875e35617d7ad173cc8ca55f6837a\"},\"description\":\"Aprende a crear una fabolusa landing page para mejorar las ventas en linea, ofrecer productos, y m\u00e1s, CREALA AHORA est\u00e1 fabulosa landing page!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/crea-una-landing-page-animada-desde-0-html-css-js\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/crea-una-landing-page-animada-desde-0-html-css-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/crea-una-landing-page-animada-desde-0-html-css-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/Crea-una-landing-page-1.png\",\"contentUrl\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/Crea-una-landing-page-1.png\",\"width\":1280,\"height\":720,\"caption\":\"Como crear una landing page animada\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/crea-una-landing-page-animada-desde-0-html-css-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Crea una LANDING PAGE animada desde 0 [HTML, CSS, JS] \u2714\ufe0f\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/\",\"name\":\"AlexCG Design | Blog\",\"description\":\"Crea y aprende a crear p\u00e1ginas web gratis, tutoriales de dise\u00f1o web AlexCG Design\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/#\\\/schema\\\/person\\\/276875e35617d7ad173cc8ca55f6837a\",\"name\":\"AlexCG Design\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/wp-content\\\/litespeed\\\/avatar\\\/b1dcad11f08c6042d4e73693e1658ba3.jpg?ver=1780649164\",\"url\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/wp-content\\\/litespeed\\\/avatar\\\/b1dcad11f08c6042d4e73693e1658ba3.jpg?ver=1780649164\",\"contentUrl\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/wp-content\\\/litespeed\\\/avatar\\\/b1dcad11f08c6042d4e73693e1658ba3.jpg?ver=1780649164\",\"caption\":\"AlexCG Design\"},\"url\":\"https:\\\/\\\/alexcgdesign.com\\\/blog\\\/author\\\/jordanalexandercg99\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Crea una LANDING PAGE animada desde 0 [HTML, CSS, JS] \u2714\ufe0f - AlexCG Design | Blog","description":"Aprende a crear una fabolusa landing page para mejorar las ventas en linea, ofrecer productos, y m\u00e1s, CREALA AHORA est\u00e1 fabulosa landing page!","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:\/\/alexcgdesign.com\/blog\/crea-una-landing-page-animada-desde-0-html-css-js\/","og_locale":"es_ES","og_type":"article","og_title":"Crea una LANDING PAGE animada desde 0 [HTML, CSS, JS] \u2714\ufe0f - AlexCG Design | Blog","og_description":"Aprende a crear una fabolusa landing page para mejorar las ventas en linea, ofrecer productos, y m\u00e1s, CREALA AHORA est\u00e1 fabulosa landing page!","og_url":"https:\/\/alexcgdesign.com\/blog\/crea-una-landing-page-animada-desde-0-html-css-js\/","og_site_name":"AlexCG Design | Blog","article_published_time":"2019-06-16T15:05:33+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2019\/06\/Crea-una-landing-page-1.png","type":"image\/png"}],"author":"AlexCG Design","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"AlexCG Design","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/alexcgdesign.com\/blog\/crea-una-landing-page-animada-desde-0-html-css-js\/#article","isPartOf":{"@id":"https:\/\/alexcgdesign.com\/blog\/crea-una-landing-page-animada-desde-0-html-css-js\/"},"author":{"name":"AlexCG Design","@id":"https:\/\/alexcgdesign.com\/blog\/#\/schema\/person\/276875e35617d7ad173cc8ca55f6837a"},"headline":"Crea una LANDING PAGE animada desde 0 [HTML, CSS, JS] \u2714\ufe0f","datePublished":"2019-06-16T15:05:33+00:00","mainEntityOfPage":{"@id":"https:\/\/alexcgdesign.com\/blog\/crea-una-landing-page-animada-desde-0-html-css-js\/"},"wordCount":424,"commentCount":0,"image":{"@id":"https:\/\/alexcgdesign.com\/blog\/crea-una-landing-page-animada-desde-0-html-css-js\/#primaryimage"},"thumbnailUrl":"https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2019\/06\/Crea-una-landing-page-1.png","keywords":["crea una landing page","css","html","js"],"articleSection":["Dise\u00f1o web","Tutorial"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/alexcgdesign.com\/blog\/crea-una-landing-page-animada-desde-0-html-css-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/alexcgdesign.com\/blog\/crea-una-landing-page-animada-desde-0-html-css-js\/","url":"https:\/\/alexcgdesign.com\/blog\/crea-una-landing-page-animada-desde-0-html-css-js\/","name":"Crea una LANDING PAGE animada desde 0 [HTML, CSS, JS] \u2714\ufe0f - AlexCG Design | Blog","isPartOf":{"@id":"https:\/\/alexcgdesign.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/alexcgdesign.com\/blog\/crea-una-landing-page-animada-desde-0-html-css-js\/#primaryimage"},"image":{"@id":"https:\/\/alexcgdesign.com\/blog\/crea-una-landing-page-animada-desde-0-html-css-js\/#primaryimage"},"thumbnailUrl":"https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2019\/06\/Crea-una-landing-page-1.png","datePublished":"2019-06-16T15:05:33+00:00","author":{"@id":"https:\/\/alexcgdesign.com\/blog\/#\/schema\/person\/276875e35617d7ad173cc8ca55f6837a"},"description":"Aprende a crear una fabolusa landing page para mejorar las ventas en linea, ofrecer productos, y m\u00e1s, CREALA AHORA est\u00e1 fabulosa landing page!","breadcrumb":{"@id":"https:\/\/alexcgdesign.com\/blog\/crea-una-landing-page-animada-desde-0-html-css-js\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/alexcgdesign.com\/blog\/crea-una-landing-page-animada-desde-0-html-css-js\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/alexcgdesign.com\/blog\/crea-una-landing-page-animada-desde-0-html-css-js\/#primaryimage","url":"https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2019\/06\/Crea-una-landing-page-1.png","contentUrl":"https:\/\/alexcgdesign.com\/blog\/wp-content\/uploads\/2019\/06\/Crea-una-landing-page-1.png","width":1280,"height":720,"caption":"Como crear una landing page animada"},{"@type":"BreadcrumbList","@id":"https:\/\/alexcgdesign.com\/blog\/crea-una-landing-page-animada-desde-0-html-css-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/alexcgdesign.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Crea una LANDING PAGE animada desde 0 [HTML, CSS, JS] \u2714\ufe0f"}]},{"@type":"WebSite","@id":"https:\/\/alexcgdesign.com\/blog\/#website","url":"https:\/\/alexcgdesign.com\/blog\/","name":"AlexCG Design | Blog","description":"Crea y aprende a crear p\u00e1ginas web gratis, tutoriales de dise\u00f1o web AlexCG Design","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/alexcgdesign.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/alexcgdesign.com\/blog\/#\/schema\/person\/276875e35617d7ad173cc8ca55f6837a","name":"AlexCG Design","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/alexcgdesign.com\/blog\/wp-content\/litespeed\/avatar\/b1dcad11f08c6042d4e73693e1658ba3.jpg?ver=1780649164","url":"https:\/\/alexcgdesign.com\/blog\/wp-content\/litespeed\/avatar\/b1dcad11f08c6042d4e73693e1658ba3.jpg?ver=1780649164","contentUrl":"https:\/\/alexcgdesign.com\/blog\/wp-content\/litespeed\/avatar\/b1dcad11f08c6042d4e73693e1658ba3.jpg?ver=1780649164","caption":"AlexCG Design"},"url":"https:\/\/alexcgdesign.com\/blog\/author\/jordanalexandercg99\/"}]}},"_links":{"self":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/comments?post=168"}],"version-history":[{"count":15,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/168\/revisions"}],"predecessor-version":[{"id":192,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/168\/revisions\/192"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media\/188"}],"wp:attachment":[{"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/media?parent=168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/categories?post=168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/tags?post=168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}