![simple css card simple css card](https://i.pinimg.com/736x/b1/e4/e2/b1e4e2468e45d9cca40156cd2fd9620f.jpg)
All in all, it is a very simple and beautiful profile card design. Then here are the links on various social media for contact and two buttons at the bottom. A shadow has been used here which has made this card design a bit brighter than the webpage.įirst of all, I used a profile image here then gave the title and some basic description. I have added images, social-media-icons, and various texts to this box. Responsive Profile Card UI by Foolish Developer ( CodePen.Īs you saw in the demo above here I first designed a web page. If you want to create a Responsive Profile Card using HTML and CSS, you can try my previous design.īelow I have given a live demo that will help you to know how this profile works. However, this design is not Responsive it is just to create an idea about your profile card.
![simple css card simple css card](https://res.cloudinary.com/practicaldev/image/fetch/s--1AI2oKw4--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yobxtcyqfztxcr8terz.jpg)
I have already shared the design of a Responsive Profile Card with you. This type of CSS profile card design is also used in many blogs or free-lensing websites. Along with this, various types of information, social media links, etc.
![simple css card simple css card](https://i1.wp.com/www.csscodelab.com/wp-content/uploads/2020/02/simple-css-image-card-hover-effect.png)
Many times we see such profile designs in different applications or websites. Here I have made this design for beginners only relying on HTML and CSS. If you are a beginner and want to create an HTML CSS card design then this article will help you. Now is the time to create a beautiful profile card using only HTML and CSS. In the meantime, I have made a profile card design using bootstrap.
#Simple css card how to
In this article, you will learn how to create a simple profile card Ui design using HTML and CSS code.