Neumorphism Login Form:-
Hello friends, as you know that we upload many coding projects, that too for free so that you can learn coding easily. Let us discuss the topic of today's coding project. If you want to create project html and css as shown in the image above then copy the code below and paste it on your code runner.
Input:-
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet">
</head>
<body>
<div class="login-form-design">
<div class="form-logo-image"><img class="logo" src="E:\my all tools\font-awesome\fontawesome-free-5.15.3-web\svgs\solid\user.svg"></div>
<div class="large-text-title">Login Here</div>
<div class="input-fields">
<div class="username"><svg fill="#999" viewBox="0 0 1024 1024"><path class="path1" d="M896 307.2h-819.2c-42.347 0-76.8 34.453-76.8 76.8v460.8c0 42.349 34.453 76.8 76.8 76.8h819.2c42.349 0 76.8-34.451 76.8-76.8v-460.8c0-42.347-34.451-76.8-76.8-76.8zM896 358.4c1.514 0 2.99 0.158 4.434 0.411l-385.632 257.090c-14.862 9.907-41.938 9.907-56.802 0l-385.634-257.090c1.443-0.253 2.92-0.411 4.434-0.411h819.2zM896 870.4h-819.2c-14.115 0-25.6-11.485-25.6-25.6v-438.566l378.4 252.267c15.925 10.618 36.363 15.925 56.8 15.925s40.877-5.307 56.802-15.925l378.398-252.267v438.566c0 14.115-11.485 25.6-25.6 25.6z"></path></svg><input type="username" class="user-input" placeholder="username" /></div>
<div class="password"><svg fill="#999" viewBox="0 0 1024 1024"><path class="path1" d="M742.4 409.6h-25.6v-76.8c0-127.043-103.357-230.4-230.4-230.4s-230.4 103.357-230.4 230.4v76.8h-25.6c-42.347 0-76.8 34.453-76.8 76.8v409.6c0 42.347 34.453 76.8 76.8 76.8h512c42.347 0 76.8-34.453 76.8-76.8v-409.6c0-42.347-34.453-76.8-76.8-76.8zM307.2 332.8c0-98.811 80.389-179.2 179.2-179.2s179.2 80.389 179.2 179.2v76.8h-358.4v-76.8zM768 896c0 14.115-11.485 25.6-25.6 25.6h-512c-14.115 0-25.6-11.485-25.6-25.6v-409.6c0-14.115 11.485-25.6 25.6-25.6h512c14.115 0 25.6 11.485 25.6 25.6v409.6z"></path></svg><input type="password" class="pass-input" placeholder="password" /></div>
</div>
<button class="signin-button">Login</button>
<div class="link">
<a href="#">Forgot Password</a>
</div>
</div>
<div class="footer"><p class="footer-text">Created By <a href="https://wbpscode.blogspot.com" class="footer-link">Wbps Code</a>
</div>
</body>
<style>
* {
box-sizing: content-box;
}
body {
margin:0;
height: 100%;
width: 100%;
overflow: hidden;
font-family: monospace;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
color:#555;
background: #ecf0f3;
padding-top: 40px;
}
.login-form-design {
width:550px;
height: 310px;
padding: 90px 50px 17px 17px;
border-radius: 40px;
background: #ecf0f3;
box-shadow: 13px 13px 20px #cbced1,
-13px -13px 20px #ffffff;
}
.form-logo-image {
width:81px;
height: 81px;
border-radius: 60%;
margin: -120px 0px 0px 245px;
box-shadow:
0px 0px 2px #5f5f5f,
0px 0px 0px 5px #ecf0f3,
8px 8px 15px #a7aaaf,
-8px -8px 15px #ffffff;
}
.logo{
width:83px;
height:85px;
border-radius: 50%;
margin:-05px 0px 0px -01px;
}
.large-text-title {
text-align: center;
font-size: 21px;
padding-top: 23px;
letter-spacing: 0.6px;
}
.small-text {
text-align: center;
font-size: 10px;
padding-top: 6px;
letter-spacing: 3.1px;
}
.input-fields {
width: 82%;
padding: 30px 5.1px 5.1px 5.1px;
margin: 0 0px 0px 50px ;
}
.input-fields input {
border: none;
outline:none;
background: none;
font-size: 12px;
color: #555;
padding:15px 5px 10px 2px;
}
.username, .password {
margin-bottom: 15px;
border-radius: 5px;
box-shadow: inset 8px 8px 8px #cbced1,
inset -8px -8px 8px #ffffff;
}
.input-fields svg {
height: 25px;
margin:0 10px -3px 25px;
}
.signin-button {
outline: none;
border:none;
cursor: pointer;
width: 60%;
height: 40px;
border-radius: 29.9px;
font-size: 15px;
font-weight: 699.9;
font-family: monospace;
color:#fff;
text-align: center;
background: #24cfaa;
box-shadow: 3px 3px 8px #b1b1b1,
-3px -3px 8px #ffffff;
transition: 0.5s;
margin: 15px 0px 0px 80px;
}
.signin-button:hover {
background: #fa0879;
}
.link {
padding-top: 20px;
text-align: center;
}
.link a {
color:#aaa;
font-size: 15px;
}
.footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
margin: 10px 0 10px 0;
font-size: 20px;
text-align:center;
color: white;
box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
-6px -6px 10px -1px rgba(255,255,255,0.7);
border: 1px solid rgba(0,0,0,0);
transition: transform 0.5s;
background: #24cfaa;
border: 1px solid #24cfaa;
}
.footer:hover{
background-color: #fa6060;
}
.footer-text{
margin: 10.1px 0;
font-family: sans-serif;
}
.footer-link{
color: #ffffff;
text-decoration: none;
margin-right:5px;
}
.footer-link:hover{
color:#24cfaa;
}
</style>
</html>
---------------------------------------------------------------------------------
If you want input of any other project, then visit our website and if any project which you think should be in our website, then comment and if you want to share your project with us, then email it to us.
Let us tell you that when you send your project to us, then send a screenshot of the project with it and send a photo and name along with it that you want to show to the public.
0 Comments