Responsive Profile Cards using HTML & CSS Only

Hello readers, today in this blog I'm going to create Responsive Profile Cards by using HTML & CSS only. In my previous blog, I have shared How to Create a Design a Checkbox Design into a Toggle on-off Switch, and this time to create a profile card.

Shortly profile card means a card where is a small photo of a particular person and his some details like name, job, some other minor details. A profile card is used as an identity of a specific person.

As you can see on the given images there are three profile cards of a different person. At the top, there are different images for specific people in the circular form. Under the images, there is a different name for all and some ratings and some limes of dummy text. At the bottom of this card we can see two buttons one is with text Readmore and another is as a subscribed. When we hover on that button background is changed smoothly. These all cards are responsive, all cards are seen perfectly on all sizes of screen.

If you are feeling difficulty understanding this program, don't worry I have provided a full video tutorial of this program[Responsive Profile Cards]. I sure all your confusion will clear after watching this video.

Full Video Tutorial of Responsive Profile Cards


As you have seen on the given video, there are three profile cards for all people, I have given them the small image in a circular form, under the image there is a person's name,  job, and some rating. At the bottom there are two buttons one is named by Readmore and another is named by subscribe. Did you notice when that is hovered their background smoothly changed? To make these cards responsive i have used @media query. Media query helps to fit these cards on different screens.

If you are familiar with HTML & CSS then you can easily make create this program and if you have knowledge about JavaScript you can add more effect as you like. Those friends who are feeling difficulty to create this program, don't worry I have provided all source code files below. This is free and you use this program for your purposes.

Responsive Profile Cards [Source Codes]

You Might Like This:

To paste the given codes of this program [Responsive Profile Card Design], first of all, you need to create two files one is an HTML file and another is a CSS file, after creating these two files then you can copy-paste the given codes in your files. You can also download all source codes and file from the given "Download Button" directly.

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