Facebook Profile Card Facebook Profile Card is the interesting Project for a beginners in CSS. Using HTMl and CSS Learn create the best UI/UX Design. Through this you will learn flexbox, position and styling.
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>Document</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/04158e9780.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="card">
<div class="cover"></div>
<div class="image">
<div class="outer">
<div class="inner">
<img src="https://images.pexels.com/photos/2379005/pexels-photo-2379005.jpeg?cs=srgb&dl=pexels-italo-melo-2379005.jpg&fm=jpg" alt="">
</div>
</div>
</div>
<div class="name">
John Doe
</div>
<div class="stat">
<span>1.4M Followers </span> <span>11 Following</span>
<i class="fa-solid fa-square-check"></i>
</div>
<div class="buttons">
<button><i class="fa-solid fa-envelope"></i>Message</button>
<button><i class="fa-regular fa-square-plus"></i>Follow</button>
</div>
<div class="about">
<ul type="none">
<li><i class="fa-solid fa-briefcase"></i> CEO at Code Academy</li>
<li><i class="fa-solid fa-graduation-cap"></i> Engineering in Computer Science and Psychology</li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
body{
background-color:#F8F9F9;
}
.container{
height:100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container .card{
width:400px;
height:520px;
background-color:white;
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
border-radius:12px;
overflow: hidden;
position: relative;
cursor: pointer;
}
.container .card .cover{
height:200px;
background-image:url(https://wallpaperaccess.com/full/84248.png);
background-size:cover;
background-position:center;
}
.container .card .outer .inner{
height:120px;
width:120px;
border-radius:50%;
overflow: hidden;
}
.container .card .outer{
background-color:white;
border:2px solid white;
border-radius:50%;
display: flex;
justify-content: center;
align-items: center;
height:130px;
width:130px;
}
.container .card .outer .inner img{
width:100%;
}
.container .card .image{
display: flex;
position:absolute;
justify-content: center;
margin-top:-60px;
width:100%;
}
.container .card .name{
margin-top:20%;
text-align: center;
font-family:Gilroy;
font-weight:600;
font-size:1.3rem;
}
.container .card .stat{
font-family:Poppins;
color:rgb(0, 0, 0,0.4);
text-align:center;
}
.container .card .stat i{
color:rgb(16, 182, 238);
font-size:1.2rem;
}
.container .buttons{
display: flex;
justify-content:space-between;
padding-left:20%;
margin-top:5%;
padding-right:20%;
}
.container .buttons button{
height:40px;
width:100px;
border:none;
border-radius:5px;
font-family:poppins;
display: flex;
align-items:center;
justify-content: center;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.container .buttons button:first-child{
background-color:rgb(0, 145, 255);
color:white;
}
.container .buttons button i{
font-size:1.2rem;
margin-right:5%;
}
.container .about{
padding-left:5%;
margin-top:5%;
font-family:poppins;
font-size:0.9rem;
color:rgb(0, 0, 0,0.5);
}
.container .about i{
font-size:1.3rem;
margin-right:2%;
}