Make A Neumorphism Design Profile Card

Hello readers, today in this blog you will learn how to make you own a neumorphism style profile card. I have shared a profile card design before, if you are interested too so you can visit here.

What is Neumorphism design?

Neumorphism is a new take on skeuomorphic design. Even though it relates to skeuomorphism, there is a new focus in the entire UI design style with neumorphism. This focus is not necessarily on the contrast or similarity between the real and digital worlds, but rather the color palette.

Yes, you read that right. Neumorphism is all about the color of the entire screen, and delivering an entirely unique experience for users

Tutorial

Now we are going to sharing the tutorial about how to make a neumorphism profile card. Firstly, you need to create a html which is empty. And then, just copy and paste the following code.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" href="style.css" type="text/css" media="all" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/codingworldtools/icons@v1.7.2/font/bootstrap-icons.css" type="text/css" media="all" />
   <title>Neumorphism Profile Card</title>
</head>
<body>
   <div class="wrapper">
      <div class="header">
         <div class="img">
         <img src="avatar.png" alt="avatar">
         </div>
         <p class="name">John Doe <br> <span>Web Designer & YouTuber</span></p>
      </div>
      <div class="content">
         <div class="myemail">
           <span>codingworld35@gmail.com</span>
         </div>
         <div class="btns">
            <div class="subscribe">
               <span>Follow</span> <i class="bi-bell"></i>
            </div>
            <div class="share">
               <span>Share</span> <i class="bi-box-arrow-up-right"></i>
            </div>
         </div>
         <div class="footer">
            <div class="links">
               <a href="">
                  <i class="bi-globe"></i>
               </a>
            </div>
            <div class="links">
               <a href="">
                  <i class="bi-github"></i>
               </a>
            </div>
            <div class="links">
               <a href="">
                  <i class="bi-youtube"></i>
               </a>
            </div>
            <div class="links">
               <i class="bi-twitter"></i>
            </div>
         </div>
      </div>
   </div>
</body>
  </html>

Now we are done for the html. Next we need to create a css extension file to design our profile card which is already done in html. Copy and paste the following code to your css extension file.

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap');
*{
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-family: 'Nunito', sans-serif;
}
body{
   background: #ecf0f3;
   display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.wrapper{
   width: 335px;
   height: 500px;
   background: #ecf0f3;
   box-shadow: -3px -3px 7px #ffffff,
               3px 3px 5px #ceced1;
   border-radius: 10px;
}
div.header{
   width: 100%;
   height: 200px;
   margin-top: 25px;
}
.img{
   width: 140px;
   height: 140px;
   border-radius: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   background: #f0f5f5;
   box-shadow:  10px 10px 20px #d3d8d8,
             -10px -10px 20px #ffffff;
   margin-left: 90px;
}
.header img{
   width: 120px;
   border-radius: 100%;
   text-align: center;
}
p.name{
   width: 100%;
   text-align: center;
   margin-top: 15px;
   font-size: 26px;
   font-weight: bold;
   color: #50515F
}
p.name span{
   font-size: 14px;
   color: #7C7D8F
}
div.content{
   width: 100%;
   height: 225px;
   margin-top: 30px;
   text-align: center;
   position: relative;
}
.myemail{
   width: 75%;
   height: 35px;
   margin-left: 12.5%;
   position: absolute;
   top: 15px;
   border-radius: 5px;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #7C7D8F;
   background: #f0f5f5;
   box-shadow: inset 5px 5px 10px #d6dada,
            inset -5px -5px 10px #ffffff;
}
.btns{
   width: 100%;
   height: 80px;
   position: absolute;
   top: 70px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
}
.share,.subscribe{
   width: 110px;
   height: 45px;
   margin: 0 15px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 5px;
   background: linear-gradient(145deg, #ffffff, #d8dddd);
   box-shadow:  5px 5px 11px #c7cbcb,
             -5px -5px 11px #ffffff;
   color: #50515F;
}
.share:hover,.subscribe:hover{
   border-radius: 5px;
   background: #f0f5f5;
   box-shadow: inset 5px 5px 11px #c7cbcb,
            inset -5px -5px 11px #ffffff;
   color: #7C7D8F;
}
.btns i{
   padding-left: 10px;
}
.footer{
   width: 100%;
   height: 70px;
   position: absolute;
   bottom: -5px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: row;
}
.links{
   width: 50px;
   height: 50px;
   background: #f0f5f5;
   border-radius: 100%;
   box-shadow:  10px 10px 20px #d3d8d8,
             -10px -10px 20px #ffffff;
   margin: 0 15px;
   display: flex;
   justify-content: center;
   align-items: center;
}
.links i{
   font-size: 22px;
}
a{
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   color: #50515F;
}

It's all done now. Just run your file and you will see the result.

Download ZIP

Here you can download the zip file for the source code if you don't want to copy and paste the file.

Download Files

Please wait..

If the download didn't start automatically, click here.

Make A Neumorphism Design Profile Card

What is Neumorphism design?

Tutorial

Download ZIP

Post a Comment