In this article, you will learn how to create a Simple Profile Card using HTML and CSS. simple profile page design is basically used to show the user’s information on different websites.
In this article, I have made a simple CSS profile card. Here are some profile images, names, email ids, mobile numbers, and some social media icons. You can also add some necessary text about yourself here.
I have taken the help of HTML and CSS to make a simple profile card CSS. Using HTML, I have added a variety of information, images, and icons to social media.
Simple Profile Card Design HTML CSS
In the following tutorial, I have shown you how to create a simple profile card using HTML and CSS. First I created a box at the top of the webpage. I have divided this box into two parts.
The first part contains images and names and the second part contains all the information. I have used blue as the background color of the first part and white as the background color of the second part.
See the Pen Untitled by Raj Template (@RajTemplate) on CodePen.
The second part of the profile page has email ids, phone numbers, and five social media icons. Hopefully, the demo above has helped you to know how this design works.
You need to have basic knowledge of HTML and CSS to create this HTML profile page. First, you create an HTML and CSS file then follow the tutorials below step-by-step.
Step 1: Basic structure of profile card
Now I have created a box at the top of the web page using the following HTML and CSS code. I split this box into two parts and then added all the information.
Step 2: Make the right side of the card
Now I have designed the first part and added information to it. The first part has a profile image and a name. The first part is 40% width and the background color is blue using a linear gradient. Here the length of the image is 145 px.
Step 3: Design the left side of the profile
Now I have designed the second part, its width has been used 65%.
Step 4: Add basic information to the profile card
Now I have added all the information like email id, mobile number in the second part. First I added all the information using HTML code then designed it using CSS.
Step 5: Add social icons to the Simple Profile page
Now I have added icons to social media using the following codes. Here I have used four social icons you can increase or decrease the amount of your choice if you want. The background width of the icons is 45px and the font size is 18px.
Now, this design (Simple Profile Card Using Only HTML & CSS) is ready to use for any purpose. But it needs to be made responsive which I will share in the next tutorial.
Hope you learned from this tutorial how profile pages are created using HTML and CSS.