Claymorphism Login Form
Hey Friends! Today we are make a beautiful claymorphism login page 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 clamorfism login page, 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 climorphism login page using html css and javascript.
Popular Articles.
How to create navbar using html, css for your website?
How to make neumorphism clock using html, css and javascipt?
How to make Tea Cup with Bapour Animation using css only?
How to Design Responsive Footer for any website using html, css ?
How to make user profile like a instagram using html, css?
How to design music player with animation using html, css?
Dear friends i hope you understand about html and css because it is create by html, css. So first lean the html, css from w3school. It is the best site for web developement because here you can run code on the live so that is the best for students. If you understand about html and css so you can read this article for make easily claymorphism login page. First read the carefully all steps give below because we will tell you step by step and i hope you like our article and copy all source code related this article and paste your code editor for make easily without create manually.
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 login page with 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 then you can make login page.
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
First of all you have to take div and give it a class and save it by keeping class name as container then you have to take form tag inside it you have to take h3 heading and save it by keeping title of form, after that you have to take div again and its The class name is to be named iconbox, then inside it you have to take the span tag and put a label in it, then take another div tag and save its class name by keeping the box, then take another div tag and save its class name by placing the icon. Then put the user icon inside it and then save it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Claymorphism Login Form</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Poppins:wght@200&family=Righteous&family=Russo+One&family=Ubuntu+Mono&display=swap');
*{
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: #2f363e;
}
.container{
position: relative;
width: 350px;
min-height: 500px;
display: flex;
justify-content: center;
align-items: center;
background: #2f363e;
box-shadow: 25px 25px 75px rgba(0,0,0,0.25),
10px 10px 70px rgba(0,0,0,0.25),
inset 5px 5px 10px rgba(0,0,0,0.5),
inset 5px 5px 20px rgba(255,255,255,0.2),
inset -5px -5px 15px rgba(0,0,0,0.75);
border-radius: 30px;
padding: 50px;
}
.container form{
position: relative;
width: 100%;
}
.container form h3{
color: #fff;
font-weight: 600;
font-size: 2em;
width: 100%;
text-align: center;
margin-bottom: 30px;
text-transform: uppercase;
}
.inputBox{
position: relative;
width: 100%;
margin-bottom: 20px;
}
.inputBox span{
display: inline-block;
color: #fff;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.75em;
border-left: 4px solid #fff;
padding-left: 4px;
line-height: 1em;
}
.inputBox .box{
display: flex;
}
.inputBox .box .icon{
position: relative;
min-width: 40px;
height: 40px;
background-color: #ff2c74;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
margin-right: 10px;
color: #fff;
font-size: 1.15em;
box-shadow: 5px 5px 7px rgba(0,0,0,0.25),
inset 2px 2px 5px rgba(255,255,255,0.25),
inset -3px -3px 5px rgba(0,0,0,0.5);
}
.inputBox .box input{
position: relative;
width: 100%;
border: none;
outline: none;
padding: 10px 20px;
border-radius: 30px;
box-shadow: 5px 5px 7px rgba(0,0,0,0.25),
inset 2px 2px 5px rgba(255,255,255,0.25),
inset -3px -3px 5px rgba(0,0,0,0.5);
}
label{
color: #fff;
}
button{
position: relative;
width: 100%;
height: 40px;
border: none;
border-radius: 30px;
padding: 10px 20px;
background-color: #1f83f2;
box-shadow: 5px 5px 7px rgba(0,0,0,0.25),
inset 2px 2px 5px rgba(255,255,255,0.25),
inset -3px -3px 5px rgba(0,0,0,0.5);
color: #fff;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
margin-top: 20px;
}
.forgot{
margin: 10px 0 0 60px;
font-size: 15px;
color: #1f83f2;
}
</style>
</head>
<body>
<div>
<form>
<h3>Log IN</h3>
<div>
<span>Username</span>
<div>
<div><ion-icon name="person"></ion-icon></div>
<input type="text">
</div>
</div>
<div>
<span>Password</span>
<div>
<div><ion-icon name="lock-closed"></ion-icon></div>
<input type="password">
</div>
</div>
<label>
<input type="checkbox"> Remember me
</label>
<button>Log In</button>
<a href="#">Forgot Password</a>
</form>
</div>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>Watch video related this article…
