Profile Card Neumorphism:-
Hello friends, as you know that we upload many coding projects, that too for free so that you can learn coding easily. Let us discuss the topic of today's coding project. If you want to create project html and css as shown in the image above then copy the code below and paste it on your code runner.
Input:-
<!DOCTYPE html>
<!-- Created By Priyanshu Sharma - Techsamratps.blospot.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Neumorphism Profile Card | Priyanshu Sharma</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
<div class="img-area">
<div class="inner-area">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoc8qiaugvtOy58JRhKbOy5z7o3Lc8Av4LLJE5vaOVKkhY-jwKtmrnkMarAYTPb87MDLJ2pcUeOGwQR0mmVmp0C3mMYN93aaKIRO_hgEc-o2hbnG_s51vUdKPnuxz4b_3LmVnnace2ULI/s113/FB_IMG_1595567622837.jpg" alt="">
</div>
</div>
<div class="icon arrow"><i class="fas fa-arrow-left"></i></div>
<div class="icon dots"><i class="fas fa-ellipsis-v"></i></div>
<div class="name">Priyanshu Sharma</div>
<div class="about">Designer & Developer</div>
<div class="social-icons">
<a href="#" class="fb"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
<a href="#" class="insta"><i class="fab fa-instagram"></i></a>
<a href="#" class="yt"><i class="fab fa-youtube"></i></a>
</div>
<div class="buttons">
<button>Message</button>
<button>Subscribe</button>
</div>
<div class="social-share">
<div class="row">
<i class="far fa-heart"></i>
<i class="icon-2 fas fa-heart"></i>
<span>20.4k</span>
</div>
<div class="row">
<i class="far fa-comment"></i>
<i class="icon-2 fas fa-comment"></i>
<span>14.3k</span>
</div>
<div class="row">
<i class="fas fa-share"></i>
<span>12.8k</span>
</div>
</div>
</div>
<div class="footer"><p class="footer-text">Created By <a href="https://techsamratps.blogspot.com" class="footer-link">Priyanshu Sharma</a></p></div>
</body>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 95vh;
background: #ecf0f3;
}
.wrapper,
.wrapper .img-area,
.social-icons a,
.buttons button{
background: #ecf0f3;
box-shadow: -3px -3px 7px #ffffff,
3px 3px 5px #ceced1;
}
.wrapper{
position: relative;
width: 350px;
padding: 30px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.wrapper .icon{
font-size: 17px;
color: #31344b;
position: absolute;
cursor: pointer;
opacity: 0.7;
top: 15px;
height: 35px;
width: 35px;
text-align: center;
line-height: 35px;
border-radius: 50%;
font-size: 16px;
}
.wrapper .icon i{
position: relative;
z-index: 9;
}
.wrapper .icon.arrow{
left: 15px;
}
.wrapper .icon.dots{
right: 15px;
}
.wrapper .img-area{
height: 150px;
width: 150px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.img-area .inner-area{
height: calc(100% - 25px);
width: calc(100% - 25px);
border-radius: 50%;
}
.inner-area img{
height: 100%;
width: 100%;
border-radius: 50%;
object-fit: cover;
}
.wrapper .name{
font-size: 23px;
font-weight: 500;
color: #31344b;
margin: 10px 0 5px 0;
}
.wrapper .about{
color: #44476a;
font-weight: 400;
font-size: 16px;
}
.wrapper .social-icons{
margin: 15px 0 25px 0;
}
.social-icons a{
position: relative;
height: 40px;
width: 40px;
margin: 0 5px;
display: inline-flex;
text-decoration: none;
border-radius: 50%;
}
.social-icons a:hover::before,
.wrapper .icon:hover::before,
.buttons button:hover:before{
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
background: #ecf0f3;
box-shadow: inset -3px -3px 7px #ffffff,
inset 3px 3px 5px #ceced1;
}
.buttons button:hover:before{
z-index: -1;
border-radius: 5px;
}
.social-icons a i{
position: relative;
z-index: 3;
text-align: center;
width: 100%;
height: 100%;
line-height: 40px;
}
.social-icons a.fb i{
color: #4267B2;
}
.social-icons a.twitter i{
color: #1DA1F2;
}
.social-icons a.insta i{
color: #E1306C;
}
.social-icons a.yt i{
color: #ff0000;
}
.wrapper .buttons{
display: flex;
width: 100%;
justify-content: space-between;
}
.buttons button{
position: relative;
width: 100%;
border: none;
outline: none;
padding: 12px 0;
color: #31344b;
font-size: 17px;
font-weight: 400;
border-radius: 5px;
cursor: pointer;
z-index: 4;
}
.buttons button:first-child{
margin-right: 10px;
}
.buttons button:last-child{
margin-left: 10px;
}
.wrapper .social-share{
display: flex;
width: 100%;
margin-top: 30px;
padding: 0 5px;
justify-content: space-between;
}
.social-share .row{
color: #31344b;
font-size: 17px;
cursor: pointer;
position: relative;
}
.social-share .row::before{
position: absolute;
content: "";
height: 100%;
width: 2px;
background: #e0e6eb;
margin-left: -25px;
}
.row:first-child::before{
background: none;
}
.social-share .row i.icon-2{
position: absolute;
left: 0;
top: 50%;
color: #31344b;
transform: translateY(-50%);
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
}
.row:nth-child(1):hover i.fa-heart,
.row:nth-child(2):hover i.fa-comment{
opacity: 1;
pointer-events: auto;
}
.footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height:50px;
margin: 10px 0 10px 0;
font-size: 20px;
text-align:center;
color: white;
box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
-6px -6px 10px -1px rgba(255,255,255,0.7);
border: 1px solid rgba(0,0,0,0);
transition: transform 0.5s;
background: #24cfaa;
border: 1px solid #24cfaa;
}
.footer:hover{
background-color: #fa6060;
}
.footer-text{
margin: 10.1px 0;
font-family: sans-serif;
}
.footer-link{
color: #ffffff;
text-decoration: none;
margin-right:5px;
}
.footer-link:hover{
color:#24cfaa;
}
</style>
</html>
----------------------------------------------------------------------------------
If you want input of any other project, then visit our website and if any project which you think should be in our website, then comment and if you want to share your project with us, then email it to us.
Let us tell you that when you send your project to us, then send a screenshot of the project with it and send a photo and name along with it that you want to show to the public.
Published By :-
Priyanshu Sharma
Priyanshu Sharma
0 Comments