Wednesday, January 13, 2021

Attractive Profile Card UI Design - Using CSS & HTML



Description


Hello everyone! In this video, you are going to learn how to design an attractive profile card design only using HTML and CSS. This profile card design is simple to design. The profile card includes a profile picture, card banner image, profile name, a short description of the profile, and the social media icons. Let's see how to design this profile card.


First, create the index.html file and the style.css file. Then start to code the index.html file. Write HTML codes to the card design with including the banner image, profile picture, profile name, profile description, and social media icons. To include social media icons first link the font-awesome libraries to the <head></head> tags of the index.html file. After the HTML code is complete then link the style.css file to the <head></head> tags of the index.html file. Then go to the style.css file and start to style the profile card as you can see in the video. Hope this video will be helpful for you to design an awesome profile card.


All the source codes and source files and available to download from here. Use the download button or copy and paste the code from the text editors. My opinion is first try to do it by following the video line by line. It will help you to understand all of it. After that, if your code is wrong or not working use the given source codes to compare with your code. It will help you to understand all of your mistakes.


Source Codes


index.html



style.css



Download Source Files

We only allow you to publish relevant and respectful comments. Vulgar, hateful, or spam comments will be removed.

Post a Comment

Whatsapp Button works on Mobile Device only