To create a profile card using HTML and CSS, follow these steps:
1. Create an HTML file and include a basic structure with a head and body tag. You can use the following code as a starting point:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Card Design Using Html Css</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>2. Inside the body tag, create a div element with a class of "profile".
<div class="profile">
<div class="card"></div>
</div>3. Add an header inside the card div.
<div class="header">
</div>4. Add an icon of your profile picture inside the header div.
<div class="header">
<icon class="icon"><img src="image/user.jpg" alt=""></icon>
</div>5. Add a heading with your name, username and follow button after icon inside the header div.
<div class="header">
<icon class="icon"><img src="image/user.jpg" alt=""></icon>
<div class="group info">
<div class="name">Palamau Photographer</div>
<div class="userName">@palamau_photographer</div>
<a href="#" class="follow">follow</a>
</div>
</div>6. Add an bio after header inside the card div.
<div class="bio">JHARKHAND FROM INDIA<br>
Thanx for Following me...
</div>7. Add an nave after bio inside the card div.
<div class="flexCe nave">
<div class="item">
<div class="center bold">5K</div>
<div class="center">post</div>
</div>
<div class="item">
<div class="center bold">24M</div>
<div class="center">followers</div>
</div>
<div class="item">
<div class="center bold">21K</div>
<div class="center">following</div>
</div>
</div>8. Add an post group after nave inside the card div.
<div class="flexCe postgroup">
<div class="post"><img src="image/image_1.png" alt=""></div>
<div class="post"><img src="image/image_2.png" alt=""></div>
<div class="post"><img src="image/image_3.png" alt=""></div>
</div>9. Create a CSS file and style your music player to make it look nice. You can use the following code as a starting point:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
height: 100%;
width: 100%;
}
body {
background: #0084ff;
font-family: system-ui;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.flex {
display: flex;
}
.flexCe {
display: flex;
align-items: center;
}
.bold {
font-weight: 500;
}
.profile {
position: absolute;
width: 360px;
height: 380px;
padding: 15px;
font-size: 14px;
font-weight: 400;
cursor: default;
}
.profile .card {
width: 330px;
height: 350px;
position: relative;
border-radius: 4px;
padding: 20px;
border: solid 1px #0001;
box-shadow: 0 0 20px #0005;
background: #fff;
overflow: hidden;
}
.profile .header {
display: flex;
}
.profile .icon {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
border: solid 2px #0084ff;
}
.profile .info {
flex: 1 1 auto;
margin-left: 15px;
}
.profile .name {
font-size: 18px;
font-weight: 500;
cursor: pointer;
position: relative;
}
.profile .userName {
font-size: 14px;
font-weight: 400;
}
.profile .follow {
float: left;
padding: 4px 14px;
background: #0084ff;
color: #fff;
margin-top: 10px;
text-decoration: none;
border-radius: 2px;
}
.profile .follow:hover {
background: #0162bc;
}
.profile .bio {
font-size: 15px;
font-weight: 400;
margin: 20px 0;
}
.profile .item {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.profile .postgroup {
flex-wrap: wrap;
justify-content: start;
border-top: solid 1px #ddd;
margin-top: 10px;
padding: 10px 0;
}
.profile .post {
margin: 5px;
width: 86px;
}10. Save the file and open it in a web browser to see your profile card.
That's it! You should now have a basic profile card created using HTML and CSS. You can customize the styles to fit your own preferences and add more information if needed.
Html Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Card Design Using Html Css</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="profile">
<div class="card">
<div class="header">
<icon class="icon"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiGGcew7FZTD5H33JAaKBGF8CW59GAXceDFP9TPFg36XJqGfrFFOCzhKy_tD-ao_wB8tcrwv5K-5PVtEiLuPs-aHNbJupNgUv85U8hRPf6lS0eJ7hwwkebroMYbf3TWzXkJspq5_lFCuKnoKybxYSGNcheWg-K5JemcF2lejf1_CcDUk-DWUZxvZjSUA/s320/user.jpg" alt=""></icon>
<div class="group info">
<div class="name">Palamau Photographer</div>
<div class="userName">@palamau_photographer</div>
<a href="#" class="follow">follow</a>
</div>
</div>
<div class="bio">
JHARKHAND FROM INDIA<br>
Thanx for Following me...
</div>
<div class="flexCe nave">
<div class="item">
<div class="center bold">5K</div>
<div class="center">post</div>
</div>
<div class="item">
<div class="center bold">24M</div>
<div class="center">followers</div>
</div>
<div class="item">
<div class="center bold">21K</div>
<div class="center">following</div>
</div>
</div>
<div class="flexCe postgroup">
<div class="post"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJLY5PHbXjaGHR_yNGAwOjarjQKcBRjckAFt2oajP7rO-jKJBce3pIQ0wvFTiWU73H07BF83W9YDMketYtDt9n5MHzkRw4w7Blt9rXH-biLJsx-_OA2iiOe-Dc5HUwkfIQgKKheUZUHuEw2ylvQ9DEfpxOXgbw2DKLGJcLn_O5gpwMlWLoE0A5WXRNig/s1440/image_1.png" alt=""></div>
<div class="post"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_GPvzFvgNRnR8XGyVawAlaLtVi4dly3RFDExLXWMZkIo6lTJMYuKu7zP7sOWwdoNXf1OuqdD7Uw5Oi-OJDd0LaVksmdOq9xUZPg_DD8Kqvw-4KgvI9ZartaToFDe5dyMc2p-d5tVb0AC0GBDpalwnL3OQ8stppPiXNqtNR2KwFlWjZDIMp6rsmEw-uQ/s1440/image_2.png" alt=""></div>
<div class="post"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKLhmBs6DbVpLcEs0PYs0PreUzCXJK8-9opfyG8OGtyOnAj17W1_-KUV_miK7eA3Mspf7jXHPM3RsXPk91HOCSA9xF4aSWWCalxKiZ3byozwPXmCvdjjnzwCBG8MbfiKLwsnI18qoj8QEgw80WrjfkAf1j1c_58dGspNHIPOn4DrRFrTLY1e0ErU32Mg/s1440/image_3.png" alt=""></div>
</div>
</div>
</div>
</body>
</html>Css Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
height: 100%;
width: 100%;
}
body {
background: #0084ff;
font-family: system-ui;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
transform: scale(1) !important;
}
.flex {
display: flex;
}
.flexCe {
display: flex;
align-items: center;
}
.bold {
font-weight: 500;
}
.profile {
position: absolute;
width: 360px;
height: 380px;
padding: 15px;
font-size: 14px;
font-weight: 400;
cursor: default;
}
.profile .card {
width: 330px;
height: 350px;
position: relative;
border-radius: 4px;
padding: 20px;
border: solid 1px #0001;
box-shadow: 0 0 20px #0005;
background: #fff;
overflow: hidden;
}
.profile .header {
display: flex;
}
.profile .icon {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
border: solid 2px #0084ff;
}
.profile .info {
flex: 1 1 auto;
margin-left: 15px;
}
.profile .name {
font-size: 18px;
font-weight: 500;
cursor: pointer;
position: relative;
}
.profile .userName {
font-size: 14px;
font-weight: 400;
}
.profile .follow {
float: left;
padding: 4px 14px;
background: #0084ff;
color: #fff;
margin-top: 10px;
text-decoration: none;
border-radius: 2px;
}
.profile .follow:hover {
background: #0162bc;
}
.profile .bio {
font-size: 15px;
font-weight: 400;
margin: 20px 0;
}
.profile .item {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.profile .postgroup {
flex-wrap: wrap;
justify-content: start;
border-top: solid 1px #ddd;
margin-top: 10px;
padding: 10px 0;
}
.profile .post {
margin: 5px;
width: 86px;
}