How to create an awesome profile card using HTML and CSS

Ashutosh Tiwari
2 min readJan 26, 2022

--

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.

Visit this website to check source code and preview:-

https://incoderweb.blogspot.com/2022/01/how-to-create-awesome-profile-card.html

--

--