ProfileCard.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Profile Card</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="card">
<div class="header">
<div class="image">
<img src="Profile.jpg">
</div>
<div class="bar">
<div class="center"></div>
</div>
<a href="#"> <i class="fa fa-envelope" ></i></a>
<div class="name">
<span class="fname">Akash</span><br>
<span class="sname">Maurya</span>
<div class="line"></div>
<br><br>
<span class="profession">Designer,IN</span>
</div>
</div>
<div class="content">
<div class="left">
<div class="about">
<h3>About</h3>
</div>
<p>Designer at Coding zone,Love to make clean design.</p>
<br>
<div class="icons">
<i class="fa fa-facebook-f"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-github"></i>
<i class="fa fa-linkedin"></i>
</div>
<br>
<div class="btn">
<button class="hireme">Hire Me</button>
<button class="knowMore">Know More</button>
</div>
</div>
<div class="right">
<div>
<h3 class="number">120</h3>
<h4 class="num-val">Projects</h4>
</div>
<div>
<h3 class="number">4.5K</h3>
<h4 class="num-val">Followers</h4>
</div>
<div>
<h3 class="number">9.5K</h3>
<h4 class="num-val">Views</h4>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
*{
margin: 0;
padding:0;
box-sizing: border-box;
font-family: cursive;
}
body{
background-color: #efefef;
}
.container{
padding: 20px;
justify-content: center;
align-items: center;
display: flex;
min-height: 100vh;
}
.card{
position: relative;
height: 550px;
width: 350px;
background-color: #fff;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 5px 15px 1px rgba(0,0,0,0.1);
}
.header{
position: relative;
height: 50%;
width: 100%;
}
.image img{
position: absolute;
width: 100%;
height: 100%;
}
.bar{
position: absolute;
height: 13px;
width:18px;
top: 0.7rem;
left: 0.8rem;
}
.bar .center{
position: absolute;
height: 2px;
width: 70%;
top:50%;
transform: translateY(-50%);
background-color: white;
border-radius: 1px;
}
.bar::before,.bar::after{
content: '';
position: absolute;
height: 2px;
width: 100%;
background-color: white;
border-radius: 1px;
}
.bar::before{
top:0;
}
.bar::after{
bottom:0;
}
.fa-envelope{
position: absolute;
color: #fff;
top: 0.7rem;
right: 0.8rem;
}
.name{
position: absolute;
color: white;
width: 100%;
height: 100%;
top:55%;
left:10%;
font-size: 18px;
}
.line{
position: absolute;
height: 2px;
width: 20%;
background-color: #fd5800;
}
.profession{
color:#fd5800;
}
.content{
display:flex;
padding: 2rem;
}
.left{
margin-right: 2rem;
}
.about{
position: relative;
margin-bottom: 0.5rem;
}
.about::after{
content: '';
position: absolute;
height: 2px;
width: 20%;
background-color: red;
}
.right{
text-align: center;
display:flex;
flex-direction: column;
}
.right div{
margin-bottom: 1rem;
}
.num-val{
font-weight: 400;
font-size: 10px;
text-transform: uppercase;
}
.icons i{
margin-right: 1rem;
}
.content .fa:hover{
transition: 0.5s;
transform: scale(1.5) ;
}
.fa-facebook-f{
color:#3b5998;
}
.fa-twitter{
color:#00acee;
}
.fa-github{
color:#333;
}
.fa-linkedin{
color:#0e76a8;
}
.btn{
margin-right: 2px;
}
.hireme{
color:white;
background-color: #fd5800;
border-radius: 25px;
border: none;
overflow: hidden;
padding: 0.6rem;
}
.hireme:hover{
color:#fd5800;
background-color: white;
border:1px solid #fd5800;
}
.knowMore{
color:#fd5800;
border-radius: 25px;
border: 2px solid #fd5800;
overflow: hidden;
padding: 0.5rem;
}
.knowMore:hover{
color:white;
background-color: #fd5800;
}
@media (max-width:390px){
.content{
flex-direction: column;
}
.right{
flex-direction: row;
text-align: center;
align-items: center;
justify-content: space-around;
margin-top: 1rem;
}
}
Profile card View Image :
Profile card Video :
Check out my YouTube channel for more such videos :
https://www.youtube.com/channel/UCrgTxZY_mtmFV0EpHeaRezg?view_as=subscriber
Follow me on my facebook page
https://www.facebook.com/Coding-Zone-101009098243029/?modal=admin_todo_tour
Post a Comment