Animated Profile Card UI Design using Html & CSS

[@EXPERIMENTSHOW.]

thank u soooooooooooooooooooooooooooooooooooooooo much bro. LOVE FROM INDIA

[@alexvaper5625]

Thank you very much, for the excellent work, for the efforts invested, for the time and effort spent usefully for the cause. For persistent efforts and dedication to your work, for a creative approach and an effective result! I wish you to continue your work in the same spirit!

[@OnlineTutorialsYT]

You are welcome!

[@pelasgian1454]

always the indian people teaching us nice stuff. Thanks for that!

[@roshandongare186]

Hats off to your imaginations and the implementations of the same. Thank you so much a great work. It inspires us.

[@farukweb]

Nice card UI .

[@noor_63]

Thank you very much, for the excellent work but how to download this animation card please reply me

[@suraj-se5ne]

Bhai jagab ka talent hai

[@voaneves]

Bro, you are a king! Thanks for the excellent work, everything you're doing is really great for us devs.

[@Mitrezir]

Hello my friend. First of all, let me say that it is a very good work. I had a question. The image filter color was changing when the cursor was on the image when the project was finished. But you didn't show it in the tutorial.

[@codewithhira4421]

Check it on 8:36 he applied the grayscale filter

[@Mitrezir]

Yes, but the grayscale filter would revert to its original color when the cursor was hovered over the input photo. In the end, he didn't or forgot.

[@DarkArly]

@@Mitrezir look 16 comments after - Amr Magdi Mustapha, it works !

[@ashwinink]

I cant find this on Online tutorials. I did exactly the same but I am not able to see it. Can you help

[@tradinglibrarystation]

code for image recolor when hover: .card:hover .imgbx img { filter: none; }

[@claude.oberko]

what was the dimension of the photo

[@ramonguerra5655]

Thanks

[@claude.oberko]

what was the dimension of the photo?

[@pink-doublethink]

*Thanks* for the interesting content!

[@OnlineTutorialsYT]

Glad you enjoyed it!

[@BARRYOME]

Cool👍

[@RajKumar-hi6bc]

Bro how you make it I hope i am learning from you it's awesome but sad part is when I try to add something i soils everything

[@OnlineTutorialsYT]

How can I help you?

[@RajKumar-hi6bc]

@@OnlineTutorialsYT bro in your dynamic login form password showing eye was not there somo how I get it in place but transition effects not working properly that login form you show in initial part of video thanks for reply

[@wisalahmad2077]

Sir this really amazing 😍

[@Crjunior2024]

I was copy that but doesn't work and your which one side coding and another side was result give a tutorial video and which extension give full tutorial video plzzz

[@nahidulislamsagorsrk8469]

YOU ARE LEGEND 😍😍

[@sdfsfsfd437]

Awesome!!!! Many thanks!

[@OnlineTutorialsYT]

No worries!

[@hakunamatata1427]

Please suggest course of html and css for me, dude I really wanna know how you got magic in your hands..!

[@saurabhpandey8020]

He himself offers courses on udemy

[@ngfrompakistan]

1.Code with harry 2. Apna college

[@bdbrothersltd7055]

Just wash your hand by Dettol.

[@ngfrompakistan]

@@bdbrothersltd7055 😂

[@hakunamatata1427]

@@bdbrothersltd7055 I hope it worked for you..! 🤭

[@josedanielmendoza2305]

asombroso ..... saludos desde Bolivia

[@Cyber_Madhuwa]

wow..!!!❤️

[@alifkhan6533]

Bro the hover effect of height doesn't working

[@hengamehvalizadeh4484]

amazing toturial...thank you very much boddy 👏👏

[@Crjunior2024]

Same try but no result

[@emmanuelisunuoya8999]

Wow so awesome pls can you make another phone website

[@ashikeshan1529]

Excellent like always. What's the name of the music ?

[@thierrycouffinhal7081]

GREAT !

[@dingg9842]

Link ?

[@ilovejesus.100]

where link 😢

[@markzait2750]

Very useful video! Thanks!

[@OnlineTutorialsYT]

Glad it was helpful!

[@claude.oberko]

what was the dimension of the photo

[@gnomol]

Perfect, thank you.

[@hellenicpirate3050]

that's wonderfull , exciting at the same time!!

[@batmanlovepu]

When you edit in VS Studio code. What browser do you use for realtime display? Thank you.

[@DiegoCurbelo]

npm i -g live-server

[@batmanlovepu]

@@DiegoCurbelo Thank you

[@claude.oberko]

@@DiegoCurbelo what was the dimension of the photo

[@Wake_up_to_reality_143]

Live preview extension their

[@snoudev]

thank you very much, your work is always great

[@lakhvindersingh35]

First

[@alext.rivera6043]

Very good, you are a crack!!! 👍🏾

[@droid-jr9940]

maravilloso bro !!!

[@mati14455]

👏👏

[@onlinetv6397]

hello sir make video with hindi sounds voice audios are not in the any videos making with voice over plzz...

[@Samuel01477]

Voice over isn't needed keep your opinions to yourself

[@Crjunior2024]

Hlo KZbin sirr

[@tupapa7642]

the tutorial it's awesome but the music it's a pain!

[@kolinekgp456]

Why everyone always is using pixels? Please show how to create this type of things more responsive...

[@Crjunior2024]

This is live servet

[@MOdevco]

Second

[@JaloliddinDilmurodov]

code yes

[@Respectshorts-nn4zf]

You forgot the image color when it is hovered 👀

[@dailymotiv1h.24]

.card .imgBx img:hover { transition: 2s; filter: grayscale(0); }

[@dailymotiv1h.24]

What is the validity of this code? Although he works, but I want to make sure does he write like this?!!

[@Respectshorts-nn4zf]

@@dailymotiv1h.24 🤝

[@LouMarten]

This UI Card does not work as shown in the above video in all browsers and mobiles. There's a problem with the linear-gradient that doesn't work with hexacode and needs to be rgba-colors. The image used needs to have a position that has to be relative because of the z-index and if you use a different .jpg file than the one above, you need to adjust the imgBx. Also the card needs to be adjust if you have a longer job title. And the links in the discription doesn't give you any source code but show you the course you can take. There is to little explanation about when it wouldn't work in other browsers situation. Allthought this video has inspired me.

[@germanfrankherk1436]

f0ck its amazing

[@bexruzmaxmudov8003]

Musur sukaaa

[@XojiakbarPolatov-n3b]

cursor: pointer; qani