Tutorial de Corazón Latiendo con Html y Css 

Muchísimas gracias Domenica y me alegro un montón que te haya servido el tutorial , seguramente le va a encantar el regalo . Feliz cumple para tu novio 🙂

Muchísimas gracias Alexander, abrazo grande y a seguir aprendiendo juntos amigo . 💪.

Gracias Amigo por mirar , abrazo grande Bro

Abrazo Bro para ti y tu hija desde Argentina

Saludos hermano

Muchísimas gracias danivigs

Yo tambien hermano

Muchas gracias amigo , aquí abajo te lo dejo así lo puedes modificar bro. corazonlatiendo body{ margin:0; padding:0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0b1522; } .heart { height: 150px; width: 150px; background-color:red; position: relative; transform: rotate(45deg); box-shadow: -20px 20px 150px #f20044; animation: palpitar 0.5s linear infinite alternate; } .contenido { position: fixed; margin-bottom: 50px; text-align: center; } h1 { color: white } h2 { color : white } @keyframes palpitar{ 0%{ transform: rotate(45deg) scale(1.10); } 80%{ transform: rotate(45deg) scale(1.0); } 100%{ transform: rotate(45deg) scale(0.8); } } .heart::before{ content: ""; position: absolute; height: 150px; width: 150px; background: red; top: -50%; border-radius: 50%; box-shadow: 10px 20px 150px #f20044; } .heart::after{ content: ""; position: absolute; height: 150px; width: 150px; background: red; right: 50%; border-radius: 50%; box-shadow: 20px 20px 150px #f20044; } Te AmoCintia Melisa

@@arteencode1575 Muchas gracias bro!!!! Te agradesco un montonazo me re ayudan tus tuto 👍👏🙌

Muchas gracias Rodo , te recomendaría que por el principio arranques por html y css que muchos lo pasan por alto pero te aseguro que están presentes en todos los sitios y aplicaciones web del mundo , son la columna vertebral, y una vez que entiendas bien como funcionan ahí si meterte en otro lenguaje de programación, te recomendaría Javascript que es el más demandado actualmente y una vez dentro puedes migrar para el que te sea más útil. Html css y Javascript bien aprendido y te va a sobrar el trabajo . Abrazo bro

@@arteencode1575 wow, muchas gracias por tu apoyo. Eso haré! Y excelente canal!

Tenes que descargar un editor de códigos, puede ser cualquiera , personalmente uso Visual Studio Code

Hola Bro , debe haber algún error de sintaxis, fíjate en los comentarios más abajo copié el código entero . Podes copiarlo y pegarlo y cambiarle los nombres . Abrazo grande

Debe haber algún error de sintaxis en la vinculación , fíjate bien como se llama el archivo , que no te falte algún punto o barra , gracias por ver

Obvio papa , se te enamora por el resto de la eternidad 😉

Bro Netbeans es un entorno de desarrollo casi exclusivo de Java . Te recomendaría que lo hagas en Visual Studio code o sublime tex . Abrazo Bro

Con un margin left o right

Tenes que subir el archivo principal a alguna nube , yo uso Googel Drive , luego le cambias la configuracion haciendo click derecho en el archivo y cambias de "RESTRINGIDO" a "CUALQUIERA QUE ONTENGA EL ENLACE", una vez echo ese paso te vas a Drive To Web ( www.drv.tw ) , seleccionas la nube ( Drive ) y automaticamente se te abre el enlace y lo podes compartir por cualquier lado , gracias por ver Bro , abrazo

Esas etiquetas meta , incluyen metadatos . Sinceramente si no las escribes no pasa nada, el código se ejecuta igual . Gracias por ver el video . Saludos desde Argentina.

En unos comentarios más abajo esta el código completo del video

Debe haber algún error de sintaxis en la parte del @keyframes o fijate bien si escribiste el nombre de la animación. Cualquier cosa te paso el código completo. Gracias por la suscripción Bro.

@@arteencode1575 bro me lo puedes pasar a mi no me palpita nuevo seguidor desde República Dominicana

@@Dalb3rg Muchas gracias amigo por seguirme , abrazo grande desde Argentina , aqui abajo te dejo el codigo pegado en un comentario , copialo y pegalo , debe haber algun error en la sintaxis en la parte de la animacion , copialo y pegalo y cambiale el nombre jaja

corazonlatiendo body{ margin:0; padding:0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0b1522; } .heart { height: 150px; width: 150px; background-color:red; position: relative; transform: rotate(45deg); box-shadow: -20px 20px 150px #f20044; animation: palpitar 0.5s linear infinite alternate; } .contenido { position: fixed; margin-bottom: 50px; text-align: center; } h1 { color: white } h2 { color : white } @keyframes palpitar{ 0%{ transform: rotate(45deg) scale(1.10); } 80%{ transform: rotate(45deg) scale(1.0); } 100%{ transform: rotate(45deg) scale(0.8); } } .heart::before{ content: ""; position: absolute; height: 150px; width: 150px; background: red; top: -50%; border-radius: 50%; box-shadow: 10px 20px 150px #f20044; } .heart::after{ content: ""; position: absolute; height: 150px; width: 150px; background: red; right: 50%; border-radius: 50%; box-shadow: 20px 20px 150px #f20044; } Te AmoCintia Melisa

Podes compartir el archivo index.html . O guardarlo en el Google drive , cambiar la opción a público y compartir el enlace 🔗

Visual studio code . Gracias por mirar Bro

En el código la llame "palpitar" . Pero le puedes poner el nombre que quieras. Animation : palpitar ; @Keyframes palpitar { CÓDIGO DE LA ANIMACIÓN }. Abrazo Bro

Ponelo todo en un mismo grupo

Hola Crack solo un editor de códigos , te recomiendo visual studio code

corazonlatiendo body{ margin:0; padding:0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0b1522; } .heart { height: 150px; width: 150px; background-color:red; position: relative; transform: rotate(45deg); box-shadow: -20px 20px 150px #f20044; animation: palpitar 0.5s linear infinite alternate; } .contenido { position: fixed; margin-bottom: 50px; text-align: center; } h1 { color: white } h2 { color : white } @keyframes palpitar{ 0%{ transform: rotate(45deg) scale(1.10); } 80%{ transform: rotate(45deg) scale(1.0); } 100%{ transform: rotate(45deg) scale(0.8); } } .heart::before{ content: ""; position: absolute; height: 150px; width: 150px; background: red; top: -50%; border-radius: 50%; box-shadow: 10px 20px 150px #f20044; } .heart::after{ content: ""; position: absolute; height: 150px; width: 150px; background: red; right: 50%; border-radius: 50%; box-shadow: 20px 20px 150px #f20044; } Te AmoCintia Melisa 😂😂😂😂

Fercho en los comentarios más arriba esta el código completo. Abrazo Bro

Debe haber algún error de sintaxis en la animación seguramente. Más abajo en los comentarios tenes el código por si lo queres copiar

Si amigo . Fijate en los comentarios más arriba

Lo encontraste 😢?

Hola Bro . En un comentario más abajo tenes el código completo. Podes copiarlo y pegarlo en tu editor . Gracias por ver

Hola Luis , sisi , fíjate más abajo en los comentarios deje el código para copiar y pegar

No sale el código bro

Es como una costumbre , el selector * selecciona absolutamente todos los elementos de tu documento, por lo tanto todos tus elementos tienen un padding y margin de 0, no obstante no quiere decir que no pueda ser cambiado por otro valor, pero por defecto tienen ese estilo. Gracias ELIAS por ver el video