Suscríbete ✅ para más vídeos tutoriales de proyectos web 💻 ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: 🌐 Visita mi sitio web para más recursos 👇🏻: - bit.ly/sleedw 📱 Únete a nuestra comunidad en WhatsApp y comparte tus proyectos o dudas que tengas 👇🏻: - bit.ly/sleedw-grupo-whatsapp 🔵 Síguenos en Facebook 👇🏻: - bit.ly/face-oficial-sleedw ▶ Saludos y que Dios te bendiga. 🙌
Para que sea responsive design: En la clase container, están estás propiedades: Width: 100%; Display: Flex; Max-width: 1100px; Agregan: flex-wrap: wrap; Para que sea responsive design
@@juansolorzano8486 si bro, pero la mayoría de personas que ven este video hasta ahora comienzan (Aclaro que no soy un experto, ni se mucho)🤷 y sí de les dice que hay que aplicar grid, PS no sabrán cómo hacerlo en todo, por qué casi todo se guiarán por el vídeo XD
Hola, muchas gracias por tu comentario, nos alegra muchísimo saber que estamos ayudando a muchas personas con nuestro contenido.. Saludos y Dios te bendiga 🙌💻
Hola, muchas gracias por su comentario, para que las demás tarjetas se posicionen hacia abajo debe agregarle al contenedor una propiedad de CSS que es: flex-wrap:wrap; Saludos y bendiciones.
Me gustó mucho tu vídeo, tal vez un poco más lento para mí jaja ... Me suscribire, pero porfa necesito saber cómo cambiar el espacio entre las tarjetas...
Hola Marco, gracias por comentar, y que bueno que te gusto nuestro video tutorial 💻🙌, y claro qué si, nuestro sitio web es sleedw.ga , Saludos y Éxitos Crack..💻
Hola,perdón una pregunta, ¿como puedo hacer que para que lo que yo agregue aparezca encima de eso o por de bajo? Es que agregó cosas que me faltan y se pone a un lado 😭😭
Buen tuto, pero bro ayudame, lo que pasa es que mi container no se alinea esta uno sobre otro y asi y reviso y reviso y todo esta igual al tuyo que puede ser
hola bro una consulta como puedo hacer para que se vayan acomodando hacia abajo? pasa que coloco mas imágenes pero solo quedan hacia el costado y no se acomodan en auto
Excelente video. Una pregunta, ¿como haces para que el texto quede justo dentro del espacio, y no se salga y quede oculto con por la propiedad overflow: hidden;?
Hola, muchas gracias por tu comentario. Respecto a tu pregunta. Para que el texto no se salga de su elemento padre (card). Se genera automáticamente unas dimensiones (ancho y alto) a las cards, ya que le hemos agregado un diplay flex, para que sean cajas flexibles y de esa forma respentando el ancho de cada cards, simple y sencillamente.. le agregamos un relleno y un margen para que no estén juntas las cards. Saludos y Bendiciones 🙌💻
Hola, muchas gracias por tu comentario, te compartiré el link de este proyecto web, para que lo compares con tu proyecto -> sleedweb.ga/cardshover , Saludos y Dios te bendiga..
Hola Scarlen, gracias por comentar, respecto a tu pregunta, este proyecto web (Cards-Tarjetas efecto hover) las tres tarjetas deben estar una al lado de la otra, en una posición "horizontal" (que es lo correcto), más no están en vertical (linea recta), me gustaría saber más detalladamente tu problema con el proyecto para ayudarte correctamente☺💻.. Saludos y Éxitos...🙌👍
@@scarlenmenacastillo9827 Claro me puedes contactar por el Facebook de SLee Dw que está en la descripción y en el primer comentario, o también por el grupo de WhatsApp (SLee Dw), que te estaré dejando en este enlace si gustas unirte, y consultar tus dudas de cualquier proyecto web.👉 chat.whatsapp.com/Bq9yPZMPqZ3FNt8BRCbyi8 Saludos y Éxitos🙌💻
siempre que intento replicar estos ejemplos a mi la medidas me salen bien raras a pesar de que sigo todo al pie de la letra y al final termino yo haciendo mis medidas y cambiando algo pero muy buenos videos me das nuevas ideas con lo que enseñas
Hola amigo, Lo puedes hacer con las propiedades de display grid , junto con sus propiedades de grid-template-columms solo que no le agregarias a tu container display:flex; usa grid pero te aseguro que si lo haces bien te saldrá mucho mas fácil Saludos.
Bro has esto En la clase container, están estás propiedades: Width: 100%; Display: Flex; Max-width: 1100px; Agregan: flex-wrap: wrap; Para que sea responsive design
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
Suscríbete ✅ para más vídeos tutoriales de proyectos web 💻
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
🌐 Visita mi sitio web para más recursos 👇🏻:
- bit.ly/sleedw
📱 Únete a nuestra comunidad en WhatsApp y comparte tus proyectos o dudas que tengas 👇🏻:
- bit.ly/sleedw-grupo-whatsapp
🔵 Síguenos en Facebook 👇🏻:
- bit.ly/face-oficial-sleedw
▶ Saludos y que Dios te bendiga. 🙌
Lo que casi todos lo hacen ver complicado, lo explicaste súper simple y bien. Felicidades por tan buen contenido. Éxitos.
Muchas gracias por tu comentario. Saludos cordiales.
nose que será de tu vida amigo pero este video es lo mejor que he visto, espero que andes bien. saludos desde Argentina
Muchas gracias. Estaré subiendo más videos la semana entrante. Saludos cordiales
Mi hermano!!! Me salvaste la vida con tu explicacion. Millones de gracias!!!!!!!
Excelente el tutorial, es el único video que me ha explicado a detalle y con buen ritmo cómo hacer unas cards. Saludos desde Panamá!
Hola, muchas gracias por tu comentario. Saludos y Bendiciones 🙌💻
Para que sea responsive design:
En la clase container, están estás propiedades:
Width: 100%;
Display: Flex;
Max-width: 1100px;
Agregan: flex-wrap: wrap;
Para que sea responsive design
Mas eficiente es trabajar con grid
@@juansolorzano8486 si bro, pero la mayoría de personas que ven este video hasta ahora comienzan (Aclaro que no soy un experto, ni se mucho)🤷 y sí de les dice que hay que aplicar grid, PS no sabrán cómo hacerlo en todo, por qué casi todo se guiarán por el vídeo XD
@@hayvervargas3671 gracias por tu aporte, me gusta tu punto de vista con respecto a los que ven el video .
Muy buen punto, solo una duda, si el contenedor por defecto ocupa el 100% porque debemos agregar esta propiedad si de por si la tiene el elemento Div.
héroe sin capa🦸♂🦸♂🦸♂
oye, eres muy bueno explicando. necesitaba esto para poder terminar mi sitio web. eres el mejor!!
Muchas gracias por tu comentario, me alegra muchísimo a ver ayudado en algo, Suerte y Éxitos💻🙌
Si es verdad eres el mejor
@@ruthtobaar7915 Hola muchas gracias por tu comentario, Saludos y Dios te bendiga.
Disculpen, son comentarios de mi hijo que le gusta ver tutoriales y anda enfocado en html, css, angular. Tiene 10 años pero una ortografia jejejeje.
@@SLeeDw Amén igual para ti, mi hijo ve mucho sus videos
Muchas gracias, excelente tu explicación y el ejemplo. Tiene varias cosas novedosas además de prácticas. Saludos!
@@caroweb muchas gracias. Saludos
Este ya es el segundo video que me ayuda con mis trabajos, muchas gracias
Me alegra mucho a ver ayudado. Saludos
Excellent tutorial gracias por su tiempo que usted da a los lectores
Muchas gracias. Saludos
Muchas gracias por este tutorial y el material que se encuentra en tu sitio. Agradezco el tiempo que inviertes para compartir tus conocimientos
Muchas gracias a ti por el apoyo, Saludos y Dios lo bendiga
Estoy aprendiendo y de verdad muy agradecida! me quedo claro todo y porqué debo usar cada cosa :D
Excelente . . . repito . . . excelente . . . gracias por compartir tan valioso conocimiento 👏👏👏
Tu forma de explicar cada paso es genial.
Gracias 😘
Hola, muchas gracias por tu comentario, nos alegra muchísimo saber que estamos ayudando a muchas personas con nuestro contenido.. Saludos y Dios te bendiga 🙌💻
Excelente, gracias
Eres el mejor👏🏻👏🏻👏🏻
fuiste mi salvación el día de hoy, muchas gracias por tu contenido
Muchas gracias por tu comentario. Saludos y bendiciones💻🙌
parce, muy muy útil este tutorial ,seguí sacando mas cositas así excelente!!!
Hola amigo, muchas gracias por el comentario y el apoyo, Saludos y que Dios te bendiga 💻🙌
saludos, sus tutoriales están claros y muy creativos, lo mejor
Wow hermano explicas muy bien, sigue asi le entendi muy bien, andaba buscando un contenido asi. Ya me suscribí
Hola amigo programador, muchas gracias po tu comentario y por tu suscripción, Saludos y Dios te bendiga💻🙌
Excelente, gracias por compartir tus conocimientos.
Muchas gracias por tu comentario. Saludos y Bendiciones 💻🙌
De verdad muchas gracias me ayudó bastante ahora puedo hacer más bonitas mis tareas 😊
Hola, muchas gracias por tu comentario, Saludos y bendiciones 💻🙌
Eres muy bueno explicando¡¡ me suscribí ya que me estas ayudando mucho con una asignatura de programacion ^^
me sirvió un monton, quisier mas videos asi de transiciones :D
Hola, muchas gracias por tu comentario, estaremos próximamente subiendo más videos de este tipo, ¡No te los pierdas!, Saludos y Dios te bendiga💻🙌
Debe tener 100K de suscriptores mínimo!
Muchas gracias por el apoyo. Saludos y Bendiciones 🙌💻
@@SLeeDw bendiciones para ti, ojalá que puedas crecer mucho!
Mas personas como tu!!!
Thank you for the presentation and I use your card for my portfolio.
quedó muy bien. suscrito
Graciassss
Muchas gracias por tu comentario. Saludos y Bendiciones 🙌💻
Tremendo tutorial bro, gracias
Hola, muchas gracias por tu comentario, Saludos y bendiciones 🙌💻
Gracias bro, me ayudaste
Muy pero muy bueno 👏🏻👏🏻 muchas gracias
Gracias capo! me sirvió mucho!
Buen video broo
excelente explicacion!
tu mouse me da ansiedad pero en general me gusto tu video
gracias papi sos crack
De nada estimado. Saludos
Muy buen video! Me sacaste de un apuro brother! 👍🏽
GRACIAS ME SALVASTE
mi proyecto de computacion es esto
basicamente
Excelente aporte bro. Sigue adelante, y exitos en la vida !!!
Que buen video amigo!!!!
Muchas gracias. Saludos
TE AMO.
Gracias bro, me salvaste
De nada bro.. Muchas gracias por comentar..😎
Saludos y Éxitos..
parceee muy buen video y me gusta que expliques para qué es cada cosa.
Gracias.
SOOOOOS UN CRACK !!!!
Gracias explicas muy buen
Viejo tu usas la etiqueta figure por semantica ? O es por algo en especifico ? Muy bueno tu video
Muchas gracias me sirvio para mi proyecto pero me gustaria saber como puedo añadir otras 3 tarjetas abajo de las que ya se realizaron?
Hola, muchas gracias por su comentario, para que las demás tarjetas se posicionen hacia abajo debe agregarle al contenedor una propiedad de CSS que es: flex-wrap:wrap;
Saludos y bendiciones.
Excelente, bro!
Que bonito!!! 🎉🎉🎉🎉🎉
Me gustó mucho tu vídeo, tal vez un poco más lento para mí jaja ... Me suscribire, pero porfa necesito saber cómo cambiar el espacio entre las tarjetas...
Una consulta y como se haria una tarjeta o imqgen que cuando el mouse lo mira o lo tiene mirado salta una sombra y texto
Buen video, tengo una duda, ¿como puedo ubica una tarjeta debajo de otra?
Creo que primero tendrias que hacer que las cards sean cajas flexibles (display: flex) y alinearlas verticalmmente con flex-direction: column
Excelente lo que nos compartes, me gustó mucho, bien explicado, lo aplicaré en mi sitio. ¿Tienes alguna página para seguirte? Saludos
Hola Marco, gracias por comentar, y que bueno que te gusto nuestro video tutorial 💻🙌, y claro qué si, nuestro sitio web es sleedw.ga , Saludos y Éxitos Crack..💻
y si quiero poner mas cards abajo, como haria?
Solo copias y pegas el código de la carta
¡Muchas gracias!
Hola,perdón una pregunta, ¿como puedo hacer que para que lo que yo agregue aparezca encima de eso o por de bajo? Es que agregó cosas que me faltan y se pone a un lado 😭😭
hola tengo la misma duda si encontraste la solucion te agradecería que me la compartas
gracias amor yo tenia otro problema y me faltaba cambiar img por .card para que no me afectara a todas las img xd
Gracias por este video, me ayudó muchísimo ❤️
Tome su like buen hombre
muy bueno de gran ayuda, tb por bootstrap se podría lograr el mismo efecto?
Claro que sí.
sos un crak papa me salvaste la vida like y sub por el link
Hola, muchas gracias por el apoyo a éste canal. Saludos y Bendiciones 🙌💻
bueno amigo me inspiro algo para un proyecto en mente que tengo gracias por el aporte bendiciones te ganaste suscriptor
Buen tuto, pero bro ayudame, lo que pasa es que mi container no se alinea esta uno sobre otro y asi y reviso y reviso y todo esta igual al tuyo que puede ser
super bien explicado
GRACIAS AMIGO
Es un placer ayudar. Saludos
hola bro una consulta como puedo hacer para que se vayan acomodando hacia abajo? pasa que coloco mas imágenes pero solo quedan hacia el costado y no se acomodan en auto
x2
¿Cómo hago para que las cards me queden alienados horizontalmente? Hice todo y están en posición vertical, una arriba de la otra 😢
ah me pasa lo mismo
Excelente video. Una pregunta, ¿como haces para que el texto quede justo dentro del espacio, y no se salga y quede oculto con por la propiedad overflow: hidden;?
Hola, muchas gracias por tu comentario. Respecto a tu pregunta. Para que el texto no se salga de su elemento padre (card). Se genera automáticamente unas dimensiones (ancho y alto) a las cards, ya que le hemos agregado un diplay flex, para que sean cajas flexibles y de esa forma respentando el ancho de cada cards, simple y sencillamente.. le agregamos un relleno y un margen para que no estén juntas las cards. Saludos y Bendiciones 🙌💻
5 PALABRAS: CRACK
Pero ahí es una palabra xd
Muy buen video c:
HGracias bro me sirvio, pero necesito hacerlo en columnas es decir una fila 3 con 2 columnas
como podria mostrar los articulos de una base de datos con el efecto de cards que se genere automaticamente con el siguiente articulo que ingrese?
Gracias por el video, ya me estoy estresando jaja hago todo igual y me quedan una debajo de la otra
Intenta poner en css
. container
Colums=3;
Buen video!
Pero una pregunta a mi las tablas me salen en un solo lado, las quiero en el centro como hago?
alguien sabe como ponerlas debajo en vez de al lado?
Como le hizo para que todas las imagenes se hicieran al mismo tiempo?
Me funcionó de maravilla, pero como puedo agregar más de 3 imágenes y que haya un boton de siguiente como tipo carrusel?
Tendrás que crear un botón y a ese ponerle href. Y luego a en esa otra "página" haces más tarjetas
Los píxeles de las imágenes no influyen? Lo hice y se ven mal… no sé si es porque son muy grandes
hola ,tengo un problema me aparece las card de manera vertical y no horizontal que puedo hacer?
Hola, muchas gracias por tu comentario, te compartiré el link de este proyecto web, para que lo compares con tu proyecto -> sleedweb.ga/cardshover , Saludos y Dios te bendiga..
Thanks bro!
SLee Dw hola tengo un problema y es que en ves de estar vertical me aparece horizontal que crees que puedo hacer
Hola Scarlen, gracias por comentar, respecto a tu pregunta, este proyecto web (Cards-Tarjetas efecto hover) las tres tarjetas deben estar una al lado de la otra, en una posición "horizontal" (que es lo correcto), más no están en vertical (linea recta), me gustaría saber más detalladamente tu problema con el proyecto para ayudarte correctamente☺💻..
Saludos y Éxitos...🙌👍
@@scarlenmenacastillo9827 Claro me puedes contactar por el Facebook de SLee Dw que está en la descripción y en el primer comentario, o también por el grupo de WhatsApp (SLee Dw), que te estaré dejando en este enlace si gustas unirte, y consultar tus dudas de cualquier proyecto web.👉 chat.whatsapp.com/Bq9yPZMPqZ3FNt8BRCbyi8
Saludos y Éxitos🙌💻
UN CRACK
Como hago para que quede responsive?
toma tu like
nuevo sub >D
¿Cómo puedo hacer las tarjetas pero en el bloc de notas?
Me gustaría pedirte si puedes hacer un vídeo donde expliques como hacer un carousel de imágenes tipo Netflix o al menos responsive...
.container{
width: 100%;
display: flex;
max-width: 1100px;
}
.card{
width: 100%;
height: 50%;
margin: 20px;
border-radius: 6px;
overflow: hidden;
background: #fff;
box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2);
}
siempre que intento replicar estos ejemplos a mi la medidas me salen bien raras a pesar de que sigo todo al pie de la letra y al final termino yo haciendo mis medidas y cambiando algo pero muy buenos videos me das nuevas ideas con lo que enseñas
Muchas gracias por tu comentario, saludos y bendiciones
como colocar texto o imagenes dentro del cards
Disculpa hasta se pone body ? No me quedo claro
una pregunta de cuantos pixeles son las imagenes porque se me bugeo todo XD
Excelente, deberías de hacer un vídeo de como hacerlas responsive.
x2
x3
x4
como puedo hacer para que queden de 2 en 2 al ponerlo en modo celular?
Hola amigo, Lo puedes hacer con las propiedades de display grid , junto con sus propiedades de grid-template-columms solo que no le agregarias a tu container display:flex; usa grid pero te aseguro que si lo haces bien te saldrá mucho mas fácil Saludos.
Bro has esto
En la clase container, están estás propiedades:
Width: 100%;
Display: Flex;
Max-width: 1100px;
Agregan: flex-wrap: wrap;
Para que sea responsive design
Espero no sea muy tarde xd. Y por supuesto haber ayudado
@@hayvervargas3671 ya lo resolví hace meses pero gracias por responder
@@yuskekurusaki6563 con gusto bro.
el transform no me quiere funcionar :(
ayudaaaaa no se me cambian el tamaño de las imagnes
:c
Porque no me muestra las imágenes