Profile Card Design using HTML & CSS

Hello Reader, Today in this blog I'm going to design an animated profile card and it will control by one button.  As you know I have shared a blog about How to Create Responsive Neumorphism Navigation Menu and now I will design a profile card.

Simply we can understand profile means the identity of something especially a human head or face described or seen in a side view and a card is means a flat, thick piece of paper, used to prove the identification of a particular person. Generally, a Profile card contains an individual person's name, address, profession, and other casual details.

In this Program [Profile Card Design using HTML & CSS ], as you can see in the given picture there is a profile of an individual person with his name, job and also we can see some social media buttons for this person. At the bottom of that card, we can see a button with text. At first, that profile card name, job and, social media button are disabled, and also a button and card distance little far but when we clicked that share button a profile card move downward close to the button with sliding animation also card's name, job, and social media icons appear with animation and the button text change into cancel.

If you are feeling difficult to understand this program [Profile Card Design] I have to provide a video tutorial below. You can watch the full tutorial, I hope you will get an idea about this profile card

Video Tutorial of  Animated Profile Card using HTML & CSS only




As you have seen on this video tutorial how the button controls the whole profile card and the sliding animation with the hover effect of those social media icons, also you have seen when we click the share button that the button change into cancel form. To control a whole profile card I have used an HTML input checkbox and button with label tag( when button click input is checked and unchecked).

If you know basic HTML & CSS you can easily create this program[Profile Card ] using only HTML & CSS or if you have knowledge of JavaScript you can add other various concepts to this card. Friends you use this profile card for your purpose freely. If you are feeling difficult to create this profile car, I have provided source code files of this program[ProfiCard Design using HTML & CSSl].

You Might Like This:


Animated Profile Card [Source Codes]

To copy these given codes of this program [Animated Profile Card Design], you need to create HTML & CSS file on your computer then you can paste these codes or you can easily down all source code files from the given "Download Button".

HTML CODE:

CSS CODE:



Post a Comment

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Previous Post Next Post

AdBlock Detected!

Our website is made possible by displaying ads. Please whitelist our site to download source code files. Read more

arrow-down