Hey, developer today is Day 85 of our 90Projects in 90Days. And today in this challenge, we are going to Create a User Profile Card using HTML CSS.
To run the given code firstly you have to copy the HTML code and run it into your code editor and then create a CSS file and paste the given CSS code in your code's CSS file.
Preview
HTML Code
index.html
<!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> User Profile Card </title>
<link rel="stylesheet" href="s.css">
</head>
<body>
<div class="main-container">
<div class="top-circle"></div>
<img src="/user.png" alt="user Raju" class="user">
<h2 class="userName"> Raju Sheoran </h2>
<h4 class="job-title"> Frontend Developer </h4>
<ul class="social">
<li class="list-item"><span class="num">856</span><br><span>Posts</span></li>
<li class="list-item"><span class="num">2012</span><br><span>Likes</span></li>
<li class="list-item"><span class="num">28010</span><br><span>Followers</span></li>
</ul>
<p class="description">
I'm specialize in Frontene web development. I love code and to build interesting thing from my learning.
</p>
<ul class="languages">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Python</li>
</ul>
<div class="buttons">
<button class="active btn"> Follow </button>
<button class="btn"> Message </button>
</div>
</div>
</body>
</html>
CSS Code
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: rgb(50, 11, 50);
padding: 10px;
}
.main-container {
background-color: #fff;
padding: 15px;
border-radius: 10px;
width: 300px;
overflow: hidden;
position: relative;
}
.top-circle {
width: 500px;
height: 500px;
background-color: #e65b00;
position: absolute;
bottom: 70%;
left: -30%;
border-radius: 50%;
transform: rotate(30deg);
z-index: 1;
}
.user {
width: 90px;
position: relative;
display: block;
z-index: 8;
filter: drop-shadow(2px 2px 10px rgb(219, 206, 206));
margin: 0 auto;
transform: translateX(-50%);
bottom: 13px;
animation: moving;
animation-duration: 1s;
cursor: pointer;
animation-iteration-count: infinite;
animation-direction: alternate;
}
.user:hover {
animation-play-state: paused;
}
@keyframes moving {
from {
transform: translateY(3px);
}
to {
transform: translateY(-3px);
}
}
.userName {
margin-top: 15px;
margin-bottom: 5px;
text-align: center;
font-size: 18px;
color: #e65b00;
}
.job-title {
font-size: 10px;
color: rgb(70, 78, 85);
text-align: center;
margin-bottom: 20px;
}
.social {
list-style: none;
display: flex;
width: 100%;
justify-content: space-around;
margin-bottom: 10px;
text-align: center;
}
.social span {
color: #332c2c;
font-size: 11px;
line-height: 5px;
}
.social .num {
font-size: 13px;
color: #e65b00;
}
.description {
width: 100%;
text-align: center;
font-size: 12px;
margin: 10px 0;
}
.languages {
display: flex;
justify-content: space-around;
list-style: none;
margin: 10px 0;
}
.languages li {
background-color: #e65c0058;
padding: 5px 10px;
border-radius: 10px;
font-size: 12px;
margin: 2px;
}
.buttons {
width: 100%;
margin: 5px auto;
text-align: center;
}
.btn {
border: 1px solid #e65b00;
color: #e65b00;
border-radius: 2px;
outline: none;
cursor: pointer;
padding: 5px 10px;
margin: 5px;
}
.active {
background-color: #e65b00;
color: #fff;
}
