YogeshChauhan . com

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 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

What are components in Angular?AngularFew more :nth-child examples in CSSCSSHTML canvas methodsHTMLUnderstanding the confusing and handy “This” keyword in JavaScriptJavaScriptWhat is Hadoop and Hadoop Ecosystem?MiscWhat is Host Hardening and What are some Important Hardening Steps?Misc