Hello developers, today in this blog, you will learn how to create a User Profile Card Design using HTML & CSS.
The user profile card is in all sorts of shapes and sizes, the card contains some information like profile image, name, some content about the person, and some contact information like which are used to contact the person for the user's clarification.
In this blog (User Profile Card Design), there is a card at the center of the webpage, with the profile icon, title and, description of the company. Below the description of the company, two buttons indicate the follow and send a message with its respective icons. These buttons are used to follow the person's page for the latest updates and, for the user's clarification the user can send the message to the person.
The source code of this User Profile Card Design using HTML & CSS is given below, and you can copy the source code of this program. You can use this code of User Profile Card Design with your creativity and can take this card to the next level.
User Profile Card Design [Source Codes]
To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html, and remember, you have to create a file with a .html extension.
* {
padding: 0;
margin: 0;
list-style: none;
border: none;
text-decoration: none;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
font-family: "Montserrat", sans-serif;
line-height: 1;
}
body {
background: #F2994A;
background: -webkit-linear-gradient(to right, #F2C94C, #F2994A);
background: linear-gradient(to right, #F2C94C, #F2994A);
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
.profile {
margin: auto;
background-color: #fff;
border-radius: 40px;
width: 480px;
padding: 50px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.photo {
width: 120px;
height: 120px;
border-radius: 30px;
border: 15px solid rgba(#f6f2ff, 0.7);
object-fit: cover;
}
.name {
margin-top: 24px;
font-size: 22px;
font-weight: bold;
}
.details {
font-size: 13px;
font-weight: 400;
width: 50%;
margin-top: 8px;
line-height: 1.3;
text-align: center;
}
.buttons {
display: flex;
align-items: center;
margin-top: 50px;}
.message {
background-color: #F2C94C;
}
.follow {
background-color: #F2994A
}
.button {
width: 186px;
height: 54px;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 500;
margin-left: 12px;
cursor: pointer;}
.button:first {
margin-left: 0px;
}
svg {
height: 22px;
margin-right: 4px;
}
.credit a{
text-decoration: none;
color: #000;
}
.credit {
margin-top: 10px;
text-align: center;
}
Thank you for reading our blog. If you face any problem in creating this User Profile Card Design using HTML and CSS, then contact us or comment us. We will try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team