User Profile Card Design using HTML & CSS

User Profile Card Design using HTML & CSS

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.

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>User Profile card || Learning Robo</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="profile"> <img src="https://cdn.pixabay.com/photo/2018/11/13/21/43/instagram-3814049__480.png" alt="" class="photo"> <span class="name">learningrobo</span> <span class="details">Building next-gen energy tech product with us</span> <div class="buttons"> <div class="button follow"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> <path d="M3 21V19C3 17.9391 3.42143 16.9217 4.17157 16.1716C4.92172 15.4214 5.93913 15 7 15H11C12.0609 15 13.0783 15.4214 13.8284 16.1716C14.5786 16.9217 15 17.9391 15 19V21" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> <path d="M19 8V14M16 11H22H16Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> </svg> Follow </div> <div class="button message"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 20L9 17H7C6.20435 17 5.44129 16.6839 4.87868 16.1213C4.31607 15.5587 4 14.7956 4 14V8C4 7.20435 4.31607 6.44129 4.87868 5.87868C5.44129 5.31607 6.20435 5 7 5H17C17.7956 5 18.5587 5.31607 19.1213 5.87868C19.6839 6.44129 20 7.20435 20 8V14C20 14.7956 19.6839 15.5587 19.1213 16.1213C18.5587 16.6839 17.7956 17 17 17H15L12 20Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> <path d="M8 9H16" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> <path d="M8 13H14" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /> </svg> Send Message </div> </div> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and, remember that you have to create a file with a .css 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;
              }
We hope you would like this User Profile Card Design using HTML and CSS.

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.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome