{"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\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/26a0.svg\" alt=\"\u26a0\ufe0f\" \/><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/270b.svg\" alt=\"\u270b\" \/>\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\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/1f447.svg\" alt=\"\ud83d\udc47\" \/><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/1f447.svg\" alt=\"\ud83d\udc47\" \/><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/1f447.svg\" alt=\"\ud83d\udc47\" \/><\/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\" 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><\/iframe><\/p>\n<p>&nbsp;<\/p>\n<h3>Recursos usados para crear el proyecto:<\/h3>\n<p><img decoding=\"async\" class=\"emoji\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f4cc.svg\" alt=\"\ud83d\udccc\" \/> 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\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f4cc.svg\" alt=\"\ud83d\udccc\" \/> 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\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f4cc.svg\" alt=\"\ud83d\udccc\" \/> 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\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f4cc.svg\" alt=\"\ud83d\udccc\" \/> 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\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/12.0.0-1\/svg\/1f4cc.svg\" alt=\"\ud83d\udccc\" \/> 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\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/1f53b.svg\" alt=\"\ud83d\udd3b\" \/>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\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/2615.svg\" alt=\"\u2615\ufe0f\" \/>\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\" draggable=\"false\" src=\"https:\/\/s.w.org\/images\/core\/emoji\/11.2.0\/svg\/1f381.svg\" alt=\"\ud83c\udf81\" \/>\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=\"5bd84c6c3d\">\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":[],"_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":0,"href":"https:\/\/alexcgdesign.com\/blog\/wp-json\/wp\/v2\/posts\/168\/revisions"}],"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}]}}