Dear friends today we will tell you how to design neumorphism user profile using html, css. It is best ui design and you can make more design using css only because this is the best for designing purpose. We are make more neumorphism designs if you want to learn more and get source code my all creatives and projects. So go to the search bar and type neumorphism user proofile then you can find all neumorphism projects using css and if you want to get source code this article then go to the bottom section and get the html, css source code.
Table of Contents
Popular Articles
How to make progress bar using css?
How to make flipbook using css?
How to make portfolio website with dark mode enable or disable using javascript?
How to create avatar using css only?
How to Start?
First of all learn html, css for design this Neumorphism User Profile and make a best ui project because css is the most important for any web designs. If you want to lean html, css then visit w3school website. It is a best site for learning programing languages and them get the manual try run button. After this doownload visual studio code for coding and install it in your system then you are ready for make it.
UI Design
Now open your vs code editor and go to the right top section and click on file and select new file then save filename.html after this press ctrl+1 then html syntax generate automatically on your editor. This feature inbuild only visual code editor so i suggested you download this editor and make projects easily because it is a best code editor software. And this design for Neumorphism User Profile project make a fast with visual studio code editor.
HTML for this UI
Here we are make html code for ui design so first give the div tag with class like this <div class=”card”> and close it. Then give the more div tag with class like this <div class=”back”> and close it. Then give the again div tag with class and class name is more. This class for set a icon in the right side because make some look in our ui. Now give the one more div tag with class like this <div class=”profile”> and close it. You can give the more div tag with class. Then after that we will take h3 tag in which we can keep the name of our profile and you can put any name according to you in the profile.
After that you will take paragraph tag and set the position of your company in it like we have put software development company in it. Now you have to take a div and set the class in it and we have named the class as social icons, you can also keep your own accordion.
Then you have to take another div inside the social class and give class to it too but in this you have to take class twice. The first class is to be named Facebook and the second class is to be named Social. Similarly, you have to take Twitter for Instagram and YouTube as well.
After that you have to take another div again with class and name this class as btn so that it becomes easy to understand. Then inside it you have to take div. And class also has to be taken, class name has to be kept as message, similarly you have to take a div for subscibe as well. Then you have to take div and put class name bottom icon.
You have to take a div inside it and put the class name like. Then take the icon inside it. And you will find the icon on the Font awesome website. After that you have to take the span tag. And 462k text has to be given in it. Have to take class again. The class name has to be put in commit. Then take the icon inside it. And you will find the icon on the Font awesome website. After that you have to take the span tag. And 173k text has to be given in it.
Have to take another class. The class name is to be shared. Then take the icon inside it. And you will find the icon on the Font awesome website. After that you have to take the span tag. And 148k text has to be given in it.
If you not understand by reading then you can look our html source code and make easily this neumorphism user profile design.
HTML Source Code..
<div class="card">
<div class="back"><i class="fa-solid fa-arrow-left"></i></div>
<div class="more"><i class="fa-solid fa-ellipsis-vertical"></i></div>
<div class="profile"></div>
<h3>Julie Andrson</h3>
<p>Software Development Company</p>
<div class="social-icons">
<div class="facebook all-social"><i class="fa-brands fa-facebook-f"></i></div>
<div class="twitter all-social"><i class="fa-brands fa-twitter"></i></div>
<div class="insta all-social"><i class="fa-brands fa-instagram"></i></div>
<div class="youtube all-social"><i class="fa-brands fa-youtube"></i></div>
</div>
<div class="btn">
<div class="message"><a href="#">Message</a></div>
<div class="subscribe"><a href="#">Subscribe</a></div>
</div>
<div class="bottom-icon">
<div class="like">
<i class="fa-regular fa-heart"></i>
<span>462k</span>
</div>
<div class="comment">
<i class="fa-regular fa-comment"></i>
<span>173k</span>
</div>
<div class="share">
<i class="fa-solid fa-share"></i>
<span>148k</span>
</div>
</div>
</div>CSS for Designing
If you want to give the style then you have three ways for using css. First you can give using inline css and second you can give the internal css and third you can give the external css. But we are using internal css in this project so if you want to choose another way for give the css style then this is depend on of your requirement. Here we are using internal css so go to your starting head tag and give the style tag under head tag in this tag give *{} tag and give margin 0, padding 0, box-sizing border-box. and after this give the body tag in this tag use some properties like background color and display flex, justify-content center, align-items center, min-height 100vh, etc. For more information look the css code given below.
CSS Source Code…
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(213,219,218);
}
.card{
width: 300px;
height: 400px;
border-radius: 7px;
padding: 30px 20px;
box-shadow: 2px 3px 5px rgba(0,0,0,0.2),
-1px -2px 5px rgb(255,255,255);
}
.more{
position: absolute;
top: 140px;
right: 555px;
}
.profile{
width: 100px;
height: 100px;
border: 10px solid rgb(213,219,218);
box-shadow: 2px 3px 5px rgba(0,0,0,0.2),
-1px -2px 5px rgb(255,255,255);
border-radius: 50%;
background-image: url(./Untitled-1\ copy.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
margin-left: 80px;
}
h3{
text-align: center;
margin-top: 10px;
}
p{
text-align: center;
font-size: 12px;
font-weight: 600;
}
.social-icons{
display: flex;
margin: 10px 0 0 25px;
}
.all-social{
margin-left: 10px;
width: 40px;
height: 40px;
font-size: 20px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(213,219,218);
box-shadow: 2px 3px 5px rgba(0,0,0,0.2),
-1px -2px 5px rgb(255,255,255);
}
.facebook{
color: rgb(0,110,255);
}
.twitter{
color: rgb(59,191,214);
}
.insta{
color: rgb(255,0,119);
}
.youtube{
color: rgb(255,0,0);
}
.btn{
display: flex;
margin: 20px 0 0 2px;
}
.message{
width: 120px;
height: 40px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(213,219,218);
box-shadow: 2px 3px 5px rgba(0,0,0,0.2),
-1px -2px 5px rgb(255,255,255);
}
.message a{
font-weight: bold;
font-size: 18px;
color: black;
text-decoration: none;
}
.subscribe{
width: 120px;
height: 40px;
border-radius: 5px;
margin-left: 15px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(213,219,218);
box-shadow: 2px 3px 5px rgba(0,0,0,0.2),
-1px -2px 5px rgb(255,255,255);
}
.subscribe a{
font-weight: bold;
font-size: 18px;
color: black;
text-decoration: none;
}
.bottom-icon{
display: flex;
margin: 30px 0 0 0;
}
.like{
width: 90px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
}
.comment{
width: 90px;
height: 20px;
border-left: 2px solid rgb(187,187,187);
border-right: 2px solid rgb(187,187,187);
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
}
.share{
width: 90px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
}
span{
margin-left: 5px;
font-weight: 600;
}
