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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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

#Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
Killing A Project Part 2: Who should make the decision to kill a project?MiscellaneousHow to create a pricing table using flex in CSS?CSSHow Routing works in Angular?AngularWhat is ECMAScript?JavaScriptWhat’s a page re-rendering in React?ReactHow to add menu to your WordPress theme?WordPress