Hello Guys ! Welcome to FreemiumTech website. How are you all? Hope you all are well. Today we are sharing tutorial on how To create a Stylish Neumorphism Profile Card UI Design in Blogger site. So further any delay let's begin.
Features :
- New Profile Look
- UI Design is very Smooth and Nice
- Very Responsive
Now Let's have a Look !
How To Make Stylish Neumorphism Profile Card UI Design :
Step 1 : Go to Your Blogger's dashboard
Step 2 : Create a new post/page or edit a existing Post/Page
Step 3 : Click on the pen button on the top left side and then switch to HTML View
Step 4 : Copy and paste the code given below
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<div class="wrapper">
<div class="img-area">
<div class="inner-area">
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicdoDw2jDNVo0E5JmTP9ad499EvNRHELFoO9Hf9vbK5Zz-41Zq32UUoMMn93ReHGi72C1O_V8T0awFf9FStc31dYcjza-QhLyH9yLFO7WwYGhS_a9Y0Txkw2T8QylvTrfIysxwC3y_rSlEmlxbFXX85-_NL_1-a4nuAKi2sHEQAgbaTD8befa7gs5DUw/s320/20221013_073801.png" />
</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">Freemium Tech</div>
<div class="about">Designer & Blogger</div>
<div class="social-icons">
<a class="fb" href="https://t.me/Freemium_Tech"><i class="fab fa-youtube-square"></i></a>
<a class="twitter" href="https://twitter.com/asmaulhoqueneil"><i class="fab fa-twitter"></i></a>
<a class="insta" href="https://instagram.com/asmaulhoqueneil"><i class="fab fa-instagram"></i></a>
<a class="yt" href="https://facebook.com/asmaulofficial"><i class="fab fa-facebook"></i></a>
</div>
<div class="buttons">
<button><a href="<a href="https://t.me/Freemium_Tech; class="yt">">Message</a></button>
<button><a href="<a href="https://t.me/Freemium_Tech; class="yt">">Subscribe</a></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.8k</span>
</div>
<div class="row">
<i class="far fa-comment"></i>
<i class="icon-2 fas fa-comment"></i>
<span>10.5k</span>
</div>
<div class="row">
<i class="fas fa-share"></i>
<span>11.5k</span>
</div>
</div>
</div>
<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}.wrapper,.wrapper .img-area,.social-icons a,.buttons button{background:#ffffff;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:#ffffff;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}
</style>
Step 5 : Edit my name and change my social links to your social links
Step 6 : Also you can change the icons I used with help of Font Awesome
Step 7 : Then Save Post
Conclusion
In this post I have made a tutorial about How to Make a Stylish Neumorphism Profile Card UI Design. I hope you have liked it and please share with your friends and follow our blog for more.If you face any problems in this code or have any questions so feel free to ask me in comments section or join our Telegram Group for discussion.
Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.