Profile Card Using HTML and CSS : Button Over Effect
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>profile card using html and css</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main-box">
<div class="big-circle">
<div class="small-circle"></div>
</div>
<h2 class="heading-name">John Doe</h2>
<h3 class="heading-work">Web Developer</h3>
<p class="info">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam nemo
sunt quae dolorem atque deserunt non
</p>
<a href="#" class="follow_btn">Follow</a>
</div>
</body>
</html>
CSS
/* color
#46E097
#DAF9F6
#FBFEFF
*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,400&display=swap');
body{
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: "Roboto", sans-serif;
}
.main-box{
width: 300px;
height: 400px;
box-shadow: 2px 4px 2px 4px rgba(70, 224, 151, 0.65);
border-radius: 10px;
text-align: center;
padding: 20px 0;
}
.big-circle{
width: 150px;
height: 150px;
border: 10px solid #46E097;
border-radius: 50%;
margin: auto;
position: relative;
}
.small-circle{
width: 140px;
height: 140px;
border: 10px solid #DAF9F6;
border-radius: 50%;
position: absolute;
top: -5px;
left: -5px;
background-image: url("profile-image.jpg");
background-position: center;
background-size: cover;
}
.heading-name{
margin: 3px 0;
}
.heading-work{
color: #46E097;
font-weight: 300;
margin: 3px 0;
}
p{
padding: 0 20px;
margin-bottom: 25px;
}
.follow_btn{
text-decoration: none;
background: #46E097;
color: #fff;
padding: 10px 20px;
border-radius: 20px;
box-shadow: 2px 2px 1px 1px rgba(70, 224, 151, 0.65);
}
.follow_btn:hover{
color: #46E097;
background: #DAF9F6;
font-weight: 600;
}
(Visited 3,264 times, 1 visits today)
Osm bro please now available download button
Thank you.
Thanks