In this project, we will build a Profile Popup HTML & CSS only. You Will Learn Many Things through this project web project:
- a web browser
- a text editor
- a desire to build things
Prerequisite: Basic knowledge of some front-end technologies like HTML, CSS
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>Profile Popup | Designed By Dipesh Murmu</title>
<link rel="stylesheet" href="style.css">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css2?family=DM+Sans&family=Poppins:wght@400;500&display=swap"
rel="stylesheet">
<!-- icons -->
<script src="https://kit.fontawesome.com/04158e9780.js" crossorigin="anonymous"></script>
<!-- favicon -->
<link rel="shortcut icon" href="https://static.vecteezy.com/system/resources/previews/005/544/718/original/profile-icon-design-free-vector.jpg" type="image/x-icon">
</head>
<body>
<div class="container">
<div class="profile-card">
<div class="top">
<div class="profile-logo">
<img src="https://iili.io/HhI8Gf9.jpg"
alt="">
</div>
<a href="https://twitter.com/dipeshmurmu2005" target="_blank"><button>Follow <i class="fa-solid fa-arrow-right-long"></i></button></a>
</div>
<div class="profile-detail">
<div class="name">Dipesh Murmu</div>
<div class="id">@dipesh_murmu</div>
</div>
<div class="bio">
Hey, I am Dipesh Murmu Web Designer at Cyper Coder {.Dev} and Still Learning Many More Backend Languages.
</div>
<div class="footer">
<div class="left"><span>5,789</span> Following</div>
<div class="right"><span>678</span> Followers</div>
</div>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
.container{
display: flex;
justify-content: center;
align-items: center;
height:100vh;
}
.profile-card{
height:300px;
width:380px;
box-shadow:0px 0px 5px 1.5px rgb(0,0,0,0.2);
border-radius:12px;
padding:2%;
box-sizing: border-box;
position: relative;
}
.profile-card .top{
display: flex;
align-items: center;
justify-content:space-between;
}
.profile-card .profile-logo{
height:60px;
width:60px;
overflow: hidden;
border-radius:5px;
display:flex;
justify-content: center;
align-items: center;
}
.profile-card .profile-logo img{
width:120%;
}
.profile-card button{
height:45px;
width:120px;
border-radius:5px;
font-size:1rem;
font-family:dm sans;
font-weight:bolder;
color: #727272;;
background-color:transparent;
border:1.5px solid #e0e1e2;
cursor: pointer;
}
.profile-card .profile-detail{
font-family:poppins;
margin-top:2%;
}
.profile-card .profile-detail .name{
font-weight:bolder;
}
.profile-card .profile-detail .id{
font-size:0.8rem;
color:#727272;
}
.profile-card .bio{
margin-top:2%;
font-family:poppins;
height:100px;
overflow: hidden;
font-size:0.9rem;
}
.profile-card .footer{
display: flex;
justify-content:space-between;
font-family:poppins;
color:#727272;
position:absolute;
width:100%;
left:0%;
padding:6%;
box-sizing:border-box;
bottom:0%;
}
.profile-card .footer span{
font-family:dm sans;
font-weight:bolder;
color:black;
font-size:1.2rem;
}