Responsive Profile Cards using HTML & CSS


Responsive Profile Cards using HTML & CSS Only

Q: How do you make a profile card?
A: After reading and watching the following article and tutorial, you will able to create to responsive profile card or page as you can see on the web page.

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 a Profile Card with Sliding Animation, and this time to create a profile card.

What is 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.

Responsive Profile Card using HTML CSS | Video Tutorial


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 subscribing.

 Did you notice when that is hovered their background smoothly changed? To make these cards responsive I have used the @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. Those friends who are feeling difficulty creating this program, don't worry I have provided all source code files below. This is free and you use this program for your purposes.

You Might Like This:

To paste the given codes of 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

Previous Post Next Post

Contact Form