Yogesh Chauhan's Blog

Learn to create profile card using HTML and CSS

in CSS & HTML on August 5, 2019

You have seen many kinds of profile cards for example on Facebook friend suggestions, on Twitter follow suggestions and on LinkedIn connection suggestions. You might have wondered if you can do the same in your website. Well, I have a good news for you that we can add those profile cards using simple HTML and CSS code only. So let’s get started with the HTML code first.

The main code we need is the HTML head link which will be helpful to attach all the icons required so that w don’t need to download logos or pictures to set up some images. Go ahead and copy that link to your head tag as it is. I’ve used some icons from fa and related class for icons like LinkedIn and Twitter.

Next, in the HTML body code, I have used Microsoft’s CEO, Satya Nadella’s profile for an example. The first one is simple header which you can use to show user’s name as well but I have used “Profile Card” to refer this instead.

The next one is div with a class=card, which by the name of it you can tell, will be our whole container for the profile card. In the container I’ve started the first element with an image and then name, work position title, education, social media links and in the end contact link. Pretty Basic with all the required info.

Let’s apply some CSS.

In the CSS code above, we are specifying style for different elements. The first one we start with is the class=card, which is the main container. I’ve used box-shadow property to attach shadows on the container which makes the look of the card really amazing. Then there is max-width which specifies, the maximum width. So the browser will adjust the image height and width according to the content size. Other properties are margin, text-align and font-family, which you can go ahead and set as per your requirements.

Next one is the class=title which has basic properties and values. Again, you can change the values as per your requirements.

In next element style I am setting up button and link styles which are basic properties and values to make it look nice with the container. You can add, remove and change those properties as per your requirements.


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
What’s Interpolation in SCSS (Sass)?SCSSWhat is a Strict Requirement in PHP 7 Function Declarations?PHPHow to enable and disable button using JavaScript?JavaScriptUseful (and probably ignored) HTML tags: Part 2HTMLWordPress 5.7 is migrating to latest jQuery version and people are freaking outjQueryA complete diagram with building blocks of an Angular applicationAngular