How to Create a Profile Card Ui Design in HTML CSS
If you want to learn how to create a profile card ui design using HTML CSS only, then you are on the right blog. Today we will create a profile card using html and css.
Profile card generally contains personal information, social media handles and email. If you know the basics of HTML CSS, then you can easily rebuild this profile card.
Here’s the demo of profile card that we are going to create.
Source Code for Profile Card [HTML CSS only]
Follow these steps to create a profile card:
- Create a folder, name it whatever you want and create these two files in it.
- Create an
index.htmlfile. The file name must be index and its extension .html - Create a
style.cssfile. The file name must be style and its extension .css
After creating these files, paste the given codes into the specified files.
See the Pen
Profile Card UI Design by Haris Ahmad (@harisahmad59)
on CodePen.
First we will create a parent div container, placing image, headings, and buttons in it. Then inside CSS we’ll apply the necessary properties as you can see in the below code snippet and setting image radius to 50% to make it look circular. Then we will flex the display for data div container in which we have our headings placed. And then styling the buttons by applying background color and dimentions to the buttons.Also to make it look more attractive, we can apply box shadow to the buttons on hover.
