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.
card microsoft profile satya nadella
