In this article, I will show you how you can create a profile card of Neumorphism design using only HTML and CSS programming code. Neumorphism is a very popular design that is designed using CSS programming code.
Earlier I have shown many Neumorphism designs like a calculator, clock, login form, etc. You can see these if you want. In this case, a shadow is created on a white page using CSS code. That shadow is sorted into the shape of anything. Here I have basically arranged it in the form of a UI design profile card. I have included all the features of a normal profile card. Here you can organize all your information very nicely. There is room to share your picture, name, qualification, description, link to social media account, etc. Hope you like this design and you will get all the source code to make it completely free from this article.
Some special information about this Neumorphism profile card
➤ I designed it using only HTML and CSS programming code. This profile is structured with HTML code and sorted using CSS code in the form of Neumorphism and UI design.
➤ Like normal cards, names, pictures, descriptions, social media platform buttons, etc. are all here.
➤ Below is a place to message and there is an option to subscribe to this card.
➤ Below are options to show how many people have liked, how many have commented, and how many have shared.
➤ This is a complete Neumorphism design profile that is fully Responsive and Professional. It will work nicely on any device.
How to make this Neumorphism profile card
To create it, first, you need to create an HTML file. For this, you open any text editor. Then save it with OT dot HTML without typing anything. Below I have given a structure, copy it, and add it to your HTML file.
There I showed you how to add any code. You can download the required code by clicking on the download button above. Then you add the HTML code in the place where the add HTML code is written in the above structure. Add the CSS code to the place where the add CSS code is written.
Below I have shown what code I used to create this Neumorphism profile card. The following tutorial will help you to know the codes for each element.
Make construct
The following programming codes were originally used to construct this profile card.
<div class="wrapper"></div>
@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;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: #ecf0f3;
} /*rapper .img-area{height: 150px;width: 150px;border-radius: 50%;isplay: flex;lign-items: center;stify-content: centermg-area .inner-area height: calc(100% - 25px);idth: calc(100% - 25px);order-radius: 50%;inner-area img{eight: 100%;dth: 100%;border-radius: 50%;*/
.wrapper,
.wrapper .img-area,
.social-icons a,
.buttons button{
background: #ecf0f3;
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;
}
Add images, names, qualification
The following programming codes have been used to add images, names, and qualification profile cards.
<div class="name">SHANTANU JANA </div>
<div class="about"> <i class="fa fa-desktop" aria-hidden="true"></i>
CODER,DESIGNER,DEVELOPER FOUNDER CEO
<br><i class="fa fa-building" aria-hidden="true"></i> HP IT GROUP (TEBIM TEBITAGEM) TTGRT
</div>
.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); /*rapper .img-area{height: 150px;width: 150px;border-radius: 50%;isplay: flex;lign-items: center;stify-content: centermg-area .inner-area height: calc(100% - 25px);idth: calc(100% - 25px);order-radius: 50%;inner-area img{eight: 100%;dth: 100%;border-radius: 50%;*/
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{ /*rapper .img-area{height: 150px;width: 150px;border-radius: 50%;isplay: flex;lign-items: center;stify-content: centermg-area .inner-area height: calc(100% - 25px);idth: calc(100% - 25px);order-radius: 50%;inner-area img{eight: 100%;dth: 100%;border-radius: 50%;*/
color: #44476a;
font-weight: 400;
font-size: 16px;
}
Social media buttons
I made the social media buttons at the bottom of Amicard using the following programming codes. Here I have basically used the buttons of four social media platforms.
<div class="social-icons">
<a href="https://harunpehlivantebimtebitagem.carrd.co/" class="gl"><i class="fab fa fa-globe"></i></a>
<a href="https://facebook.com/100008152065270" class="facebook"><i class="fab fa-facebook"></i></a>
<a href="https://tr.pinterest.com/harunpehlivanit/" class="insta"><i class="fab fa-pinterest"></i></a>
<a href="http://harunpehlivan.blogspot.com/" class="yt"><i class="fab fa fa-rss"></i></a>
</div>
.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, /*rapper .img-area{height: 150px;width: 150px;border-radius: 50%;isplay: flex;lign-items: center;stify-content: centermg-area .inner-area height: calc(100% - 25px);idth: calc(100% - 25px);order-radius: 50%;inner-area img{eight: 100%;dth: 100%;border-radius: 50%;*/
.buttons button:hover:before{
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 50%;
background: #ecf0f3;
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; /*rapper .img-area{height: 150px;width: 150px;border-radius: 50%;isplay: flex;lign-items: center;stify-content: centermg-area .inner-area height: calc(100% - 25px);idth: calc(100% - 25px);order-radius: 50%;inner-area img{eight: 100%;dth: 100%;border-radius: 50%;*/
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;
}
Subscribe button
I made two buttons using the following programming codes. If you look at the profile card you will see at the bottom there are two buttons for texting and subscribing. I used the following code to make those buttons.
<div class="buttons">
<button>Message</button>
<button>Subscribe</button>
</div>
.wrapper .buttons{
display: flex;
width: 100%; /*rapper .img-area{height: 150px;width: 150px;border-radius: 50%;isplay: flex;lign-items: center;stify-content: centermg-area .inner-area height: calc(100% - 25px);idth: calc(100% - 25px);order-radius: 50%;inner-area img{eight: 100%;dth: 100%;border-radius: 50%;*/
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;
} /*rapper .img-area{height: 150px;width: 150px;border-radius: 50%;isplay: flex;lign-items: center;stify-content: centermg-area .inner-area height: calc(100% - 25px);idth: calc(100% - 25px);order-radius: 50%;inner-area img{eight: 100%;dth: 100%;border-radius: 50%;*/
.buttons button:last-child{
margin-left: 10px;
}
likes, comments, and shares counter
If you look at the profile card, you will see that below all I have given an option to show the number of likes, comments, and shares. The following HTML and CSS programming codes have been used to create it.
<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>
.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: ""; /*rapper .img-area{height: 150px;width: 150px;border-radius: 50%;isplay: flex;lign-items: center;stify-content: centermg-area .inner-area height: calc(100% - 25px);idth: calc(100% - 25px);order-radius: 50%;inner-area img{eight: 100%;dth: 100%;border-radius: 50%;*/
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{ /*rapper .img-area{height: 150px;width: 150px;border-radius: 50%;isplay: flex;lign-items: center;stify-content: centermg-area .inner-area height: calc(100% - 25px);idth: calc(100% - 25px);order-radius: 50%;inner-area img{eight: 100%;dth: 100%;border-radius: 50%;*/
opacity: 1;
pointer-events: auto;
}
Add top icon
The following programming codes have been used to create two icons. The profile card has two icons on the top left and on the right. I used the following HTML and CSS programming code to create those icons.
.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; /*rapper .img-area{height: 150px;width: 150px;border-radius: 50%;isplay: flex;lign-items: center;stify-content: centermg-area .inner-area height: calc(100% - 25px);idth: calc(100% - 25px);order-radius: 50%;inner-area img{eight: 100%;dth: 100%;border-radius: 50%;*/
}
.wrapper .icon.dots{
right: 15px;
}
Hopefully, the other tutorial has completely helped you to learn how to make this Neumorphism profile card. If you have any problem in making this profile card, you can definitely let me know by commenting. I will help you completely.
![Make Racing Car Game [Using JavaScript Code Only]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjrVmbtoZxLonUlDyWpFe9gEe9Z1b2zrrfm4i5dwOqw2YQ41SElTjXTvhWSxHTwMQBmWmFMoKTSxUtGc3hAjOh6T-8jMXBlvbXOnaGHq8RP74rRlg4mPR4EuER3Yhb5My-reWpoARLnS8/w680/Make+Racing+Car+Game+%255BUsing+JavaScript+Code+Only%255D.jpg)
