How to make Neumorphism Registration Form Using HTML, CSS | Neurophism UI Design.
Neumorphism Registration Form Using HTML, CSS
Hey Friends! Today we are make a beautiful claymorphism Neumorphism Registration Form design using html css only and i hope you like it. Here you can get my all videos source code this source code just phaste in your code editor and save it filename.html
In this article, we will tell you how to make Neumorphism Registration Form Using HTML, CSS. If you like this article of ours, then click on the video given below to watch the video related to this article and also subscribe to our channel.
So let’s know how to make Neumorphism Registration Form.
Read the carefully steps given below.
1.Step
First of all, you have to download a code editor in which we can write our code, we are telling you the names of some code editors, Visual Studio Code, this is the most used and most people use it because some of its features are very Works easily in writing our code quickly and it has built-in tags and properties, with the help of which we make our code very easy.
After this you have to take fonts and icons, in this article we have used ion icons and we have taken fonts from google, if you also want to take fonts and icons, then you can use through this link.
Icons — ion-icons
Fonts — Fonts.Google
After this, you have to open the code editor and save it by selecting a new file and remember that while saving the file, you must write dot html because the browser has to explain it from html itself, without html we can not run any language That’s why it is very important for us to come to html.
2.Step
Now you have to do coding, your file has also been created, now time has come to do your coding, so before starting coding, you must know about html css because whatever code we will write, it is in html and css only. That’s why these languages are very important to you, so let’s start coding now.
Press ctrl + 1 and see the shortcut feature of Visual Studio Code in front of you, using which makes our work easy and very quick, when you do ctrl + 1, then the complete syntax of html will open in front of you, using which we create a website We can create web applications, all the code that is written is written inside it, so it is very important for us to learn html if we want to become a web developer, then well then we know how login form design from further coding do.
3.Step
Let us know that how to make the Numorphism registration form, then friends, we will first take a form tag and give it class signup, then we will take the h2 tag inside the form and put the title of the form in it, after that we will take the user icon and this icon will give us The above is to be taken by ionicon, then we have to take the input tag and put its type text and give it a placeholder and enter the username in it, after that again we have to bring the mail icon from ionicon and put it inside the form, after that we have to take input tag and keep its type email then we have to put placeholder in it in which to enter email again we have to go to ionicons and this time we have to bring lock icon then this too We will put it inside the form then you have to take another div and put its class checkbox then inside it we have to take input.
And in its type we have to put checkbox then take a p tag and in it we have to write text like i accept terms & conditions then we will come out of checkbox class and inside the form we have to take button and its name is SIGN UP is to be placed then below it we have to take span tag and in this we have to take an anchor tag by keeping I have already account and we have to put Sign In in it.
Then after that we have to take another div and put its class social icon then we have to take div inside it and put its class facebook, after that we have to click on ionics link and bring facebook icon similarly we have to twitter Instagram is also the lane of Google’s icon and give them a class and then put them inside the class.
HTML Code.
<form>
<h2>Create Account</h2>
<ion-icon name="person-outline"></ion-icon>
<input type="text" placeholder="Username"><br><br>
<ion-icon name="mail-outline"></ion-icon>
<input type="email" placeholder="Email"><br><br>
<ion-icon name="lock-closed-outline"></ion-icon>
<input type="password" placeholder="Password"><br>
<div>
<input type="checkbox">
<p>I accept terms & conditions</p>
</div>
<button>SIGN UP</button><br><br>
<span>already have a account/<a href="#">Sign In</a></span>
<div>
<div>
<ion-icon name="logo-facebook"></ion-icon>
</div>
<div>
<ion-icon name="logo-twitter"></ion-icon>
</div>
<div>
<ion-icon name="logo-instagram"></ion-icon>
</div>
<div>
<ion-icon name="logo-google"></ion-icon>
</div>
</div>
</form>4.Step
Now we have to style our form, so let’s know how to start styling, then we use css to style our page, which makes any of our projects beautiful, then we use css in 3 ways can do
1. Inline CSS
2. Internal CSS
3. External CSS
We are putting the style file below, you can copy it and put it with this html code and we have used internal css in this project, so you can use it by making external css file as well.
CSS 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(236, 238, 238);
}
.signup{
padding: 30px 40px 30px 40px;
background: rgb(236, 238, 238);
border-radius: 10px;
box-shadow: 2px 3px 3px rgba(0,0,0,0.349),
-2px -3px 5px #fff;
}
.signup h2{
text-align: center;
color: rgb(0, 119, 255);
margin-bottom: 30px;
}
.signup .field{
background: none;
padding-left: 10px;
border: none;
outline: none;
width: 100%;
height: 35px;
border-radius: 10px;
box-shadow: inset 2px 3px 3px rgba(0,0,0,0.349),
inset -2px -3px 5px #fff;
}
.signup .checkbox{
display: flex;
}
.signup .checkbox input{
margin-top: 15px;
width: 15px;
height: 15px;
}
.signup .checkbox p{
margin: 10px 0 0 10px;
font-weight: 600;
}
.signup button{
width: 100%;
height: 35px;
margin-top: 20px;
border-radius: 10px;
border: none;
background-color: rgb(236, 238, 238);
box-shadow: 2px 3px 3px rgba(0,0,0,0.349),
-2px -3px 5px #fff;
font-size: 15px;
letter-spacing: 1px;
font-weight: bold;
color: rgb(0, 119, 255);
cursor: pointer;
transition: all 0.4s;
}
.signup button:hover{
background-color: rgb(0, 119, 255);
color: white;
}
.signup span{
font-size: 15px;
font-weight: 600;
}
.signup .social-icon{
display: flex;
margin: 30px 0 0 30px;
}
.signup .social-icon .facebook{
width: 40px;
height: 40px;
background-color: rgb(236, 238, 238);
box-shadow: 2px 3px 3px rgba(0,0,0,0.349),
-2px -3px 5px #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: rgb(61, 60, 60);
margin-right: 10px;
transition: all 0.4s;
}
.signup .social-icon .facebook:hover{
background-color: rgb(0, 83, 179);
color: #fff;
}
.signup .social-icon .twitter{
width: 40px;
height: 40px;
background-color: rgb(236, 238, 238);
box-shadow: 2px 3px 3px rgba(0,0,0,0.349),
-2px -3px 5px #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: rgb(61, 60, 60);
margin-right: 10px;
transition: all 0.4s;
}
.signup .social-icon .twitter:hover{
background-color: rgb(2, 206, 241);
color: #fff;
}
.signup .social-icon .instagram{
width: 40px;
height: 40px;
background-color: rgb(236, 238, 238);
box-shadow: 2px 3px 3px rgba(0,0,0,0.349),
-2px -3px 5px #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: rgb(61, 60, 60);
margin-right: 10px;
transition: all 0.4s;
}
.signup .social-icon .instagram:hover{
background-color: rgb(228, 0, 76);
color: #fff;
}
.signup .social-icon .google{
width: 40px;
height: 40px;
background-color: rgb(236, 238, 238);
box-shadow: 2px 3px 3px rgba(0,0,0,0.349),
-2px -3px 5px #fff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: rgb(61, 60, 60);
transition: all 0.4s;
}
.signup .social-icon .google:hover{
background-color: rgb(179, 0, 9);
color: #fff;
}
.signup .user{
position: absolute;
top: 172px;
right: 575px;
color: rgb(100, 98, 98);
}
.signup .mail{
position: absolute;
top: 232px;
right: 575px;
color: rgb(100, 98, 98);
}
.signup .lock{
position: absolute;
top: 292px;
right: 575px;
color: rgb(100, 98, 98);
}Watch video related this article…
