Follow us to get updates regarding Latest posts Follow Now!

How To Make a Stylish Neumorphism Profile Card UI Design

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 bl

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

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://lh3.googleusercontent.com/-txpt79arYDI/Yby-lTXZOeI/AAAAAAAAFcs/_hARErDPdSYu5Rk_-MT7GfWB2hISXlSPwCNcBGAsYHQ/h120/Techy%2BDarshaN%2B%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

Getting Info...

About the Author

Student | Developer | Blogger

2 comments

  1. Awesome content...and website appearance is nyc...
    please visit
    https://www.techandfunzone.eu.org/
    1. Thanks
Techy DarshaN's Rules : Leave your opinion or any doubt about this article And is you have any queries please feel free to ask. Don't try to spam, our team reviews every comment.
Have a Cookie!
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.