YogeshChauhan.com

Learn to create profile card using HTML and CSS

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.

dreamhost

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 uninstall Cocoapods from the Mac OS? #4 How to Use SQL MAX() Function with Dates? #5 How to add Read More Read Less Button using JavaScript? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Apr 7 Solution for “Yarn build: Failed because of a stylelint error” Apr 7 Make sure your links have descriptive text Apr 7 How to add Laravel to WordPress using Sage theme (and install Tailwind CSS)? Apr 2 How to create a sidebar using pure CSS? Apr 1 How to switch dark and light themes using pure CSS? Apr 1 How to calculate elapsed time in JavaScript?

You might also like these

How to create flickering text using CSS?CSSCSS Overflow Property with ExamplesCSSsubstring() Method in JavaScriptJavaScriptContent types in DrupalDrupalHow to CREATE TABLE in SQL with and without using Another Table?SQL/MySQLHow to add a ribbon on top of a container using CSS?CSS