Animated Profile Card Using HTML & CSS & JavaScript

In today's video, we're going to make an awesome animated profile card using HTML & CSS & Javascript, In our card, when we click on the profile image, the image pops up with nice animation, also we'll have a cool hover effect on buttons, and finally, our card is responsive too !
Please feel free to donate any amount you think is equal to the value you received from my tutorials .
DONATION : paypal.me/true...
SOURCE CODE : github.com/sef...
Don't forget to smash the like button and share the video with your friends if you found the video useful.
Also, click on the bell icon to turn on notifications. This way you'll be notified the moment new videos are uploaded.
Make sure to SUBSCRIBE for more tutorials just like this one !

[@Harshp062]

0 dislikes. intelligent channel with intelligent audience.

[@niconj]

It's not only fun to watch, but also covers a lot's of usual needs for front-end devs... amazing work!!!

[@TrueCoder]

Thank you !!

[@AA-oi9ru]

You are The King of front end 🤴🤴🤴🤴🤴 👑 🧒 🧥

[@1122slickliverpool]

I prefer backend development because I prefer data and logic, but you definitely want me to keep trying to practice my css no matter how bad am. Lol The sites you be making are so breath taking.

[@melissaarias2444]

I like that you write small pieces of html and the corresponding css so we know what we're building instead of typing all the html at once and getting lost with the css.

[@CodeXplore]

Very nice design, thanks for sharing

[@TrueCoder]

You're welcome !

[@iliyaataei2238]

It's always fun to watch your content and follow along with it! keep it up...

[@TrueCoder]

Thank you !!

[@maxflow2288]

Great videos! Your guides help me a lot

[@Stakin12]

Hi, how can i put numbers under the buttons when it's on a big screen pls ?

[@NERDboy]

Wow very good.... I really liked the vscode theme, what would that theme be?

[@standard0075]

hey i am using it for a kind of personal website but i am unable to add a sidebar to it ; its very confusing can you create a vidieo in which you add a toggle sidemenu to it if are unable to do that you can just email me the code ..plz help i am a very old subscriber

[@TrueCoder]

Thank you bro !! I will make a video about sidebar very soon !

[@standard0075]

@@TrueCoder thank u for your reply,every youtuber should be like u ;waiting for the video

[@kodeeshwarar3016]

You videos awesome but my suggestions you need to use BEM methodology it's good name helpful for us

[@aarondz789]

Cool.....and useful.

[@TrueCoder]

Thank you !!

[@technistavlog1504]

Great tutorial , Thank you sir for sharing.

[@TrueCoder]

Most welcome !!

[@joanalymaliao4686]

Geez..thank you for uploading,Mam/Sir.. subscribed

[@Soccer4Living1]

Youre the best dude

[@TrueCoder]

Thank you !

[@9ravan]

Very Much Appreciated for providing the source code

[@mdhasiburrahmannafiz9984]

Can you please make a video on how one can earn with css skill. (Without tutoring)

[@ARandomGuyOG]

Can you make a complete responsive E-Commerce website....It will be very helpful for us. Thanks

[@khenifaryehya]

Awesome, keep going 👍👍👍👍

[@voiceofthetrue1849]

Using fixed width and px for font is just a kidding.

[@webtutorials5353]

Very nice video)))

[@moizghazali8852]

Thank you bro....!!!*

[@daniyarue]

Can you make a complete web site (or landing page) please with that beautiful design

[@TrueCoder]

Yes, in the next videos

[@daniyarue]

@@TrueCoder Good!

[@temitopeolajide1475]

Am Expecting this too

[@uicubes]

nice work , can you explain what the slash do in image style ``` center / cover;```

[@TrueCoder]

instead of saying: background-size: cover; we can simply add " / cover" to the background property

[@uicubes]

@@TrueCoder I mean why the slash, cause it will not give the same result without the slash, to clarify my question is what the purpose of using the slash here.thanks for reply

[@mdhasiburrahmannafiz9984]

Thaks sir

[@santiagoventura3211]

Muy buen Video!

[@jkartz92]

do you basically design and develop front end only or you work on developing backend too!!

[@khalilfekkak5445]

Yo ar viri god broder😅😅🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🤣🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰

[@xditya]

awesome :)

[@TrueCoder]

Thanks !!

[@hamajack2023]

i know that it's a silly question but is there any solution to put these kind of animated card's in a WordPress website and if it's possible can you tell me how and thnx

[@front-endanimal6359]

oh, it's very difficult

[@TrueCoder]

I'm sorry bro, but I'm not familiar with WordPress

[@mertcankose5079]

good

[@TrueCoder]

Thank you !

[@SabCode]

Nice 👍

[@TrueCoder]

Thank you !

[@viniciustavarespimenta105]

Parabéns! Ótimo conteúdo 👏🏻👏🏻👏🏻

[@CANALPSYCHOOFICIAL]

Verdade, muito bom os codigos dele

[@front-endanimal6359]

wow, nice design!

[@TrueCoder]

Thank you !!

[@abdulrakib9906]

Can I know which software you have used for creating and editing this tutorial ?

[@TrueCoder]

camtasia

[@front-endanimal6359]

i'm too want

[@rijalpadam5148]

Awesome ❤️

[@pragyayaa]

HOW YOU EDIT AND RECORD YOUR TUTS? LIKE WHICH SOFTWARE ????

[@TrueCoder]

camtasia

[@programmingwithali4430]

thankyou sooo much i love your content

[@TrueCoder]

Most welcome !

[@programmingwithali4430]

@@TrueCoder sir please can you make vedio on php chat app

[@javieralvarez5842]

awww it's so great!!! thk

[@TrueCoder]

You're welcome

[@sagarsubedi]

I have a question, How do you get the colors for the gradient? When we try to make a gradient, we know generic ones like blue, red, green, etc. but you get precisely hex colors and it makes it look so better than just the gradients of the "generic colors" like red, blue, aqua, etc. How do you know the hex values for the gradients? Nice video. Thanks.

[@TrueCoder]

I took the gradient from uigradient website

[@makeexameasy3395]

Bhai kya aap responsive blogger them bna ni sikha sakte ho plzz rply

[@TrueCoder]

Yes, maybe in future

[@makeexameasy3395]

@@TrueCoder abhi kar dete series ye toh aapko pta hi koi video ni abhi tak channel b aapka 100% grow krega

[@developer8186]

Excellent video and channel by the way , i has just created similar learning channel , i will introduce tutorials and real projects !

[@TrueCoder]

Great work, Keep going !!

[@standard0075]

hey could we use this template for commercial website, i mean?

[@TrueCoder]

Yes, of course

[@standard0075]

@@TrueCoderthank u for your humble response

[@jkartz92]

what software is that you're using for the coding?

[@TrueCoder]

I use VScode

[@jkartz92]

@@TrueCoder Thanks man!!

[@jkartz92]

@@TrueCoder do you basically design and develop front end only or you work on developing backend too!!

[@TrueCoder]

For now, I develop front-end only

[@karimmahmoud1412]

very nice work, but why you made hidden .hover class instead of using :hover directly ?

[@TrueCoder]

Because I want the profile image to keep hovered when I click on it

[@srsrinath9778]

Nice and very much interested for listen at the time of video.

[@TrueCoder]

Thank you !!

[@srsrinath9778]

No mention sir please do it that video sir I am eagerly waiting sir