Home » Profile Card UI Design In HTML & CSS, Minimal Card UI Design, Pure CSS Card UI Design

Profile Card UI Design In HTML & CSS, Minimal Card UI Design, Pure CSS Card UI Design

by admin
Profile card ui design, profile card html css

Hello friends, In this video, I’m creating how to make profile card UI design using HTML and CSS with social icons cool hover effect. as you know I made a lot of videos on this before and today I made an article or video again on a simple profile card UI design with social media hover effect only with the help of HTML and CSS so I hope Would you like this video too?

You must have seen the picture above. So let me explain to you a little how I made it. First, create a block of width 380 (I’ve added the radius of the top right and bottom left corners). Then I have taken a profile image first, after that, I have added a name and its status, then I have added a little description and in the last, I have added social media icons (I have added top right and bottom left corner radius )

The most attractive and cool thing about this profile card is the social media icon hover effect. Normally you will see a border icon and the corner radius will appear top right and bottom left but when you hover over it its background color will appear black and the icon color will be white and the border-radius will be vice versa like the top left and below. The right corner radius will be smoothed out and that too.

You may also like this video for develope your skills

Change background image on hover with css transition effects | CSS Hover Effect

Awesome CSS Gradient Button Hover Effects

Pure CSS Lavalamp menu hover effect | Cool Menu Hover Effect

Background clip text hover effect and outline text in HTML & CSS | CSS Background Clip Path

I also have profile card UI design source code jsfiddle embedded file, you can copy every HTML code in your index.html. And after that, you have to paste the code of CSS in the style.css file.

In this HTML structure, I have taken a div named card inside which I have taken a profile image(I took the image from Unsplash which is free stock images website. you can take that too) and a div named content which will contain all the information. After that content is also a social class inside which I have added the icon and link of social media. You can put your own social media link on your behalf. You can see its code below.

In this, the code for the styling of the css has been written in the index.html file itself, before the head tag is over, the style name has to be written in the tag. In which I have given style to the card like box-shadow, border-radius and background color. In social media, black color border and black color icons have been made and transition has been given to it so that when the user clicks on that icon, there can be a smooth transition i.e. smooth movement. In the hover effect, the background color has been alternated to black order border radius. I have given its code below, you can see.

Here is the preview you can see

If you do not want to add your images to the profile, then I am adding some free stock images website below, you can use the images by going to that website and if you want to use the icon, then give some free icons website add a link for that too. You can go to it and download the icon and use it.

I had attached the embedded file of the source code above, if you did not understand it, then I have told in the video below that how you can design the UI of the profile card, if you watch this video then you will be well society I will come.

I hope you guys liked this video and I will keep uploading such useful videos in the future also, then you should like this profile card UI design video and if you have any questions then comment and subscribe to the LearnDesign youtube channel, Have a nice day.

Related Articles

Leave a Comment