How To Make a Stylish Neumorphism Profile Card UI Design

In this article I have shared a tutorial on How To Make a Stylish Neumorphism Profile Card UI Design

Hello Guys ! Welcome to Techy DarshaN . Today we are sharing tutorial on how To Stylish Neumorphism Profile Card UI Design in Blogger site .

Pros : 

1. New Profile Look
2. UI Design is very Smooth and Nice
3. Very Responsive

Now Lets Start !

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/AVvXsEjw2YEHSvwcjaIw1PWel42YrKqE_Red2JjXBUmvdpZW4yht2iySQNiEazveioSEoN4Eyb-2lEp97ni_uvIfBAju78w1u943diMN4NtxgivoYwIOUcM4zAenntETUq-fwKGSAczMzewdU_U/h120/Techy+DarshaN+%25281%2529.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">Techy DarshaN</div>
    <div class="about">Designer &amp; Developer</div>
    <div class="social-icons">
      <a class="fb" href="https://www.facebook.com/Techy-DarshaN-101915209027545"><i class="fab fa-youtube-square"></i></a>
      <a class="twitter" href="https://t.me/TechyDarshaN"><i class="fab fa-twitter"></i></a>
      <a class="insta" href="https://www.youtube.com/channel/UCxznbSS24UWGcF_9g4tJgVw"><i class="fab fa-instagram"></i></a>
      <a class="yt" href="https://www.youtube.com/channel/UCxznbSS24UWGcF_9g4tJgVw"><i class="fab fa-facebook"></i></a>
    </div>
    <div class="buttons">
      <button><a href="&lt;a href=&quot;https://www.youtube.com/channel/UCxznbSS24UWGcF_9g4tJgVw&quot; class=&quot;yt&quot;&gt;">Message</a></button>
      <button><a href="&lt;a href=&quot;https://www.youtube.com/channel/UCxznbSS24UWGcF_9g4tJgVw&quot; class=&quot;yt&quot;&gt;">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.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>


<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 we have talked about How To Stylish Neumorphism Profile Card UI Design for Blogger. I hope you like this article and please follow our blog for daily post like this and tell us what you say about the post and if you have any questions you can Contact us or let me in the comments