AdBlock Detected!
Our website is made possible by displaying ads to our visitors. Please supporting us by whitelisting our website. Learn More

How to create an awesome profile card using HTML and CSS

Hello readers, today in this blog you'll learn how to create an awesome profile card using HTML and CSS. In our previous blog, we saw how to create a scroll to top or back-to-top button using HTML and CSS. Now it's time to create another awesome Card. I've also shared a few more card designs. Don't forget to check it here.

Nowadays almost every portfolio website has a profile card. What is a portfolio website? It provides professional information about an individual or organization and presents the showcase of their services. Most developers create their portfolio websites to showcase their skills and experience. In the profile card, they show their basic information.

You may like these:-


In this design [Awesome Profile Card] we have three cards in the center of the page as you can see in the image above. We have one image and after that name and the profession and some description about them. When we hover on the card it goes upside and shows a box shadow on the bottom of the card with a smooth transition and we can see an overlay on the image when we hover on it. If you're a bit confused what am I trying to say? So, you can check the source code and preview it as well.

How to create an awesome profile card using HTML and CSS [Source Code]


I hope you liked it. So if you wanna make it then you'll have to follow these steps, first of all, create two files first HTML and the second CSS after creating files make sure the file extensions .html for HTML file and .css for CSS file. Now, simply paste the code into your files. Now you have created an awesome profile card. You can also download files.

Zip File's Password = InCoderWeb

Post a Comment

Previous Post Next Post